SlideShare a Scribd company logo
Design
Principles
Jorge Garcia
Michaela Joines
Erica Seeley
Unity




Pittsburg State University’s website exhibits color unity. The red of the
main banner is repeated throughout the page in the heading font
color, the search box, and the main banner picture. The close
proximity of the same color helps with the flow of the eye throughout
the page.
Simplicity




The homepage of Google shows the essence of simplicity. With merely
the company logo and a minimalistic search box, the homepage
allows the visitor to easily begin their search process, without any
distracting ads or details.
Balance




Monster’s website shows asymmetrical balance in its header bar and
the weight distribution between the side bar and the main feed. The
main home bar is larger than the help bar on the right hand side, but
with the addition of the advanced search bar it becomes
asymmetrically balanced. The side bar and the main feed follow the
golden rule, with the main feed being a square and the side bar
being a rectangle.
Emphasis




This website shows an emphasis on the word “Words.” By emphasizing
this word, the viewer knows exactly what the website’s focus is by
naturally focusing your eye on the main topic.
Rhythm




This website exhibits rhythm in its main homepage. The diagonal logo
leads your eye to the slogan “We Make Pointless Stuff,” which then
uses the blue line to lead the viewer to the company’s process for
creating a project.
Variety




Dynamit’s homepage includes differing sizes of boxes, shapes, and
fonts to create an overall theme of variety. This principle keeps the
viewer’s attention, and presents them with multiple aspects of their
business.
Scale/Proportion

This website shows
differing scales and
proportions in its
images and text.
The proportion of
the images leads
the viewer to the
most recent story.
The scale of the text
accomplishes      the
same objective by
focusing on the
company’s
accomplishments
and ideals.

More Related Content

Similar to Design principles

Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
Beth Case
 
Sephora redesign case study.pdf
Sephora redesign case study.pdfSephora redesign case study.pdf
Sephora redesign case study.pdf
ZhuojunSun
 
Crayola preso
Crayola presoCrayola preso
Crayola preso
jeremypapke
 
Website analysis
Website analysisWebsite analysis
Website analysis
EmilyLidgard
 
Business website analysis
Business website analysisBusiness website analysis
Business website analysis
Lewis Appleton
 
Task 1 Portfolio Website Analysis
Task 1 Portfolio Website AnalysisTask 1 Portfolio Website Analysis
Task 1 Portfolio Website Analysis
aimsyayj
 
Web Design Trends in Australia - PPT
Web Design Trends in Australia - PPTWeb Design Trends in Australia - PPT
Web Design Trends in Australia - PPT
Sxope Consolidate
 
Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3
ninghua
 
Textual Analysis - Webpage
Textual Analysis - WebpageTextual Analysis - Webpage
Textual Analysis - Webpage
maisieweaver99
 
Portfolio Evaluation
Portfolio EvaluationPortfolio Evaluation
Portfolio Evaluation
ryanch
 
Arts Barge Project Presentation
Arts Barge Project PresentationArts Barge Project Presentation
Arts Barge Project Presentation
JordanRafferty32
 
Cotents page analysis
Cotents page analysisCotents page analysis
Cotents page analysis
RyanDenner
 
Presentation1
Presentation1Presentation1
Presentation1
faithej
 
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
 
Website conventions
Website conventionsWebsite conventions
Website conventions
oliviadoug
 
Webpage design design for screen
Webpage design design for screen Webpage design design for screen
Webpage design design for screen
beckybbb
 
Design principles in web design
Design principles in web designDesign principles in web design
Design principles in web design
ejhuskey
 
Design principles in web design
Design principles in web designDesign principles in web design
Design principles in web design
everjuana
 
Design principles in web design
Design principles in web designDesign principles in web design
Design principles in web design
ejhuskey
 
Design Principles of Web Design
Design Principles of Web DesignDesign Principles of Web Design
Design Principles of Web Design
terrillnolan2015
 

Similar to Design principles (20)

Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
 
Sephora redesign case study.pdf
Sephora redesign case study.pdfSephora redesign case study.pdf
Sephora redesign case study.pdf
 
Crayola preso
Crayola presoCrayola preso
Crayola preso
 
Website analysis
Website analysisWebsite analysis
Website analysis
 
Business website analysis
Business website analysisBusiness website analysis
Business website analysis
 
Task 1 Portfolio Website Analysis
Task 1 Portfolio Website AnalysisTask 1 Portfolio Website Analysis
Task 1 Portfolio Website Analysis
 
Web Design Trends in Australia - PPT
Web Design Trends in Australia - PPTWeb Design Trends in Australia - PPT
Web Design Trends in Australia - PPT
 
Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3
 
Textual Analysis - Webpage
Textual Analysis - WebpageTextual Analysis - Webpage
Textual Analysis - Webpage
 
Portfolio Evaluation
Portfolio EvaluationPortfolio Evaluation
Portfolio Evaluation
 
Arts Barge Project Presentation
Arts Barge Project PresentationArts Barge Project Presentation
Arts Barge Project Presentation
 
Cotents page analysis
Cotents page analysisCotents page analysis
Cotents page analysis
 
Presentation1
Presentation1Presentation1
Presentation1
 
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
 
Website conventions
Website conventionsWebsite conventions
Website conventions
 
Webpage design design for screen
Webpage design design for screen Webpage design design for screen
Webpage design design for screen
 
Design principles in web design
Design principles in web designDesign principles in web design
Design principles in web design
 
Design principles in web design
Design principles in web designDesign principles in web design
Design principles in web design
 
Design principles in web design
Design principles in web designDesign principles in web design
Design principles in web design
 
Design Principles of Web Design
Design Principles of Web DesignDesign Principles of Web Design
Design Principles of Web Design
 

Recently uploaded

Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 

Recently uploaded (20)

Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 

Design principles

  • 2. Unity Pittsburg State University’s website exhibits color unity. The red of the main banner is repeated throughout the page in the heading font color, the search box, and the main banner picture. The close proximity of the same color helps with the flow of the eye throughout the page.
  • 3. Simplicity The homepage of Google shows the essence of simplicity. With merely the company logo and a minimalistic search box, the homepage allows the visitor to easily begin their search process, without any distracting ads or details.
  • 4. Balance Monster’s website shows asymmetrical balance in its header bar and the weight distribution between the side bar and the main feed. The main home bar is larger than the help bar on the right hand side, but with the addition of the advanced search bar it becomes asymmetrically balanced. The side bar and the main feed follow the golden rule, with the main feed being a square and the side bar being a rectangle.
  • 5. Emphasis This website shows an emphasis on the word “Words.” By emphasizing this word, the viewer knows exactly what the website’s focus is by naturally focusing your eye on the main topic.
  • 6. Rhythm This website exhibits rhythm in its main homepage. The diagonal logo leads your eye to the slogan “We Make Pointless Stuff,” which then uses the blue line to lead the viewer to the company’s process for creating a project.
  • 7. Variety Dynamit’s homepage includes differing sizes of boxes, shapes, and fonts to create an overall theme of variety. This principle keeps the viewer’s attention, and presents them with multiple aspects of their business.
  • 8. Scale/Proportion This website shows differing scales and proportions in its images and text. The proportion of the images leads the viewer to the most recent story. The scale of the text accomplishes the same objective by focusing on the company’s accomplishments and ideals.