A Small Guide to Web Design

In today's digital age, it has been increasingly important in maintaining your website and making it appeal to visitors. Many modern companies are leaning towards a more design focused website to promote themselves. Such elegant designs can be seen from the likes of Apple, featuring elegant design principles. These websites however are often developed by more than one person, and this small guide is more about web designing as an individual.

That's not to say you can't make a great website by yourself. There are many small companies or individuals that have created great websites and we can see that even a small team or individuals can create an extremely attractive yet functional website. Here is an example:

Mikiya is a product designer who developed his own website

So what's the secret? Well, just follow a set of rules, and the rest is up to the human imagination. As easy as it sounds, creating code such as HTML and CSS is a frustrating task if you're still a beginner. Of course, there are other platforms to create your website, but for this post, I will mainly talk about HTML.

To begin, the backbone of every website is using valid code. This means carefully planning and understanding how HTML and CSS function when writing them. Especially with a large number of tags, grouping elements into different sections with clear labeling means there is a more organizing and less finding errors. To aid in this, there are code validator websites which help into finding errors.

Grouping elements neatly

Elements are not spaced and not grouped neatly

The first thing about creating your website is to plan ahead what sort of structure you want to use to present your content. In web design, we call this a Wireframe, which can help in understanding the visual direction of your own website. It's always recommended to start with a wireframe, which is demonstrated below.

Your Wireframe showcases structure

Of course, the wireframe design can be vastly different from mine, depending on your personal tastes and design direction. Once the wireframe is established, you can begin coding your website. 

Some of the HTML code used to develop my website

This code will hopefully help people understand how the code relates with my website design/wireframe. Of course, there is much more code to be shown, including CSS, but this is just a small guide for people interested in the processes of web design.

So, what makes a website good? There are many elements that help into making a website good. In my opinion, simplicity is key. Use it as a reminder when developing all of your website's features. Make it easy for anyone to navigate and understand how to use the website. Along with that, understanding aesthetics is vital if you want to entice visitors to your website. According to Moon (2013), web design aesthetics can be used to make services more tangible, because customers’ sense of the aesthetic design influences their perception of the products.

To help you understand more about design, I will give an example of a website I developed using HTML and CSS. Using my wireframe as a guide, I coded my website to achieve my intended design.

You want some cake now, don't you?

The website I built is pretty standard, and the design is minimalistic and easy to navigate with the navigation bars being present. I went for a simplistic look, incorporating my website's subtle colors  to be consistent whenever possible. With your home page, you want to make sure you're creating a good first impression. Naturally, you want the customer to understand what your page is about, which means showcasing the vital information.

Of course, there are also some underlying features that make a website good. These include security, speed, content, search engine optimization etc. I wont get into detail as this post is mostly focused on design.

The fact is, creating a website can be an incredibly daunting task for those who are still beginners. It's a process that requires some perseverance. There will be a lot of trial and error until you get it right. I for one am proud of creating my own website, and it's an experience to see your website come to life. I say this because I personally struggled a lot with understanding HTML before, and I simply want to share my experience to those who might feel the same way as me. 

Thanks for tuning in, until next time!

References

1. Moon, Y. J., (2013). 'The Tangibility and Intangibility of e-Service Quality.' [Online]  Available at: https://www.researchgate.net/publication/281654302_The_Tangibility_and_Intangibil ity_of_e-Service_Quality [Accessed 2.10.19].