Whether you’re looking for a new career in website design or you are just eager to learn more about the industry, the first step is to learn the basics.
Website design can be an incredibly rewarding career if you choose to go down that path. By knowing the basics, you can also be in a better position when it comes to talking with your own web agency about your new website – or just understanding what they’re going on about!
So, without further ado, let us give you our website design 101. This is the beginner’s guide to web design, including all of the basics and the terminology you need to get started.
One of the hottest phrases in website design around 5-6 years ago was this; responsive design. It’s a really simple concept. It means to design for mobile, tablet and desktop devices in one website. The website will work across all types of devices and will scale to whichever automatically. Hence the name, it responds to whichever screen size it is loaded on.
You’ll work to ‘break points’, which are essentially the points at which a site/design flicks from one size to another (e.g. from mobile portrait to mobile landscape).
Following on from the previous point, most websites are now designed from a mobile-first perspective. That means that your website should be designed in mobile first so that the experience for users on those devices is optimised. This is because the highest percentage of users on most websites are now viewing on mobile.
Historically, this was the other way around. Websites would be designed for desktop with smaller, simplified versions for mobile and tablet as the website reduced down in size. Now, the optimal experience has to be on mobile.
A wireframe, or wireframing, is usually produced by a web designer at the outset of a new project. It’s a very simple plan of where each element will sit on a website. Again, you’ll need to do this for at least three main devices, as noted above.
Margins, Alignment & Rules
Whenever you are designing a website, you will need to very accurately plot where everything sits. From the logo and navigation through to content and calls to action – everything must be aligned perfectly.
The way that this will accurately be done by your website designer is by using alignment, margins and rules when working up a web design.
Most companies will have some sort of brand guidelines and every business should at least have its own brand. Your website design is going to need to adhere to, and follow, any brand guidelines which the company has.
Even when no strict brand guide exists, still pick carefully when it comes to colours to ensure that they complement the brand. Pick tones and shades from the company logo and maintain the same kind of style. For example, a simple black and white logo should have a website design that follows that influence.
The first thing to know about white space is that it isn’t always white. This actually just refers to any vacant areas that are without content or functionality. For example, the gap between or up the sides of a search control.
White space used to be thought of as a bad thing in website design maybe 8-10 years ago, but as modern design leans toward sleek and clean layouts, use of white space can once again be effective.
Calls To Action
You will often hear the term ‘call to action’, or CTA for short. This is any element on your page/site which is encouraging or asking the user to perform an action. Most commonly, this will be a button encouraging users ‘sign up’, ‘buy now’, ‘contact us’ or similar.
Web content can take many forms and when it comes to website design, you must always consider how you’re going to accommodate that content. Perhaps most important is written content, or ‘copy’ as it’s known. Google knows puts significant importance on the content that websites carry, requiring it to be well formed, easy to read, relevant and unique. Usually, this means a minimum of 300 words per page.
So, when you’re at the design stage, make sure you factor in where this content will sit and how best to display it. Will other forms of content be required, such as video or imagery? If so, that will need accommodating as well.
Website Design Software
There has never as much choice of which website design software to use as there is now. However, if you want to select from what the majority of professionals still use, then it’s a toss-up between Adobe Photoshop and Sketch.
Each piece of software has its own advantages and disadvantages, but these are considered the crème-de-la-crème of website design software.