7 ways to make or break a professional web design

Posted

Creating a truly professional web design is not the easiest of tasks. Just knowing the x’s and o’s of web design does not guarantee that you are a great web designer. Even those who have ample talent and tons of practice sometimes produce results that are below expectations.

So what is it about some sites that, despite having all of their ducks in a row, just seem dull? There are a lot of things that can go wrong on a web site both in terms of functionality and design. Some are more obvious than others but there are a few key elements that, if abused or forgotten, will always hinder the final result of your web design.

The balancing act

One of the key elements to a truly professional design is also one of the hardest to master. While it may have a subtle visual effect, a proper page balance will do wonders for a web site’s usability.

Great page balance is achieved through consistency. From spacing to structure it is important that you don’t throw any curve balls at the user once they become comfortable with the way your page is laid out. A great way to ensure that you maintain the proper page balance is to use a grid system. When done right, a grid system will ensure persistence in your negative space and allow you to structure your page elements in size to provide a natural hierarchy of importance.

balance

A few thousand words

Amateur photography may be the most visually obvious element on this list. Regardless of how well you have completed everything else, if your design is peppered with grainy, flat, or poorly cropped images your site will come across as unprofessional.

If there is one thing you should never skip out on its high quality photography. Not only should you be willing to shell out some cash for real photography but skipping out on the time it takes to do high quality cropping and clipping can really hurt your design as well. If you need to remove the background from an image make sure you take the time to do it the right way!

Photography

Refine your palette

Designers should always have a good sense of color and know how to use it. In addition to the content and graphic elements of a page your color selection has a role in conveying mood and message. In addition to the mood of your design, colors help to highlight important page elements.

Use color to help your users eyes move across the page but be careful that it’s not distracting. There are tons of resources on the web dedicated to showing off and discussing color combinations and the different effects they have. Don’t forget that not only are black and white colors themselves but they are arguably the most important ones! A white background should be the result of an active decision rather than the lack of one.

Color Palette

Follow your themes child!

Keep your page style consistent. The best web pages create an immersive environment for the user to navigate through from top to bottom. From simple graphic elements to embedded interactive features make sure everything fits the style of your web site.

Don’t settle for the default controls of a video player if a custom design does a better job of fitting the theme of your web site. Of course some things are easier to get away with than others but the best web sites always consider the entirety of the environment the user is navigating through. When isolated elements don’t appear to fit in terms of style it will become glaringly obvious.

Themes

Mind your P’s and Q’s

A typeface is as much a part of any site interface as colors and graphics. Generally it is best to stick to one or two typefaces throughout a site, if extra attention is needed to any text elements use size, color, spacing and other options to draw attention. One way you can get away with some font face variation is to have a different face for your headlines compared to your paragraphs of copy.

Making any changes to the way the content of your site is displayed is going to make the user think they have arrived in the wrong location; especially if you take a large jump such as moving from a sans-serif to a serif font. Keeping a consistent color scheme for your text in the different sections of your site is important too. Links, highlights, and general content need a base of consistency to keep your users from becoming confused.

Typography

Easy on the effects

Everyone seems to have an opinion on whether or not designers should fall victim to trends that sweep through the internet. While imitating the work of others may not be the most original thing to do there is a reason that a lot of these trends become popular. Flashy headlines, ornate calls to action, and interactivity can improve your web site but only when used correctly and in good taste.

The real problem with trendy pages is trend overload. When applying special effects to page elements ask yourself if the visual improvement will assist or impede your users. A visual effect should always have a positive influence on the environment of the web site so avoid flashy effects that simply provide extra decoration.

Simple Effects

Finish Finish Finish!

This one I can’t place enough emphasis on. Never launch a site that is not finished. This should be a given but it does still happen, not only all the time but also all over the place, even on highly regarded web sites.

You could have the most creative, beautiful, awesome looking web site in the world; if the navigation takes me to a dead link it’s a terrible site in my eyes. After all the primary purpose of any web site is to deliver a message that is generally carried out with content, not design. If your content is incomplete or broken then your design is not ready for launch.

Your two cents

Your turn. Did I miss something important? Was one of my points totally bogus man? What types of design practices have you see improve or degrade a site design?

One Response to “7 ways to make or break a professional web design”

  1. Libby

    Hi Jason,

    This is a great article! I especially agree with you about the last point – on finishing your websites! I am the same way – I will find a site and be SO impressed by it….until I find a broken link or something else that doesn’t work, and then in my mind “the party’s over,” in a sense.

    It can be tough when a client is pushing you to launch the site, saying “we’ll just finish that later” – so I think you kind of have to learn HOW to launch a not-quite-complete website. If you do it on purpose, I think it can be done – for instance, if you make sure all the links work but the pages that they take visitors too say specifically that the page is under construction and will be available soon or something along those lines. And then offer the visitor links to other areas of the site they might want to visit – so that it is not an entirely negative experience. Obviously, that is still not ideal – but it’s on purpose and you are aware of the problem and are taking actions to make sure that a visitor’s experience is still as positive as possible.

    Anyways, that’s just my two cents. Thanks again for a great read! :)

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>