There are a number of ways for a designer to propose a website design & layout ideas to a client. Some use wire-frames, some use Photoshop, some sketch it out on a pad of paper and some simply like to hash it out over coffee.
How you do it is a matter of preference, but it does not have to be complicated. My process is quite simple: client needs, research, inspiration, platform options & then presentation.
So lets look at these…
I start by considering a clients specs, needs, tastes and user base. This is usually initiated by conversation but I also send the client a basic questionnaire so that I can get a better picture.
Then I visit sites that are similar in product/service and begin bookmarking the ones I like. Finding “top 10” lists also make it easier to look at several in the same category. It’s not always “top 10” but you know what I mean. If I am working on a real estate based project, I will Google something like “best real estate websites” or “best real estate WordPress themes”. Here are some examples of various categories…
Then I go looking through some of my favorite inspirational sites. Of course I always ask my client to send me at least 3 – 4 of their own inspirational sites and I ask them to describe what it is they like and dislike about the sites. But here are a few inspiration sites I like to frequent…
4. PLATFORM OPTIONS
Once I go through all these steps I start browsing through WordPress templates/themes that I am familiar with (or want to be) and find a couple that I think I can really work with. Here is an example of a theme I chose to work with, the mock-up based on the structure of the theme, and then the end result…
One of my favorite theme provider these days is Elegant Themes as they have so many beautiful themes to choose from. The theme I used for the above project is Aggregate and is an Elegant Theme. Their latest theme (as of the publishing of this post) is Divi and I found I can do just about anything with that theme. Check out some of the sites I designed using Divi as my template…
Once I come up with some ideas that I think will work well with the client, I begin mocking up something using my image editor. My personal preference is an old version of Fireworks. Some use Photoshop but if thats not in your budget, try Gimp. It’s free and I hear it’s a great resource for image editing/creating.
I then consider the theme’s default layout schemes and options and work from there. The process is quite simple really and it’s cut my research and proposal time down in half. Here are some examples of some recent mock ups I did based on the Divi theme template.
As you can see, all of these are basically the same content with various layouts. All of which were easy to change around based on what I know the theme can do. For you Divi users out there, you know that it’s very easy to make these layout changes so I am confident that whichever layout the client chooses, it will be easy for me to make.
Well that’s all for now. I hope you find this article useful.