Out in the Bay Area, there is no singer that is more beloved and respected than Oakland’s own songbird, Goapele. So when we got the opportunity to help create artwork for her upcoming album and re-design her website, we jumped at the chance to get “Closer” with the R&B star.
Though each project is unique and bring about their own set of challenges, there are a set of guidelines that most designers follow to help solve the design problem (you can read more about our condensed process here). For this post, we wanted to concentrate on making the jump from rough sketches, to refined compositions and the choices made that led to the finished project.
Discovery/Rough Sketch
After initial research and speaking with Goapele and her team, we made a list of features that essential to the website. Once we all agreed on the features, we had to place them in order of importance and help direct the user when they first visit the website. We all decided that a big, catchy slider would be used. It gave the home page a flexible tool to showcase, promote and generally just grab people’s attention when they first each the website. Goapele also needed to be able to capture emails so a dedicated space in the front needed to stand out. A quick bio for those who have just recently discovered her music, a place to view her latest video and listen to the latest music and of course a place to list her upcoming shows. Goapele is also very social media friendly and wanted to make sure it was easy for her fans to be able to connect with her. Check out the rough sketch below.
Refined Sketch
From that initial sketch, you can already see the website taking place. We were all pretty happy with the general direction of the project and decided to move to a refined sketch. This stage is very helpful in that it helps flush out your ideas even more. Check out the refined sketch below. We used a an online wire-framing tool to transfer our sketches. There are plenty of choices out there for wire-framing design tools, or you can always stick with the old one-two of Illustrator and Photoshop.
Refined Photoshop Mock-up
Once the refined wireframe was approved, we moved on to Photoshop. We had established some of the palette and overall design feel from some previous smaller projects with Goapele which helped us get a color palette quickly. Getting a detailed wireframe is one the most important steps (after initial consultation and discovery) because it sets the stage perfectly for the fun stuff. I liken the process to the moving from pencils to ink & color for a comic book artist or an underpainting in fine art techniques. Take a look below for the first draft of the refined Photoshop mock-up.
As you can see we did not drift very far from the rough draft/wireframe. Check outside-by-side comparison below to see the how the jump was made from a rough sketch to a refined mock-up.
Refinements
Although pre-planning, research and wireframes all help facilitate the design process quickly– changes, yes even this late in the stage are almost always inevitable. After taking a look at the refined mock-ups, we realized that a bigger focus needed to be placed on the email newsletter sign-up and the ticket info area. Also, the media slider needed to be placed higher in the hierarchy since a lot of users will be expecting to hear/see the latest media from the source itself.
After some deliberating, the decision was made to make the ticket info a much larger section which freed up extra space for the newsletter to expand for more real estate. The result was a longer span- which meant we now wanted to break up the monotony by designing for the pagefold. For those not familiar, “the fold” is, it is basically the part of a web page you can see before having to scroll– it was mythical line that web designers feared and respected and one who’s time has passed with the proliferation of single-page websites, higher resolution screens and swipe-and scroll-happy mobile users.
Check out the image below for the refined and eventual final version of the homepage.
Hope we were able to shed a little light on how our process works. We definitely had a blast re-designing Goapele’s website. Check out the real thing at Goapele.com.
