Taking too long? Close loading screen.
Awwwards
Creative party rockin once you have a killer site - brave new creative

5 Keys to a Killer site

It’s February 2018… where did the time go?! I feel like it was Christmas just yesterday. Admittedly, I have been a hiatus from blogging (the holiday season + some exciting new projects in the works!) but fear not cause we’re back, we’re live …and better than ever!

FYI

I’ve decided that these articles will be kept short and sweet. Cause, well, who wants to dig through a 10,000 word page of fluff to find one tidbit of information? Not me. Nor do I want to write said fluff.

So… What does it take to make a truly great website? Let’s dive in, shall we?

Key #5 Color

As I’ve investigated in previous articles, color can really make or break someone’s experience on your website and with your brand. You want the colors on your website to be both aesthetically pleasing and also true to what your brand represents. A knowledge of basic color theory and design principles can be helpful here, but if you find yourself a little confused about color, I’ve got you covered. If you don’t already have a set color scheme for your brand, you’ll want to create one ASAP. Consistency is key for a successful online presence, and the most important reason to have a set color palette is to ensure that you leave a ubiquitous and lasting impression on your users.

That bright aqua? Davids Tea. That striking blue/red combo? RedBull. That money-tree green? TD bank. Successful color schemes are instantly recognizable and an intricate part of your overall visual identity. Some top tips for a great website color palette:

(1) Go monochrome. Choose one color that you seriously love, and stick to it! Add shades of grey, black and white to vary your styles. This is a great approach if you aren’t so confident choosing colors and you want a dead simple, straightforward approach. However, the monochrome palette won’t be right for every person or brand! If you are a creative business owner, consider a more intricate palette to reflect your ingenuity and creative spirit.

(2) Complementary colors. When colors occupy opposite ends of the color spectrum, they lead people to consider a design visually appealing by establishing a happy medium the eye can reside in. Let’s go back to middle school art class 101. Blue and orange. Purple and yellow. Red and green. All complementary colors! There’s a myriad of options in between these, and tons of beautiful pairings to explore. Try out this tool and check ‘add complementary’ to play around with the possibilities of complementary colors.

(3) Contrast. Contrast is SO especially important on the web. Check out the examples below (images courtesy of envato.com)

Now, this doesn’t mean you should only use black #000 text on a white #fff background – in fact I’d steer you away from that. Your site can easily start to look clinical and barren if you only opt for this extremely minimalistic approach. Instead, just ensure that whatever color you choose for your body text is somewhere in the “very dark” range, and your background is in the “very light” range. A slightly plum-hued black can really add personality and warmth to otherwise lifeless text. Another pro-tip that I use quite often is simply to bump up the black from the basic #000 to something softer like #333. Just adding that little bit of lightness can take away some rigidity and make your site more personable. When in doubt, ask yourself, is this readable and legible?

(4) Make your color life easier. I’ve compiled this nifty guide of some pre-built color schemes you can use on your site. Totally free and all yours! Download that here→

 

Key #4 Negative Space

Next up, negative space. It’s crazy how many people don’t stop to consider the impact of empty space on the readability and experience of their site.  Placing content on your pages can be tough if you don’t know what the heck padding and margin are, and what line height can do for your site’s legibility. Let’s go over some tips about negative space.

Firstly, through my years as a professional artist, my eyes have been trained to examine both the positive shapes and negative shapes in any painting, screen, or real life experience. For others, I realize this may not be so intuitive. Next time you’re perusing a site you like, look really hard at the areas not populated by content. Notice how much breathing room each element on the page has. A general rule of thumb to follow is that the space taken up by your content should match the negative space surrounding it. More negative space on a page will give the content the sense that its floating (Think Apple’s homepage). Less negative space will squeeze information together and feel more loaded (Like The New York Times). One is not better than the other, you’ll have to consider what the purpose of your site is and place your content accordingly. Some sites benefit from more white space, while others do well with less.

The next point to remember, especially if your site is text-heavy, line-height is of ultra importance. What is line height? Just how it sounds, it’s the space between your lines of text. My personal preference is to always set line-height to around 130% of the font size. You want enough space between lines so that your content isn’t cramped, but not so much space that each sentence looks like its own new paragraph. Your preference will vary, you could go as high as 140% or as low as 120%.

Last note about negative space. Have fun with it!! Playing around with different sizes of content and asymmetrical layouts can add flair to your site. When I was designing the Brave new Creative homepage, I left PLENTY of negative space so that the headline and animation could really shine. Symmetry is always going to be pleasing to the eye, but can quickly become boring. And we detest boring websites! Try to add some visual interest by structuring your elements creatively in the space of the page!

 

Key #3 Quality Images

This one goes without saying. For the love Warhol, please do not use low quality, pixelated images on your site. And on the flip side, don’t upload insanely hi res images either! Your photos should be formatted to where they will appear, not too large and not too small. If you put a gallery of 3800 x 3000px, 300dpi images on your portfolio page, what do you think will happen? That sucker is going to load slower than a three-toed sloth can cross the road.

Here’s the run-down. On the web, your images need to be 72 dpi. I learnt this the hard way when I was first starting out. I thought ‘bigger is better’ right? It’ll make them super hyper crisp and beautiful, right? Wrong! Most monitors are constrained by a 72-144 pixel per inch limitation. That means that if you upload a 300dpi image, you’re just exasperating your server and not getting any better quality image.

Now that that’s clear, remember to save your images in appropriate dimensions for where they will be used. For example, the large cover image for this blog post is saved at 2440px wide, 72dpi. The image quality can be set low (if you’re using Photoshop to format images, it will pop up with an image quality slider: I usually use 5/10) and try to limit the file size to 500KB for best results.

 

Key #2 Typography

This is one of my personal favourites, and arguably the most important factor in the design of your site. Typography can say a lot about who you are and what you stand for. There are so many fonts out there, you have to explore and discover which one resonates with you and your brand. If you want to stand out, steer away from the default browser fonts. Google fonts are incredibly easy to use on your website, explore those here. It’s important to choose a font that resonates with your brand and content.

For instance, the modern font…

 

The sans serif font…

 

If you want people to feel that your business is reliable…

 

This is a great resource to discover different font pairing you can use on your site. And if you need more in depth practice designing with type, check out this fun kerning game to level-up your typography skills.

 

Key #1 Content!

Last and most importantly, your site is only as good as the content it serves. When you have killer content that your audience resonates with, a killer design will follow suit naturally. Stay true to your creative voice and build your business or project around your loyal users and you’ll be just fine.

 

Sources: https://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers–webdesign-1437https://www.crazyegg.com/blog/psychology-of-fonts-infographic/

    
Did you like this article?

Receive our updates, promotions and resources about design and art in your inbox!

Invalid email address
We never spam. You can unsubscribe at any time.

Share your thoughts