For my final assignment I   reworked (pretty much re did) my “Hilltop Brewery” website from Week 5. The intent of this website would be mainly to advertise for the brewery but also to give information about the brewing process (Hilltop’s specifically) and to sell event/ class tickets as well as brewery merchandise (hats, hoodies, etc.). I stuck with the same basic color pallet as my first layout. I think the Earth tones yield well for a brewery or any type of “craft beer” type setting. They generally go well with the different colors of the actual beers. and sort of mimic and compliment the old wooden barrels that beer used to be stored in. I also find these colors cozy and relaxing- the type of atmosphere I want to have a beer in! I tried to use photographs that were clear, professional, and stayed within my color pallet.   I used the same basic idea as before for my banner but I switched up the fonts and placement. I think this new website front page is a little more effective as an advertising tool. From the front page alone you can tell the brewery has a store, a tasting room, a variety of beers, events, classes, awards, and contact information. I made some buttons with a little more dimension this time using gradients and drop shadows in some cases. At the top the beer glasses are sprite buttons. I have attached pictures of what the original (first picture) and the hover state (second picture) would look like.




I was contemplating changing the actual color of the beer in the hover state as well. I chose to put these buttons at the top of the page because they contain the most basic information about the brewery that anyone visiting the site for the first time, or anyone who does not know about the business, may want to know. I also have the “Beer Tasting” flyer peeking out a bit above the fold (@600px) (its intended to MAKE them scroll down to see more!) . For other pages, I would use this same “theme” of buttons on each different page, except using different “beer symbols” like kegs, bottles, barrels, growlers, etc. I also decided to change up my fonts a bit. I downloaded some free fonts from I personally think that a common font can sometimes look a bit unprofessional, so I opted for fonts that were a little more unique. I also included a search bar at the top of the page (searches within the brewery site) and a “virtual video tour” of the brewery itself.   I would most likely in a “live situation” host this video through youtube and embed it into the page. The video would be a smaller thumbnail on the mobile view of the website. Each element (ie. “Beer Tasting Flyer”, “Brew of the Week”, etc) is on their own layers so each set of imagery could be optimized separately then optimized for the web as a whole for overall higher quality and smaller file size . I was able to get my entire PNG file size down to about 1MB without losing any obvious quality and without optimizing each separate layer so it could be much smaller if it needed to be.

I think overall my second design looks quite a bit more professional and makes a little more sense navigation wise than my first one. (Attached Below)


Leave a Reply