Group items tagged

This magazine has a lot of really neat examples of contrast like the ones that were touched on in chapter three. There is a lot of black and white used in the pictures and light and dark shades. the titles of the names are in very contrasting colors such as red on black and white, or white on darker colors. This seems like a very cool magazine for artists and designers to look through.

Free online lesson that gives you practice in several ways to add white space to a page.

Contrast: CNN is centered and bold white against a red background, which makes it easy to read. Breaking and main news stories are in groups of three and set as the largest images at the top of the page. Bold white text against a black background makes the focal point pop. Repetition: Menu items are white against red background in smaller text under CNN. All links are blue, bullets red, titles bold large and black. Alignment: everything aligned to left for each grouping object. Proximity: News is categorized into different groups, i.e.) world, business, entertainment... etc.

I think CNN is a great example of a grid - a very sophisticated look. The beginning is a 3 grid and as you scroll it transfers to a 4 grid. They really make the most of the white space and keep it very organized with a justified text.

CNN has both different text sizes and color. Also with this, there are different borders within 1 page to show the many different stories and sections that are being highlighted within a page

In this ad, the concept is very simple yet the message behind it is truly deep. This I believe is due to the contrast of the white and red as well as the emphasis of the color white.  The flow of this ad really comes through in the type of font that it was created in. The script makes it flow with the reader as they read the word efficiency

Third party content on the White House blog is licensed under a Creative Commons license - interessting.

Contrast-spacing is very linar squares and rectangles, a focal point is the red at the top to attract attention to the site and have their viewers interested. The headings of most importance are in black bold size color, and the text is smaller and in a bluecolor.Color is attractive to where it is eye catching but easy on the eyes with black, white , blue, and red. Repetition-again the color is repatative with red, black, and white. repetative elements such as video clips and new. The format, of it is organized, with the subjects running along the top of the page that allows the viewer to go to exactly they want to know. below the subject tabs there are groups of related information for example how the bottom of the top news there are bullet points of what the news is about. Then towards the bottom of the website there are grouped topics that have the topics of which the tabs on the top. Except these have subtext to other related topics that fall under that subjects they are in a same size box which groups them. Allignment-nothing is centered all text is left justifyed, the information is visually connected to find information much easier and all is aligned to one box or another. Proximity-related items all the headers of the news each have its own box and all the news are related is under each of the heading, The white/light grey backround is evenly separated to give it a balance.

Here is another site that points out some useful tips of web page layout. This one mentions using white space, and making sure a web page is not too busy(which is very important).

Several free online lessons, including adding white space and creating contrast.

I like how this site talks about texture. Texture can be used on a blog to send a vibe of yourself to the readers. This is important because readers who follow your blog want to feel like they know you.

this one is my favortie because when you look at it it looks like alot but in reality its very easy to understand and find what your looking for. they use alot of the same font throughout the webpage just different sizes. theres plenty of white space and everything is organized.

-Right justified log in box at the top -Centered graphics with constant color scheme -Bottom group links, with constant left justified links -Plenty of white space

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 :)

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?

This article expands on BoD's introduction of how to use white space well. Whitespace can drastically enhance the balance of a page layout if used well.

I chose to do this page on balance because it wasn't mainly focused on text. It had a main focus on videos. The balance on the page lies in the way the videos are formatted which causes a visual path in which the user is directed to them. This page is not too formal so the symmetric alignment of is not the biggest contribution to the balance. I believe what really makes it is the layout of the page is the way that the different search options are left justified and guides the readers eyes to the videos below. Also the genres on the right take up the additional white space on the page allowing for a fuller looking page. 

-Use lists -Headings and subheadings -Clear typefaces req.TNRoman or Arial -Use white space! to enhance info -Write the body first then work on everything else -Consistant structure -Choose mood and voice carfully(know my audience) * good site good resources -report check list

Here is another link, sorry to be redundant.

-Clear contrast between the title box and website content -Plenty of white space throughout the page -Proximity, each link is next to its proper items and all text is near its necessary areas as well -all next is aligned along invisible straight lines and guides

This web page gives some good examples of layouts that use the C.R.A.P. principles.

Cool layout designs! Check it out.

This is a website you can get an idea of creative layout. It provide various layout!