How diving deeper into the world of programming has made me into a stronger designer.
I started my design career as a visual designer with a focus on branding, gradually transitioning into web design and development, and then further into Product Design. I believe the phase in my journey where I dove deeper into the world of programming has made me into a stronger designer today.
A question I often hear from fellow designers is:
Should I learn programming as a designer?
Therefore, I got motivated to write this article by sharing my experience. In this story, I’ll go through some of the areas where skills from development have strongly influenced my design capability and decision making process.
TLDR: Starting as a visual designer, learning web development and programming applications to expand my services as a freelancer. Transitioning into product design with the knowledge of responsive design, hierarchy, page optimization, accessibility, and leveraging processes that I can utilize for design. Eventhough building rails apps and learning programming concepts has not directly improved my employability as a designer, knowledge of web development has allowed me to wear multiple hats and has taken me to be involved in projects I otherwise wouldn’t have had the chance.
How it all started
In 2009, I was doing visual design and managing a website that was built in PHP, HTML, CSS, and a bit of jQuery. I was responsible for doing simple updates on the front-end code. I had done a basic website development course during my undergraduate studies prior, so I was somewhat familiar with the basics of HTML and CSS.
One day, working in a small business, a booking form powered by PHP stopped working — this was one of the most important features of the service. I had to try my best to find a solution on how to fix it without any prior knowledge of $PHP. With the help of searching for clues online, Stack Overflow among others was one big helping hand and I surprisingly managed to get it fixed. What a great feeling that was.
Around 2012, I started to do freelancing. I did visual and print design work for a bakery, travel service, startups, etc. and a lot of the clients I worked with asked if I could do websites. This re-occuring question made me want to dig deeper into how to fully develop a basic website with HTML, CSS and JavaScript.
After studying and a few mock projects later, I was let to design and develop a website for a previous client without prior experience. The websites I developed from here on were built on raw code, making updates by the client a bit more troublesome. However, due to the rising popularity of open-source CMSs, such as WordPress, another new door opened. I could apply some of my skills from before to Worpress and provided clients with a solution that they could update themselves in the future.
As time went on, I was getting more into programming, and went on to do This is CS50 from EDx/Harvard Online, courses on Code Academy, learned Ruby, did Ruby on Rails app tutorials from Michael Hartl for probably about 15 times with different ideas, messed up setting up environments properly on my VPS, SQL, SSH keys and certificates, creating an email server, and more.
However, one thought I was debating during all of this was whether I should continue to move more towards development or shift the focus back to “stricly” design.
I chose design, again. Learning about these technologies was exciting, but I felt I enjoyed design more and should focus on one more than the other – I guess there was a fear of becoming a jack of all trades, but a master of none. Even though I decided to continue focusing on design, a lot of the learnings from that period are still valid today, which I will highlight below.
Let’s go!
Alternative Text input dialog on Medium
Accessibility, SEO and Content Strategy
I dropped some tables in SQL, pushed and pulled in GIT, apt-get some programs on a Linux system and redirected around Apache. Did these enhance my skills as a designer? If I’m honest; not really.
However, if you are working with <strong>web products</strong>, I do believe it is beneficial to know the basics of HTML and CSS.
Knowing the basics of HTML/CSS and how they can be used to build websites can help you to:
structure and optimize content for user experience, performance and search engines on the web.understand how responsive design works, i.e.: how containers and columns work together, responsive typography, what are clickable areas, etc.
There are a lot of available tools for analyzing SEO and site performance — combining it with services such as Hotjar can really help to know how users are interacting with your site, enhancing the page experience and performance for the user. In addition, considering how might we go about the SEO of a page allows you to tailor the content and language of a page for effective communication.
Page title, page description, URL slug/pretty permalinkKeyword. Thinking of one keyword to describe a pageLenght of a <H1> heading, <H2> headings and <p> paragraph text. Images optimization, alt-text, etcPage (UX) language, internal anchors, backlinks, sitemaps, social handles/meta data
Would the designer need to know the syntax for these above and how to apply them? It surely can help. For example, knowing that a page should include one H1 title, and can include more H2 tags — Steps for a well-structured layout, SEO and clear hierarchy. How easily are the users finding information on a page?
Adding an Alternative text (a.k.a ALT) improves accessibility by supporting screen-reader tools to describe images to visually-impaired users and allows search-engine crawlers to know what the image is about. Usage of Alt text is often seen in web apps, and also on social media platforms. In addition to images, it can be applied to charts, graphs, icons and other graphic materials. Medium also provides writers with the ability to use Alt text on images for better accessibility.
I studied a lot of SEO and page optimization materials, the markup and constantly analyzed changes — I do believe this taught me to create and structure page content in a stronger way, than if not having being exposed to these elements at all.
Understanding Responsive Design
Besides breaking points, understanding how responsive design works can help you to enhance the page and user experience.
In the example above, there is an order rule applied to the columns within a container that can make the reading experience more consistent on mobile devices. This all depends how you structure your column layouts and how many columns there are in a container. I learned a lot about media queries, using design as templates, and how containers work with columns by utilizing Bootstrap.
Headings communicate hierarchy and makes the content easier to scan. How could we keep them not spanning across the screen on smaller devices? Responsive typography. Learning about pixels, ems, rems, etc. has taught me to consider responsive typography across viewport widths. When working with responsive images, in addition to adjusting the image size based on screen size, you can also consider setting minimum or maximum width or height rules to images — if this is a design choice you are after.
I came across these kind of issues often when I was working with design templates in blogging related systems. The layout from the user perspective worked very well when used on a desktop viewport, but readability suffered when transitioning into smaller screens.
A simplified example showcasing different outputs when typography inherits size and is responsive on mobile devices, as well as as inheriting icon size vs. having a maximum height rule.
Constraints and Scalability
I often designed and developed websites for clients that needed the ability to update the content themselves in the future. During the design and development phase, I could create any part of the site to follow my designs. However, I shouldn’t expect the client to be able to design and code when they would manage the site. This is something I learned through trial and error.
The end-user who will be using your designed and developed product shouldn’t need to start learning design or development skills just to use it. Therefore, one aspect to consider is the technological and user-generated content constraint. This can help to design solutions that “scale” and stay visually consistent beyond the delivery date.
I often created a user manual covering the basics of updating a site, but if the guide needs extra inserted inline code blocks multiple times, it might be good to re-evaluate the design decision or create the feature directly into the product.
Consider who you are designing for and how they utilize and interact with your solution in the future — This is a fundamental for design, but I got to say it was very impactful to experience it with a client.
Browser Compatibility, Differences Between Operating Systems and Devices
Not everything will necessarily look and work exactly the same way across browsers or operating systems. Sometimes that is ok — Should you compromise? The engineers you are working with are the masters of their craft and can advise on the best action to follow.
One example I had was with the execution of a Blur effect on iOS and Android devices. A blur effect (Blur in Figma) worked directly on iOS, but not on Android. The compromise? Same final output as desired, but different execution. In this case, instead of directly using a blur effect on an image itself, a blurred image (pattern) would be placed on top of the original image to create the same outcome on both devices.
Often times the initially proposed design might be turned down. There might be different reasons as to why, but the point is that it is worth discussing the detailed reasoning, and possible ways it could be solved.
File Types, Performance and Interaction
Performance and speed are some of the crucial elements of a good user experince. One big influence on the load time of your product might come down to file size, the amount of animation and how much resources they might be using.
For example, allowing users to query and show live results through all their 1-year transaction history live might take a lot of resources in the backend, multiple that with a million users and depending on infrastructure, this may take a toll on the system. If there are such constraints, may need to dig deeper on what could be possible by talking to engineers.
Should the designer go for a GIF, aPNG, WebP, Movie-files, JSON/lottie-files, embedded content from elsewhere, or something else? When developing solutions, I explored with different file types and each have their pros and cons. aPNGs can be lightweight and clear in comparison to GIFs, but may not run on all browsers. Long form content might work best with video, etc.
A good discovery has been to know about the existence of Lottie-files and JSON for micro-animations, which opened a whole new world. Creating these might not fall under the responsibilities of a product designer, but in my case it almost always has, if not then at least I had to talk with a motion designer and define that the output should be a JSON-file. Lottie/JSON has allowed me to better incorporate micro-animations in my design. A lot of animation can also be done with CSS, so experimenting with these different file types and moving image has allowed me to learn that there can be multiple ways to approach a solution.
Documentation, Changelogs and Version Control
Programming involves documentation, commenting, information on changes and version control. My general experience has been that in design these are not usually as prominent.
“asbfkdfjof” file-name is more common than you might think
It can be tempting to focus on pushing up new iterations without keeping a backlog of changes and updates over time, but this may come back to bite you. Adding a date/time stamp and the person responsible in your working document can work wonders — Think for example a Figma page. Similar to GIT, adding timestamps for updates (push), tagging the person responsible and commenting can really help communication within the team.
Proper documentation, changelogs and version control has several benefits for designers:
New members joining the design team can easily grasp changes in the product lifecycle. They can easily identify the most recent files and be aware of how the product has developed over time.Proper version control and organization of user flows and screens allows for quick access when needed.Evaluate design changes. Previous design on May 2024 adoption rate was 0.02%, introducing a new “purchase” button on June 2024, adoption rate improved to 1.08% in 1 month. If there is no previous version to compare to, it will be harder to evaluate.Clear documentation on design systems on how to use a certain element and interaction. For example: a success message is always shown on top, slide in from top .5s, stay visible for 3s, fade out .5s, etc.
Aiming to create an easy to understand processes where designers can easily look up a file that was worked on and by who to maintain efficiency and consistency — a process inspired by programming.
Closing Remarks
If I would ask myself again:
Should I learn programming as a designer?
While I am bit biased, I would tell myself that it is not necessary to try to learn everything. It really depends on what you what to do with the desired knowledge. It is best to learn if you have a specific goal in mind. It not only helps in concentration and motivation, but you are more likely to continue it.
Learning web development has enabled me to wear multiple hats in the role of a designer, which otherwise would not have been possible. This can all vary on the company/product you are working with.
Learning programming concepts and ideas, creating databases or virtual machines on the other hand — has’t helped as much career-wise, but I do believe it has helped me to ask better questions and have a deeper understanding of what goes into creating digital products.
Has learning learning web development increased my chances to finding jobs?
I’d say no. It never really came up during interviews and was not asked during employment. Perhaps I’m lacking in my sales skills as a designer and have rusty interview skills. Only by taking initiative has it resulted in something. I did manage to land projects in my job where I otherwise wouldn’t have, and in terms of freelancing it provided me with significantly more projects and allowing to offer a wider range of services.
If I had learned how to create apps in C#, Java or so — would it have made me a stronger designer? I have some doubts in that as well — again, I’d say it might give me a better understanding of what goes into developing products.
If there is a good mentor who can support your experience when creating digital products, you can learn a lot and fast. Although, depending where you are working, not all designers have access to this.
In short, these learnings have allowed me to have a deeper knowledge of what questions to ask and what goes into creating digital products.
Have you had a similar experience? Have you learned programming or web development? Has it benefitted you as a designer? I’d love to know!
If you didn’t learn web development — do any of the topics mentioned in this story resonate to you as a designer? How did you learn about them? Have you needed them when designing digital products (especially web products)?
Have a great day and thank you for reading.
🌞
If { nothing else } then { end here }.
// Cheers
// Illustrations and images by author
The benefits of learning programming as a designer was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
