Basic Design Principles – C.R.A.P. & Bluewater Web Development
We're reading "Basic Design Principles for Non-Designers," by Williams & Tollett. They offer us four solid, core design principles, Contrast, Repetition, Alignment, and Proximity, to help us consider design in our web-based composition.
I've rearranged the order of presentation to construct an acronym for the principles. C.R.A.P. strikes me as a fun (and irreverent) way to describe the principles since they're supposed to help yield aesthetically pleasing design.
Let's put some of these principles to work by examining the extent to which some real websites utilize the principles.
Bluewater Web Development is a great place to begin because their portfolio includes links to their actual work. And they happen to have just enough sites for everyone to get their own site to examine.
Assignment
- Choose a website from Bluewater's portfolio. (25 sites, 24 students. No duplication, please!)
- Use Williams & Tollett's four main design principles (for nondesigners) - C.R.A.P. to constructively critique your chosen website.
- Write up a brief (250-word) interpretation of what works and what doesn't in the site, using the principles to help organize your comment.
- Lead with your name in bold, followed by the name of the website and a link, and use bullets, proofreading, and tight writing in your comment.
- Post your write-up as a comment here and be ready to make a case for your interpretation in class.
Comments
Michael J. Cripps
York College/CUNY
My general evaluation of the York College/CUNY website is…
Like or Dislike:
0 
0
http://www.lighthouseauto.com
Contrast: i will first start by saying contrast can be defined as what drew your eyes to the page, and the hierarchy in which the information was displayed. In the case of http://www.lighthouseauto.com the header was the attention grabber, and the reason being it was 2/3 the entire page. it consisted of a small logo in the top right corner with the name and address of the business. there were two different usage of bold fonts; the paragraph headings were in red bold fonts, while sub-headings were in black bold fonts. another focal point of the pages was it’s quick search which is located to the right of the screen below the header, which can be seen on all the related pages.
Repetition: this can viewed as a the uniformity of the site, this deals with the relation of pages, & what are their similar elements. in the case of wwwlighthouseauto.com there was a combination of five different pages; home, about us, our inventory,faq, and contact us. all five pages shared a definate resemblance they all consisted of the same header & quick search elements to create that established, reputable, uniform look.
Alignment: the arrangement of the of items or information on the pages, there are three kinds of alignment left, center, & right alignment. http://www.lighthouseauto.com consisted of a left alignment with a empty right column. all the pages consisting of body & text were aligned to the left.
Proximity: refers to a level of closeness, whether image or text. when two things are close together more than likely they relate to each other, and vice versa. in the case of http://www.lighthouseauto.com they lost points where as proximity is concerned the heading were distinctively apart from the paragraphs.
Like or Dislike:
0 
0
<!– /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:1739745906; mso-list-template-ids:-1395108030;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:?; mso-level-tab-stop:.5in; mso-level-number-position:left; text-indent:-.25in; mso-ansi-font-size:10.0pt; font-family:Symbol;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} –>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:”";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:”Times New Roman”;
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
http://www.insidethedangerzone.com/
Contrast – If contrast is “what draws your eyes into the page” (William & Tollent, 2000.) The first thing that caught my attention to the sight was the name. And when inside the sight, my eyes are drawn by the contrasting colors of black, blue and white. The picture on the right side provides the reader with a good initiative of what the website may be dedicated to. Although I think the words/body is kind of sloppy. The big font is a good idea, but the website links would look better within the paragraphs if they were hyperlinks.
Repetition – In terms of repetition, the color theme is consistent, as well as the font. Although the font may have hurt the website more than assist. For example, the “Events” page would look better if the event font was smaller but, in bold. The pictures in the image gallery are okay, but I don’t like that the pictures in “About the Author” look mediocre because the photo of the author is small and all different sizes.
Alignment – I think that there should be a ½ an inch boarder all around the page. The big font, plus the big photo, and the page format, makes the information seem “stuffed” into place. But at least, the same alignment is consistent in every page.
Proximity – The pictures are in close proximity to the caption that describes it. Plain (as a matter of opinion), but sufficient (as a matter of fact), proximity is not a priority problem for this page.
***Because I’ve never criticized a website for it’s format (rather than it’s content), I now appreciate how paying attention to minor details can affect the mood and the meaning of the page. Definitely some things to keep in mind for my blog and html hand coding.
Like or Dislike:
0 
0
The top half of my reply must be a technical difficulty.
Like or Dislike:
0 
0
Diasia Scott
http://www.hcobx.org/
Contrast- The thing that caught my eye and what made me choose this site is the brief biography that was given which stated that this site was striving to make Dare County healthier. The contrast on the page is the constant blue and white color scheme. The top pictures are different for the different links. The color scheme works for me but some of the pictures don’t relate to the links and should be changed. For instance, the picture of the boat under the link named cancer prevention doesn’t do much for me. The picture is nice, but it doesn’t go with the mood of the page.
Repetition- Various pictures are repeated throughout the site and the blue and white color scheme is consistent. The pictures within the link with the same name are also repeated.
Alignment- The alignment scheme is consistent throughout the website. I don’t have a problem with it. It makes the words on the site look well put together and neat opposed to there being different alignment schemes on each page whereas it would make a page look like it’s done amaturely.
Proximity- The charts are within close pronimity of what they are discribing on the page. Another example that shows that this site doesn’t have a problem using proximity is on any various page. The names are right above the email addrsesses which makes it easy to know who you are going to contact.
My evaluation of this website is a good one. I like what the people who made the website stand for and I am glad that they are trying to run their site for a good cause.
Like or Dislike:
0 
0
Abbie Brown
Carlina Charm
http://www.carolinacharmonline.com/
Contrast: The contrasting elements are the five diffent pictures of the landscape designs. The bright colors of the plants bring the visitor’s eyes all over the page, giving him/her the idea of the great job the company does at beautifying land. The pictures are of different sizes and dominate the page. The company really wants to make the people see what they do.
Repetition: There are three links on http://www.carolinacharmonline.com/ that take the visitor into the online store. Two of the three links are links that take visitors to view products for birds such as birdhouses and birdfeeders. The company wants customers to purchase these products because they feel they are a perfect addition to any landscape.
Alignment: http://www.carolinacharmonline.com/ has their descriptions aligned neatly on the left side of the page. They have provided bullet points listing the services provided to customers. The pictures are pasted right next to or on top of each other, creating a visual for the people who visit the website. The menu bar appears right after the heading. One does not have to frantically wheel their mouse around the page to find information about the company. Horizontally and vertically, the alignment on this page is presentable and doesn’t confuse the visitor.
Proximity: The headline for http://www.carolinacharmonline.com/ is in close proximity to the services provided by the company. Everything appears to be in direct relationship to each other. There are no gaps that make the page appear to be fragmented.
Like or Dislike:
0 
0
http://www.islandershuntclub.com/
Contrast: If two things aren’t the same, make them completely different. On this website the background and the picture of the deer and somewhat similar. They share the same colors, and the background picture is just a birds-eye view of what the picture is. Also, the side text and links all match with the entire webpage.
Repetition: If you click on any of the links on the side, it takes you to another part of the website. All of these pages are identical, except for the text of course. The creator of this page was consistent with the background and the format of the page.
Alignment: Everything on this page is aligned. The text below the headline is perfectly aligned with the picture of the deer and the county. The links to the right are all neatly set up one under another. Lastly, the text and borders are centered in the middle for the viewers pleasure.
Proximity: Everything seems well organized; things are well spaced out with enough information on each page. The page is extremely easy to use, even a first time computer user can use this website. With their easy navigation a first time user can find out MORE information about the Islanders Hunt Club located in Bertie County, North Carolina.
My general evaluation of the Islanders Hunt Club website is okay, 8/10. The reason i say this is because it is easy to use, its aligned well, has good proximity, uses repetition, and has contrast. The only this is that I think that it looks kind of boring. The website should maybe include more interesting pictures and more information about the club.
Like or Dislike:
0 
0
Roger Fagan
http://www.machapunga.com/
Contrast- contrast is something that stands out, something as you look at it, it just jumps at you. I chose this site because to it jumps at you, it does not have much on the page but how it is design makes you keen in on the message it is presenting. The site is speaking about a acre of private land, this information is centered in the middle of the page and in the background you see some of the acre of land, which gives the person who views the site a sample of what they can expect.
Repetition-Throughout the site the same title is present, it does not change only thing that changes are the contents depending on the link you choose.
Alignment- Because of the content of this site and how it is displayed there is not much I can say about the alignment, however each link shows different information and those information is aligned pretty well.
Proximity-The headline of the site MACHAPUNGA is in close proximity of each other. Each letter is someway overlapping each other, specially the first and the last letters.
Like or Dislike:
0 
0
Jade Moody
http://www.tomthumbscookouts.com/
Contrast: The first thing that caught my eye on this site was the vibrant colors. It was a very simple site but the cartoons and cartoonish colors made everything pop against the black boarder of the site. The cartoon graphic of Tom holding up a fish and his THUMBS up was not only humorous but it was ascetically pleasing also.
Repetition: Throughout the site the web designer uses the same background and overall layout for the site. Most of the links include pictures of food that is offered for the “cookout” as Tom calls it.
Alignment: the overall alignment of this site is decent although the bottom margin could be a little larger as the bottom photos are almost falling off the page. Some of the subheadings are almost falling off of the page as well. The main part of the site could be shifted to the left more.
Proximity: The photos are in close proximity to the words are directly in conjunction with the photos.
Like or Dislike:
1 
0
Brandon
http://www.timberlandsunlimited.com/
Contrast: What caught my eye about the website was that images were very clear as if you were in the woods which went well with the text on the home page. Another thing that caught my eye was instead of having all the menus at the top of the page they put it on the side bar to the left which made it a little more interesting than other websites. very well organized.
Repetition: There isn’t much repetition in the website because when it comes to the colors they seem to vary on the site. The only thing that has any kind of repetition is the images that display forests, farms, and the woods where there is a lot of trees.
Alignment: The website is aligned very nicely, looking at the sidebar on the left the menus are nice and neat, when you go into forest management or timber sales or land sales the information is discriptive and organized in a neat manner with just the right text. The image of the trees in the home page lines up nicely with the text and the image below.
Proximity: The spacing in the website is used very effectively. You don’t see a lot of unused space which makes it easier to read things. The images are not too far from where the information is.
Like or Dislike:
0 
0
Doghouse Sportfishing
Contrast- Immediately, my eyes notice the green background trim and matching green video box in the middle of the page. In the center of the background are multiple gray or light green dog prints, which also match the rest of the page and conincide with the site being named “Doghouse.”
Repetition- Another thing that caught my attention was the repetition of how they are now able to carry 12 passengers on the home page, first in bright red text while surrounded by plain black text, and in black, capital letters on the bottom of the home page.
Alignment- This site is neatly organized and uses a left alignment on most pages. The links take up the left sidebar on each page. Pictures hosted on the homepage are left aligned, while the actual photo gallery has a centering for the pictures posted on this page.
Proximity – There isn’t too much text throughout the site but the text that is there is short, straightforward, and gets to the point while being evenly spaced and seperated. Seperate ideas are divided properly throughout the site. Unfortunately, due to the tiny and thing font the site owner uses, the font tends to disappear when directly on top of the paw prints of the background and this tends to get slightly annoying.
Like or Dislike:
0 
0
Mesharie Lord
http://www.replacethebridgenow.com/
Contrast: What made this site interesting was the the citizen of the community where striving to repair their community by fixing the Bonner Bridge. The contrast on the page is the blue and tan color scheme. the contrast works for this website due to the fact that there are picture on the page that looks like places you want to visit. Its showing how they plan and will improve the environment in which they live. The pictures certainly contrast with the theme of the page.
Repetition: On the page there in repetition occurs among the color sheme. The page is blue and tan along with the various pictures. I think the site should have more repetition on fixing the bridge to be more consistent.
Alingment: The font on this page is normal and the photos are a great size that will not overshawdow the reason for viewing the site in the first place which is the concern of fixing the bridge. I believe the header should be more centered because it makes the site look somewhat unprofessional.
Proximity: The proximity is used well in this site because the main focus is the bridge which is captured in the photo of a newly repaired bridge. However, the pictures are not in good proximity because they good be a little bigger to attract more attention!
Like or Dislike:
0 
0
http://www.waterwitchfishing.com/
Contrast- What has caught my attention on this web site is the bright yellow background box that holds the introduction of what he web site is about. The designers of the web site would make this obvious so that you would know what they are about within the site itself. The other design that caught my eye is the picture they put up to represent who and what the website is and it’s about fishing.
Repetition- The repetion in the web site when you go through it, through each link are it’s colors which represent it’s them. The colors they use are a bright yellow, which makes any object on it pop out so it catches the eye, and the color sky blue, or light blue, it is also used as a color that catches a person’s eye very easy.
Alignment- The website is designed and organized very well, you can scroll through the websites different tabs, without any complications of being confused on what you want to look, you don’t have search very long within the website if they have what you are looking for.
Proximity- The text within the website are well organized and simple so that any body can be interested and read everything, it grabs the person searching within the sites attention and makes the reader “happy:” because it gets the straight and to the point in what they want to learn about fishing. the captions are in close proximity to the pictures they are supposed to represent and describe.
Like or Dislike:
0 
0
Hasan Inshanalli
Lighthouse Truck and Auto
http://www.lighthouseauto.com/
Contrast- For this page, I feel as if there isn’t much contrast. There is just a header graphic with the name of the business and pictures of vehicles. That’s about it for contrast. It could be better by showing more options for navigation and more services and options that they offer. Some sales specials would work perfectly, bold letters for the name, menus leading to more information about the business. Basically for this principle, the site is plain.
Repetition- This principle is present in this page. Each page shares exactly the same elements, only the content differs from page to page. All of the colors, text style, text size, etc. are repeated. This work and does not work at the same time. While this pattern shows that these sites share a common element, this could bore the viewer, seeing the same thing over and over again. Subtle, slightly noticeable changes while still keeping this principle would help a lot.
Proximity- For this principle, I do not find it apparent. There is a lot of space between content on this page. That does not work well, do to the fact that there is so much white between content, you start to hunt for content more than you would have to.
Alignment- This principle is current for this page. Everything is lined up, justified to the left, right and center. On the main page, there is a right column where you find a quick search tool, carfax tool, and single daily special tool.
Like or Dislike:
0 
0
Sory Skelton
http://www.seatoy.com
Contrast – This site uses a plain but classic design. The dolphin watermarks serves as a speechless introduction of what the website is about, a trip around the see. The colors, blue and white are a representation of the site topic.
Repetition – All pages maintain the same colors and font style and size, letting the user know that is still in the same web site. The subheadings have a different color to empathize the beginning of a new paragraph.
Alignment - The site maintains the same format for all of the pages. All pages are center aligned with the list of the pages at the left.
Proximity – Spaces within the text are well distributed making all the information on the site easy to read.
Like or Dislike:
0 
0
Alignment is the one of the best point in this article and it thought my attention because it is important on paper and as well as on the web in every one paper written it is always align whether left,right or center
Repetition point out that everything on the blog is together . that means that color and everything on the blog should be consistent
Proximity on the web,is where text should organize and simple in order for thr site to be eye catching and interestine and readeable this could help web seacrher to get to the site easily and discover the learning skills about what ever the blog is about
Contrast is some thing interestine on the page that draw your attention. It may be the color or the picture on the page what catch my eye is the picture of the saltwater sportfishing hot spot
Like or Dislike:
0 
0
http://www.lighthouseauto.com
Contrast: i will first start by saying contrast can be defined as what drew your eyes to the page, and the hierarchy in which the information was displayed. In the case of http://www.lighthouseauto.com the header was the attention grabber, and the reason being it was 2/3 the entire page. it consisted of a small logo in the top right corner with the name and address of the business. there were two different usage of bold fonts; the paragraph headings were in red bold fonts, while sub-headings were in black bold fonts. another focal point of the pages was it’s quick search which is located to the right of the screen below the header, which can be seen on all the related pages.
Repetition: this can viewed as a the uniformity of the site, this deals with the relation of pages, & what are their similar elements. in the case of wwwlighthouseauto.com there was a combination of five different pages; home, about us, our inventory,faq, and contact us. all five pages shared a definate resemblance they all consisted of the same header & quick search elements to create that established, reputable, uniform look.
Alignment: the arrangement of the of items or information on the pages, there are three kinds of alignment left, center, & right alignment. http://www.lighthouseauto.com consisted of a left alignment with a empty right column. all the pages consisting of body & text were aligned to the left.
Proximity: refers to a level of closeness, whether image or text. when two things are close together more than likely they relate to each other, and vice versa. in the case of http://www.lighthouseauto.com they lost points where as proximity is concerned the heading were distinctively apart from the paragraphs.
Like or Dislike:
0 
0
http://www.firstcrackcharters.com/
Contrast is the thing the that catch one attention on this blog the thing that draw my attention was picture of the and the woman with big billfish it makes me think of cook and it makes it interesting /www.firstcrackcharters.com/ the text does draw attention to this blog and the top and the side line i think that thw blue and white is a good color and it draw attention
Alignment there are three kinds of alignment: left, right, and center alignment is important in writing whether on paper or on the web, http://www.firstcrackcharters.com/This blog is left alignment and it is easier the easy especially the text moving to the in black
Repetition is the consisting of thing s that is done on the web if you go through every links then you can see that it is very organize. http://www.firstcrackcharters.com
Make up charter – Jim Alford – September 3, 2009
Another Great Day!!! – Captain Barry – August 4, 2009
Re: Another Great Day!!! – Brady – August 6, 2009
Another Meatfish/Billfish Combo – Captain Barry – July 29, 2009
What a Day!!!!!!!! – Captain Barry – July 29, 2009
Fish from down under – Captain Barry – July 22, 2009
GAFFER!!!! Dolphin Last Week – Captain Barry – July 16, 2009
Tuna 7/11/09 – Captain Barry – July 16, 2009
white marlin while tuna fishing – Captain Barry – July 16, 2009
Tuna Still Around – Capt. Barry – July 16, 2009
Yellowfin Tuna – Captain Barry – June 29, 2009
rock fishing – todd – December 11, 2008
Had a ball – Todd/ moe hawk – July 28, 2008
keep-em-coming – Captain Barry – June 13, 2008
Re: keep-em-coming – Your Loving son – September 29, 2008
looking forward to this – Todd – June 9, 2008
Re: looking forward to this – Capt. Barry – June 12, 2008
Bermuda fishing – mark tuholsky – June 26, 2006
Re: Bermuda fishing – Andy Flint – June 27, 2006
Re: Bermuda fishing – Captain Barry – July 2, 2006
These days will spoil you. – Captain Barry – May 30, 2006
Re: These days will spoil you. – todd – June 9, 2008
Tackle Busters! – Captain Barry – May 30, 2006
End Results – Captain Barry – May 29, 2006
Action Shots – Captain Barry – May 29, 2006
proximity which focus on the closeness of the images on the web from the headings to ending http://www.firstcrackcharters.com
Like or Dislike:
0 
0
Faisal Suleman
http://www.harrellandassociates.com
Contrast – The website of Harrell and associates provides a white background and red buttons for navigation. The natural header graphic is perfect for realestate because each balance the page clearly. The header graphic is picturesqe with nature style images of beach and sand, sunset behind wheat stalks, trees and grass or waves cascading on shore front. The contrast between the white background and gray text are easy to see whilst surfing through their website. The website promotes realestate very well without being pushy, or having bold sales fonts that give off a distorted view. The heirarchy is systematic on each page which keeps me as a reader continuing to surf through all the pages.
Repetition – The elements of each page are repetitous. Each page is uniform to provide a feel that the realestate owns up to their website. The nature style header graphic is shown on each page. The red navigation buttons are on the same baseline. The pictures of houses are colorful and have the same size. The website provides a defined experience on each of the subsequent pages.
Alignment – Outstanding alignment is depicted on Harrell and associates website. Their pictures come up in uniform when viewing realestate for sale. The alignments aren’t mixed. Once again a visual connection points to the background header graphic that is calming. Each subsequent page reveals left alignment with a block of text that is uniform in font size, and spaced between paragraphs. They use up to three colums, and all have left alignment. The website has information for price and type of property, commercial or residential balanced with aligned pictures for clarity.
Proximity - The headlines are close to the body, and each of the captions are spaced for a less cluttered appearance. The subheads are clear with good spacing to depict a balanced compilation of information. The photos of homes for sale are in proper sequence to allude to the captions written about them. The spacing between the next sequence is equal. A very good website perhaps designed to attract customers, so the website may promote a professional team ready to assist them in buying realestate.
My evaluation of the website Harrell and associates is 9 out of 10. The website is comfortable, there’s clarity and proper depiction of information on each page. There’s “Contrast, Repetition, Alignment, and Proximity” all balanced together. I enjoyed this website because of its easy to navigate features and clear style.
Like or Dislike:
0 
0
James Narine
http://www.broadcreekfishingcenter.com/
Contrast- When I first took a look at the page, I was immediately captured by the “The Broad Creek Fishing Center”, heading with the yellow background. I especially love the image used to show the theme of the page. I think the picture of the sunset and the fishing rod really stands out. Another aspect of the site that I admire is the fact that there is a hyperlink, which takes you to another page. That page is the “Charter Fleet” page, which gives you information about different boats and their prices.
Repetition- This website uses a lot of repetition. The website uses the color yellow as a way of bringing out the page. Apart from the color, the company’s logo appears on every page. It is lightly embedded under the white background. The “Current Weather” box at the top right hand corner, and sub headings at the top left page repeat no matter what link you were to go to on the site.
Alignment-The banners are organized well. For the most part, the website is organized. The current weather could be displayed better. The tide conditions should either be in or out the box. However, half of the tide information is in the box, and the other half is outside. Apart from that issue, it is easy to scroll down the page and click on the hyperlinks that take you to other pages, which may help anyone is is interested in renting a boat.
Proximity- The text is simple, which makes it easier for the reader to understand what they are reading. The title of the page is written in big letters, which easily captures a reader’s attention. It also give people a general idea about what the website is about. The colors of the logo, and the text really bring out the page as well. Organization is the key, and the website’s text is well organized.
Like or Dislike:
0 
0