Skip to main content

CSS and CARP Design

Overview

Before CARP & CSS styles.
During this project, we were given a webpage with titles, a picture, links, and some other minor details. The page was very dull, and disorganized, so we had to redesign the page using CSS styles and CARP. All we had was the starting template, with about 11 separate tags included that were linked to certain parts of the page. These were where the only changes to our page took place. Here we changed the color of our background and text, as well as choosing different fonts, and changing the alignment. All of these changes may look very complex, and completely different from the original design, but they both have the same code, with only minor differences that help to make the page look a lot better.

Contrast

During this project we had to change the colors, and style of certain things in order to add contrast to our page. We were able to create contrast first by changing the colors of our background and fonts. We made them pretty much opposite colors, which helps them stand out on the page. However, we also had to make sure that everything didn't look exactly the same, so we added more contrast to certain parts in order to make it look more unique.

Alignment

After CARP & CSS styles.
In the making of our web page, we also had to think about the alignment of the things on our page. One of the first things we did is made the heading center aligned, so it drew the eyes of the viewer immediately. We also made the picture of the dog right aligned, so it added a little bit to the blank space on our page. Lastly, we changed the rest of the text to left aligned, which helps to make the page look more organized and professional.


Repetition

While in this project, we wanted the page to have contrast in order to make things stand out, but we also needed repetition to help organize our page. The main things we did to add repetition to our project was using the same fonts and colors in different parts of our project. For example, the dark tan used with the title, link, and author are all the same color, and we got that color from the dog. We also used similar fonts throughout our project, which helps to further tie things together from different parts of the page.

Proximity

Lastly, with proximity, we had to make sure we grouped certain things together that made sense. For example, we had to group the headings together. Also, we grouped the different stanzas in the poem together. We also added some more to the first few lines of the poem, so it stood out a little more. We had to make sure that our text and graphics made sense with where they were, so they didn't seem out of place.


Conclusion

During this web design project, I learned quite a bit. For example, I learned how to use margins and padding to help organize certain things on my page. I also learned how to place multiple things within a certain category, so I can easily change and edit them to look better. These are only a few of the things I learned during this project, and as a whole, I thought this project was pretty interesting. I thought it was cool how much you could change by just editing a few parts of your page. I am very happy with my end product, and I enjoyed this project.

Comments

Post a Comment

Popular posts from this blog

Movie Trailer Remake

Pre-Production For this project, we were assigned a specific movie about high school, and were told to remake the trailer. My group was assigned "Ferris Bueller's Day Off" for our movie. I was pretty excited about this project to start with because I really like the movie I got, and I thought I got a good group. However, this project was certainly not an easy task, so we had a lot of work to do. We started off with all of our pre-production activities. This included story boarding, completing a beat sheet, and figuring out who to cast for each role. Our group decided to mainly cast from our own group to make scheduling a little easier. However, we still casted all of our adults, plus two of our main characters from outside our group. Before we started filming, we also figured out what we were going to do for locations, props, and costumes. Most of our group chipped in for some props or costumes, and we mainly decided the locations as a group. Once we had all of that...
Post a Comment
Read more

Vector Portrait

Pre-Production To start out with this project, I had to choose a picture for me to vectorize. I don't take a lot of pictures, so I didn't have a lot of pictures to choose from. I eventually decided to crop myself out of a picture with my family and use that for my vectorized portrait. Once I imported this picture, I brought it in to Adobe Photoshop. In Photoshop, I used the posterize option to clearly separate the differences in color. This allowed me to make more specific shapes that would eventually make my portrait look a little more realistic. Then I imported this updated picture into Adobe Illustrator. When I started in Illustrator, I had to make two art boards. Both of the art boards would have my original picture on it. However, one of them would have a decreased opacity, and that picture would be the one I trace over to create my vector. The other picture was simply used for reference, and to grab colors for my vector. Production When I first started this project...
Post a Comment
Read more

Graphic Design Second Semester Review

Projects Typography For this project, we had to come up with quotes and then make four unique typography designs using various colors and fonts. We completed this project over the span of about 1-2 weeks. This project was difficult for me because I tend to get stuck on the same idea often, so when I came up with one design, I struggled to create other unique and interesting layouts for my type. I also struggled to find good colors to use for some of my designs. This project really helped me to learn much more about the use of type/text in designs. I learned how to make fonts stand out by using different font types such as script and serif. I also became much more comfortable with the pen tool as I had to trace certain graphics. For this project, I often asked my peers what fonts or colors they preferred so that my designs could look even better. With my original designs, most of them were very similar and did not include very many graphics. So, in order to make my designs more in...
Post a Comment
Read more