Proximity by Steven Young

Great Website Example of Proximity - fstoppers.com

Synopsis

Fstoppers does a really great job at implementing the principle of proximity within their website. If you will notice even in the header and navigation areas of the website, they have used proximity to group together important elements such as the four main pages of the site "Articles, Store, Community, and Groups." They have also used proximity to group together important elements to specific articles. They give you just enough information to interest you in the article so that you will click on the link to another page. Proximity is key in their design of these articles because it helps the viewer quickly browse through their site for information that is pertinent to the very user. Fstoppers shows us a key way to include text heavy articles into our sites. Only give them a snippet, and lure them in with the proximity of a title, a high quality graphic, as well as just enough of the article to grab your interest.

The other important element of proximity that they display well on their page is that of "white space." Because of proximity they are able to effectively include white space into their design. Sure they could have added more body copy from each article, but they knew that white space is important, and a basic principle of design.

Alignment by Kailey Dilworth

Great Website Example of Alignment - Wayfair.com

Synopsis

Wayfair.com is a great example of the alignment principle of design. It uses alignment to help guide the shopper's eye and to highlight important design and feed the customer's search for inspiration. It keeps its important information front and center while uses intuitive design and alignment for featured products and sales.

  1. Wayfair.com by keeps important links and its search bar front and center in the header. Doing this makes it easy for a shopper to quickly find useful links.
  2. Down the page, Wayfair.com has set up a column of popular pages and items to quick link visitors to the left so it is easily caught by the visitor's eye and featured articles in a slideshow aligned to the right.
  3. Further down are more highlighted items and sales. They are organized into broken columns with large pictures to the right and two smaller pictures to the left with a long center picture on the bottom. This demonstrates a good use of alignment in a grid system to make information easy to locate and follow.
  4. Wayfair.com features links and information that may not be as pertinent to the regular shopper. This information with links is kept in a small font size and split into four columns to make reading and locating the subject's associated links easy.
  5. In the footer, Wayfair.com features brands, less common but nessecary links, and a chance to sign up with email. Lastly, grouped together to the left is the contact, copyright and terms aligned to the left for easy location with social links off the right to keep things seperated.

Repetition by Kayce Benzon

Great Website Example of Repitition - http://www.quiznos.com/

Synopsis

REPETITION means "repeating visual elements such as line, color, shape, texture, value or image which tends to unify the total effect of a work of art as well as create rhythm." It can also be defined as patterns, which give an aesthetically pleasing look to websites.

Quiznos displays a great example of repetition throughout their homepage. We can see repetition used in the color, shapes, typography, and images. The color used in the title "How to Live Toasty & Eat Toasty" is also used in the squares below, that offer coupons that will fulfill your need to live and eat "toasty." Repeating this color naturally leads the eye from the title to the coupon. Also the repetitive use of light colors on the top, down to darker colors below, naturally leads the eye down the page.

The repetition of rectangles and squares has been used well on this website. They give a smooth down flow effect throughout the page. The top, white, thin, rectangle banner leads down to the thicker white rectangle. The two cartoon rectangles break up the single surrounding rectangle, which leads down to the smaller squares below. These smaller squares are inside a large dark rectangle, which leads the eye to the dark, smaller rectangle, even though it is only on the left side of that larger, dark, rectangle. This rectangle on the left leads the eye to the even smaller rectangles, which flow back to the right, lining the eye back up with the large set of rectangles above. Nicely done, Quiznos.

When we visit a website, we naturally want to see repetition. Our brains function more smoothly when our eyes have a pattern to follow. The repetitive typography, Free Free Free, draws our eye right to the purpose of the page. A website can guide a viewer's eye right to where they want them to look, simply by using repetition in an effective, visually pleasing way.

Contrast by Jeff Dangl

Great Website Example of Contrast - www.theWelchCompany.com

Synopsis

The concept of contrast in visual design is about using contrasting colors, sizes, images, and the arrangement of elements to draw in the viewer's focus and interest on specific key areas of a web page.

