Act Sitemap Wireframe

download Act Sitemap Wireframe

of 33

  • date post

    21-Dec-2015
  • Category

    Documents

  • view

    204
  • download

    0

Embed Size (px)

description

planning your site

Transcript of 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 ]

    whats the purpose of a wireframe?

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

    whats 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

    monicas 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