Have You Ever Tried To Create A Website?

If you have, you would know that it is not that easy. And I’m not talking about the technical part. I’m talking about figuring out how the site will look, deciding whether to build it from scratch or go with something like Wix or WordPress, and if you do use WordPress what theme to use, which color palette and fonts do you opt for, etc.

These choices require experience, and require that you know quite specifically what you want to achieve. There is a shortcut, however. if you take a look at some of the most popular websites, you will begin to see a pattern emerging: not all websites are the same, but they sure do have A LOT in common.

Wait, are you suggesting that I copy someone else’s website?

Almost. In this article I’ll show you ways to find what works in websites that you like, and use that. I’ll show you lists of colors and fonts picked by professionals, that get the job done.

You might think that looking for inspiration this way is straight up copying, but it really isn’t. You will find what works, and what you like, and you’ll build on that to make your own unique creation.

Graphic Designers Spend Much Of Their Time Looking At The Works Of Others For Inspiration

Want to create a beautiful website by learning from others? By standing on the shoulders of giants? Read on.

Start with WordPress – here’s why

WordPress is the most popular Content Management System (which basically means “site building system”): 29% of the internet is powered by it. It is powerful and relatively simple – not requiring any coding knowledge. All a beginner needs to do is read some basic tutorials, pick a theme, and get started.

The fact that it is so popular and so powerful is what makes me recommend it. In WordPress:

  • It’s easy to get a great looking website by simply picking a great looking theme.
  • Most sites (and almost all the blogs) that you will want to imitate are also built with WordPress,
  • And if you don’t succeed with something there will be an abundance of people that will be able to support you.

Building everything yourself (without a content management system) is complex, and unrealistic for someone who isn’t a web developer – at least if they want to make a reasonably good looking site.

Wix, also a popular choice, while beautiful, is in my eyes too limited in its features and for me it’s way too slow (it’s also more expensive than using WordPress).

So, you’ve decided to go with WordPress? Now check out some sites you like, sites that you enjoy, sites that do something similar to what you want to achieve. Start getting a feel of what you may want to have in your website.

The first thing you’ll need to check is: is this site that I want to take ideas from even using WordPress?

This is where IsItWP comes in

IsItWP, short for “Is It WordPress” is a service that can be used to check if a website uses WordPress. All you need to do is plug in the URL of the website you like.

This is how the IsItWP results look (we ran it on vezemo.com)

When you enter the domain name and click Look Up, you will get a few things. First, you will get information on whether the site was actually built with WordPress.

If it was, you’ll get the theme which was used – now you can use it yourself if you liked it – and information on the theme as well, provided the theme is in their database. And, right below that, you will get the plugins that were used.

Even though the theme is what you’re most interested in, having information on the plugins might come in handy too – it could be a hint to how they created some functional elements (contact forms, popups, calendars, and many more) that you recognized and want in your own site.

However, be aware that some plugins are protected so you will most likely not get information on all of the site’s plugins.

What if I want to go with WordPress, but I haven’t found a theme that I like in a different website?

There are many places you can look for a theme in. But the question you’ll immediately face is: do I need a paid theme or a free theme? I’ve got my opinions on this one too.

The truth is, if you’re starting now, and you’re not looking for any specific advanced functionality, you’re better off starting with a free theme. Better to move to premium later down the road when you know what your needs are, than buy a premium theme that is a bad fit for you.

If you decide to go with a free theme, you will need to find it. Fortunately, there are plenty of websites that offer them, and we’ve got three of the best for you here.

1. The official WordPress theme directory

Just like the name says, this is WordPress’s own theme directory.

There are plenty of themes here, for just about any use, and when you click a theme you will get information on how many active installs it has, user reviews, and most importantly, when it was last updated.

This is important because a theme that was abandoned by its developers may cause all kinds of errors and bugs if it’s incompatible with the latest versions of WordPress, and because you probably won’t be able to get any support for it. Never build your website on an outdated theme.

