There is far more to the web design process than just the construction of a website. In the hands of a truly talented designer and developer, a website can be crafted to serve not only the end user but also the search engines that could potentially deliver an ongoing stream of new users for years to come.
This guide provides a first-look at the 7 elements of modern web design that we focus on at Vestor Logic. These elements are the focus of every single project we undertake and are more involved than the brief descriptions below might suggest. But the sections below will provide you with a sound overview of the basic tenets of effective web design.
Form follows function
The concept of form following function was popularized by the Bauhaus and German Modernist movement in the early 1900s and basically boils down to this: primarily a thing must work well, how it’s dressed up comes second.
How does that relate to website design? We’ve all seen sites with a lot of fancy bells and whistles, beautiful to look at, but… wait a minute, where is the navigation? How to I contact this business? Are there any other pages? Maybe you get lucky while scrolling around the page, and a button or piece of content reveals itself. How many people take the time to scroll around in the hopes of a Eureka moment? How many look at the page for ten seconds, decide it’s broken–or worse, just a terrible site–and click away?
Form: the design, colors and ornamentation of your site, should come second to the site’s main function: it’s usability for the user. It must WORK (or function) as its primary goal. After that has been well taken care of, you can move onto designing its look and feel (or form).
This is why often user experience architects begin with grayscale wireframes, so they can focus on how the site will work and flow, how the user will move through the site, without getting distracted by cool logos, fancy animations and bold colors.
1. Responsive design
The ability for web developers to change the look of a site instantly, based on the device it is being viewed on was probably the most important change that has happened to web design in the past ten years. Responsive design refers to your site’s ability to reconfigure itself to look good on any device. Today, well over half of all internet usage is performed on a device smaller than your desktop. That percentage is even higher for online shopping. Your site needs to be accessible and functional (there’s that word again!) from tablets, phones, and whatever is coming five minutes from now.
Responsive design enables your site to reflow based on the size of the screen. This often means changing the layout of the site, using a smaller navigation, smaller images and logos, and increasing font size, to name a few.
2. Optimized architecture
Sounds complex and daunting doesn’t it? But building a website with the proper architecture doesn’t have to be.
Search engines like Google have certain expectations for how websites are built and structured. The good news is that if a site is built well for humans it will most likely be robot friendly as well. By robots, we mean the little software gnomes dispatched by search engines to crawl the pages of a website in order to index, determine relevance, and then display the best page in search results for users. Optimizing the design of the site for search engines includes proper permalink structure, a way of formatting links to each page with slugs containing words that highlight the content of the page.
Effective site architecture also ensures that only one version of a page or post is presented to search engine crawlers to avoid duplicate content penalties. And with content managed properly, sites need to be able to render that content quickly. Slow page load times can have an adverse impact on your site’s usability and search engine rankings.
An optimized architecture will ensure that your site can be crawled by search engines, indexed effectively, and loaded quickly when users drop by for a visit.
3. Usability/user experience
Your site’s main function is to serve the user. Yes, you want your site to communicate YOUR message, advance YOUR goals, and increase YOUR sales, but that will only happen if the site works well for your users/customers. If it doesn’t, know that the next guy’s will.
Here are just a few usability considerations:
- Can your user find a way to contact you easily?
- Is your text readable across all devices?
- Speaking of readability, is your text broken into small digestible chunks?
- Are your action buttons big enough to click on a phone?
- Does your navigation take over your entire screen when on a mobile device?
- Are your user-intended actions as easy to execute as possible across all devices?
Well-executed design will take all of this and more into consideration from – the user’s perspective.
4. Navigation
At the heart of usability and the user experience on small business websites is the navigation function. Sites with redundant and effective navigation links provide the user with a better experience and allow them to effectively and efficiently move about the site.
The process of defining your site’s navigation menus and those helpful links in the footer and universally on the sidebar should start well before the design and development process. Insightful navigation begins to take place in the planning process as the information architecture of the website is wireframed and defined. There is no hard and fast standard for navigation. Each website must be designed to highlight the cornerstone content and subtly guide users where they don’t yet know they want to go. That’s the power of effective navigation.
5. Typography
Typography: the font(s) you use on your website. You might be thinking, eh, just pick a font, whatever. But then you might end up with this:
Which is great if you are running a preschool; but not great for your employment consulting site.
Selecting a font for your site used to be a sad affair, unless you wanted everything to be an image (you didn’t) you had about three to six fonts that could be counted on to render on most computers. The font had to be installed on the user’s computer to render correctly. Thanks to Google fonts and others, we now can choose from many fonts that will be served directly from those companies to your users. What is loaded on your user’s computer is irrelevant. Hallelujah! Sweet fonty freedom!
Buuuuuut … with great font choice comes great responsibility. Again, we go back to form follows function, your body copy font must be extremely readable, or you will lose readers. You could have the most compelling content in the world but if it’s too hard to read, no one will ever know.
Online, sans-serif rules readability. In print, we see serif fonts as more readable. If you want to get fancy with your fonts, save it for larger headings. It will still have the same impact without blinding your users.
Size matters
The size of your font is also important. While users can increase the size of fonts on their computers or devices, not all of them know how. Blocks of tiny text might look super clean, but if no one can read them, what’s the point? 12pt used to be fairly standard, but that is being bumped into the 16pt range more frequently, which works well on desktop and phones. You can go even bigger on your device versus desktop, thanks to responsive design, as mentioned above.
6. Imagery and iconography
Now that you’ve got function all worked out, you can move onto form. The imagery and iconography you select for your site will be your user’s first glimpse into who you are. While giant slick images can be gorgeous, try not to overdo it or your hamstring your sites load time. One “hero image” on the home page, properly optimized to look good but now be a huge load burden, is plenty. Watch out for fancy, bloated, animated themes and use homepage video sparingly. If the site loads too slowly people are going to click away.
Meaningful icons work well and typically load quickly. Consider using them in place of large photos if they make sense with your content, especially if you are using them without text:
7. Color palette
The color palette you select also serves to give users a “feel” for your business: pale pink is rarely used for motocross sites. There are loads of studies on color theory, and its variations internationally (white connotes death in Japan, for example) which may or may not be relevant for your business. Here are a few general guidelines:
- Keep the background behind your text white or light (no black backgrounds with white text, please!) for readability.
- Your fonts should be either black, dark gray or another deep shade.
- Links should be colorful enough to be instantly visible compared to the body text, but not too jarringly bright or hard to read.
- Your colors should compliment your logo, if you have one.
Colourlovers is a great site for checking out web design trends (colourlovers.com/web/trends/websites)
Feel free to leave this part up to us, we’ll determine a palette that be will appropriate your business and look great.
