creating . media . solutions
I knew I wanted something clean and modern. Looking at some of the other bands in the same genres websites, I felt they were too cluttered. I wanted to make sure anyone could get to the information with as few clicks as possible. Also, it was very important to tie in the IndieGoGo campaign for the new album.
For the main body of the site I was able to use a really great photo taken by PipelineFilms. The secondary navigation is an image taken at a recent show. Matt cropped and sized both images in Photoshop to serve as both a great visual as well as navigation. These images were overlayed in red to give it some emphasis.
For the overall style, I knew I wanted to keeps things simple. I chose a simple white pattern from Subtle Patterns. Also, arial is the main font. The decision to use lowercase everything was to counterbalance the all caps in the logo. Social media is very important, especially for bands. I used icons from Fontello this time. I think icons for social media links are much more effective and cleaner because of the brand recognition of their respective logos.
For the actual pages I knew I didn't want the user to ever leave the main page as the images were so vital to navigation. Enter Colorbox. To add a little more interactivity I used widgets from iTunes, Twitter, and ReverbNation. A user can listen to their music, see their feed, and watch videos all without having to ever leave the page.
This was a large undertaking. We knew the site needed to be as good as the food because the restaurant's popularity in town. We wanted a UI that not only highlighted the food but was clean, easy to navigate. We mocked up the site in Photoshop and it took quite a few tries to get it right.
We took the interior of the restaurant as a model to base the look and feel. The images used some pictures we took in preproduction. Then, after some research we made some old school baseball cards out of them. For the general color scheme we went the colors of The University of Miami. That's one of their favorite so it added a little personality to the site. Arial was used as the main font because of accessibility.
After final approval, we finished making the necessary and built out the code. During this time, we also started two Facebook Pages and a Twitter account. This required us to make new profile, cover photo, and background images for the accounts.
HTML and CSS
This is the second version of the site. The first one was a little flat and had very little movement. I knew I wanted to spice it up a bit but not go overboard. With a little help from Treehouse I was able to get something little better.
I did some research looking at other errand type businesses around the area. There wasn't much to go on but I felt they were a little boxy and formal. I set out to something more fun and open. After doing a few sketches on paper and a mock-up, I fired up Dreamweaver and got straight to the code. I chose a simple blue and brown color scheme because I felt it help with the visual hierarchy.
During production I made some simple buttons in Photoshop to link to Keep Newton Beautiful, the Facebook Page I made, and one back to us. Usually I would use an icon set but there wasn't a recycle icon. The business is recycle friendly. Also, I thought it would be more interesting to use a button for a link back to us using something that was similar to our logo.
The business makes use of the easy to set up, easy to use Google Voice. I use it and think it's fantastic. It allows you to forward calls from just about any number. There's also an app that let's you manage the account.
HTML and CSS
This site has been built and rebuilt many times. I'll probably rebuild it again. It was the first complete site to be hand coded and I want so badly for it to be perfect. However, I am happy with it's current version. It's also the the first site I used to test out some new techniques and new ideas. My own little sandbox.
The color scheme, layout, and content has changed so many times that it'd be nearly impossible to document every change. Instead, I'll hit the highlights most versions have in common. One of the first things I wanted to try was Google Web Fonts. Now we're not stuck using system fonts. I use them in almost every project. Although I don't use it as often, I'd be remiss if I didn't mention Sticky Footer. It was there in good times and bad times. Css3Shapes is another resource I used during this project and refer to it during others as well. There are many like it but this is my go to page for shapes.
This is also my first foray into responsive web design and fluid layouts. I got the grid I used to build this site from 960.gs. Now I prefer to build my own but it was a great starting point. Another ingredient is media queries. That was the thing that took forever to get my head wrapped around. Mediaqueri.es is a site I'd reference for some great examples of how it's done right. Also, I read this article and this book on RWD both written by Ethan Marcotte. All these things are key pieces to the puzzle and without each other the idea doesn't work.