design3
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
46<br />
The Principles of Beautiful Web Design<br />
The questions asked during this session concerned Carrie’s business benefits from her site, and<br />
what she was trying to do with incoming visitors. During this session, we discovered that her goal<br />
was to build a mailing list of visitors to her site—visitors who were mainly local and regional, and<br />
who needed to find out more information about KRG’s services. We also learned that sells products<br />
in her shop, and is an affiliate with several natural health product companies.<br />
One of the most important things a web designer does is to organize and group like information.<br />
This is an essential part of usability because, if a visitor can’t find something in a logical place, it<br />
makes the site unpleasant to visit. We web designers don’t simply keep all of this information in<br />
our heads; we have tools available to help us organize content. There isn’t a single best method for<br />
organizing the information found on a website.<br />
Many designers and developers have their own way or organizing information. Some use sticky<br />
notes, while others use methods such as artboards, storyboards, etc. I tend to make lists and group<br />
content together. I also use mind-mapping software, which helps to create a central idea and move<br />
out from there. Here I organize pages and group everything together. This helps me get a sense of<br />
how the site will flow, with the main content and page structure all laid out. Then, I can decide<br />
which areas may need extra attention to ensure a varied, but unified layout.<br />
Figure 1.48. Sticky-note information architecture<br />
Once I have organized all of the data I’ve received and analyzed, I create a mock-up of the general<br />
layout of the home page. Some designers and developers use Adobe Illustrator or Photoshop, and<br />
others use mock-up tools like Balsamiq 42 to create their basic mock-ups. From the information I<br />
gathered, I created a mock-up, as shown in the figure below.<br />
42 http://balsamiq.com/