Why Web Designers Should Learn Front-End Development
For years now, there has been much debate about whether or not web designers need to learn front end development.
Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.
Five years down the line from that tweet, it’s all the more shocking to see web designers still design websites in Photoshop. Web design is a completely different beast from graphic design. In order to understand the nuances and subtleties of designing for the web, you need to understand how the web works – it’s basic building blocks and architecture.
That’s where front end development comes in.
What is Front End Development?
The Front End of a web page is the part that users see and interact with. It includes the user interface, the text, the images, the animation and all other content. Front end development is about how these elements are coded and presented to the end user. (Back End Developers handle the behind the scenes stuff – how & where the content is stored, managing the databases etc.)
Photoshop lets you create a static mockup of the website. Front end developers are the ones that bring your design to life – with code. Front end development is primarily done using three languages:
- HTML (HyperText Markup Language): This is the markup language that’s used to provide the overall framework for the page – the basic structure, which content to include where, how to load it etc.
- CSS (Cascading Style Sheets): This is used to set up the styling information – the layout, the widths, the font etc.
- JavaScript: JavaScript is used to create any dynamic or interactive elements on the web page (for example, forms).
For someone new to programming, this may seem a bit daunting at first, but with the right support and tools, they can be learnt easily enough. If you still need some motivation to start learning front end development, here’s how it can help you improve your designs and your employability.
How Front End Development Benefits Web Designers
As a designer, you don’t need to be an expert in each of the front end languages. Understanding the architecture of how they work together, and knowing enough code to put together simple web pages can help you drastically improve the quality of your web designs, and your ability to deliver. Here’s how:
-
Better Understanding of Workflow = Better Designs
Chances are you’ve had a design sent back from the developers saying that the psds and mockups just can’t be translated to code. We all know how frustrating that is. When you understand the technology behind how the web works ie how the HTML, CSS and JS come together to bring your design to life, it empowers you to create better designs for the web. You won’t have to face awkward situations answering to your boss, or arguing with a developer about why your design can’t be coded.
-
More Control Over the Design Implementation
Taking it a step further, when you understand how your design translates to code, you can control it better. Depending on your proficiency level, you’ll either be able to code it yourself, or at least be able to have a more meaningful discussion with the developer and tell them exactly how you want it done – in their own language ie using front end terminology.
-
Improved TurnAround Time on Projects
Learning to code the front end can also drastically improve the turnaround time on your projects. – in proportion to the project’s size, and your coding skills. On small projects like a personal website with only 3-4 pages, you could consider coding it yourself (once you’ve achieved a certain level of proficiency). This works well for freelance web designers, or small agencies that don’t want to pull in another person for front end development on each project.
Alternatively, for larger projects beyond your new found coding skills, the understanding of HTML, CSS and JS will help you come up with more developer-friendly designs, and in fact communicate way better with the front end developer.
-
More Clients, More Jobs
For freelance web designers, one bone of contention is always that the best projects often go to agencies. Clients just don’t want to first hire a designer for the design and then look for a developer to code it. One of the best strategies for freelance web designers to take on creative agencies is to offer consolidated services. Building up your code skills to the extent you can provide live websites to clients, will help you bag more clients, and a larger chunk of the pie.
For those who prefer working in an agency or a web development firm, expanding your skill set opens up many more job opportunities. Many small firms prefer to have multi-talented people on board, who can pitch in more ways than one.
Where/How to Learn to Code
There are many online courses, both paid and free, that can help you get started with front end programming. But you don’t have to go trolling the web to find them. We’ve done the work for you and shortlisted some of the best tutorials, courses and other tools in our free Guides:
The next step is to see for yourself, how each of these come together. These programs help you create your first website from scratch:
- Build Your First Website with HTML & CSS from Learnable
- Make a Website with HTML+CSS from CodeAcademy
- Resources from Firstsiteguide
Some people find online courses tend to have a one-size-fits-all approach and may not be suited to their needs. Those of you who prefer more structured, customized learning, may want to try out Codementor Monthly to learn with a dedicated mentor. Our experts can help work out a customized learning plan for you, give you real world coding guidance, and help you through assignments or real projects.
Conclusion
As a web designer, you don’t need to be an expert front end developer (unless you want to!). Here’s what it takes to excel at front end development). But learning essential front end coding skills can help up your game and launch you into another league altogether.
For the designers out there – have you learnt front end coding? How did it change things for you – in your designs and in the kind of assignments/projects you were able to take up? Do share with us in the comments below.
Author Bio:
Once upon a time, Richa was a savvy techie & manager, in the semiconductor software industry. After her miraculous escape and recovery, she now works from her garden, creating websites, writing about technology, business & entrepreneurship; and helping others escape the cubicle lifestyle. Connect with her over Email, LinkedIn or Google+.
