How to become a web designer

07 December 2017

New to web design?

So, you’re thinking about or have already decided to make a career change, and you’ve set your heart on the glamorous life of web development. Maybe you want to earn your bacon as a freelancer. You want to sit on a £600 chair (paid for by the company of course) and tap away at a code editor, before heading off for pizza and craft beers in some hip city centre location with your fellow designers and coders, where you will discuss the merits of headless content management systems and isomorphic web design.

Over the last few years, web development has become quite complicated and the technology and techniques used to put together web pages have become quite abstracted.

If you sit down and start googling web design and reading some online resources, your head is likely to spin a full 360 degrees before you’ve even taken your first sip of tea.

This article is a brief, simplistic introduction to web design for the absolute beginner starting out. I’ll try to avoid specifics as much as possible in this article. But I will provide a few general points that will hopefully steer you in your fledgling career.

Learn, learn learn 

As a web designer myself, for the last ten years or so, I can say becoming one takes a LOT of learning. You’ll be hunched over your computer for hours on end, most days of the week. So there’s no hiding the fact that getting into web design is a substantial time investment.

Spending a bit of time learning here and there is unlikely to allow you to grow your abilities, as everything you learn needs to be retained in your mind through repetition. It’s every bit like learning a language. In fact, HTML, which is the bedrock of web development is indeed a language in itself hence the name – Hypertext Markup Language.

What am I?

How to become a web designer

This isn’t some deep existential question; simply put the whole web design discipline has, slowly, but more markedly over the last few years, become divided into different job roles.

At an early-ish stage in your career you will have to choose whether you want to take coding to the next level and become a front-end developer, a full stack developer, or a UX/UI designer. I won’t go into these different job roles in too much detail in this article, but I will summarise.

A UX/UI designer doesn’t usually touch code in day to day work. If you go down this route, you’ll be designing web page layouts, reusable interactive elements (patterns in other words) and designing user journeys in the interest of optimal user experience.

A front end developer codes in HTML, CSS and JavaScript. These are all front-end languages. Front-end code means client-side, or the browser on your computer. Effectively your browser receives the data from the server, and your front-end code is like an instruction manual for the browser – explaining how to present the content on the screen.

A full-stack developer is the uber-nerd of the web community. As a full stack dev will be able to do front-end and back-end. Back end is server side coding, in languages that facilitate direct communication with the server, such as PHP, which confusingly stands for Php: Hypertext Pre-processor. Yes it uses its own name inside its acronym.

This all might sound confusing, but the good news is the basic principles of web design are relevant to each of these job roles. And in time you will naturally move to one job role or the other.

How should I learn?

The internet is, obviously the most comprehensive resource. But for the sake of your sanity, go easy on your google searching. Don’t google specific things unless you have to. Google is great when you’re further advanced, and you’ve learnt all the jargon – there is a wealth of shared knowledge on the internet. Countless articles, tutorials, forum posts and videos which is great. But as a beginner you will very quickly feel overwhelmed. Especially considering much of this content is created by developers, for developers, and usually assume a certain understanding to start with. But they often don’t indicate this beforehand.

So you’re likely to feel inclined to google other things to learn something that precedes it, and soon you’ll have a dozen tabs open and you’ll find yourself so far down the rabbit hole you forgot what you were googling originally.

Don’t be a rabbit, buy a book. Go on amazon and find a beginners web design book that teaches you HTML and CSS. If you are slightly more moneyed, buy a course on treehouse, or Lynda. If you don’t like reading books, or watching videos. Head over to the W3 Schools website, which in my opinion is the most comprehensive, beginner friendly resource for learning web development.

What should I learn to start with?

What I call the three amigos, HTML, CSS and JavaScript.

HTML and CSS what?

Learn how to become a web designer

I said previously HTML is the bedrock of web design. It represents the DOM (Document Object Model) which is like the foundation, or blueprint for how web pages are displayed on screen. Every other thing you will learn about coding is built on HTML, so it makes sense to learn HTML first. If you build a house, you wouldn’t build the kitchen sink first would you?

