act sitemap wireframe
DESCRIPTION
planning your siteTRANSCRIPT
![Page 1: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/1.jpg)
planning your sitekelly ludwig, assistant professor
kcai graphic design department
![Page 2: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/2.jpg)
process overview
![Page 3: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/3.jpg)
by jesse james garrett
![Page 4: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/4.jpg)
break it down, now
![Page 5: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/5.jpg)
break it down, now
![Page 6: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/6.jpg)
break it down, now
![Page 7: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/7.jpg)
break it down, now
![Page 8: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/8.jpg)
break it down, now
![Page 9: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/9.jpg)
site map
![Page 10: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/11.jpg)
myurl.com - home
home
what is featured?
footer content
contactcopyright
establishes mood for site
always link back to home
![Page 12: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/12.jpg)
wireframes
![Page 13: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/13.jpg)
![Page 14: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/14.jpg)
![Page 15: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/16.jpg)
page schematic screen blueprint skeletal framework
aka
![Page 17: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/19.jpg)
low-fidelity wireframe
![Page 20: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/20.jpg)
low-fidelity wireframe
![Page 21: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/21.jpg)
medium-fidelity wireframe
![Page 22: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/22.jpg)
high-fidelity wireframe
![Page 23: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/23.jpg)
project brief
![Page 24: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/24.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/26.jpg)
other requirements
• proper grammar and spelling
• give credit to original designers/authors of found work
• format: muse web site
![Page 27: Act Sitemap Wireframe](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/27.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/28.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/29.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/30.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/31.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/32.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55cf8fb1550346703b9edfd4/html5/thumbnails/33.jpg)
sources
http://www.slideshare.net/piksels/introduction-to-wireframes-presentation
http://en.wikipedia.org/wiki/Website_wireframe
http://www.levelfivesolutions.com/resources/levelfiveIntroduction.pdf