A website can be the beating heart of many modern businesses. And how audiences engage with your website is often a make-or-break factor for your success nowadays. That’s why designing a website that not only functions well but looks good should be a top priority.

But designing a beautiful website is no easy task. That’s why we’ve put together this epic resource to help you. 

Design basics

Beauty is in the eye of the beholder but there are many guiding principles designers should stick to. Without these, you can find yourself fighting an uphill battle. On the flip side, employing these strategies can make your website look professional, and keep them functional.

Yes, we hear ya! Rules are made to be broken, but it’s important to at least understand the rules before you do go breaking them.

Design with purpose

Yes, the first point on this resource isn’t necessarily about pretty-fying your website itself, but it’s possible one of the most important points.

All websites have a purpose. Good websites that perform well (and websites do need to perform well) are all built with this purpose at its core. Is your website where people come to to read blogs? Or to buy a product? Or to interact with others? Make sure however you design the website, it all goes to fulfilling this purpose.

Stick to the basics

Think back to the 2000’s and those ‘overdone MySpace pages!’…

Out-of-control MySpace pages were definitely one of the reasons the platform became less popular over the years. Auto-playing music, spangly cursors, and unnecessary use of Flash made pages garish to look at and impossible to use. The biggest problem though? People crammed as many of these gimmicks in if only for one reason - because they could.

These little extras dramatically slow down the website, increase the chances of bugs and crashes, and damage the user experience. All these problems are now heavily penalised nowadays.

On the other side of the spectrum is Apple. Apple’s brutal focus on beautiful minimalism, a philosophy that’s reflected in everything from their product lines to their product designs, is one of their biggest drivers of success. Steve Jobs deliberately eschewed from complicating things, not wanting anything to distract from the core purpose of a device. This obsession with usability focused simplicity meant anyone can pick up an Apple product and know how to use it straight away.

Websites need to have this focus. According to research, users only take two-tenths of a second to form a first impression on your website, and only 2.6 seconds for this first-impression to solidify. Users also expect websites to load in 2 seconds or less - page abandonment rates increase dramatically after even just a few seconds.

Processing times also don’t help your website sell things; a 1-second delay can mean a 7% dip in conversions. For a website that’s making $100,000 a day, this 1-second delay can cost the company up to $2.5 million a year. The moral of the story? Every extra second counts, so any gimmicks that slow down your website or make it harder for a user to navigate needs to go.

Make things readable and responsive

Cramped text, poor font choices (Papyrus and cursive fonts, I’m looking at you) and stuff that doesn’t scale according to screen size, can seriously mar the user experience. Users have come to expect not having to squint or do double takes in order to process the text on your page. In fact, a study shows visitors will only read about 20% - 28% of the words on your website, so you have to make sure they’re getting the most out of what they do read.

While UX/UI designers will quote very specific characters-per-line and padding/margin rules down to the pixel, there are a few simple things you should try that will go a long way to making your website look neat and orderly.

  • Don’t go overboard with fonts. Stick to a maximum of two fonts for the entire website - one for headings and a different one for your body text.
  • Use fonts that are designed for readability. Creative fonts often come at the expense of readability, so if in doubt, stick to web-based fonts, such as Google Fonts.
  • Make sure your text stands out on the page. Contrast is the key to readability - keep your fonts in colours that contrast directly with the background. Also try to stay away from text backgrounds that are busy, and that can distract away from the text.
  • PS - Papyrus is the new Comic Sans. Stay away from both.

Have a clear hierarchy for information

Information should be displayed in order of importance. Readers should know how page elements relate to one another, and which piece of information is more important than another by purely glancing at the page. Having this clear hierarchy of information helps with how users navigate your website.

We always think it’s easy to navigate and find information on our own sites, but a stranger might have a completely different experience. That’s why is important to visually guide users through your website, making sure they know where to go next.

Remember: you might not be the best judge

Don’t get too attached to your own design before you find out what strangers think of it. After all, they’re going to be the ones visiting your website so the reality is, what they say goes.

It’s important to consistently test your designs with real people. Website designs are more than fancy graphics, pretty pictures and neat fonts - you have to create the right experience, and you can only create the right experience if you open up your website for testing, feedback and improvement.

It’s all about the experience

Designing a beautiful website is not just about how neat the fonts are, or how much the colours pop. The most important thing is that users have a good experience on your website, which is why companies are spending more and more money on UX design.

You need to make users feel good to keep them engaged on your website. UX design looks at a customer’s journey from beginning-to-end, and is a data-backed, testing focused, scientific way of creating a ‘feel-good’ experience. 

Getting started

You’ve got the rules. You understand why they exist, and how even the simplest of these conventions can dramatically improve how your website looks and functions. But how do you get started? Here are some quick tips.

Prioritize

For many developers, particularly ones just starting off, getting a website to look good can be one of their biggest hang-ups. In fact, we see many students get stuck because they can’t choose the right colours, fonts or images to use.

Think about why users come to your website, what they’re looking for, and what you want them to do. Make sure your website is first and foremost easy to use and easy to navigate.

Only when you have these basics down pat, can you start refining the details like colours, pictures and fonts.

