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

Semester 2 Video Production Review

Projects Movie Trailer Recreation For this project, we were put into groups and told to recreate a high school movie trailer. Our group ended up recreating the trailer for "Ferris Bueller's Day Off". This entire process took about a month to complete, and had many challenges built in to it. The main challenge we came upon was scheduling with our actors. We found it was extremely difficult to find a time that all of our actors and team members could be in the same place at the same time. Throughout the making of this video, I learned a lot about the use of microphones and sound. I learned how to operate a boom mic and also learned more about how to use your music and audio effectively. At the end of this project, we mostly received positive feedback. The main negative on our piece was that some of the music did not stay true to the actual video. So, for our re-edits, we imported some of the actual music from the video to make it more accurate. Overall, I think our gro...
Post a Comment
Read more

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

Typography Project

Typography Overview In this project, we were approached with the task of creating a project to show different terms of typography by using Adobe Illustrator. Before we started, we were given some basic knowledge about typography. This included different fonts, and parts of letters. We were then able to use some of our prior knowledge about Adobe Illustrator to create a name line to show our newfound knowledge. This project once again I believe was a very good stepping stone in my knowledge and I think it will be very useful in the future. What I learned For this project, we started off by writing our names and sizing it appropriately, and then making three lines to represent the general height of different parts of the letters. We then labeled different parts of our name with words and arrows. Once again, the command "Option-Drag" was very useful, as it helped us copy and paste our labels easily. After we had labeled at least ten parts of our name, we tweaked the l...
Post a Comment
Read more