IndustryHow C.R.A.P is Your Site Design?

Mike Rundle
writes on April 10, 2006

Share with your friends










Submit

Eons ago when I was taking the Freshman web design course in college (okay, it was only 4 years ago) I was taught about the acronym of all acronyms, the one by which all other web design acronyms were judged. We learned that good design is based on the C.R.A.P. principles where C.R.A.P. stands for Contrast Repetition Alignment Proximity, and when Creative Directors tell you that your design is crap, they’re actually giving you positive reinforcement. Okay, that last part was made up, sorry. “Crappy work” is probably not a term of endearment but rather an indication that your pixels smell.

There are various examples of what C.R.A.P. means on the web (Robin Williams first coined the acronym), but for me it’s this:

  • Contrast
    Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative.
  • Repetition
    Repeat styles down the page for a cohesive feel — if you style related elements the same way in one area, continue that trend for other areas for consistency.
  • Alignment
    Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements.
  • Proximity
    Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.

In this article I’ll go into further depth about each specific principle, and show examples of design that are either C.R.A.P. or just crap. Let’s go!

Contrast

Good contrast can make sites appear crisp and organized, whereas poor contrast blends it all into an incoherent mass of RGB values. Contrasting elements allow for the user to figure out which page areas are related and which are totally separate, so make sure to differentiate your elements and page sections.

One of my favorite designers, Jason Csizmadi, runs the killer design weblog Dangergraphics.com and his blog is a great example of what good contrast can do for the layout of a page. Here’s a screenshot:

Dangergraphics.com Screenshot

His site is split into two main columns, where the right column has a medium red background with an illustration at the top, and the left column is dark grey and very clean. The immediate visual separation between the two areas shows that they contain separate types of content — the right side is his weblog while the left holds some of his recent work and links to other sites. The stark contrast between the left and right columns really brings cohesion to the similar areas while defining the boundaries between different types of content.

Good contrast separates main areas on a page and allows readers not to be distracted by similar elements on other sections. In my opinion poor contrast on a site makes for poor design. And example of this is Northrop Grumman’s Capabilities page.
Northrop Grumman Screenshot

This screenshot is a good example of bad contrast on the web. They had the right idea with the shaded right column background, however the light yellow doesn’t separate it enough visually, and using the exact same typeface for all body copy and headings within the two columns compounds the problem. The main section headers are merely emboldened versions of the text underneath, and this slight change doesn’t separate the sections enough. I think that if Grumman changed their section headings to a larger size (with more padding), and made the right column background more distinct, better visual contrast would be achieved.

Repetition

If you’ve ever designed a weblog before, you know about repetition. Typical weblogs have all the same page elements: a header graphic, a main column with multiple weblog entries (each entry having a title, date & comment headings, and content), and a sidebar with archive/category navigation. At Business Logs, I happen to design a lot of weblogs since that’s basically what my firm specializes in, so once you’ve put together half a dozen blog designs you start to figure out what works and what doesn’t.

The repeating nature of weblog entries down a page lets you control how the user’s eye is guided down the layout of your site, and the correct spacing and design is crucial or else entries will cram into each other (poor Contrast), users won’t be able to find key elements (poor Repetition), or in the worst consequence, readers won’t be able to read and comprehend your writing as well as they should. The repetition of design elements down a page reinforces their meaning to the user, as well as letting the designer organize the layout in a cohesive manner.

9Rules Blog

At the 9rules Blog, our layout represents a typical blog layout with two columns that provide normal blog functionality. Across both columns, I use similar design metaphors to keep the reader on track with what is being presented:

  • Body copy and regular text is set in Lucida Grande (Verdana for Windows users).
  • Section headings within blog entries and in the right column are Trebuchet MS with a dotted separation line on the bottom.
  • Links have a bold font-weight, and in blog entries they are bright green to match the entry title link.
  • All sections in the right column have a 7px grey border around them.

The goals for having the same typographical choices for both body copy and headings are 1) reinforcing their meaning within their context (headings in blog entries vs. headings above link lists), and 2) it’s cleaner and more visually consistent with the rest of the site. By repeating styles with similar significance/meaning across various areas of the site, I’m allowing the user get acclimated to this meaning which lets them browse the site more easily.

