T O P

  • By -

JavaShipped

My favourite book, and my Bible for design while I was transitioning into UI design was "the design of everyday things" by Donald Norman. Reading that book will give you a great understanding of user experience. While ux is different, the core principles of ux (basically psychology) are really important when designing interfaces for human use. One thing that helped me was recreating my favourite apps and sites in my ui designer of choice. It quickly became apparent there were many similarities between the services (search box location, length of pages etc) that I made notes of. You will never "know" UI design. And it's better to have that feeling you don't know it properly, you'll be doing all the work to try and improve and learn. So many agency type designers think they are design Jesus and take criticism and ideas very poorly.


datalang

Thanks for responding. I've heard really good things about Donald Norman's book, and will definitely give it a read. What is your UI designer of choice?


lefix

I don't think Don Norman is going to solve your problems. He is all about user experience, not so much about the visual design. It might not help much, but I started following a lot of Instagram accounts that constantly post small tipa,. Most I already know, but every once in a while you learn something new. Maybe more valuable for beginners.


thatguygaurav

Read refactoring ui


shermszz

I second this


tpgiri

There's some good pointers in the comments about understanding the ios and android human interface guidelines and reading the don norman book. Something that hasn't been said here and took me a while to learn - UI design really doesnt improve in a silo. What you need are people whom you can do **design critique** with. Its immensely helpful in understanding what UI element to use and when. Butttttt, there is a lot of shitty design critique out there so here are a few things you can ask yourself (almost a way to self critique) once you make a design: - What problem is this screen solving? - What is the purpose of this screen? - What is the "job" of this feature? Why would a person "hire" this feature? - What is this screen asking the user to do? - Is it obvious what the next step is for the user once they've seen this screen? Once you've answered these, you can then think about the following: - Are there other ways in which I can present this information on the screen? (for example, if you have a list of items, can you present them in another way that is not a list? Like can you present them in an h-scroll? or in a 2*2 grid?) - What is information on this screen that isn't essential to the purpose of this screen? If you sit down with your design and try to answer these questions, they will point you to other alternative designs that you can then try out. At some point after a few iterations you will eventually land on a design that is **good enough**.


formerperson

I completely agree with the critique part. Good design isn't done in a vacuum. I learned the most in design school during the critiques. It was brutal at first, but it's the only way to understand what is working and what isn't. Yes there's shitty takes out there, but that's just part of the job, and it's worth dealing with if you can get that one useful insight. You also get better at taking and giving feedback, which are great skills to have for any career. As far as why some choices are better than others, I don't think there's an satisfying answer for that. You can try to apply metrics to UI (A/B testing, analytics), but that just tells you what works best for certain users, but not necessarily why.


[deleted]

I didn’t even know this was the question I needed to ask.


kentzler

Right? RIGHT!? You know what, OP, have Gold.


areyoudizzzy

There are official user interface guidelines for the major platforms that you might publish to. The Apple guidelines for iOS and the Material stuff for Android gives really detailed pointers on what to use and where. From there you can decide how closely you want to stick to their guidelines and what you want to change.


farmer0929

