C.R.A.P. Design and DIV

C.R.A.P. Design

       Sir discussed the crap design, he explained that crap design is very important for our layout. Let’s define C.R.A.P. design:

        C stands for Contrast-  is the element that are not 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. The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page.

        R stands for Repetition-  styles down the page for a cohesive feel if you style related elements the same way in one area, continue that trend for others areas of consistency. Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develop the organization and strengthens the unity.

        A stands for Alignment-  is a crucial not just to the cohesive appearance of your document but to the creation of contrast for elements like bulleted lists or double-indented quotes. Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh took,

        P stands for Proximity-  creates related meaning: elements that are related should be group together. Whereas separate design elements should have space between to communicate they are different. Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information and reduces clutter.

DIV

       We use container for our web page so the content of it is standards. The div is a generic block-level element. It doesn’t convey any meaning about its contents (unlike a p element that signifies a paragraph, or an h1or h2 element that would indicate a level 1 or level 2 heading, respectively); as such, it’s easy to customize it to your needs. The div element is currently the most common method for identifying the structural sections of a document and for laying out a web page using CSS.

       Some developers perceive similarities between the p and the div elements, seeing them as being interchangeable, but this isn’t the case. The p element offers more semantic information (“this is a paragraph of text, a small collection of thoughts that are grouped together; the next paragraph outlines some different thoughts”), while the div element can be used to group almost any elements together. Indeed, it can contain almost any other element, unlike p, which can only contain inline elements.