Site Map & Wire Frame Resources

A Simple Site Map

Mari Pfeiffer, a freelance writer and web designer based in Southern California, shows how simply you can approach a site map. You don’t need fancy software. You can do a final version in Illustrator or InDesign if you want to, but it’s not required.



Creating a Site Map: What it is, How to Do It.
This slideshare is a comprehensive explanation of what a site map is. Slides 12-14 (out of 30) especially pertain to what we are doing in this class! Also, in order to create a good site map, you should be able to answer all of the questions on slide 26 (below). This is a great resource.

Screen Shot 2015-03-01 at 6.35.34 PM


18 Great Examples of Sketched UI Wireframes and Mockups
“…it’s always a good idea to start with a wireframe. It can be a big time saver if you’re able to nail down the placement of major layout elements early on in a project. …”


Concerning Fidelity in Design
This is an informative, yet easy to read article on design methods. Tyler Tate writes that design methods are not mutually exclusive. Each method is well-suited for a particular phase of the design process, with one level of fidelity (low to high technology) often leading into the next. He backs this up with loads of examples. Read this to get a sense of where wire frames fit into the overall design process!

Responsive Web Design Resources

Media Queries showcases some lovely responsive web sites, showing at a glance what they would look like at four different sizes (smart phone, tablet, laptop, desktop).

Screen Shot 2015-03-01 at 6.44.03 PM
Liquidapsive (Liqui-dap-sive) shows how the same web page responds to a changing browser size when produced using Adaptive. Liquid, Responsive, and Static layout. We’ll be building responsive web sites (layouts) in this class. We can’t cover all the UX issues.

Screen Shot 2015-03-01 at 6.45.27 PM