19 Mar From Web Designer to Web Developer – A Guide for Website Creators
From Web Designer to Web Developer – A Guide for Website Creators
On the outside, it may seem that web design and web development are two different worlds, especially when you look at the deliverables.
The designer’s job is usually to put together a visualisation of what the end application should look like.
They make decisions regarding the style, interaction flow, placement of branding elements, colours, but they don’t code these things.
The result of their work is a mock-up or wireframe, and a set of design decisions.
When that is done, the developer doesn’t have to make decisions regarding styling and interface.
They can focus on writing code, and making it as elegant, and fast-to-execute as possible. The result of their work is a working web application.
However, it is easier than ever to build a prototype of a web application using ready-made elements from frameworks and templates, even if you’re not a coder.
Many designers are already doing it, and it’s a natural progression that is beneficial for everyone.
The best thing about it is that the better you are at design, the better you’ll be at programming.
Because even though design and development seem like different worlds, they both require much creativity.
In this article, I want to take you on a journey from web designer to web developer.
Along the way, I’ll do my best to show you the skills you need to know to progress along this path quickly.
If you’re a professional web designer, you can go ahead and skip the “Fundamental web design skills” part; I wrote it to set the context for the following sections.
Fundamental web design skills
Before we begin the journey from web designer to web developer, we must first consider what it really means to be a web designer.
What are the basic requirements you need to meet to get a job as a web designer?
Design principles
When someone has seen a lot of good-looking websites, they might start believing that it’s easy to make a fresh, simplistic, natural design.
It’s the same problem that copywriters have. Everybody reads and writes, so it can’t be that hard to write great articles or website copy, right?
It’s only when you need to do a professional design that you realise it’s not easy at all, and start planning to hire a web designer.
It’s not just about learning to use specific tools. More importantly, it requires a lot of theoretical knowledge and the ability to apply that knowledge in practice.
First, there are general design principles that govern all domains of design.
The role of design, using the right ratios of different elements, understanding how design can influence how people feel and what they think.
Next, as a web designer, you obviously have to become a master of web-specific design principles.
You need to understand what makes a good website, how to make a smooth interaction flow, the essential elements that users expect from all sites, and the limitations that programmers might encounter when they implement your design.
Several subdomains are crucial to creating an excellent website.
Consider typography – the art of making text look appealing and pleasant to read.
In web development, this art is even more difficult than in other artistic domains.
For example, you need to consider how fonts will render on different devices, and understand the relationship between the background and the font. And getting this right is a big responsibility.
If you don’t do it right, people will leave your site faster because their eyes will get tired.
Next to typography, there is also web formatting, colour theory, branding, and user experience – which deserves its own paragraph.
UX / UI and storyboards
Yes, your website has to be beautiful. But, unless it’s a one-page static site, then it also needs to be pleasant to interact with.
This is what user experience and user interface design is all about.
Professional web designers can’t rely on their gut feeling to make these decisions.
They need to use a methodology that allows them to plan out every detail of how users will interact with the website.
One of the most popular methods to do so is storyboarding.
It may seem intuitive, but like everything regarding design, the key to success is in the nuances.
It’s not just about planning an interaction flow that you think is ok.
It’s about adhering to industry standards, doing it better than competing websites, and also creating storyboards that are easily understandable to developers.
When there’s a lot of available data, for example, the website has been published for a while and has over 10,000 monthly users, UX design becomes a data-driven job.
It involves testing, statistics, and analytical thinking combined with creative problem-solving.
Graphic design
Probably the most significant difference between designers and developers is that the former are masters of visual imagery.
They can whip up an interface visualisation with pen and paper.
It all starts with good ol’ drawing, which teaches the fundamentals of visual imagery.
Then it becomes graphic design, which is still essentially drawing, but using software and a tablet.
This is another part of website development, like copywriting and interface design, that people generally think is “easy”.
They know a bit of photoshop, so they should be ok, right? Then they try to do it themselves, and quickly realise that they need help from a pro.
Graphic design isn’t just about drawing and knowing Photoshop.
There is much more to it — understanding perspective, colour relations, different types of lines, and the effect that visuals have on people.
Then there is also a smorgasbord of different programs that you can use to do it, all of them with a different workflow and learning curve.
Wireframing
Another vital part of web design; this is a kind of bridge that helps designers visualise their ideas in a realistic interface form.
Wireframing software enables designers to create an interface without having to code it.
Some programs even enable designers to export their prototypes in HTML and CSS, which gives the developers a perfect starting point to implement the design.
These are the necessary web design skills that you need to have to get a job, but you don’t need to write a single line of code to do them.
Now let’s see how you can expand this toolset with necessary coding.
Expanding your design capabilities with front-end web development skills
HTML and CSS
Many will say that HTML and CSS are requirements for a web designer, but I’ve intentionally left them out of the first paragraph.
It’s because it is possible to get a job as a web designer without these skills.
You can design for the web without knowing HTML and CSS, but it’s really much more comfortable to develop when you know these languages.
There are many benefits to knowing them, and designers who refuse to learn will generally have a harder time in their projects.
Like wireframing, knowledge of HTML and CSS bridges the gap between design and code.
You don’t need to explain something in words or draw up your idea.
You can just switch up HTML elements, change the CSS styling, show it to your developer, and he/she will know exactly what changes you want to make.
Libraries and preprocessors
These tools make it easier to create complicated CSS elements or HTML templates.
Libraries like jQuery enable you to add interactivity, like an animation, to your website without having to script it yourself.
At the most basic form, you can just copy and paste some code, and it will work.
Preprocessors, like Sass or LESS, are a bit of a different beast.
To use them, you need to learn the script of your preprocessor of choice.
When you do, you can style your website using this script, and the preprocessor will compile it into regular CSS.
Using preprocessors has several advantages, one of the most prominent being that you don’t have to write thousands of lines of CSS code.
Also, you have expanded styling capabilities compared to plain CSS.
Because of these, and other advantages, preprocessors have become a fundamental element of web development.
Javascript + Javascript front-end frameworks
It’s weird to me that some people include Javascript in the web designer skillset.
In my opinion, learning Javascript is the first step of going from designer to developer.
Once you’re able to use Javascript to build an interface, you’re already a front-end developer.
Javascript is very popular, and the great thing is that you don’t have to build everything yourself.
There are frameworks – containing reusable code libraries and templates – which enable you to build an interface without having to code every little part of it yourself.
And if you take enough time to learn Javascript, you can even become a full stack developer.
Becoming a full-stack web developer
Once you master HTML, CSS, and learn Javascript enough to be able to build a functioning web interface, you’re a front-end developer.
The next step is to learn how to make data flow in an application, and how to make the app operate without bugging out all the time.
Javascript back-end frameworks
One of the coolest things about Javascript is that nowadays it’s a full-stack programming language which was initially intended for the web, so it’s one of the essential tools in the modern web developer’s skill set.
Apart from front-end frameworks, which enable you to build an interface quickly, there are several common back-end frameworks for Javascript, which will allow you to quickly set-up a working application that securely exchanges data.
General-purpose scripting language
Javascript isn’t the only language for web development. You can build web apps in any of the major programming languages – PHP, Ruby, Java, Python, etc.
The cool thing about learning a general-purpose scripting language is that you’ll be able to build a lot of different types of software, not just web applications.
For your first language, I definitely recommend Python.
Everyone praises it for it’s human-like, readable syntax, meaning that Python code is as similar to the English language as possible.
Also, it’s the language of choice for academics who need to analyse data, as well as journalists who need to scrape websites for information, even for master developers who are building neural nets and machine learning algorithms.
It can be applied in any field where computers are used to do stuff.
If there is a single best language to understand programming and witness the beauty of code, it’s Python.
Testing
Many developers say that testing is even more important than coding. It is a sort of art that requires much knowledge to do well.
Untested code is harmful code. The more complex your website is, the more it should be tested.
And it should keep on testing itself, as you can implement automated tests.
As long as you’re building a simple website that doesn’t include many data operations, or security holes such as payment gates, you might be able to minimise the need for testing.
But that shouldn’t be your goal.
Understanding how to debug software and write tests is a huge part of software development, and if you really want to make that transition to a full-stack web developer, you need to be a master of testing.
GIT for version management
There is a whole philosophy around version management, and it’s one of the most significant parts of building software today.
Sure, if you’re working on your own small project, by yourself, you might not need to use Github (you still should, but it’s not that necessary).
But when you’re doing a professional project, and you can’t afford to add code with errors in it to the main codebase, you need to know how to do version management.
This is how developers avoid major f**k-ups, and this is also what allows you to test stuff and catch mistakes without pushing untested lines right into the production code.
Server and database management
There are different types of servers and various kinds of databases.
Full-stack developers know when to use Nginx and an AWS server, and when to host a project on Netlify.
They know when a MySQL database is most suitable, and when a NoSQL database works better.
Yes, you can basically go by the defaults if you’re really too lazy to learn about different types of hosting providers, infrastructure-as-a-service providers, and various databases.
But if you want to be a great web developer, take your time to understand these things, and you’ll increase your market value as a professional programmer.
It’s not easy, but it’s worth it
Transitioning from web designer to web developer is not an easy task, but it’s an enriching journey.
You don’t need to follow all the steps that I laid out, but the point is not to be afraid of learning new things.
Don’t get stuck in the “designer” frame of mind.
Coding is just as creative and beautiful as designing, and these skill sets perfectly complement each other. Good luck!
