As you learn new design skills and improve existing designs skills throughout your career, your workflow will also evolve. The design community produces wonderful how-tos, tutorials and even full courses on how to solve complex design challenges. Recently, I’ve been interested in how other designers work. I noticed that everyone has different workflow patterns and habits. In this article, I want to provide some insights that have worked for me. Although these are not prescriptive, I hope that you will be able to extract some of these tips and apply them to your own workflow and best practices.
At Devbridge, we work in teams and prototypes are developed through collaboration between a UI designer and a front-end developer. Then, these prototypes are delivered to the back-end team prior to the start of the sprint. In the initial sprints, we use flat JPEGs for client approval prior to any development. But as a project gains ground, some parts of the application can be designed by using existing styles and UI elements with a reduced design effort. In other words, a designer can verbally direct the development team.
Like buildings, digital products usually have some patterns that we can rely on that are somewhat standardized. That is to say, most homes need doors and windows. In turn, most sites need buttons and forms. People usually choose one window frame style that can be applied to all windows, just like you would apply the same style to all your forms on a website. But the real advantage is that the small pieces are assembled into larger elements before it reaches the construction site, which makes the assembly quick and consistent. I use a similar approach to design UI more consistently and efficiently. However, instead of prefabricating a full-page template, I start by creating a library to keep all reusable UI elements.
A thoughtful file structure means you aren’t wasting time searching
Sprint zero: after the research, wireframes and style guide are complete. The structure of my design file is always unique to the project. The page names and numeration are usually constructed to reflect the wireframes. By creating a system of organization and annotating files, I make it easier on not only myself, but also my teammates, whether they are other designers or developers.
Using patterns makes you efficient at solving low-level problems
Here is a collection of buttons and various interaction states. I use very minimal annotations, just enough to build more similar elements.
At this point, I start designing pages that will yield the most elements. Sprint zero is usually pretty short, thus I can only design a few pages. Usually I am very familiar with the wireframes, because I am also a UX designer at Devbridge. If I am using someone else’s wireframes, then I carefully review them to find any patterns and repeating elements. Focusing on UI designs that have the most elements in them first will usually get you the furthest fastest. This may mean focusing on some non-traditional screens. Upon completion we usually share the designs with the client. Very rarely we create multiple concepts; we’ve found more success presenting one concept and collaborating with the client to work out the kinks.
Commitment to annotation helps you and your team
While redesigning myus.com, I needed to create many pop-ups varying in width. To keep the design consistent, I marked up the padding surrounding the content and spacing in between the main elements.
Once these elements start to accumulate, it is very important to keep a very organized and clean file. You should only keep the final versions; don’t use this file for creating concepts. You can also use the tools built into your software to apply style changes universally. However, I tend not to use those built-in tools very often to prevent unknowingly changing the style of one element and affecting the whole document.
The more notes and documentation you have within this file, the easier it will be to build. It also helps to share this file with your team if everything is clearly marked. This library file starts small and grows with the project. Sometimes, I even include notes for front-end developers or notes to myself about certain rules. For the best results, keep it tidy, organized and up to date.
Stay flexible and make improvements as needed
This list had images of varying height. I had to create some rules for consistent spacing between varying elements.
There is no golden rule for which annotations to include. I include the ones that are necessary. For example, when it became challenging to keep track of all the measurements for padding, I started to make visual annotations just for that. This allows me to quickly glance at the style guide to get the info I need. Another convenient method is simply to copy and paste from the library into your working file.
Know how to bring most value with your efforts
Lastly, you should always evaluate the value of your efforts. Periodically, I stop and ask myself how I can make the most impact in the given time with the provided resources. Just like anything else, my designs can always be improved. However, instead of “pixel pushing” and redesigning the same feature in every possible way, we always recommend launching the product, generating revenue, and running user testing to find areas for improvement. Simply put: never stop improving your process
This is not a prescriptive article. These methods have worked well for me, but I am always looking for new ways to keep improving this process. Make sure you test any process to see if it works within your organization. A lot of brainpower is consumed when it comes to creating better UX. Keep your work systematic and unburden to your brain.