{Point of View} :: Mark-Up

Wednesday, 3 March

in class
critique design
mark-up demo

homework
refine design
mark-up layouts for production



After finalizing your design, you will have to measure and markup that design. Marking up layout for web development is common practice (though not always the designer's task, sometimes development does it) and the more specific and exacting you are, the better, and closer to the original, the results will be. Print out your layout and its various stages of interactivity, and draw directly onto the printouts.

Things you will need to measure and consider:

• Structure: Where will my containers be to best build my design (draw boxes around them and give them x,y coordinates)
• Semantic markup: name the containers, text, and image elements logically by content, which are "classes" that you create and name or by existing HTML tag names like paragraphs "p" and headings "h" (h1-h6).
• Relationships: how should the CSS cascade affect your design elements, how do they sit within each other to facilitate your layout.
• Functionality: what functionality exists on my layouts (where links and pop-ups happen, how they are activated, either rollovers, mouse-clicks, anchor tags)
• Links: how do I differentiate link types (are interior links link anchor tags different from exterior links that take me to a new place)
• Color: hat are the hex codes for all of my text and solid colors, and where do they appear
• Images: what are my backgrounds made of, are they repeating images, or large static images. Which images need transparency, if any.