Starting anything from scratch can be daunting. It’s the same when it comes to web design. With so many possibilities, how can you leave enough breadcrumbs to avoid getting lost in your creative maze? The best advice to ensure you don’t stray from the path is to have a clear image of your brand and its overall message throughout the design process. This way, you can always refer back, remaining true to your concept. However, whether you’re designing a website for yourself or for a client, you might need a few more practical tips to make the most out of it. From finding inspiration to building the actual layout and choosing your color palette, here are the best practices in building a website from scratch.
1. Do your homework
Remember those kids that used to spend their recesses reading and always won the spelling bees? Whether you were one of them or not, now’s the time to do your homework. Ensure you have a clear understanding of the exact goal of the website you’re building. Is it for branding, to attract new customers or to use it as a business card? Once you have all the answers, make sure the site you create is compliant to your or your client’s brand identity. Your findings will have an impact on the smallest details, like the color of a button or the font of a title.
2. Be curious
Once you feel you’ve mastered the brand, move on to visual research. Search top design blogs and social media channels like Pinterest and Instagram. Finding inspiration shouldn’t involve only your eyes, but also your legs. You can find treasures in real life, browsing magazines, going to exhibitions and observing window displays. Gather all the images from your findings and keep only the ones that align with your brand’s look and feel – is it fun and exotic, or clean and organized? Final tip: get to know your competitors. Explore websites from the same field and decide how your site will be similar or different to them. In other words: “keep your friends close and your enemies closer.”
3. Prepare your best content
Now is the time to collect all your written and visual elements. After all, a beautiful site won’t ensure your visitors’ return, if the content isn’t up to scratch. One golden rule here: always pick quality over quantity, and only display your best and most up-to-date content. It sounds obvious for an online store (you don’t want to show collections from fall 1992, do you?), but it’s the case for any other website. For example, if you’re a photographer, it’s recommended to go for 20 to 30 pictures per gallery maximum – but only your most stunning ones. It’s better to leave your visitors with a desire for more. Plus, overloading your website might make it slower – and Internet users are not the most patient, especially on smartphones.
4. Create the architecture
It’s time to do something you haven’t done since the 11th grade: take a blank sheet of paper and a pen. You’ll use them to draw the architecture of your site, that is to say, the way your pages are connected to one another. Being precise here will considerably ease the process in the next stages. Moreover, a well-organized website is also easier to browse and will retain your visitors for longer. Finally, Google loves seeing pages that are well connected to one another, resulting in better SEO. The best practice here is to make sure that your pages are connected in a way that a visitor shouldn’t have to click more than twice to move from one page to any other page of your site.
So, which pages should you add? A website always needs a homepage, a gallery of what you offer (services, eStore, photos, etc.), an “About” page and a contact section – including social media channels. Then, based on your activity, you might want to add some of these extras:
- A blog: great to boost your SEO.
- A testimonial section: let your clients do the promotion!
- A booking widget: for online reservations and payments.
5. Build your layout
The placement of elements on your pages has a big effect on the overall aesthetics, so consider which layout best reflects your site’s look and feel. To narrow it down, here are the two current major schools of web design:
- The “classic” one, with multi-page websites.
- The “modern” with long scrolling one-pagers, inspired by feeds on social media.
In every case, there’s one option that works better than the other. It depends on your brand identity (you did take stage one seriously, didn’t you?), your type of business and your own preferences. Option one tends to suit traditional businesses. It’s also recommended for sites with a lot of written content. Option two is more trendy and fits businesses with mainly visual content.
If you go for the second option, consider separating sections using strips and columns to create grids – a clear and aesthetic way to display images. They also keep the viewers interested whilst scrolling and help them ‘digest’ your content more easily. See how Mercedes deBellard created a superb grid layout with Wix, that displays her works in an optimal way, with a clean background and clickable images.
6. Keep it clean and organized
Your visitors should feel at home on your website. This means that you want it to be as organized as possible. Think about hierarchy here. The most critical and/or eye-catching elements should be placed at the top left of your page, above the fold. Indeed, studies have shown that when looking at a page, we tend to start from the top left, then our eyes move right and down, following an “F” or “Z” shape.
You also want your website to look clean. Whether you’re using a grid or any other type of layout, leave space between elements to create a sense of breathing. A border around the edges of the screen is also a must, especially in mobile design. Ensure your site looks professional by repeating the same space in all areas, as well as aligning elements to one another to avoid disorder.
7. Show your two colors
Colors not only have different psychological impacts on people, influencing the feel of your site; they also play an important role in its general performance (conversion to clients, time spent on page, etc.). Before delving in too deep, check if your brand already has a color scheme. If not, you should use color theory to help you decide on a color palette. Want to play it safe? Go for a clean white – or black, if you’re feeling wild – background and incorporate a maximum of two more colors. Explore how designer Mike Almanza creates a powerful aesthetic effect on his Wix website with only a few shades of grey and red.
8. Pick the right fonts
Although rules are there to be broken, it is generally recommended to keep your fonts consistent. Start with a maximum of two throughout your website. You can allow yourself some creativity for the titles, but when it comes to the text in your paragraphs, keep it clean, simple and easy to read. Stick to a maximum of three font sizes on each page, to create order. Play around with different weights and styles to emphasize certain words and create a hierarchy.
9. Add the final touches
Just as a gift isn’t complete without a ribbon, a website isn’t ready without a few finishing touches. These can come in the form of welcome animations and parallax – all of which you can add on Wix without a single line of code. Uploading a video to your website is also an easy, yet efficient way to catch your visitors’ attention, and make them stay longer on your pages. These small but essential additions can help link between elements and add to the overall sensation your site conveys.
10. Use an extra pair of eyes
Everybody needs a little help from their friends. Once all the elements are in place, ask people you trust for a second opinion on your website. This way, they can proof-read the copy, go over all buttons and links to check they work in a logical and flowing way, and also tell you if the brand’s message is clear and consistent. Finally, ensure you’ve adapted the website for mobile viewing and that it performs well on different devices – and you’re good to hit that “Publish” button!
Final words:
If you’ve got this far, chances are you’ve done a thorough job, so kudos to you! But if you think the work on your site ends here, think again. A website needs to be tended to, just like a baby. If you want your website to successfully blossom into adulthood, you have to maintain it, keeping the design up to date with the trends and ensuring it’s constantly SEO ready.
Ready to lay the first bricks of your website? Delve into the world of web design with Wix now.
