WEB DESIGN
PRINCIPLES
Kelsey Kirkpatrick, Morgan Fruits, Kevin Georges
UNITY
Canvas – Unity
• All elements of the
website have the same
alignment (flush left)
• Easy to navigate
• All of the links are
similar to each other
• All professors use the
same process to upload
their files and
assignments, which
makes it more unified
VARIETY
Instagram – Variety
• Different photos create a
colorful collage of images
• Different sizes of images
make the page look more
interesting
• The page is still
organized even though
there is variety in the
images
BALANCE
Facebook – Balance
• Symmetrical design
because all of the
elements are evenly
balanced
• Toolbars on both left and
right make the page equal
SCALE & PROPORTION
Flickr – Scale & Proportion
• The images in the left
column are larger which
makes them more dominant
• Photos are larger than the
text because they are the
focus of the website
RHYTHM
Hugs for Monsters – Rhythm
• The illustrations on the website
direct your eye across the page
• The radial layout of the
illustration brings your attention
back to the center of the page
EMPHASIS
PSU – Emphasis
• The image of the students
on the home page is
isolated, therefore it
creates emphasis
• The size of the image on
the home page also
emphasizes its importance
• Image is placed in the
center of the screen which
creates a focal point
SIMPLICITY
Twitter – Simplicity
• White background of
the toolbars makes the
design look simplistic
• No extra elements
besides what is necessary
• Only using two columns
• Number of characters is
limited so there isn’t too
much text

More Related Content

PPTX
Bb asia-meetings
PDF
Untitledpresentation
PPTX
Global warming
PPTX
Foreign policy & hitler
PDF
Spongebob squarepants
PDF
Untitledpresentation
PPTX
Subjects & Predicates
PPTX
5 themes of geography 3
Bb asia-meetings
Untitledpresentation
Global warming
Foreign policy & hitler
Spongebob squarepants
Untitledpresentation
Subjects & Predicates
5 themes of geography 3

Viewers also liked (10)

PPTX
America drawn to war 3
PPTX
Usa in wwi 4
PPTX
Election of1912 5
PDF
1_thomsongreta_famousfeats
PDF
Meet Handlebar
PPTX
Limits to progressivism 6
PPTX
Wilson & the peace treaty 5
PPTX
World war i 1
PPTX
Kerajaan Pasai, Aceh, Malaka (TUGAS SEJARAH KELAS XI IPS4 SMA NEGERI 1 BINTAN)
PPTX
블랙보드 개발 중인 기능
America drawn to war 3
Usa in wwi 4
Election of1912 5
1_thomsongreta_famousfeats
Meet Handlebar
Limits to progressivism 6
Wilson & the peace treaty 5
World war i 1
Kerajaan Pasai, Aceh, Malaka (TUGAS SEJARAH KELAS XI IPS4 SMA NEGERI 1 BINTAN)
블랙보드 개발 중인 기능
Ad

Recently uploaded (20)

DOC
Soft-furnishing-By-Architect-A.F.M.Mohiuddin-Akhand.doc
PPTX
Introduction to pro and eukaryotes and differences.pptx
PDF
My India Quiz Book_20210205121199924.pdf
PDF
ChatGPT for Dummies - Pam Baker Ccesa007.pdf
PPTX
Computer Architecture Input Output Memory.pptx
PDF
A GUIDE TO GENETICS FOR UNDERGRADUATE MEDICAL STUDENTS
PPTX
Share_Module_2_Power_conflict_and_negotiation.pptx
PDF
BP 704 T. NOVEL DRUG DELIVERY SYSTEMS (UNIT 2).pdf
PDF
AI-driven educational solutions for real-life interventions in the Philippine...
PDF
IGGE1 Understanding the Self1234567891011
PPTX
CHAPTER IV. MAN AND BIOSPHERE AND ITS TOTALITY.pptx
PDF
FORM 1 BIOLOGY MIND MAPS and their schemes
PDF
Hazard Identification & Risk Assessment .pdf
PDF
FOISHS ANNUAL IMPLEMENTATION PLAN 2025.pdf
PDF
CISA (Certified Information Systems Auditor) Domain-Wise Summary.pdf
PDF
Vision Prelims GS PYQ Analysis 2011-2022 www.upscpdf.com.pdf
PDF
Uderstanding digital marketing and marketing stratergie for engaging the digi...
PDF
Paper A Mock Exam 9_ Attempt review.pdf.
PPTX
ELIAS-SEZIURE AND EPilepsy semmioan session.pptx
PDF
LDMMIA Reiki Yoga Finals Review Spring Summer
Soft-furnishing-By-Architect-A.F.M.Mohiuddin-Akhand.doc
Introduction to pro and eukaryotes and differences.pptx
My India Quiz Book_20210205121199924.pdf
ChatGPT for Dummies - Pam Baker Ccesa007.pdf
Computer Architecture Input Output Memory.pptx
A GUIDE TO GENETICS FOR UNDERGRADUATE MEDICAL STUDENTS
Share_Module_2_Power_conflict_and_negotiation.pptx
BP 704 T. NOVEL DRUG DELIVERY SYSTEMS (UNIT 2).pdf
AI-driven educational solutions for real-life interventions in the Philippine...
IGGE1 Understanding the Self1234567891011
CHAPTER IV. MAN AND BIOSPHERE AND ITS TOTALITY.pptx
FORM 1 BIOLOGY MIND MAPS and their schemes
Hazard Identification & Risk Assessment .pdf
FOISHS ANNUAL IMPLEMENTATION PLAN 2025.pdf
CISA (Certified Information Systems Auditor) Domain-Wise Summary.pdf
Vision Prelims GS PYQ Analysis 2011-2022 www.upscpdf.com.pdf
Uderstanding digital marketing and marketing stratergie for engaging the digi...
Paper A Mock Exam 9_ Attempt review.pdf.
ELIAS-SEZIURE AND EPilepsy semmioan session.pptx
LDMMIA Reiki Yoga Finals Review Spring Summer
Ad

Web Design Principles

  • 1. WEB DESIGN PRINCIPLES Kelsey Kirkpatrick, Morgan Fruits, Kevin Georges
  • 2. UNITY Canvas – Unity • All elements of the website have the same alignment (flush left) • Easy to navigate • All of the links are similar to each other • All professors use the same process to upload their files and assignments, which makes it more unified
  • 3. VARIETY Instagram – Variety • Different photos create a colorful collage of images • Different sizes of images make the page look more interesting • The page is still organized even though there is variety in the images
  • 4. BALANCE Facebook – Balance • Symmetrical design because all of the elements are evenly balanced • Toolbars on both left and right make the page equal
  • 5. SCALE & PROPORTION Flickr – Scale & Proportion • The images in the left column are larger which makes them more dominant • Photos are larger than the text because they are the focus of the website
  • 6. RHYTHM Hugs for Monsters – Rhythm • The illustrations on the website direct your eye across the page • The radial layout of the illustration brings your attention back to the center of the page
  • 7. EMPHASIS PSU – Emphasis • The image of the students on the home page is isolated, therefore it creates emphasis • The size of the image on the home page also emphasizes its importance • Image is placed in the center of the screen which creates a focal point
  • 8. SIMPLICITY Twitter – Simplicity • White background of the toolbars makes the design look simplistic • No extra elements besides what is necessary • Only using two columns • Number of characters is limited so there isn’t too much text