Strong user interface design has slowly improved over the years as designers have become more familiar with design and development tools. Competition is very strong today due to so many designers providing quality design at affordable prices. Design is being increasingly recognized as an essential element for businesses looking to step up their web site presence or redesign their brand identity.
Concepts and sketching
Begin with a concept and your design will have a stronger message that establishes credibility your customers will value. After you’ve decided on a strong concept, start with rough sketches to explore different design possibilities. Try not to be too exact or careful with your initial sketches. They are meant to be used as a starting point to hone in on the good ideas and weed out the bad.
Once you feel you have explored a sufficient amount of ideas, move on to a few sketches you feel are strong and further refine these to a more polished state. Really begin to focus more on detail and think about what your final product might begin to look like. You still may be working out a few bugs, but it’s time to start committing to solid ideas to begin your compositions.
Keeping it clean
Typically a good design is easier and more intuitive to navigate. Clutter on your web site tends to clutter the minds of your users. A clear path to your important content is essential and is what your user is there for. A confusing initial visit may result in a speedy exit from your web site. Be clear and concise about your message and make it obvious where content is located. Successful interface design will have the perfect combination of well designed navigation and content organization.
Grid or free flowing
Grid based design provides users a predictable site layout for users to learn and find content quickly. For designers, it provides us with a method of organizing content to create systematic layouts for CMS sites, applications, blogs, etc.
Free flowing design is less about and more about visual harmony and content flow. Each page may have a unique layout for its content. There may not be an apparent plan or system in place for organizing the content. Many portfolio and showcase sites that are more about presentation than discussion will typically use a free flowing design.
Page and Space
There are many ways to avoid rigid and static looking content. Pull quotes are a great way to add emphasis to break up long or create an interesting use of type. These can systematically be used in a blog post or a regular content page. Like pull quotes, images can also be used to break up space to add visual rhythm and emphasis to certain areas. A good approach is to use images consistently in two to three places in your template for a more predictable layout.
Type and Images
Two of the strongest elements at your fingertips are type and images. Images used properly help balance what may be an initially rigid page design. An offset is used with overlapping page elements to unevenly break up spaces throughout the design. Template headers and footers are good areas for images and can be excellent locations to use these offsetting elements.
Typography is one of the strongest and most difficult ways to create rich design in your layouts. When you have reached your limits with the handful of web-safe fonts, there are many ways to change the look of headers, navigation links, body copy, etc. Since this post is about design, I will not dig into all of the possibilities. Just keep in mind that some methods are more elaborate than others, so work within your capabilities and you will be much happier.
An immediate mood can be established with a well selected font that compliments the content and overall concept of the website. A clean san-serif or fancy serif font can give two completely different personalities to your web site content. Keep in mind that your core design concept should have a substantial influence on your serif vs. san-serif choice and further your selection within these two categories. For example, a more sophisticated casual site could use the fonts Caslon, Baskerville or Georgia. A professional corporate site could use Avant Garde, Franklin Gothic or Avenir. Or a combination of the two can be carefully used in certain situations, but limit the number of fonts you use.
To achieve good rhythm and harmony with your web layouts, use these tips as a guide to get you started. Be smart and make conscious decisions throughout your process. Keep in mind that every decision you make affects your end product. That said, let loose and experiment early with your designs to generate unexpected results that will set you apart from other designers.