HTML & CSS Project

HTML & CSS Project

Logo Showcase

Description

The purpose of this project was to learn and practice HTML and CSS skills, putting them to use to create a single web page that showcased our logo design from the Business Identity Project.

Process

  1. I had previously designed my logo in Adobe Illustrator. After some additional finishing touches, I exported it from Illustrator as a PNG file. I did the same thing with the three rough logo designs I created for feedback during the logo project.
  2. I hand sketched a rough outline of my web page design.
  3. I used software called Notepad++ to create the HTML and CSS files.
  4. I’ve been using HTML and CSS for a few years, so I was able to get started pretty quickly. First, I created the elements and tags with content in HTML and added appropriate IDs and Classes to the elements I would need to style with the CSS. I generate dummy text from Lipsum.com used it as a placeholder while I worked on the overall structure of the site.
  5. After completing the page’s structure, I then started working on the CSS file to style page and add design elements.
  6. When I was finished with the HTML and CSS files, I checked them for errors using the W3C’s HTML validator and CSS validator.
  7. When the page was finished I uploaded it to my personal hosting account using FileZilla, a free FTP tool, so that I could be available on the web. The live site can be viewed here.

Critique Process

I received Facebook critiques from Heather Holt, Chelsie Brady, and Jeremy Taylor. They all stated that they liked that I’d used the State of Ariona shape as part of my content are’s background. Chelsie and Jeremy also checked the site that was hosted online and found that it was not responsive to different screen sizes, so they suggested I fix that issue.

Brother Stucki also critiqued my first submission. Like the others, he liked the use of the shape of Arizona, but when he clicked over to the online site, the site displayed poorly for his screen size, especially the margins and horizontal lines.

After the critiques I spent many hours learning more about responsive design and was able to get the page to be fairly responsive on most common screens. However, doing that made it very difficult for me to keep the state shape as part of my background. Finally, I decided to simplify and eliminate that element. I think the final user experience is better off without it.

Message

The message of the logo and the design of the web page is to entice viewers to choose Arizona Knife  & Blade as their source for all bladed tools and weapons.

Audience

My target audience for this project is men from 20 to 50 who are ex- or current military, enjoy the outdoors, or are otherwise interested in survivalism, hunting, or prepping.

Top Things Learned

I learned that it’s very easy to waste time trying to make simple changes to a web page. There were several things that I wanted to do differently with my logo page, but I found that I simply couldn’t invest the time to implement every idea I had. In the end, I chose to simplify and stick with a simpler but more refined design.

Color Scheme & Color Names

I took the color scheme for the site directly from the logo itself. I used a monochromatic green scheme that went from shades of dark green to lighter shades of brown-tinted green. This color is reminiscent of hunting or military camouflage. The colors are a dark green color is HEX #175f30, a mid-brown green HEX #5C512F lighter brown-tinted green is HEX #9a8b4f.

Title Font Name & Category

For the logo, I used a military style font that I felt was familiar and might appeal to my target audience. My fonts were Reklame Script Regular, a script font, and Stencil Std Bold, a serif font. Both fonts were from Adobe Typekit.

Copy Font Name & Category

The web page used a sans serif body font called Priori-Sans. This was also a Typekit font.

Source of Images

All images used in the logo and the website were created and are owned by me.

2 thoughts on “HTML & CSS Project

  1. Miranda Duncan

    Dave, I’m really sorry you couldn’t keep the Arizona shape on your site. It really was a beautiful extra touch. But I think you made a wise choice to simplify for the benefit of the viewer and not hold on to something great that didn’t display very well for a broad audience. I’m sure that was a tough decision to make. With more coding experience (as with everything), I’m sure it could be done.
    I also like how you kept the theme of the stenciled font throughout your webpage. Sometimes that’s a great unifier, and sometimes it’s just too much of a good thing. But I think it works here. Great job maintaining your color scheme, too.

    Mine: https://duncanmiranda.wordpress.com/2016/11/08/9a-website-html-css-coding-project/

    Julie’s https://juliebaughmanblog.wordpress.com/2016/11/09/html-css-coding-project/

Leave a Reply

Your email address will not be published. Required fields are marked *