Gmail design - PowerPoint PPT Presentation

JasminFlorian
gmail design l.
Skip this Video
Loading SlideShow in 5 Seconds..
Gmail design PowerPoint Presentation
Download Presentation
Gmail design

play fullscreen
1 / 10
Download Presentation
Gmail design
330 Views
Download Presentation

Gmail design

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Gmail design

  2. 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.

  3. 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.

  4. 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

  5. 2 ‘USERNAME’ | New!AutoSave & More | Settings | Help | Sign Out 2:Logged in state Gmail logo Show Search OptionsCreate a filter Search Mail Search Web 0.1 a Archive Report Spam More actions V Refresh 1-50 of Total Older> 0.2 Select: All, None, Read, Unread,Starred, Unstarred Compose Mail a Inbox (No.) More actions V Star Starred Date Sender Name Subject Mark as readAdd StarMove to Trash-----------------Apply labelLabel 1New label Sent Mail Star Date Sender Name Subject Drafts All Mail Spam Trash Contacts Labels Label 1Label 2Edit labels Invite a friend Give Gmail to: 0.2 Repeat 0.1 N left Repeat Send Invite Preview invite Use the Search Box or Search Options to find messages quickly You are currently using x MB ( n%) of your X MB. Gmail view: Standard | Basic HTML. Learn more Terms of usePrivacy PolicyProgram PoliciesGoogle Home c 2005 Google

  6. 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

  7. 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://66.218.69.11/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

  8. 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!!

  9. 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://64.233.161.104/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/