Start with paper and pen

Mock-ups are an important part of any web development workflow. It’s near impossible to design and code at the same time, so developers will always refer to a mock-up design as they code.

But before you touch a computer, it’s smart to just start with paper and pen. Paper-and-pen mockups usually just consist of squares, circles and lines to represent sections, buttons and text. Because you’re not creating anything high-fidelity, it’ll help you focus on the bigger picture, and to iterate with speed. It’s the fastest way to see and to show others how your website might look like.

So break out your markers and scrap pieces of paper, and start drawing! Also, don’t neglect showing others your designs, no matter how ugly they are. You might be surprised as to how helpful early feedback might be.

Create style tiles

Sitting halfway between a mood-board and a high-fidelity vector mock-up, style tiles are especially helpful if you’re working with clients. They’re quick ways to reference font-sets and colour palettes as you work, and are flexible representations of the final product, often saving you from having to mock-up every single page.

Check out this awesome blog to find our more about style tiles!

Inspiration

We all need inspiration from time-to-time. Whether it’s because we’ve hit a creative roadblock, or just want to try something new, reaching out to our muses is extremely important for our learning and creative process.

But inspiration isn’t always easy to come by, so that’s why we’ve put together this list of resources for you to check out. 

Galleries

Here are some awesome websites that showcase work by other people.

Behance

One of the most popular websites for sharing and showcasing design-related work, Behance has become the go-to place for some of the world’s most talented designers. Acting as a digital portfolio, Behance is a great place to find inspiration, as not only will you find website designs of every kind, you’ll also be able to browse through other (equally important) topics, such as branding, logo designs, fonts and more, often all wrapped-up together in design kits.

Dribbble

Functioning similarly to Behance, Dribbble is also a place where designers showcase their work. However, this designer community is invite-only, and is more akin to a micro-blogging service, where designers can display snapshots of their daily work. It’s a great place to also receive feedback on your own work if you decide to become a publisher, so you can keep improving, no matter where you’re at in your project.

Site Inspire

Site Inspire is a website that showcases some of the best in web designs from around the world. Driven by user submissions, Site Inspire displays a variety of web designs, usually focusing on designs that push the boundaries of what’s possible. Some of the websites are more artistic than functional, but it’s always good to see.

CalltoIdea

CalltoIdea is a website that lets you browse through specific website elements. Looking for creative 404 pages, a better way to present your forms, or build a more functional footer? CalltoIdea lets you simply pick the element and then browse through hundreds of different examples.

BWG

Best Website Gallery, aka BWG, is built and maintained by David Hellmann - and showcases some extraordinarily beautiful websites. David Hellmann himself is an amazing developer and designer, so it’s definitely worth checking out his portfolio!

CSS Nectar

CSS Nectar is a gallery for top website designs. You can submit and nominate website design. The top websites get awarded CSS Nectar ribbons, which you can then display proudly on your website. Feeling confident in your own design and coding skills? Submit your own website and let the world nominate send in nominations!

Pinterest

One of the fastest growing social media networks, Pinterest definitely shouldn’t be underestimated when it comes to design inspiration. There’s a wealth of inspiration to be found there in whatever style you’re gunning for.

One of the best things about Pinterest is being able to create boards so you can save your inspiration to come back to later. You can use Pinterest boards to create mood boards, or simply to save particular elements you really like. It’s the best way to keep inspiration you can have all in one place.

Blogs + websites

Sometimes it’s important to have a little more substance than just eye-candy. We’ve compiled some of the best places to brush up on your knowledge.

Smashing Magazine

One of the leading authorities on web development and design, Smashing Magazine is a sprawling website packed full of information on everything web.

They comprehensively cover anything and everything that web designers and developers should know, with articles on everything from technical coding to UI design. They also release weekly reading lists for all designers and developers - must-have knowledge for anyone working in the field!

Creative Bloq

Creative Bloq is a website focused on design, UX and UI design. It’s a good resource to keep yourself clued up on anything design-related. They often also host giveaways and discounts on awesome design-related stuff, so make sure you sign up for their newsletter.

Awwwards

Awwwards are industry leaders in website design. Receiving a design reward from these guys is a big deal. With case studies, design competitions, downloadable resources and more,  Awwwards the go-to place for design guidance.

Designmodo

Featuring tutorials, templates, design kits and more, Designmodo is a great hub to check out, especially if you’re building a Wordpress website. You’ll get plenty of tips and guides on design, as well as access to plenty of freebies for whatever framework you’re working with.

Abduzeedo

Famous for their daily design inspirations, Abduzeedo is a great resource for all kinds of graphics design, so it’s a great place to check out if your design inclinations extend beyond code into CGI, motion graphics and more.

LittleBigDetails

It’s the little details that count. LittleBigDetails, like Abduzeedo, is a good place to come to if you’re looking for daily inspiration. However, unlike Abduzeedo, LittleBigDetails features particular website details. Tiny animations, contextually aware buttons and other thoughtful, tiny details spotted in the wild get the nod here. While not necessarily everything on the website will make your jaw drop, it does a great job at highlighting how even the smallest details count.

