Assignment: To design a mock-up web page for a client of your choice

Martin_GuitarPage_FINAL

This is how I arrived at the finished product.

Inspiration comes from Research

Our Adaptive Media Tools Professor, Andrew Tedford showed us a graphic designer who prior to starting on his design for a outdoor sign for a historical hotel, did research to draw inspiration from.  He took pictures of room keys, door frames and anything to capture the character of the motel.

I decided to do the same thing and you will see how the research I put into Martin & Co. reflects the design choices and helped pushed the choice for the main elements in the web page design.

Preparation Guides Creativity

“Admit constraints; then, having admitted, fill with discovery” –Anthony Fortaug

Early on I had to establish the primary function for this web page, even before thumbnails were drawn.  What I’ve found was that when my creative juices ran out, it was the reminder of the objective of this page that helped stir up creativity once more.

Primary Function of Martin’s Guitar Page: To sell and showcase their guitars.

Oh Sweet Sweet Mahogany!

After watching a couple youtube reviews of Martin Guitars (http://youtu.be/gswHt1AgS6E) I was particularly piqued by the fact that an all Mahogany Body Martin Guitar sounded particularly pleasing to me.  This minute detail turned out to be the driving force behind the design of this page.

_blog_woodBack

 

I wanted to showcase Martin’s craftsmanship, workmanship, quality, and the nature of their work in carpentry.  In my brainstorming I wanted to have wood with accents of pearl inlays to help represent the character of Martin & Co and ended up using this picture of Mahogany wood as the texture for my header and footer.

_blog_KULER

Also I ended up using the Adobe Kuler Andrew Tedford showed us to help choose the color palette for the website.  I sampled the color straight from the mahogany wood picture. I ended up choosing a turquoise blue as the secondary color with my Color Palette setting on Complementary, because it accented the pearl inlays nicely.  I also wanted the neutral colors of the browns to continue the craftsmanship theme.

_blog_Palatteuse

Drawing from some amazing illustrators I once watched paint on Photoshop, I ended up copying and pasting the color palette as a band right on my workspace so that I can easily select the colors while I worked.

Pearly Inlays and Satin

During my research I came across some gorgeous Pearl Inline work done by Martin & Co. that influenced the design of the header.

Screen Shot 2014-10-16 at 7.44.49 PM

I remember my professor Jo Bodick mentioned that during his work for clients, clients wanted their logos easily seen and recognized on the page.  So I made sure that the logo would be a main focal point.  In order to achieve and portray the character of the company, I decided to give the logo the effect of being a pearl-inlay within the mahogany header.

I ended up taking the Vector logo of Martin & Co. off the Brands of the World website and using Photoshop I created the pearl in-lay effect.  I remembered that one of the options in the blending layer was satin and that it’s effect basically created wave like highlights that simulated the look of silk.  Once I hit that check mark I was surprised to see how well the effect worked because the calligraphy offered thin lines that had plenty of curves with a backdrop of wood grain.

_blog_pearnInLayLogo

With the Navigation Bar under the header, I ordered each category beforehand to create a hierarchy that I believe would be what the user is going on the site to see, as well as to encourage business for Martin & Co.

_blogfretboardOriginally I was going to use a single pixel divider that worked well in our Audi class example, however, due to the font choice and the color, it looked too much like tile.  But I remembered coming across these pearl in lays that go into the fretboard of guitars that Martin sells.  This sparked the idea to use these dots as dividers for my tabs.

The research beforehand once again paid off big and strengthened the theme of craftsmanship as I continued to find ways to problem solve for user interaction in the website.

Thank God for Tutorials

A big part of the success of this design is aided by Sebatiano and his tutorial How to create a distinguishable textured web layout in Photoshop.  His tutorial showed me how to create an impressed look on my font in the header as well as applying texture to the Main Section of this website.  If you look closely, you will see that in the main section background I chose a texture that was similar to the surface of leather because Martin also makes guitar straps.  The use of texture added another visual dimension to the page.

It was a lot of fun imagining what it would’ve been like to be on a team that creates websites for companies with such history as Martin.  Owning a quality Martin is a dream of mine…one day

-Sam

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s