Creating a website may be one of the things we have to do eventually; whether we create a small blog or a massive network of media websites, at some point comes the big question: is the daily effort I put in this really worthwhile? You might be experiencing low (or not at all) traffic, and maybe, just maybe, that’s because of your website’s design. This article is going to address the main features and characteristics that make a website special and frequently visited, as well as showing other aspects that affect usability.

Layout

Facebook has a three column layout which has worked great so far

Flat design and the development of more robust versions of CSS and HTML have help developers and designers creating awesome and functional websites with less code. This way, important advances in web design have been made, giving birth to different layering strategies and ways. Great layouts are those which successfully guide the user through the website to achieve the objectives you set, but they don’t just start digitally. Layouts start in paper as drawings, representing graphically the ideas you have and organizing them the best way possible. Once you have a wireframe of the website, you can start the digital process by adding grids and selecting the typography you want to use. Layouts compress several elements, so for this purpose, creating blocks of content will help the user to navigate easily. Keep it as simple as you can but don’t disregard making changes to improving the layout, and that great designs are easy to edit and maintain, so the code plays a fundamental role in this part of the process.

One page layouts, with very few elements also work smoothly

Also, to be responsive is probably the most important aspect of a layout nowadays. Your website is going to be read in a wide range of mobile devices, so paying attention to that in your entire process is important. To help you, this article gives you 20 aspects a great layout always has.

Widgets

Although widgets were pretty big a few years ago, today they are suffering some sort of abandonment in recently designed websites. Widgets are little boxes created to portray quick information or data, like recent tweets, a calendar, newsletter forms, social share buttons, the about, the weather, and even the search. Some of them are really useful within a context, but they’re generally used as decorative elements, so they are becoming useless over time. Widgets tend to have no direct connection with the rest of the content, being independent objects,  showing random data.

Nicely integrated calendar widget

What we recommend is that you don’t use widgets unless users can really benefit from them. Big companies have understood that widgets are basically useless unless you relate them with the rest of the content. Also, be sure to integrate them with the design; avoid using the “default” widget some social networks and services provide since they relate more to the looks of such network instead of resembling your website. Customize it whenever you can so your website looks smooth and clear.

Menus

As part of the layout, menus are the main element of a website regarding navigation. There are websites with two or more menus; this is not a bad thing since dividing the content to be easily identifiable and accessed is a required step in the process. This, however, can be addressed differently and more efficiently by integrating all menus into a super-menu, preferably in a fixed position and with the visual aid of icons and small labels, in order to make it understandable. Menus can have many shapes, but the recommended ones are those with squared contours (since they integrate better with a flat user interface); they work great being fixed and located on the left of the screen, or they also serve well on top. And since we established responsiveness is a matter of capital importance, a correctly handled menu shouldn’t be a problem.

If you have one menu to access important content within your website, other for the latest news and one more for social integration, you can create a single super-menu where you can access all of them. Each particular menu can be accessed through a simple button with an icon and a label (or just an icon), so the super-menu looks clean and easy to the eye.

Some examples are portrayed up next, all of them matching the criteria for a nicely designed and well located menu, disregarding the differences.

Menu for the website Sir John A. Day, which is fixed and integrates al the necessary content, like socials

lifeinmyshoes integrates the logo in the menu. It’s fixed and group the important elements of the website

Wanda

Shout Digital

Social Icons

Social integration is something very few companies (Apple…) can afford to avoid. Social networks have become the main channel people use to communicate and find information for their interests. So, as a fundamental part of your business, you should integrate them through social icons, preferably at the top of your layout and even better, in a fixed position so they can be viewed all the time.

In the previous point of this article, we established menus can be integrated into a super-menu that helps users access to content on the site easily and which works for clearing the overall design. So that way, social icons can be an additional part of this super-menu, and inside, you can locate every one of your networks, with neither huge nor very small icons, making them stand out and giving them contrast with the background in order to have the desired effect.

Color

Selecting a compelling color scheme could be both beneficial and harmful for your website. You have to acknowledge colors can be used freely since there’s no specific color that makes your website more beautiful. But what would be truly influential is the way you use every one of them. The basis of great color management in a website are triggering feelings and  motivating action.

Even though color may signify something different and activate diverse emotions in every individual, there are common aspects of colors that tend to cause a general reaction in the mind. This has exclusive relation with our evolution. Since the early ages of humanity, we related colors to daylight, night the sea and the grass, and also to potential threats. So that way, red, orange and yellow are similar to the fire and the sun, elements that our psyche didn’t understand quite well, provoking impulsive reactions. These are called warm colors.

Viljamis uses a warm color over a white background and fulfills the objective to draw attention

Using warm colors transmits passion, enthusiasm, energy and movement. So if you want to direct attention to a specific place (like a button or an ad), apply a warm color to it.

On the other hand, green, purple and blue are cool colors, used mainly to give a sense of tranquility, growth, professionalism and power. Cool colors have that effect in our minds since we relate them with natural elements of the world, like the grass, the earth and the sea. Apply this kinds of colors if you want to give a sense of tranquility, professionalism and reliability.

decode’s simple use of color relaxes the user

Finally, we have the neutral colors, which are used to complement the rest of the colors. Black, white, beige and grey are neutral colors, and they are better used as backgrounds and in typography; they play the role of stabilizing the design. You can learn how to use color and how to implement it perfectly in this series of articles by Smashing Magazine.

Stephen Gacheru highlights smooth colors with the help of a dark background

Great examples of web design are created every day: we have given you some basic understanding to creating a good website, but what really drives website’s success is experimentation and analysis. Be sure to create, test, and deploy, and after that, keep creating, testing and deploying. Don’t be afraid of doing changes one at a time; you’ll see how perfection is only achieved through small changes.