Welcome to Phase 4: Design
Learn the DOs and DONTs of designing an aesthetic landing page!
What you’ll learn
…
…
…
Design
Click on each checkpoint to see more information about how to best implement it.
START HERE: ...
…
1. Use premium templates to save time and avoid paying a developer (save that for marketing expenses)
Use premium templates to save time and avoid paying a developer (save that for marketing expenses).
2. Brand your theme around 3 colors (main background color, secondary background color, accent color, e.g. buttons, icons, graphics)
Brand your theme around 3 colors (main background color, secondary background color, accent color, e.g. buttons, icons, graphics).
3. Choose a color palette that complements the branding and creates a cohesive look throughout the landing page
Choose a color palette that complements the branding and creates a cohesive look throughout the landing page.
4. Use white space to create a clean and organized layout that allows the user to focus on the most important elements
Use white space to create a clean and organized layout that allows the user to focus on the most important elements.
5. Use no more than 3 fonts (headline font, body text font (same for subheadlines in increased font size), third font if needed for accents)
Use no more than 3 fonts (headline font, body text font (same for subheadlines in increased font size), third font if needed for accents).
6. Use typography that is easy to read, matches the branding, and creates a visual hierarchy to guide the user's attention
Use typography that is easy to read, matches the branding, and creates a visual hierarchy to guide the user’s attention.
7. Use responsive typography that adapts to different screen sizes and devices, to ensure a consistent user experience across all platforms
Use responsive typography that adapts to different screen sizes and devices, to ensure a consistent user experience across all platforms.
8. Design the landing page to be responsive to different screen sizes and devices, to ensure a consistent user experience
Design the landing page to be responsive to different screen sizes and devices, to ensure a consistent user experience.
9. Use the same margins and paddings across the entire page (all sections have the same distance from each other)
Use the same margins and paddings across the entire page (all sections have the same distance from each other).
10. Avoid stock images if possible (they are obvious and give "a cheap look")
Avoid stock images if possible (they are obvious and give “a cheap look”).
11. Use Canva to create professional backgrounds, illustrations, graphics
Use Canva to create professional backgrounds, illustrations, graphics.
12. Use dynamic elements, such as parallax scrolling or animated backgrounds, to create a more dynamic and interactive user experience
Use dynamic elements, such as parallax scrolling or animated backgrounds, to create a more dynamic and interactive user experience.
13. Use high-quality video to create a more engaging and immersive user experience, such as by showing the product in action
Use high-quality video to create a more engaging and immersive user experience, such as by showing the product in action.
14. Use user-generated content, such as social media posts or reviews, to create a more authentic and relatable design that builds trust with the user
Use user-generated content, such as social media posts or reviews, to create a more authentic and relatable design that builds trust with the user.
15. Use creative infographics to present complex information in a more engaging and memorable way
Use creative infographics to present complex information in a more engaging and memorable way.
16. Consider the loading speed of the landing page and optimize the design and images to ensure fast load times
Consider the loading speed of the landing page and optimize the design and images to ensure fast load times.
17. Use a unique loading animation that reflects the branding and messaging of the landing page, to create a more memorable and enjoyable user experience
Use a unique loading animation that reflects the branding and messaging of the landing page, to create a more memorable and enjoyable user experience.
18. Continuously test and optimize the landing page to improve its performance, such as by using A/B testing to compare different designs and messaging
Continuously test and optimize the landing page to improve its performance, such as by using A/B testing to compare different designs and messaging.
19. Digital business logo (no physical products) logos can be simple, make it a text-only with your business name
Digital business logo (no physical products) logos can be simple, make it a text-only with your business name.
Ready for the next phase?
…
Or jump to any phase!
While we suggest you follow each phase in order, step-by-step, for the best results, you can jump to any phase at any time and create your own learning flow.
Phase 1: Structuring
Learn how to structure a winning landing page, what sections to include, and their specific order to create the perfect customer journey. You’ll also have a template to ease the process!
Phase 2: Copywriting
Learn our best practices for writing winning copy. Please complete the structuring phase first as the copywriting phase helps you develop the outline you create during the structuring phase.
Phase 3: Development
Learn how to build a winning landing page even if you have little to no technical skills. Phase 3 is focused on no-code tools and foundational practices, so you don’t need to hire a developer.
Phase 5: Pre-launch
Learn how to set yourself up for success by developing your pre-launch strategy. Phase 5 will give you a brief insight into how to create your first ad campaigns and ensure they’re successful!
Ecomhub Agency
We help entrepreneurs and brands grow and scale their businesses.
