Act Sitemap Wireframe

33
planning your site kelly ludwig, assistant professor kcai graphic design department

description

planning your site

Transcript of Act Sitemap Wireframe

Page 1: Act Sitemap Wireframe

planning your sitekelly ludwig, assistant professor

kcai graphic design department

Page 2: Act Sitemap Wireframe

process overview

Page 3: Act Sitemap Wireframe

by jesse james garrett

Page 4: Act Sitemap Wireframe

break it down, now

Page 5: Act Sitemap Wireframe

break it down, now

Page 6: Act Sitemap Wireframe

break it down, now

Page 7: Act Sitemap Wireframe

break it down, now

Page 8: Act Sitemap Wireframe

break it down, now

Page 9: Act Sitemap Wireframe

site map

Page 10: Act Sitemap Wireframe

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

Page 11: Act Sitemap Wireframe

myurl.com - home

home

what is featured?

footer content

contactcopyright

establishes mood for site

always link back to home

Page 12: Act Sitemap Wireframe

wireframes

Page 13: Act Sitemap Wireframe
Page 14: Act Sitemap Wireframe
Page 15: Act Sitemap Wireframe

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

defined...

wireframe

Page 16: Act Sitemap Wireframe

page schematic screen blueprint skeletal framework

aka

Page 17: Act Sitemap Wireframe

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?

Page 18: Act Sitemap Wireframe

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

what’s the purpose of a wireframe?

Page 19: Act Sitemap Wireframe

low-fidelity wireframe

Page 20: Act Sitemap Wireframe

low-fidelity wireframe

Page 21: Act Sitemap Wireframe

medium-fidelity wireframe

Page 22: Act Sitemap Wireframe

high-fidelity wireframe

Page 23: Act Sitemap Wireframe

project brief

Page 24: Act Sitemap Wireframe

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!

Page 25: Act Sitemap Wireframe

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

Page 26: Act Sitemap Wireframe

other requirements

• proper grammar and spelling

• give credit to original designers/authors of found work

• format: muse web site

Page 27: Act Sitemap Wireframe

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

Page 28: Act Sitemap Wireframe

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)

Page 29: Act Sitemap Wireframe

content — rhetoric — tropes

• a: found examples of 9 rhetorical tropes

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

Page 30: Act Sitemap Wireframe

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

Page 31: Act Sitemap Wireframe

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

Page 32: Act Sitemap Wireframe

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

Page 33: Act Sitemap Wireframe

sources

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

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

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