Wiley Web Design with HTML and CSS Digital Classroom 978-0-470-58360-9 User Manual
Product codes
978-0-470-58360-9
20
The goals of web design
Web Design with HTML and CSS Digital Classroom
1
Wireframes, prototypes, and mockups
After you have defi ned 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.
you can quickly create to explore diff erent design options and functionality for the site. Making
changes before writing code and creating graphics allows you to make changes more quickly
and is less costly and more effi
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.
you can quickly create to explore diff erent design options and functionality for the site. Making
changes before writing code and creating graphics allows you to make changes more quickly
and is less costly and more effi
cient. Whether or not you use all three models generally depends
on the size of the project. Larger projects that incorporate complicated elements, such as
connection to a database, or use multiple features, will benefi t from using all three models.
connection to a database, or use multiple features, will benefi t from using all three models.
Wireframes
Wireframes are typically created in black and white or shades of gray, using placeholders
for images. Wireframes avoid the visual design of the site and are more concerned with the
organization of the content and features. You can create a wireframe in a program like Adobe
Illustrator, Adobe Fireworks, Microsoft Visio, or Omnigraffl
Wireframes are typically created in black and white or shades of gray, using placeholders
for images. Wireframes avoid the visual design of the site and are more concerned with the
organization of the content and features. You can create a wireframe in a program like Adobe
Illustrator, Adobe Fireworks, Microsoft Visio, or Omnigraffl
e, or even by using a sketch on paper or
a whiteboard. A wireframe does not need to be interactive, and is a fast way to start a conversation
between designers, developers, clients, and other members who are involved in a project.
between designers, developers, clients, and other members who are involved in a project.
Wireframes use elements such as shapes, lines, and text to begin structuring a web page.
Mockups
Mockups are sometimes the result of wireframes, although it is possible to skip the
wireframing step for less-complex sites. You can create them in an image editor such as
Photoshop. You create mockups to begin exploring the visual elements of a site, such as the
user interface elements such as buttons and navigation bars, typography, layout, and imagery
like photographs and illustrations. Some designers prefer to create two or three diff erent
Mockups are sometimes the result of wireframes, although it is possible to skip the
wireframing step for less-complex sites. You can create them in an image editor such as
Photoshop. You create mockups to begin exploring the visual elements of a site, such as the
user interface elements such as buttons and navigation bars, typography, layout, and imagery
like photographs and illustrations. Some designers prefer to create two or three diff erent
webdesign.indb 20
webdesign.indb 20
3/17/11 1:50 PM
3/17/11 1:50 PM