Upload
kellyludwig
View
244
Download
0
Embed Size (px)
DESCRIPTION
planning your site
Citation preview
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