Datasheet
24
Self study
Web Design with HTML and CSS Digital Classroom
1
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 lik
e SmoothieWorld?
Review
Questions
1 What is the di erence between a wir
eframe, mockup, and prototype?
2 De ne information architecture.
3 What is usability testing and how does it r
elate to web design?
Answers
1 A wireframe is a diag
ram or sketch of a web page that focuses on structure and layout,
not visual elements such as color or g
raphics.
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.
2 Information architecture is the process of organizing a website’s content and de ning the
navigation of the site.
3 Usability testing is the pr
ocedure 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 di culty in navigating appears. A web designer would take this feedback
and improve the site design as needed.
webdesign.indb 24webdesign.indb 24 3/17/11 1:50 PM3/17/11 1:50 PM