1 / 10

Gmail design

Gmail design 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

JasminFlorian
Télécharger la présentation

Gmail design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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/

More Related