UX/UI – from design to implementation

Great ideas always start with a draft sketch. To be honest, bad ideas may start with that, too. It may be something you think about or something you doodle on moleskin pages, or even the wireframe you scratch on a napkin with your toothpick. Then these sketches need to be turned alive, and imagine the confusion when you bring that toothpick-pierced napkin to the architect or furniture manufacturer or whoever implements your ideas.

For a sneak peek at the most mysterious team — UX/UI magicians – here is a quick look at tools and resources we use while creating great UIs and share the awesomeness with our frontend guys.

Material Design

While this thing is huge, we use just a little part of it, though it covers most of the topics raised during the design process when it doesn’t come to UX.

Story. A couple of years ago, Google decided to formalize their new design language and came up with the concept of so-called Material Design. Even though it got away from the actual “material” part, the guidelines are still there and are constantly updated. It describes how the design elements look, act and interact. What happens to the “Enter your email text” field when the user clicks? Should we replace the placeholder text or move it up? It’s in the guidelines. What happens when the user clicks the table header? See the guidelines. What if search returns no results? Google offers a section of Material Design guidelines for that.

Usage. With glomex, we use Google Material Design Guidelines (GMDG) as reference and source for the icons we use on our Media Exchange Portal. Keep in mind: this thing is global, so whenever we use any solution described in GMDG, the frontend guys can easily find the solution already created using their faved react components. Tweak this, tune here and we have the thing we need. Talking about icons, using the default ones just improves the process of handling the assets. We save by using the Material icons instead of exporting miscellaneous assets in all those retina-ready resolutions and svgs, but just use the Material icons. Both designers and frontenders. This may look like cheat or shortcut but with our fast growing business, every minute saved on process means time to improve user experience. Which we aspire to all the time.

Sketch

Well, this is basically the tool where all the magic happens. UX/UI team designs all the stuff there. Starting with wireframes (if needed) and finishing with the final designs to be coded and turned alive.

Story. Some time ago all the designers were so Adobe products oriented that it seemed nothing would ever change. But after a while, Bohemiancoding presented their buggy glitchy vector graphics editor. ‘Well, at least it’s better than Photoshop shapes’, most of the designers thought and things had been set in motion. Nowadays, Sketch app is like a standard for UI designers because it just fits the needs. Not as powerful and flexible as Adobe products, it is still pretty enough for almost any task a UI designer may meet. Starting from wireframing and finishing with crafting the interactions and creating clickable prototypes.

Usage. So, the UX/UI team really designs all the stuff in Sketch. Okay, we still use Adobe Photoshop to prepare the bitmap graphics and sometimes Adobe Illustrator to create perfect selling PDF whitepapers, but the UI stuff is done in Sketch. It has components, rules, useful plugins and other stuff designers get mad about, like Invision Craft. Having this plug–in, you can automate lots of the routine processes, like filling the designed table with content, or selecting the images for placeholders. In a perfect world, I could add two thirds of design to the wireframe using just this plug-in.

Last but not least, as Sketch is so common, it is supported by many other products. Two of those will be described next.

Invision and Zeplin

The first of these tools — Invision — is for creating clickable prototypes and reviewing the design. We just upload the stuff there, create click-through dummies and everyone involved in the process may browse, examine, ask questions and take into production. This is the place where the processes are described, shown and tested.

But that’s not enough to transform the designed pages to what clients will see in their browsers. One of the ways is to install Sketch to all the persons involved in the process, so they could check the sizes, colors, etc. But doesn’t it look redundant to buy a restaurant for the person who just wants to have a lunch? This is the moment Zeplin flies in. The design team just uploads the designs there and other teams can examine all the paddings, margins, colors, sizes, corner radiuses etc. of any element of the design by just clicking on it. Lunch served!

This is a brief look at the tools we mainly use now. I’d be happy to share more details and information on the exciting UX/UI process, but we have some scenarios to improve. So thank you for your attention and see you next time.

 

Genn Osipenko UX/UI Designer

Looking for an advertising network that guarantees brand safety, viewability and seemingly endless premium inventory?

Advertise with us.