Site Mapping / Wire Framing
Please
do your wire frames as 11 X 17 vs 8.5 X 11. These can be B&W and
the reason for the larger size is so we can all see them during critique
vs. having to use binoculars...
Please remember that your domain
name and hosting will be due Shortly. Refer to syllabus. I'll covert this in detail in the next class.
Also, refer to your syllabus for a pop quiz on the horizon.
-------------
Welcome
to the Site Mapping.
This week is all about Information Architecture, Site Mapping, Wireframing and Page Schematics. As we migrate from "Discovery" to "Design", we are learning essential practices, tools and deliverables that are invaluable while also ensuring you have a solid structure and flow to your site prior to applying graphics or "pixel-pushing."
COUPLE OF ANNOUNCEMENTS:
1. When you're downloading MindManager to your account/computer in the lab, you're going to need one of the teach guys to type in a password so you can install it. I've spoken with them and they're fine with doing it. You can also download it to your personal computer (easier). You won't need it for more than this one assignment.
Assignment 3:
Create a site map of the current taxonomy for the site you're about to redesign AND a home page paper wireframe/schematic of what you think your revised (home page) structure will end up looking like prior to comping.
For the site map:
Just
follow the navigation. Don't worry about mapping promos or other links
that live outside the navigation. Only follow this down to quaternary
levels. Ensure you differentiate main nav from global/footer nav as well
as any pages that go off the site or are orphan pages (pages that live
outside the nav).
Take advantage of Mindjet's MindManager 9
30 day trial download. It's fairly new for the Mac platform and
pretty intuitive. Don't forget to take the tutorial as well as check out
the map gallery. **Also, for
our presentation next week, if you're using MindManager, don't forget to
save as PDF for projection presentation.
**LASTLY, DON'T PRESENT SOMETHING THAT IS UNREADABLE, SLOPPY OR TOO SMALL. THIS IS A PORTFOLIO PIECE FOR MOST OF YOU, SO PUT THE TIME IN. ** Your site map should be the size it NEEDS to be....more on that later...and in color.
**LASTLY, DON'T PRESENT SOMETHING THAT IS UNREADABLE, SLOPPY OR TOO SMALL. THIS IS A PORTFOLIO PIECE FOR MOST OF YOU, SO PUT THE TIME IN. ** Your site map should be the size it NEEDS to be....more on that later...and in color.
Here's
how to tell the actual size you should print this out at:
1.
Do your thing in MindManager
2. Export as a PDF
3.
Open in Acrobat (not preview)
4. Under "file", select
"properties." That will tell you the size of the paper.
5. For
most of you, this will be larger than 11X17 so you'll have to submit
that PDF to the lab
crew for printing
For
the wire frame:
Just use gray boxes and simple
type to describe what's going to be in that box or section - a rotating
flash brand piece, news, updates, etc. ** Your wire frame should be 11 X
17 (Landscape) B&W (no color needed). Use PPT, InDesign or
Illustrator to do this. No template provided.
Remember...just
think structure & flow, not design.
Print
both out and pin up for critique. Ensure both are in PDF format in your
folder as well.
Both assignments due NEXT WEEK!
Refer to syllabus.
Here's some past student
examples of a site map and wire frame.
Class Lecture Slides
Wk 2 Required Reading - Site Mapping
Wire
Framing PPT - An Example
----------
Some Resources:
Information Architecture: Blueprints for the Web - If you want to learn how to structure and organise websites, then this is the book for you. From data chunking and card sorting to scenarios and task analysis, this book contains everything you ever wanted to know about information architecture for the web, and then some.
The Art and Science of Web Design: When it comes to Web design, style guides are often too boring and predictable to capture the attention of caffeine-riddled Web developers. But not The Art & Science of Web Design; this book strategically equips readers to design sites effectively.
----------
Some Resources:
Information Architecture: Blueprints for the Web - If you want to learn how to structure and organise websites, then this is the book for you. From data chunking and card sorting to scenarios and task analysis, this book contains everything you ever wanted to know about information architecture for the web, and then some.
The Art and Science of Web Design: When it comes to Web design, style guides are often too boring and predictable to capture the attention of caffeine-riddled Web developers. But not The Art & Science of Web Design; this book strategically equips readers to design sites effectively.
