Being a Designer — Part1

How can one create really beautiful websites and also end up satisfying users in the process ? By PLANNING !! It is really important to design keeping the users in mind and not just an engineers instinct.

Information Architecture(IA) is used to as a base to build any website. It is the process where in one can break the content of a site, organize that data with a logical relation in mind. The logical diagram is usually created in the form of a flowchart diagram which can reflect all the connections between the content. IA also helps in deciding the navigation of the site in the most efficient way. So it is highly important to chalk out an ideal IA for the site.

IA diagram

The first step is to gather all the possible content that must be there on the site and try to categorize it into chunks such that all relevant data ends up in the same bucket. Next step is to chalk out the IA diagram. When working on the overall navigation of the site, one needs to think carefully about the elements involved like the buttons and nav bars and how effectively can they adhere to the IA flowchart. Hence it is important to have the top level navigation sorted before we enter the coding stage.

There are a multitude of menu types and we need to decide which one to use keeping in mind the usage of space, language options, animation effects and so on. The main component being sorted, we can now create some basic sketches depicting this. This saves time as we start with a foundation of how the website would look and later iterate on it if need be.

Sketches == Functionality

Design gurus often recommend to make the first round of sketches on paper with no fancy colors. This way the stakeholders will be focused on the layout rather than the fancy styling which can take away the main idea from the website — the content. Once the basic layout for the site is decided upon, the next step is to work on making a storyboard. Storyboards are a quick and flexible way to brainstorm ideas and also get rid of the ideas in case they don’t turn out to be the way the users want to go. No time wasted behind code hence more time and energy for the later stages. Storyboards add all the necessary components of a website like color, the interaction dynamics, navigation keys…It is basically the entire website on paper :D

Code Prototyping

Hey so the stakeholders loved the storyboard designs ha ? Thats great, but what next? The much awaited coding prototype is what we dive into next. Most times when working with customers, it is more professional to showcase the design ideas with the help of coded prototypes. This is an iterative process where changes can be defined in the website depending on the customer feedback received.

Good Design, Bad Content

The customer just dumped a 500 line paragraph on your head to put up on the site, but is it a good idea to put it all in word to word? No matter how great the design, layout of the site, if the content is not smartly worded then the website won’t be able to fulfill its destiny. A smart designer always puts the content in smartly and for this its good to have some basic writing skills in place:D Most users don’t bother reading every word on sites, all they need to digest the facts are keywords. Use this to your advantage and put in content as per its level of importance. Headers attract the most attention and the shorter the paragraph the more chances that someone will actually sit through the whole content. Bullet points also help in making people notice the content along with bold and italics styles.

Finally….

Web design is form of communication and it can be used to its fullest potential only if we consider the needs and requirements of the Users. We don’t want to drive away our audience form something that actually has potential. This is the whole idea behind User Centered Design. So design well and create happy customers :)

Source: Head First Web Design and numerous design blogs. Image from Google Images.

Like this:

Like Loading…