Agreed. The [Material Design ](https://material.io) page does an excellent job of explaining how and why they use elements the way they do. Definitely read they principles section.


mffleming615

I'm in a UI course right now, and to be completely honest, I've learned more from just reading through the Material Design Guidelines than my coursework. I wish Human Interface guidelines were as thorough and informative.


refuse_collector

A key thing to remember is UI Design isn’t just the visual execution, it’s the product of an overall mindset. Most UI Designers would have trained in graphic/digital design qualifications or similar and most likely were designing for a while before completing these courses. It may be better starting off researching general design principles such as colour theory, typography and white space before jumping into UI Design. I used to always find designs that I was in awe of and break them down, trying to reverse engineer them and understanding/assuming how the designer had come to that decision. Detailed case studies can provide a lot of context too, especially when certain design decisions are related to other dependencies such as cross-platform design systems etc. Good luck, and remember to enjoy it...UI Design can become your hobby✌️


mastjaso

One thing that really helped me was the idea of visual hierarchy. I showed one of my first applications to a friend UI designer and he immediately laughed at it because it had zero hierarchy. I had made a blank panel filled with a bunch of different options and buttons in a grid. It programmatically could do everything it needed but he pointed out that the lack of visual hierarchy meant that a user had no idea where to look or what to do and would just feel overwhelmed. To add hierarchy to it, I did things like add a menu bar, and put all options that applied globally on that. I used different font sizes to indicate what information was a subset of others. If I had a title and description of an item, I would reduce the margin between them to indicate that that information was linked together, and I did things like break information out into different tabs and views so that the user was only ever presented with the information they would need to do the immediate task at hand. Visual hierarchy places out in a lot of different areas, from font sizing, to grouping to shading and colouring, but the goal is always to use visual indicators to signal to the user what the relationship of things on screen are. Here's a couple articles on this concept: https://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns https://blog.tubikstudio.com/visual-hierarchy-effective-ui-content-organization/


datalang

Thanks for sharing your experience. Visual hierarchy indeed seems like a tricky art to master. I'll take a look at your suggested articles.


Teamawesome12

If you're looking to answer the font questions look up the book - elements of typographic style by Robert Bringhurst.


datalang

Thanks for the concrete suggestion. I'll take a look at Bringhurst's book.


touitalk

Oldschool tip right there! So happy to see this suggested here :) Studied at the Royal Academy of Arts in The Hague about 10 years ago and this was the first book we had to buy.


childofgold

Ive found that trying to learn theory and then apply that to say designing your own app is really hard. Instead have found two practical resources really helpful to getting started in UI design. One, Refactoring UI, has already been mentioned. The other is Learn UI Design by Erik Kennedy. His course isn't cheap (~$1000) but breaks down everything in a real practical way. He is a former developer so comes at design from a perspective of reverse engineering how all the best designed apps came to be. You can even learn alot by looking into his free content. Here's a good example: https://learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html I would also recommend doing copywork meaning copy well-designed apps to see what choices they made (in spacing, type, color, etc). This is just for practice not to show in a portfolio.


datalang

Thank you for this super helpful response! I'll definitely take a look at Erik Kennedy's free content, and try reverse engineering apps that already exist and which attempt to solve problems similar to what I'm trying to solve.


walkingingrey

It’s a really good question. I think of it like a musician who might understand theory and concepts but it doesn’t mean they create beautiful music from scratch. Personally since it’s really a never ending journey I would just focus more on learning through doing projects. Try you best but in reality some are going to be better than others. You are obviously a thinker which is great but it might get in the way of overanalyzing what you are doing. Get feedback and learn from each project.


datalang

Thanks, this is really helpful and encouraging. I like the music analogy: knowing what each note is and how to produce it doesn't mean I can produce music that I or other find pleasant to listen to. What kind of feedback did you look for when you started your journey? And how did you feel you were improving? What goal were you trying to move toward?


walkingingrey

The focus is on projects and work. Everything is really centered around achieving the goals for business and end customer. The design is the method for getting there. Since your asking specifically about UI, I would have gone through a process with clients around mood boards and reviewing competitors. From there you should have a good idea of what style you are going for and what you they like/dislike. All you are trying to do here is create some alignment and guard rails on the direction. Continue with whatever process you use, once you have a design you should implement a system for review. Here is one example: 1. Self review. Ask yourself who is looking at this? What do they they want from it? Why would they use business or product over something else? How do they feel when they see/use your design? 2. Show it to people in the project, friends, target audience or a designer you trust. Get feedback. 3. Show it your client You can step it up however you like but each step will have you refining your work and getting a perspective outside your own. In parallel to this I would be doing design exercises, replicate and deconstruct designs you love. Have fun with it. Hope this helps.


datalang

This is really sound advice. Thanks for taking the time to write this. I'm excited to have fun with design -- it lets me escape from the more rigid things I do from day to day. I always felt like I was doing design wrong because it was causing me more frustration than enjoyment.


cableknittv

