In this article, I hope to lay out some of the reasons why making the transition to front end development for a designer is actually easier to do than for a developer to learn design. And then, once we’ve discussed that further, go into how a designer can begin to gradually delve into front end development using 3 simple techniques that most designers who have successfully made the transition have used.
Many designers are making the transition, but there is very little out there that I believe truly provides useful guidance on the best ways to do this.
With the emergence of front-end technologies over the last few years, largely in response to the speed and interaction demands of the modern web, designers have found themselves having to become more well versed in front end development than they ever had been in the past.
Knowing how to develop a UI, rather than simply design it, has become much more of a necessity than it ever has been before.
Why It’s Easier to Go From Designer to Front End Development Than the Other Way Around
The main difference between design and development is in the kind of thinking that goes into each.
Design tends to use implicit logic, whereas, with development, explicit logic is more often used.
But what do we mean by these two terms?
Design and Implicit Logic
Within the design process, the logic or thinking used is one that is more integrated with intuition rather than being more on the side of focusing on what the explicit facts or problems in front of the designer are. We can call this kind of thinking ‘implicit logic’.
Implicit logic tends to deal to a greater degree with the context of a design, rather than its content.
With implicit logic, there is more of an emphasis on how the solution produced should make the end-user ‘feel’, rather than simply how optimized getting from A to B is, within the design flow.
In some cases, this may mean defining A or B. Or reshaping them in order to better meet the intuitively felt needs of the potential user.
Implicit logic is more of a feeling logic. An intuitive style of problem-solving.
Development and Explicit Logic
When talking about implicit and explicit logic, bear in mind that these definitions are not absolute. What they point to are instead simply points on a spectrum. Implicit logic tends to be closer towards intuition while explicit logic tends more towards pure logic.
The kind of logic that we find within mathematics.
When developing, what is essentially happening is a process of implementing A to B logical processes. Essentially, you are constructing a logical map, with logic gates that determine how data flows and/or is displayed through that map.
What defines the structure of that map are the stated goals and constraints that have been explicitly defined by the implicit design process.
Essentially, development, once the intuitive problem-solving aspects have been taken care of by the design process, is simply a matter of implementation.
The problems faced at this stage are more of the concrete sort than the ones faced at the more intuitive design stage.
The process of developing an application is one of simply solving the problems in front of you, as defined by the map, in the most logical, clean, and straightforward manner possible.
You could argue that development does also have some elements of intuitive problem solving, especially when one is in the process of solving novel problems. But for the most part, the logic used is straightforward explicit logic.
The distinction between the use of explicit vs implicit logic is the primary difference between being a designer and a developer.
Therefore, the transition from designer to front end development is simply a matter of learning to adopt a style of thinking further down or up the logic spectrum from where you currently are. In the case of a designer, it is a matter of adopting a more explicit form of logical problem-solving. This is something that is easier for a designer to do, than the opposite.
Designers Have It Easier: Why Mastering Implicit Logic Makes Grasping Explicit Logic Easier
The initial stages of the developmental process are where front end designers who have come from a designer background have the most advantage. This is the sweet spot that most of the work involved in front end development lives.
A designer who has mastered an intuitive problem-solving process in their design making will have little problem applying the same thinking to the problems that will be presented to them in the slightly more explicit front end development process.
Most of what would be needed to add to their skill set would just be the syntax used by the front end technologies as well as other similar domain-specific knowledge elements.
The point here is that the hardest thing to know, that of being ‘how’ to think about the problems that one would face with front end development, is already, in large part, understood by a designer. They would just need to extend their knowledge further by understanding the specific tools used to solve the front end problems, via learning the syntax, etc.
An easy way to understand this concept is with the analogy of math and art in high school.
Do you remember how only some of the kids could actually draw at a decent level, while most could get by with mathematics? Even if at a very basic level, and without much practice?
This is what I am trying to illustrate here. Drawing, like design, requires more implicit logic. Which is harder to grasp and leverage than explicit logic.
This, along with the reasons that we have outlined above, is why it is very often easier for a designer to learn to develop rather than the other way around.
So now that we’ve laid out our initial premise, let’s now move into some of the ways in which a designer can go about learning what they need to, in order to make the transition from designer to front end development.
3 Techniques That Will Help You Make the Transition From Designer to Front End Development Faster & More Effective
- Have a consistent learning habit: Modern development is about applying a breadth of rapidly changing, as well as an expanding, knowledge base. Therefore becoming a good developer, especially on the front end is largely about the consistency with which you can learn and keep up with the amount of knowledge that you need to know, in order to be able to successfully apply it.
- Choose your learning sources wisely: Who or where you learn from is as, if not more important to your progress than what you actually learn. The best sources out there tend to have a lot of empathy. One of the sources that I’d recommend more than any other is TheNetNinja. TheNetNinja provides incredibly high-quality front end tutorials that do their best to have empathy with a beginner.
- Focus on productivity, not perfection: Perfectionism tends to creep up on you as you become more and more well-versed in development. Because of the often-touted, clean-code ideal that most developers would like to attain, you may tend to want to optimize before it is necessary to do so. But this will only slow you down. The best way to learn quickly is by making mistakes. To do this, you must ignore your gradually developing inclination towards making your code ‘perfect’. At least initially. It will get there in the end, as long as you keep trying.
Conclusion: How to Transition Into Front End Development as a Designer
The transition to front end development as a designer is largely a change of thinking more than anything else.
As you learn to problem solve on the web in a more explicit way, with the use of tools such as syntax and frameworks (e.g. JavaScript and React), you will find that it is not as difficult as you once thought, but also quite enjoyable. This is also when you will most likely make the fastest progress.
With consistent action, focus, and most importantly, a belief in your ability to learn and master a new style of thinking, making the transition from designer to front end development will be easy.
Good luck on your journey, and if you have any thoughts or ideas to add to this article, please let us know in the comments!
For further resources, take a look at the development section of our Resources for New Web Design and Development Projects page.
Take a look at the articles How Interaction Design Improves Usability, The UX / UI Guide for E-Commerce Websites, and Why Effective UX Design Is Critical to Your Website’s Success.
Hi,
Thanks for sharing these amazing ideas you have actually cleared out each and everything related to the designing approach the help is to build the perfect designing ideas.
That was really a great Article.Thanks for sharing information. Continue doing this.
It is a great blog post. I am Always read your blog. Helpful and Informative blog. Thanks for sharing this information with us.
Fantastic site you have here Tapha, It’s hard to find high quality writing like yours these days. I honsetly appreciate individual like you. Love the way article is written!
Cheers 🙂