Session 5: Information Architecture: Site Maps, Wireframes and Storyboards

Agenda

  • Geek speak
  • Competitive analysis discussion/feedback
  • Visual design tools mini-lecture/discussion/practice
  • Project work/lab
  • Dinner break – 7:00- 7:30 pm (I have to do a hangout)

Geek speak

Competitive analysis

SWOT ->

  • Strengths: characteristics of the business or project that give it an advantage over others
  • Weaknesses (or Limitations): characteristics that place the project at a disadvantage relative to others
  • Opportunities: external chances to improve performance (e.g. make more money)
  • Threats: external elements that could cause trouble for the business or project

Visual design tools

  • Mini-lecture/discussion
  • Practice (pick up where you left off last session)

More portfolio examples

Tips for annotating portfolio examples:

What was your role? What were challenges? Who else worked on the project? Showcase fewer projects and provide detail.

Wireframing/Architecting Your Site

Exercise: using pen and paper, develop a wireframe for your homepage (8.5×11) and one for a “page” (another 8.5×11). Think about the elements that you want to include on every page.

If you are planning to have a blog, develop a wireframe for a stand-alone blog post. (How is it different from a page??)

wireframe

Wireframe From Smashing Hub

wireframes

From Wireframes For The Wicked (Slideshare)

Project work/lab

Next week

  • Going social – live blogging, comments, plugins, strategies
  • Second half lab/project work — if anyone wants to be part of the R74 festivities in Seattle, feel free to leave around 9.

Finals Week

  • Dec 10 : I can try to arrange for lab space on Monday evening the 10th (usually pretty easy with finals week) or I can hold a hang-out. IF we go the hangout route — before joining you need to install LogMeIn onto your computer (free trial).
  • Dec 12 : All deliverables due by 6 pm.
  • Project plan additional requirements -> include wireframe of home page and at least one secondary page (can be blog/blog post) – wireframe can be PDF/image of sketch; include screen capture of WP Dashboard showing plugins; include screen capture of WP Dashboard showing theme widgets; include screen capture of WP Dashboard showing settings-> general.
Advertisements

About Kathy E. Gill (@kegill)

Digital evangelist, writer, teacher. Webmaster at King County Elections; educator at UW. Transplanted Southerner; teach newbies to ride motorcycles! @kegill, gplus.to/kegill, http://wiredpen.com

14 responses to “Session 5: Information Architecture: Site Maps, Wireframes and Storyboards”

  1. Annette Frahm says :

    Here is a link to the page with no sidebars and a map:
    http://www.annettefrahm.com/test/map-embed/

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: