Week 6: Designing your website

Jun 08, 2023 1:31 am

Hey, ,

Welcome back to our six-week training series on building an intentional business and online presence.

Inside this edition, we’ll:

Understand the differences between wireframing and website design
Leverage your wireframe and content guide for seamless design
Introduce new elements such as colors, fonts, and more
Discover the best way to start every website project
Acquire tips for balancing aesthetics and functionality
Create consistency throughout your website’s design

Catch up on past training lessons:

Week 0: An Overview of Wix in Six

Week 1: Brand Discovery

Week 2: Website Strategy

Week 3: Content Creation

Week 4: Image Selection

Week 5: Wireframing

Next week, I'll be sharing the final step in the process and behind the scenes of me making a website, so that you can do the same for yourself (if you wish).

Get the Wix Basics course for free when you share this newsletter (details below).

Let's dive in…

—

Wireframing vs. Website Design: Understanding the Differences

Last week, we covered wireframing as a major step in designing your website by providing a skeleton or blueprint for your site’s layout and functionality.

Wireframing and website design are two essential steps in the process of creating a well-structured and visually appealing website. Let’s briefly recap wireframing and then explain how website design builds upon it by adding visual elements.

Wireframing Recap

Wireframing is the process of creating a basic layout or blueprint for your website, focusing on its structure and functionality rather than visual elements.

It involves sketching out the placement of various components like navigation menus, images, buttons, text, and other interactive elements.

Wireframing helps plan how to organize and present content on your site so that users can easily access and understand it.

Website Design Building Upon Wireframing

Once you’ve established a solid wireframe for your site, it’s time to move on to website design.

This stage involves taking your wireframe as a foundation and enhancing it with visual elements such as colors, fonts, images, videos, animations, and more.

The goal of this phase is to create an aesthetically pleasing web presence that reflects your brand identity while also providing a seamless user experience.

Website design focuses on:

Defining color schemes: Selecting harmonious colors that convey your brand’s personality and evoke desired emotions in your target audience.
Choosing appropriate fonts: Picking legible fonts that complement your design and can be easily read across various devices.
Incorporating multimedia elements: Adding images, videos, animations or other visual components that enrich user experience without distracting from the primary message or purpose of each page.
Balancing aesthetics with functionality: Ensuring that navigation throughout the site is smooth while maintaining consistent branding visuals across all pages.

We'll focus on each of these items below.

By understanding the differences between wireframing and website design, you’ll be better equipped to create beautiful websites that offer a coherent and enjoyable user experience.

—

Leveraging Your Wireframe & Content Guide for Seamless Design

Your wireframe and content guide play an important role in assisting you during the design stage of your website. By using these website design phases properly, you can create a clear and organized design with all the information needed on your site.

How your wireframe informs design decisions

As we mentioned last week, your wireframe serves as a blueprint for your website’s layout and functionality.

It helps you visualize the structure of each page and guides the placement of various elements like text, images, buttons, and navigation menus.

By referring to your wireframe during the design process, you can:

Establish a clear hierarchy of information: A well-designed wireframe highlights the most important content on each page by placing it higher up in the visual hierarchy.
Plan navigation paths: Wireframes help identify primary user journeys throughout the site, making it easier to create intuitive navigation paths.
Determine spacing and alignment: Wireframes enable you to plan how elements are spaced and aligned on each page, ensuring consistency across different pages.

Referencing your wireframe while making design decisions helps you maintain a coherent layout that focuses on usability, readability, and aesthetics.

Using your content guide to ensure all necessary information is included

Your content guide is an essential resource at this stage of the design process.

It provides a detailed overview of all the text and multimedia components that need to be integrated into your website's layout.

By following this guide during the design process, you can:

Stay true to brand messaging: The content guide should include key messages about your brand identity, value proposition, target audience, etc., allowing you to incorporate them consistently throughout the site.
Organize content logically: The content guide outlines what information should be presented on each page or section of your website. This helps you create an organized layout with logical flow between sections.
Optimize SEO efforts: Your content guide can also include suggestions for keywords or phrases that are essential for search engine optimization (SEO). Including these keywords throughout your site and its pages will boost its visibility in search results. We'll learn more about this next week.

Using wireframe and content guide together when designing your website will help you showcase your brand while providing your users with an ideal browsing experience.

—

Introducing New Elements: Colors, Fonts & More

Let's dive deeper while we cover four essential design elements that contribute significantly to your website’s overall aesthetic and user experience.

These elements are: color scheme, fonts, images, and additional visual elements like icons, illustrations, or patterns.

Selecting a color scheme that aligns with your brand identity

Color schemes play a vital role in setting the tone for your website and conveying your brand’s personality. Greg Gunn is an excellent resource for all things "Color".

To choose an effective color scheme:

Review your branding guidelines to ensure consistency across all platforms.
Understand the psychology of colors and how they evoke emotions in your target audience.
Use a dominant color for primary actions or focal points and secondary colors for accents or supporting elements.
Test various color combinations using online tools like Coolors.co or Adobe Color to find a harmonious palette that appeals to your audience while reinforcing your brand identity.

Choosing fonts that complement your design and are legible on all devices

Fonts significantly impact both the aesthetics and readability of your website.

Pro Tip: Always choose fonts that are legible over fonts that have style.

To select appropriate fonts:

Choose 2-3 fonts at most to create a sense of consistency and avoid clutter: one for headings, one for body text, and an optional font for accents or special cases.
Consider typography principles like hierarchy, contrast, spacing (kerning/leading), and alignment when designing with text.
Ensure selected fonts are web-safe or widely supported across different browsers and devices. Fun fact: Wix helps you with this.
Test readability by adjusting font sizes based on various screen resolutions—smaller screens may require larger font sizes for better legibility.

Incorporating multimedia elements (images, videos, animations)

Multimedia elements, such as images, videos, and animations, add depth and visual appeal to your website.

They can be used to enhance user experience, convey important information, or simply grab the visitors’ attention.

Here are some tips for incorporating multimedia elements:

Use high-quality images: Ensure that all images are clear, well-lit, and high-resolution.
Optimize file sizes: Compress multimedia files without sacrificing quality to improve loading times and overall site performance. Revisit my training on how to do this for your Wix website.
Be selective: Choose multimedia elements that align with your brand identity and messaging. Avoid using too many elements that could clutter your design or slow down your site.
Include alternative text (alt-text): Add descriptive alt-text to your multimedia elements for accessibility reasons and improved SEO.

Incorporating icons, illustrations, or patterns

Adding visual elements such as icons, illustrations, or patterns can enhance user experience while reinforcing brand identity:

Icons: Use simple yet meaningful icons to represent features or actions on your site (e.g., shopping cart icon). Ensure consistency in style and size across your website.
Illustrations: Custom illustrations can add personality and depth to your website, making it unique and engaging. Consider using a consistent illustration style that complements your brand identity.
Patterns: Subtle patterns or textures can elevate the visual appeal of your site without overwhelming users. Use them sparingly as background elements or accents.

When you thoughtfully integrate these essential design components—colors, typography, and supplementary visuals—your website will achieve an eye-catching appearance. It will do so, while also delivering a delightful user experience that resonates with your brand’s identity and caters to the preferences of your target audience.

—

The Best Way to Start Designing Your Website

I am sharing my most popular lesson from my course, Build Your Most Effective Landing Page, with you.

It's the best way to start every website project, because it will save you hours whenever you have to make changes to your site in the future.

Watch this lesson

—

Tips for Balancing Aesthetics & Functionality

Creating a website that is visually appealing while maintaining functionality and user experience can be challenging.

It’s essential to strike the right balance to ensure site visitors have an enjoyable browsing experience and are encouraged to engage with your content.

Here are some tips to help you balance aesthetics and functionality effectively:

Focus on User Experience (UX): Always prioritize user experience when designing your website. Ensure that navigation is intuitive, content is easy to read, and interactions are smooth. This will not only make your site more attractive but also improve its usability.
Prioritize Mobile Responsiveness: With the increasing use of mobile devices for browsing the web (~60% of your traffic), it’s essential to design your website with mobile responsiveness in mind. Make sure your site looks great and functions seamlessly across different screen sizes and devices. Wix helps you with this.
Keep Load Times in Mind: Heavy visual elements like high-resolution images, videos, or animations can significantly impact load times. When adding these elements to your site, optimize them by compressing files without losing quality. Here's that training again. This will ensure faster load times without sacrificing aesthetics.
Simplify Design Elements: Keep your design clean and simple by avoiding clutter or excessive visual elements that may distract users from their main goals on your site. Think minimal. Focus on creating a clear visual hierarchy that guides users through the most important information or actions.
Use White Space Effectively: White space – the empty space between elements – plays a significant role in creating a balanced and visually pleasing design. Use white space strategically to separate content sections, improve readability and create a sense of harmony on each page.
Consistent Color Palette & Typography: Like we mentioned earlier, choose a consistent color palette and typography throughout your website that aligns with your brand identity. This not only helps create a cohesive look but also enhances the overall user experience.
Test & Iterate: Regularly test your website’s design and functionality across various devices and browsers to identify any issues that may affect user experience. Once your website is launched (next week we talk about this), use analytics tools to monitor visitor behavior, engagement, and conversion rates. Then, use this data to inform adjustments to your design for improved performance.

When following these tips, you’ll be better equipped to create a visually appealing website that doesn’t compromise on functionality or user experience. Keep refining your design based on user feedback and analytics data to ensure ongoing success for your online presence.

—

Maintaining Consistency Throughout Your Website’s Design

Maintaining consistency in your website’s design is essential for creating a cohesive and professional look that reflects your brand identity.

Consistency also enhances user experience by making it easier for users to navigate through your site and understand the content you present.

Here are some tips on how to maintain consistency throughout your website’s design:

Creating templates for regularly used design components (e.g., blog posts, product pages)

Blog post templates: Standardize the layout of blog posts by creating a template that includes consistent heading sizes, font styles, image placement, and spacing between elements. This not only streamlines the design process but also makes it easy for users to consume content as they move from one post to another.
Product page templates: Develop a consistent layout for product pages that showcases product images, descriptions, specifications, pricing information, ratings/reviews (if applicable), call-to-action buttons (e.g., “Add to Cart / Buy Now”), and related products in an organized manner.
Navigation menus and footer sections: Create uniform navigation menus (horizontal or vertical) with clear labels for each section of your site along with consistently designed footer sections that include links to essential pages, contact information, legal pages, and social media icons.
Forms and CTAs (Call-to-Actions): Standardize the design of forms and CTA buttons across your site by using consistent colors, fonts, button shapes, and placement. This will make it easy for users to identify primary actions they need to take on various pages.

Implementing these tips in your website’s design will help you create a visually appealing and unified online presence. In addition, you'll enhance the user experience and facilitate easier navigation for visitors. Consistency in web design can lead to higher engagement rates and overall success for your online business or brand.

If you have any questions or need feedback on your design process, feel free to reach out to me.

—

Build Your Most Effective Landing Page

If you’re seeking additional guidance for your website, my online course can be found here: Build Your Most Effective Landing Page.

Start Building Today

—

What's up for next week?

Next Wednesday (June 14th), we'll be focusing on the post-production process in web design. I'll be diving into some of the finishing touches, such as: search engine optimization (SEO), analytics setup, and launching your website. Be sure not to miss it! Join me as I bring my ideas to life and make progress towards creating a fully functional website.

Get up to speed on the past few weeks: