From UX to UI Design

Managing the Chaos #2

Natalka Smoczyńska
Daftcode Blog

--

In my previous post I showed you some of the ways to gather knowledge and start learning UX. If you’ve missed it, check it out here: part 1.

Today I want to tell you how to put this knowledge into action! I am a UI/UX designer, so I use my UX knowledge for designing interfaces on a daily basis. You have to know that UI isn’t the only way you can use UX, but when you’re into designing web and mobile applications it’s a great way to start. I really hope you have read some of the resources I’ve recommended and you already have a lot of UX knowledge that you desperately want to use! Check out this blogpost to find out what are the next steps to try out what you know :)

OK, I read it all, but what now?

Once you start actively observing and reading about UX you will have an urge to use it. And the most basic question is how? I remember I felt like I had read a lot and already knew pretty much, but it was all super messy. Like the whole effort wasn’t worth it, because I still felt like I knew ‘nothing’. I want to share with you a few issues that were the biggest blockers for me at the beginning:

  • How exactly is it all connected? How can I use theory in practice?
  • What to design? What kind of project can I do?
  • How and when to start? What is an exact process of designing?
  • How to measure what is good and what is bad? How to evaluate it?

Problem #1: Theory vs Practice

The biggest problem was that I really wanted to implement this knowledge ‘by force’. The most important thing I’ve learnt is that the knowledge is something that should develop in the background and it would come out only when necessary. You cannot use it when you don’t have a situation for that. And that’s why it’s so hard, because you feel like this knowledge is useless. Trust me, there will be time when it will be all extremely useful :)

Problem #2: What to design?!

OK, that one was really hard for me. For a long time I haven’t got a clue what project to do, what really is “the UX thing”. And you know what? UX is very often invisible. And I was so disappointed that I couldn’t come up with an idea for a school project that is connected with UX to the point that when I actually did, I somehow missed it :D I remember I was bending all the projects that were given from our tutors in school to be connected with interaction design — so I was creating web designs and applications. And hell yeah, I was doing this and I was thinking about information, layout, buttons, flows and everything but I didn’t feel like it’s UX. Goddamn, it was UX :D

When you want to start designing interfaces my tip is to start with something super tiny — for example it could be a redesign of something that already exists. You don’t like your alarm clock or weather application? Is there something you’re missing in Snapchat app? Redesign it! Focus on things that doesn’t work well for you and try to make it better.

Another great source of ideas is Daily UI Challenge. You can find there 100 days challenge with a new thing to design everyday. Here are the first 5 challenges, to show you what kind of tasks you can find there:

  • Daily UI #001 — Sign Up Screen
  • Daily UI #002 — Credit Card Checkout
  • Daily UI #003 — Landing Page
  • Daily UI #004 — Calculator
  • Daily UI #005 — App Icon
Daily UI #001 — Sign Up Screen for Antivirus Windows Application that I have designed

At first it seems to be simple, but when you start doing it by yourself, you will notice obstacles and difficulties. Try posting your designs on dribbble, which is a great place to get feedback (make sure you get an invitation first)! You can join this challenge and see how other people solved different design problems. The thing you have to watch out when it comes to dribbble — very often people don’t really care about how it works (UX), but mostly on how it looks like, and very often designs aren’t thought through. I encourage you to design those elements having your users in mind. Remember that what you are creating is a part of something bigger. For example when designing a sign up screen, there is always something before and after it — a flow of the application.

Problem #3: Tools

The most important thing that I can tell about designing: it really doesn’t matter what tool you use! In fact it’s not even slightly important what software you use.

The most important thing is to focus on the idea, the problem that you are going to solve.

I love using paper and pencil or sharpie to draw a solution. It’s the fastest tool and it doesn’t matter if you are a beginner or not. For me sketching helps to open my mind and start visualising ideas. It’s very important not to make one sketch, but 10 different sketches. Frequently, the first thought is not the best one and you have to try different ideas. But remember not to throw away any of them! When you got an appropriate number — compare them and find their strong and weak points to come up with the right solution. These sketches are the most important UX assets.

When I design mobile applications I love to use that kind of mobile phone wireframes. It helps to put my design into context. Yet, when I need something more casual I don’t stick to them.

After you are happy with a sketch of solution, you can recreate it on a computer. What for? To deal with your real canvas & pixels ;) Now it is the time to measure what font size to choose, or how big the containers should be on the screen. But remember — all in black and white or other monochrome palette. These are still wireframes.

Afterwards, there’s the last step — dealing with a UI. Now you can work on graphic appearance, pick some colors, fonts and create a GUI (Graphical User Interface). In general it is about coloring your wireframe in Sketch, Adobe XD, Illustrator, Photoshop or whatever tool you like best. In my opinion, Sketch is a great software to start with, because of functionality, easiness of learning, price and overall experience ;) And it has a 30-day free trial, so when you will be doing Daily Ui Challenge you could create even 30 designs during this time! :)

Problem #4: Is my design good or bad?

It is an extremely hard question to answer, even when you are an experienced designer ;) You might get a feeling, but it’s not everything, you need to measure your design. You can check the website: www.goodui.org where you can find very good practical examples, but these are only tips, not a way you can evaluate your design.

That’s why I think a great option at the beginning is to find a mentor. I know it’s easier said than done, because I really struggled with this. First of all I had no clue that I might have a mentor and I wasn’t actually looking for one. I’ve just wanted somebody who knows and understands the UX stuff and could help me learn it. And it was hard, because I hardly knew any specialists in this field. If you are looking for one, a good solution is to attend UX meetups in your city, or write an email to a designer that you admire for feedback :) Another cool option, when you already have learnt something more than just basics (so it’s not perfect for the beginning), is to apply for an internship in a company that cares about UX and has a UX team. You will definitely find a mentor there, just as I did :)

Difficulty in finding a mentor might be a big blocker, but the worst that can happen is getting stuck and doing nothing. That’s why I recommend to ask other people for feedback. Even without a mentor practicing and doing stuff is cool, right? It’s amazing to ask your friend, mum, brother or a stranger about your design! Show them your approach and ask how they find it, do they understand how does it work. Results may be incredible! And believe me or not — having a mentor is not the only good solution, sometimes asking your potential users what do they think can be even more valuable :) These are the people that would use your solution — and it will be exactly the same when you will be mature designer. Users’ opinions of your product will be the most precious and awesome.

Finding a mentor is an incredible experience and it really makes learning easier but you can somehow manage it on your own — by finding your end-users.

And don’t worry that your designs are not going to be implemented. Imagine that these are real products and think also where to put settings, what are the interactions between screens and so on. This is more intermediate thing but it’s good to have it in mind when you are designing.

These were my biggest problems during the learning process and I hope they would help you in your first steps. I would love to encourage you to start doing something! For example: find something that really makes you angry (could be an application, coffee maker or whatever) and try to fix it, step by step :)

Don’t forget to tell me what have you designed and what solutions you implemented. Did you manage to do the daily design challenge? I wish you luck with all of these! :) If you have any questions — don’t hesitate to ask them in comments. And don’t forget to follow me to read more UX and UI tips!

If you enjoyed this post, please don’t forget to tap ❤! You can also follow us on Facebook, LinkedIn and Twitter.

--

--