Thinking Like a Dev and Design System Refinement
As a UX designer, I set out to make designs that are compatible, inclusive, accessible, and ideally a joy for the user to interact with. A lot of my time spent as a designer is spent engaging in divergent thinking whereby I’m deep in rabbit holes conducting user research, experimenting with design concepts, researching what the hottest and latest design trends are, and generally being incredibly selfish in creating and developing my concepts. One thing I’ve realized recently that has been a game-changer for me is refining my DesignOps processes and making sure to think about the Ying to the UX Designer Yang during projects, the developer. I’ve come up with some tips, processes, practices, and other helpful advice to help you make your designs effective and translatable to developers, save yourself time and hassle overall during the project, and help maintain a good relationship with everyone working within the team.
Thinking Like a Developer
From the get-go of a project, you should be keeping close contact and a ping-pong-like relationship with the developer chosen for your project. Developers and all stakeholders need to be involved from the get-go. Ask them what constraints the project might have, what their ideas are, what they think could be changed and should be kept in mind when you make your designs. Throughout meetings ask their opinions on the work you’re doing, even developers are creative and can help you make connections realizations that you otherwise might not have had without their input. It’s also important to compromise and adapt a little bit to the developer you’re working with’s processes. You wouldn’t like it if the devs or anyone else you’re working with started telling you to adapt your processes and skills so it can be really beneficial for your project to ask the devs how they like their files to be delivered, how they like to meet and how they like to work. This will improve your workflow and show you are willing to compromise and create a bridge between you and the dev.
I can’t code! Why do I need to know about HTML, CSS, Javascript, and JSON?
If you’re going to create an amazing handoff file to give to the developers and make everyone happy with the work you’re doing, I’m afraid you’re going to at least need a *basic* understanding of the language they speak in. How can you talk to people without knowing their language to at least a basic standard? You wouldn’t start speaking your language to someone who doesn’t speak your language expecting them to understand you now would you? A little bit goes a long way. First, let's start off with HTML and the role that plays in design. Coding a site in just HTML lets you make a rudimentary website. Think of it as having a pencil, some markers, and a piece of blank paper. Once you’re finished drawing, you can share copies of this exact page as it appears. No frills, and every time it is loaded, it is the same. CSS then adds to that as CSS is a language that modifies how your HTML looks. Instead of just a pencil and blank white paper, here’s a ruler, graph paper, scissors, and other stationery. Before with just HTML, you had little control over placement, but now that you have the ability to cut things out and place them exactly where you want using specific measurement, your control is now expanded greatly. Javascript then enables your webpages to become “dynamic”. This means that your drawings can now be manipulated after the page has been drawn. Simple Javascript will allow you to show or hide elements, move stuff around on the screen, and have basic user interaction. JSON then adds onto Javascript as it is a text-based data format following JavaScript object syntax, which was popularized by Douglas Crockford. Even though it closely resembles JavaScript object literal syntax, it can be used independently from JavaScript, and many programming environments feature the ability to read (parse) and generate JSON.
JSON exists as a string — useful when you want to transmit data across a network. It needs to be converted to a native JavaScript object when you want to access the data. This is not a big issue — JavaScript provides a global JSON object that has methods available for converting between the two. By having an understanding of how your design is translated to these programming languages you can be aware of the limitations of how your design will be implemented and make informed designs that don’t cause the devs to roll their eyes when you send them your work. Time is thus saved by reducing the likelihood of iterations and you can spend that time focusing on the details of your work and making sure it’s refined and of an extremely high standard.
How can you improve your workflows and deliverables?
Here are some tips and design workflow practices you can implement to further improve the quality of your deliveries and become a pro. It’s important to document and annotate your designs extensively which means annotating the fonts used, spacing, design systems, modular systems that exist within the design, interactions, and animations. You can utilize a variety of tech solutions that are really easy to use and provide a range of functions to communicate what you’ve been working on such as pivotal trackers, Trello, Invision, Figma, and Anima. Following this, it’s important to be really organized. When being organized makes everything much easier for the developer to work with your work. This means having pixel-perfect layouts, consistent naming, and labeling of elements, assets, and components, consistent spacing, and overall a focus on consistency within your design! Keeping all your notes, files, designs, emails, and documentation that may help out and be relevant to the dev makes things easier for everyone involved. What’s very crucial to focus on is refining your design system.
What is a Design System?
Defining what a design system is can vary depending on who you ask. UXPIN.com defines a design system as “The complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.”. Medium.mus.li defines a design system as “…essentially collections of rules, constraints, and principles, implemented in design and code. These 3 attributes serve distinct functions and provide coherent, systemic order in systems from buttons to single-page applications.”. freecodecamp.org defines a design system as “simply put, a design system is a collection of reusable components to tie whole products together.” CSS-tricks.com defines a design system as “everything that makes up your product — from typography, layouts and grids, colors, icons, components, and coding conventions, to voice and tone, style-guide and documentation, a design system is bringing all of these together in a way that allows your entire team to learn, build and grow.”. These are all slightly different but share the commonality of mentioning a collection of guidelines, principles, and assets that are relevant to a business with the purpose being to help the business's team to learn build, and grow.
Design System Tools
There are a plethora of different tools at your disposal that can be implemented to revolutionize and improve the creation and delivery of design systems. The standard for creating UI and one of which you can create design systems within with ease is Sketch. Sketch is most popularly used for the actual creation of UI Design but it’s just as useful for creating and organizing your design system and there are also a variety of product plugins you can add to your Sketch program to make collaboration, organization, and implementation of the design system easier. A common and popular product bought for the creation of a design system is Straple. Straple is a plugin and product to be used within Sketch which helps designers by giving them access to 100s of atomic design components which are all fully customizable, enables designers to effortlessly update designs throughout a project from the brand to interface, and allows designers to share their work effectively with the rest of their team and the client. RenameIt is another plugin that helps users in being able to collectively rename and maintain consistent organization within their design components. ReactSketch.app can also be utilized by designers in their design systems as managing the assets of design systems in Sketch is often complex, error-prone, and time-consuming. Sketch is scriptable, but the API can often undergo changes. ReactSketch.app provides the ability to build reusable documents in a way already familiar to JavaScript developers.
Outside of Sketch and the plugins you can implement within that program to improve your design system creation and management there are also a variety of programs and tools which can further improve your design system experience. One of the most popular for design system creation is Figma. Figma has features such as Searchable assets, Shareable Styles allowing for the creation of styles that anyone can use and apply to any object, and the ability to publish libraries filled with all your shareable assets — icons, backgrounds, images, avatars, fonts, and more. Another crucial program used by designers to easily hand off their work to developers is Zeplin. Zeplin can be implemented within Sketch and allows you to export your work and be easily shareable with your team, link style guides and documentation to multiple projects so developers can reference your design system across all of these projects and bridges the gap between the languages designers and developers understand.
Your Tool Chain
Within UX design you’ll develop your own toolchain within your team and what this means is utilizing different programs, processes, and tools in order to get the job at hand done in a way that is productive, easy, organized, and appropriate. For example, a toolchain may consist of utilizing pen and paper and a workshop to develop initial ideas and wireframes, then using Sketch to develop your UI, Figma to organize your design system, and Zeplin to output your work in the handoff to developers for them to implement your designs. Along the way, you may also utilize plugins, templates, and libraries at your disposal to refine, organize, and revamp your work. The toolchain can be decided as a team during the preliminary meetings you have at the start of a project in order for everyone to be on the same page and for all perspectives on what tool is best and most appropriate for the work being done. Outlining the toolchain early on in the project makes sure that everyone is creating compatible work when sharing it with one another and that the likelihood of complications between different areas of a team, especially between designers and developers, is reduced.
Overall, there are many ways that you can improve your design workflow, work with the dev in mind, and implement design practices that will improve the standard of your work, thus making things easier for yourself and saving time on your project by reducing the likelihood of fixing mistakes and making tweaks. It requires learning to understand the language the devs speak in, but you’ll be doing yourself a massive favor breaking down the barriers between the designers and the devs and overall your projects will become easier to complete, faster to complete, and be completed to a higher standard.
Below I’ve also included a rubric created by vaexperience which gives you a nice breakdown of the different tools you can use and comparing them based on the metrics of prototype fidelity, price, ease of use, versatility, time to master, and future relevance. There’s also a rubric I made comparing some of the tools I use and their pros and cons.
