Thursday, March 9, 2017

CSS and CARP Design

The Intro

For this project, we were to create a web design using the principles of CARP. The goal was to show the change between the starting HTML file with no color or organization and transform it into a colorful and organized page. In order to do this, we customized the settings to each element of the page (body, header, author line, etc.). So, each individual selector was changed to match the rules of CARP!


C: Contrast

To start out, the contrast of the original page was bland. There was no contrast at all. The color of the fonts in the whole page was the same! Plus, the font family was all the same. The fact that the color and font of the whole page was the same made it boring to look at. So, we used CSS Designer to change to color (using the eyedropper on the tan of the dog). We also changed the font size to vary with each other and made the title more bold. The contrast between colors and fonts was definitely better than to begin with.

A: Alignment

The original page had disorganized alignment. Most of the body was right-aligned, but one line was left-aligned. Plus, the dog was right-aligned as well, making the whole design seem disorganized. To improve this, we changed the alignment of the title to center, and kept the body paragraph left-aligned. Then, we moved the dog so it was right-aligned. At the end, the poem was more organized and each element looked good with the unique alignment designed in CSS Designer. 

R: Repetition

At the beginning, the whole page had the same settings, so I guess you could call it repetition. But it was pretty bland overall. Using CSS Designer, we made the first four lines italic to emphasize that the dog was barking. In fact, the word "barking" was used several times, but the first four lines being italic made it more of an emphasis instead of being all the same font. 

P: Proximity

The beginning page was really close together and had no room to breathe. The text was all close together and the dog was aligned with the rest of it. In fact, all the elements of the page were grouped together. To fix this, we moved the dog to the right and the text to the left to create more space between objects. This proved easier to read and all the elements weren't clumped together anymore. Plus, the title was center-aligned so that all of the text wasn't close together.

What I Learned 

I learned how to change the elements in the selectors with CSS Designer. This included font family, line weight, font size, etc. Some things that I remembered from the last project was linking each page with one another. That way, the viewer could flip back and forth between the old and new page. Finally, I learned about CARP, the design principle used in web design. As explained above, CARP can transform an otherwise normal project into an interesting project.