SlideShare a Scribd company logo
Analysis	
  of	
  original	
  interface	
  
	
  
Pros:	
   Organizes	
  information	
  well	
  
	
   	
   Does	
  not	
  use	
  more	
  than	
  three	
  colors	
  
	
   	
   Provides	
  lots	
  of	
  information	
  
Cons:	
   Uses	
  many	
  different	
  shades	
  of	
  blue	
  and	
  gradients	
  
	
   	
   Too	
  many	
  small	
  pictures	
  
	
   	
   Colors	
  do	
  not	
  go	
  well	
  together	
  
	
   	
   Fonts	
  are	
  bolded,	
  colored	
  without	
  consistency	
  
	
   	
   Uses	
  borders	
  and	
  shadows	
  without	
  consistency	
  
	
   	
   Colors	
  are	
  distracting	
  
	
   	
   Fonts	
  are	
  small	
  
	
  
Visual	
  design	
  language	
  
	
  
Links	
   Consistent	
  color,	
  shading	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  Buttons	
  	
  Consistent	
  color,	
  shading	
  
Background	
   Picture	
  (transparent)	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  Colors	
   Pale	
  blue,	
  black,	
  white	
  
	
   Fonts	
   Arial,	
  Helvetica	
  for	
  blocks	
  of	
  text,	
  larger	
  overall	
  
	
  
Explanation	
  of	
  design	
  decisions	
  
	
  
I	
  chose	
  a	
  transparent	
  picture	
  for	
  the	
  background	
  because	
  it’s	
  a	
  website	
  for	
  a	
  city,	
  so	
  
the	
  viewer	
  should	
  get	
  an	
  idea	
  of	
  what	
  the	
  city	
  is	
  like.	
  The	
  colors	
  are	
  inspired	
  by	
  the	
  
Chicago	
  flag	
  and	
  go	
  well	
  together.	
  Buttons	
  and	
  links	
  are	
  blue	
  so	
  to	
  make	
  them	
  easier	
  
to	
  find	
  and	
  recognize.	
  The	
  buttons	
  have	
  a	
  slight	
  gradient	
  to	
  give	
  them	
  dimension	
  and	
  
make	
  the	
  user	
  want	
  to	
  click	
  them.	
  I	
  chose	
  Arial	
  and	
  Helvetica	
  because	
  they’re	
  easy	
  to	
  
read,	
  simple	
  and	
  web	
  safe.	
  I	
  increased	
  text	
  size	
  because	
  this	
  website	
  is	
  used	
  by	
  all	
  
people	
  who	
  live	
  in	
  the	
  city,	
  including	
  the	
  elderly,	
  so	
  it	
  should	
  be	
  easy	
  for	
  them	
  to	
  
read.	
  	
  
	
  
I	
  chose	
  blue,	
  black	
  and	
  white	
  as	
  the	
  theme	
  colors,	
  because	
  they’re	
  not	
  distracting	
  or	
  
clashing	
  and	
  go	
  well	
  with	
  the	
  Chicago	
  flag	
  colors.	
  They	
  would	
  be	
  easy	
  for	
  a	
  person	
  
with	
  visual	
  impairments	
  to	
  see	
  as	
  well.	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
 

More Related Content

Similar to Merylcharleston

Visual inventory
Visual inventoryVisual inventory
Visual inventory
TianyuKimi
 
Design Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly websiteDesign Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly website
nonlinear creations
 
Visual Inventory (Jonathan Cruz)
Visual Inventory (Jonathan Cruz)Visual Inventory (Jonathan Cruz)
Visual Inventory (Jonathan Cruz)
jscruz27
 
Analysing technical features in posters, website and motion based campaigns
Analysing technical features in posters, website and motion based campaigns Analysing technical features in posters, website and motion based campaigns
Analysing technical features in posters, website and motion based campaigns
EazyE99
 
Graphic elements content page.pptx
Graphic elements content page.pptxGraphic elements content page.pptx
Graphic elements content page.pptx
Aamir37
 
Website powerpoint
Website powerpoint Website powerpoint
Website powerpoint JTPanda
 
Johnand wanglokswebsitepowerpoint
Johnand wanglokswebsitepowerpointJohnand wanglokswebsitepowerpoint
Johnand wanglokswebsitepowerpointWang So
 
Northern life web deconstruction
Northern life web deconstructionNorthern life web deconstruction
Northern life web deconstruction
Sophie Smith
 
Technology intelligences
Technology intelligencesTechnology intelligences
Technology intelligencesDaniel Downs
 
Textual Analysis - Webpage
Textual Analysis - WebpageTextual Analysis - Webpage
Textual Analysis - Webpage
maisieweaver99
 
ICT Web Design Lesson 1.pptx
ICT Web Design Lesson 1.pptxICT Web Design Lesson 1.pptx
ICT Web Design Lesson 1.pptx
EithanGonzalez2
 
Things to consider when designing websites
Things to consider when designing websitesThings to consider when designing websites
Things to consider when designing websitesNic Finch
 