2. ColorLib

ColorLib is another stunning place to find themes. You might expect a free theme to have questionable quality, but you won’t see that here. Their collection of free themes is small but of high quality.

The themes they offer have a modern design, which makes a good first impression. You will also find clean, well-written code, which comes in handy if you ever want to dive deeper and change things in the code. And, most importantly, their themes are responsive, which is vital in today’s internet.

3. ThemeForest

ThemeForest dates back to 2008, and is nowadays one of the most popular theme marketplaces. The reason for that is simple – developers get around 50 to 70 percent of each dollar that their theme generates, and users can find their ideal theme, from free ones to paid ones, with ease. There aren’t that many free themes, but here, too, the ones offered are good ones.

And another extra: ThemeIsle

If you’re looking for more variety in the free themes department, check out ThemeIsle. All the themes in the next section are from them.

Looking for a quick answer? Here are a few examples of great themes

There are plenty if you look online, but here are three that are flexible, and work well in a variety of environments.

Sydney – Business Theme

Sydney offers plenty of options, while remaining free. It gives you all the the basic necessities, and does them better than most other themes. It is highly customizable, which means that you can start off with it, and end up with a website unique to you.

Zerif Lite – Multipurpose Theme, eCommerce

Zerif Lite is a very good multipurpose theme, also jam packed with functionality. It is built on Bootstrap, and is compatible with WooCommerce, the most popular eCommerce plugin. The interface is clean and modern, and it’s both SEO friendly, and Retina ready.

Hestia – Corporate/Business

Hestia, a theme pretty close to Zerif in look, is a modern theme that can adapt to any corporate or business website, and it is great both visually and functionally. There are plenty of widgets available, and you’ll find things such as parallax sliders, photo galleries and travel maps. The theme is SEO-friendly, fully responsive, and Retina ready.

Next up? Choosing a color palette

Once you get the theme out of the way, you’ll need a color scheme/Palette. Even though this might sound simple, the truth is that you can play it safe and avoid colors, ending up with an uninspiring website, or go overboard and make something that looks like it came out of a horror film 🙂

Wesbites from the 1990’s had WAY too many colors in them. Plus… many other design oddities. The web used to be a crazier place.

Finding the balance is tricky, especially you’re a person who isn’t overly confident in their color coordination skills and abilities. You will need to have a color for your headline or logo, you will need complementary colors that work well with each other, and you’ll need to know how much to use them.

Some simple but powerful tips to color your website by:

  1. Your color theme needs to convey specific emotions. Think about how you want users to feel, and choose colors accordingly. Red, for example, conveys power and passion, while green will feel fresh and natural. Check this link for more.
  2. You shouldn’t go overboard with the number of colors. If you limit the number of colors you’ll get better results, because users prefer a simple color scheme. And, if you need some additional colors, opt for tints and shades of the ones you picked instead; you’d be surprised at the effect.
  3. And, last but not least, try the 60-30-10 rule. It gives colors balance, and is stunningly simple to use. Your dominant color gets 60% of the space, the secondary, complementary color gets 30% of the space, and those last 10% are left for the accent colors.

    Beautiful Example of an approximately 60-30-10 website.

These are all tips and tricks that can help you with choosing the appropriate palette, but there is more. Just like with the themes, there are tools that can give you pre-selected palettes and combinations for you to choose from. Let’s take a look at a few of them.

ColorLisa

ColorLisa is a tool that gives you an assortment of color paletters that are based on famous art pieces like the Mona Lisa! There is a fairly large list of artists, from various periods and genres. Every palette you can choose has a set of five colors that will work with each other well.

Color Palette Of The Mona Lisa

BrandColors

BrandColors is all in the name. Have you ever seen the logo/branding of a famous company and thought that their colors go really well with each other? Or maybe it’s a single-color logo, but you like the color and want to know the exact one? Regardless of which one it is, BrandColors has your back. The website offers the largest collection of official brand colors, and their respective HEX codes.

