Part two: A beginners approach to web design

Part two: A beginners approach to web design

December 14, 2015

In my previous blog post I spoke about the foundation of knowledge you should have when you start looking into web design. Now we need to start looking into how you would take that knowledge and turn it into an actual design and then a live website. You will find that a lot of the steps you take initially can seem rather tedious, but I promise you they will save you hours in the long run.

To start you need to think about the brand and theme of your site, this is where your vast knowledge of colour theory can really help. Is it for an existing company that has their own brand that you need to work from? Is it a start-up that doesn't even have a logo yet? Once you have picked the theme you want to work with you should start thinking about the content of the site and how that content will be presented across a page or multiple pages. It is a lot easier to have all your content organised before you start designing. This applies to both client and personal projects. Knowing how much space you will need for text and how much text and/or images you have to work with overall could save you redesigning pages later on. If you are working with a client who refuses to cough up the goods early on in the project, it may help to give them a word count. This way you can use Lorem Ipsum in its place and be safe in the knowledge that their content will fill the space you have allowed for. Thinking about all this now may seem premature but I have found that it helps me sketch and visualise my designs because I understand the components that are going into it.

The second thing to think about is the user experience, more frequently known in the industry as UX. You want your users to feel comfortable using your site; it needs to be accessible and intuitive, so the user journey from A to B is as direct and efficient as possible. If your website is difficult to navigate, you will see a decline in returning users on your analytics. Though seemingly obvious, it could have a detrimental impact on your business. It's important to realise that even the most experienced internet user can misread instructions and make a mistake so you should always design with user error in mind. I spent a lot of time watching YouTube videos and reading blog posts on this topic. UX Mastery and What is User Experience are both highly recommended.

Now you need to take all the knowledge you have accumulated and start designing by using wireframes and grids. Grids are a collection of guides in Photoshop used to help align your content, which is essential to any good web design. It helps you, as the designer, collate information and content into relevant sections to ensure all the elements look like they belong together. This definitely boosts UX of your site.

The essential guides that any of my designs start with are:

  1. Have a margin of at least 20px from the top and bottom of the page.
  2. Centralise the page on the screen so the page is equidistance apart from the side of the browsers.
  3. Ensure spacing is as consistent as possible (using padding and margins) between content within sections, and between sections themselves.

These guides help you prevent your content from getting too close to the edges of the page and spacing around your content makes it look more inviting to read and look at. You can also download ready-made grid layouts if you are unsure of where to start.

A wireframe is basically the skeletal framework of your site; by using squares and rectangles you can arrange the elements of your site before you start adding complicated content. If you are still unsure what a wireframe should look like, take a look here to put it into perspective. You can also find a lot of wireframe examples on Pinterest.

Some people can start designing wireframes straight into Photoshop but I find that sketching a few different ones beforehand helps you explore new and different ideas. Using a wireframe can be incredibly useful in Photoshop. You may discover that a design looks amazing on paper, but once it's on a screen it doesn't work like you hoped. Photoshop allows you to freely play with the layout without having to worry about moving loads of layers of content around. One of the greatest things about digital design is nothing is ever permanent so experiment with things, if you hate it you can always change it back, as long as you remember to save every version you create. This is something I learnt the hard way. Web design is much more than making a website look pretty. But having a knowledge of all these things I'm sharing with you is going to help you get to that point a lot faster. You'll soon find that all this becomes second nature to you and you don't even think about it. So enjoy the researching process, find out as much as you can and future you will definitely thank you for it.