- Find a website. (There are roughly 20 billion, by some accounts. Pick a good one.)
- In a comment to this post, submit the URL and a few sentences explaining how you think , similarity, alignment, and proximity are / are not at work.
Just look at the main page of the website, often called the "index." Submit your comments no later than 1/26, early a.m.
Maurice Fleming
ReplyDeletehttp://sneakernews.com/
Similarity is displayed heavily within the main pictures of the shoes to show that while they are very different either by branding, color, or price, they still are the most dominant objects on the page and are what the designers want you to focus your attention on most.
Alignment is at work here with the headings and the text that follows the dominant pictures as well as the navigation links and other boxes of information on the sides and at the top of the page as well.
Proximity is exhibited also in the size and dominance of the text and pictures to show that all of the shoes have no more importance over the other. Nevertheless they are all shoes.
http://www.aol.com/
ReplyDeleteThe aol page does have the qualities of similarity, proximity, and alignment. The purple headings are similar in color and high in contrast. Most of the page is white and purple which relates to similarity. The top news, entertainment news, etc. are aligned on top of each other, and close in proximity so it's easy to navigate from one subject to the next.
proximity is best at work at the middle of the page where they show the list of shows it's a vertical grouping of the rows which shows a great arrangment of proximity.
ReplyDeleteAlignment is best expressed at the bottom of the page where it shows websites for the different audiences for nick. The alignment plays well and is easy to follow because of the bold headings and the subtitles underneath each.
Similarity is shown all over the page with the colors that are being displayed throughout the page, but the most similarity is the orange being used for all the headings and navigation headings in each section of the page.
www.gourmetsleuth.com
ReplyDeleteThe most immediate design principle recognized on this site is the use of alignment and heavy reliance on negative space. The mixed use of horizontal and vertical text positioning created hierarchy within each header tab (i.e. Featured Authors & Articles vs. Latest Gourmet Recipes).
The next design principle that stands out is the similarity of design objects. Coherence and consistency is obtained by the use of navigating tabs that resemble the printed version of a tabbed recipe card. The shape and size of the graphic art used with text headings were roughly the same (85 x 85 pixels), which also allows the web page to function efficiently even if it were printed and cut into sections according to the similarity of tabbed sections.
Proximity appears to be the weakest of the three design principles, and not because of a flaw in design, but because of the excellent use of alignment and similarity. The proper vertical and horizontal spacing used with the food art and headings provides an unmistakable relationship and connection with the subject matter, food.
Chanise Boston
ReplyDeletehttp://www.nicekicks.com/
Alignment is shown with the negative space not only making columns but also separating by topic and interests.
Similarity is shown with the dominance and size with text, pictures, and products.
Proximity is exhibited also through the size and dominance of text, pictures, and products to help guide the reader. What I like most about this website is its balance between products and texts. It provides news stories on their newest products for those that are interested but shows just enough on the index page so the reader can scan easily.
http://beta.weather.com/?pin=true
ReplyDeleteSimilarity is shown on the title page in that all links are either in blue text or their background tab is blue. This also is tied to the fact that the color blue is the signature color of the weather channel. Therefore, when we see blue words or pictures, we automatically assume that it's about weather.
Proximity is apparent through the seperation of the videos that are at the bottom of the page, whereas, weather alerts and important information about the forecast is located at the top of the page.
Alignment is shown on the middle of the page in the section highlighted 'Southeast mess becomes Northeast storm.' In the section, we can clearly read each bullet quickly and effortlessly as well as choose which one we want to read and don't want to read.
Andrew S. Preer, Jr.
ReplyDeleteLayout & Design
ENG 3333
Mr. Hart
25 January 2011
Website: Leica Camera AG - M System Cameras
Link:http://us.leicacamera.com/photography/m_system/
Regarding similarity, viewers can see on this particular website (based on pictures)that there are many Leica M Series cameras. Viewing the photos and print positioned across from each model, one can see how each camera model is similiar yet different and how all of them serve a major purpose, to photograph subjects.
Concerning alignment, viewers can see how each Leica M Series camera model is placed in position one under another across from text that describes each model. Along with this, lines are drawn under each model separating each one from the other creating space in between. All of this occurs on the website with titles of surrounding product info. links.
Dealing with proximity, all of the information (photos, descriptions, and product info. links)and space are postioned in such a way as to be pleasing to the eye for easy reading and observing. Through observation, viewers can see that all the info. on the website is related as well.
From Candra:
ReplyDeleteKXAN's website is a good example of proximity, alignment and similiarity. Similarity, in that all of the headings and sub-headings below have the same font size and color. Alignment, in how the heading boxes are stacked on top of each other. As for the proximity, they're close enough to where users can easily move from one topic to the next. Yet, they're far enough away to where users aren't accidentally clicking on the wrong heading. In short, the use of proximity allows for easy navigation.
www.kxan.com
http://mediatakeout.com/index.html
ReplyDeleteSimilarity is shown on this webpage as they have consistent colors throughout the site, black and white. The most obvious form of similarity is the use of several different font types. The initials for the website, MTO, are in a totally different color and are blocked where as the rest of the words are black and in the same crazy bolded black font. Also, before each story the title or heading before the picture has a certain font and is larger and bolder than the article itself. Also, it is clear how color stands out in this website as black and white are the primary colors; however the accent color is orange, for bolded words and links.
Alignment is shown as you scroll down and the several different links for the websites are separated into columns, and the view and comments are aligned the same as well. Also, if you click on the separate links for the new page that comes up there is a different alignment, however quite similar. It is the same for each story on the website, you have the title, picture, the article, and then the comments right underneath each other.
Proximity is shown clear through the organization of the different links and pictures; however I believe that it is a weak example of proximity because everything on the web page seems so bunched together. It is clear that dominance is shown as you arrive to the site and the first thing that is noticed is a large picture. In my opinion, the reason for this it the old time saying, a picture is worth a thousand words. When a viewer goes to this site they notice the picture analyze it and that make it easier for them to know what the article is about.
I decided to choose si.com as my website of choice. I refer to this website at least 10-15 times a day. It is a website that uses many examples of design, but most importantly it shows excellent examples of proximity, alignment, and similarity.
ReplyDeleteProximity: The main section on this page is centered, featured with a large photograph, which attracts the viewers to the articles of which the sports world considers important. There are articles to the right and below in a separate section, separated by negative space. The smaller font and the off-center locations of these articles symbolizes it's less-importance.
Alignment: The score ticker updated at the top of the page is aligned from left to right. Small squares surrounded by negative space contain the game scores that keep viewers updated on all sport scores. This website is designed to be read from left to right, up to down. The only exception to this is the main stories that are centered to this page that will automatically catch your attention no matter what.
Similarity: All of the links on this page are confined in different size squares and rectangles. Similar fonts are used on each of titles of the news, but the size change represents the importance of each article.
This website is an excellent example of great architecture. The most important news will be the first seen, but the way this website is made whatever information that is needed to be found is easily accessible. This website gives great examples of the principles of design: similarity, proximity, and alignment.
Crystal Mayes --
ReplyDeleteI chose www.covergirl.com
The reason is that I think it is one of the most revolutionary sites in the use of dynamic web-interaction. The site allows you to shop online and pick and choose samples of make-up. It uses promixity in a way that everything is set-up on the menu bar or ribbon to let you scroll down to each topic so you can choose your make-up, lipstick, etc. Also the site keeps changing to bright brillant collrs. The use of similarity is in the use of colors. Also, the use of negative space and direction to point your eyes to the text. The use of alignment shows how the lipstick and the rest of the make-up is set up in a dynamic way. I really like this website! It also lets you chat with an online beauty consultant and features a mirror make-up model.