Behind The Redesign

I was never completely happy with the previous CardShare promotion website design.  It was something I made primarily to get the general idea of the application across and provide a way of getting in touch for customer support.  I planned on redesigning the site shortly after the application was accepted, but I didn’t find the time until about a week ago.  That also coincided with the release of CardShare 1.1, so I thought it was the perfect time to come out with a new look.  One photo shoot and hours of both design and programming later, I finished the new design.  This is a behind the scenes look at how this redesign came to be.

I always begin with a mockup.  To sketch out what I’ve been thinking is perhaps the most important aspect of the design process for me because it determines where I invest my time and it gets the general design on paper.  I don’t fret about the details in this stage – color combinations, fonts, or HTML markup.

For this redesign, I decided to keep some aspects of the previous design.  I didn’t have a problem with the curved corners or download box, so I chose to keep these basic items in the new layout.  One of the major items I decided to revamp was the navigation bar.  I chose to move the navigation bar to the top of the screen and make it expand to fill the width of the browser window.  This placement is more obvious than the last navigation bar and also displays the page title.

I had the idea of using a photograph for the header graphic.  There wasn’t any particularly deep reason behind this, but I thought it might be a nice way to bring some variety to an otherwise computer-graphic-generated webpage.  Also, as it is summer time here in the western hemisphere, it integrates the natural beauty with the new design.  I ended up adding the CardShare aspect through business cards on a table.

Additionally, I chose to use the iPhone 4 as the device displayed with the screenshots.  In addition to looking more modern than the old iPhone, the graphics for CardShare 1.1 were updated for the iPhone 4 so I thought it was fitting to include the new phone in the new design.

After getting the mockup finalized, I took the design to Photoshop.  I start with a blank browser window so I can see the design in the context of a browser.  From there I begin to experiment with colors and fonts once I transfer the elements from the paper to the application.  I ended up basing the design on dark blue and grey.  The fonts range from Comic Sans MS (for the logo) to American Typewriter (for the navigation items).  At this point, every aspect of the layout was digitalized besides a gap where the header image went.

For the header image photo shoot, I printed out two business cards – one with the CardShare logo and one with the text “Designed by Pierce Freeman”.  My original idea was to show the two business cards with the flowers in the background, but the two cards ended up being too small in relation to the rest of the photo so I scrapped that idea.  I went out with my trusty digital camera and chose the area for the photograph.  I then brought out a foldable table and the two business cards to make the CardShare aspect of the image.  About thirty minutes later, I was pretty confident that I had taken a photo I could use for the header.

I sat down at my computer, imported the images, and started the selection process.  I looked for photos that had the writing visible and were taken at a good angle.  With this criteria, I narrowed down the 217 photos to four and finally to the one used on the website.  From there, I did some small touchup and crop work on Photoshop and then it was time for the programming aspect.

There isn’t that much to say about the programming stage – it comprises of working on HTML, CSS, and Javascript to bring the design from Photoshop to a browser.  But once finished, it concluded the redesign process and resulted in the layout that is currently online.

You can view the new design here.