UI Design from a Developer’s perspective
I’ve always wondered about what it is like to design UI.
How it feels to have to power of not writing a single line of code, just cropping, dragging and cutting images with ease and come up with beautiful interfaces and smooth interactions.
How does it feel to be the great dreamer, the visionary that comes up with all the cool ideas without the pain to have to constantly worry about structure, bugs, efficiency and testing.
Sometimes I feel jealous that the designers get to be creative and come up with all these fancy animations that look sparkling in prototype, and us developers have to do all the dirty work and figure out all the nitty gritty details, making expensive work arounds just to satisfiy your dreamy imagination.
So I set out to learn Sketch, found out about the 100 days of UI challenge(where you design a UI element with a different topic each day for 100 days straight). I want to make sense of the world of a designer and thought to myself, “1 UI everyday, how hard could it be? All I gotta do is create some buttons, drag in some pictures and make it look pretty, 🍰 ”
Day 1, The first topic was to make a login form and this is how the example looked like:
In my head “SIGN IN, SIGN UP, USERNAME, PASSWORD, Forgot Password? totally makes sense. Not bad, not bad.”
As soon as I opened up Sketch and try to come up with my own, my mind was blown of how different it is than I imagined. Not the technical part of it, that takes practice I understand. I got so frustrated at designing the flow of it,
“If I want to let users login with Facebook, Google or Linkedin, how should I layout the icons?”
“If I have it all in one page, how do they know if the info they put in here is for logging in or signing up?”
“Is there a difference between signing in with facebook or logging in with Facebook? How do I differentiate them while there should only be 1 facebook icon on screen? or should there be 2? no wait…”
My final product ended up looking like this, it’s shit. There’s just something not right about it that I can’t put a finger on.
I was so accustomed to getting UI specs from my designer and be like “oh ya of course this is how it should look like, makes sense, looks good. Let’s implement it!” But when stripped of everything and starting from scratch, all of a sudden, I didn’t know where to start anymore and felt helpless.
Building a product is like building a house,
Design is figuring out how to make life easy and comfortable for the people living in the house.
- Planning where the entrance should be, where the exit should be, how many entrances and exits, picking the best color, decide where the doors are, how many rooms, what would be the best arrangment of the windows, should there be a frontyard or backyard…
- its not just about picking what looks good with the best color, its understanding and imagining yourself as the person or family living in this house and how and where to put things to make life easier. Not only do you need to know how many people live here, you also need to know what are their habits, what do they like to do, are there any pets, kids, smokers, old people?
- There’s a lot to consider in user experiecne that deeply effects the user interface of everything you design.
Development is deciding the best way to build the hosue that is safe, sturdy and easy to repair.
- What material to use that will last long and is best fit for the functionality of the house.
- What structure and pattern should we follow to make it easier for the person who might be working on it later.
- What if we were to repair it one day, how do we design it so it’s easy to replace broken pieces at the lowest cost possible without breaking other parts.
- How do we make sure it won’t break under all possible circumstances and avoid all catastrophic possibilities.
While the 2 are very different from each other, yet they are so deeply intertwined.
A designer should design with logic in mind, prototyping the view hierarchies in a way that looks good but also respects reasonable structure. Create animations that not only look cool but reflects a meaningful data driven action. Design behind data, including all possible and empty states.
A developer should look and try to understand why the UI is designed the way it is, the reason behind every interaction and provide meaningful feedback that the designer might have missed on things that could go wrong in unpredictable situations where the design would be paradoxical.
Just like what Atticus Finch said to Scout in the classic novel “To Kill a Mockingbird”,
“You never really understand a person until you consider things from his point of view . . . until you climb into his skin and walk around in it.”
Trying out design was a big step for me, but learning new things is always refreshing and broadening on perspective, which enables better understanding, communication and knowledge. I’m not suggesting developers should try to become designers or designers should try to become developers(though being able to do both is indeed a trend today), but it never hurts to understand the otherside of the story a bit more.