If you’re wondering how to design a site like canopy.co (or any other site for that matter), read on!
Every once in a while you come across a website with a really beautiful design. The color scheme is striking. The layout is really easy to understand.
It appeals to you very much.
So you wonder… “Is this a Wordpress theme I can just download somewhere?”
It could be. Or, it might not be.
I forget how I heard of canopy.co, but when I saw it I really wanted to use their design for a site I was thinking about building.
I checked and sure enough, it was not a wordpress theme.
I cried for a month.
But when I pulled myself together, I decided to copy the design by doing it myself.
The minimalist design really appeals to me.
Because it is easy to understand at a glance.
There is no clutter you have to process before you get to see what you’re looking for.
There are really two lines of thought when it comes to design.
First line of thought: We should copy a site like Amazon.com because they are the world’s biggest online retailer and they know what they’re doing.
I can’t argue with that line of thought because its true.
But Amazon is cluttered with all sorts of visual distractions and just navigating the menu is tricky (at least for me).
Second line of thought: A clean, simple, uncluttered design is best because people today are in a hurry and if they can’t find what they want in a matter of nano seconds, they click away.
This is also true.
So how do we reconcile these two opposing thought processes?
Fortunately, I don’t think we have to reconcile them. We, as small business people, are not in the same category as Amazon.
Amazon came on the scene when there were very few other e-commerce options. They grew fast and got a good reputation. Now they are the dominant player in a lot of markets. They could do just about anything and people would still love them because they’ve earned trust over the last decade.
We, on the other hand, have to compete with other small businesses for attention and have to earn our trust.
If we make our site difficult to understand within seconds, we aren’t helping ourselves.
That is why I favor a clean, easy-to-understand design. I don’t just like a minimilist design because it’s clean, but I also like it because it requires no effort to understand whats going on.
I can decide instantly if the site will help me, or be a waste of time.
Anyway, that is why I instantly liked canopy.co
So, I copied it.
Here’s how I did it.
Disclaimer: I used the thesis themes to do it. If you don’t use the Thesis themes, then this might not help you much. But I would recommend you get it since its very flexible and you can clone a lot of different designs easily and quickly.
Compare the two sites, side by side
First, let me say that they are not EXACT copies. I didn’t want an exact copy because that’s too similar.
That being said, I gave myself a time limit of about 3 hours to work on it.
There were some changes I needed to make on my site that didn’t fit within my 3 hour timeframe, so I just let them go.
The result is pretty close though.
The most important things to me were:
- prices easily visible
The colors are easy to figure out. Get the Colorzilla Chrome or Firefox extension and you can find out in seconds what the colors are on canopy.co
The font was easy to find too. Use the WhatFont Chrome or Firefox extension to find out what font canopy.co uses. Unfortunately, canopy uses the Europa font. Its really a beautiful font, but its an Adobe font and in order to have access to it you’ll have to subscribe to Adobe Creative Cloud or you could buy it at Europa’s website for 150 Swiss Francs.
No thanks. I like it, but I don’t like it that much.
So I found a similar alternative font: Montserrat.
It was close enough, and gave that same ‘elegant’ simple look.
The layout was simple enough to copy… just a header, the ‘body’ with a top part in green, and the rest of it with several rows of 3 columns… then finally, the footer.
I decided to make it an e-commerce store.
I bought a domain name (coffeethings.net) at namecheap
Once I had it registered, I set my nameservers to my Siteground hosting account, and then I set up the add-on domain in my cpanel.
Then I loaded Wordpress using the Softaculous icon in my Cpanel.
Once Wordpress was loaded onto my domain, I logged in and started the set-up.
The first thing I did was load the Themify Ultra theme. (Read my article on my favorite themes)
At this point I had to stop work on my site, and look for products to sell.
I probably should have already known exactly what products I wanted, but my goal was really to make this site an example for this article.
At any rate, I went to Aliexpress and chose a few coffee related things to sell on my site.
Right now would be a good time to mention this:
Images are the most important design element on your site.
If you mess up the images, your site will look like garbage.
Get or take the best possible pictures you can. Do not EVER use a small image and make it bigger. Always use a big image and make it smaller.
Also, on a home page, its probably a good idea to make the images all the same size so that everything is uniform and symmetrical. There are some exceptions to this, but for something like my coffeethings.net (and canopy.co) its a good idea.
My next step was to install all the plugins I would need… mainly Woocommerce.
Then I added all the products and created any pages I might need.
So now all I had to do was build the structure in my Themify theme.
Themify is really easy to work with.
First thing I did was work on the header.
In the Themify Ultra menu, I went to Themify Settings, then Theme Settings and chose the kind of header I want.
Then in the standard Wordpress functionality, I went to the menu and chose Appearance – Customize.
Here I added the logo and chose the font and font weight (how skinny the font is).
I decided to not do some of what I considered to be unimportant stuff… like moving the logo to the center of the header rather than use the left side for the logo.
That is not the kind of thing I wanted to spend time messing with.
Its much more important that the site produce a ‘feeling’ for the visitor and details that might drive me crazy won’t make any difference to a user. Why would they care if the logo is in the center or on the left side?
So I moved on to the Body part of the home page.
The Themify theme has what they call a Themify Builder that allows you to add different elements to a page.
I already knew I needed a top part that would be in green, and a bottom part with rows of 3 columns.
Without going into a complete tutorial about Themify, all I had to do was put together the structure similar to canopy.co.
I chose the color #b9faeb (the green color) for the section, then added the text ‘Coffee, One of Life’s Great Pleasures’ and centered it.
After that, I added a divider and then 3 buttons that link to other pages on the site.
Finally, since I had installed the woocommerce plugin and had set up the products with images, prices and descriptions, I chose to use themify’s ‘woocommerce builder’ that allows me to specify how many products to show on the page and how many columns.