Coffee With Two Friends : UX And UI [#Talk]

We are not talking about you, we are talking about Sherlock!

Hi! I am a User and today is the world’s most user friendly day. Today is so special that I can see a silver lining around me. Wanna know why?
Today I am about to take an interview of User Interface (UI) & her brother User Experience (UX) at their home. Yeah! You are welcome 🙂
I am sure this will be good. They invited me because they want to share intuitive tips to help those guys who really want to make their mark in this field. In this almost career oriented interview; You will know what UI & UX really stand for & how you can shine your way with some basic foundations that will lead you to the magical world of UI & UX. Also you will know why they have such great chemistry when working together!
So, right now I am siting between some wire-frames, colors, sketches & stuff and waiting for UI and UX. Oh! There is UI!
Me:  Hello UI! You look lovely & where is UX?
UI: Hello User! UX will be join us in a couple of minutes. By the way, thanks for doing this interview. I appreciate it.
Me: My pleasure UI! You look just like a perfect combination of simplicity and beauty. I think this is the one of your most striking quality, right?
UI: Thanks User! & yes it is. I would say that a simple version of me should be able to relate people more effectively & more accurately. It has always worked.
Me: Okay! Let’s get started with this one, we really want to know what you really stand for? Why people need you? Please describe yourself clearly because there are lots of interpretations around us about you. You know…people talk!
UI: Well! There’s no need to web yourself about my interpretations. I am telling you what I really stand for,
I provide a system for a user to interact with the product / service. The design of this system is a mixture of needs, experience and assumptions.
If I talk about the purpose of creating me then it is true that my designs vary according to the idea of creating me but the goal of these designs is not to provide eye-candy to the user, it is all about generating a nice experience by using it and make a right impact of the brand in the user’s mind and heart.
Long story short; let me show you some examples to clear this out and they can also help you to understand my bonding with UX:
product ux brown table
 And people need me because actually they care about their needs and they care about others needs too. They always try to figure out solutions to their problems and needs & when they get it, there comes UI. Me!
They start to build, give a shape to this solution & I am the ingredient of this whole solution. People keep changing me though until they find the best, simple & easy way to operate this solution. After all! Who doesn’t likes easy.
And you know what the best part is? During this whole process, they are actually helping those who are facing that similar problem but not getting success to find cure of it. So, Actually I exist for help.
Well, here is a thing I want to say! If you are expecting some hot-shot fancy words for this little biography, then you will be disappointed. Sorry about that. Trust me, I am simple as a pie, sweet pie 🙂
Me: Great! Well, I am not expecting any of that; even I am a fan of a blank white paper. 😀 just kidding. Okay! So, my next question is related to those fellows who are really interested to begin a career in designing User Interfaces but they really are confused where to start? What are the basics?
Actually, even some Graphic Designers ask me this question often, so…What do you suggest?
UI: Graphic Designers? Okay! I got it. They’ll definitely think that UI design is a very serious, hard and kind of boring stuff. That is so not true. Trust me guys, it’s really fun and you are the best folks to get full leverage of it because you have the recommended foundation of Graphic Designing. All you need to do is get yourself in. Let me tell you how.
First of all, you have to be clear that UI design isn’t limited to only website design, the range is huge. You can find me anywhere; in websites, apps, ATMs, vehicles, even chair, cooker, knife etc. So, all I am saying please don’t cage me in websites. But for the love of Internet & you guys, here are some basics to start your UI journey:
In the Name of You
To take something from good to great, better you start to live it, and I know You are good. Let’s get started to Live!

  1. Not a much of an web surfer? Be it.

Take a plunge in the ocean of internet & you will find valuable gems every day. If you want to make your own style in UI designing, then bring your keen eye on styles of others first. Search interesting topics, themes & conceptual websites besides your favorite ones. I am sure you are aware of ‘Discovery Science Channel’s slogan. What was that? Exactly, ‘Question everything.’ You better start applying it.
Have you ever think that what concept or what feature you like most in your favorite website which brings you there again & again, what do you think about the design, does it look good to you, is it comfortable to use, what do you think about other similar websites, are they better or worse & based on what? Tease your curiosity & note down everything which you find useful.
Here I am giving you two nice online mobile recharge websites links, use them & compare them as per their design, usability & features.

  1. Start with your own Idea instead of waiting for an opportunity 

Time is precious and waiting is not the way to respect it. So stop waiting to get noticed by some fancy pants project & start exploring with your favorite idea, here is how:

  • Take an idea and think how you can see it in a shape of website. For example let’s think about a ‘Kids Watch’
  • Yeah! Now your mind will start googling. Nice, that’s what I am talking about. Now, first thing you need to do is get some inspiration. Search some online Watch websites (doesn’t matter they are for kids or not), use them and try to understand them as per usability, design & color themes, positioning of the products, proper showcasing of the products, buying experience etc. I am sure after this your mind will start doing some rough sketches in your head. Don’t worry! It’ll be better soon.
  • Now, get back to real life. Set an age criteria for your target kids, this will make you more focused. Now, look at your surroundings. There are definitely some kids who will fits in your targeted age criteria and they are your real customers. Ask them questions which create value for your website like:

How much time they spend on internet?
Are they likely to shop online?
Problems they faced during online shopping?
Which website they find very cool?
Which color they like most to wear?
Which kind of watch they prefer sporty, designer, colorful or simple?
What about their Dad/Mom/friend’s watch? Do they like/dislike it and why?
Try to clear every doubt you have & get crucial information which will help you to design a nice and attractive Watch website for them.

  • Well! It’s time to get things together. Your own project is now ready to shape-up. Take pencil & paper & start wire-framing until you are satisfied. This process includes every single part of your project website; every click, action, positioning, work-flow of every single task etc. After that you have to get your hands dirty with software like Photoshop & Illustrator & they will help you to make cool user interfaces based on your wireframes.

This may be looks a lot but once you get inside this, your learning, your mind will guide you step by step. Automatically.

  1. Let your real life experience help you 

User interface is a way to communicate with product or service & you experience it in your real life every day. Some experiences makes you feel good & easy & some are just feel terrible and complicated.
So, how about picking up those good ones and using it in designs. Here, take a look:
coffee shop wo menu
Definitely Menu Card invention was a huge relief. As you can see how a wise organized work-flow can save your time and gives you a cheerful experience. Now think where you implement this kind of experience in your design? This could be used in a Select & Order module but a proper product description is indispensable. If you have noticed then there is tons of real life conversations you have every day that can possibly change your way of thinking designs. So, keep noticing & start implementing.

  1. Yes! Less is good

Avoid unnecessary details in your design and serve only what matters. Talking about what matters, look what  William Strunk Jr. said:
“A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. This requires not that the writer make all sentences short or avoid all detail and treat subjects only in outline, but that every word tell.”
From “The Elements of Style” by William Strunk Jr. 
Provide only the information your user need and stop flooding the screen with unnecessary additions.
error code
Your user doesn’t have time to appreciate your welcome page or taking a tour of your website. Give him what he is actually looking for & what you actually stand for. You should read ‘Getting Real’ by 37 signals, creators of basecamp.
“Getting Real starts with the interface, the real screens that people are going to use. It begins with what the customer actually experiences and builds backwards from there. This lets you get the interface right before you get the software wrong.”
In the Name of Technology
Every design in the world need tools to shape up & every tool has it’s own rules to operate. Learn rules & rule the design.

  1. Something about Document setup

Talking about website, a website could be a responsive one which is able to expand or reduce itself according to the display size of any device ( or could be a normal one which is best viewed on a laptop or desktop screen (
So, how can we figure out a perfect document size for both kinds of websites? Look at these top 10 popular resolutions from October 2013 to October 2014 world-wide:
So! As you can see, 1366×768 is a most popular resolution right now. Nowadays most of the laptops have this resolution. That’s why you should use this resolution for your document size.
Well! Among these modern web design trends & experiments there is no special rule-set to define a perfect web layout but you can start with this:
Desktop Website:
width: 1366px  Height: 768px or infinite
width: 1024px  Height:  768px or infinite
width: 990px  Height: 768px or infinite
width: 960px  Height: 768px or infinite (try
Leave 15px margin from both sides left & right.
Mobile Website Size:
width: 480px  Height: infinite
Leave 15px margin from both sides left & right.

  1. Be prepared with examples

The time will come when your developer will say to you; “Dude! What is this design? Have you ever seen anywhere design like that? I mean…I have no idea how can I execute this?”
Familiar? Well, you will be. But there is nothing to worry about. It’s true that whatever you have done with your design, Developer will be responsible to make it function properly. That’s why it’s your responsibility to have a nice collection of examples for any particular design. It will be generous for both of you.

  1. Keen eye on lean things

It’s quite normal to forget things like putting a checkbox or dropdown symbol in a big wide project. But there’s where your duty calls you. Errors in minor details like rollover color, button’s shape, matching icons etc. can irritate the on user. Remember! In UI design every single part is important either it’s big or small. In below image an important (can be optional here) part is missing, find out what is that? Comment box is straight down. 
add description

  1. Developer is your friend

It’s a big yes he is. Believe it or not, but he can be a guru of yours for some major design problems. When you are working or experimenting with some designs on an ongoing project, make sure your developer is with you. He should know every story behind your design. Make a good team with him and you will be safe from some serious, time consuming and irritating problems in future & vice-versa.

  1. Learn code recipes from code chef 

A User Interface Designer + An awesome Web Developer! What a perfect combination it will be.
Don’t be limited only to design part. Embrace this lovely technology which is playing behind every damn thing on internet.
Think how delightful it will be when you design things exactly as per requirements of it’s developing part. You will know exactly what to design and what not and best part is you easily cure the problems because you will be prepared at the first place.
There are lots of resources now a days to learn basic and hardcore development languages.,, even youtube are some few examples to start learning basic html, CSS and other languages. And hey! You have a developer friend, remember! Now you can say ‘I am feeling lucky’.
Well guys! There is so many things to talk about this but better you experience it. All I am saying is don’t be confused, don’t be in doubt, just start & valuable things will come around.
& Hey! Use your mind palace! How cool will that be? 😀
Me: Seems like you are a fan of Sherlock? 
UI: O yeah! He is sending a message to us that ‘Think & you will find the solution.’ Once he said ‘Dangerous to jump on conclusion, need data.’ How true is that when we are planning or starting to make a product. So true, isn’t?
Me: Fascinating! But UI, where is UX? It’s been a while now.
“You guys talking about me? Well! I am here.”
Me:  Oh Awesome! UX is here now. Now it’s really perfect.
UI: And no UX! We are not talking about you, we are talking about Sherlock!
UX : Oh really! Tell me User! Did she say bad things about me?
Me: Relax UX! She always saysgood things about you & you know it. Anyway, you look so happy & energetic. Where you been?
UX: I am happy & I will be because who on earth like a dull & boring User Experience?
Me: So true UX! I am endorsing your answer. So, now  you are here then let’s get to the business. Shall we?
UX: Yeah! Why not, let’s shoot.
(Read UX interview in next part ‘Talking to the UX’)
Image Credits:,, Pixel Perfect Precision & Google.
Your feedback, questions and comments about this article are most welcome.

[Ashutosh Shukla is UI designer at Solomo Media. More interested in function than form, he started his career by designing 3D models for Indian Air Force. His approach to Design is via Conversations, Observations and Reactions, trying to find reasons behind every pixel. Follow him on twitter @AshutoshShuklaG.]

Sign Up for NextBigWhat Newsletter