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.
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.
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.
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.
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.
