Gmail design
Download
1 / 10

gmail-redesign - PowerPoint PPT Presentation


  • 309 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'gmail-redesign' - JasminFlorian


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


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

1 log in screen l.jpg
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 l.jpg
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 l.jpg
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


2 logged in state l.jpg

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


Resources for wireframes l.jpg
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 l.jpg
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


Print keep by your side l.jpg
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 l.jpg
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/


ad