Wireframes

Newhouse Military Site Wireframe, Picture Health, 2010

Why Wireframes?

Many of you may be asking yourself why would I want to waste my time making a crappy version of an actual final design. Well friend here’s the truth, it will save you time and in turn energy (did I mention money?). The “wireframes” can be sketches that show the basic shapes and layout of the webpages. This can be as simple as a pen and paper drawing or as interactive as an online tool like hotgloo.com (e.g. long rectangular bar for navigation area) This phase allows clients to work through interface issues before programming; minimizing the amount of programming by thinking through the user interface ahead of time.

Questions a Wireframe should Answer

  • What we got here? | Has all the items you want on a page (header, navigation, image gallery).
  • Where we gonna put all this? | Layout of your page and it’s various elements, what goes where and how much space does it take up. What elements do your header and footer have?

DOWNLOADS

RESOURCES

Let’s take a look back at the whole process with wireframes are the third phase of a multi-phase process.

Phases of Website Creation

Step One | Research

You should always consider what has been done before you. Ask yourself how you can add to the conversation as opposed to copying it, kick it up a notch and make it rock like a hurricane. This will server as a starter library for your mood board.

  • Save Links
  • Save Screen Grabs
  • Consider saving whole ““Web Archive” from your browser

Step Two | Keywords

One you have your topic selected a great way to start the creative process is to establish a list of keywords. This helps you focus your decisions in the following steps.

Step Three | Creative Brief

A creative brief is a document that outlines the strategic direction for creative development, covering the specific task at hand, the communication objectives and strategy, and any elements that the executions must contain.

Step Four | Storyboards or Wireframes

Storyboards are graphic organizers in the form of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture, animation, motion graphic or interactive media sequence.

Step Five | Functionality document

A written explanation of how each element of the site will work. It details out, in text, how each object in the application will work and how users interact with the objects. Size, color and functionality are all aspects. It is common for this to accompany the wireframe or storyboard.

Step Six | Mockups

Whoo hoo, mockups, let the super creative fun begin. This is where all the research you’ve complied, the moodboards you’ve made and the understanding of your target audience comes into play. First rule of mockups is organization. Keep your layers organized and named well inside a sensible folder structure.

Step Seven| Development

This is where it gets buck wild. You begin coding up what you have crafted or hand off your set of deliverables to a developer you’ll be working with.

  • Categories

  • Professors

    MMM

    Deb Pang Davis
    Newhouse 3, RM 236
    dpangdav@syr.edu
    315.443.8287

    Office Hours
    Mondays > 3:30-4:30 p.m.
    Tuesdays > 10-11 a.m. & 2:15-3:15 p.m.
    Thursdays > 10-11 a.m.

    MPJ

    Ken Harper
    Newhouse, RM 500
    kharpe01@syr.edu
    315.443.6131
    Office Hours
    W | TH 3:30–5:30

    Teaching Assistant

    Scott DuChene
    Photo lab. Rm 207/N1
    Office Hours
    Fri 10:30 - 12:30 and from 2:30 - 4:30

  • Course Server Info for Major Projects

    Place all Major Project assignments on the course server folder

    SolarNH

    • UN: GRA4472
    • PW: corner

  • Meta