I had some difficulty with this project, but overall I think it turned out well. It was a challenge for me to figure out what to do to make the website how I wanted. Also, I found it difficult to make the text and such do what I want. In the end, though, I had fun and enjoyed the creative freedom I had.
For the general format I chose to stick with keeping the text in boxes so that they were visually separated. The two things that I kept out of boxes were the sidebar and the footer. I kept them out of boxes because I didn’t feel like they should be emphasized too much and I liked the contrast they gave. I chose to put the sidebar and links on the left side because that’s where I feel most people look for those options.
The first thing that came to my mind when I found out I could design a website however I wanted was the idea of spring: birds, colors, etc. It was difficult, however, to find images that I wanted to use that I had the rights to. I chose a blue, leafy background because it had nice tones of pinks and peaches that would set the “spring” mood for the rest of the website. And since I also wanted to incorporate some sort of bird into the design I chose the leafy background to tie in birds and trees. I chose to color the container a peach color that matched the background and I chose to color the header box and requirements box a pink color that matched the rest of the design. I chose to outline the boxes and color the text a navy blue color because it matched the colors of the background as well as popped on the page with the peach and pink. I chose to make the header in PhotoShop because I wanted the text to be different and stand out from the rest of the document. I also italicized the text in the footer to make that stand out differently. I chose to put a bird icon in front of the header in the requirements box for emphasis. I chose a bird because it went along with my theme of spring and I thought it flowed well with the rest of the design.
The first thing I did when I started my design was decide on the layout of the page. I put the text in boxes and put the sidebar on the left side. Once I had that I searched for a background that would create the theme I wanted. To add colors and change backgrounds I had to look on the htmldog.com website to remind myself. The two most difficult things I had to figure out how to do were to make the header an image and put an image in front of the headings in the requirements box. I had to enlist the help of Google to figure these things out.
The final result of how I made the header an image looks like this:
h1{
height: 80px;
background: #000 url(header.jpg) no-repeat;
}
h1 span {
display: none;
}
I had trouble getting the text below the image to line up and it still never became correct. I could get it to show up on my computer by using the code #header h2 {text-indent: 2em;} but when I saved it the changes weren’t sticking.
The final result of how I put an image in front of the headings in the requirements box looks like this:
#requirements h3:before {
content: url(birdjpg.jpg);
}
I had trouble at first getting the image in front of the headings to show up and blend with the background because I couldn’t get the jpg version to show so I had to use a gif format. This made the picture grainy and I wanted it to blend. As it turns out jpeg doesn’t show and jpg does, so once I changed that I got it to work.
Overall I think that this website turned out very well and I did have some fun in the process. I wish I could’ve found images that I liked better for the background, because I feel like my website isn’t very professional. It’s very cutesy and fun, but professional wouldn’t be a word I’d use to describe it. The design does flow well and it all makes sense. The design is easy to use and read and I think that is something that’s very important.
Professor Lowe: Code for making the sidebar on the left side.
http://www.squidfingers.com/: Background image
Smashing Magazine: Bird icon