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

Popular posts from this blog

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...

Music Video

Pre-Production For this project, we were separated into groups and were told we had to either recreate a real music video, or create our own from scratch. Our group decided we would recreate a music video for our project. For our song, we decided to go with "Bet on it" from High School Musical 2. In this video, the actor starts out a little troubled, and ends in a very confident and defiant mood. Our group wanted to help recreate this change of mood in our music video. To start the process of making this video, we had to complete our pre-production work. This was by far the most work we've had to do in pre-production for any of our videos. We had to make a beat sheet, which showed what was going on in each individual clip, as well as the length of the clips. We also had to storyboard, and show the mood of the music video in the beginning, middle, and end. Our group was very productive in pre-production, and finished as quick as we could so we could get right in to film...

ONW Now Sophomore Edition

This was definitely the hardest project we've done this year. Not only was the time schedule very hard to meet, but there was also just a lot of things that had to be done. I definitely learned a lot about all the work that goes in to making a good news show. I learned how much goes on behind the scenes, such as what is done in the control room and with the camera and teleprompter. Personally, I really enjoyed working in the control room for this project. It was definitely a lot of pressure to work completely on the go. I had a huge part in the live recording of the show, which was definitely stressful, but I still enjoyed it. After doing this project, I would say the most important aspect of a successful news show is organization. It is extremely important for everybody to know exactly what their job is so they can execute perfectly. It is also very important to have good communication among your crew. For example, we didn't do a great job at communicating with our anchors...