Successful Web Design: It’s All About The Details

Pay attention to alignment, contrast, type effects and color because these items can make or break your website design.

Successful Web Design: It’s All About The Details

While the tools are out there for almost anyone to build a website, the most successful designs all share a few characteristics. These sites tend to be organized well, have great content and have all the design details in order.

Small parts of your site, from alignment and bolding to contrast and color, can make or break the design. Taking care of the details before your project is published will ensure the page has a clean overall feel. Unorganized design and lack of attention to detail can leave a site design looking unprofessional and even jarring. Before you start your next project think about all the little things and how they can pull your project together.

Alignment

One of the first keys to a clean design is vertical and horizontal alignment. Just dropping elements in random placements will not have the clean, consistent feel that is associated with some of the best, most professional looking sites. Proper alignment helps a site maintain hierarchy and consistency in design.

When working with images and text elements, note how things line up horizontally across the page. Do the tops of each item rest in a straight line? What about the bottoms of each element?

You also want to keep an eye on the vertical alignment. Keep the widths of elements consistent and pay special attention to the empty spaces between elements. The gutters (or space between elements) should be the same from element to element. Notice how nice photos of different widths fit on a grid on the Jux site. Gutters have consistent widths and photos of varying shapes align perfectly.

One of the quickest and simplest ways to keep your items aligned properly is to work with a grid as you design your site. There is no hard and fast rule for what type or size of grid will work best but using some sort of grid structure will help you build with alignment in mind.

Use the grid to place and size elements as you build. You can work with a grid that consists of evenly spaced vertical and horizontal squares (which resemble the old grid paper you used in geometry class) or you can use more of a columnar grid. You can create the grid yourself or download a premade template.

Contrast

Certain elements of your site will always garner more attention than others because of an image or color or text. Planning and using contrast effectively will ensure that you determine where the eye goes first. Establish contrasting elements in your design using color, text and varying weights. Determine where you will really want attention to go on the site and create the most contrast in that area.

One of the easiest ways to create contrast is through color. Once you have established background and text colors, use something totally different to add emphasis to a certain part of the site. Take note of the minimalist approach used by Doberman. The site relies on a basic (but clean and reliable) black and white color scheme but adds yellow color blocking for emphasis. The bright color directly contrasts with the stark nature of the underlying theme and immediately draws the eye. Further, the site designer added touches of blue for additional contrast in other key areas of the site.

You can also create contrast through a variety of other devices. Varying large and small font sizes or thick and thin typefaces also establish contrast and help develop a sense of hierarchy.

Type effects

Making type selections and decisions can be one of the toughest parts of creating a site from scratch. To keep your design clean, focus on a limited selection of fonts or font families. Too many typefaces can ruin even the most-detailed project.

Use variants within font families for variety. Different sizes, cases, weights and color can add variety and contrast without having to add additional fonts. As a general rule, most sites can be built using just two typeface families. Simple typography can help establish order and is easy to read.

When you are planning how to use each font, think about size and weight. Use the same font attributes for common items across the site. Use one font, case, size and color for headers. Use the same font but another size, color or weight for subheaders and use a third color or weight for bold or strong characters within the body text. Take notes that you can refer back to as you set the type attributes for different parts of the site so that type specs are consistent from page to page.

Color

In the same way using a limited number of typefaces can benefit design, a small color palette can do the same. Determine your color palette and note the color mixes for each swatch. Use the exact color mixes throughout the site. Red is not just red; even slight variances in your colors between elements can be very jarring.

Jot down all your color values as you build the site. For variances, use tints of each color for emphasis and added effect. Netlife Research, for example, does a great job of sticking to a consistent (mono)color palette using three tints of the same green throughout the site. Your palette does not have to be this simple but keep this principle in mind as you begin sketching a new design.

Consistency

The most key detail of all can be consistency. Across all elements on the site, maintain a look and feel. Logos, headers and banners should not look dramatically different from page to page. Use the same words in your navigation. Use the same or similar colors for common elements. Stick to your font palette. If you have a grid, use it.

Make sure all the small components of the site are complete. Leaving the little things for later can really hurt your site today. Make a checklist of things to be on the lookout for as you finish the design:

  • Vertical object alignment.
  • Horizontal object alignment.
  • Contrasting elements for emphasis.
  • Number of fonts.
  • Consistent font sizes.
  • Number of colors.
  • Proper color mixes.
  • Consistent elements such as headers and footers.

Image Credits: “Coloured Leaves” by pareeerica

Tagged with:

Carrie Cousins

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 24

Comments are closed.
  1. Amazing article. I love this website, lots of things to learn and implement in our new projects, as web designers. I recommending You to lots of my friends!

  2. I love this article. I know these thing before but I can not explain it clearly… Tks Carrie

    @DERC: of course that article was not wrong. But I think it depend on what the point you focus. Think about all the project or think about the on page ….

  3. Thanks Carrie! as a beginner I sometimes struggle type to the point where my actually begins to twitch. Thanks for the info and sharing.

  4. hmmm… maybe I should of read my last post… sorry for the typo’s ‘with my font’ and that would be my ‘eye’ twitching.

  5. Cheers! This article rules, because it’s based on one of my favourite words: consistency. Consistency in social media, branding practices, and website workflow makes for happy, empowered users. You make some excellent points here.

    Thanks again,
    Sarah Bauer
    Navigator Multimedia

  6. very nice and informative post and I learn lot of new things from here about the web design. Thank you so much for sharing.

  7. I only disagree (somewhat) on the multiple fonts part. I’ve seen many designs that included more than 10 fonts and it still looked great. In face, I’m using that on my new portfolio site at http://eddiepotros.com/about.html and I think it looks great. Some people don’t use alignment with different fonts which makes it look even more unique.
    I understand that too many fonts is a bad idea but sometimes, it can be good.

  8. Very good article, as HypeBuzz said, we always find lots of interesting things on your website, keep up the good work. Now that we know these useful information, we have nothing to do than to go back to work and to create better websites or to re-design the old ones. My question is: where can I find some collection of buttons and web elements which can be used for personal, as well as for commercial websites? Can I find something like this on your website?

  9. Amazing techniques and I love the color themes that have a nice and warm effect to it