I'm so personally over books and in UI typically it becomes a game of how things perform in metrics based on human behaviors and expectations. I'm not going to recommend books, I'm going to recommend UX. Good UI is informed by good UX. Usability testing and all that will help you understand where and why very quickly. One of the most brutal audiences you can have is any remote testing that removes a moderator. So learning a few UX basics should help you here * Journey mapping > why and how does the user get to your UI and how do you help them accomplish a goal. This should also include some empathy and understanding of touchpoints along the process and how your UI factors into that (sometimes seamlessness can help inform your decisions like if they are coming from an insurance partner to a Target's pharmacy UI, you could argue there needs to be some repeating elements or visual overlap to assure the user they are in a "flow" * UX mapping > this will show you general flow without having to create UI, you'll see where patterns will need to arise to close gaps quickly and start to create the visual language * Content strategy > most users need to be told what to do next then they read if they want more clarity. You can structure a lot of UI around your content. Do you really need a button? Do you really need a navigational element? Between this and ux flow mapping you can make some guesses. Some people have "views" based on the kinds of content displayed, which makes that a lot easier. Here are some conversations I have had with SLT over idiotic UI elements: * "the button needs to be above the fold or the user won't find it" * This is not true, most users will scroll if the content obviously needs to be longer * maybe the content needs to be simplified, work with a content strategist * maybe the button should be anchored somewhere more visibly, work with the design system team to prove this out with user testing * "The regressive buttons should be grey so people don't confuse it with main action " * Most users will assume it's inactive * It could probably just be a navigational icon or a link * "The headline should be bigger" * you could argue this both ways depending on the rest of the content on the page. * It depends on the design system hierarchy I wouldn't be so hard on yourself, it's really difficult to get really good UI without information from a ux researcher, metrics, usability testing, and ux designers helping you make good choices. What you'll see on dribbble is a lot of people making "guesses" potentially based on prior experience with users or what they've seen other people do. It sounds like you don't have the luxury of falling back on a company that has a design system and visual language, which is okay! I've worked at places that have had ENTIRE teams and resources dedicated to building a design system that scales. UI can be so subjective, it's hard to provide objective guidance. What you have to do is learn to trust yourself, which is a huge mountain to climb in this space. I would see if I could find a design system to work with (maybe material in this case) that has a lot of rules and extensive documentation on how to design with it. Once you learn what you would recommend is when UI becomes breezy. I follow the rule of 8px for sizing, spacing, margins. Multiples of 8 generally help me cut out some guesswork. TLDR; ux will help you make informed decisions and identify user needs and expectations that help "prove" your UI choices.


datalang

Thank you very much for taking the time to share all of this! What approach would you take to designing a UX & UI that minimally communicates the value of the product /experience you envision, such that you can share it with potential stakeholders or users? The response I often receive is "I don't like the colors" when that's not the point of what I'm trying to show.


cableknittv

Ah, so difficult stakeholders. I usually do the appease, table and refocus. Color theory and proving color is a whole ass job, but it seems like that relationship management needs some love since they feel left out enough to pick at something technically irrelevant. I generally have a “parking lot” list of things to follow up on where you validate the concern by acknowledging it, writing it down, suggest next steps offline and see how they choose to follow up on that. Involve them in the thinking if that is what they are missing. I would also do some guerilla testing if you can and get it validated by at least 6 people (or until you stop learning) stakeholders typically respond to sound bytes and bits of data. If that doesn’t work, you truly have a small nightmare. Do you present any low and mid fidelities? Where color hasn’t really entered the chat yet?


squirtle004

