1:Log in screen 1 Sign in to Gmail with your Username: Password: a Remember me on this computer Sign In 1.2 Forgot your username or password a Checkbox selected activates the cookie functionality.
1.1:Incorrect login 1.1 Sign in to Gmail with your Last filled in data Username: Password: b Username and password do not match. (You provided ‘last filled in data’.) a Remember me on this computer Sign In 1.2 Forgot your username or password a Checkbox selected activates the cookie functionality. b Use a red font to highlight.
1.2:Three incorrect logins 1.2 Sign in to Gmail with your c Last filled in data Username: c Password: b Username and password do not match. (You provided ‘last filled in data’.) Enter the correct password above & then type the characters you see in the picture below. c i b Enter the letters as they are shown in the image above. Characters are not case-sensitive a Remember me on this computer Sign In 1.2 Forgot your username or password a Checkbox selected activates the cookie functionality. c Incorrect values bring one back to 1.2. b Use a red font to highlight. Icon for accessibility. Clicking auto-fills the image field & takes user in to screen 2 i
Resources for wireframes • Wireframes in Fireworks: http://www.stuffandnonsense.co.uk/archives/work_smarter_with_fireworks_symbols.html • **IBM: Creating wireframes for rapid prototyping: http://www.internettg.org/newsletter/mar99/wireframe.html • HTML wireframes: All gain, no pain: http://www.boxesandarrows.com/archives/html_wireframes_and_prototypes_all_gain_and_no_pain.php • Walkthru to creating WF in DW: http://www.boxesandarrows.com/archives/dreamweaver_primer.php?page=2 • **IA Wiki: http://www.ibiblio.org/jdwilbur/wiki/index.php/WireFrames • **Deliverables: http://www.ibiblio.org/jdwilbur/wiki/index.php/DeliverablesAndArtifacts • Creating WF: http://www.masternewmedia.org/2002/12/03/wireframing_techniques_for_web_page_design.htm • CSS: http://www.molly.com/category/web-design • ** What goes into a WF: http://www.strangesystems.net/archives/000005.php
More resources for wireframes • ** Examples: http://www.stevenmocarski.com/samples_wireframes.html • ** Examples: http://www.andybudd.com/archives/2003/10/blogging_from_the_design_process_skillswap/index.php • ** Examples: http://blogs.sun.com/roller/language/MartinHardee/20050429?language=nl • **Examples: http://www.emdezine.com/designwritings/artifacts.shtml • **Examples: http://wiremedia.biz/artist/dev/wireframes.php • **Examples: http://www.usabilityireland.com/wireframes.html • IA practice: http://126.96.36.199/search/cache?p=%27examples+of+wireframes+for+web+design+%27&prssweb=Search&ei=UTF-8&fl=0&xargs=0&pstart=1&b=11&u=www.slis.indiana.edu/faculty/hrosenba/www/L577/classes/ia_practice/ia_practice.ppt&w=examples+wireframes+design&d=QI-Al2FULh1u&icp=1&.intl=us • UPA: http://www.gslis.utexas.edu/~i385ef04/readings/fulcher-deliverables.htm • **The devil's in the WF: http://www.eleganthack.com/archives/no_more.php
Print & keep by your side! • Visual Vocabulary for Info Architecture: http://www.jjg.net/ia/visvocab/ • Quick Reference of all the elements: http://www.jjg.net/ia/visvocab/files/garrett_ia_quickref.pdf • Above all, enjoy doing all of this!!
Visio resources • Visio is a documentation tool, not a design tool. The design happens elsewhere - in your head, on paper, on a whiteboard, in a team meeting. Only when you have figured out what your design looks like should you sit in front of the computer and try to document it. • When I find myself staring at the screen wondering what is meant to happen next, it is usually because I haven't thought about what I am trying to draw. I get up, go to the whiteboard or paper, draw it (or at least list the components or workflows I need), then come back to the computer, set up shapes etc and draw. • Beginning with Visio: http://188.8.131.52/search?q=cache:Y85YbivLLhQJ:www.gslis.utexas.edu/technology/tutorials/office/visio/visio.pdf+%27visio+tutorials+for+creating+wireframes%27&hl=en • Visio Basics: http://www.design-drawing.com/visio/visbas.htm • Dan Brown: http://www.greenonions.com/archives/tags/visio/ • Donna Maurer on deliverables: http://www.maadmob.net/donna/blog/archives/000055.html • Advanced tricks with Visio: http://www.welie.com/visio/