First, I think the structural and presentational aspects of the design can
develop together, but when coding begins, the structure has to lead, as it??™s
the framework on which the presentation hangs. So I think it??™s ?¬? ne, and even
desirable, to have a visual design in front of you as you start to code. Often, I
will take a printout of the page design, and start drawing the boxes that represent
divs around the elements, grouping related areas of content together. I
will give each of those boxes a name that I will later use as a div ID. If you do
this, you can treat those boxes as the basis of your wireframe, then you can
lead with the structure and let the visual design be added in as you develop
the page??™s markup.
STYLIN??™ WITH CSS - CHAPTER 7 238
For this site, the home page wireframe looks like Figure 7.5.
FIGURE 7. 5 This simple wireframe
provides a basis for coding the CSS
for the page.
The nature of developing with CSS means that we can turn a
wireframe into a working prototype Web page without the visual
design being completed. In the case of icyou.com, which we saw in
Chapter 4, I ?¬? rst coded a CSS prototype with the basic layout of the
key pages, but focused only on the content organization and user
interactions and didn??™t worry about visual issues such as coloring
type and adding background graphics.
Pages:
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278