Gmail design - PowerPoint PPT Presentation

Loading...

PPT – Gmail design PowerPoint presentation | free to download - id: 21d73-YmViZ



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Gmail design

Description:

Sign In. Forgot your username or password. 1. 1.2. a. a ... Sign in to Gmail with your. Username: Last filled in data. Password: Remember me on this computer ... – PowerPoint PPT presentation

Number of Views:36
Avg rating:3.0/5.0
Slides: 11
Provided by: ravirat
Learn more at: http://www.artbrush.net
Category:
Tags: design | gmail | in | sign

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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/
  •  
About PowerShow.com