Playgrounds

Sometimes it’s not enough to just see. Sometimes, you have to do. That’s where playgrounds come in handy. Playgrounds are usually web-based apps that allow you to type and trial bits of live code, without you having to run complicated command scripts, make branches in Github and keep hitting the refresh button in your browser.

Good playgrounds often allow you to share snippets of code with others, allowing you to simply copy-and-paste bits-and-pieces to your website, or to just see what code is capable of doing, even if none of it is remotely practical. There are heaps out there, all with similar functionality, so we’ve just listed a few of the most popular.

CodePen

CodePen is a great playground environment to muck around with HTML, CSS and Javascript simultaneously. There, you can create snippets of code called ‘Pens’.

Codepen is a great place to find inspiration and source website elements. Want to make a button bounce but not too sure how you’re going to do it (or maybe you’re just too lazy to do it yourself)? You’ll probably find a pen for that. Don’t believe you can make a bow-and-arrow game with just HTML/CSS and Javascript? Then check this pen out- https://codepen.io/pyrografix/pen/qrqpJN!

JS Fiddle

Another leading sandbox playground, JS Fiddle is very similar to CodePen, except ‘Pens’ are now called ‘Fiddles’. Functionality is very similar, so it comes down to you and your personal preferences for UI design.

Bits and Bobs

uiGradients

Gradient colours are all the rage now, but sometimes it’s hard to pick the perfect one for your website. uiGradients handpicks hundreds of different gradients from developers and designers to inspire you. Simply flick through, pick out your colours, and then grab the hex codes for that perfect background or overlay.

CodeMyUI

Need something a little extra to spice up your website? CodeMyUI features all kinds of website bits-and-bobs, like animations, micro-interactions, icons and more that’ll give your site a bit more flavour. The best thing? Each element you see will come with it’s own Codepen embed, so you can pick-and-choose anything you like.

Adobe Colour Wheel

Website colours are exceedingly important to your website designs, helping you strengthen your branding, guide your users, and reinforce your information hierarchy.

But not everyone is well-versed in colour theory, which is where the Adobe Colour Wheel comes into play.

The Adobe Colour Wheel helps you pick colours that work well together using various kinds of colour rules. Working off any base colour you nominate, the wheel will then select up to 4 other colours that complement that base colour. By using these set rules, you know you’ll never go wrong.

Don’t even have a base colour yet? You can also explore colour sets other users have created to get you started.

Tools

We all need the right tools to work. While everyone will have their preferred vector drawing softwares and text editors, we’ve just listed a few simple applications you can add to your workflow that will hopefully speed up the way you work!

Sketch

Sketch is one of the most popular tools used by designers to mock-up websites. It’s a lightweight, easy-to-use tool that helps you mock-up and tweak website designs before you get into the nitty-gritty.

The advantage of Sketch is that it has been built with web design in mind, which means you can enjoy pre-built design templates and kits straight out of the box. All this means you can design faster and more accurately, and get building much faster.

Canva

Canva is an online vector based graphic design software. For those who don’t use the Adobe suite (or just want something whipped up quickly), Canva is an absolute boon. With thousands of templates, examples, stock photos, icons and more, Canva helps you design graphics quickly for whatever digital platform you need.

Canva also has an extensive library of resources for you to browse through. From web design, to colour theory, and more, there’s something for everyone, no matter how experienced in design you are.

## #

Where to Get Help

Everyone needs some extra help sometimes. Maybe you need a personalised solution. Sometimes the design is too hard, or too time-consuming. In times like this, it’s more efficient to enlist the help of people who make it their lives to create beautiful things.

Here is a list of websites where you can go to find and hire high-quality help!

#### #

99designs

99designs is one of the leading design marketplaces. There you can put up a brief where freelancers can submit designs and proposals for your approval. 99designs will also help you manage time sheets and payments, meaning you don’t have to worry about complex payroll and time-keeping systems.

#### #

Upwork

Upwork is freelancer marketplace. Unlike 99designs, which is purely design-focused, you’ll find a much wider range of freelancers on this platform. It’s a good place to look for help of all kinds, from virtual assistants, to developers who can bring your designs to life.

### #

Behance and Dribbble

Hopefully you remember these two websites from our inspiration section above!

Serving as online portfolios for many designers, developers and agencies, Behance and Dribbble are great places to search for talent.

The great thing is you’ll be able to search for designers by style and skill set, and view their portfolios first before contacting them. That means you can proactively find someone who’s potentially a good fit right from the beginning (instead of vetting hundreds of applications).

There you have it - our epic resource to building beautiful websites! We hope it helps you craft the website that you want. The key takeaways we’d like you to take away from this guide are:

  • The design should be rooted in creating the right experience for your users.  First and foremost, make sure your website is easy-to-use and functional
  • Look at the bigger picture of your website before you start getting into the nitty-gritty! Plan the general layout first with paper and pen.
  • Keep your finger on the pulse of design trends. Technological trends mean design is always evolving, and with the general push for better usability and increasing amounts of user research, you’ll always new things to inspire you.

Happy designing!