Act Sitemap Wireframe

download Act Sitemap Wireframe

of 33

  • date post

  • Category


  • view

  • download


Embed Size (px)


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.



    Modes of persuasion


    Communication Models

  • - home


    what is featured?

    footer content


    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.



  • page schematic screen blueprint skeletal framework


  • 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




    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

    bri dallas -

    jennifer abate -

    lauren lanigan

    tessa canon

    cal de smith

  • sources