Project 7 – Website

Description

For this week’s assignment we had to create a website using HTML and CSS in Adobe Dreamweaver. Our website had to showcase one of our logos that we created earlier in our class and had to describe the process we went through to create our logo.

Process (Programs, Tools, Skills)

To start I created two files in Dreamweaver: a HTML file and a CSS file. I linked these two files together in the head of the HTML file and then I got things started by inserting my logo onto the page and writing the content of my site. I selected two different fonts using Google Fonts and included their code in the head of my HTML file and added those fonts to my CSS. One of the first things I added to my CSS was figuring out how wide I wanted my content to be on the page. I created a “container” class so that my content would be centered within the page and that it would have a uniform width. Even though my content was centered I wanted to have the backgrounds of my sections be full-width so that my site had a more modern feel and be somewhat responsive.

I decided to breakdown the process of creating my logo into four separate sections and I tried to think of different ways I could make the backgrounds of each section unique to reflect what they were about. I scanned my drawings from when I made my logo into the scanner and set the background of the planning section. I also used a photo of me doing the Crossfit Open at my gym in the background of the message. For typography, I wrote out the alphabet going forwards and backwards and used them as top and bottom borders of that section. Initially for the colors section I had my two colors that I used for the logo setup as like a striped frame around that section but after I got feedback from the critique I decided to make it more subdued and used CSS to create little circular swatches of my logo colors.

For the footer of my website I thought it would be a good idea to create links to the different parts of my site since it’s kind of a longer scrolling site. This was where I used an unordered list and I made each link look like it was a button. I added hover effects so the color and border style and color change when you hover over each link. I made sure to add id’s to each of my different sections and was able to set my hrefs of my links to those ids so that they would link to different parts of the page. Some finishing touches included adding some small arrows in my intro sentence using Font Awesome icons and also adjusting the link in the footer so it doesn’t have a long URL.

Message

The purpose of this website is to explain how I created a logo design that I created for my Crossfit blog.

Audience

The audience for this website would be my fellow classmates and anyone interested in the basics of logo design.

Top Thing Learned

Since I have a background in web development the HTML and CSS for this project was fairly easy for me and was familiar. I think the top thing I learned was to not forget the design principles when creating a site and to also try to maintain unity throughout your design. I can write code for days, but creating a unique design or coming up with design ideas is hard for me so I think this exercise was a good way for me to use my skills as well as think about the design process.

Color scheme and color hex(s)

I used four colors in my website that were based on my logo design:

• Red #ED1C24
• Blue #2E3192
• White #FFF
• Grey #CCC

Title Font Families & Category

I used the Google Font Andada which is a Serif font.

Copy Font Families & Category

I used the Google Font Hind which is a Sans Serif font.

Changes made to the CSS

I actually deleted pretty much all the existing CSS in the demo.css file and wrote all the CSS by myself. The only thing I kept was the styles for the universal selector (*).

Word Count

My page has a total word count of 305