I think I’ll go easy on the cheesy metaphors, but I will go into specifics a little more with HTML and CSS as it’s such a fundamental part of web design.

HTML is a collection of DOM nodes or in other words, tags, or elements that designate content – the arrangement of which makes up a web page. That content might be a paragraph, or an image or media like a video or sound clip. Each type of content needs to be designated a HTML tag so the browser knows what to do with it.

Also this designation of HTML tags has another very important purpose – accessibility. Which is another fundamental principle of web design. At its very core, any website, upon removing all the styling, layout and bells and whistles should be accessible at the most basic level. This is so people with disabilities can read the website, for example blind people who use screen readers, or people who can’t use a mouse and rely on using the tab key to navigate web pages.

The designation of tags, and descriptive meta-data is vitally important to aid accessibility and SEO (Search Engine Optimisation) which is a discipline all of its own and way beyond the scope of this article.

CSS is just as its acronym suggests – Cascading Style Sheets. If HTML is an instruction manual, CSS is, well another instruction manual that defines the styling and layout of a HTML page. A CSS file is a collection of rules that runs down the document like a list. The cascading part simply means that levels of specificity become higher further down the document. For example, you might create a rule that says a paragraph text should be red. But if, further down the document, you create another rule that says the same paragraph should be green, that rule will apply because it would overwrite the one preceding it.

And then there is JavaScript

JavaScript makes a page come alive with interactivity, and it adds behaviour, which is vital for things like forms, website navigation and other controls that make up a web page or phone app. I won’t go into this now, as it’s a little more advanced. But it is useful to know that there’s different approaches to coding JavaScript.

There’s a widely used JavaScript library called jQuery which you will come across regularly. This makes it easier and quicker to code interactivity and behaviour into web pages. However on a professional level, more and more recruiters look for developers who can code in pure JavaScript, or in other words “vanilla JavaScript” So it’s worth learning pure JavaScript even if jQuery is easier. You can always pick up jQuery at a later date.

In conclusion

There is so much I haven’t covered in this brief article. But if you read an article that tries to cover everything, you would become a victim of the dreaded rabbit hole I mentioned previously. Stick with the three amigos at first. Become completely proficient in HTML and CSS, and gain a basic understanding of JavaScript.

Then you can move onto more advanced languages and tools. Perhaps if you find yourself more inclined to the design aspect, look into UX/UI design. Or take CSS to the next level, and use a pre-processor like SASS or LESS. If you like the problem solving aspect of coding JavaScript, pick up a course of PHP or a similar programming language. Or get into a front-end JavaScript framework like Angular or React.

There is no right or wrong way to learn but my advice is to keep yourself grounded with the fundamentals. Don’t go in all guns blazing because you may find yourself over-burdened with information, and you’ll find yourself trying to go into different directions at once.

I will also say too much learning can be counter-productive if you don’t put what you’ve learnt into practice. Set yourself challenges, and build mock websites. Build a personal blog or portfolio website that showcases your skills. Maybe an interactive CV or do a friend a favour, and build their website for free. The skills you’ll pick up on the job are often more valuable than what you’d learn from a book or online tutorial.

But, like many other professions, the most important thing is bloody-minded determination and hard work. It’s not an easy ride, and you will question your career choice more than once. But if you keep at it, you’ll soon be drawing a healthy wage, doing a stimulating, creative, often maddening but rewarding job.

Please note: This article was written by an external author. Any opinions or advice shared by the author are their own and not indicative of any official advice or opinions of Thomson Local or its employees.

Tagged with:

  • Freelancing
  • Web Design
  • Web Development
Author -
UI Designer

Barry Richards is a web UI designer and front-end developer based in London. He has a love for music, mountain biking, reading, writing and gaming. He is available for freelance hire and consulting work via his LinkedIn

View Profile
Post a comment
Privacy Policy