Wiley Web Design with HTML and CSS Digital Classroom 978-0-470-58360-9 User Manual

Product codes
Page of 18
Self study
Web Design with HTML and CSS Digital Classroom
Self study
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? 
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?
What is the diff erence between a wireframe, mockup, and prototype?
Defi ne information architecture.
What is usability testing and how does it relate to web design?
A wireframe is a diagram or sketch of a web page that focuses on structure and layout, 
not visual elements such as color or graphics. A mockup is a visual representation of 
a page that includes font choices, colors, layout, and images. A prototype may contain 
elements of wireframes or mockups but is primarily concerned with demonstrating the 
interaction between a user and the site.
Information architecture is the process of organizing a website’s content and defi ning the 
navigation of the site.
Usability testing is the procedure in which a user is given a task or series of tasks relating 
to a website, such as purchasing an item, and then asked to determine where any 
confusion or diffi
  culty in navigating appears. A web designer would take this feedback 
and improve the site design as needed.
webdesign.indb   24
webdesign.indb   24
3/17/11   1:50 PM
3/17/11   1:50 PM