Project 7: Web Page
Description:
A web page created for the purpose of showcasing a logo created exclusively by me.
Process (Programs, Tools, Skills):
I created this web page using the text editor Notepad ++ and the programming languages of HTML and CSS. Notepad++ is a great resource and is easy and simple to use. I started by opening the provided files. Then I inserted my logo into the web page using html. I then opened my logo in Photoshop, so that I could use the eye dropper to find colors from my logo to use in my web page. After experimenting with various colors I decided to pick two similar colors from my logo for a monochromatic color scheme. I then used CSS to change the color of the header background as well as the heading texts. I wanted to add more unity to my web page, so I used CSS to replace the normal bullet points into small pink flowers that I made in Photoshop. When I had all of the colors changed and the elements inserted, I made various changes to the spacing of the items on the page. This project was a lot of fun, and I enjoyed getting to use these programming skills again.
Message:
That the Super Mommy Complex website is a great resource for mothers.
Audience:
Mothers of all ages that want to improve themselves or find some comfort or relief from the high demands they put on themselves.
Top Thing Learned:
That I love using CSS to manipulate html and make it pretty! I had so much fun using those skills again. It has been a while since I have been able to use them, and it made me quite happy to have the opportunity. It is fun to trouble shoot problems and to play with the code to get the result that you want. This was a great project.
Color scheme and color hex(s):
Violet-Monochromatic; #bb4987, #e38cbb
Title Font Families & Category:
Arial- sans-serif
Copy Font Families & Category:
Palatino Linotype- serif.
Changes made to the CSS:
- Changed the background from a color to an image.
- Added various comments throughout the code.
- Changed the body width from 660px to 40% of the screen.
- Changed the body font to Palatino Linotype.
- Changed the color of the body’s border to #e38cbb.
- Changed the font of all headings to Arial.
- Changed the background color of the h1 heading.
- Changed the color of the h1 heading text to white.
- Changed the bullet points of the list into little flowers.
- Changed the image tag so that my logo would be centered.
- Added more padding in the margins of the h1 tag and the logo.
Word Count:
373 words.
4 Comments
Sarah T.
Tenille, this looks great! Very well done! I love how you made your page more unique by using an image for the background. Your fonts look well together, and your monochromatic color scheme is balanced out nicely with your background image. The flower bullet points are also a nice touch. Did you just put an image in place of the bullets? I changed my bullet point color, but it took me some time to figure out how to prevent it from changing the color of all my text, too. You can see what I’m talking about on my project: https://sarahtobler.wordpress.com/2015/03/14/project-7-web-page/
Reed Crouch
Hi Tenille – I think the colors you chose are very appropriate. The HTML background image also works very nicely for this web page. My eyes are easily drawn to the flowery shape in your logo. The rounded corners work well with the curvy shapes in the logo as well. It looks like your bullet points are flowers, as well. I think that’s showing a lot of extra effort! I would suggest replacing “Logo Design Process” document title so it is the name of your business and shows up on the Chrome tab. Here’s my web page project blog if you would like to see it: https://reedcrouchcomm130.wordpress.com/week-10-web-css/
Eva
This is really pretty. I like how you repeat the flower throughout your design. Great color scheme. Your logo looks great. The design fits well with the audience.
If you have time take a look at my design http://www.evadransfield.com/?p=119
Katie Perry
Great job on your design Tenille. I really like your monochromatic color-scheme. It helps make the entire design feel unified and cohesive. I think my favorite part of your webpage is the fact that you used a photo as your background. This really adds another element of interest and makes your webpage stand out again other more standard or generic pages (like mine https://perrykt.wordpress.com/2015/03/14/project-7-webpage/).
Check out Krystal’s design, she did an analogous color scheme that is quite different from yours, but I feel it is just as effective.
https://krystalsnyder.wordpress.com/2015/03/14/60/