So you’re a talented designer. You worked your way up the food chain from Design College, to freelance work, to well established design firms and back to freelance again (because you hated working for other people). You’ve designed everything from apps and websites, to posters and products; however you feel slightly vexed as to what to do next.
Good news, you’re in a perfect position to expand your skill-set. However there’s a fork in the road ahead of you in your career path with perhaps one of the most critical decisions you will ever make. You can either go left into Art Direction, or right into Development.
I’m not going to toss up which one is better than the other, that’s a discussion for another day. So let’s say, for the sake of brevity, you have decided you want to get into development.
Good choice! As someone who has followed a similar path, for me – the transition was a very steep learning curve, but a relatively quick one, as my thirst for more knowledge drove me to learn quickly.
Before we delve into the primary substance of this article, I will not be explaining how to code or what a <div> is. While specifics are important, this article is aimed at helping you better understand the thinking behind development from a designer’s perspective.
So how do you make the expansion? Here are some tips that should help you through the process.
Expansion Is Not Transition
Firstly I want to clear a few things up. Transitioning is different to expanding your skills. There is absolutely no logical reason as to why you should stop designing and start developing. Your design skills and knowledge, (no matter your expertise) are an asset, they’re an asset to learning development, they’re an asset to earning money, they’re an asset to your life in general.With the way the web design and development industries are progressing at the moment, it’s becoming increasingly frequent to see multidisciplinary professionals. The creative world is fast-becoming an amalgamation of skills, knowledge and software accessible to anyone.
Adobe’s “The New Creatives” campaign, launched in September, was aimed at targeting this newly developing niche.
Art Directors are becoming animators. Print designers are becoming web designers. Illustrators are also photographers, who are editors who also shoot film. These are the New Creatives, and Adobe is celebrating their work with a new campaign that makes them the face of our marketing—both literally and figuratively.
So aim at expanding your skills, you shouldn’t aim at changing your working title, nor do you need to stop designing. However what you can do is aim at developing a new skill-set that will make you a more dynamic professional, with a broader range of offerings.
You Know Design
You understand design, deeply. You already understand the why. You understand visual aesthetics. Your eye is well trained and can quickly examine and analyze every detail of a given design in a matter of seconds – resulting in you thinking, there needs to be 3pixels more space between that logo and it’s text. Designers are critical thinkers and visual-critical thinking is an indispensable skill and mindset to have. It helps you evaluate design dimensions, ratios, proximity, color, balance, space, tone, direction and a whole lot of other stuff quickly and decide what needs to be changed.You understand how to design. You understand the process of designing, from pen and paper, to wireframes, to Photoshop and Illustrator. You understand the thought process and the workflow to creating a well-designed project.
However you might not realize that while many developers may not have the graphic design software proficiency you have, a lot of them have similar skills. Meaning, while many of your design-specific skills are exclusive, other can be relative and applied to web development.
Design and Development Are Separate
There’s a good reason the two professions are for the most part separate, they are completely different in process, in principle and in execution.
Development requires a different approach to design. As a designer, you’ve always focused on the “why”, however development is the “how”. In a well thought-out project, the “why” should have been addressed long-before the development stage begins.
This why/how argument forms the basis of rivalry between the two trades. Recently, I was reading an article by a design student saying that this rivalry begins at an educational level, where the two professions are told not to like each-other. However, rather than arguing one is more important than the other, understanding both will no-doubt result in better work, regardless which you are doing.
So keep them separate. For example, one mistake I made when first learning web development (having already been a web designer), was going back and forth between the two processes. For example just because I knew both, I would find myself half-designing things, then thinking, “I don’t need to finish designing this part, I’ll just finish it off when coding.” This became a messy workflow, as I would find myself continually refreshing browsers or designing in chrome – trying to figure out the “why” and the “how” at the same time. Pretty soon I realized there’s no reason to skip or change workflows just because I know both. They are separate for a reason, finish one, start the other.
Development and Software
Throughout your web design years, you’ve had to keep up with the ever changing landscape of design software, Adobe’s industry monopoly, and their continuous affinity for developing new software that’s totally unnecessary. You’ve learned that while understanding design and having a trained eye are great, they are skills that are ultimately inhibited by your software-skills.
Development couldn’t be further on the opposite side of the spectrum. In development, knowledge is power, and knowledge is certainly not based on how to use Adobe Dreamweaver – you can build an entire website from notepad.
Instead, your understanding and knowledge of mark-up languages is what builds the foundation of your skill-set. For example, in programming school, a lot of software-developers spend their entire first year understanding language formatting before vocab is even started.
While it seems slightly excessive, this learning model is probably a good way to start in web development, as it helps you understand the principles from which the languages work.
While web development may not require extensive knowledge of complex software, a good way of thinking about this software vs knowledge relationship is that code mark-up can be arranged differently to produce the same solution or result.
This forms the essence of good development. Think of it as writing sentence, you can use different vocabulary to create the same meaning, however it may be more difficult to read, interpreted differently or even sound too complex. Your sentence structure and vocabulary decisions dictate meaning, perception and ultimately paint a picture of a given subject. If you’re language skills are good enough, you can make the complex, become rudimentary.
Developers Solve Problems
As a designer, you’ve been taught (or taught yourself) to solve problems. Your design work solves problems, branding problems, website problems, app problems, client problems.
Just like designers, developers solve problems too. There are so many considerations to take. Here’s an analogy:
Let’s say you need to design an icon. You may have a better understanding of Photoshop and be able to finish it in half the time as opposed to using Illustrator. However vector work should be done in Illustrator. Not only is illustrator more efficient, it has a broader and more powerful export spectrum. So you do it in Illustrator.
A developer has similar decisions to make. The equivalent would be how to implement that icon. You could use a PNG with CSS, maybe even use retina media queries, which is a rudimentary, bog-standard method. However it’s not scalable, it will make the page load slower through more HTTP requests and it’s not dynamic (can’t change colors or animate). So you use an SVG.
It’s all about the “how”, how to implement in the most efficient and effective way, while maintaining support and functionality.
Learning Development Will Improve Your Design Work
Have you ever worked with a developer who doesn’t really like you much, he feels annoyed whenever you pass work to him and frowns upon your workflow. Ever wondered why?Let’s use the icon example again. You designed it in illustrator; you used complex object blending and labelled all the layers with spaces (e.g layer 1 instead of layer_1). It may look all organized for you, but when you hand it over for web implementation, this can cause issues. When you export the SVG code, all the grouping is wrong and the spaced layer names create two different IDs. You’re hindering workflow.
However if you understand the development side, you will be able to design in a way that makes implementation easier and more efficient. Furthermore if you do both, you’ll make your own life much easier.
Your Thinking Will Change
There’s no two-ways around this, if your way of thinking and perception of design doesn’t change, then you simply haven’t understood web development. Your ideas will change, how you see things will change. You will no longer solely be fascinated by the “why”, but start to question “how”.Summary
Like I said before, the web design and development industry is becoming increasingly amalgamated. Designer-Developers are becoming the prototype of tomorrow’s modern web. While there will always be specialists in each profession, and workflows between them might not change much, the multifaceted creative is becoming an increasingly prevalent vocation.Where to start?
There are a number of ways to start learning basic web development. From my experience, I would say the best thing to do is to focus on understanding language-structures and relationships before you start using them. Here are a few useful links to get started.- Webtuts+ -A great resource for learning from the envato family.
- Codecademy – Learn to create interactive websites, fun games, and killer apps
- Treehouse – Learn how to build websites & apps, write code or start a business.
- Lynda.com - If you went to design school recently, this is what teachers asked you to use when they’re too lazy to do their job.
- P2PU’s School of Webcraft – High quality web development courses
- Code School - In browser web video lessons.
0 comments:
Post a Comment