I found that the website, theWelchCompany.com, does an excellent job using contrasting elements to make their site fun and easy to use. Here are some specific examples:

  1. Contrasting element colors create visual flow: This site uses 6 primary colors (black, white, light gray, dark gray, brick red, and bright red) and has 5 content regions (header, navigation, menu, main content, and footer.) The use of color contrast between text and the background helps create a visual flow from the top header region (black text on a light gray background - contrast ratio of 19.4), to the tab options (contrast ratio of 6), and finally to the main content region (contrast ratio of 3.3.) This flow helps visitors see in order: 1) the name of the company and what they do, 2) what key page features are available, and 3) the main content.
  2. Contrasting Font Style: Only two font types are used on this website: a san-serif font and a cursive font. Normally these font families would not work well together, but the cursive style is applied to the company name logo and this helps draw attention to it and the company name. However, the black font color of the logo helps tie it together with other black header text thus letting the visitor know that it belongs here.
  3. Contrasting Bugs: The call to action bugs are colored in bright red and placed on a white or light gray background. This color arrangement not only offers a high contrast ratio at 5.3, but the bright red does not fit within the tone range for the other colors on the site. Thus, these call to action bugs tend to stand out even more. However, it is important to note that the contrast ratio is not as high as other elements on the website, so these bugs do stand out, but not so much as to detract the visitor's ability from seeing other page elements first.
  4. Navigation Region: The navigation bar consists of a row of tab buttons that have white text on a brick red background. The active tab is highlighted with a black background to help visitors know what section of the website they are at. Using white text on a black background offers the highest possible contrast ratio at 21.
  5. Images: Product images are placed in the center of the page on a white background (contrast ratio from 3.3 to 4.4.) These product images function in a similar fashion as the left side text menu navigation options. By placing the images in a bounded gray frame, the images tend to stand out more as something I can click on.

Typography by Trevon Morris

Typography

The Home page of MSNBC has changed many times over the years, but this time they have gone for a more typography clear website. Letters are added to each section for clarity, and will be discussed below.

  1. The Logo: Is clear and readable, there can be no mistake which site you have visited.
  2. Explore, Watch, Join In, and Search Box functions are emphasized, and these are four function of the site they want you to pay attention to.
  3. Latest trending news are seen clearly and readable even from a distance.
  4. The banner type news display has clear pictures, and allows huge emphasized headlines to not clash with the background. It comes with a blue play button on the Image if a video is there.
  5. The accordion menu is directly tied to the banner menu, and the writings are clear and concise as well. You can either use the banner or the accordion menu, for both are linked as you scroll. It also has a blue button with the word Watch and a play icon, so one can easily note that a video is available for the story.
  6. Additional news is presented, no major distraction images, with clear text.
  7. Programs offered by MSNBC can be found with a simple background, picture of host, and the name of the program clear and concise.

The theme continues all the way down as you scroll, and hence we will not go further, but we will look at what happens when you click a story.

Typography

Once again we will use letters to define why the typography is good or bad on the site. The site uses a lot of space to allow the text to shine through. Viewing the site on a tablet or phone is just as clear and refreshing to read.

  1. The logo once again shines through
  2. The Video is supported by the emphasized title and a clear write up summary.
  3. Other videos/ Top Stories are clear but only the latest five or shown, but the thumbnail are neatly stacked to the left, so that the text can be clearly read.
  4. The videos that are not so recent are easily read and stacked neatly.
  5. Up Next Options follow a similar trend, thumbnail and clear crisp text.

We find the site to be aesthetically pleasing, mobile friendly, and the typography is well presented across all devices.

Variations in the typography:

H2 tags enclose the anchor tags to present the main titles of stories with videos. No additional colors used, but the size difference is evident. Stories without videos use a grey summary area, and the text is black and clean. The read more on stories without videos follow the theme of the site and are blue. li tags enclose anchor tags and use a white font color clear and concise. Fonts used are NeueHaasGrotesk which is a web font, and "Helvetica Neue",Helvetica,Arial,sans-serif which are more popular to the average PC. The site uses some CSS font smoothing techniques, and also font scaling techniques. The typography automatically sizes as you adjust the window size, and all the variation rules stay true to the site. All in all, the site is well designed for all screen sizes and devices.

How to add typography fonts, color, and size to HTML

So based on the following observations you may want to know how to add fonts to your website. There are three simple ways to do this, and other complex ways using scripting.

Firstly You must have content on your website enclosed between tags, for example: < h1 > Header < /h1 > < p > Regular paragraph < /p >.

Second you apply the font, color, size by using inline styles, header placed styles, or CSS included styles. See example below.

  1. Inline styles: < p style="color: red; font-family: courier; font-size: 160%;" >Text to be styled< /p >
  2. Header Included style enclosed in style tags go inside the header tag: < header >< style > p { color: red; font-family: courier; font-size: 160%; } < /style >< /header >
  3. A Header include of a CSS file: < link rel="stylesheet" href="styles.css" > This code will simply pull the CSS file into the HTML and add the typography styles

An included CSS would look like this

body { background-color: powderblue; }
h1 { color: blue; font-family: courier; font-size: 300%; }
p { color: red; font-family: courier; font-size: 160%; }