Successful Web Design Comes Down to the Details

Design • Website DesignCarrie Cousins • January 29, 2013 • 6 minutes READ

The start of a great site design begins as a sketch but what it really comes down to is the details.

It’s the little things that can take a site design from average to extraordinary and neglecting the details can essentially ruin a site concept. Think about color and shading, text, icons and elements, and alignment and grids when outlining your next project. Consider how each of these parts will factor into the overall design.

Color and Shading

Color is important to the overall scheme. Develop and stick to a defined color palette.

Using a set of colors creates a feeling of consistency and purpose from page to page on a site. Develop a palette with a handful of colors and tints and use only these hues throughout the site. Color can be almost as important as a logo for helping a user know where he or she is; it simply creates a sense of place.

The color scheme can also set a mood for the project. Choose colors carefully and in collaboration with the message the site is trying to convey.

Once a color scheme is developed, consider other shading elements such as shadows and gradients. These can be some of the most effective (and often poorly used) elements in your designer’s toolkit.

The key to using shading elements is for them to not be seen. If the first thing you notice is a shadow or gradient, it is probably executed poorly. These tools are used for accent and should help the design, not overpower it.

Shadows, typically, should be soft and pale. Drop shadows in design should mirror the effect of real shadows in natural light. Think about the placement, depth and angle. Does it look natural? Is it subtle or obtrusive? Keep shadows consistent in location, placement and angle. One item with a shadow to the left paired with an item with a shadow to the right will feel off balance.

Gradients are best used for special purposes and not as a design catch-all. The best gradients are subtle – think changes within a single color family, not a gradient that changes from red to green.

Text and Fonts

As with color, pick a simple palette and stick to it. One or two type families per project is generally plenty. By investing in high-quality typefaces, you will get a variety of options with each – bold, light, black, italics, condensed, etc.

Make sure text is readable at every size (and don’t forget mobile). It is also important to create a sense of type hierarchy. Important words, including any display type, headers or important information should be the biggest. Generally, the smallest font size on your site is the body text. Everything else should be larger.

Size variances (including point size and stroke weight) are important. Increasing a font just one or two points is relatively unnoticeable. Increase sizes so that different kinds of type are obvious and easy to follow.

Remember, the eye will almost always move from the biggest, boldest text to the smallest.

Icons and Elements

It is rare that you will come across a site that does not include a set of icons and elements. They are so common, in fact, that you might not even notice them. But these elements are an integral part of a great design plan.

Think of all the little things – forms to register for a site or newsletter, tint boxes, video or sound bars, visitor tracking information, author bio notations, and even navigational tools – are part of a bigger icon and elements framework.

These pieces should have a consistent look and feel. And they don’t have to be created from scratch. Many designers opt to start with a user interface kit for these parts to save time and get a site launched sooner. The key to using a pre-made set is customization. Make sure to use a kit that allows you to change the colors, fonts and basic specs of icon and element sets so that the site looks like your own and matches your design outline.

One of the most popular UI frameworks available, The Bricks, has three great add-ons that can help you get rolling with consistent and customizable icon and element sets.

Words UI: Text elements can be found all over most sites – blog posts, quotes, menus, recent activity lists, comments, events. The Words UI kit is a giant toolbox of parts to create these design elements with ease. The added bonus to using a kit is that you know everything will have a consistent look. The elements are downloadable in an instant and come in vector format, so your options are pretty limitless at any size.

Elements UI: One of the most fun packs out there is Elements UI. This kit has so many little tools that can really add another level to your design project. From sliders to players to checkout buttons and notification windows, this pack has a little bit of everything. What even more is that each element is designed with the details in mind, from precise shadowing to angles and edges in a customizable vector format. The pack is a great starter kit, especially for someone new to design.

Forms UI: Most sites are not complete without some type of form. Think about the purpose of many websites – they are trying to get a user to perform a specific action whether it be a purchase, newsletter signup or help request. The Forms UI kit includes a variety of forms – from a simple password reset request to a complete e-commerce checkout. The look is more modern than many others and is designed with precision, whereas this part of many sites tends to be forgotten in the design process.

E-commerce UI: The pack includes everything necessary for building e-commerce or shopping site projects. The pack includes pricing tables, shopping cart, checkout process page, sliders for products, price filters, rating reviews, dynamic price, big menus and cart elements, as well as many other components.

Alignment and Grids

Every element on your site — from photos, to navigation tools to text – should fall into some sort of pattern of alignment. Oddly aligned starts and stops can be very difficult to follow and read.

Start with a great grid as a framework. Not only does a good grid system provide structure, it should also be adaptable and responsive in today’s web market.

Zurb’s Foundation is one of the most adaptable, usable and reliable grid systems out there. It is easy to use, works across a variety of environments and comes with a variety of options “right out of the box.”

Once you have a grid structure in place, stick to it. Every element should fall into perfect alignment.

Then think about text alignment. Text can line up in one of four ways – left-, center- or right- aligned or justified.

Left-aligned is the easiest to read for large blocks of text. Center alignment is a popular option for display text or small text blocks but can cause readability concerns when used for more than a few lines of text. Right-aligned text can be the most difficult to read and should be avoided except for small bits of text or large display. Justified text (which spreads the width of each frame for every line) is seldom used in web design because it can look odd, cause spacing concerns and has associated readability issues.