Alignment

In my opinion, quality alignment and spacing is the hallmark of good web design. Friends often ask me how I produce my design work, and honestly, I just line things up and make sure the padding around design elements is symmetrical and relative to their sizing. Here are some rules regarding alignment on the web:

  • Either left-align, or right-align text, but don’t do both. Right-aligned text in a right sidebar creates rivers of white space between the two columns and looks awful. If you left-align your body copy, then left-align your sidebar text as well.
  • Centered headlines are classy, centered body copy isn’t. Two examples of centered headlines with left-aligned body copy are McSweeney’s and A List Apart.
  • Use existing hard edges to line up other elements. If your header graphic is 5px from the left edge, then have your body copy be 5px from the left as well. Be precise: 5px is not 7px — good design is all about the details.

Bryan Veloso’s SXSW Bowling site is a great example of how to align various elements on a diverse page. Let’s take a look at his cool header graphic:

Avalonstar Bowling Extravaganza Site Screenshot

Bryan has 4 different visual areas in the header, and all are aligned for maximum effect and message communication. He uses the left and right edges of the graphic to align the text and phoenix illustration, and then keeps the spacing around all 4 elements the same for symmetry, a technique that should definitely be emulated.

Altered Screenshot of Avalonstar Bowling

Repetitive alignment and symmetrical spacing are two techniques that can be used extensively in blog-based interface design, simply because there are so many opportunities to group elements together in some type of designed widget or box-like area. Further down on Bryan’s bowling site we see the Bowling Teams section and pictures of the bowlers. Bryan has a small padding around each image, and then keeps that same padding size to separate each image in the row horizontally. Good stuff.

Proximity

The principle of proximity allows similar or related elements to be grouped together to form a cohesive whole. Items that aren’t related should be kept visually separate from those which are. This enables the viewer to glance at a page and immediately know which page elements are grouped together and which are separate.

Matt Brett’s personal site looks great, and he uses a technique on his section headings that I find extremely valuable and useful:

Matt Brett's Personal Site

For every section title, he has a sub-heading underneath it that provides a bit more explanation for what that area is about. He has tightly spaced the sub-heading with the larger title, and in doing so created a cohesive visual element that is the fusion of two smaller elements. If the sub-heading was 10px lower, the effect would be gone because the spacing between the two wouldn’t group the two elements together correctly.

This technique is very useful in weblog design, because too many blogs don’t put their sub-headings close enough to the paragraph they’re attached to, and without the correct spacing the elements appear separated instead of attached. Here’s an example of correct (left) vs. incorrect spacing (right) in this image:

Entry Spacing

The title and comment headings on the left are spaced evenly and form a cohesive whole, whereas on the right the haphazard and unsymmetrical padding causes the section to appear separated and jagged. Headings should appear close to the paragraph they apply to, same with images and their captions, comments and their author’s names, etc.

Oh C.R.A.P.

The C.R.A.P. principles (Contrast, Repetition, Alignment, and Proximity) are good ways to double-check your design work. Just like with a pre-shot routine in golf, if you constantly question and nitpick the details of your design work, good design habits will form and you’ll no longer have to think about if your padding is off or elements aren’t aligned, you’ll just do it correctly from the start.

