The One Thing That Will Take Your Website To the Next Level and How to Do It

Have you ever opened a website and immediately clicked off it again? OF COURSE YOU HAVE. When a site’s design is unpleasant, you’re outta there faster than Cersei guzzles wine on GOT. In a world where everyone is vying for eyeballs, poorly designed sites are setting themselves up for failure.

Never fear, I’ve GOT YOU. As a graphic designer, I’ve rebranded sites for clients using Squarespace (my preferred platform of choice), helping them to optimize the design of their site for their brand and business. I’ve condensed my top tips for creating a beautiful and functional site that any beginner can follow. Plus, we’re offering our readers 10% off your first Squarespace purchase with coupon code “EVERYGIRL18”. Score. So grab your notebook (or keyboard) and let’s do this.

 

Start with a moodboard

The first thing I do when starting a new graphic design project is create a moodboard — basically a blueprint of where I want the design to go. For reference, here’s an example of a moodboard I created for a project last year. Moodboards are an essential tool in defining your brand’s aesthetic — the look you want to achieve, the feeling you want to evoke, the specific elements that call to you. Did you ever cut out photos from a magazine and save them in piles like curated scrapbooks? *Sigh* Oh, how I miss the days of analog moodboarding.

If you’re not a graphic designer, you can still quickly and easily create moodboards using Pinterest. Secret boards are a fantastic tool for curating imagery — start by pinning anything and everything that catches your eye. Then, go back through your new board and start eliminating things that aren’t exactly right. Don’t feel like you need to limit yourself to images that include fonts or “brand” elements — pin anything that catches your eye! Think about how the images make you feel. What do you want your brand to speak to your customers or audience? After you’ve curated your board, you’ll be left with a reference guide for the look and feel of your brand that you can revisit again and again while setting up your website.

 

https://www.pinterest.com/kellyetz/website-color-moodboard/

 

 

Choose complimentary fonts + colors and edit yourself when necessary

 

Fonts

 

I know it can be tempting to play with LOTS of fonts (Squarespace has oodles to choose from) when you’re setting up your site, but step away from the keyboard and listen up for a sec. Too many fonts or fonts that are all similar in design will be confusing to the eye and make it stressful or unpleasant for clients or customers to look at your site. Stressed clients and customers are not ideal when you’re thinking in terms of bounce rate, returning viewers, and eyeballs you want to stay on your site long enough to buy something (at least).

As a designer, this is one of the most common mistakes I see on websites or collateral branding material (business cards, letterhead, etc.), but the good news is it’s an easy fix when you remember these tips:

 

  • Choose three fonts AT MOST. Edit, people! Luckily, Squarespace makes this easy by creating consistent fonts across your site. Choose fonts for Heading 1, Heading 2, Heading 3, and Paragraph (body text) and Squarespace will automatically populate those fonts wherever you use headings or body text on your site. WIN.

 

  • Try choosing a serif (a typeface with flourishes at the end of letters, like Times New Roman) and a san serif (a typeface with no flourishes like Open Sans) that are complimentary. Or, go with two san serifs or two serifs that are different enough for the eye to distinguish. Using two different styles of fonts as your headings and sub-headings will create a pleasing juxtaposition on your site, making it easier to read and giving it a professional polish. Below, I’ve made you this handy guide of some of my favorite font combos — all available on Squarespace — to get you started. You’re welcome. (Be sure to pin it for later!)

 

  • Be careful with script fonts. Over-using them is VERY easy to do — a little goes a long way.

 

  • Never use Comic Sans. You’re better than that.

 

 

 

Color

 

Next up is colors — the fun part! Take a look back at your moodboard (told you it would come in handy) and pull out the colors that occur over and over again. Once you have these colors, consider color psychology — I love this guide from Spruce Rd. Which colors match the keywords you associate with your brand? If your brand is all about harmony and trust, consider shades of blue. If you’re more about energy and positivity, try yellows. Refine your shades until you hit on a group — I’d say five or six at most — that you like. Make sure you save the specific colors for future use — here’s a great tool on finding the hex code of a color from an image if you don’t have any design software like Photoshop or Illustrator.

You can easily copy a hex code into Squarespace to use that exact color on your site — here’s how:

 

 

Understand hierarchy + balance

Remember that infamous Oscars snafu? All of that could have been avoided with hierarchy — that’s how ~critical~ it can be to a design.

Source: Good

Creating hierarchy within your site prioritizes the text you want your viewers to see first — think bold calls to action, product titles, etc. Using hierarchy ranks your content and creates a path for a viewer’s eye to travel — so they can follow the story of your site the way you intend it to be seen. Here is an example of how I created hierarchy on one of my Squarespace sites:

