A beginners approach, tips and tricks to web design

A beginners approach, tips and tricks to web design

November 25, 2015

How we convey information to one another has evolved significantly over the last few decades. Since the rise in popularity of the smartphones and tablets, more people are turning to the internet for daily news and information. This means that the way we present this information has also had to change. Digital design is a vast leap from print design, there are so many elements to consider from navigation to the users scrolling experience. Having no experience in either, other than the occasional school project, I really enjoyed discovering little tips and tricks that help you build a strong foundation to your web designs.

Researching individual elements can significantly help you later on. The first thing I focused on was typography. Any site you come across on the internet will have text, this is how we quickly and efficiently pass information on to our users. So obviously your text has to look good, but it's a lot more than just picking an attractive font. Typography has a lot to do with the usability of your site. You need to consider what font sizes, styles and types are going to look like on different screen sizes while also figuring out a visual hierarchy. It's a good idea to download as many free fonts from Google Fonts, Font Squirrel and Whatdafont as you can. Then spend some time playing around with them in Photoshop. This will help you figure out what works well as a header or body, what weight works best, how much spacing it may need, etc. Next, look into which fonts go well together, as one that looks incredible as a header may look awful as a body text and vice-a-versa. It's a good idea to know what fonts pair well together so you don't have to scrap one that you love or that a client has chosen. There are several blog posts and articles out there that have already paired a few together for you, such as Google Font Combinations.

The next thing I looked into was colour theory. This is how humans interact with colour, how looking at different colours can make them feel differently about a site, which combinations are attractive to people and which ones aren't. I found this article very informative: The meaning of colour. Since colour can directly affect where the viewer looks on a web page it should be taken as seriously as the layout of your site. Having a good knowledge of how colours work will help you be able to create an efficient and effective user experience on your site. If you need help figuring out a colour scheme, Adobe Kuler is a great tool to use. Select any colour you want and it will show you the complementary, monochromatic, triad and many more colour schemes that your colour falls within.

Having some knowledge of code may help you look into typography and colour even more. I would recommend learning the fundamentals of HTML and CSS; these are the basic building blocks of everything you see on the web. HTML is the structure in which holds the content of a site, CSS is then used to style each element and make it look exactly how you want it to. Knowing the basics of these will allow you to utilise Inspect Element in your browser if you come across a website you love. Inspect Element allows you to look at a website's code and see what the hex code is for a particular colour, or the widths and heights of an element; you can even edit it temporarily, changing the hex code to see what colour would look better (this is particularly useful if you are doing a redesign!). If you're struggling to stumble across websites that inspire you, both The Best Designs and Awwwards constantly feature incredible recent and popular sites, themes and even fonts. Technology is an ever-changing industry, so it is important as a designer to stay up-to-date with the latest trends on the web which sites like those mentioned previously. Pinterest and even subscribing to newsletters and articles can help; I found Webdesigner News particularly useful.

These are just the basic things that will help you. There are a vast number of resources, courses and inspiration available online nowadays; far more than the few I have mentioned in this post. I highly recommend spending days immersing yourself in research and inspiring graphic and digital design before you even start sketching a design, it will save you hours in the long run and give you a great insight into design standards and popular grid layouts. Aside from the internet, you should never forget to utilise the extensive knowledge of your co-workers. If you have questions, even if you think they might be obvious or dumb, ask them. Being inquisitive and finding out the answers to your queries is the only way you are going to learn and strengthen your existing knowledge. So push confidence aside and go for it! Don't let anything stand in your way of discovering new passions and making yourself more valuable as an individual.