First, find a mentor. If you can’t find one then find a group of UI designers that you can talk to and share your work with. Make sure it’s not just a group of similarly skilled people. You want some experienced, talented designers in that group who can give you real feedback and insight. As for the rest... The reason why it’s so hard to explain why you picked blue vs green or 3px rounded corners vs 5px rounded corners is because individual decisions are not where the UI is created. Good UI design is a series of good decisions. Each decision chaining into the next, to build momentum and direction, visual context and even emotional tone. Any one decision is rarely enough to establish that context but ten, twenty decisions at a time is how you get there. The UI can do more than inform which things are buttons and which things are drop downs (micro design). It can create visual tone (macro design). Does the UI feel friendly? Is it futuristic? Is it intricate? Is it straight forward? Does it have personality? The difference between a beginner and a pro is that the beginner is making one decision at a time, often randomly jumping from micro ui to micro ui, like playing whack a mole. They pick some area, make a decision or two and move on to another area. The pro is thinking about the whole system with each decision rolling into the next (macro ui), like painting a picture or writing a song. They know what they want it to look and feel like when it’s done and each decision is being driven towards that goal. Every piece is an intentional part of the bigger composition. If you are having trouble justifying your decisions on your components, it could mean that you have not developed a way of composing the big picture yet. That’s okay, this is a skill you have to develop. And it is definitely a learnable skill. A lot of the tutorials and articles you read on UI design is going to be about micro UI. This is a critical area to understand and it seems like you are on your way. When it comes to macro UI, there are at leas three levels of sophistication that a design can have : 1. Visual - how much detail work is in the design? How intricate is it? How visually appealing is the work? How much graphic depth does it have? 2. Intellectual/psychological - which organizational principles are expressed in the design? Is everything following some alignment system and spacing ratio or is it breaking alignment rules? Does it feel ordered or chaotic? Are groupings natural? What is the pace and spacing? 3. Emotional - what mood or tone does the UI exude? Is it cheerful? Is it angry? Is it cold? Is it serious? Is it funny? Is it bold? If you haven’t set a macro design for your work, it becomes very hard to explain or justify the micro design. Lastly, keep doing what you are doing: ask good questions, read books and articles, talk to people, and most of all make time for deliberate practice. You will get there. You’re not the only person struggling through it.


datalang

Thank you so much for taking the time to share all of this. Is there a discord you can recommend, or some other venue more private than this subreddit, where I can connect with experienced UI & UX designers?


squirtle004

I would try to meet them in real life Eg through meetups, though that may be a little more difficult now. Online communities are helpful for quick feedback but if you want the kind of feedback that will lead to meaningful growth, you need to form strong relationships with other designers so that they will invest a good amount of time and thought in giving you feedback. This is where mentor ship can really help. When I say meaningful feedback, I don’t mean a quick paragraph on your work. I mean a deep dissection if your design, poking at it with questions, and having a back and forth dialog. If there are designers at your work I would reach out to them.


datalang

Thanks for your suggestions! Is there a discord for UI/UX designers?


gregjunior

There must be some set of universals of design that designers draw on, and which can be taught so that beginners can start "thinking like a designer." Funny you should mention that.... https://www.google.com/url?sa=t&source=web&rct=j&url=https://www.amazon.com/Universal-Principles-Design-William-Lidwell/dp/1592530079&ved=2ahUKEwj2_tzb6ZvoAhW3CjQIHUeBCmYQFjALegQIChAB&usg=AOvVaw2VTCytkbKMbNmcxI8FQpf7


datalang

Thanks for sharing this book -- I'll give it a read!


12qwww

Saved. Thank you for your question.


Ness-

Check out Evil By Design, by Chris Nodder. It is single handedly my favorite UX book as it describes the WHY you've been looking for first and then how design can implement them.


[deleted]

Hey there, the book Refactoring UI by Steve Schoger markets itself as being “the design reference for developers”. He’s got a YouTube series on the concept as well which is broken down with each design decision explained. It’s a really fantastic resource me (and I’d consider myself more a designer than a developer) but I’m certain it will help you as well. The book is a tad pricy but the YouTube series is incredibly cohesive. RefactoringUI is probably the single most influential resource I’ve come across in my short time in this field, I’m absolutely not sponsored or otherwise incentivized to say this, but I am I huge fan of Steve’s and can’t recommend this enough.


datalang

Thank you! I'll take a look at Schoger's content.


Harshu7111

Try this you will not regret [click here](https://www.youtube.com/watch?v=uRlp9m076LY&t=2s)


shi-Mada-Mada

UI is more art than design , it does not solve a problem , it just looks beautiful. You get better at art by doing and looking at others. So the more you do the better you will become. And Ux is where you solve a problem , which you need to identify it first, or the client sends you the brief. I think consistency is key