We build web applications.
From business tools to social and educational media, we have the team that can turn your tech fantasies into reality.

Podcast 3: Visual Design

Posted in Podcast by admin with Comments Off

Jan2010 10

Experience has taught us that when clients think about websites they think visually. What does the website look like? In last podcast on the subject of information architecture we talked about the foundation that is put down before we do any design work. Today we will talk about what goes into creating a good design and you will see how that information architecture foundation helps make good design decisions possible.

The ultimate goal of website design

Usually we start at the beginning but when talking about design issues we actually like to start at the end. What is the goal of website design? Quite simply, it’s to create an interface that is usable, easy to navigate and presents content in a logical, easy to read manner. And thanks to the information architecture work that was done in our previous step we have already defined our navigation and know what should figure more prominently and less prominently in the design.

The nuts and bolts of getting to our goal

Perhaps the best way to illustrate how we’ll achieve our goal of a user friendly interface is to talk about the different steps in the design process and pay close attention to how they dovetail with our previous information architecture work to create a finished product that not only looks great but keeps usability at the forefront.

Sketches

With all the technology out there you may think that there are all kinds of outstanding solutions for starting a design. However, for our money, nothing beats a blank piece of paper and a pencil (preferably with a large eraser) to sketch out the overall design. During the sketching process we are working closely with the information architecture document and literally sketching out how the interface may layout. Where will the navigation be placed? Main content? Related features? Logo? Ads? Mailing list signup? Legal statement? The sketching process allows us to look a the big picture and find a place for all of the elements the website requires and, more importantly, how these elements will help guide the user through the website. Frequent erasing and re-sketching is common at this stage as different approaches are thought through.

Grids and layout

Once the sketches are flushed out and we are happy with the interface from a big picture standpoint it’s time to open Photoshop and bring those sketches to life. But before we talk about colors and fonts and imagery we want to talk about grids. Grid-based design has been used in traditional printed media forever. In recent years there has been a trend to use them in website design as well. Why grids? Grids help align elements on the screen to create a clean, uniform look that also improves the overall user experience by allowing visitors to easily scan the screen. We are a huge fan of grid-based design and like to start our Photoshop file by creating grids that will accommodate the elements in our sketches. You’d be amazed what a difference alignment can make with any design. They are the skeleton that we’ll hang everything on.

Color palette

OK, so we have our sketches of how the overall interface will fit together and we’ve created a grid that will help us with aligning the elements used in our design. The next step is to define a color palette. Colors can be warm or cool. They can convey happiness or anger, elegance or aggression. The color palette will largely set the overall tone of the design. Now a color palette should not consist of too many colors. We tend to use no more than three main colors (and often related shades of those colors). We also like to use one accent color that will pop against the other colors in the palette for accent pieces that we’ll want to draw attention to. Many people tend to think that more is better when it comes to defining a color palette but just the opposite is the case. A small color palette will provide a solid, unified look across the entire website.

Imagery

Imagery to be used on a website can come from many sources. Most of the time the imagery we are working with is photographic, although sometimes illustrations are used as well. We have worked on projects with clients who’ve had amazing professional photography available and we have worked with clients who had snapshots they took in low light on a camera phone. As you might imagine there is a rather sizable discrepancy in quality of these photos. Imagery – be it photographs or illustrations – should be something to highlight and pull people into the design and not be something that your designer has to work around. As such we always recommend considering either a professional photographer and/or illustrator or professional stock imagery, particularly if the design is going to rely heavily on this imagery. Imagery needn’t be overwhelming to be effective. We usually find that a single piece of well placed imagery can have an outstanding effect on the overall design.

Textures and backgrounds

So at this point we are moving right along and the design is coming together nicely. We have our layout established (again, based on our information architecture work), we’ve defined a solid color palette and we’ve added some great imagery to the design. At this stage we usually have a solid visual for the new website but it tends to be a little flat. This is where textures and backgrounds come into play. Now a texture or a backgrounds need not be big and gaudy to add dimensionality to the design. A gentle background fade can make the difference between an OK design and one that really jumps out and feels very modern. So in this step of the design process we are dealing with more subtle enhancements to give the design a little more pop and dimensionality that it had before this step.

Fonts

And speaking of subtle enhancements that can make a big difference … let’s talk about fonts. We tend to start with a standard arial or helvetica font when beginning a design and then come back to adjust the fonts later as the design nears completion. Each font has it’s own feeling so matching the font to the overall feeling of the website is important. If the website is trying to convey a very elegant and posh feeling perhaps a flowing cursive font will be used. If the website is striving for a more industrial feeling a block font will convey strength far better than that flowing cursive font. Selecting the right fonts (and font combinations) can make or break a design. Now you may be saying to yourself, ‘Hey, we thought there were only a handful of fonts a website could use?’ Yes. This is true to a degree. We are limited to a handful of fonts that all browsers and operating systems will display, however there are a number of font replacement techniques that will allow us to use any font we choose for headlines across the website. These non-standard website fonts will be used sparingly in our design and provide accents rather than altering all the fonts across the website (which would present usability issues).

Finishing touches

We are almost there. Everything is looking great! At this point we are almost ready to present the design for review. However before so doing we like to stress about the little details. It may be the addition of a stylized line to separate sections or a rough edged background in the header or an accent used for lists on the website. These little details add that final bit of uniqueness that will make the website inviting to visitors and draw them in. With these little touches in place it is time to finalize the design.

Delivery of comps

We made it! The design is ready for review. When we deliver design comps we post them as standard .jpg files on a client page along with notes we made during the design process describing decisions we made along the way. These decisions will be based on the information architecture of the website and the priority that has been placed on each element. Once presented there are usually some revisions to make based on your feedback. Once these are done the design phase is complete!

Conclusion

While the visual aspects of website design tends to be what people focus on, it is important to note the solid foundation information architecture provided before any visual aspect of the design ever begins. This foundation played a role in all of the key decisions made with the visual design from our sketches right through to our finishing touches. Because of this work we are able to create an interface that is usable, easy to navigate and presents content in a logical, easy to read manner. The visual aspects of the design may pull people in but a solid information architecture will help keep them on your new website.

Post dicussion

Comments are closed.

  • Subscribe

    You can have new podcasts delivered to you as soon as they're published simply by subscribing to the RSS Feed below!

     

    Subscribe to RSS Feed | What is RSS?

     

     

  • Have a question?

    If you have any questions regarding a podcast, please post here:


    Name*

    Email*

    Location

    Your Question*

    Enter This Code*
    captcha

Downloads Web Designing Capabilities Presentation
Brochure on Internet Marketing
Brochure on Softwares for Education
Features of TestEzee Online Testing & Assessment Platform
Contact
General inquiries: contact@texelgraphics.com
Support: visit the FAQs
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 8
Updates

Our newsletter is awesome. Subscribe and get the latest updates.