CSS and CARP Design

Web Design Project

The Project Overview

This project was to use CARP and CSS to improve how a page looked. The beginning of a page is just HTML, the code and basic format of some sites. With the CSS style, the designs come and bring the page to life. By using specific styles, you can add principles of design. With it, we could add CARP: Contrast, Alignment, Repetition, and Proximity. 

Contrast

With just HTML, you get simple black text on a white background with little variation. While this is a form of contrast, it's not pleasing to the eye or effective. However, once the style was added, there were multiple colors, with the brighter ones jumping out of a black background, having an extreme contrast. Also, the notice text and link are now more prominent. With the image, the dark face pops out of the background onto the body section. CSS styles allowed a more interesting distinction between the various text with the size, font styles and color usage, thus removing the bland look. 

Alignment

In the first photo, all text and the photo are aligned right. With it, though, there are various alignments and a floating image on the right. The notice, body, and author are aligned right while the title is centered. This way, you can better use Proximity by changing where on a page something falls. CSS styles allow us to manipulate positions, which draw attention to various sections of a page and guarantees that not all of it will be similar in location and provides items to be in the correct place.

Repetition

In the first photo, the only factors that may count as repetition are the black color, some bolded text, and how the poem is separated. In the second photo, you have more varied repetition, like getting the website's colors from the dog itself, having the titles have the same Alignment and color and the body text is like this too. This also allows greater attention to the important areas and draws relations between the page's ideas. CSS styles allowed more input on how repetition is used and broadens the HTML limits of it.

Proximity

With just HTML, the grouping is altogether except the text the comes out of the photo. However, with the style added, the text is divided into the notice, title. body, and author at the bottom. This allows related ideas to be near one another, making it easier to understand. One way this works is by changing Contrast and Alignment. CSS styles allowed to have grouping on pages, a layout, and develops relationships to distinguish between the ideas.

CSS and Conclusion

Overall, I learned how to use CSS styles to manipulate a page's design and to make it more appealing. One thing I now know is how to use colors from a photo to form Contrast. I wouldn't have though to use photos already in the page to make up the text color, but it just brings everything together. This, now that I actually have a better understanding of Dreamweaver, went quicker than last time since I knew the general locations for editing the style. For the little Web design we'll do, this was a nice experience for how to set up a page and how to utilize CARP.