Web Design Principles
Zi Ying, Wu
Sloan Dwyer
Ben Ballou
Unity
The theme is very consistent regardless of what page you are on. The colors, fonts,
and proportions remain constant throughout the website.
Variety
The layout is incredibly varied, with the title of the page to the side in large font
amidst the author’s work. The title bar points to the right towards the main text in the
center of the page. Each element of the website is different and appealing to the eye.
Balance
It is symmetrical both horizontally and almost vertically, remaining consistent with the
colors and changing up the font just slightly to keep the weight evenly distributed.
Scale and Proportion
The pictures and sections decrease in size down the page, with each using the same
basic format of an image followed by brief explanatory text and then a number of links.
The website uses both emphasis and proportion to guide the eye across the page.
Rhythm
The layout of the page guides the eye across the screen. The line of grass across the
top adds rhythm and a dividing line, with the text then divided into columns directing
the viewer both horizontally and vertically through the page.
Emphasis
The majority of the page is focused on the tweets of the user is following, with the
sections on the side placing emphasis on other relevant sections. The option to
compose a tweet is in the top left corner followed by others the user might be
interested in. Each section is clearly divided by a thick border.
Simplicity
The page is very clear and precise. It only shows what is necessary and omits
everything else.

More Related Content

PPTX
Web Design Principles
PPTX
Web Design Principles
PPTX
Textual Analysis - Webpage
PPTX
Lesson 1_Website production 1_Research
PPTX
Codes and conventions of Regional Magazine Front Covers
PPTX
Deconstruction of a contents page
PPTX
Textual analysis
PPT
Task 1/2/3
Web Design Principles
Web Design Principles
Textual Analysis - Webpage
Lesson 1_Website production 1_Research
Codes and conventions of Regional Magazine Front Covers
Deconstruction of a contents page
Textual analysis
Task 1/2/3

Viewers also liked (20)

PPT
Sponsors ppt logos_131011
PPTX
NUESTRA CIUDAD DE GUADALUPE
PPTX
Physical Science Unit 4
PDF
Calvert poms-global-update
PPTX
Ade survival guide
PPT
Casutadinoala
PPTX
Powerpoit mom and Sami Yasharpour 10-5-13
PPTX
NHTV Impression
PDF
Apgr8q2teachinggude2 130726032847-phpapp01
PPTX
Angry birds
PPTX
tiempo correcion
PDF
Landmark Forum Syllabus
PPTX
German alphabet with sound
DOCX
customs and culture,UK
PDF
Bender keynote
PDF
Sherriff oyster-industry-snap shot-1011-industry-edition
PPT
EARN AS YOU LEARN at 4 STEPS TO SUCCESS
PDF
Club Palm: What does history suggest?
PPT
Matei mateev-2014
PPTX
Comportamientos digitales
Sponsors ppt logos_131011
NUESTRA CIUDAD DE GUADALUPE
Physical Science Unit 4
Calvert poms-global-update
Ade survival guide
Casutadinoala
Powerpoit mom and Sami Yasharpour 10-5-13
NHTV Impression
Apgr8q2teachinggude2 130726032847-phpapp01
Angry birds
tiempo correcion
Landmark Forum Syllabus
German alphabet with sound
customs and culture,UK
Bender keynote
Sherriff oyster-industry-snap shot-1011-industry-edition
EARN AS YOU LEARN at 4 STEPS TO SUCCESS
Club Palm: What does history suggest?
Matei mateev-2014
Comportamientos digitales
Ad

Similar to Web Design Principles (20)

PPTX
Web Design Principles
PPTX
Web design principles
PPTX
Northern life web deconstruction
PPTX
C&C CONTENT PAGE
PPTX
Webdesignprinciplesbaileybucknergomez 2
DOCX
Web authoring conventions -
DOCX
Web authoring conventions-sa
PPTX
PPTX
Contents page for blog
DOCX
Contents 1
PDF
News Layout and Design by Lazarus Lepcha.pdf
PPT
Untitled 2
PPTX
News layout and design: Apt for the Bangalore University
DOCX
Contents page analysis
PPT
Design principles
PPT
Desktop-Publishing_Basic-Design-Principles.ppt
PPTX
Magazine content analysi
PPTX
Deconstructions of a magazine.
PPTX
Media contents page research
DOCX
Contetns research 2
Web Design Principles
Web design principles
Northern life web deconstruction
C&C CONTENT PAGE
Webdesignprinciplesbaileybucknergomez 2
Web authoring conventions -
Web authoring conventions-sa
Contents page for blog
Contents 1
News Layout and Design by Lazarus Lepcha.pdf
Untitled 2
News layout and design: Apt for the Bangalore University
Contents page analysis
Design principles
Desktop-Publishing_Basic-Design-Principles.ppt
Magazine content analysi
Deconstructions of a magazine.
Media contents page research
Contetns research 2
Ad

