Designing for the Web: First Steps

design-for-usabilityWhat is design? What is the difference between a web designer and a graphic designer? What does a web designer do? In this article I will be answering these questions and showing techniques of how to become a good web designer.

Many people mistakenly believe that a web designer’s role is restricted to making a beautiful web page. They tend to consider design as mere aesthetics production, disregarding completely the conception of the project. Before starting, we must be aware that design refers to a visual and functional project of a product (in our case, a website). Definition for design goes far beyond to Photoshop files. Design is an entire project and not merely illustration. A design’s function is to generate performance, quality, durability and good appearance to something. Each design project requires planning, research, creativity and techniques. The web designer’s function is to adapt a website to its users. A website’s users should be captivated through the pages’ aesthetics and practicality. Summarizing a web designer’s role is to make something functional, and transform information in communication.

Being a designer is to understand users’ needs and produce concepts, solutions and products that people use and want to use. This requires a focus on human behavior, psychology and an understanding of why people do what they do. Having a fast and functional website is a requirement, but having also a beautiful and practice layout makes a great difference. People give importance to a project’s aesthetics but also to its usability.  Designers must evaluate and make the users’ interaction with a website more enjoyable, easy and convenient.

Unlike graphic designers, web designers are tied to the Internet’s limitations. Graphic designers work with high-resolution graphics and static images. On the other hand, web designers worry with the website’s quality of navigation. A good web designer is concerned with maintaining the website’s aesthetic quality, but, above all, a web designer is concerned with the speed that a webpage will be downloaded by the user.

Good Web Designers follow and use the Web Standards. The Web Standards seek to organize and make websites production more simple and effective, giving higher attention to quality of coding from web pages. The Web standards divide and organize websites’ production in three layers (content, presentation and behavior), all related but not dependent on one another. The Advantages of using separation in content (XHTML), presentation (CSS) and behavior (JavaScript) layers are:

  • With smaller files in  presentation (CSS) and behavior layers, JavaScript files will be loaded in the browser cache; webpages will be loaded faster; and their quicker user experience.
  • With the formatting of all pages based on the same CSS file, we will have a better visual consistency, possible maintenance and make redesign cheaper and more efficient.
  • With more semantic markup (used with its proper meaning) and the document information structured in a logical sequence, we will have better results in search engines, and better accessibility and interoperability between different devices.

Good tools help a good design elaboration. Currently, proprietary tools such as Photoshop and Dreamweaver are the most used tools and they provide easier website production and edition. But for those who do not have financial resources to acquire their licenses, open source software can be a good (or unique) option. Both, GIMP and Inkscape are great graphic editor options. These tools are relatively new and still have a small community of users. So they do not outweigh Photoshop, which has been used for a long time and has quantity and quality of resources, interface, icons, shortcuts, and automation higher than its competitors. However, we must put in our mind that in a web project, the quality of a design does not depend on the tool being used, but the designer’s talent and creativity. The utilization of software owners, as Photoshop, makes the production process easier, but does not determine the product quality.

Steps to create a good design:

  1. Make a document (briefing) where will be the project’s goals, product, target audience (gender, age, culture, social class, etc.), visual identity, motivation, etc.
  2. Make another document (wireframe) where you will plan the best way that the information will be displayed on the website. Organizing how the interface will be structured and how the information will be spread (categories and priorities). This document will represent the information’s distribution and hierarchy. You will find good tools to make this wireframe at the link: http://wireframes.tumblr.com/. Or if you prefer, you can use the traditional method (paper and pencil).
  3. Build the website’s layout.

Some advice:

  • To accomplish a good design, you need to do concepts and visual communication studies. You should be aware of why using certain colors, shapes and fonts, images and sensations and what those elements are going to make a user feel. A great tool that can assist you with the Color Palette is found at the link: http://kuler.adobe.com.
  • Be aware that the font style being used is related to the project context and will also affect the user and it should be totally readable.
  • Finishing: Simplify, simplify, simplify! Include only those elements that will help people to simplify their tasks. Less is more. No element should be on a web page without having a defined function. To make the “simple” is always more difficult.