Description: This is a webpage detailing the design process for my logo project. We learned a little bit of HTML and CSS.
Process (Programs, Tools, Skills): I used Notepad++ to do this project. I have used it before and am somewhat familiar with HTML and CSS. I inserted my logo image into the html. I wrote a paragraph about the scope of the project and the process of picking the colors. I created a bulleted list outlining the steps of the logo creation. Then I opened my logo in Photoshop and used the eyedropper tool to find out what the hexadecimal codes were for the colors. I tried to use the same orange on the background, but it did not look good and detracted from the logo being the focal point, so I found a lighter shade that I think looks nicer. I decided that I wanted to repeat the blue bar at the bottom, so I persisted until I figured out how to change the CSS and make it work. I decided to use the sans-serif font for the body and the serif font for the headings. I liked the white font for the h1, but the instructions said to change it so I changed it to the same peach color that I used for the background (even though I like the white better). We were given the CSS code and changed various elements in it to customize it. My word count is: 429 words.
Message: The message is about how I designed my logo for the web app that my husband is working on.
Audience: The audience is my teacher and classmates. I really don’t think anyone else particularly cares about the design process of my logo.
Top Thing Learned: I figured out how to duplicate the blue bar at the bottom of the page. It was a little challenging, but I finally made it work.
Color scheme and color hex: Complementary color scheme; #f7cebc and #096895
Title Font Families & Category: Times New Roman, Georgia, serif; Serif
Copy Font Families & Category: Arial, Helvetica, sans-serif; sans-serif
Changes made to the CSS: I changed all the required things: The h1 text color & background color, font colors for the paragraphs & list items, the background color, Font Families and I add at least one css comment. I also changed some padding etc. The main change that I made was to add the footer similar to the H1 background, but change it for the footer:
font-family: Arial, Helvetica sans-serif;
padding: 10px 25px 25px 25px;
border-radius: 0px 0px 15px 15px;
I also changed the border of the body to transparent so it would not show.
Link to my video displaying my print quality: https://www.youtube.com/watch?v=C6gOdeZYK_U