What if a designer learns to program
The author of the material is a mobile application designer. In her previous post she described in detail her own way in mastering mathematics. In this article, the author tells about personal experience in mastering programming skills.
From the very beginning of my career in designing UX / UI, the most unpleasant feature was that my work was not final and had to go through the hands of programmers. The irony was that the final design quality did not depend on my design skills, but on the skill of the programmer. All I could do was give them descriptions and detailed specifications of specifications.
')
Oh, those specifications! They were difficult to update, and they still came out incorrect. Worse, the perfect guideline did not guarantee a perfect result. Everything depended only on how the programmer could interpret the design.
The trouble of every designer. Thanks for the picture Matt Kelsh
With annoyance, I began to reflect on the essence of the problem. I began to analyze my communication with programmers and revealed two main errors:
Programmer
Similar to a programmer who makes mistakes in design, I was a designer who did not give important information to developers for creating a UI.
Even when I myself began to notice my own gaps in the programming part, the rest did not even think that this was a problem. It was believed that this is such a "fee" for creativity.
But I did not think so. I have always admired people who combined talent for art and technology. In fact, I myself studied creative programming at the university, hoping one day to become the same. And then a crazy thought struck me.
What if I program instead of designing a design? What if I program beautiful things myself, without programmers!
And I fearlessly rushed to learn programming again!
Do not fully deliberately abstract work
HTML, CSS, ActionScript, Processing, jQuery, etc. At university, I was introduced to design courses with pieces of various programming languages. These courses have been optimized for art students like me. The basic concepts of programming (for example, if / else and the for loop) were easy to master, but the rest was difficult to understand.
Real Project Names in Xcode
But this time, I bravely took up online courses in Objective-C and Swift. Of course, unfortunate. Although I was able to follow the instructions in the examples, it did not seem to me that I was creating something myself. "Parrot" - this is the perfect description of what I felt - this is not knowledge, but just a repetition.
Everything I could create with Xcode + Swift
The only memorable lesson from the iOS iOS course was that there are many programming languages, and they are all different. A variety of programming languages ​​is similar to a variety of real languages!
In high school I studied English and Japanese. In the beginning, English seemed incredibly difficult. There were a lot of strange things in it that were missing in my native Korean. On the other hand, the more similar Japanese was made much easier. Besides, I had more motivation to study it. I could talk to a Japanese tourist or read comics. It was interesting! In the wake of the joy of mastering the first foreign language, I decided to take up English again - and here I am, I am writing in English. Thus, following the same logic, I decided to study programming languages.
ActionScript, JavaScript, jQuery are all scripting languages. I decided: if I choose a similar language, I will simplify my training. My new plan was to study Framer (he uses CoffeScript) to create prototypes on it. I immediately noticed how much easier it is with him compared to the long-suffering Swift. And I changed the approach to learning.
Made on Framer - exactly what I wanted to create!
Arrays for me were the most difficult thing to understand in programming. Each time I made a list using for loop, and then did not understand how to make a layer animation on click. I asked for help in the Framer community. After a couple of minutes, one kind person made the necessary corrections.
I drank beer, sat down at the table and tried to understand what was going on inside this prototype. It was like a step by step process.
https://framer.cloud/XIQMO
I even had to take painkillers in the process of reading the code.
Unlike arrays, functions were easier for me. Designers are familiar with “Actions” in Photoshop. This is the same. A sequence of actions is defined, and then applied to the object. And so several times. It was interesting to create functions. To practice this technique, I improved the version of the previous prototype.
http://share.framerjs.com/wvix5s7vnnt0/
Using together for loop, array, and function allowed me to create exactly the prototypes I wanted.
http://share.framerjs.com/b6qelo86ma45/
http://share.framerjs.com/yfh1zmf5yawj/
As soon as I began to create interactive prototypes, the structure of my workflows completely changed. The main advantage was that I was able to show the working concepts even before I had completely grinded my appearance.
Even if this is not the final version, programmers can take design as a model when creating a UI.
You can create a fully interactive layout with frequently used UX templates.
It was wonderful. Whenever I had an idea, I created a prototype or layout, brought it to project managers, they organized a user testing session. Then I gave the layout to the programmers, and they began to plan and study possible technical requirements. When everyone, without further explanation, understood how it works, I could do my job - do it beautifully!
Promotional comic to my talk on Melbourne Cocoaheads
At the team level, we saved a lot of time! Customers began to provide more informative feedback and, apparently, they began to trust me more. Since then, I began to design everything in code.
I know that the question of whether a designer should code is relevant and hotly debated in the design community. There is a sense in the question itself, but I do not agree with the statement. It immediately and criticism and pressure on those designers who want to learn programming. But you can not learn well, obviously being in stress.
The way of learning is full of failures, and this is stressful. By doing nonsense, you can relax and unleash yourself on the creative. We fall a lot when we learn to walk, right?
Am I getting closer to creating an application for the Bristol fecal shape scale?
(Yes, it's a stupid joke about poop)
If you sometimes allow yourself to fool around, it becomes much easier to do “smart” things. Here at least my prototype slider zipper. Justification of my folly is the comprehension of the new.
https://framer.cloud/MXwkf
I'm still a newbie, and also pretty lazy. My colleagues say that my way of learning programming helped them to look at things from a different angle. And so I had the courage to write about my experience. Hope you enjoyed it.
If you want to practice in Framer, here is a link to the trial version from their website.
The irony of designer life
From the very beginning of my career in designing UX / UI, the most unpleasant feature was that my work was not final and had to go through the hands of programmers. The irony was that the final design quality did not depend on my design skills, but on the skill of the programmer. All I could do was give them descriptions and detailed specifications of specifications.
')
Oh, those specifications! They were difficult to update, and they still came out incorrect. Worse, the perfect guideline did not guarantee a perfect result. Everything depended only on how the programmer could interpret the design.
The trouble of every designer. Thanks for the picture Matt Kelsh
Watching myself, I realized what was happening
With annoyance, I began to reflect on the essence of the problem. I began to analyze my communication with programmers and revealed two main errors:
The first is that I often forgot to design what to do in case of an error .
Me: Here are the concepts. Let's do the app!
Programmer: Wait, what happens if a network error occurs?
I: Uh ... I ... I do not know!
The second is that I did not check the actual data before designing the concepts.
Me: As in this PSD, I want to make the icons a background to the article.
Programmer: Wait a minute, a photo that is pulled up via the API, just 100 Ă— 100 pixels!
Me: A-api what ?!
Programmer
Similar to a programmer who makes mistakes in design, I was a designer who did not give important information to developers for creating a UI.
Hold tight: art and technology together!
Even when I myself began to notice my own gaps in the programming part, the rest did not even think that this was a problem. It was believed that this is such a "fee" for creativity.
But I did not think so. I have always admired people who combined talent for art and technology. In fact, I myself studied creative programming at the university, hoping one day to become the same. And then a crazy thought struck me.
What if I program instead of designing a design? What if I program beautiful things myself, without programmers!
And I fearlessly rushed to learn programming again!
Sample, failure, trial, failure
Do not fully deliberately abstract work
HTML, CSS, ActionScript, Processing, jQuery, etc. At university, I was introduced to design courses with pieces of various programming languages. These courses have been optimized for art students like me. The basic concepts of programming (for example, if / else and the for loop) were easy to master, but the rest was difficult to understand.
Real Project Names in Xcode
But this time, I bravely took up online courses in Objective-C and Swift. Of course, unfortunate. Although I was able to follow the instructions in the examples, it did not seem to me that I was creating something myself. "Parrot" - this is the perfect description of what I felt - this is not knowledge, but just a repetition.
There must be an easier way!
Everything I could create with Xcode + Swift
The only memorable lesson from the iOS iOS course was that there are many programming languages, and they are all different. A variety of programming languages ​​is similar to a variety of real languages!
In high school I studied English and Japanese. In the beginning, English seemed incredibly difficult. There were a lot of strange things in it that were missing in my native Korean. On the other hand, the more similar Japanese was made much easier. Besides, I had more motivation to study it. I could talk to a Japanese tourist or read comics. It was interesting! In the wake of the joy of mastering the first foreign language, I decided to take up English again - and here I am, I am writing in English. Thus, following the same logic, I decided to study programming languages.
ActionScript, JavaScript, jQuery are all scripting languages. I decided: if I choose a similar language, I will simplify my training. My new plan was to study Framer (he uses CoffeScript) to create prototypes on it. I immediately noticed how much easier it is with him compared to the long-suffering Swift. And I changed the approach to learning.
Made on Framer - exactly what I wanted to create!
Arrays, I finally understand arrays
Arrays for me were the most difficult thing to understand in programming. Each time I made a list using for loop, and then did not understand how to make a layer animation on click. I asked for help in the Framer community. After a couple of minutes, one kind person made the necessary corrections.
I drank beer, sat down at the table and tried to understand what was going on inside this prototype. It was like a step by step process.
https://framer.cloud/XIQMO
- Create an empty array.
- Create a for loop with layers.
- Create an event (click).
- Assign which layer to animate using the layer pointer.
I even had to take painkillers in the process of reading the code.
The function is the same as the action in Photoshop
Unlike arrays, functions were easier for me. Designers are familiar with “Actions” in Photoshop. This is the same. A sequence of actions is defined, and then applied to the object. And so several times. It was interesting to create functions. To practice this technique, I improved the version of the previous prototype.
http://share.framerjs.com/wvix5s7vnnt0/
Using together for loop, array, and function allowed me to create exactly the prototypes I wanted.
http://share.framerjs.com/b6qelo86ma45/
http://share.framerjs.com/yfh1zmf5yawj/
Solving communication problems
As soon as I began to create interactive prototypes, the structure of my workflows completely changed. The main advantage was that I was able to show the working concepts even before I had completely grinded my appearance.
Even if this is not the final version, programmers can take design as a model when creating a UI.
You can create a fully interactive layout with frequently used UX templates.
It was wonderful. Whenever I had an idea, I created a prototype or layout, brought it to project managers, they organized a user testing session. Then I gave the layout to the programmers, and they began to plan and study possible technical requirements. When everyone, without further explanation, understood how it works, I could do my job - do it beautifully!
Promotional comic to my talk on Melbourne Cocoaheads
At the team level, we saved a lot of time! Customers began to provide more informative feedback and, apparently, they began to trust me more. Since then, I began to design everything in code.
Let's do something stupid and get joy by learning something new every day.
I know that the question of whether a designer should code is relevant and hotly debated in the design community. There is a sense in the question itself, but I do not agree with the statement. It immediately and criticism and pressure on those designers who want to learn programming. But you can not learn well, obviously being in stress.
The way of learning is full of failures, and this is stressful. By doing nonsense, you can relax and unleash yourself on the creative. We fall a lot when we learn to walk, right?
Am I getting closer to creating an application for the Bristol fecal shape scale?
(Yes, it's a stupid joke about poop)
If you sometimes allow yourself to fool around, it becomes much easier to do “smart” things. Here at least my prototype slider zipper. Justification of my folly is the comprehension of the new.
https://framer.cloud/MXwkf
I'm still a newbie, and also pretty lazy. My colleagues say that my way of learning programming helped them to look at things from a different angle. And so I had the courage to write about my experience. Hope you enjoyed it.
If you want to practice in Framer, here is a link to the trial version from their website.
Source: https://habr.com/ru/post/370333/
All Articles