Fundamentals of Design

by in Web Design & Dev

What is this thing you call Design? Apart from official definitions – “form follows function”, “less is more” – design is in it’s essence all about problem solving and designers will excel in resolving specific problems. Every design starts with a question (or perhaps a list of them) and if you’re successful at the end you will have an answer and a clear solution for the problem.

Let’s take a business card as an example. A company, any company, needs a quick and easy way to communicate to a client who they are and how and where they can be found. So, what are our specific problems here that we need to think about:

  1. How can we identify the company
  2. How can this company be reached
  3. What would be a simple medium of communication

And then you go to solving each individual question:

  1. Use elements from the brand, logos, colours, fonts to quickly identify the company
  2. Summarise the essential information about the company and you make the most important parts stand out. What is the company’s primary form of contact, is it an email, is it a telephone number? Draw the eye to it by making it bigger, bolder and/or a different colour.
    This is where it all comes together. Combine all of the above in a format that easily fits in your pocket or wallet; so it’s always close by when you need it.
What is design?

What is design?

What goes into design? Let’s talk websites

Websites are, at the moment, one of the more complex mediums you can design for. To design a webpage you use pretty much the full spectrum of design areas, from branding to layout composition, to editorial and typographic composition, to photography, illustration, video, motion, etc., the list goes on as websites grow bigger and more complex.

Let’s start with the basics. When you look at a website there are a few key elements that can be isolated and, when combined together, will make up what we call a website page. These are shapes, colours, images (moving or not), typography and the thing that ties everything together; the layout of the page.

There design elements for every website design

Core design elements for every website design

Shapes

Let’s put it this way – the internet is square. And by square I mean that the construction blocks for a webpage are rectangular. But this doesn’t mean you can’t add other shapes to it. Very quickly, squares are regular, constricting, pattern orientated and male forms, whereas circles, for example are pure, represent infinity and perfection, the divine, and are female. Where angles and jagged shapes are movement and aggressiveness, rounded shapes are more friendly and more appealing to the eye. in essence, different shapes will invoke different feelings on the user.

Colours

Colours are very complex. Honestly I could talk for ages about colours only. Apart from what you learn in school about colour theory – analogue colours, complementary colours, etc; when it comes to website design you are concerned about, first and foremost following brand colours, then thinking about contrast and ultimately colour psychology. Without going into too much detail , each colour has a specific psychological trait attributed to it. Red is love, but is also rage, and wrong. It’s also urgency and is speed. Each colour will again invoke different feelings depending on the context.

Images

Context and purpose are key here. Images take up various forms such as photography, illustration, or even moving images, with a well shot video or animation. Images can also be illustrative, if you have a product shot for example, or they can represent a concept or an idea. The way an image is shot will also be of upmost importance. Being closer to the subject will invoke feelings of familiarity, friendliness and understanding of the subject, while a wider shot will transmit an idea of formality and a corporate feel.

Typography

For typography I will leave you with this – good typography is invisible. Think of it this way; reading is one of the most incredible things we as human beings can do. We identify specific symbols and associate those with sounds. These symbols put together then make up words, and then sentences, paragraphs, and so on and so on creating this thing that talks to you.

The main purpose of typography will be to facilitate this process. Firstly, you choose the right font. One that is legible and from the get go sets the mood for the subject (think of formal documents having very serious fonts and wedding invites very elegant ones). Then you set this font in a way that facilitates reading; with a line of text that is not too long so you don’t feel you’re not making progress on your reading and a correct line height so you’re not skipping lines while reading a long paragraph. And generally making the act of reading flow rather than a daunting task. No one likes opening a dictionary and looking at the page thinking – now I have to read all of this?!

Layout

When you have all of the individual components figured out then you get to the holy grail of design – layout. It’s when you have to start laying out elements on a page that the real task begins. What is most important? Where do I want people to look? What do I want people to click on? Hopefully there are some guidelines that help with the process.

Design will in conclusion try to solve every single one of these elements, giving purpose and meaning to each one; making sure the message is clear and the results are effective. The role of the designer allows me to manipulate these elements and guide the users perception.