Roles of a modern Web Designer

Posted • Reading Time: 8 minutes

This is the best piece of advice that can be given to a recent graduate. When you leave university, you are confident that you have a solid understanding of the industry with 4 years of experience under your belt. It is only when you arrive at your new job, that you understand the 4 stages of competence.

1. Unconscious incompetence

The individual does not understand or know how to do something and does not necessarily recognise the deficit. They may deny the usefulness of the skill. The individual must recognise their own incompetence, and the value of the new skill, before moving on to the next stage. The length of time an individual spends in this stage depends on the strength of the stimulus to learn.

2. Conscious incompetence

Though the individual does not understand or know how to do something, he or she does recognise the deficit, as well as the value of a new skill in addressing the deficit. The making of mistakes can be integral to the learning process at this stage.

3. Conscious competence

The individual understands or knows how to do something. However, demonstrating the skill or knowledge requires concentration. It may be broken down into steps, and there is heavy conscious involvement in executing the new skill.

4. Unconscious competence

The individual has had so much practice with a skill that it has become second nature and can be performed easily. As a result, the skill can be performed while executing another task. The individual may be able to teach it to others, depending upon how and when it was learned.

These stages are common across all career sectors. A lot of graduates starting off in their new jobs will question what their roles are. This article will break down the skills required to be a modern web designer.

NB These are not all essential requirements when applying for a web design job. but if you have experience of any or all of them, you stand a good chance of being favoured over a candidate that cant.

UX Design

User Research

Youll need to be knowledgable in different research methods including Field Studies, AB Testing and data analytics.

Information Architecture

Understand the hierarchy of information from a user perspective. When designing for UX or UI, the user must always be the end goal. Every question you ask yourself and every design decision you make must be about the end user defined from the user research.

Content Strategy

You will need to have a good understanding about how content should be structured.

Design Thinking & Process

Think about how the design problem connects with the overall design process

Design Patterns

Always be aware of common design patterns and understand how to use them properly. These may not necessarily be current design trends but more patterns and principles e.g. Gestalt Principles & User Interface Design Patterns


Sketching is a great way to quickly and effectively communicate your ideas on paper. If you are working in a large group or a large office you may not be sitting close to someone who you’d like to discuss and idea with. It takes 30 seconds to sketch an idea and throw it across the room than to try and explain your idea verbally.

UI Design


When designing for a client, sometimes you don’t get a choice in colour selection. With the brand colours you will need to be able to match brand colours and to complement them. it is important to understand colour theory and the effects that colour have on people. A simple dropper tool in Photoshop or Sketch can match a colour very easily. Using a PLTTS is a good tool for selecting good colour palettes.


You will need to demonstrate a good understanding of the principles of good typography. A great starting point to learn about typography is Buttericks Practical Typography.

Gestalt Principles

You will need to be aware of the Gestalt Principles e.g Layout, Size, Proximity and Similarity. You will need to be able to use these when needed.


Maintain consistent design standards throughout an entire project. It is important when creating large projects to maintain persistent patterns around typography, colour, padding, etc. Each page of the project must maintain a balance and style similar to that of the previous page. From past experience, when setting typography, Sketch can create styles very quickly and makes it easier to repeat a style than try to repeat it by selecting the different font family, font size and font colour.


I feel strongly about HTML & CSS as a role in a web designers skill set. I think that if a web designer cannot code properly and proficiently, they run the risk of labelling themselves as a graphic designer instead. Your HTML must be standards compliment and used correctly. Checking out HTML5 Doctor is a great start when writing clean code. When it comes to CSS, it is important not to repeat yourself. You should aim to make your code modular and DRY (Don’t Repeat Yourself). The next step of CSS is SCSS.

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself. The main reason for this is the addition of features that CSS painfully lacks (like variables).

Stack Overflow

There is a lot to take it when it comes to SCSS but the sooner you start, the more beneficial you will find it. Harry Roberts has some fantastic articles on SCSS and how to use it properly. I would highly recommend reading his blog posts about CSS preprocessors.


Performance Awareness

When inspecting elements in the browser, how many times have you clicked on the Network tab? While it may be easy to add lots of classes in your HTML, the CSS behind it could very quickly get out of control. Using the Network tab when the Element Inspector is open, you can view how quickly the site has loaded. A big reason why a website takes a long time to load is due to the CSS file being unnecessarily large. This goes back to the Dont Repeat Yourself rule. Keeping CSS classes to a minimum can instantly reduce the size of your CSS file and in return, reduce the loading time of your website.

Being aware of the platform you are designing for is another factor when it comes to design. You may have designed a stunningly beautiful aesthetic, but if the target device is a smartphone with minimal signal or processing power, the end user has not been taken into consideration.

Version Control

It goes without saying that version control is important. Version control is not limited to code. You can create versions of designs. You will need to be able to make effective use of version control by committing appropriate files and appropriate times. You will need to be able to adhere to branching workflows, pull requests, resolve conflicts and deal with common errors. It is important to understand how to find useful information from the log, know how submodules work and understand merging without pull requests. For coding, the most commonly used version control software services are Bitbucket and Github. A great Git client is Tower.

For design version control, InVision App is fantastic. InVision can link with Sketch, Photoshop and Dribbble. It has the ability to create versions of design files and save off image files of each page you have designed. For designers, I would highly recommend using this software.


A lot of designers and developers often build online projects for Joe Bloggs. Its not often that users with hearing or vision impairments are taken into consideration. By following the WCAG (Web Content Accessibility Guidelines).

Soft Skills


As with any job, you need to effectively communicate with peers and project managers about where you are on the project. You will need to be ready to ask for design feedback at any stage. The more you ask for feedback, the more efficiently the project development can run.

Taking Criticism

With a design job, you are going to get people telling you they don’t like your work. There is no right answer to design however when you have processes in place before you take the Photoshop or Sketch, you will find the design comes much more naturally. You will need to respond well and accommodate the views of both the client, project manager or design lead. It is a massive help if you are able to robustly defend you design choices but be able to adapt to specific direction from others.


As stated above, these points are not essential to get every web design position but if you can apply all of these going forward, you will find yourself ticking a lot more boxes on the essential criteria list that a potential employer has set.

Copyright 2017