A quality website is the best way to present products, services, and ideas to the world which is why it is worth spending plenty of time developing your web design ideas and layout. However, it can be very overwhelming starting from a blank canvas. Luckily there are some best practices for design and layout to help you know where to start.
How to Begin
Maybe you may have a thriving brick and mortar store, but no online presence or a local service that you’re ready to expand. That’s great! If you already have a brand, logo, and/or professional color palette, you have a good start on creating an impactful online presence. But even those of you starting with only your thoughts can benefit from the these web design ideas.
Firstly, what is the mood you want evoke with your website? What color palette reflects your brand? Do you want to soothe clients into a relaxing mindset or invigorate and motivate them? Are you more of a classic or modern company? If you’re not certain, creating a mood board either physically or using a website like Canva allows you to visualize your brand in a new way.
What’s Next?
Secondly, it’s time to lay out the goals for your website. These goals should include what you want the website to accomplish and how you want customers to complete that experience. For example, if you are selling a new kind of trainer specifically for taller people, you want people to learn about the benefits of your trainer and ultimately buy them. How do you want to provide the information and how do you want people to learn? Would a short video about why tall people need different trainers be helpful? Would an illustrative cross section of the shoe with mouse over information pop outs be a better option? Will you offer a coupon pop up to capture customer’s email address information?
This is also the time to think about how your website design will look on mobile devices. Google research shows the majority of online experiences are via cell phones and tablets. As such, designing for mobile responsiveness should be your priority.
Web Standards: Necessary or Optional
The internet is no longer the brand new, uncharted territory it once was. We can now access decades of data on user experience to know what works and what users expect. By straying too far from web standards in your web design ideas or layout, you risk alienating users. Luckily, just because there are standards, this does not mean there are rigid absolutes. So while users may expect certain elements to be in specific locations, things such as color, shape, space, and overall presentation are up to you!
When it comes to web standards, users expect the following from a website:
- Top left corner – website logo
- Top right or center – contact information
- Across the top – main navigation
- High on the home page – main headline and call-to-action (CTA)
- Header – search feature
- Footer – social media icons
- Across all pages – consistency in design, color, font, branding, etc
Design the Layout
There are a handful of layouts that designers tend to choose from based on website content, goals, and the feel of the brand. Layouts that mimic natural eye scanning patterns (for the purpose of this article we refer to the natural eye scanning patterns of English language readers, readers of languages such as Hebrew and Mandarin have different eye scanning patterns) produce the best results.
The 2 most common layouts that follow this pattern are the F-shape and Z-shape. Note that the F-shape can leave information on the right side of the screen unread. Whereas the Z-shape draws the eye from far left to far right, then diagonally down to the left, and again to the right. But do not feel limited to these 2 shapes!
Those wanting to immediately tie a visual to their product name should choose a full screen photo or featured image layout. These layouts are often chosen by clothing designers and artists as they allow bold photos to make a strong first impression. Grid or magazine layouts are wonderful for newspaper websites, vlogs, or other information heavy websites. Headline and thumbnail gallery layouts are another wonderful option for blogs and publication sites. And don’t discount the tried and true single column or split screen layout to enhance shopping experiences or launch products.
Additional Tips
By now you have a good amount of information to start your design journey, but there are a few things to keep in mind.
- Is the navigation simple, clear, and consistent? In other words, can users readily find their way around.
- Is there a clear visual hierarchy? Are the headings and subheading clearly defined through use of color, size, or space? Have you used bulleted or numbered lists or created small groupings of important information?
- Does your call-to-action button stand out? Have you highlighted your CTA using color, contrast, and location? In fact, do all your buttons clearly stand out as clickable links?
- Have you included an About Us section to build customer trust and familiarity? Including a team photo and short biography of the company helps customers feel confident in your brand.
- Are your fonts easily read by non-native speakers and screen readers? It is important to remember that not everyone experiences the internet in the same way. Some adaptive technologies may have trouble translating screenshots and screen readers are not able to read emojis. This is another reason why adding alt text for your images is important.
- Don’t be afraid of the scroll! Yes, the most important information belongs “above the fold”. But don’t be afraid to create a longer home page that requires scrolling. First time users can be hesitant to begin clicking links. By creating a home page that requires a little bit of scrolling, you’re building trust that once the customer begins clicking further, there is quality content.
- Keep SEO in mind when writing content. There are countless tutorials on SEO on the internet, but the very quick idea is that you want to give your website every opportunity possible to be found by users. This is best accomplished by paid advertising and search engine optimization (SEO). SEO is how search engines like Google understand what is on your website and know to show it to users. It can be very daunting and confusing, especially for first time web designers. So it is definitely worth researching whether having a professional build your website is the right option for you.
Are You Ready?
If all of this still has you ready to get going on your own, we can find a hosting platform for your web design. Check out our article on WordPress vs SquareSpace for more on the 2 most popular hosting platforms. Or if you’re ready to turn it over to the pros, feel free to contact us for a quote! We’re happy to start from scratch or work with your web design ideas.