Balance is equally as important as hierarchy, as it anchors your site and helps make it more pleasant to the eye — key to retaining viewers. Each element on your page has a certain “weight” that should be balanced. Dark colors and thicker lines are heavier, lighter colors and fainter lines are lighter. Here’s an example of how I created balance on one of my Squarespace sites:

 

 

Be strategic with white space

I LOVE WHITE SPACE. Whenever someone asks me to give my design opinion on something they’ve created themselves, my inevitable advice is “more white space!” First thing to note is that by white space, designers mean negative space, or the absence of design elements, text, or images. The space doesn’t necessarily have to be white to qualify.

Think of it as giving your elements room to breathe. Just as you wouldn’t use a photo with half of the top of your head cut off, you don’t want to add text and images to your site when they are too close together — it will come off as cramped and uncomfortable to the eye. More white space = a cleaner, more modern design. I love the “spacer” tool in Squarespace for easily creating white space around your elements when you need to. Here’s an example:

 

 

Create consistent graphics

Consistency is key in creating a site that flows smoothly from element to element, page to page. Utilizing the same fonts, colors, and images across your website will create a streamlined design — and be easier to produce in the long run. Win, win.

When making your site, or after your site is completed, you might need to make graphics — such as pinnable blog post images, downloadable checklists, Instagram posts, etc. — to integrate seamlessly with your website design. Creating templates for these graphics will speed up your day to day workflow and ensure your site and social channels always look professional. If you don’t have access to Photoshop or Illustrator, I recommend using either Powerpoint or Canva to create your graphics, both of which allow you to save templates.

 

Here’s a good starting template for a pinnable blog post graphic:

 

And here’s a good starting template for an Instagram text graphic:

 

 

Finally, simple does not mean simplistic

Remember that a beautiful site doesn’t have to be “full” of elements — in fact, very few beautiful sites these days are. Minimal sites are pleasing to the eye and often quicker/easier for beginners to produce. Squarespace makes it easy with lots of pre-made templates that are both beautifully minimal and functional. Bing bang boom done.

Don’t forget to use the coupon code “EVERYGIRL18” for 10% off your first Squarespace purchase!

 

Do you have questions about the design of your site? Share in the comments below and our graphic designer will provide her feedback!

 

This post was in partnership with Squarespace, but all of the opinions within are those of The Everygirl editorial board.

  • I love this! I used Wix to create my website, and I had to redo it after the first month because something was just not right. I realized I had designed it to look good to others, but it just wasn’t *me*. I wish I had seen your font combination graphic before I started! Playfair Display is definitely one of my favorites.

    http://euhemerist.com

  • Brooke

    Love your blog, I stumbled across it from another blog raving (funny how the world of blogging is one giant tangle of recommendations) and coincidentally the first post I read (this one) is exactly what I needed. I’ve been blogging for some time now but *literally* today I decided to redesign my site. I’m using a blog template created by someone on Etsy and I love the simplicity of it so much but I’m stuck on wanting to change around the fonts and font sizes and not being able to do so. Any recommendations for this? I’m using WordPress right now and my website host (and good friend) is talking about getting away from WordPress by the end of the year and working strictly from coding, which will be nice for customization… I have no clue where I’m going with this BUT I’d love to know what a professional eye thinks of my site look/layout. Either way, loving the blog!

    http://www.happinessandhairpins.com

    • Hi Brooke! I think you’re doing great so far — I love the minimal look and layout of your site, it’s very easy to navigate. I have a few tips:
      – I would make sure you categorize all your blog posts, so people can find them when searching, always a good thing 🙂
      – I would add your site URL or logo to your images — get that pinnable factor going and encourage people back to your site.
      – For fonts, I would be careful on images — keep it simple and clean and go with one font, to make it easier for the eye to follow
      – I also think finding one or two colors and adding them to your site/graphics consistently could help tie everything together

      I hope this helped! 🙂

  • Kylee Lessard

    I’d love some design feedback on my blog! I also use squarespace, yet don’t feel like I’ve stumbled upon the perfect template for my content/concept. Would you mind weighing in on http://www.ablueskymind.com? My goal is to spread the word about easy ways to make positive psychology a lifestyle trough travel books food and movement ☺️

    • Hi Kylee!
      I love the minimalistic font choices and general layout of your blog — it makes reading through so much easier! I would suggest trying out a sidebar next to the posts, where you can introduce yourself, it’s nice to have that right on the homepage, so people don’t have to go looking for it.
      I’d also suggest focusing on creating pinnable graphics as feature images for your site, so that you can draw people in from pinterest and other social sites!
      Hope this helps 🙂

  • This is such a helpful article! I’ve been following the Everygirl and has become such an inspiration. <3

  • Nikki Laraja

    Awesome post, thanks so much for sharing!

    http://www.shopthecoconutroom.com

  • Ola Broom

    Thank you for this informative article. I had been contemplating a switch to WordPress. But had fallen in love with Squarespace. Now I’m completely committed to a move to this platform.