Visualizing The Code
•
12 likes•1,687 views
The document discusses visualizing website designs by sketching out the HTML markup needed to achieve the design. It provides examples of visualizing the HTML structure of existing website designs. It emphasizes designing thoughtfully so the code is easier to write, structuring HTML before styling with CSS. Readers are instructed to take screenshots of 3 website designs, sketch the HTML markup directly on the screenshots, then write out the markup in Dreamweaver for reference. Good design considers users first and uses less markup without unnecessary tags.
Report
Share
Related slideshows
Visualizing The Code
- 1. Build your Vision, Visualize the Code Advanced CSS Stephen Ireland
- 2. What Does it Mean? Visualize? <div id=”header”> <div id= <div id= ”sidebar”> ”content”> <div id=”footer”> Advanced CSS Stephen Ireland
- 3. Example 1. (terralien.com) Advanced CSS Stephen Ireland
- 4. Visualizing Example 1. Advanced CSS Stephen Ireland
- 5. Visualizing Example 1. div id=”wrapper” Advanced CSS Stephen Ireland
- 6. Visualizing Example 1. Advanced CSS Stephen Ireland
- 7. Visualizing Example 1. div div div div Advanced CSS Stephen Ireland
- 8. Visualizing Example 1. ul h1 h2 p h3 h2 p ul li li Advanced CSS Stephen Ireland
- 9. Example 2. (alpkit.com) Advanced CSS Stephen Ireland
- 10. Visualizing Example 2. Advanced CSS Stephen Ireland
- 11. Visualizing Example 2. div id=”wrapper” Advanced CSS Stephen Ireland
- 12. Visualizing Example 2. Advanced CSS Stephen Ireland
- 13. Visualizing Example 2. div div div Advanced CSS Stephen Ireland
- 14. Visualizing Example 2. li h1 ul img li li h2 p h3 li p li div li Advanced CSS Stephen Ireland
- 15. Example 3. (happycog.com) Advanced CSS Stephen Ireland
- 16. Visualizing Example 3. Advanced CSS Stephen Ireland
- 17. Visualizing Example 3. div id=”wrapper” Advanced CSS Stephen Ireland
- 18. Visualizing Example 3. Advanced CSS Stephen Ireland
- 19. Visualizing Example 3. div div div div Advanced CSS Stephen Ireland
- 20. Visualizing Example 3. Advanced CSS Stephen Ireland
- 21. Visualizing Example 3. h1 ul h2 h2 h2 img img img p p p h2 h2 p h3 p Advanced CSS Stephen Ireland
- 22. It’s a balance Design vs’ code • Layout philosophy - consider users first, so be aware of conventions. • Less is more - when it comes to markup. Don’t add extra tags to create space or for no reason. • If you plan your designs carefully you will make the code easier to write. Structure your HTML page before you start styling them with CSS. Advanced CSS Stephen Ireland
- 23. Practical: Take 3 websites • Capture a screenshot of each design (use Grab from the Applications folder on your Mac) • Consider the HTML markup needed to create each design. • Bring the screenshot into a graphics application (Photoshop, Illustrator or InDesign) or print onto paper. • Sketch over the HTML markup you think is required to be able to achieve that web page design. • Use Dreamweaver to write the markup you decide upon and save it for reference - I want to see it! Advanced CSS Stephen Ireland