Conversion Based Design FOR WEBSITES Exclusive training for by Josh - PowerPoint PPT Presentation

Conversion Based Design FOR WEBSITES Exclusive training for by Josh Hall

Meet Your guide: Josh Hall Professionally: Web Design Course Creator & Educator at: JoshHall.co Founding Web Design Agency Owner at: InTransitStudios.com Personally: Girl dad, family man, drummer, hockey fan & aspiring lawn weenie.

Overview: 1) Conversion based Design Principles 2) Conversion based Web Structure & Flow 3) Conversion based CTA’s (call-to-actions)

1) Conversion-based Web design Principles: People Scan Websites ● People don’t read websites, they scan them; unless it’s a blog post or a long-form article. Be brief, use icons and graphics and engaging, unique designs. Web Design hack: (courtesy of Emma Kate herself) stick to a width of 15 or less words. You’re Creating a Journey ● User experience, website goals and demographics all need to be factored in your design as it leads to the journey you’re taking the user on. The design HAS to lend itself to the goals of the company meaning sometimes, you need to swallow some design pride. It’s All About Hierarchy ● Hierarchy (in color, font size, font weight, etc) is more important than anything in web because there’s so much for a user to do and see.

2) Conversion-based Web PAGE STRUCTURE & FLOW: Navigation & Menu Layout are Key ● A big emphasis for site design should be the journey that your users should take. This can be tricky when designing a site with a lot of pages and information. An organized and thought-out menu navigation is key (and huge for SEO). See example 2a. Homepage is the Hub ● A website’s homepage should be the hub where you put all the most important services, pages and funnels to help people get where they’re supposed to go. Service pages, products and blogs are where the details and answers to questions should go. See example 2b for a great homepage structure & flow. People Follow the “Z” ● Humans take information in (particularly when scanning or reading) in a “z” pattern. Be sure to follow that when designing big pages with a lot of information. See example 2B.

Example 2A: An effective site navigation/page structure.

Example 2B: An effective homepage structure/flow. 1. Hero section with primary CTA 2. Main offerings or services 3. What, why or how 4. Results, proof or testimonials 5. Footer CTA section (using any of the conversion methods mentioned next)

Example 2C: An example of structuring page content to the “Z” pattern.

3) Conversion-based CTA’S (CALL-TO-ACTIONS): Create Vibrant CTA Buttons (and or) Sections ● CTA buttons and action sections should be very noticeable, eye-catching and attention grabbing. Many designers focus on the design as a whole and contact or CTA sections get less attention. Buttons or entire CTA sections CAN be repeated as well. Avoid Passive Language ● Terms like “read more, learn more, view more” are passive language and have their place for blogs, more info, etc, but if you want someone to get a quote, purchase a product or contact you, say just that. Use terms like “Sign Up Now, Join Now, Get A Quote,” etc. ● Clear CTA’s & Funnels It’s very important, especially with sites that have numerous paths and journeys depending on the user, to lay out the CTA’s clearly and often, using funnels to get people where they need to go to click and take the next steps.

*** SPECIAL OFFER *** For Designer Boss Summit Participants only, get $50 OFF my Website Design Course! Use promo code DESIGNERBOSS at checkout. JOIN COURSE NOW