SlideShare a Scribd company logo
1 of 25
Designing the user interface A Summary                                       EDIT 6325 Mr. Jamal Qaiyyim 19 September 2009
Introduction The design of a web-based user interface (website) can be very tricky.  The  beginner may want to add all the bells and whistles in order to impress the user.  While it is admirable, it is not necessary.  Here some things to consider when designing a website, or user interface: ,[object Object]
 The planning document serves as the foundation for the design
 The planning document also serves as a means to keep the designer/design team focused.,[object Object]
 Consistency
 Template
 Content
 Balanced layout
 Movement
 Color scheme
Independence of function
 Unified piece
 Interactive interface
 Link effectively
 Sense of context
 Feedback
 Equal access,[object Object]
Metaphor (con’t) To be effective metaphors must be: ,[object Object]
 Obvious
 Appropriate
 Reinforce the message,[object Object]
Consistency (con’t) The red line lets the user know where they are. Webpage navigation  The center of the home page stays the consistent as you drill down into the website
Consistency (con’t) The red line lets the user know where they are. The “SEE ALL VEHICLES” is consistent with the home page
template The template is a layout for the website.  It is the frame on which you build the content of the website.  The template provides consistency, shortens development time, and prevents object shift.  There is nothing more annoying about a website when the content shifts as you go from webpage to webpage.
content The information that populates the website is the content.  The content is what draws people to the website.  A major consideration when designing a website is the content, how many levels users must navigate.  Content can consist of graphics, text, hyperlinks, and multimedia

More Related Content

What's hot

Effective Website Design
Effective Website DesignEffective Website Design
Effective Website DesignAndrew Poulton
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!Embolden
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!Embolden
 
Website research
Website researchWebsite research
Website researcher180044
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015Equinet Academy
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and ElementsEromRamos
 
Planning Site Navigation
Planning Site NavigationPlanning Site Navigation
Planning Site NavigationMukesh Tekwani
 
The Web Design Summary.doc.doc
The Web Design Summary.doc.docThe Web Design Summary.doc.doc
The Web Design Summary.doc.docbutest
 
Website Designing PPT
Website Designing PPTWebsite Designing PPT
Website Designing PPTTejeshThulasi
 
2014 Web Design Trends by @SynecoreTech
2014 Web Design Trends by @SynecoreTech2014 Web Design Trends by @SynecoreTech
2014 Web Design Trends by @SynecoreTechClaudio Fauvrelle
 
OOP Approach to Design
OOP Approach to DesignOOP Approach to Design
OOP Approach to Designaxe777
 
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Drupal Camp Delhi
 
Information Design
Information DesignInformation Design
Information DesignGraeme Smith
 
Online tools for Content Development
Online tools for Content DevelopmentOnline tools for Content Development
Online tools for Content Developmentadrianlaranjo111
 
Mobile UX breakfast briefing August 2013
Mobile UX   breakfast briefing August 2013Mobile UX   breakfast briefing August 2013
Mobile UX breakfast briefing August 2013User Vision
 

What's hot (20)

Web site design
Web site designWeb site design
Web site design
 
Effective Website Design
Effective Website DesignEffective Website Design
Effective Website Design
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Site Mockups
Site MockupsSite Mockups
Site Mockups
 
Website research
Website researchWebsite research
Website research
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015
 
Web Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 Edition
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and Elements
 
Planning Site Navigation
Planning Site NavigationPlanning Site Navigation
Planning Site Navigation
 
Web Design Principles and Elements
Web Design Principles and ElementsWeb Design Principles and Elements
Web Design Principles and Elements
 
The Web Design Summary.doc.doc
The Web Design Summary.doc.docThe Web Design Summary.doc.doc
The Web Design Summary.doc.doc
 
Website Designing PPT
Website Designing PPTWebsite Designing PPT
Website Designing PPT
 
2014 Web Design Trends by @SynecoreTech
2014 Web Design Trends by @SynecoreTech2014 Web Design Trends by @SynecoreTech
2014 Web Design Trends by @SynecoreTech
 
OOP Approach to Design
OOP Approach to DesignOOP Approach to Design
OOP Approach to Design
 
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
 
Information Design
Information DesignInformation Design
Information Design
 
Online tools for Content Development
Online tools for Content DevelopmentOnline tools for Content Development
Online tools for Content Development
 
Mobile UX breakfast briefing August 2013
Mobile UX   breakfast briefing August 2013Mobile UX   breakfast briefing August 2013
Mobile UX breakfast briefing August 2013
 

Similar to Jamal Qaiyyim Ch3

Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3ninghua
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site DesignOvidiu Von M
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elementsrobin fay
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growthJames Smith
 
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docxjeremylockett77
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User InterfaceBeth Case
 
