Duties & Jobs of a Web Designer

There are still many who question the scope of work of web designers and web developers, especially what I have observed, namely in our country, Indonesia. In forums, in real life, whether it’s at the office or in stalls or cafes when web workers are talking, the topic of a web designer’s scope of work and what a web developer’s job is is still an exciting conversation.

The main problem is actually only one, web designers only want to make designs in Photoshop and don’t want to touch things that smell like code, while programmers only want to touch code and don’t want to know about design matters. the end is either with PHP, Ruby on Rails or Java.

Web designers don’t want to touch web editors, Web programmers don’t want to touch applications like Photoshop?


If you both don’t want to give in like that, how about we just add one more job term in this web world, we’ll call it:

So he is the bridge between web designers and developers who are both selfish. HAHAHA It’s too naive. It’s superfluous if you just do the slicing, someone else has to, considering that the term web designer is actually very clear.

Some web designers usually limit their work only to focus on making designs. What design? web design or layout design for brochures, posters, banners, pamphlets, invitation cards or business cards? all of which will be printed later?

When in fact the scope of work is clear, wikipedia writes like this

The web designers are responsible for the visual aspect, which includes the layout, coloring and typography of a web page. Web designers will also have a working knowledge of using a variety of languages ​​such as HTML, CSS, JavaScript, PHP and Flash to create a site, although the extent of their knowledge will differ from one web designer to another ~ Wikipedia

When it comes to web designers, it is clear that their job is to design a website, the design will be opened or enjoyed on a screen such as a computer screen, mobile phone screen, tablet screen, web design is not a design that will be printed such as brochures, posters, banners, or others. magazine cover because that’s the job of a graphic designer. Of course, this is very different, the media is also very different, the graphic designer’s work is more dominant in making designs for print media, while the web designer’s work will be opened on a monitor screen.

Designing a Layout Concept (Wireframing)
Image by Eddie Lobanovskiy

The web designer’s first task is to design a website layout, these layout designs vary, some just make wireframes with doodles on paper or with tools to create other wireframes such as balsamiq or Mockingbird, some just imagine in their brains and immediately make them on the screen. photoshop, some are directly in the browser.


Designing Layouts Visually
After making a layout design in the form of a wireframe, then of course making a visual form, can be in photoshop, firework or gimp.

UI Design
Image by Paresh Khatri

Here web designers can channel their ideas in making every element on the website, giving color, placing images and others.

The web designer must of course have explanations about the design he made, usually this is fully documented, why he chose a certain color, what font to use, and so on.

Convert Visual Layout to HTML and CSS
Visual appearance alone is not enough, to be considered as the design of a website, the visual display must be able to run and must function properly when opened in a web browser. For that, of course, it takes a conversion process from Photoshop, Firework or Gimp files into HTML and CSS forms so that they can run properly in a Web Browser. Usually known as Slicing, because most web designs are made with Photoshop.

In this section the web designer cuts up the visual design that has been made into image pieces. The point is, of course, so that the images used on the website will not be large and burdensome, besides the use of cutting the images, namely in order to be able to determine which parts are either text or images that can later be made dynamic and which parts are only static.

Creating Layout Markup (HTML)
The task of the web designer after the slicing process is to arrange the layout of the elements on a website according to the visual form that has been made previously, to arrange the layout, of course, knowledge of markup language is needed, namely HTML (Hypertext Markup Language).

Who is responsible for how long the delay of a slideshow is? Of course the web designer, so the web designer will determine how long the delay (pause) for the appearance of the first and second slides will be.

Who is responsible for displaying the website on a mobile screen? Of course, a web designer, so he must understand the use of Media Query in CSS if he wants his website to appear responsive. Or he has to understand the term Fluid Layout if his website wants to have its own mobile version.

Make sure the code is correct (Validation)
Of course the quality of the code must also be considered, whether the code made meets the standards or not, so the HTML codes that have been created must be validated with existing tools such as W3 Validator (http://validator.w3.org).

Revision or Update (Version Control | GIT)
Git Branch
Image by Drew Neil

Sometimes when the display is finished and has been done by a web programmer, it turns out that the design is not perfect, there are errors. And the web designer must correct the design. For collaboration between web designers and web programmers, usually a team uses software such as Git, so changes that have been made by designers are pushed with Git, so that later if something goes wrong again it won’t be difficult to manage. So web designers must also understand the use of software such as Git.


After becoming a complete HTML and CSS template, complete with the effects used such as slideshows, dropdown menus, then it is recommended to web developers to be processed into a dynamic website so that later a website that was only a few HTML pages can finally become a large-scale website. large that has thousands to millions of pages.

So it’s clear that a web designer’s job is to make a layout design for a website and that layout must work well if it’s run on a web browser, all of the work above doesn’t have to be done at all, sometimes some start from wireframe, some start directly from Photoshop. without making wireframes because all the ideas are already in the brain, some even make designs directly from the browser (design in browser) without having to design in photoshop because web technologies such as CSS and HTML are now more sophisticated, everything is fine, wherever you start , the point is that the job must be able to run on a web browser. But of course it would be better if the steps were followed properly.

In the next discussion we will discuss the Jobs and Duties of Web Programmers…