Web Designer vs. Frontend Developer vs. Backend Developer.

So what’s the difference?

I’m going to cover the very basics of what each role is about, as well as where each one fits within the bigger website life-cycle.

Web Designer

Design is the stage at which you visualise a layout using tools such as Photoshop or Sketch or even Fireworks. By the end of this process you’ll have some images of web page designs to show the client. The designs won’t do much like, well, a website does; think of them as digital drawings.

desktop-1

Frontend Developer

Assuming you’re given the all clear by the client, the next step is to code those visuals with something (cool) called a Hyper Text Markup Language and Cascade Style Sheets. How nifty. HTML is the skeleton structure of a web page; you specify where a header is, where a paragraph is, what a group of content should be called and so on. CSS is used to style all those elements; add colour, font type, size and how elements adapt to screen size and more. As the name suggests all the ‘frontend’ (or forward facing parts) of a website.

design-front-back

Backend Developer

So that’s it right? You’ve built yourself a Hyper Text website! Coolz! Well yes you have, but it won’t do much. You could link 1 of these pages to another page you’ve built – but what about if you want 400 similar pages all with different content on. I suppose you could copy and paste that page 400 times but then what if the client wants to move the title below that image or even something as simple as change some text? Can’t they do that themselves?

This is where the backend developer steps in, while the website looks like a website at this stage, it sure doesn’t act like one. We need to make it functional; add social feeds, integrate with a Content Management System so that those who can’t code can update their own site content, allow others to comment, open an account, save their preferences and so on. The biggest difference here is you’re not just creating static content on a web page, you need to store this stuff somewhere. The Backend developer links webpages to a database where this information is stored, and can be accessed depending on what the user clicks. It’s a much more efficient way of structuring a website.

codeexample

And…

So there you go, a very basic overview of each aspect of the key web design and development processes. I do varying degrees of these 3 with backend development being my bread and butter. There is much more to the process; crafting words used on a web page, brand rules that affect design, wireframes that affect structure, user experience that affects everything, testing that fixes everything and more.

I hope this has been helpful, if you think it might be helpful to someone else give it a share.

Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn