46 The Principles of Beautiful Web Design The questions asked during this session concerned Carrie’s business benefits from her site, and what she was trying to do with incoming visitors. During this session, we discovered that her goal was to build a mailing list of visitors to her site—visitors who were mainly local and regional, and who needed to find out more information about KRG’s services. We also learned that sells products in her shop, and is an affiliate with several natural health product companies. One of the most important things a web designer does is to organize and group like information. This is an essential part of usability because, if a visitor can’t find something in a logical place, it makes the site unpleasant to visit. We web designers don’t simply keep all of this information in our heads; we have tools available to help us organize content. There isn’t a single best method for organizing the information found on a website. Many designers and developers have their own way or organizing information. Some use sticky notes, while others use methods such as artboards, storyboards, etc. I tend to make lists and group content together. I also use mind-mapping software, which helps to create a central idea and move out from there. Here I organize pages and group everything together. This helps me get a sense of how the site will flow, with the main content and page structure all laid out. Then, I can decide which areas may need extra attention to ensure a varied, but unified layout. Figure 1.48. Sticky-note information architecture Once I have organized all of the data I’ve received and analyzed, I create a mock-up of the general layout of the home page. Some designers and developers use Adobe Illustrator or Photoshop, and others use mock-up tools like Balsamiq 42 to create their basic mock-ups. From the information I gathered, I created a mock-up, as shown in the figure below. 42 http://balsamiq.com/
Layout and Composition 47 Figure 1.49. Proposed home page wireframe for KRG Notice that there are no colors, no real images, and no actual HTML elements in this example. The goal of a wireframe is simply to establish the layout structure and the positioning of elements. In a good design, users “recognize each page as belonging to the site. That doesn’t necessarily mean that the layout of each page has to be exactly the same. In fact, it’s good to work in some contrast between the home page and other pages in the site. As I created the wireframes for the rest of the site, I “spiced up” the process by planning alternate layouts for some sections, such as the Blog section shown in Figure 1.50. Figure 1.50. Wireframe for the Blog Page of KRG The Blog page has a similar appearance, but the layout is completely different. Keeping elements such as the header and the sidebar is fine, but the layout of the blog post area has to be different. Dividing the post content into multiple columns, like those found on the home page, would make the post text difficult to read. Unifying these two columns into one gives the text plenty of room to breathe. A call-to-action for an email sign-up is located at the bottom of the post. Okay, maybe “spiced things up” is a bit of an overstatement when talking about colorless wireframes, but the design ball has certainly started rolling here. Now that the rough KRG layout is mapped out, it’s time to move on to the next subject: color!
From responsive design to the actual content of the site itself, you need to think about which message your webpage sends to visitors. If you have been instructed to design a website for your customer, follow these points recommended by Kunsh Technologies to create a unique user experience that inspires viewers to become loyal brand advocates.