Introduction to Graphic Design.pdf
Introduction to Graphic Design.pdfIntroduction to Graphic Design.pdf
Introduction to Graphic Design.pdf
DigzignDigzign
 
Codes and conventions of contents page
Codes and conventions of contents pageCodes and conventions of contents page
Codes and conventions of contents page
nathan gkikas
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
D'arce Hess
 
Design
DesignDesign
Design
Mike Minions
 
Effective Visual Communication
Effective Visual CommunicationEffective Visual Communication
Effective Visual Communication
Sinoj Mullangath
 
A2 contents page code and conventions
A2 contents page code and conventionsA2 contents page code and conventions
A2 contents page code and conventions
maxinescott
 
Website deconstructions
Website deconstructions Website deconstructions
Website deconstructions
shantelle bowman
 
Frontcovers
FrontcoversFrontcovers
FrontcoversImran_R
 

Similar to Merylcharleston (20)

Visual inventory
Visual inventoryVisual inventory
Visual inventory
 
Design Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly websiteDesign Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly website
 
Visual Inventory (Jonathan Cruz)
Visual Inventory (Jonathan Cruz)Visual Inventory (Jonathan Cruz)
Visual Inventory (Jonathan Cruz)
 
Analysing technical features in posters, website and motion based campaigns
Analysing technical features in posters, website and motion based campaigns Analysing technical features in posters, website and motion based campaigns
Analysing technical features in posters, website and motion based campaigns
 
Graphic elements content page.pptx
Graphic elements content page.pptxGraphic elements content page.pptx
Graphic elements content page.pptx
 
Website powerpoint
Website powerpoint Website powerpoint
Website powerpoint
 
Johnand wanglokswebsitepowerpoint
Johnand wanglokswebsitepowerpointJohnand wanglokswebsitepowerpoint
Johnand wanglokswebsitepowerpoint
 
Northern life web deconstruction
Northern life web deconstructionNorthern life web deconstruction
Northern life web deconstruction
 
Technology intelligences
Technology intelligencesTechnology intelligences
Technology intelligences
 
Textual Analysis - Webpage
Textual Analysis - WebpageTextual Analysis - Webpage
Textual Analysis - Webpage
 
ICT Web Design Lesson 1.pptx
ICT Web Design Lesson 1.pptxICT Web Design Lesson 1.pptx
ICT Web Design Lesson 1.pptx
 
Things to consider when designing websites
Things to consider when designing websitesThings to consider when designing websites
Things to consider when designing websites
 
Introduction to Graphic Design.pdf
Introduction to Graphic Design.pdfIntroduction to Graphic Design.pdf
Introduction to Graphic Design.pdf
 
Codes and conventions of contents page
Codes and conventions of contents pageCodes and conventions of contents page
Codes and conventions of contents page
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
 
Design
DesignDesign
Design
 
Effective Visual Communication
Effective Visual CommunicationEffective Visual Communication
Effective Visual Communication
 
A2 contents page code and conventions
A2 contents page code and conventionsA2 contents page code and conventions
A2 contents page code and conventions
 
Website deconstructions
Website deconstructions Website deconstructions
Website deconstructions
 
Frontcovers
FrontcoversFrontcovers
Frontcovers
 

Recently uploaded

ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
Decomart Studio
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 

Recently uploaded (20)

ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 

Merylcharleston

  • 1. Analysis  of  original  interface     Pros:   Organizes  information  well       Does  not  use  more  than  three  colors       Provides  lots  of  information   Cons:   Uses  many  different  shades  of  blue  and  gradients       Too  many  small  pictures       Colors  do  not  go  well  together       Fonts  are  bolded,  colored  without  consistency       Uses  borders  and  shadows  without  consistency       Colors  are  distracting       Fonts  are  small     Visual  design  language     Links   Consistent  color,  shading                      Buttons    Consistent  color,  shading   Background   Picture  (transparent)                          Colors   Pale  blue,  black,  white     Fonts   Arial,  Helvetica  for  blocks  of  text,  larger  overall     Explanation  of  design  decisions     I  chose  a  transparent  picture  for  the  background  because  it’s  a  website  for  a  city,  so   the  viewer  should  get  an  idea  of  what  the  city  is  like.  The  colors  are  inspired  by  the   Chicago  flag  and  go  well  together.  Buttons  and  links  are  blue  so  to  make  them  easier   to  find  and  recognize.  The  buttons  have  a  slight  gradient  to  give  them  dimension  and   make  the  user  want  to  click  them.  I  chose  Arial  and  Helvetica  because  they’re  easy  to   read,  simple  and  web  safe.  I  increased  text  size  because  this  website  is  used  by  all   people  who  live  in  the  city,  including  the  elderly,  so  it  should  be  easy  for  them  to   read.       I  chose  blue,  black  and  white  as  the  theme  colors,  because  they’re  not  distracting  or   clashing  and  go  well  with  the  Chicago  flag  colors.  They  would  be  easy  for  a  person   with  visual  impairments  to  see  as  well.                        
  • 2.