Published on | Prototyping: From UX to Front End — Medium BrainStation

Ahoy hoy,

My name is Kyle Markell, I am a directionally challenged Senior UX/UI Designer at Konrad Group, and UX/UI Design Educator at BrainStation; currently getting lost somewhere in the city with my Boston Terrier sidekick, Dobby.

Waking up to stretches and snorts from Dobby is my constant signal that another day of problem-solving has begun. I then pick from my vast array of black, and the occasional grey, wardrobe, pick a design book to read on the TTC and head on down to the KG office.

my very own house elf

The typical answer to the start of the work day would be “I must have my coffee as it is essential in the morning before settling at my desk” and if I’m being honest … coffee is essential in the morning before settling at my desk.

Now that the morning ritual is over, time to get down to business. I will always have a quick catch-up with the Project Manager to go over what is needed from me for the day, and to answer any questions from the team and ask many of my own. I’ll usually get a breakdown of the expectations for the day and then make sure everything is aligned and my time is being used effectively.

Currently reading “The Best Interface Is No Interface” by Golden Krishna

At the senior level, I believe being a good communicator is key.

A UI Designer is a problem solver, but a solution can not be found until you understand the problem. To understand the problem you need to be able to ask the right questions and extract the right information. I know what you’re thinking, “a million questions in the morning?”; I know it sounds like a bug, buuuut it is really the best way, for me at least, to get my brain active. I also use this as an opportunity to socialize with my team and do impromptu brainstorming sessions.

Being able to share and facilitate design discussion, describe desired animations, states and all those little subtle nuances that create cohesion are necessary. I can’t do it all on my own, I work collaboratively to learn and understand any and all limitations we might encounter, the viability of my ideas, and really just making sure it aligns with the project requirements.

After all the chit-chat I’ll head back over to my desk, fire up my iMac, my macbook, and throw on my headphones. Next I decide if I’m listening to Spotify or Podcasts and then open a set of brand guidelines, any wireframes, functional specifications, any content as well as my own working files. Oh and inspiration … all of inspiration that … you know … inspires me*.

I get inspired by things both digital and physical. The other day I was at the dentist office and saw the visualization tools they use for mapping my teeth, as well as x-rays … I’ve always been inspired by x-rays and rorschach ink blot tests. For digital inspiration, I use the extension Muzli, by InVision which is a hub for all my favourite sites including designbetter.co, awwwards.com, pttrns.com, and invisionblog.com

Design Matters with Debbie Millman, is my jam … if you really want to be entertained listen to her interview with Chip Kidd, one of the funniest men I have ever met in my life

Then it’s time to open up the ol’ designer toolbox. What’s in my toolbox you ask? Let me show you. For the past few years I’ve adopted, as well as the rest of the world, Sketch into my workflow. My productivity has increased immensely with the intuitive interface as well as the support and plugins*.

*Even people in the office here make their own plugins to solve problems

The beginning of a project is crucial as you need to set yourself up for success. I know it sounds tedious but you need to establish your folder structure, your naming convention for artboards, name all of your layers and order accordingly, add your colours to your documents, create text styles, create shared styles and organize your symbols. If you skip this step it will slow down your productivity in the future as well as make your files illegible to other designers if you are working collaboratively or handing files off.

You can download an example of a folder structure I use on a typical project

If I need to illustrate any design interactions, which are essential, I’ll open up Principle, which is a lightweight prototyping application, to show the developer team the desired outcome.

If I need to showcase a user flow to a client, I’ll create hotspots in Sketch, import them into a powerhouse web app called InVision, and make some UI magic. There’s nothing more satisfying to a UI Designer to actually put something in people’s hand that they can actually use!

Not just by clicking and moving things, the interface itself becomes useful, the interactions support the user’s actions, they have everything they need to accomplish a task, they feel successful, even if they aren’t aware of it. This … this is magic.

My day also has multiple touchpoints with the teams, not limited to my own, to make sure things are moving at the required pace, also to test my solutions on others, gain outside perspective and have some iterative design sessions with some fellow designers.

I refer to this interactive graph whenever I need to pick the right tool for the right job

I also sit down with the developers make sure I’ve exported all my SVG’s properly into Zeplin, which is a tool we UI designers use to communicate with developers. There they can grab all the assets they need, they can see spacing, they can see everything, which makes me accountable for all the design decisions, and forces me to think as a pixel perfect designer.

During these touchpoints, I am communicating my design decisions and the rational behind it all, nothing is arbitrary in design, everything is meticulously thought of and these decisions need to be communicated effectively. There are many ways to explain the reasoning behind your decisions, but the best and most efficient way to do it, in my experience, is to test it. The only way we can make sure we are meeting people’s expectations is to do user testing. If your users understand your interactions, your mapping of elements, and the choices you’ve presented them; then you are successful.

At the end of the day, I go over what I’ve accomplished for the day, start crossing things off my bullet journal list, save and sign off, then unwind and play some smash brothers with the team and head back home to do it all over again.

One piece of advice I leave for all UI designers and aspirational UI designers is to always be flexible and willing to expand your understanding of other skills. Sit with a Developer going through your designs, have a coffee with someone on the sales and marketing team, read some design books, or better yet why not join me in my classroom at BrainStation where we discuss trends, design patterns, design thinking and constantly ask “Why?” to ev-er-e-thing. These types of experiences will give you a better insight into your own creative decisions, allowing you to avoid solutions based on your assumptions and really find a solution to whatever problem is thrown at you.

Find Kyle on LinkedIn or check out his portfolio here.

This article is originally from the BrainStation Blog.

A Day in the Life of a UI Designer was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

A Day in the Life of a UI Designer

Cool stuff, every week

More Articles