How Web Designers can Transition into Coding

Getting started as a web designer requires weeks or even months of practice and dedication. There are so many unique aspects in designing graphics for the web, you may often feel out of place. But one step towards feeling more comfortable as a designer is to advance your own development skills.

Having the ability to design PSDs and then code the design into a site layout is a huge benefit. You won’t need to rely on another web developer to work out your HTML5/CSS3. Plus right after designing a website layout in Photoshop you’ll be able to bring that work to life. It’s truly a skillset that requires time – but ultimately it will improve your knowledge and control on the web.

Do Some Initial Research

This first step is crucial for building a foundation as a web developer. I recommend hitting Google and searching for articles related to HTML5 web development. You should learn how to read HTML documents and understand the different tags, attributes, and general structure for pages.

Even if you spend time looking at other designs, you’ll gain a sense of ambition for your own work. Developers are often happy to share their code as open source for other developers to learn from. And with websites all the HTML/CSS is right there accessable from any web browser.

If you are already at a point where you understand HTML tags then you’ll be ahead of the curve. This initial research is just to get yourself familiar with setting up a document and how to structure a page layout. This is the easiest step because it doesn’t require any coding work – just some patience to go through and look into areas where you’re confused.

Practice Projects

Obviously the next step in making your transition is to create practice websites. This is an excellent time to combine both your design skills with practicing new development techniques. Try creating a simple webpage layout in Photoshop and then coding this into HTML5 markup.

You could use one of many online code IDEs such as jsfiddle or cloud9. With these webapps you won’t need to use desktop software as a development suite. Although if you are more comfortable building locally there are plenty of free open-source apps to choose from. But in my opinion creating practice websites online is much easier if you don’t mind having the code hosted elsewhere. It grants you the ability to demo the website right from within your browser window.

By jumping into coding your own practice layouts you’ll learn some of the common beginner mistakes. A lot of these have to do with CSS positioning such as floats, multi-column layouts, and relative/absolute positioning. There are also lots of browser quirks to deal with between Gecko, Webkit, and Internet Explorer. But the only way to learn about these issues is through trial and error.

Finding Support

When you inevitably run into a wall that you just can’t solve there is no reason to stress yourself out. There will be plenty of times when you run into problems with CSS or even frontend JavaScript and no matter how long you stare at the code, you aren’t finding solutions. I have to recommend joining the greatest support community Stack Overflow.

You can search through existing questions if you think your problem is fairly common. Instead of using their default search you could alternatively punch keywords into Google and limit results to the StackOverflow.com domain. I’ve solved countless issues through the community and you can meet some really intelligent people along the way.

But even if you can’t find the direct answer to your question there’s always the option of posting a new help thread. Members of Stack gain points and reputation as they answer questions and get upvotes. There is incentive for skilled developers to help out newcomers because they’re gaining a stronger hold in the community – plus they’re helping solve related problems! Everybody wins and it’s a great community for newer web developers. There is also the newer Graphic Design Exchange which can answer questions about web graphics, backgrounds, patterns, and other Adobe Photoshop/Illustrator stuff.

Grinding and Pushing Forward

After the first few practice projects you’ll likely run into enough issues to learn from. After you’ve gained some solid techniques to quickly finish sample projects then you should set your sights on full website layouts. These could be static HTML or you could even move into CMS themes such as WordPress or Drupal. But note these often require a small handle on PHP, so understand that theming is not for the faint of heart.

With a combination of design & development techniques you’ll want to eventually focus in one area. Designers tend to spend a lot more time in graphics software such as Adobe Fireworks and Photoshop. If this is where your true interest lies then stick with it! Having the frontend dev skills to code your layouts is just one of the benefits to learning HTML5/CSS3.

But if you really enjoy the development aspect it may be a chance to move into more convoluted languages. JavaScript/jQuery is the most heavily supported scripting language across all modern browsers. I would have to recommend this as the next step up from creating static HTML/CSS web pages. However it’s not even in the same level as HTML markup or CSS styles, so be warned it’ll be tough to get started.

However I can think of plenty great frontend user interface developers who also cater towards designing killer web graphics. There’s no reason a person can’t possess both sets of skills and do their job perfectly. It just requires some dedication and a lot of hard work. But even after a few months’ time you should be in a much stronger position as a web designer and developer.

Final Thoughts

I hope this article can get you thinking about a few ways to improve your development skills. Starting with a background in Photoshop it may be daunting to move into frontend dev languages. But it’s a useful skillset to not be relying on others for support.

The best way to get started is by going through tutorials online related to HTML5 and CSS3 web development. It will not come to you overnight, but with enough practice you’ll be churning out layouts quicker than you can design them. And as you practice on more layouts you’ll begin to feel a lot more confident with your work quality. If you have any questions or related advice feel free to share with us in the post discussion area below.