Coding Designersnils neumannBlockedUnblockFollowFollowingJan 151.
Pathfinder-Generative approach for conceptual choreography / Onformative in collaboration with Christian Loclair // Credit: onformative / (CC BY-NC-ND 2.
0)What lead me to my Interaction Design Studies and my current role as a UX Designer at intive, was the fascination of the intersection of the digital and the creative world.
In particular, I am intrigued by Designers such as Cedric Kiefer from onformative, who uses code as a design tool in his daily design process.
At intive I am working closely with developers every day and I have noticed, that there are sometimes little communication problems between me as a designer and the developers.
This is due to the fact, that we use different terms to describe designs or development specific topics.
Therefore, this is one of the reasons why I want to get more into coding and development, because I think I can overcome this communication obstacle by it.
I was curious about what kind of knowledge designers need to have about coding and development and to what extent and in which way coding designers use code in their daily work.
“The limits of my language mean the borders of my world.
” (Ludwig Wittgenstein, 1889–1951)Ludwig Wittgenstein is a famous Austrian-born philosopher of the twentieth century and contributed to conversations on language, logic and metaphysics.
In my opinion, the meaning of the citation of Ludwig Wittgestein is that the scope of my language influences and limits my thinking, action and perception of the world around me.
In the same way I think that my knowledge of a new language like a programming language has a positive influence upon my way of thinking and action as a designer and my perception of the world from a designers perspective.
In order to design concepts, I need to understand the world I am working in and I need to have an understanding of the technology I am designing for.
The communication between designers and developers can only be effective if both speak the same language.
That’s why I think coding knowledge is important for designers.
Design by CodeDuring my Interaction Design studies in HAWK Hildesheim I stumbled upon this picture by Diana Lange in the University hallway and was immediately fascinated by it.
Recursion TreeMade with Processing using recurion.
flic.
krThe most fascinating part about this picture to me was, that the picture was made by code.
This was my first encounter with Generative Design that encouraged me to explore this fun and interesting design discipline further along my design journey.
Generative Design describes the creation of designs mostly in visual or auditive form with the help of algorithms, which are usualy written in code.
Generative Design finds itself at the intersection of Design, Art and Computer Science and is used in many different disciplines for example in architecture.
The architects of the recently build Elbphilharmonie in Hamburg used an generative design process to create the sound panels which cover the whole ceiling of the concert hall to produce an visual fitting aesthetic and an optimal acoustics.
(Howarth 2017) The generative design process is characterized by an experimental and playful approach to design solutions.
Very often one finds exciting results through errors and coincidences, which can be used for the desired solution.
The programming language Processing is common to use in Generative Design but it can also be used for programming and creating hardware prototypes with Arduino Boards.
Through learning Generative Design with Processing, I have learned the fundamental programming methods used in programming in general, like object oriented programming, arrays and functions etc.
Before programming in Processing, code was like a black box to me.
This experience with Processing showed me how programming languages work and I also think that I can better understand the world of developers now and what challenges developers have to face each day.
For example I got to understand that the documentation of ones own code is really important, because it takes time to read code especially, if you are looking at it the first time or after a long break.
One huge benefit of having learned Processing is, that I can apply the acquired knowledge on programming methods to other programming languages for example JavaScript, which I am currently learning by a book called Javascript Book.
Here is an generative design example project of mine:Coding Designer TypesDuring my research for my questions regarding code and design, I have read mostly articles written by designers, who are trying to answer the question whether or not designers should code.
I have recognized two different types of coding designers.
There are designers who use code like a developer and take over parts of the developers tasks.
And there are designers who use code as a tool to iterate and demonstrate their design solutions.
Designers Using Code for Production“(…) when my team is building things for production, it’s often easier and faster to create interactions on top of the existing code and play with that.
The code is immediately production-ready.
”(Mantere 2018)The UX Designer Heikke Mantere uses his coding skills to iterate ideas on top of existing code and even to produce production ready code.
He sees some clear advantages of this working method as a designer.
(Mantere 2018)Through coding in the relevant programming language and integrated developer environment, the designer’s perspective is broadened and he acquires a deeper understanding of the technical properties, different plattforms, systems and languages.
(Mantere 2018)On iterating concepts and realizing one’s own concepts through code, one gets immediate feedback of the desired interactions, transitions or animations.
(Mantere 2018)There is no handover to the developer, because the code is already production ready.
(Mantere 2018)Time can be saved, because design iteration and ideation are directly made in code and the use of a prototyping tool is obsolete.
(Mantere 2018) The same can be said regarding the design of animations, if the designer creates the animation directly in code.
(Azhar 2018)(…)most successful designers will be those who can work with intangible materials — code, words, and voice.
(Stinson 2017)This working method is also supported in John Maedas report “Design in Tech 2017” which is examined in the Wired article: “John Maeda: If You Want to Survive in Design, You Better Learn to Code” written by Elizabeth Stinson.
John Maedas opinion is that especially designers who not only have expert skills in design but who also have expert skills in code or can handle intangible materials in general like code, words or voice, will be most successful and high in demand.
He calls this designer type “Computational Designer”, designers who are able to identify problems and find solutions with the ability to write lines of code, developing products that reach and influence billions of people.
(Stinson, 2017) Drawbacks of this working method are not mentioned in Stinsons article.
In my opinion, there are some drawbacks or difficulties.
Alan Cooper mentioned in his article series: “Should Designers Code?” that an integral view of the complexity and significance of the individual role of the designer and the developer can be lost.
In his opinion it is a waste of valuable resources, to let specialists work outside their individual expertise and is strongly against the practice of designers taking over coding tasks of developers.
(Cooper 2017a)Designers Using Code as a Tool“Don’t get me wrong — designers are not software engineers(…)Code for a designer should be used as a tool for enabling better expression and communication.
”(Tal 2018)The other coding designer type uses code with other intentions.
These designers understand code as a tool to enhance their creative process, communication skills and to get a deep understanding of the appropriate technology.
In Alan Coopers article: “Should Designers Code?” he states that his experience as a software developer in the past has had a positive effect on becoming a great Interaction Designer, in particular the knowledge about the difficulties developers have to face daily.
Because of this experience he values the benefits of code as a designer primarily to be able to empathize with developers but as already mentioned he is against the practice of designers taking over coding tasks of developers.
(Cooper 2017b)„The primary responsibility of the interaction designer is to represent the interests of the user in the product creation process.
They need to be as proficient in identifying users and understanding their motivations as developers are proficient in writing bug-free code.
“(Cooper 2017b)Some Coding Designers use their programming skills to create tools and scripts for Design Software like After Effects or Sketch.
This is the case for Designer, José Torre, who has coded a tool to optimize his design workflow.
(Torre 2017) With coding skills designers are able to realize little ideas or projects without the dependence of a developer.
For example the Interaction Designer Marc-André Weibezahn created his own iOS Game called “Zirkel-Magie der Ringe”, which is available in the App Store.
(Weibezahn 2015) Coding skills can also be helpful to create high fidelity prototypes like the designer Jack Hallahan from London who uses React Code in FramerX to build high fidelity non linear prototypes with real data.
(Ye 2018)Design Tools and codeModern design tools are more and more capable of creating powerful prototypes and even producing suitable code for production, which makes the collaboration between designers and developers easier.
(Braga n.
d.
)“(…) we have been observing an ongoing evolution of the design tools we use everyday that enable designers to go back to focusing on what they are really good at: designing (big surprise).
”(Braga n.
d.
)In the context of design and code I found two particular tools interesting and worth investing time in.
Namely Xcode and FramerX.
Xcode and its Prototyping featureAs I have mentioned above, I’ve encountered communication difficulties with developers during my work as an UX Designer.
I once had the task to layout existing components in a mobile interface for iOS.
I presented my concept to the developer and asked him: “Can there be a 16pt margin between component x and y?” The iOS developer looked confused and replied: “Margin is the outward distance, right?” Clearly, I was using the wrong language, in this case I used terms of Web Development and the iOS developer didn’t understand my language.
Therefore, I think it’s important that designers and developers speak the same language, and I have concluded for myself, that I have to learn more about the iOS IDE Xcode and its terms used by iOS developers to be able to communicate more effectively with my iOS developer colleagues.
“But my opinion is that mobile designers should learn to use one more tool and the name of it is….
you guessed it Xcode and more specifically the Xcode’s Storyboards with their auto layout functionalities.
”(Rigopoulos 2017)The Xcode Interface Builder can be used to create interfaces with drag and drop and coding is not necessarily required.
With the Storyboards it is possible to build prototypes without code.
Screens can be connected and transitions can be defined.
The auto layout function allows the definition of distances and automatically adjusts to different screen sizes.
The designer Thanasis Rigopoulos says his experience with Xcode and its Storyboards had an positive effect on his carreer as a designer.
Mainly because he was able to implement his concepts into Xcode himself by using the Interface Builder and using the auto layout function, setting constraints (defining distances of components) and the developer could straight jump into coding.
He also emphasizes the benefit of understanding the design to implementation process and having more control over the implementation of one’s own designs.
(Rigopoulus 2017)I have asked two iOS developer colleagues of mine if they think it’s worth it for designers to use Xcode as a layout and prototyping tool.
They both think that there are benefits for the developer and the designer when the designer builds, layouts the design and even builds prototypes in Xcode.
Usually the designer creates the design in a design software like Sketch, uploads the designs in a handoff software like Zeplin and the developer builds a copy of the design in Xcode.
So if the designer is proficient with Xcode even without code they could take over that time consuming task of developers.
The drawback is that there is no way to implement custom components without code and also I think that the designer still has to create the envisioned UI design in a design software like Sketch to show and sell the designs to his clients.
That would mean that the developer has one less task but the designer has one more added to his workload.
But even if the designer doesn’t use Xcode in his workflow and design process, I think the knowledge about Xcode, how views are structured in the Interface Builder and how constraints are set with the auto layout function is worth knowing.
“Xcode prototypes are easy to get started on, are as simple or as complex as you need, and are a great stepping stone to building the final product.
” (Hall 2016)Reuben Hall from the digital agency Mindsea explains in the article “Mobile Prototyping with Xcode” that his company has transitioned from traditional prototyping tools to Xcode as a prototyping tool.
One major benefit according to their experience with this approach is, that the Xcode prototype can be used as a rough blueprint for the developers to build the real app and this allows them to transition from prototype to the final product a lot quicker.
(Hall 2016)My opinion is that the benefits of learning Xcode as a designer, even without knowing how to code in the iOS programming language Swift, can be very rewarding and it’s worth investing time into it.
It’s also worth thinking about using Xcode as a standard prototyping tool but it depends how your team is working and set up.
FramerX and JavascriptFramerX is a prototyping tool which can be used without code.
But if a more complex prototype is required for a project, FramerX allows the use of JavaScript React Code to code animations, effects or custom components.
All components used in FramerX are based on the JavaScript Library React and therefore it is possible to build nonlinear high fidelilty prototypes with real data.
For example, it is possible to implement a Youtube Player Component from the Components Store by drag and drop.
The Youtube Player Component behaves like a real Youtube Player and you just have to paste a link into the component.
FramerX tries to bridge the gap between Interface Design and Software Development by focusing on a component-based approach and the React Code of the components are theoretically usable for development, provided that the project team is using React for webdevelopment or apps which are coded in React Native.
The product designer Jack Hallahan from London creates high fidelity prototypes in FramerX with React Code.
He mentions the benefit of implementing real data and creating nonlinear prototypes, which feel a lot more convincing than the usual linear prototypes created in standard prototyping tools like invision.
(Ye 2018) The prospect of creating these convincing prototypes is really tempting, but as Jack Hallahan mentions, it’s mostly overkill to use FramerX for most prototypes.
So it depends on what kind of prototype you want to create.
Unfortunately react has a high learning curve, but Jack Hallahan says that once you have the hang of it, it can be quite fast.
(Ye 2018)I think that FramerX can be an interesting alternative to other prototyping tools even without code knowledge especially if the Components Store gets more content in the future.
But to really use all the potential of FramerX it’s required to write code in React or rather JavaScript.
So there is a high learning curve which requires a lot of time.
I guess FramerX is mostly interesting for all designers who already now how to code or have a deep personal interest in code in general and want to learn programming.
Personally I’m already on my journey of learning JavaScript and along this journey I think I will dip my toes in FramerX with React and will see how far I get.
Benefits of Coding SummaryEmpathy Enhances TeamworkBuilding empathy towards developers can be increased by the knowledge about the difficulties developers have to face in projects and knowing how developers work.
(Cooper 2018)Better CommunicationEffective communication is only possible when the designer and developer speak the same language.
This can create more trust between both parties and the common ground helps to discuss possible solutions.
The designer can also be more confident about technical issues in discussions and be more influential in the decision process.
(Tal 2018)Understanding of TechnologyTo be able to design great digital products it is necessary to know the technologies which are being used.
The limitations and possibilities can be better estimated.
Added Value for the ProjectDesigners with programming skills have added value to a project than designers without any programming skills.
For example, the ability to communicate better with developers and by having a broader sense of the technology.
Create Tools and Realize IdeasOwn tools can be coded for design softwares like After Effects or Sketch, own ideas and experiments can be realized independently.
Advanced PrototypingCoding can be used to create advanced prototypes.
Code CultureThe knowledge of coding and the technology can help to find common topics to talk about with your developer colleagues also outside work related topics.
And maybe you will understand developer jokes.
Understand How Computer WorkYou will understand how computers work.
Humans are becoming more and more cyborgs and are interacting with computers and software all day long.
I think it is important to know how the technologies, software and languages of the digital machines work together in order to maintain in control of the technologies in use.
Drawbacks of CodingI didn’t find and can’t think of any.
Start Coding„Should you have a basic understanding how programming works?.Definitely yes, everybody (and I mean EVERYBODY) should.
”(Torre 2017)In the context of whether or not designers should code, I personally can’t imagine myself coding production ready code in a live project.
I am a designer and I want to focus on asking good questions to find solutions with the user in mind.
But there are a lot of benefits for designers to learn to code and use it as another tool in their design toolkit.
In conclusion the main reasons to code as a designer are to build empathy towards the developers, which can improve communication and collaboration, and to understand the limits and possibilities of the technologies in use.
To what extent the designer learns coding skills depends on what he wants to use this skill for.
For example for me I want to learn javascript to become more confident with Web Development and Web Design.
I can also use javascript then to learn react with FramerX to create prototypes.
The possibility to create prototypes in Xcode without code is a welcome invitation for non coding designers to explore the iOS IDE and learn how the design to implementation process looks like.
Hopefully learning some more technical terms of Xcode and iOS development along this way.
My research on this topic has reinforced my hypothesis that coding skills do have a positive influence upon the way of thinking and action as a designer.
Start Coding LinksGenerative Design and Processing: creativecoding.
orgMobile Development: raywenderlich.
comWebdevelopment: developer.
mozilla.
orgFun Programming Game: Human Resource MachineSourcesAzhar.
2018.
“Why You Should Learn to Code as an App Designer.
” UX Collective.
March 6, 2018.
https://uxdesign.
cc/designers-can-code-for-ios-the-language-tools-516f14e7a0b7.
Braga, Fabricio Teixeira, Caio.
n.
d.
“The State of UX in 2019.
” UX Trends.
Accessed December 6, 2018.
https://trends.
uxdesign.
cc/.
Cooper, Alan.
2017a.
“Should Designers Code?.Part One.
”Alan Cooper(blog).
May 12, 2017.
https://medium.
com/@MrAlanCooper/should-designers-code-f7b745b8cd03.
Cooper, Alan.
2017b.
“Should Designers Code??.Part Two.
” Alan Cooper(blog).
May 16, 2017.
https://medium.
com/@MrAlanCooper/should-designers-code-417de265531c.
Hall, Reuben.
2016.
“Mobile Prototyping with Xcode.
” MindSea Development.
February 12, 2016.
https://mindsea.
com/mobile-prototyping-for-designers-with-xcode-storyboards/.
Howarth, Dan.
2017.
“Generative Design Software Will Give Designers ‘Superpowers.
’” Dezeen.
February 6, 2017.
https://www.
dezeen.
com/2017/02/06/generative-design-software-will-give-designers-superpowers-autodesk-university/.
Mantere, Heikki.
2018.
“Why I Learned to Code as a UX Designer.
” Reaktor.
January 18, 2018.
https://www.
reaktor.
com/blog/learned-code-ux-designer/.
Rigopoulos, Thanasis.
2017.
“Should Mobile Designers Learn Xcode?” Design + Sketch(blog).
February 17, 2017.
https://medium.
com/sketch-app-sources/should-mobile-designers-learn-xcode-50f55687af7.
Stinson, Elizabeth.
2017.
“John Maeda: If You Want to Survive in Design, You Better Learn to Code | WIRED.
” March 15, 2017.
https://www.
wired.
com/2017/03/john-maeda-want-survive-design-better-learn-code/.
Tal, Dor.
2018.
“Why UX Designers Should Code (and When They Shouldn’t).
” UX Collective.
February 28, 2018.
https://uxdesign.
cc/why-ux-designers-should-code-and-when-they-shouldnt-1293650e139e.
Torre, José.
2017.
“To Code, or Not to Code?” UX Collective.
August 28, 2017.
https://uxdesign.
cc/to-code-or-not-code-18eba05d186e.
Weibezahn, Marc-Andé.
2015.
“MAW.
” 2015.
http://weibezahn.
com/free/zirkel.
html.
Ye, Linton.
2018.
“Harnessing the Power of React in Design Prototyping.
” FreeCodeCamp.
Org.
March 27, 2018.
https://medium.
freecodecamp.
org/harnessing-the-power-of-react-in-design-prototyping-4a74e70db5f5.
Image Sourceshttps://www.
flickr.
com/photos/arselectronica/28440714194https://www.
flickr.
com/photos/dianalange/6830934130/.. More details