Klart.io

Klart.io’s Colors section is extremely simple. There isn’t much to it, you just head over to their website and start hitting your Spacebar. When you do, the two color palettes that are on your screen will shuffle. This means that you can just keep on hitting the Spacebar until you find a combination you truly like, and then you click it. This gets you to a screen where each color has its HEX code written inside.

Bonus: CSS Peeper

Use this chrome extension to quickly find out what colors every site you’re on uses. It’s super easy.

But, what if you still can’t decide on a color palette? We’ve got you covered:

Here are three websites with great color schemes

Tori’s Eye

Tori’s eye has a palette that focuses on green, as well as shades of green. It is a monochromatic theme, which works great due to the fact that a single shade of a color will undoubtedly work with another shade of the same color.

Tori’s Eye‘s color scheme as identified by CSS Peeper

Nordic Ruby

Nordic Ruby color scheme, as shown by CSS peeper.

When you have a neutral background, such as white or cream, it will look stunning once you put some very saturated colors up front. Nordic Ruby makes use of plum as the header’s main color, and wherever you have call to actions or headings, you can opt for light blue as a contrast.

Cheese Survival Kit

In this color palette, there is a yellow accent color that you can use sparingly, just like any other bright color is to be used, as well as the red color you could use for the logo. The contrasting colors make for a stunning visual impression.

The Cheese Survival Kit website.

Theme? Check. Colors? Check.
Fonts?

There’s a huge amount of fonts on the internet, but not all of them are a good fit for use on a website. A font needs to be:

So, are we suggesting that you use more than one font? Yes. Generally two is the magic number, and a good fit between the two fonts will really help make your website readable and attractive. Below are a few tools that can help you choose which ones to pair with each other.

FontPair

FontPair is a list of font pairs that mesh well together, and it uses Google Fonts, which means that it’s web safe and will render correctly on a variety of devices.

There are six categories you can choose from (serif/serif, serif/sans-serif, etc). Each category will take you to a pretty extensive list of combinations, and you can edit the content to check how the font pairing would look with your own content.

FontJoy

FontJoy is an interesting tool. It allows you to lock a font that you like, and easily experiment with switching other fonts around it. It also works with Google Fonts and allows you to change the weight of the fonts on the fly.

FontJoy’s How Does It Work page will teach you a bit of font pairings theory, and we found it very interesting.

FontJoy’s interface

This is a tool that is unlikely to replace a designer with years of experience. However, if you’re a beginner, or just someone who likes typography, it’s a great place to find font pairings that you might not have thought of originally.

It does take more of a critical eye than FontPair because it doesn’t tell you what to do, it shows you the results and you need to decide for yourself.

If you checked out the tools, and you still can’t decide on which fonts or font combinations to use, here are a few specific choices that work really well with each other. They’re versatile, and will look great in a variety of environments.

Here Are A Few Classic Font pairings (try them on FontJoy or on your website!):

  • Open Sans and Open Sans Condensed is a versatile pair that will work pretty much wherever you put it. It is a combination that is very easy to read even in large blocks of text, but it is striking enough to also work in headlines.
  • Droid Serif and Oswald is a pairing that is stunning for a professional environment: real estate agencies, law firms, etc.
  • Cantarell and Fjalla One is a great combination for a landing page. Or a blog. Or, actually, anything that has a lot of text and needs good subheadings in order to break up the content. Your choice.

Wrapping things up

There’s nothing wrong with some imitation! To be honest, it is the reality of how developers and designers on the internet work today: they look at websites for inspiration, use themes and templates (which are basically just someone else’s design) and harness the various tools that we covered here to create something awesome: a proven design with a personal twist.

If you keep at it your skillset and understanding will grow, and perhaps in the future you will be the one creating websites that people will copy or themes that other people will want to use.

All it really is is good design by way of the internet’s collective intelligence. Don’t shy away from it!