Sunday, April 2, 2017

CSS and CARP Website Design

Overview:

     This week, we finished our house in Sketchup and started another web design project. The purpose of this project was to show how using the principles of CARP could make our websites better. 

Relating to CARP

Contrast

In this project we used contrast in our text fonts and colors. The title fonts were bigger and had more serifs than the poem's fonts. There were also slight contrasts between the colors of the title text, poem text, and page text. The colors were were all different shades of brown and black which created more contrast. We also made the first paragraph of the poem in italics to add a bit of style.

Alignment

Alignment is very important in a website, it is the rule of keeping different texts lined up with each other to produce a cleaner look that is visually appealing and easy to read.   It looks silly to have important text floating in the middle of a page, away from everything else. All of the text should be aligned either to the left or the right under the title.

Repetition

The repetition in this project is found in the colors between the dog and the webpage. We used the eyedropper tool to select colors from the dog and apply it to the texts and backgrounds. Even though they weren't the same color every time, it was easy to see a rising theme knowing that the colors came from somewhere.

Proximity

Proximity is used to group related ideas together, in this project we grouped the poem and the dog close together because they shared the same idea.

What I Learned: 

During this project I learned how to apply the rules of CARP to a website, we renewed our knowledge in Adobe Dreamweaver and made two websites showing what a great difference CARP can make in our work. One trick we learned to use that we didn't last time we used Dreamweaver was editing the code to input text fonts that weren't available in design mode. I will remember to apple the rules next quarter and throughout the rest of my time in the E-Communication program.

No comments:

Post a Comment