Gmail design

1
Gmail design
2
1Log 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.1Incorrect 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.2Three 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
2Logged in state
2
USERNAME New!AutoSave More Settings
Help Sign Out
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
Sender Name
Subject
Date
Mark as readAdd StarMove to Trash--------------
---Apply labelLabel 1New label
Sent Mail
Star
Sender Name
Subject
Date
Drafts
All Mail
Spam
Trash
Contacts
Labels
Label 1Label 2 Edit 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 use Privacy Policy Program Policies
Google Home c 2005 Google
6
(No Transcript)
7
Resources for wireframes

• Wireframes in Fireworks http//www.stuffandnonsen
  se.co.uk/archives/work_smarter_with_fireworks_symb
  ols.html
• IBM Creating wireframes for rapid prototyping
  http//www.internettg.org/newsletter/mar99/wirefra
  me.html
• HTML wireframes All gain, no pain
  http//www.boxesandarrows.com/archives/html_wirefr
  ames_and_prototypes_all_gain_and_no_pain.php
• Walkthru to creating WF in DW http//www.boxesand
  arrows.com/archives/dreamweaver_primer.php?page2
  
• IA Wiki http//www.ibiblio.org/jdwilbur/wiki/in
  dex.php/WireFrames
• Deliverables http//www.ibiblio.org/jdwilbur/wi
  ki/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
•  

8
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/ind
  ex.php
• Examples http//blogs.sun.com/roller/language/
  MartinHardee/20050429?languagenl
• Examples http//www.emdezine.com/designwritings
  /artifacts.shtml
• Examples http//wiremedia.biz/artist/dev/wirefr
  ames.php
• Examples http//www.usabilityireland.com/wirefr
  ames.html
• IA practice http//66.218.69.11/search/cache?p2
  7examplesofwireframesforwebdesign27prssweb
  SearcheiUTF-8fl0xargs0pstart1b11uwww.
  slis.indiana.edu/faculty/hrosenba/www/L577/classes
  /ia_practice/ia_practice.pptwexampleswireframes
  designdQI-Al2FULh1uicp1.intlus
• UPA http//www.gslis.utexas.edu/i385ef04/reading
  s/fulcher-deliverables.htm
• The devil's in the WF http//www.eleganthack.co
  m/archives/no_more.php
•  

9
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_qu
  ickref.pdf
• Above all, enjoy doing all of this!!

10
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
  ?qcacheY85YbivLLhQJwww.gslis.utexas.edu/technol
  ogy/tutorials/office/visio/visio.pdf27visiotuto
  rialsforcreatingwireframes27hlen
• Visio Basics http//www.design-drawing.com/visio/
  visbas.htm
• Dan Brown http//www.greenonions.com/archives/tag
  s/visio/
• Donna Maurer on deliverables http//www.maadmob.n
  et/donna/blog/archives/000055.html
• Advanced tricks with Visio http//www.welie.com/v
  isio/
•