130 Responses to “How C.R.A.P is Your Site Design?”

  1. Good article. These bases it is enough to create enough not a bad site

  2. In Kolkata there is only one authentic place for unique, customer friendly and search engine friendly website- http://www.360studiored.com. Also reach them for creative graphic designing.

  3. 360 studio red is surely the new 'in' thing in the Kolkata's designing and ad market. I have check on their site and found out their expertise in branding, designing, publication, web and event management…Agree with me?

  4. 360 studio red is surely the new 'in' thing in the Kolkata's designing and ad market. I have check on their site and found out their expertise in branding, designing, publication, web and event management…Agree with me?

  5. lolZOMZOMZZOM on February 24, 2009 at 11:55 pm said:

    lol

  6. lolZOMZOMZZOM on February 24, 2009 at 6:55 pm said:

    lol

  7. lolZOMZOMZZOM on February 24, 2009 at 6:57 pm said:

    lol

  8. lolZOMZOMZZOM on February 24, 2009 at 6:58 pm said:

    ROFL ROFL

  9. dioewawef on March 4, 2009 at 4:40 pm said:

    whaaaat you are all fucking loser…….

  10. johnjonatan on April 19, 2009 at 5:41 pm said:

    Mike Rundle has written an article about site design and the CRAP. There are various examples of what CRAP means on the web (Robin Williams first coined the …used golf balls

  11. johnjonatan on April 19, 2009 at 12:41 pm said:

    Mike Rundle has written an article about site design and the CRAP. There are various examples of what CRAP means on the web (Robin Williams first coined the …
    used golf balls

  12. stanleycasinos on April 22, 2009 at 12:55 pm said:

    Casino

  13. wow you were born a nigger huh?if you were go burn on a fucking cross

  14. wow you were born a nigger huh?
    if you were go burn on a fucking cross

  15. Excellent Mike! As a designer I appreciate litle tidbits here and there.. I'm loving ThinkVitamin :)

  16. Excellent Mike! As a designer I appreciate litle tidbits here and there..

    I'm loving ThinkVitamin :)

  17. All topics that mentioned there is really good tips for beginner and i also create first website siliconwebsolutions.in using this tips

  18. thanks admin good post

  19. cool, nice stuff…

    thanks for the article, I learn another UI principles

  20. If you could tell me what — means that would be really cool.

  21. Barbara63 on October 22, 2009 at 10:55 am said:

    However, much of this content was removed by Google’s Answers team. ,

  22. However, much of this content was removed by Google’s Answers team. ,

  23. Then, following the lines of the public goods problem from the previous lecture we show that in fact there is no mechanism for efficient trade. ,

  24. Then, following the lines of the public goods problem from the previous lecture we show that in fact there is no mechanism for efficient trade. ,

  25. I do not like this site because it is way tooooo long!

  26. Great site! Especially for non-designers like me. Just unfortunate that Bryan’s bowling site isn’t there any more?

  27. tis website is really shitty

  28. ~Lucio~ on October 4, 2010 at 6:33 pm said:

    it’s…—… Oh C.R.A.P. indeed.

  29. Needs more …. desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu desu

  30. ladyGagAlover on October 4, 2010 at 7:02 pm said:

    its stupid as helll…sooooooo eFFin crappy

  31. This is music to my ears. This is really a great post! Thanks for sharing. A blog really owes its success to its loyal readers and faithful followers.

  32. Volgin_93 on November 17, 2010 at 8:33 pm said:

    this pure crap and not the good crap this is shit

  33. Summeracid on November 18, 2010 at 3:06 pm said:

    its ok i guess

  34. Thank you for the ideas. They make sence

  35. This is an excellent resource. Thank you for sharing, I really appreciate this. I will definitely use this for the ecommerce blog I’m designing right now.

  36. This blog would have been better, if divided into pages and not too long. This is not a criticize but its a suggestion to the blog owner.

  37. Excellent article, ashamed to admit it but when I look at our recent Koh Samui resort website renovation – the navigation bar wasn’t aligned correctly… oops! Another job for the to do list!

  38. hey how can crap help me

  39. wat does N.O.C.R.A.P means then?

  40. hey its Connor Silvey

  41. NIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGRNIGR

  42. Adriaan on March 14, 2013 at 11:11 am said:

    I’m trying to read this for reasearch purposes and all the images in your text are broken links. I thought you’d like to know.

  43. Ecommerce Website on March 22, 2013 at 3:02 am said:

    I really enjoyed reading your blog. It was a very good writer, and easy to undertand. Unlike additional blogs I have read really not tht good. I’m also very interested in your posts. In fact, after reading, I had to go to show that he is my friend and he ejoyed it as well!

    http://www.jefmedia.ie/prices/Sell-Online-eCommerce-Shop

  44. For what I remember for reading “The Non-Designer’s Design Book” years ago, this is not the C.R.A.P. method, this is the P.A.R.C. method, because these guidelines should be appiled in that particular order to guide you to the good direction :

    1 – Proximity
    2 – Alignment
    3 – Repetition
    4 – Contrast

    And the pun is that if you follow these rules but in the wrong order, THEN you end up with CRAP. (or at best, a carp, which is still pretty good, especially if you know how to cook it)

  45. LLLLLLLLLLLLLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOLLLLLLLLLLLLLLLLLLLL

  46. eebfsass

  47. WOOF WOOF

  48. bara obama on September 8, 2013 at 10:05 pm said:

    i am a nigerrrrrrrrrrr

  49. bara obama on September 8, 2013 at 10:05 pm said:

    fuck u guys

  50. bara obama on September 8, 2013 at 10:05 pm said:

    shaun lin stop commenting

  51. I’m a dog!

  52. phua chu kang on September 8, 2013 at 10:11 pm said:

    phuaphuaphuakangchuphuachuchuchukangkangphua

  53. phua chu kang on September 8, 2013 at 10:18 pm said:

    this is crap

  54. Saya suka makan babi

  55. definitely not me on September 16, 2013 at 8:58 pm said:

    my gawd

  56. PHUA CHU KANGGGG !! :D :D on September 16, 2013 at 8:59 pm said:

    IM SHAUN LIN !!!! HHAHAHA

  57. definitely not me on September 16, 2013 at 9:00 pm said:

    hey doods

  58. I HATE THIS.

  59. I CANT STOP LAUGHING AHAHAHAHAHA

  60. CRAP eh MORE LIKE FAP

  61. HAHAHHAHAHHAHA on September 20, 2013 at 12:15 am said:

    HAHAHHAHAHHAHA OMG

  62. i’m gay

  63. I LOVE JHANA

  64. HAHAHHAHAHHAHA on September 20, 2013 at 12:15 am said:

    crap crap

  65. LEEROY JENKINS!!! on September 20, 2013 at 12:16 am said:

    IRFAN IS GAY

  66. LEEROY JENKINS!!! on September 20, 2013 at 12:16 am said:

    I AM YOUR FATHER!

  67. LEEROY JENKINS!!! on September 20, 2013 at 12:16 am said:

    nyan.cat

  68. HAHAHHAHAHHAHA on September 20, 2013 at 12:16 am said:

    my website is very crap

  69. lets crap everybody

  70. So am i

  71. I AMS SOOO GAY FOR BRANDON

  72. HAHAHHAHAHHAHA on September 20, 2013 at 12:18 am said:

    WHAT DOES THE FOX SAY? CRAP CRAP CRAP CRAP CRAP CRAP

  73. LEEROY JENKINS!!! on September 20, 2013 at 12:18 am said:

    fapfapfapfapfapfapfap

  74. bobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbobbob

  75. LEEORY JHANA on September 20, 2013 at 12:18 am said:

    LEEEEEEEEEEEEEEEEEEEEEEEEROOOOOOOOOOOOOOOOOOOYYYY JHHHHHHAAAAAANAA

  76. LEEROY JENKINS!!! on September 20, 2013 at 12:18 am said:

    prepare urselves the spam is coming

  77. HAHAHHAHAHHAHA on September 20, 2013 at 12:19 am said:

    BOOBIESS

  78. HAH GAYYY

  79. i’ve crap in my pants

  80. I AMM SOOO GAY FOORRR JHANA

  81. banannaa’ OPAIIIIIIIIIIIIIIIIIIIII (. Y .)

  82. Jhanais gay he loves penis

  83. HAHAHHAHAHHAHA on September 20, 2013 at 12:22 am said:

    OH. JHANA BANANANANANANA

  84. QIANING AND JHANA

  85. Boob

  86. HAHAHHAHAHHAHA on September 20, 2013 at 12:24 am said:

    QIAN NING LOVES YIMIN

  87. i’ve choped off my penis

  88. Laying on a bed

  89. Qian ning and jhana rape*

  90. HAHAHHAHAHHAHA on September 20, 2013 at 12:26 am said:

    ANNOYING

  91. but i’m gay

  92. HAHAHHAHAHHAHA on September 20, 2013 at 12:27 am said:

    I SEE WHAT U DID THERE BRANDON

  93. kandice on January 5, 2010 at 4:21 pm said:

    dont talk like that. this is a school website.
    i am goin to report you mr. joseph.

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more