From a Sketch to Photoshop to Our New Homepage (a behind the scenes look)

We had an idea.

What if people could find information faster on our site?

What if people could do all right from the homepage?

We had these thoughts a few weeks ago and this post will show you everything from sketching out the new homepage idea, re-creating and tweaking it in Photoshop and finally turning it into reality on our homepage.

This is a behind the scenes look at what we did.


Let’s Rewind A Bit

Wanting to provide more value to web designers and grow into new areas… about a year and a half ago we changed from BestDynamikSkins.com to WebDesignersAcademy.com .  This was a huge and exciting step for us.

Finally we could talk about more than Dynamik skins!  We could now show people how to create cool things with WP plugins, new ways to use Photoshop, help people make more money faster, and cool CSS tricks (like how to make things spin with CSS).  This was an exciting time.

When we first launched we wanted people to understand why we are different = we are a husband and wife team who work together making websites for our clients and have done for for a combined 19 years (or so).  We also wanted to make it clear that we want to help people design more than websites, we want to help people design happiness.

So when we launched WDA the homepage looked like this:

It included a large shot of us somewhere on the Pacific Coast Highway in Big Sir California during a road trip in 2014 with the two latest blog posts underneath, and it remained like that until last week.


The Sketch

Knowing we wanted to get people information faster and easier we sketched out a bunch of ideas using paper and pencil.  I know, so 1900’s right?  Nothing fancy here, just both or us sitting at our desks in our home office drawing lines and taking notes.

Unfortunately we threw them all away when we decided on one (we didn’t know we would be sharing this with you).  We decided on this one:

(please excuse my husband’s sloppy handwriting… it looks like a first grader wrote that… but he’s cute, so it’s OK)

Looking at this sketch let me point out a few things:

  • We did not want to remove the section about us… we still want people to know who we are… just not as big
  • We wanted to have blocks of latest posts organized by different categories (these are the blocks with numbers).  The numbers allowed to easily talk about what category we wanted in each block.
  • The blocks size represented the importance of the category
  • You can also tell that blocks 3-8 needed to be in it’s own section (just to break up the page a bit)
  • We also made some changes to the navigation menu, specifically removing the “Blog”, moving “About” to the right and moving the “Toolkit” link closer to home (since this is the product we want to promote the most)
  • We wanted a way for people to quickly ask us a question (and join our mailing list), so at the bottom we wanted to put a simple contact form.
  • Finally, we needed a spot for a search box somewhere on the site (didn’t have a plan for that at this stage)

These changes would get us to our goal of helping people find information faster!


The PhotoShop Layout

Once we had the basic idea for the sketch down, we decided to recreate it in PhotoShop to polish it off and work out any flaws we had (as creating layouts in PhotoShop is infinitely easier than creating it on a website).  We started by taking a screenshot of our existing homepage so the sizes and colors would already be in place.

After a few hours of creating blocks and moving things around we had this:

At this stage, we still didn’t have everything nailed down and we even changed up a few things from the sketch:

  • We still didn’t know what was going to go at the top in the blue strip.  Maybe search?  But we needed more space for information about us.
  • Instead of the contact us form at the bottom being full width, we decided to use the right half for a Toolkit ad (which had not yet been created).

FREE BONUS FILE

If you’d like to download that PhotoShop file and see the individual layers and guides and play around with it, click the button below:

While we didn’t have every last detail figures out, we decided to go for it and work out the remaining pieces when we get there.  Just roll with it and see where it ends up.


Designing The New Homepage For Real

Using Dynamik Website Builders EZ Home Page Widgets we started creating the blocks with the latest featured posts, this is what each widget block looked like:

As you can tell we are using the built in Genesis – Featured Posts widgets to display the 2 latest posts in each block.  While it’s not pictured here, the other featured posts blocks have different sized thumbnails and are right aligned.

The next problem we had is that you can only specify one color for the widget title bar… but we wanted each one to be a different color.  After playing with CSS for a bit, we found these classes change the colors of the widget titles:

Once the blocks were set we still had a few more pieces to finish, the about us section and the Toolkit ad in the bottom.  Like always we want to stand out, be different and show some personality, so we created this:

That blue section oozes personality and introduces new visitors to us, and that section links to the About page.

Did you also notice the search bar in the header?  That seemed like a great place for it, because now it’s on EVERY page!

That brings us to the Toolkit ad, we wanted to be real creative with this image and get people to pay attention to the Toolkit, so we came up with this:

We found a great stock photo of some biker guy who would probably kick my ass real quick… but hey… he makes a statement.


Our New Home Page Is LIVE

From start to finish that probably took 15 hours or so.  Not bad for an entirely new homepage!  We will probably tweak it a bit as we go along, but that’s how it went from a sketch to PhotoShop to WordPress.

So what do you think of our homepage?

Your friends,
Ian & Amy Anderson