new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.abhishek106899
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design PrinciplesMukesh Tekwani
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01Farmanzaland
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and designAndz Bass
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsLany Lyn Magdaraog
 
Personal website design
Personal website designPersonal website design
Personal website designJingguo Jiang
 
Front end developer responsibilities what does a front-end developer do?
Front end developer responsibilities  what does a front-end developer do?Front end developer responsibilities  what does a front-end developer do?
Front end developer responsibilities what does a front-end developer do?Katy Slemon
 

Similar to Jamal Qaiyyim Ch3 (20)

Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site Design
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
Java Unit 5(part 1)
Java Unit 5(part 1)Java Unit 5(part 1)
Java Unit 5(part 1)
 
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx1  httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2  ht.docx
1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
 
new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.new UID module one(1) in the ppt format.
new UID module one(1) in the ppt format.
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
 
4 Interface Design
4 Interface Design4 Interface Design
4 Interface Design
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and design
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 
What is Web Designing?
What is Web Designing?What is Web Designing?
What is Web Designing?
 
Principles of good website design
Principles of good website designPrinciples of good website design
Principles of good website design
 
Personal website design
Personal website designPersonal website design
Personal website design
 
Front end developer responsibilities what does a front-end developer do?
Front end developer responsibilities  what does a front-end developer do?Front end developer responsibilities  what does a front-end developer do?
Front end developer responsibilities what does a front-end developer do?
 
Slides chapter 19
Slides chapter 19Slides chapter 19
Slides chapter 19
 

Recently uploaded

Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 

Recently uploaded (20)

Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 

Jamal Qaiyyim Ch3

  • 1. Designing the user interface A Summary EDIT 6325 Mr. Jamal Qaiyyim 19 September 2009
  • 2.
  • 3. The planning document serves as the foundation for the design
  • 4.
  • 15. Sense of context
  • 17.
  • 18.
  • 21.
  • 22. Consistency (con’t) The red line lets the user know where they are. Webpage navigation The center of the home page stays the consistent as you drill down into the website
  • 23. Consistency (con’t) The red line lets the user know where they are. The “SEE ALL VEHICLES” is consistent with the home page
  • 24. template The template is a layout for the website. It is the frame on which you build the content of the website. The template provides consistency, shortens development time, and prevents object shift. There is nothing more annoying about a website when the content shifts as you go from webpage to webpage.
  • 25. content The information that populates the website is the content. The content is what draws people to the website. A major consideration when designing a website is the content, how many levels users must navigate. Content can consist of graphics, text, hyperlinks, and multimedia
  • 26.
  • 27. Asymmetrical – is achieved by arranging nonidentical elements on both sides of a center line
  • 28.
  • 29. movement How the eye moves across the webpage is called movement. The eye is drawn to the certain elements of the webpage. The eyes are the key to the soul and emotions. As the eye moves across the webpage there is an emotional connection established with the user. Designers try and control where the user’s eyes go by utilizing graphics, lines, colors gradients and animations.
  • 30. Color scheme Color schemes convey information to the user. Choosing the wrong color can convey the wrong message to the user. Red Black Yellow * Black is associated with evil, fear, and death
  • 31. Independent of functional Websites need to be consistent from webpage to webpage. There are certain icons, information, and graphics that needs to be on every page associated with the website. This will remind the user that they are still in the your website. By not being able to stand on its own and not being functional, the website owner stands a chance of losing potential business.
  • 32.
  • 33.
  • 34. Unified piece (con’t) Inter-page unity. By drilling down in the site, clicking the ‘Coffee” link, you can see the unity and how every item is related to the website.
  • 35. Interactive interface Website users do not sit and wait for the website to automatically do things. Users want control and interactivity. By giving the user control, they feel as though they are a part of the adventure. This video shows the interactivity on the Nissan website.
  • 36. Link effectively The links have to be effective. They need to get the user where they want to be. The website should not contain too many links. There are options to use mouse rollover. Mouse rollover “mouseover” is the interaction between the mouse and a hotspot on the website. The link should keep the user within your website.
  • 37. Sense of context The web designer needs to design the website so that the user has a sense of the website no matter where they go within the website. The links, navigation, graphics and text should aid in providing the context. The Nissan website provides context to the user that lets them know they are within a car website.
  • 38.
  • 40.
  • 41. Equal access (con’t) This website contains alternate text and is 508 compliant.
  • 42. summary There are a lot of factors to consider when planning and designing a website. At first it may seem overwhelming, however after you have done it a few times it becomes a little easier. Take your time and look for your own examples of the different factors discussed here. *Reference: Coorugh, Calleen, and Shuman, Jim; Multimedia For The Web Revealed ‘”Creating Digital Excitement”, 2006