So, you’re designing a new website for your site or business. Chances are you have a color palette, wireframes, and navigation style done up, but there are many other elements that contribute to a well-rounded and consistent design as well. Here is a look at seven of the most commonly overlooked elements of web design.
Many people who approach design treat the background of the design as an afterthought or “what’s left over,” rather than as a living and breathing element of design. This is especially true in the world of web design. As this article explains, the background design on a website has the power to direct focus to the product or message, all while optimizing readability and the overall user experience. A good background design guides the eye to the focal point, doesn’t distract, provides breathing room, and suits the overall tone of the website. It should also be able to extend to fit larger screen sizes.
This one is simple but significant. Contrast will have a major effect on the overall user experience of your site, so it’s important to make sure it works for your users. When contrast isn’t strong enough, users will have trouble reading your content, and when contrast is too sharp, the result can be a little jarring (hence why many sites display text in dark grey rather than true black). Consider designing your website in grayscale first, as color can distract you from seeing potential issues in readability and overall visibility.
Link styling is crucial to optimizing usability and creating a truly cohesive design. It has also changed somewhat over recent years with the rise of mobile devices and tablets, where hover features simply don’t show themselves (there’s no cursor on a mobile device, after all.) This makes it all the more important to style links in such a way that they are readily apparent on the web page. This means defining a “default” state style for the link and customizing the “active” and “visited” states as well. It’s still a good idea to customize a link’s “hover” state, as this greatly enhances a desktop user’s experience. Keep in mind with link styling that it will likely need to be tailored for different areas of your site; a hover style in the body text of your website where the background is white, for example, might need to be different for your footer where the background is darker.
Button styling is similar to link styling in that various states need to be styled—in this case, “default,” “hover,” “click,” and “disabled.” Be sure to account for each state and to tailor your styling to the particular area of the site. Make sure all buttons resemble buttons and that there is consistent styling throughout.
Login fields, newsletter signups, search boxes, content forms—these are all examples of forms that you can custom design to complement your overall site design. Form design is a crucial element in web design because forms are the means by which users interact with the website owner. Through forms, visitors can be converted into customers. Some important elements of forms to consider styling are labels, default input field text, submit buttons, and the input fields themselves. A well designed form is part of a cohesive design and enhances usability for the visitor.
Similar to forms is site feedback—confirmation that a form was submitted successfully, an error message about a form not being completed correctly (post-back validation), real-time validation when filling out forms (such as a green check that pops up), and other status messages. Style these pop-up messages so that users will have an easy user experience and so that these messages suit the rest of their site.
A particular type of site feedback where there is potential for a great deal of customization is the 404 page. Users who mistype a URL within your domain or who click on a link within your domain that is no longer active will be directed to your domain’s error 404 page. Make sure your site has a 404 page so that users will know what’s up when they navigate to a dead URL.