If you work or live with anyone who has anything to do with designing or building websites, I’m sure you have heard all about Adobe XD. I tried XD almost a year ago, shortly after it came out, and I have used it exclusively for UX/UI design since then. I admit at first I was concerned by the lack of features. I had used Photoshop for over 10 years and wondered how I was going to get the look I wanted with so few tools. Then I realized that to build a true, efficient interface that loads quickly and performs great for a user, those are probably the only tools I needed. I was amazed at how quickly I learned to use XD and how fast I built out my work.
At Fluid, we build a lot of websites. With six designers on staff, it’s safe to say at any given time each designer has at least one to three sites or apps to work on. We have a proven four-step process for UI/UX design.
The Planning Phase
Step 1, we download with the client to learn about the site’s needs and goals. From that meeting we produce a sitemap.
The UX Phase
Step 2, we then wireframe the UX. This step is critical. We need to make sure we get each feature on each page right before we go through the design process. It’s much easier to make changes to a bunch of grey boxes than it is to detailed design elements. Adobe XD, is great in this phase. From the first few pages you can build up a library of symbols to represent photos, text blocks, login elements and more. Once a symbol is created, it can be reused time and time again with quick drag and drop. UI design is all about creating systems for users to perform tasks. Once those systems have been defined, the process of laying out pages goes much quicker.
The UI Phase
Step 3 we create Style Tiles and homepage mockups. Again, XD really makes this process fast. It’s quick and easy to experiment, discover and define a style to be used across the application. At this part we choose one style with the client and then move forward with step four.
The UI Phase – Part Two
Step 4. We design. This part is made easier and faster because we made all the hard decisions with the wireframe and style tiles. XD makes if fast because we have our symbols, character styles and colors already defined. Now we have fun and put everything together.
With XD’s prototype feature, we can link objects to pages and create a link to share with our clients so they can experience the prototype as if they are browsing a freshly developed site. Collaboration is made easy with the ability to share feedback.
If you haven’t tried Adobe XD, you should. You will be impressed. With the amount of web and apps we produce at Fluid, it has saved us time and headaches and has made the experience really fun.