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…
1. NEEDS
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.
2. RESEARCH:
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…
http://www.designyourway.net/blog/inspiration/inspiration-for-designing-a-small-e-commerce-site/
http://doublemesh.com/real-estate-wordpress-themes/
http://wplift.com/wordpress-themes-for-churches-2014
http://www.tripwiremagazine.com/2013/05/wordpress-gaming-themes.html
3. INSPIRATION:
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…
http://unmatchedstyle.com/gallery
http://www.thebestdesigns.com/
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…
- http://novindevelopment.com/
- http://nicklemau.com/
- http://maxbuildersinc.net/
- http://teenchallengemb.org/
- http://ccwatsonville.com/
- http://www.connectlb.com/
Also check out our portfolio page to see more sites using Elegant Theme templates. Click Here
5. PRESENTATION
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.
Thank you for this post Geno. Your sites are always an inspiration for me.
Thanks Eileen. Your work is quite the inspiration as well!
Dear Geno.
My name is Marcelo Gama, and I’m from Brazil.
I am an IT professional for 20 years, and am currently investing in Web Design and Graphic Design.
Your story and posts has inspired me a lot in developing my websites.
Thank you.
Thanks Marcelo. I like how you have a music video on your site while its under construction. Neat idea. I look forward to seeing your site when it’s ready. Please keep me posted 🙂
Hi GQ,
I am a fan of your coding skills and css tips. Currently. I am working on a website and I want Main menu of my site looks like your website https://quiroz.co/ . Home page with video and when scroll down menu & Logo appears on second page and each page(but not on home page) with smooth transition. I am using Divi theme one page layout. Is there any tutorial available for it ? Please advise
Thanks. I do not have a tutorial on the drop down navigation as of yet. But if you are interested in saving time and having access to that feature, you might consider purchasing the Big Sur child theme. If you do decide to puchase it, wait until this Mothers day weekend as they will be on sale for an amazing price 😉
http://montereypremier.com/custom-child-themes/big-sur/
thanks for the reply I will wait for to buy Bigsur 🙂