Recently uploaded (20)

PPTX
URBAN FINANCEnhynhynnnytnynnnynynyynynynyn
PDF
IARG - ICTC ANALOG RESEARCH GROUP - GROUP 1 - CHAPTER 2.pdf
PDF
Designing Through Complexity - Four Perspectives.pdf
PDF
Chalkpiece Annual Report from 2019 To 2025
PPTX
Evolution_of_Computing_Presentation (1).pptx
PPTX
ENG4-Q2-W5-PPT (1).pptx nhdedhhehejjedheh
PDF
trenching-standard-drawings procedure rev
PDF
GSH-Vicky1-Complete-Plans on Housing.pdf
PPT
Unit I Preparatory process of dyeing in textiles
PDF
Timeless Interiors by PEE VEE INTERIORS
PDF
2025_AIFG_Akane_Kikuchi_Empathy_Design.PDF
PPTX
Drafting equipment and its care for interior design
PPTX
SOBALAJE WORK.pptxe4544556y8878998yy6555y5
PPTX
Project_Presentation Bitcoin Price Prediction
PDF
Architecture Design Portfolio- VICTOR OKUTU
PPT
robotS AND ROBOTICSOF HUMANS AND MACHINES
PPTX
2. Competency Based Interviewing - September'16.pptx
PPTX
Introduction to Building Information Modeling
PPTX
WHY UPLOADING IS IMPORTANT TO DOWNLOAD SLIDES.pptx
PPTX
PROPOSAL tentang PLN di metode pelaksanaan.pptx
URBAN FINANCEnhynhynnnytnynnnynynyynynynyn
IARG - ICTC ANALOG RESEARCH GROUP - GROUP 1 - CHAPTER 2.pdf
Designing Through Complexity - Four Perspectives.pdf
Chalkpiece Annual Report from 2019 To 2025
Evolution_of_Computing_Presentation (1).pptx
ENG4-Q2-W5-PPT (1).pptx nhdedhhehejjedheh
trenching-standard-drawings procedure rev
GSH-Vicky1-Complete-Plans on Housing.pdf
Unit I Preparatory process of dyeing in textiles
Timeless Interiors by PEE VEE INTERIORS
2025_AIFG_Akane_Kikuchi_Empathy_Design.PDF
Drafting equipment and its care for interior design
SOBALAJE WORK.pptxe4544556y8878998yy6555y5
Project_Presentation Bitcoin Price Prediction
Architecture Design Portfolio- VICTOR OKUTU
robotS AND ROBOTICSOF HUMANS AND MACHINES
2. Competency Based Interviewing - September'16.pptx
Introduction to Building Information Modeling
WHY UPLOADING IS IMPORTANT TO DOWNLOAD SLIDES.pptx
PROPOSAL tentang PLN di metode pelaksanaan.pptx

Web Design Principles

  • 1. Web Design Principles Zi Ying, Wu Sloan Dwyer Ben Ballou
  • 2. Unity The theme is very consistent regardless of what page you are on. The colors, fonts, and proportions remain constant throughout the website.
  • 3. Variety The layout is incredibly varied, with the title of the page to the side in large font amidst the author’s work. The title bar points to the right towards the main text in the center of the page. Each element of the website is different and appealing to the eye.
  • 4. Balance It is symmetrical both horizontally and almost vertically, remaining consistent with the colors and changing up the font just slightly to keep the weight evenly distributed.
  • 5. Scale and Proportion The pictures and sections decrease in size down the page, with each using the same basic format of an image followed by brief explanatory text and then a number of links. The website uses both emphasis and proportion to guide the eye across the page.
  • 6. Rhythm The layout of the page guides the eye across the screen. The line of grass across the top adds rhythm and a dividing line, with the text then divided into columns directing the viewer both horizontally and vertically through the page.
  • 7. Emphasis The majority of the page is focused on the tweets of the user is following, with the sections on the side placing emphasis on other relevant sections. The option to compose a tweet is in the top left corner followed by others the user might be interested in. Each section is clearly divided by a thick border.
  • 8. Simplicity The page is very clear and precise. It only shows what is necessary and omits everything else.

Editor's Notes

  • #3: The theme is very consistent regardless of what page you are on. The colors and fonts included are similar throughout whole design as well as the proportions of the site.
  • #6: The way the site is set up and with the different areas.