This is an interesting topic which isn’t often discussed between web designers. Getting started in Adobe Photoshop is difficult, and you feel an exhilarating rush when you complete your first web project. But what good is a website mockup if you can’t build it?
Arguably designers by definition do not need to understand any programming. Design is just that – pretty pixels in an image. However many talented individuals are coming forward who take the time to study both fields. You can market yourself at prospective jobs as being proficient in both design and markup. I’m going to discuss a few points on this topic and maybe we can figure out a balance on how much code is required for web designers to understand.
In an ideal world we would be able to build graphics and easily import them into a program for compiling into a website, desktop app, whatever. Sadly this is not the case and doesn’t appear to be anywhere on the horizon. For now web designers & developers must work together to build projects which are stunning visually and function appropriately.
This partnership is important because when you have a skilled duo working together you’ll notice much higher quality from both individuals. However where should the line be drawn? This is entirely up to your team and your individual circumstances.
I would argue that anybody skilled enough in creating stunning web graphics should be able to understand even minuscule HTML/CSS. If you’ve never in your life learned a development language then this will be an uphill battle at first. But given a few weeks of study practically anybody can understand the basics of HTML/CSS markup. And it’s certainly not something you’ll regret learning down the road.
What are your Responsibilities?
If you can get away with only landing design work then you’d be in a very lucky position. Most project managers consider any “web designer” to also understand frontend development languages enough to build their ideas into a browser. As mentioned above you can have zero knowledge of HTML and pick up the basics in just a few weeks(maybe 1-2 months).
CSS is a bit trickier where you need to understand positioning elements on the page. This may take more time to really nail down the concepts, but both these languages are required for building semantic web layouts. I’m sure most designers who already understand these frontend languages will vouch in saying it’s a major improvement over solely performing graphics work.
If you truly have an interest in pushing the envelope with frontend coding then take some time to study the basics of jQuery. You’ll really be an asset to any creative team! A web designer who can put together brilliant mockups and also code them into a dynamic page is the rarest exception. These tasks are often split between the designer and a frontend web developer.
But you can market yourself as both a designer & developer using these web languages. Check out our collection of jQuery tutorials to get you started on the right path. There are also dozens of helpful videos in YouTube if you can learn better by example.
Taking it Slow
If you are coming into this with absolutely no knowledge of web coding then it can appear very overwhelming. Do not expect to be building your portfolio site in HTML on the first day! It will take some time and dedicated studying before you memorize the common page elements and CSS properties. But within a week or two you should be feeling very comfortable reading HTML.
Just remember that you want to build websites properly and follow semantic rules. If there’s anything worse than a web designer who doesn’t know how to code, it’s a web designer who codes poorly!
The newest specs on HTML5 are very simple to understand and build a document outline. We have collected a few HTML5 web templates which you can download for free and play around in the source code. This is the best way to start learning once you understand the basics of how to write in HTML. Diving into other people’s code will show you examples of how professionals in the industry are building their layouts.
One of the best arguments to put out is the stability web designers can earn with freelancing. If you can only build PSD mockups then there’s no way you could take on client work without also paying a frontend web developer to code the site. This would cut heavily into your profits on any projects you land.
But even disregarding freelance work you could still be interested in working for another design agency. Problems can then arise when you’re creating a PSD mockup which doesn’t accurately reflect possible web UI elements. Then the developer on your team needs to request changes and the project is drawn out even longer.
Your Future Goals
Ultimately this question of “designers who code” cannot be answered the same for everybody – and that’s why it makes such an interesting discussion topic. You need to consider what your goals are in the future and if they require an understanding of properly building websites.
There are plenty of design jobs where you can work strictly on branding elements. This includes logos, vector illustrations, icons, mascots, and other goodies. But even digital illustrators may wish to put up their own portfolio website one day, and this is when a brief understanding of HTML comes in handy.
If you wish to read a bit more on this topic check out our post should designers know how to code? There are solid arguments for both learning frontend coding and strictly sticking to design only. And again it all comes back to your own personal preference and requirements for creating digital products.
It is your decision for which skills you decide to learn and how you further your own knowledge. Modern web designers are almost assumed to have some knowledge of HTML and CSS code. When first getting started in design it’s difficult to multitask in both areas. But after just a few months it shouldn’t take long for your curiosity to peak.
What suggestions do you have for web designers looking to understand frontend coding? How do you feel this can affect performance both as a freelancer and working with a design team? Let us know your thoughts in the discussion area below.
- Add Real-Time Geocoding to Your Project with positionstack Sponsored
- Start Fast with These Demo Content Generators
- Get Real-Time Flight Status and Aviation Data with aviationstack Sponsored
- 50 Free Responsive HTML5 Web Templates
- Must-Have Sublime Text Extensions For Web Developers
- 30 Essential Free Plugins for Sketch App
- A Look at the Proper Usage of the alt Attribute
- 30 Free Responsive Email and Newsletter Templates