While each web designer or web development company has a different plan for building a website, there is a list of what to do in common for most such projects. We created this checklist that we made with the essential items in the construction of a good web interface that is consistent, easy to use and aesthetically pleasing.
Space between elements, personalized quality images, effective internal search tools, and creative ways to invite the user to the interaction. These are the elements that together define the user experience that accesses one of your pages.
We will present here ten elements that you should prioritize on your site, followed by practical examples of each of them and tips on how to use it in your next site creation project . We’ll see what little details make all the difference.
Spacing is one of the most important elements in layouts . The space dictates the visual flow up to and speed of reading (or readability). Designers are beginning to use space in ways we have not seen on the internet in the past decade mainly because of the popularization of touch screens.
There should be a consistency in spacing and space relations. Similar elements should include similar spacing. The amount of space between the lines of a paragraph should follow a pattern (or proportions), as well as the size of the margin around the images.
Space is also important when creating a focal point for the perception of the interface. An image or block of text surrounded by white space may appear to be larger and more important than one allocated along with other blocks of information and in a tighter part of the layout.
It is also worth remembering that space should not necessarily be white. It refers to the absence of elements and may well be a dark background color or a well applied texture.
Navigation should not be complicated! It should be easy to identify and use. It is also important to keep the navigation menus simplified, so they do not overload the user with a lot of information.
Web browsing also includes tools that help users stream through the site. Sites with parallax effect , for example, often include arrows that guide the user. A layout should be user-friendly . The easier it is for people to navigate your site, the more likely it is to get what you’re looking for before you leave.
The “About Us” page should tell users who you are and what you do . It can be used to present the company’s philosophies and goals, or how the site was developed. It can also be the right place for positive testimonials and reviews of users and customers, as well as company success stories. This type of page can also serve directing the user to related pages and social networking profiles.
The biggest problem with the “about us” pages is that they tend to stay long and very descriptive. Keep the page as straightforward as possible; give users only the information they need to be interested in the business, not bored. Remember to keep the design interesting and invite them to get to know the rest of your site.
Contact information appears in two of the most common ways: at the top or bottom of the site or on the “Contact Us” page or similar.
Either of these ways can work well, depending on the information architecture of your site. The key is to do it in a highly visible way. Presenting information like phone, address or a form to contact the site owner is the best way to give legitimacy to your project. It is frustrating for the user to try to contact you and not succeed (unless it is purposeful).
What is the purpose of your site? Your website is the gateway to your business, and you should build it thinking about what it should be most efficient. Whether it is a sale of products, services or some information gathering, you must ensure that it is being designed to meet this conversion and the invitations to that interaction should be direct and obvious – no question.
Some of the tips we’ve given here help guide you in the right direction. Dropbox, for example, is very interested that you register early, so you already propose this right on the first page. And you, are you directing your homepage to get your conversion as fast as possible?
Not everyone has the time to search for specific content by site navigation, so search is such an important tool. Draw the search box in a discreet and easy-to-use form, but make sure the box is large enough and always visible. If you want an icon for the search use the magnifying glass without fear, it is a universal icon.
The footer is a way to summarize your site and bring forward pages that relate to the institutional part of your company, such as social networks, address and contact. Because its location is at the bottom of the page, it is also the ideal space for a small site map, relevant links and a brief description of what the site is.
Make the footer simple and useful . When creating a footer that exposes links or buttons, the important thing is to be visually integrated with the site. It may even have a much more minimalist touch than the whole, but give it a personality.
Every button on a website should be recognized as a button (know what Affordances are ). They must have the same effects regardless of their location or purpose. Creating a set of different buttons can be a challenging task in the case of sites with many clickable items. Consider creating a button kit to maintain consistency and visual cohesion throughout the site.
Do not forget to use statistics tracking tools like Crazyegg or Google Analytics to measure with A / B tests that button colors or sizes are giving more result.
People love to see things in action. Create stunning visuals to please users on your site. Good pictures or illustrations are an easy way to do this. With a small set of great photographs you can display products, people, or anything to encourage the engagement of users in your website or app .
As the internet is at a stage where the weight of images is not a factor that compromises access to the site, we have more freedom to use higher resolution images, but remember to offer an alternative to mobile devices. Also be careful when using image banks ( stock images ) as a source for your site does not lose identity.
Once upon a time … The time when the web was ordered by a restricted set of sources because the options that were recognized by most browsers were very limited (Arial and Verdana, who never?). Today this limitation no longer exists and we have great Open Source tools to use a much wider range of unique fonts like Google Web Fonts or Adobe Fonts .
However, native fonts are still very important for two reasons: compatibility and performance, so do not abuse loaded fonts and take advantage of those already available in the system. Webfonts can also be important for positioning the website in search engines (SEO) if used in place of images that would have text to say something.
These are 10 tips that we consider very important for the design in a blog project, virtual stores and institutional sites here in Man Machine. They will certainly help you in creating a layout that helps you achieve your brand goals and also serves the visitors.
To make an incredible layout you have to take into account the typography, colors in the interface and use a responsive design . But let’s take it easy, one step at a time. The basics you’ve already learned here
Make the best layout the world has ever seen. Do you have any tips to share with us? Leave in the comments!