"The Black Cat" IT 270 Final

The business I'm building for is called "The Black Cat". It's a cooperatively-run alternative performance space and vegetarian/vegan restaurant that aims to be all-ages whenever possible. The inspiration for the idea comes from my high school days when my friends and I would bemoan the poor state of the local music scene and the lack of all-ages venues. The design also inspired by the "brutalism" web design movement that has become popular in recent years. Web brutalism is a modern take on the starkness of the 90's design web design aesthetics minus the obnoxious backgrounds, hideous fonts, and embedded MIDI files that the 90s made infamous. I count myself among the critics of Web 2.0 who believes it's fallen far, far short of it's intended goal. Instead of user-friendly "content is king" design we have bloated code and feature-creep that have functional sites becoming 90% style and 10% substance.

In keeping with this minimalist ethos, the color pallete I used is monochrome with red used for links to make them pop. The layout is single column with the navigation bar on top comprised of link buttons I designed. I added an additional hover effect to textual links in response to the feedback I received in Module 6. This did improve them significantly and had the unintended bonus of giving my nav bar image links a neat underscore effect when moused-over. The individual pages of the site will be iterations on the home page with addtional elements or changes to better reflect their content.

I'm satisfied overall with the layout but there is a few things I would change given enough time and the skills required. Ideally, I'd like to change the homepage to be a live feed from TBC's Twitter or Facebook page. I would also add links to it's presence on social media perhaps as a widget or integrated into the nav menu. Despite my opinions on modern web design, I readily admit the use of Wordpress or similar platform has become the standard for sites with dynamic content creation and I would administrate this site using it. Cracking open the source itself for a basic update is cumbersome and inelegant and one user experience from the past that I don't miss.

Layout

Home

The initial page of the site serves as a splash page with a promotional message meant to highlight what the The Black Cat is and what wants to accomplish as a business. The design is pretty simplistic and I spent more time on the images than the code itself. This served as the basic template for the rest of the site.

Event

This is the most image heavy page on the site. I initially encountered some issues with the images' alignment breaking the layout whenever I tried to use barebones mark-up to layout them out. My solutions where cumberson and inelegant. I eventually realized I could rename the "content" div on this page so as to allow unique edits to the pages layout without breaking the rest of the site. I used the figcaption tag for the text beneath each image and linked the images to the respective bands Bandcamp sites. The last image's link is a tongue-in-cheek joke.

Dining

This page utilizes a table in it's design as well as some visual changes to the page itself. Most noticeably, I changed the background of the content area to white to increase legibility. If I were to design a page like this for a real company I would have the nav bar link to a pdf of the menu. I found this to be a common practice on most the restaraunt sites I researched during development. I created the basic structure of the table in MS Word and then exported the code and edited it to my specifications in Sublime Text as well as a single CSS edit.

Contact

This is a basic form with radio buttons and few input fields. The idea was to have the form data sent to my email address. However, it is non-functional as this process requires some esoteric tinkering with JQuery and server-side programs that are well-beyond my pay grade, so to speak. The design also breaks with the rest of the sites aesthetics but I could not find a way to integrate it visually without breaking the core layout.