Codementor Events

The 6 Step Process of Designing a WordPress Site From Top to Bottom Quickly

Published Dec 05, 2018
The 6 Step Process of Designing a WordPress Site From Top to Bottom Quickly

Some designers hate WordPress.

They say WordPress limits their creativity.

They say it’s not really as easy to use as some think it is, and that clients tend to be very confused when interacting with it.

They say it’s difficult to convert a modern design into a usable theme.

And, here’s the kicker, they are right.

At least partly.

WordPress is not perfect as a web development platform, especially when working with clients. That’s why we need to adapt a certain approach if we want to make them happy (read: so they will pay us).

There are various elements and processes that make some WordPress builds way better, simpler, and more effective than the others (that’s something we should know of, since our main business here is based on taking any given design and turning it into a WordPress site).

But the funny thing is that, as it turns out, putting together a great WordPress site isn’t actually that difficult once you know and understand one of the working processes.

So what I want to show you today is exactly one of those processes – the approach you can take to build a great WordPress site from top to bottom, and in a way that your clients will love.

Let’s get started! And sorry, but there’s no other way to say this:

Step #1: Steal!

Yep, steal. As in take stuff.

Where by stuff I mean ideas.

Note. Don’t ever steal the results of anyone’s work; including code, graphics, brand identity, names, stuff like that.

Again, this is about stealing ideas only. And even though you might be kind of “I don’t know” about this, let me just say that stealing ideas is the most common design practice off them all.

Here’s a quote by Jim Jarmusch:

“Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. […] Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent.”

The fact is that an idea in itself has no value. It’s the execution that matters. You can easily have 10 people start with the same idea, and they will inevitably end up with 10 different results.

Don’t be afraid to steal ideas. If you see something that resonates with you, steal it and be done with it.

Step #2: Lay the groundwork first

This is something I learned a number of years ago when running a web design agency: Clients don’t care about how beautiful their site is , they only care about what results it brings.

So step #2 is always making sure that you understand what the client wants to achieve with their site.

(Or what you want to achieve with the site if you’re building it for yourself. The advice applies just as much if you’re your own client.)

Once you know what you want to achieve (which should be just one main thing and not 5-10 different things, by the way) then you can continue to build the whole site around it.

Some of the more popular goals for websites include stuff like: generating leads, selling a product, improving brand awareness, etc.

Step #3: Get the right set of tools

I guess you’re not here for the obvious, so let’s leave the basic tools out of this talk (like Dropbox, Google Drive, Photoshop, and etc.).

Instead, I want to show you a different set – tools that are not that well known yet, but they still deliver big time (!) and make every WordPress designer’s life easier.

Let’s start with these three:

  • Unsplash – the best source of high quality photos with no copyright; this means you can use them however you wish.
  • PixelDropr – handy way of creating your own pixel collections (buttons, icons, UI kits, etc.) and then using them in Photoshop through drag and drop.
  • IcoMoon – one of the top icon fonts provider out there; plus, you get an app you can use for building your own custom fonts.

“What?! Only three tools?!”

To be totally honest with you, there is a bigger list that we’ve put together after a couple of rounds of researching, writing and editing. We’ve decided to make it available as part of our premium newsletter content if you’re interested.

It’s still free, though, so the only thing you need to do to get your hands on it is fill out this form:

Get the list of 10 Tools We Use When Designing for WP

That Cut Our Work Time in Half (by the Way, 7 of Them Are Free).

We hate spam too, by the way.

Once you’re subscribed, you’ll get the complete list automatically.

Step #4: To design or to modify – that is the question

There are basically two main ways of building a WordPress site: You can either take a ready-made theme and modify it here and there (you can also modify the PSD files – most themes come with those), or you can build the actual structure from the ground up.

To cut the discussion short, we’re fans of the former. If you take an existing theme or a theme framework then you get a lot of functionality out of the box. And that’s functionality that’s been tested by other people and proven to work properly.

Apart from that, you often get support, and even if there’s no support then you at least get a community forum of some kind. In other words, in case of any difficulties, there’s always someone you can ask for help. Not the situation when building your design from scratch.

The main theme store we trust – that’s because we’re the ones running it – is ThemeIsle. A new player on the market, I give you that, but what’s different here is that we don’t sell you themes; we work together with you to help you build a stunning site that converts, with the theme being only part of the process.

This guide was never supposed to be a purely promotional piece, so let’s list some free alternatives that are still pretty good for a starting point:

  • The themes at http://wordpress.org/themes/ – this is the official directory. The themes there are generally safe and analyzed for the common security problems.
  • _S also called Underscores – this is a starter theme with not much design on it, only a great structure. It will require a little more work though to turn it into a finished site.

Step #5: Get some non-obvious plugins on it

The main goal we’re going for in this guide is to get a site built quickly and in a way that clients are absolutely in love with it.

So the plugins we need have to be pushing us towards this goal.

Again, I’m going to save you all the obvious plugins you already know of, like WordPress SEO, Contact Form 7 or Akismet. Instead, let’s focus on the less obvious ones, yet still crucial for your clients.

  • User Admin Simplifier – not all clients are interested in (or even should be) seeing the whole WP admin panel. Especially if you’re dealing with someone not that web-savvy.
  • WordPress Backup to Dropbox – keeps the site safe in case the server crashes or any other unfortunate event happens.
  • Tweet Old Post – these days, no one has the time to tweet their posts out manually every day. This plugin does this for you, or for your clients, so they can scratch one more thing off their daily to-do list.
  • Advanced Custom Fields – the plugin allows you to customize the user interface even further, and give your clients some extra types of content and other elements that they can use in their posts (not a one-click wonder plugin though; it requires work).

That’s just some of the plugins we have in our arsenal. I don’t want to make this post too long, so if you want more – well, you know what to do … to the newsletter!

Step #6: Help with content creation

If it’s your own site that you’re building then this step is pretty obvious. On the other hand, if it’s a site for a client, you should still step in and offer your help with creating the initial content and maybe even arranging some ongoing deal around it.

Leaving the client behind right after they pay you for the site is a common mistake among designers. And it has a huge impact on your future earnings.

In the worst case scenario, if the client fails with their site because they couldn’t figure out what and how to publish then they will sure as hell not come back for more of your services.

But if the client thrives then they are very likely to start working on other projects. And since you were the person who built the initial one and helped with the content, who do you think they will reach out to?

Your turn to act!

Out of all of the steps described above, I’d say that the last one has the most impact on your client’s level of happiness in the long run.

I mean, even if you mess up the site, but stay in touch and do everything you can do to fix it, provide tips, advice, and so on, then the client is still likely to come back. That’s because they now have a bond with you that’s underlined with a lot of trust and understanding.

So tell me, what are you working on right now? Anything we can help you with?

Discover and read more posts from Ahmed Salem
get started
post commentsBe the first to share your opinion
Show more replies