Group items tagged

This website describes the CRAP principles and how they relate to your web page, it also has nice visual aids.

I like this website because of its title. How Crap is your site design? This website talks a lot about what chapter 6 was explaining. Such as how elements should be grouped or how repeating styles down a page can bring a cohesive feel. 

Uses of the acronym CRAP.  Good examples of repetition in web design.

I think this link is the best representation of CRAP because it is simple and very appealing to the eye. Contrast: A lot of white background. Large focal Image and set to the entire left side of page. Louis Vuitton large and bold. Repetition: All text is brown and in capital letters. Less important items are not all capitalized and smaller. Alignment: To the left Proximity: Each location is grouped into correct continent. Each group is given appropriate and equal space in-between.

This is another good website that uses the CRAP principles. Everything is consistent, and it is very pleasing to the eye.

Contrast: White background, main story in the center of the page. Summary of story underneath with related links smaller, different colored text to bottom right. Repetition: All links are colored blue and all bullet points and listing numbers are purple. Yahoo sites in the menu are all black with thumbnail pictures. Titles for each grouping box are in black capital letters with subtitles in grey. Alignment: Everything aligned to the left throughout entire webpage. Proximity: Alike items are grouped into boxes with a title in black capital letters.

i love yahoo's webpage and i think that it follows CRAP very well. this page is one that im on often and its so simple not to clutered and easy to find what i need:) i think this is a great pick.

yes, Yahoo does following the principles quite well. i tend to favor a more simplistic design and so for news/browser sites, I would actually prefer www.msn.com It seems to be the same type of content but set up in a way that is a little bit easier for the eye to read. Maybe because it is right-aligned and not left like so many other sites?

Contrast: focal point is an image of a laptop, aligned to the left with its description to the right. Gives a lot of empty space around it to make it your main focus. Besides the focal image other images pop against the black background. Repetition: Menu items are linked blue at the top of the page. Smaller unimportant items linked blue and smaller at the bottom. Alignment: Everything is aligned to the left in each group. Proximity: Under focal point are 4 groups with category titles that you can click to enlarge to see different related aspects of the site.

This website is a very good example of how to design a website. Everything is very aesthetically pleasing, and follows the CRAP principles.

Besides discussing the CRAP principles, I really like the examples this slideshow presents. I also appreciate the humor.

Although this site is in italian, it completely follows the CRAP Design Principles -White space -Plenty of contrast between light and dark text -grouping and alignment -Proximity between text, links and images

This was a good example Kyle. I like the monochromatic color. even then you still have contrast but just in gray scale. Can you speak or read Italian?

@Sarah I can't actually speak or read italian :( however, the Google Chrome browser allows me to automatically translate pages for free. So that is pretty nice :)

C- A. V. Club use the large image at the right of the screen to display the importance of the article compared to the smaller ones underneath it. R- On the navigation bar, repetition is use to show the different pages of the blog by changing the color but keeping the same font A- The web page uses left justification on each on of the columns. P- At the bottom of the page they separate the sites information links from everything else.

I think this one is just a great resource on repetition. I especially like the authors use of the acronym. Repetition in design seems like a lot of fun and I can't wait to apply

This is a little different and to be honest there isn't too much good information on any of the design principals but a good way of remembering what you need to include. If you click on the 'vitamin features' under each design heading it brings you to what I think is the original site and that too is a little different but I thought I would include these.

This fun article gives the basics of why it's important to have alignment within your designs. What stood out to me though is his analysis of what type of text alignment works and what doesn't from years of experience.

Good resource for all things web design

Contrast- The use of red lettering for the title of the company and well for having a model as the background for the page. With centered bigger letters in the center of the page. With a small picture in the corner scrolling through. Repetition- This can be seen through the small font used for the links on this page. That's all though. Allignment- The menu on the left is all alligned to the left while the menu at the top is in a straight line that looks centered. And in the bottom right corner there's a picture box. Proximitiy- There's a lot of room on the page. There is hardly any pictures posted on here and the picture box that is shown is very small and takes up little room. Same goes for the links where the fonts are small and do not take up any room at all. *Note* There are advertising sustainable styles so I wonder if they were potraying that through the use of saving space?

This was a good example Alina. There wasn't too much content and it was aligned very well. Good choice.

C-Contrast- Album reviews are listed as cover icons while listings for different areas of the website are located in a toolbar along the top of the page. R- Repetition- Pitchfork decides to change up the hyperlink scheme to red but remains consistent with it throughout the entire site. A-Alignment- All text is aligned to the left hand side of the article. P- Proximity- Different article features are displayed in box-shaped areas that keep the type of article in the same location.

C-Contrast- Separates the different product listings on the left hand side with boxes in a teal shading. R- Repetition- All links listed on the webpage are consistent being blue and all descriptions and headings retain the same size respectively. A- Alignment- All product descriptions are aligned to the left hand side of the images. P- Proximity- Products similar to recent search queries are separated by a decent sized distance.

The Phoenix, and in general every location, craigslist website is prone to the repetition guideline of CRAP; every column is listed in only a blue hyper-link. When you pull up a certain category, every listing is also in blue hyper-link and there is no bolding what so ever.

wow this website does a number to the eyes i think its to bold and blue. to me i think that it;s too much. i do like however how everything is symitrical and in order that i can give to them.

This is not one of the most trusted sites that I have ever been to but however it is highly used in trying to sell items that are local in the area. It is known for having some questionable items, but this is efficient in custom service because instead of worrying of shipping you can find other people in the same city for quick service or fast money. A huge difference in this site is that this does not carry as much restrictions which may worry some but it does provide different services in this way.

This is my favorite web-page out of the four website I chose to display my C.R.A.P principals. I realize this web-page is a little bit flashy however I do feel that it doesn't a good job of contrast, repetition, alignment, and proximity.

you feel that it doesn't or does:) i think this is a good website concedering ive never been on it lol but to me i think that it has a little to much going on? like i see a bunch of different type faces and sizes and colors i didnt even know were to start lol why do you think that its a good CRAP example:)

Yahoo has been around for the longest time in the online world so naturally their layout is one not to be touched. C-Contrast- does a great job of moving articles to attract attention to the center of the page R- Repetition- the site keeps the same theme of headers throughout their articles and pages A-Alignment- text is aligned to the left hand side P-Proximity-different types of news clusters are separated by boxes and space