The Epic Resource To Building Beautiful Websites

July 04, 2017

Josh Li

Digital Marketer at Institute of Code

A website is often the beating heart of many modern businesses. In fact, 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 also looks good is often a business’s top priority.

But designing a beautiful website is no easy task. That’s why we’ve put together this epic resource to help you build a beautiful website. This resource will provide you with a bunch of design basics that’ll help you lay the right foundations for your website. We’ve also have compiled a huge list of blogs, websites and other resources so you can get inspired by some of the world’s top designers and most innovative websites, as well as places where you can find help.

Designing websites could be a fun, yet daunting process

A website is often the beating heart of many modern businesses. In fact, 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 also looks good is often a business’s top priority.

But designing a beautiful website is no easy task. That’s why we’ve put together this epic resource to help you build a beautiful website. This resource will provide you with a bunch of design basics that’ll help you lay the right foundations for your website. We’ve also have compiled a huge list of blogs, websites and other resources so you can get inspired by some of the world’s top designers and most innovative websites, as well as places where you can find help.

Design Basics

Beauty is in the eye of the beholder, but there are many guiding principles designers should stick to. Without these principles, 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

Now think back to the 2000’s. What was one of the most cringe-worthy characteristics about it?

If the first thought that came to mind was, ‘overdone MySpace pages!’, you’re definitely not alone.

Although there probably isn’t much data to back this statement up, 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 the 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.

Have a clear hierarchy for information

The importance of information should be displayed visually. 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’ll 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 break down your information into a clear order, visually guiding users through our website and making sure they know where to go next.

Remember: you might not be the best judge

It’s easy to get attached to our own designs. This is where we make the biggest mistake: to assume what we like is the best choice to make.

Strangers are going to be the ones visiting your website, so the reality is, what they say goes.

It’s important therefore 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 your website up for testing, feedback and improvements.

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 time on your website.

As we mentioned in the above paragraph, it’s about creating the right experience. And while this sounds like a something a very snobby art gallery directory might say, User Experience design (UX design) is something companies are investing in more and more.

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 this ‘feel-good’ experience. That’s why it’s important to shift your focus from purely designing a good looking website, to a website that creates a good user 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 on how you can lay the right foundations for a workflow that gets you started on the right foot.

First: Prioritise

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

In human psychology, Abraham Maslow proposed ‘A hierarchy of needs’, where in order for a person to be happy and successful, they need to have basic requirements fulfilled, such as feeling safe, having food, and being healthy.

This hierarchy of needs also applies to design. Before a website can become aesthetically pleasing, basic functional requirements have to be fulfilled.

So make sure before you start making design decisions, prioritise your design by looking at the bigger picture. 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, easy-to-navigate, and it’s straight-forward to find the right information.

Only when you have these basics down pat, then 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 nigh-impossible to design and code at the same time, so developers will always refer to a mocked-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 processes.

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. From simple galleries for eye-candy to interactive playgrounds, make sure to bookmark this blog so you can always come back here when you’re in need for more ideas. With this list, you’ll never have to look hard to be inspired.

#

Galleries

The browsing type? Just want to look at pretty things? 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 together in design kits.

#

Dribbble

Functioning similarly to Behance, Dribbble is also a place where designers showcase their work. However, the 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 what’s possible, even if they don’t provide a conventional user experience.

#

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

Standing for Best Website Gallery, BWG is built and maintained by one man - David Hellmann. Starting off (and remaining) as his own inspiration gallery, BWG 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 head to if you’re not just after inspiration, but to brush up on your knowledge too!

#

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 off on anything that web designers and developers should know, with numerous 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, whose interests mainly lie beyond code, 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:

Happy designing!


Written by: Josh Li

Digital Marketer at Institute of Code