WEB210 » 06a) Content Layout (Wireframes)
You will need to show your Client how you are going organize their content into a Content Layout (Wireframes) for each template page.
Content Layout (Wireframes) should contain a schematic representation of:
- Target Window Size & Grid
- Primary & Secondary Navigation
- Images/Figures/Illustrations
- Written Content
- Media/Video
- Functionality
- Headers & Footer Documentation
Requirements:
- Take a look at my Sample Wireframe(s) as this is the format that you will follow to complete this assignment.
- You must complete Content Layout (Wireframes) for your 1) Home Page, 2) a Main (gateway) Page and 3) a Sub (destination) Page for a) Desktop and b) Mobile Devices.
- This shall be done in Adobe Illustrator and posted on your staging area for Client approval and instructor review as your “Content Layout (Wireframes)” assignment according to the class Schedule (Fall) or Schedule (Summer).
Examples:
- Wireframes for the HCDE Department Website | Mike Sinkula
- Wireframes for Jet City Improv | Premium Design Works
Downloads:
- Rehabilitation Institute of Washington Wireframes | Premium Design Works
- Creating a Website Wireframe in Illustrator | Premium Design Works
- Mike’s 960 Grid Wireframe | Poo Machine
- Jet City Improv Wireframes | Premium Design Works
This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.
16 Comments:
Wireframes for Musicians of the Houston Grand Opera
https://drive.google.com/folderview?id=0B8_CaUGgfHvjMEp6eFdTaHBSTFU&usp=sharing
wireframes via our staging area:
https://braincancerredesign.wordpress.com/assignments-web-210/
cheers,
paige
I posted this on Jenny’s Github earlier today, but to be sure you see it… here’s the URL to our wireframes:
http://maddyswebnation.com/web210/00_OpenELIS_wireframes.pdf
Hi Mike,
Here is the link to our staging area with the Wireframe PDFs
https://ssyc210.wordpress.com/2015/10/30/a6-content-layout-wireframe/
Here’s the link to my section of wireframes I did on 200 Orphanages Worldwide.
http://www.lojodesign.com/web210/wire.html
Whoops! Looks like we forgot to submit the link for our A6 – Wireframes! Here it is…
http://badger37.com/itc210/wireframes.php
Thanks!
-Doreen
http://edison.seattlecentral.edu/~kander59/web210/clientstaging.html
Mike,
Submitting the staging area with wireframes to your website as well.
The wireframes were delivered to the client earlier today (on time).
Seattle Financial Empowerment Center
Link to project Wireframes
http://edison.seattlecentral.edu/~atopiw01/web210/stagingarea/wireframes.html
https://docs.google.com/document/d/1FxyJP1avsmeDQ4Mr7sG6iPtX7Ev4orJNURLvO5OT2rQ/edit
Changes as to what we talked about.
http://rhm.zarahmcintosh.com/rhm-staging/RHM_Wireframes_Final.pdf
http://ctangalin.com/itcweb210/wireframes.html
We had it already ready on our staging area on friday july 19 as required, but i am adding it here as an explicit link for completeness sake, just in case.
http://web210.unitenow.biz/docs/creoi_wireframes-07.pdf
Team 4 – Added Wireframes to our Client Staging Area:
http://edison.seattlecentral.edu/~mblack01/web210/index.html
Wireframes are posted to the staging area. Still working on the Program page and Resources page; but they will look and function exactly like the Questions page (same navigation/layout template).
http://www.micahsells.com/web210/wccsite/
This is a great article on designing web sites for non-profit clients.
http://www.smashingmagazine.com/2009/05/14/non-profit-website-design-examples-and-best-practices/
Trackbacks: