Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • • Grey area indicates product UI – can be any number of layouts, this wireframe just shows one example. • Welcome content is designed to be persistent and integrated into initial UI; however, panes can be minimizable, collapsible, or in twisties. Sub sections could also be collapsible, depending on the Web client’s UI and implementation. • Action pane – getting started actions with icons – like RAM • Content pane – static and dynamic content, sections would be fixed scroll so any feeds won’t push section down too far Learning – Tutorials, Tours, Samples, Web resources icons – like RAM • Custom pane – dynamic portals of favorites, feeds, recently visited/used • Link lists would have short description text, like in help home page design
  • Wireframes

    1. 1. Wireframes Stephanie Trunzo 03.09
    2. 2. What are wireframes? <ul><li>Skeletal rendering of interactions and basic elements. </li></ul><ul><li>Intended to strip the gloss layer away, so that you are only planning the elements and interactions. </li></ul><ul><li>Wireframing takes its name from the skeletal wire structures that underlie any type of sculpture. </li></ul><ul><li>http://www.grokdotcom.com/wireframing.htm </li></ul>
    3. 3. More, please <ul><li>Ensure your needs and the needs of your visitors will be met effectively in the resulting design </li></ul><ul><li>Wireframe first , before a single line of code is written, a single graphic or color is chosen, or a single word of copy is composed </li></ul><ul><li>Wireframing is not storyboarding . Wireframes are the “what” and storyboards are the “how.” </li></ul><ul><li>Adapted from http://www.grokdotcom.com/wireframing.htm </li></ul>
    4. 4. Why create wireframes? <ul><li>sample conversation around a detailed mockup </li></ul><ul><li>Are we meeting the right objectives with this design? </li></ul><ul><li>What do we mean by the label Content there? I don't like that wording... </li></ul><ul><li>I hate the color orange. </li></ul><ul><li>What plugin does that belong in? </li></ul>
    5. 5. Why create wireframes? <ul><li>Understanding the screen real estate, layout, placement, interactions, guided paths, etc., of your digital media is crucial . </li></ul><ul><li>Quicker and cheaper than full mockups, storyboards or prototypes </li></ul><ul><li>Enable iteration and early agreement, levelsetting </li></ul>
    6. 6. Let's look at a fancy one... http://www.boxesandarrows.com/view/the_guided_wire
    7. 7. Let's look at a simple one...
    8. 8. A few of mine... Our original Web welcome discussion...
    9. 9. Did you practice? <ul><li>Sometimes concepts are difficult to understand until you practice them. For the sake of discussion, let's all take a look at the same site: ibm.com </li></ul><ul><li>Examine the home page and build a wireframe, working in reverse. You can use a tool as simple as PowerPoint for this, or try out some of the free online tools. (AGoogle search will turn up quite a few...) </li></ul><ul><li>Discuss what you learned while building the wireframe. Are there things IBM has done intelligently that you didn't even notice until analyzing the structure? Things that could be improved? What can you imagine would be some gaps between planned wireframing and execution? What is the interplay between content and structure? </li></ul><ul><li>Forum: http://tinyurl.com/csqrzb </li></ul>
    10. 10. ibm.com
    11. 11. Resources <ul><li>http://delicious.com/sltrunzo/wireframe </li></ul><ul><li>http://en.wikipedia.org/wiki/Storyboard </li></ul><ul><li>http://www.coe.uh.edu/digital-storytelling/default.htm </li></ul><ul><li>http://www.inms.umn.edu/elements/ </li></ul><ul><li>http://www.clickz.com/841851 </li></ul><ul><li>http://boxesandarrows.com/search?q=wireframes (pick one or two to read) </li></ul><ul><li>http://www.boxesandarrows.com/view/the_guided_wire </li></ul><ul><li>http://www.grokdotcom.com/wireframing.htm </li></ul>