This page is a WIP. However, please enjoy some old assignment contect about the principles of design.
Welcome to the page where I explain the four principles of design I used to style my homepage. From the Non-Designer's Design Book by Robin Williams, the basic principles are contrast, repetition, alignment, and proximity.
The idea of using contrast in the design of a a webpage is to make sure that if elements are unrelated, they should not look similar but they should look distinct.
I used contrast in the design of my webpage by making a distinction between body text and headlines by use of different fonts. The body text uses a serif typeface while headlines use a strong bold typeface with a much larger font size. The three font sizes used on the page are 18px, 23px, and 36px. Another element of contrast that I used in the design is contrasting the soft light green background with the bold black text of the headlines which helps to draw the eye to it. Additionally, the navigation bar at the top of the page is also black with the elements within it having a white text so that a bold contrast is created between the body of the page and the header. This attracts the readers eye and encourages them to click on the links to the other pages.
Repetition is the idea that elements of the same family should have a similar design throughout the whole page.
I used repetition in my page design by making sure that all headers and subheaders follow a consistent style of being the same sans-serif font in bold. All body text is the same serif font with the first paragraphs lacking an indent. This style is consistent on all pages of the site so that no matter which page the user is on, they know that it is part of my website. Another element that drives this point is the header which uses the same sans-serif font as the headers and appears the same on all pages
The biggest rule in alignment is that nothing on the page should be arbitrarily placed. Each element should be aligned with something else. You should be able to draw a strong line between elements so that everything is unified and organized
I used this in my webpage design by creating a strong line on the left by having the paragraphs and all headers flush left on the page. The only elements that deviate from this are the bullet points along with the table and image. I did this to visually set them apart and catch the reader's eye. These elements are aligned further to the right of the body text and create a second left-edge for the eye of the reader to follow.
Proximity is used in design to indicate how elements are related. Elements that are related to each other should be placed in close proximity so that the reader is able to establish a relationship between them. Unrelated items should be placed further away. The page should also have an obvious flow to it to guide the reader through the information
I used proximity on my webpage by placing text close to their associated header so that the reader is easily able to navigate to the portion of the text they want to read by scanning the header. Additionally, the links to other pages of the site have been placed together at the top of the page so that the reader can easily flip between the pages. Hyperlinks to the sites have also been included in the write-up for ease of use.