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

Simple things you can do to get the most out of working together.

UI designers job can be made painfully irrelevant when working on projects that have solved all the problems before they get to them. Over the years I’ve noticed some techniques that make designing websites and apps with UX designers much more meaningful.

Get in on the first meetings.

Start at the same time, coming into a project after all the decisions have been made is not going to get you anywhere, get a seat at the table.

One of the best skills a UI designer has is sitting in a meeting, listening to what people as saying, going away and mocking up what that looks like. That is a powerful skill gives common ground to the problem you are solving and makes your designs the centre of attention.

1. Invite yourself to the kickoff meeting
2. Listen to what people have to say
3. Define the problem with the UX designer
4. Find other sites or apps that solve the same problem — with and without the UX designer
5. Mock it up in Sketch, argue with the UX design until you are both happy.

In order to make a product, service or site really function the UI and the user experience need to work together, this means we both the UI and UX designers need to work closely together.

Working closely means sharing a desk, moving to laptops and going to a neutral location. The trick is UX designers like to talk about users, UI designers like to work up experiences in Sketch.

prosymbols

Design while you listen.

If UX designers best describe ideas through talking, UI designers are best at mocking up what something looks like and how that really working as a design in practice — literally what the end user will see and experience.

So sit together, let the UX designer talk your ear off, argue, discuss, sketch but always work up the design as you go. It’s hard, painful at times, but the finished product on screen give a powerful common ground that you can discuss and share with other people — just link it up to InVision.

This single process of working together produces the most successful and visually stunning designs I have seen in my career.

Avoid colouring in at all costs.

This is a big problem when working with new UX designers. Colouring in wireframes is most demoralizing process a designer can go through. If you ever get asked to do this just get the UX designer to colour it in-the project clearly does not need UI design if this is the case.

The wireframes or layouts provided by a UX designer should be used as a guide. They tell you what needs to be on the page, the hierarchy of that content and the details of each component on the page.

First copy all these elements into your design and go from there. There is no need to follow any layout or structural suggestions from the UX designer, they are really there to explain to the client how the site or product works, not how you should design the UI.

The rule of thumb in our studio is that if someone walks past and says “that looks like a wireframe” then you have failed.

If the design looks like a wireframe, if I can see the structure that makes up the components on the page before I can see the page, then the design is working hard enough. This is delight for the user. The structure the makes up the UX should not be visible to the user, this breaks the “experience”.

Design the experience.

Ultimately it is the UI designers job to craft the end user experience. Apple products have incredible end user experiences which is often down to the craft and delight of the UI, something the upfront UX wireframes lack.

Designing the experience sometimes means making prototypes, this might be the job of someone else or if your a small team that job will be yours. Often you have to initiate that a project needs this, this could be a clickable prototype in InVision, a After Effects animation of an interaction or and app mockup of which there are plenty of choices.

Always pick the most important part of the experience. Figure out the users goal and make sure that experience is flawless.

Iteration.

Designing with UX designers at hand means making many iterations, this is hard if you like to sketch a layout then mock it up because it is not about making something higher and higher fidelity, it’s about testing the final design against your expectations.

Grab people around you that are not involved in the project and get quickly user test them, get the UX design to ask them questions, this gives quick feedback is perfect for iteration.

Many of my files while working with a UX designer talking in my ear for 6 hour stints result in Artboard names like Homepage 1400px filter copy copy copy 86.sketch . It is very normal to have literally hundreds of artboards in Sketch files, this is useful incase you ever need to backtrack on your thinking or test versions against passers by in some quick user testing sessions.

Conclusion.

UX design is still evolving as a design disciple, every UX designer I’ve worked with has their own style and skill sets, what’s important for UI designers is to know how to get the most out of your UX designers while maintaining delightful user experiences.

If you liked this post and would like to talk about design — feel free to reach out at zakarykinnaird.com or find me on LinkedIn I’d love to have a chat.

Working with UX designers to add value. was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Working with UX designers to add value.

Cool stuff, every week

More Articles