Get Your Website’s Secret Design Code: Template Included
You know how some websites just look... good.
You tinker and tinker, but nothing you do achieves that look of professionalism.
It's like there's some design secret no one's letting you in on. And the truth is... there kind of is. And it's much simpler than you think.
Consistency & Simplicity - Boring But Effective!
The design code outlined in the video above is a set of values you need to define and stick to on your website. The magic in the design code doesn't come from choosing the exact right shade of purple, or the cutest possible cursive for your headlines. It comes from the beauty of simplicity.
The fewer conflicting elements you have on the page, the more likely it is to look neat and elegant. While this lacks the allure of new age, cutting edge web design, for those of us without a design degree, 'neat and elegant' is a pretty good place to be.
The Design Code in Action
All we've done for today's remake is apply the design code. No, we weren't just feeling lazy. We just wanted to show you how dramatic an impact these simple principles could make.
Home Pro Circle's Before and After
Every website's design code will be different. How do you decide on the values? We'll take a look at the code we created for Home Pro Circle, and show you how you can choose the right code for your own website.
It has been brought to our attention that the original source for the funnel image used on the Home Pro Circle website is from Spiral Marketing. While we are not endorsing, are related to or in any way connected with Home Pro Circle, we want to make sure to give credit where credit is due for this image.
Choose Exact Color Codes for Your Site's Color Palette
- Key Color 1:
- Key Color 2 (optional):
- Shade of Black:
- Shade of White:
- Additional Background Shade (optional):
- Additional Background Shade (optional):
Home Pro Circle's New Color Palette
Key Color 1: #009A00
Key Color 2: #007373
Shade of Black: #302E3B
Shade of White: #EFEFEF
Additional Background Shade: #151228
Additional Background Shade: #FFFFFF
Some helpful tools when creating your own color palette:
- Paletton which will give your complementing colors based on a color code entered.
- ColorPick Eyedropper, a Chrome extension, tells you the exact color code of anything you click on within your browser. Use this to find out the exact codes of the colors you're using on your site.
- Pictaculous will give you a color palette based on an image you upload.
Choose Your Site’s Two Content Widths
Home Pro Circle's New Content Widths
- Wide: 1100px
- Narrow: 960px
If you're unsure what content widths to go with, the two above are good choices for most websites.
An easy way to set this up with Thrive Architect is to use maximum content widths (see 3.20 of Shane's Quick Start tutorial for details on how to do this). You can apply maximum content widths to your entire page, background sections and content boxes.
Choose Your Site’s Main Font
- Secondary (optional):
Home Pro Circle's New Fonts
- Primary: Source Sans Pro
- Secondary (used on the buttons): Arial
If you like a font on another website, use the Chrome plugin WhatFont to find out what it is.
You can use any Google Font within Thrive Architect. Search through their directory for a font you like. You can even sort the fonts based on various criteria.
Applying the Code to Your Site
Create a design code for your own website/s. Download the fill-able design code worksheet below.
GET THE DESIGN CODE WORKSHEET
An interactive PDF to create you site's own code!
Your cheat sheet for good design on your site. Reference it when you're building pages, or send it to your developer so all their changes fit the look of your site...
Alternatively, copy/paste the code from this article to keep it in any format you like.
Make sure you save a design code for each of your websites, so you can refer back to it every time you make changes.
If you're using Thrive Architect, you're in luck. Applying your new design code should take less than 30 minutes:
Will you be creating a new design code for your website? How you found any other useful design tips you'd like to share?
Let us know in the comments below!