{"id":117926,"date":"2023-03-17T12:45:51","date_gmt":"2023-03-17T12:45:51","guid":{"rendered":"https:\/\/undsgn.com\/uncode\/?p=20528"},"modified":"2023-06-30T09:09:53","modified_gmt":"2023-06-30T09:09:53","slug":"is-the-ability-to-code-essential-to-succeed-as-a-designer","status":"publish","type":"post","link":"https:\/\/wugweb.design\/index.php\/2023\/03\/17\/is-the-ability-to-code-essential-to-succeed-as-a-designer\/","title":{"rendered":"Is the ability to code essential to succeed as a designer?"},"content":{"rendered":"
\n
\n
\n
\n
\n
\n
\n
\n
\n

Is the ability to code essential to succeed as a designer?<\/h1>\n
\n

Six of the top ten most sought-after skills online are all related to code, and if they want to succeed in today’s design industry, designers need a deep familiarity with the technology and coding skills necessary to build and manage successful digital products.<\/p>\n<\/div>\n

Today\u2019s designers are under intense pressure to achieve unicorn status. Create a podcast now. Learn to be a \u201cthinking leader,\u201d whatever that means. Designers must acquire new abilities to succeed in today\u2019s competitive design industry. Coding is a skill that is in high demand.<\/p>\n

A lot of people are concerned about this. If you type \u201cshould designers\u201d into Google, that\u2019s the best indicator. Six of the most popular search queries address the question of whether or not designers need to know how to code.<\/strong><\/p><\/blockquote>\n

The ability to write code is optional to be a successful digital designer. But, you should be familiar with the processes behind the creation and upkeep of digital products. Paints may be mixed to create new hues, and artists have this skill down well. Professional cooks have an arsenal of spices at their disposal. Any digital designer worth their salt will have a deep working knowledge of the technologies they use.<\/p>\n<\/div>\n

\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

What do we mean by “code.”<\/span><\/h4>\n<\/div>\n
<\/div>\n<\/div>\n
\n

There is a tendency to generalise all programmers in the same way that one may generalise all designers. Developers can differ significantly in how they approach problems, their chosen processes, and the areas in which they may have developed expertise.<\/p>\n

If you\u2019re a designer working with developers, you must have a firm grasp of what they do and the environment in which they operate.<\/p>\n<\/div>\n

\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

What goes on behind the screen?<\/span><\/h3>\n
\n

Developers need to break out the parts of a design to learn how to put it together.<\/p>\n<\/div>\n<\/div>\n

<\/div>\n<\/div>\n
\n

There are many steps between approving our ideas and seeing the finished output from the developers. When compared to humans, their thought processes are distinct. Yet, we can still have a conversation with them.<\/span><\/p>\n

I\u2019ve managed to avoid learning everything there is to know this far. I\u2019m sure I\u2019ll always be an expert on everything related to technology, as there are so many areas in which I need to be more knowledgeable. Because I want to keep things straightforward, I\u2019ll go through the most memorable and helpful bits. There are essentially only three factors at play here:<\/span><\/p>\n

    \n
  • How does our interface gets built?<\/strong><\/li>\n<\/ul>\n
      \n
    • What happens when the user pushes a button?<\/strong><\/li>\n<\/ul>\n
        \n
      • Where the information we put into our interfaces comes from?<\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n

        Components of the system<\/span><\/h3>\n
        \n

        When we surf online, there is a lot of communication happening across the Internet between various devices worldwide.<\/p>\n<\/div>\n<\/div>\n

        <\/div>\n<\/div>\n
        \n

        The data we collect is stored on hundreds of servers in dozens of countries. Information may be transmitted worldwide in seconds using towers and satellites in Earth\u2019s orbit. Thousands of miles of underwater cable carry gigabytes of data per second.<\/p>\n

        Unfortunately, we can only take in the world through our screens. That\u2019s fine, by the way.<\/p>\n

        We aren\u2019t engineers, so we aren\u2019t usually the ones that handle it as designers to worry about how these relationships work. All that matters to us is providing helpful information to our customers as quickly and painlessly as possible.<\/p>\n<\/div>\n

        \n
        \n
        \n
        \n
        \n
        \n
        \"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
        \n

        In my career as a digital designer, I\u2019ve gotten by with the following knowledge:<\/span><\/p>\n

        Interface design<\/strong>\u00a0is our domain\u2014location of controls, choice of aesthetic palette, and responsiveness to input. We have the right to make and enforce these policies. When we give developers our designs, they turn them into code.<\/span><\/p>\n

        Clients<\/strong>\u00a0are what you use to construct and show user interfaces to end users. This is a catch-all phrase for any computer an individual uses. Mobile devices, computers, and electronic tablets. Devices of this type have adequate power to do some fundamental tasks but need help under greater demands. Try putting your phone into \u201cAirplane\u201d mode to see how ineffective it is, and you\u2019ll get the idea.<\/span><\/p>\n

        Servers<\/strong>\u00a0can be viewed as the \u201cbrains\u201d of a product. These devices are large and robust enough to do complex tasks. To access data, client devices must communicate with servers over the Internet. A client will contact a server for resources when it needs them. Servers also have an advantage in speed when it comes to sophisticated tasks.<\/span><\/p>\n

        Information exchange between client and server must occur over the Internet. With the help of machines like yours, data can be transferred quickly around the globe.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n

        The technology stack<\/span><\/h3>\n
        \n

        The “stack” of a product is its collection of interdependent parts. Its environment is vast and intricate.<\/p>\n<\/div>\n<\/div>\n

        <\/div>\n<\/div>\n
        \n

        Among the best analogies I\u2019ve come across from The Software Guild is to picture the IT stack as a burger. A burger must have specific ingredients, but the rest of the sandwich can be customised to the eater\u2019s preferences. The burger in your product might have onions on it, or it might not. The patties were made by one programmer and the cheese by another.<\/p>\n

        Many technologies may make up the stack used by your design team. One example of a \u201cdesign stack\u201d might be the programmes Sketch, Framer X, Zeplin, Abstract, Adobe Illustrator, and Origami. You may replace Sketch with another programme, such as Figma. You may use Adobe XD to pool the talents of multiple designers.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n

        Different kinds of developers<\/span><\/h3>\n
        \n

        From a designer’s perspective, there are only a few types of developers we are likely to meet in our day-to-day operations:<\/p>\n<\/div>\n<\/div>\n

        <\/div>\n<\/div>\n
        \n

        Maintaining a system like this requires several different kinds of people with a variety of talents between them. Most developers are the most comfortable working on a single component of the system, which gives them all different titles and roles.<\/p>\n<\/div>\n

        \n
        \n
        \n
        \n
        \n
        \n
        \"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
        \n
        \n
        Front end developers<\/span><\/h5>\n<\/div>\n
        <\/div>\n<\/div>\n
        \n

        Every one of us is collaborating with at least one front-end developer. These front-end technologies construct our layouts locally on the client\u2019s machine. They share our enthusiasm for interfaces and are often trying out new approaches.<\/p>\n

        Developers for both desktop and mobile platforms are responsible for creating compelling user experiences. Even though they speak different languages and specialise in different areas, they all want the same thing.<\/p>\n

        If you\u2019re a designer and someone asks if you know how to code, they\u2019re probably looking for someone with this degree of proficiency.<\/p>\n<\/div>\n

        \n
        \n
        Back end developers<\/span><\/h5>\n<\/div>\n
        <\/div>\n<\/div>\n
        \n

        People with this title will build the structure and logic of the system. They usually hold computer science or engineering degrees and are enthusiastic about robust and logical solutions. The parts of the experience that are separate from the interface usually belong to back-end developers. Things like quick loading times, secure data transfer, and robust data architecture.<\/p>\n

        We don\u2019t work directly with them, but their work can directly impact what we can design.<\/p>\n<\/div>\n

        \n
        \n
        Full stack developers<\/span><\/h5>\n<\/div>\n
        <\/div>\n<\/div>\n
        \n

        Developers can work on both the front and back ends of a system. They\u2019re equal to our UX\/UI designer role. Good ones are rare and highly sought after.<\/p>\n<\/div>\n

        \n
        \n
        Data scientists<\/span><\/h5>\n<\/div>\n
        <\/div>\n<\/div>\n
        \n

        Designers can use analytics to see how our users are behaving, and data scientists are the ones who make this possible. They\u2019re experts in condensing large amounts of data into critical insights using mathematical methods.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n

        What should designers care about?<\/span><\/h3>\n
        \n

        This is a lot of information, and I understand that. Your inquiry: “what is the minimum of this material I need to know to be useful?” sound familiar to me.<\/p>\n<\/div>\n<\/div>\n

        <\/div>\n<\/div>\n
        \n

        Your goal is to learn something to improve your work performance. Making a service or product to sell online? Practised use of CSS grids is essential. Keeping confidential data for your project? Learn the difference between public and private keys. Instead of becoming proficient in every conceivable field, focus on developing the skills and mindset that will allow you to succeed in various situations.
        \nIn retrospect, the following are among the most formative insights I\u2019ve gained:<\/p>\n<\/div>\n

        \n
        \n
        \n
        \n
        \n
        \n
        \"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
        \n
        \n
        HTML<\/span><\/h5>\n<\/div>\n
        <\/div>\n<\/div>\n
        \n

        Programmers write web pages in a markup language called Hyper Text Markup Language. This allows users to have complete control over the look and feel of their websites by defining their preferred page structure, section roles, section contents, and element styles.<\/p>\n

        As an example, think about the text you just read. When this page loads, it looks like the image on the right when viewed in a web browser. The red information indicates mandatory data and metadata the client and server require to render this page correctly. Everything that makes us unique is listed in the orange box. In this day and age of abundant, freely available online materials, HTML may be quickly learned.<\/p>\n

        A solid understanding of the fundamentals is essential if you want to dabble in web design. The ability to practise on your machine using a programme like Brackets makes the process much more manageable.<\/p>\n<\/div>\n

        \n
        \n
        CSS<\/span><\/h5>\n<\/div>\n
        <\/div>\n<\/div>\n
        \n

        We create a shared visual language for our goods during design, and developers do the same during development. To manage the appearance of their elements, they employ Cascading Style Sheets. Try viewing some websites with the CSS turned off to demonstrate the information\u2019s importance.<\/p>\n

        With the example mentioned above, adding some CSS and making the page look fancier is simple. You can build a shared visual vocabulary for your page\u2019s components with just a few lines of code.<\/p>\n

        Learning CSS can help you understand how challenging it is to make things look as fabulous as your designs. Sketch makes it simple to do what would be challenging to implement.<\/p>\n<\/div>\n

        \n
        \n
        Javascript<\/span><\/h5>\n<\/div>\n
        <\/div>\n<\/div>\n
        \n

        JavaScript is a language that may be used in various contexts and is simple to learn. From developing a Sketch add-on to making web games, I\u2019ve utilised Javascript for everything. To construct their portion of the product, some back-end developers even turn to Javascript frameworks like React and Angular.<\/p>\n

        For client-side work, Javascript\u2019s primary function is to automate the process of making changes to HTML and CSS.<\/p>\n

        So, let\u2019s review the last case. When I click the header, I want to be notified. Therefore I inserted an event there. The items on your page can respond to user interaction with just one line of code.<\/p>\n

        Javascript is covered in various courses, but the most straightforward approach to understanding how it fits in with HTML and CSS is simply playing around with it. Look at the results of other people\u2019s trials and see what you can learn from them. Break down a few instances.<\/p>\n<\/div>\n

        \n
        \n
        Mobile app development<\/span><\/h5>\n<\/div>\n
        <\/div>\n<\/div>\n
        \n

        I\u2019m grouping together all aspects of app development under one umbrella for two reasons. First, I can only offer helpful guidance if I have experience in this area. Second, they are all very similar from the standpoint of a designer with no prior expertise.<\/p>\n

        App code rendering on mobile devices is distinct from web code rendering. The wide variety of modern technologies makes maintaining consistency far more challenging. Moreover, more complex user behaviours (such as swiping and gyroscopes) are now at your disposal.
        \nDaily challenges can be overcome by tailoring your designs to each platform independently. You should familiarise yourself with the rules for both Android and iOS as soon as possible.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n

        What do I need to know?<\/span><\/h3>\n
        \n

        Designers who don’t code only need to understand how to make things easier for their developer teammates<\/p>\n<\/div>\n<\/div>\n

        <\/div>\n<\/div>\n
        \n

        Ultimately, coding isn\u2019t for everyone. If you\u2019re exposed to this stuff in your daily workflow, you can remember it.\u00a0<\/span>There are a couple of shortcuts you can take to be able to think<\/span>\u00a0<\/span><\/em>like a designer\/developer without touching a single line of code:<\/span><\/p>\n<\/div>\n

        \n
        \n

        Be empathetic towards developers.<\/span><\/h4>\n<\/div>\n
        <\/div>\n<\/div>\n
        \n

        Collaboration improves results and provides opportunities for mutual education. Designers and developers work together to accomplish the same goal. Getting the most out of your team is as simple as making a few adjustments to your usual procedures:<\/span><\/p>\n

          \n
        • Build in time for developers<\/span><\/strong>\u00a0to contribute to the design process. Developers have some of the best ideas I\u2019ve ever heard. Please include them in design reviews, brainstorming sessions, and user testing results as much as possible.<\/span><\/li>\n<\/ul>\n
            \n
          • Attend to their advice.<\/span><\/strong>\u00a0When a programmer tells you they can\u2019t implement your concept, it isn\u2019t because they don\u2019t like it. Some things are challenging to construct. Have a constructive attitude and collaborate to find a solution.<\/span><\/li>\n<\/ul>\n
              \n
            • Fight for them and win.<\/span><\/strong>\u00a0The process of handing off your designs continues; you still need to be there for your team while they realise your vision. If adjusting just one detail may improve their lives, then it\u2019s a no-brainer.<\/span><\/li>\n<\/ul>\n<\/div>\n
              \n
              \n

              Try out some different tools.<\/span><\/h4>\n<\/div>\n
              <\/div>\n<\/div>\n
              \n
              \n
              \n
              \n
              \n
              \n
              \"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
              \n

              Creating digital things is rarely as simple as our \u201cdrag and drop\u201d workflow. When you\u2019re coding, your hands seldom leave the keyboard since that\u2019s how you construct everything.<\/span><\/p>\n

              Sometimes, we need tools to bridge the gap between our workflow and engineers.<\/span><\/p>\n

                \n
              • Webflow.<\/span><\/strong>\u00a0You don\u2019t need to know how to code to use this online tool, as it will generate your designs as a live HTML page. You can construct your website with pre-made components and customise its appearance as you see fit. If you want to learn more about CSS styling and components, this is the right tool.<\/span><\/li>\n<\/ul>\n
                  \n
                • Origami.<\/span><\/strong>\u00a0A Facebook-made prototyping app. It works well with Sketch, but I\u2019m recommending it primarily because it will alter your approach to designing user interfaces. You won\u2019t see them as patterns but rather as a structure of smaller parts.<\/span><\/li>\n<\/ul>\n
                    \n
                  • Framer.<\/span><\/strong>\u00a0Just another prototyping tool that requires you to know your way around structure and code. It\u2019ll take some getting accustomed to, but practising making your ideas into reality is excellent.<\/span><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n

                    So what do I do now?<\/span><\/h3>\n
                    \n

                    We may streamline our processes by learning the fundamentals of the tools we create interfaces for.<\/p>\n<\/div>\n<\/div>\n

                    <\/div>\n<\/div>\n
                    \n

                    One thing that annoys me about expecting designers to make production-ready code is that it needs to cater to designers\u2019 unique needs. If you want to make mobile apps, knowing HTML is a must. No one thinks you have to memorise this information; you can still use it if you don\u2019t know how to fix your car\u2019s engine. How would you use your knowledge of React as a print designer?<\/p>\n

                    As creatives, we should only be satisfied with being the best at what we do. If something requires some research and development, that\u2019s great. And if you don\u2019t, that\u2019s fine, too. If there is something you feel you need to know but don\u2019t, go out and get it.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

                    Six of the top ten most sought-after skills online are all related to code, and if they want to succeed in today’s design industry, designers need a deep familiarity with the technology and coding skills necessary to build and manage successful digital products.<\/p>\n","protected":false},"author":2,"featured_media":117940,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[82,83,84,42,85,86,87],"class_list":["post-117926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-experience-design","tag-back-end-developers","tag-coding","tag-design-industry","tag-design-team","tag-front-end-developers","tag-full-stack-developers","tag-interface-design"],"_links":{"self":[{"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/posts\/117926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/comments?post=117926"}],"version-history":[{"count":2,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/posts\/117926\/revisions"}],"predecessor-version":[{"id":117941,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/posts\/117926\/revisions\/117941"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/media\/117940"}],"wp:attachment":[{"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/media?parent=117926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/categories?post=117926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/tags?post=117926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}