Lesson 1 What you’ll learn in this lesson: • Defining the goals of web design • Defining the user experience AL • Understanding the MA TE RI difference between wireframes, prototypes, and mockups TE D Planning Your Website RI Starting up GH In this lesson, you’ll learn how to improve your website by clearly defining what you want the site to do during the planning process. 1 CO PY This lesson does not use any lesson files, so you do not need to load any files before starting this lesson.
1 The goals of web design they wanted. Drivers can see well-designed road signs from a distance and the message of the sign can be immediately understood, even at a high rate of speed while driving. A welldesigned chair is comfortable to sit in and also fits in with the style of the room. A store, a sign, and a chair are all designed with a specific intent.
1 The goals of web 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 offering a free sample might have the call to action, “Contact us to learn more!” In this 19th century advertisement the call to action implores the customer to see the product before going home. Compare a print flyer for a shoe sale with its online counterpart.
1 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.
The goals of web design 1 Defining the user experience When it comes to user interaction, offering too many options can be just as bad as not offering 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 differentiates websites from printed products more than anything else.
1 The goals of web design Defining 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 final project.
The goals of web design 1 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 profile of a site’s user base.
1 The goals of web design Web analytics (continued) Third-party analytic software often organizes visitor data in useful ways; this example displays the visitor’s browser version. Although Internet marketers use analytics to improve websites, it can also be useful for design purposes.
The goals of web design 1 Information architecture Design is not just about visuals. The word design comes from the Latin word designare, which means to mark out, devise, or choose. This is a good reminder that you should choose or plan the structure of a website before you consider the visuals. The term used to describe the planning of a website’s structure is information architecture.
1 The goals of web design The business of web design There is an interlocking relationship between the budget of a site and its scope and timeline. A change in one element will affect at least one of the others. If you are freelance web designer, you may be dealing with a client directly; if you are working in an organization, the “client” might be a manager or a different division or department.
The goals of web design 1 Let’s consider two types of site structures that will eventually translate to the navigation menus: wide and deep. First you have a wide navigation structure in which the main pages are listed horizontally: A wide site navigation has primary links always accessible. In a wide navigation system, the main pages are all visible together and for small sites, this is often a logical choice.
1 The goals of web design Deep navigation provides simplified entry-points for the user; however, the designer must decide how to organize the pages inside these main links. Common solutions to this problem include drop-down menus and secondary navigation menus.
The goals of web design 1 A common problem with usability testing is that it often occurs too late in the design process. If you have users test the site after you have built it completely, the feedback may be useful but you may need to discard work that you have already completed.
1 The goals of web design Wireframes, prototypes, and mockups After you have defined the goals and decided on the information architecture of a website, there are important stages in the design process you should complete before writing a single line of HTML or CSS. If you begin designing visuals or building pages before you are prepared, you may end up discarding your original work. By using wireframes, mockups, and prototypes.
The goals of web design 1 styles for clients or collaborators to review. In some cases, the final assets in a mockup might be used directly in the finished application. Mockups are often done in a program such as Photoshop and are eventually converted to HTML. Prototypes Prototypes are usually built for demonstration purposes. They differ from mockups and wireframes because they show functionality and often demonstrate how the user interacts with elements on a page.
1 The goals of web design The evolving field of interactive prototypes Traditional wireframes, mockups, and prototypes cannot fully account for the interactive nature of the web. For example, page mockups created in Photoshop are static so they cannot demonstrate how text on the page reflows or how a navigation menu expands and collapses. Wireframes have similar problems because they are not interactive.
The goals of web design 1 Be creative during the planning process The planning stage can be a fun part of the site creation process, because this is where you can propose those crazy ideas that may never make it onto the final site.You want to avoid limiting yourself, as there will be time for a reality check once the designing and coding begins! Keep in mind that in the early stages of site development, collaboration is important.
1 Self study Self study 1 Using a paper and pencil, come up with your own version of how the SmoothieWorld site might be organized. Research popular recipe websites. How do they organize their large collection of recipes? 2 Find a partner and conduct the usability test outlined earlier in this lesson. What did you learn that you might apply to a site like SmoothieWorld? Review Questions 1 What is the difference between a wireframe, mockup, and prototype? 2 Define information architecture.
