dunmoyerdesign

Blog ✎

Some quirks, rants, and solid-gold design discoveries

User Interface-off

History of UX Tools

This post is more of a reflection of my journey through user experience design and getting a better sense of what’s to come in this exciting realm. When all is considered, UX/UI is a rather new label, but an existing concept. To get a bite-sized sense of a UX lesson, I highly recommend checking out: https://lawsofux.com/. I would argue that UX/UI to certain degrees should be standardized. When systems work and are accessible and recognized, it’s concrete. Semiotics play a huge role in UX/UI and I attribute it to signs like a stop sign, or in UX terms, the red “x.” There’s a meaning and a purpose that needs to be described. It’s an exciting challenge that keeps me up a night, but inspires me to find the answer. All this said, you need the tool(s) to make this vision come into reality.

Screen Shot 2019-08-23 at 4.04.13 PM.png

When it comes to graphic design tools, it’s pretty set that Adobe is king. Rightfully so, photoshop changed the very world in which we live in. You can read more about that history here. Graphic design is covered, but what about the graphic design digital fringe? What about UX/UI? Sure this could be encapsulated by the term “graphic design” but that’s too limiting. UX/UI requires a more specific tool that can quickly replicate, prototype, and apply itself to web. Illustrator perhaps seemed like the best choice, but illustrator is just too robust. Layers get lost and locked into themselves. Art boards prove to be defunct when the dimensions are off by just a slight bit for web. Vector or even more specifically, SVG files, prove to be ideal for web, but the transition from illustrator, to developer, to front-end is frustrating and futile as each component needs to be painstakingly picked apart. In short, it wasn’t ideal.

1_6aS3wg7w4KZqX3w5HDiIpA.jpeg

There needed to be a better solution. Web design took off rapidly and still continues to be the platform of choice. Good design also increases the credibility of your brand, and therefore, more customers and engagement. When it comes to mobile design, if your website isn’t responsive—forget it! Almost 60% of all internet access is done through the phone and 50% of total e-commerce revenue comes from mobile platforms. These numbers are only growing too. 

It’s insane to fathom this, but between December 2013 and December 2015, smartphone internet consumption grew by 78%. Thanks to the Christmas gift of a smartphone and a decent phone plan. Essentially, however you choose to design the website, mobile needs to be the focus. 

https://learn.g2.com/web-design-statistics

That’s when Sketch was born in 2010, just on the crest of the digital wave. Sketch is a factor graphics editor (like illustrator) and is unique in that it doesn’t include print features and can only be used on macOS. It flawlessly creates art boards that are to the web specs and mobile specs. From iPads, to Kindles, Google Pixels, or Samsung Galaxy phones, you can design to the correct proportions. Finally, assets are easy to manage as you can export your design files for the developers flawlessness and at retina display, no less. Internally, the system became much easier to manage and work with. 

2-Match between system and the real world.jpg

The final piece that was needed was a way to prototype, or present the design so that the client, boss, investor etc. This final piece would showcase not only how the interface would look, but how it would work. What happens when you click “X” or collapse “Y?” This is when Invision saw a need, and quickly filled it. In 2011 Invision was debuted as a “simple prototyping tool.” Designers could use the tool in tandem with Sketch to present their designs, build out the experience, and then send off to the client or developer to provide feedback or approve. Overall, it was the final key to unlock the process of idea, wireframe, design, and then finally, presentation. It’s all how you package the design in the end that really sells the idea.

So now the tools are in play, and UX/UI is becoming more of a household name especially in the designer home. With this increased exposure and industry realization of the value of UX/UI design, developers are beginning to create more tools for the evolving Experience world. In short—the UX tool market is now oversaturated. There’s Sketch and Invision like I described before. Zeplin, Figma, Framer X, Mockplus iDoc, Mockflow, Balsamiq, Webflow, Flinto, Framer, Rapid UI, Hype 3, Principle, UX Pin, Oragami, Motion UI, even Adobe has a product called XD that’s definitely a strong competitor. There are so many tools now that it’s extremely overwhelming to even begin to understand what tools are best for your process. UX/UI designers seem to be at an all-out tool war over which is best. Figma vs. Sketch vs. XD vs. ???. It’s rapidly changing and continues to perplex me.

logos.png

Read a really well written synopsis here: https://www.smashingmagazine.com/2019/04/sketch-figma-adobe-xd-ui-design-applications/

The issue I have is not being able to foresee what app will “have the legs” so to speak. What app is going to truly prevail and be the best possible tool for UX/UI. I’m concerned that it’s too soon to tell, but it’s too naive to completely ignore them. Give yourself the opportunity to at least download the applications and poke around. If a new web project rolls around and you have the time to set it up in a new UX program, I would highly recommend it. Designer input and exposure is the best way to provide feedback to the developers and investors to make these products exactly what UX/UI and product designers need.

Heather DunmoyerComment