Branding and preview

Make your Voxifly boards match your brand identity with custom branding options and use the live preview to see changes before publishing.

Branding options

Visual branding

Logo: Upload your company logo
Colors: Custom color scheme
Typography: Font selection and sizing
Layout: Customize board appearance

Content branding

Hero sections: Welcome messages and descriptions
Headers: Page titles and navigation
Footer: Contact information and links
Call-to-actions: Custom buttons and messaging

Setting up branding

Logo configuration

Go to Project Settings → Branding
Click "Upload Logo"
Choose image file (PNG, JPG, SVG)
Adjust size and positioning
Preview changes in real-time

Color customization

Primary color: Main brand color
Secondary color: Accent color
Background: Page background color
Text: Text color for readability
Links: Link color and hover states

Typography settings

Font family: Choose from available fonts
Font sizes: Adjust heading and body text
Font weights: Bold, regular, light options
Line spacing: Improve readability

Live preview

Using the preview

Real-time updates: See changes instantly
Multiple views: Preview all board types
Device testing: Check mobile and desktop views
Save drafts: Test before publishing

Preview features

Issue board: See how issues appear
Roadmap board: Preview roadmap layout
Changelog board: Check changelog appearance
Mobile view: Test responsive design

Content customization

Hero sections

Welcome message: Greet users on your board
Description: Explain your feedback process
Call-to-action: Guide users to submit feedback
Visual elements: Add images or graphics

Navigation

Menu items: Customize navigation links
Breadcrumbs: Show user location
Search: Enable/disable search functionality
Filters: Customize available filters

Footer content

Contact information: Email, phone, address
Social links: Connect social media accounts
Legal links: Privacy policy, terms of service
Company information: About your organization

Brand consistency

Design principles

Color harmony: Use consistent color palette
Typography: Maintain font consistency
Spacing: Consistent margins and padding
Imagery: Use brand-appropriate images

Content guidelines

Tone of voice: Match your brand personality
Messaging: Consistent with main website
Call-to-actions: Clear and compelling
Instructions: Helpful and user-friendly

Advanced customization

CSS customization

Custom styles: Add your own CSS
Theme overrides: Modify default styling
Responsive design: Ensure mobile compatibility
Accessibility: Maintain accessibility standards

JavaScript integration

Custom scripts: Add tracking or analytics
Interactive elements: Enhance user experience
Third-party tools: Integrate external services
Performance: Optimize loading times

Testing and validation

Cross-browser testing

Chrome: Test in Chrome browser
Firefox: Verify Firefox compatibility
Safari: Check Safari rendering
Edge: Test Edge browser support

Device testing

Desktop: Large screen optimization
Tablet: Medium screen adaptation
Mobile: Small screen compatibility
Touch: Touch-friendly interactions

Performance testing

Load times: Optimize page speed
Image optimization: Compress images
Code minification: Minimize CSS/JS
Caching: Implement proper caching

Best practices

Brand guidelines

Consistency: Maintain brand standards
Accessibility: Ensure inclusive design
Performance: Optimize for speed
Usability: Focus on user experience

Content strategy

Clear messaging: Communicate effectively
User guidance: Help users navigate
Regular updates: Keep content fresh
Feedback integration: Incorporate user input

Next steps