Planning Your Website
What you’ll learn in this lesson: • Defining the goals of web design • Defining the user experience • Understanding the difference between wireframes, prototypes, and mockups.
The goals of web design To understand how to create well designed websites, it is worth understanding the fundamentals of design. Good design creates experiences that makes people’s lives easier, and is also aesthetically pleasing. Here are some examples: a well-designed store makes it easy for customers to fi nd products they are looking for, or maybe even products they never knew
iIn all these cases, the designer took time to plan the outcome using their skill and experience, as well as resources such as materials and available budget. Diff erent disciplines require diff erent design tools. The web designer is often required to organize information, give it meaning, and assemble it in a way that is visually attractive using available tools. When designing for the web, there are some unique challenges compared to other disciplines arising from the fact that web design is still in its infancy and is evolving rapidly. Even the defi nition of web design is evolving and diffi cult to defi ne. Originally, web design meant designing pages for a web browser. While this is still true, you now need to consider the rapidly evolving nature of mobile devices, tablets, smart phones, and consumer electronics that access the web. Some people make the distinction between mobile design and web design, but this distinction is evaporating as mobile devices are evolving. For many web professionals, this rapid evolution of the medium is part of what makes it such an exciting fi eld. Although the design of websites is an evolving fi eld, designers do not need to reinvent the wheel. Web design’s closest relative is print design, and although the two are distinctly diff erent it is worthwhile to compare and contrast them
Print involves seeing; the web involves doing. Books, magazines, posters, newspapers, brochures, and advertisements all contain information, usually text and images, whose intent is to deliver some sort of message or content to a reader. More importantly, designers often try to build a call to action into their work that makes a customer believe there is some action they should be taking as a result of the design.
• A visually exciting movie poster’s call to action might be, “Go see this movie!”
• A political campaign displays signs with the call to action, “Vote for me!”
• An advertisement in a magazine off ering a free sample might have the call to action, “Contact us to learn more!”
Compare a print fl yer for a shoe sale with its online counterpart. The call to action for the print fl yer is, “Show up at the store this Saturday to buy these shoes at a discount.” The information regarding the sale might be enough to compel the customer to get in their car and go shoe shopping on Saturday, but the designer helps to present the information in a way that is well organized and gets noticed. Using color, type, and perhaps an illustration or image, the designer helps to convince the potential customer of the value of this sale. In some sense, you could say that the print designer’s job is done when she sends the fi le off to the printer. If the customer shows up in the store, it becomes the salesperson’s job to complete the sale.
The goals of web design
Now let’s examine the web designer who is largely responsible for leading the prospective customer through the entire process. If an interested customer comes to the shoe store’s website, perhaps there is a button that the user clicks to see the shoes that are on sale. The customer then needs some way to gather more data on the shoes; perhaps there is a table listing the available shoe sizes, colors, and brands. If the customer takes the leap and puts a shoe into the site’s shopping cart, this shopping process needs to be designed as well. In both of these examples, the end result is hopefully the same for the shoe store’s owner: the customer buys the shoes. In both cases information is transferred from the store to the customer; however, in the case of the website, the designer is involved in all stages of the sale process. This is a crucial concept to understand: the web is an active medium and the term to describe this design process is user interaction design.
The web demands user innteractio
The experience of a website is defi ned by the interaction the user has with it. For example, a user clicks on navigation or scrolls down to read a page. Even the act of reading a book can be defi ned as user interaction. In the Western world, people read from left to right down a page, they turn pages, and scan page numbers and tables of contents in order to fi nd a certain chapter or topic. Coming back to the web, you don’t just have readers — you have users. Think of the verbs that describe what you do online: you search websites, watch the weather report, transfer money between accounts, book airline fl ights, and do many other things. The designer needs to think in these terms when designing pages, anticipating the user’s motivation for coming to the site.
Defi ning the user experience
When it comes to user interaction, off ering too many options can be just as bad as not off ering enough. If there are multiple pathways available to the user, it is the designer’s responsibility to make sure the user doesn’t get lost. The entire sum of a user’s interactions with a website can be called the user experience. The focus on the user experience diff erentiates websites from printed products more than anything else. This job is so important that there are web professionals called information architects. Information architecture is defi ned as the structure of a website and its pages: how the site and the site navigation are organized. In its strictest form, information architecture is not concerned with issues such as color, type, and graphics. In larger design agencies, it is not uncommon to have an information architect collaborating with the designers, especially at the beginning stages of designing a website. Designers need to think like information architects to be eff ective. The designs need to provie the best structure allowing users to get the information they want. For online stores, dthey should provide the most effi cient way to allow a user to put an object in a shopping cart and make a purchase. Designers must fully comprehend the web as a medium and understand its rules and possibilities regarding visual design and text.
User-centered design
It can be diffi cult to describe how a web designer works because the level of involvement in a project can vary, from developing a project on her own, to being part of a large team in an advertising agency. However, in all cases, the designer’s goal is to create sites that serves the needs of the users. The following section outlines the planning process so that you clearly understand what the client wants before you begin.
The stages of the planning process
The stages of the planning process can generally be defi ned as:
• Defi ning goals and strategy • Research • Information architecture • Sketching • Wireframes • Mockups
You’ll learn more about each of these stages in this chapter.
Defi ning goals and strategy
When designing a website, an important question to ask is, “Why does this website need to exist?” It seems strange but a client might not be able to tell you exactly why they want a website. The answer, “Because everyone else has one,” is not a good answer. Imagine a carpenter who is hired by a homeowner to build a “structure” in their backyard, with little information provided about the fi nal project. The carpenter needs to know the purpose of the structure. Do they want a shed? A bandstand? A garage? Just as structures have diff erent purposes, so do websites. As a designer you should be able to defi ne, or have the client defi ne, the goal of the website in a simple sentence. For example, in this book, you will be designing a site called SmoothieWorld, which has the following goal: To be the fi rst stop on the web for people looking for Smoothie recipes. Although the designer may not have defi ned this objective, she can certainly contribute to the conversation. Here are some of the questions that might arise in discussing the functionality and design of such a site:
• Will the site be free? If yes, will there be advertising and is that something the designer needs to include in the layout? • Has the client considered how they want to organize the recipes on the site? For example, could a user submit ingredients they have on hand and receive a recipe in return? • What, if any, user interactions might there be on site. For example, can users submit recipes or simply browse existing ones? In larger organizations, these conversations might also involve web developers, who would be responsible for any database functionality, along with the marketing department, the sales department, and other interested stakeholders. Even if these discussions take place before you, the designer, are brought into the project, you will want to have a good understanding of the goals of a website before you start any design work.
Research
A designer who is practicing user-centered design needs to have some background on what visitors to a site might be expecting. Competitive research is one way to fi nd this information. In the SmoothieWorld example, there may not be many competing smoothie sites; however, there are certainly a number of popular recipe and cooking sites. You should understand how these sites are designed and what makes them so attractive to users. In some cases, research can be objective. Perhaps the SmoothieWorld site has existed for some time and is being redesigned. This is an ideal situation because there should be some data from the history of the site that you can access. You could request the server logs from the client. A server log is a record of information that most servers collect by default and is often accessible from the hosting company or Internet service provider (ISP) for the site. The raw data from
server logs is not particularly useful until it has been organized. This organization of server log data is done with analytic software. Analytic software takes information such as the type of browser the visitor is using, monitor resolution, and which pages are most popular, and then formats this data to provide a useful profi le of a site’s user base. Often analytical tools are installed on a site and available as the site is running, so you can gather information about the site’s eff ectiveness on a regular basis.
Scenarios and characters It can be helpful to envision some fi ctitious users of your site. You can create several characters and think about how they were introduced to your site, what they hope to achieve while using the site, and what are their priorities. By envisioning the experience through others’ eyes, you can gain a more user-focused experienced.
thanks
উত্তরমুছুন