act sitemap wireframe

planning your sitekelly ludwig, assistant professor

kcai graphic design department

process overview

by jesse james garrett

break it down, now

break it down, now

break it down, now

break it down, now

break it down, now

site map

create your site map (or outline)

Think about what you would like your website to do.  Make a site map, basically the framework of how you want your site to operate.

• Homepage

• Semiotics

• Modes of persuasion

• Tropes

• Communication Models

myurl.com - home

home

what is featured?

footer content

contactcopyright

establishes mood for site

always link back to home

wireframes

a visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behavior of an interface.

defined...

wireframe

page schematic screen blueprint skeletal framework

aka

to determine the arrangement of page elements to best achieve a stated purpose.

wireframes focus on what the screen does, not its aesthetics.

[ function without form, for now ]

what’s the purpose of a wireframe?

think of it as allocating “content buckets” for each of the required content areas.

what’s the purpose of a wireframe?

low-fidelity wireframe

low-fidelity wireframe

medium-fidelity wireframe

high-fidelity wireframe

project brief

ACT website project brief

Create a useful & informative reference site that best displays what you learned and accomplished during this course.

Show it in your sophomore reviews and keep it to use in your future coursework!

objectives

• communication: organized and accessible structure and content (visual and verbal)

• theory: correctly defined/identified theories

• form: visually cohesive, strong and appropriate design system

• execution: refined digital craftsmanship

other requirements

• proper grammar and spelling

• give credit to original designers/authors of found work

• format: muse web site

content — home & semiotics

• home

• navigation

• semiotics

• a: found examples of semiotics (includes: 1 icon, 1 index, 1 symbol, 1 syntagm, 1 paradigm, 1 pragmatic)

• b: 2 studies/examples that code meaning (1 of relay, 1 of anchor) AND 2 studies/examples that change connotations (for each, list 3 connotations)

• c: 18 definitions

content — rhetoric — modes of appeal & Social Good poster

• a: found examples of 3 modes of appeal

• b: 2 studies that communicate your chosen design for social good topic (for each, list the modes and tropes employed)

• c: 3 definitions (ethos, pathos, & logos)

content — rhetoric — tropes

• a: found examples of 9 rhetorical tropes

• b: 9 definitions (pun, hyperbole, irony, antithesis, personification, metonymy, metaphor, synecdoche, parody)

content — communication theory

• a: make-your-own-model (2D or 3D final)

• b: found example of communication theory (includes: 2 communicators, 1 channel, 1 message, 1 noise, 1 feedback, 3 contextual factors)

• c: 12 definitions

steps

1. create site map

2. design low-fidelity wireframe (3 versions)

• concentrate on home (3) & semiotics page (3)

3. design high fidelity wireframe

• chose best of home & semiotics

4. sketches (3)

5. refine sketches (1)

6. build

7. test/refine

8. present

student examples

• monica’s site http://design.kcai-sites.com/students/monicaroesner/act/

• bri dallas - http://design.kcai-sites.com/students/briannadallas/commtheory/

• jennifer abate - http://design.kcai-sites.com/students/jenniferabate/modes-of-appeal.html

• lauren lanigan http://design.kcai-sites.com/students/laurenlanigan/act/

• tessa canon http://design.kcai-sites.com/students/tessacanon/AppCom/

• cal de smith http://design.kcai-sites.com/students/caldesmith/rhetoric.html

sources

http://www.slideshare.net/piksels/introduction-to-wireframes-presentation

http://en.wikipedia.org/wiki/Website_wireframe

http://www.levelfivesolutions.com/resources/levelfiveIntroduction.pdf