Minimalist design is a design approach that prioritizes simplicity and minimalism, focusing on clean lines, ample white space, and simplified color palette. This approach can create an interface that is accessible to a broader audience, including those with different backgrounds, whitespace, and color preferences. Key elements of minimalist design include bright backgrounds, subtle roundness on UI elements, big, readable headings, real-life photography, thoughtful use of colors, and a focus on contrast.
UI patterns are recurring solutions that address common design challenges in user interfaces, providing consistent, efficient ways to solve usability issues. A minimalist UI design doesn’t bombard users with a rainbow of colors or excess elements, but instead uses a limited palette and elements to create a visually pleasing and harmonious experience. To incorporate a minimalist style into your interface design, it’s essential to understand three fundamentals: negative space, simple, easy-to-read fonts, and sparing typography.
The F-pattern is the most common for web pages with significant text content, while the Z-pattern is perfect for interfaces that are simple, minimalistic, and call-to-action button-centric. Minimalism is about eliminating excess and strategically placing remaining elements, with colors usually used sparingly.
In summary, minimalist design is a design approach that prioritizes simplicity, clarity, and functionality, creating visually appealing and easy-to-use interfaces. By focusing on these elements, designers can create a cleaner, more user-friendly experience.
📹 5 levels of UI skill. Only 4+ gets you hired
After reviewing literally hundreds of UX/UI portfolios I started to notice some patterns. There are five distinct UI levels, or skill levels …
What is an interface pattern?
UI design patterns are visual strategies for efficiently solving common UI design problems, providing a blueprint for designers to follow when creating interfaces. They also serve as a common language for designers, reducing misunderstandings and establishing consistency when multiple designers are working on the same project. UI design patterns are also crucial for user retention, as they make the interface feel intuitive and easy to navigate. Changes to these patterns can result in losing out on key leads and conversions.
UI design patterns can be found in numerous libraries, each with a specific formula for solving problems. These patterns are categorized, but the elements included in each remain the same, making them a valuable resource for designers and users alike.
What is the most common pattern?
Most Android device users start their lock screen pattern from the top-left corner of the first dot, with most using less than 5 dots and a significant percentage using only 4 dots. Ten of these patterns are drawn with an alphabet shape, representing the initial owners. While easy pattern locks are easy to remember and draw, they come with numerous drawbacks when a hacker gains access to the device. It is recommended to use more complex pattern locks for better security and reliability.
Which pattern is perfect for interfaces that are simple?
The Z-pattern is optimal for minimalistic interfaces with call-to-action buttons. The Gutenberg Diagram illustrates user behavior in reading-gravity, which is divided into four visual design areas. Fitts’ law postulates that the time required for a pointer to reach a target area is contingent upon the distance to the target and the size of the target area.
What is the most common reading pattern?
The F-Pattern is a technique where users first read horizontally, then read less and less until they start scanning vertically. This method is effective for finding key content details and is applicable to LTR-interfaces. The Layer-Cake Pattern is the most effective way to scan pages and find key content details. The Love-at-First-Sight Pattern is used by users who are “satisficers” and fixate on a single result. The Lawn-Mower Pattern is used in tables, starting in the top left cell and moving to the right until the end of the row.
The Spotted Pattern skips big chunks of text and focuses on patterns, often used in search. The Marking Pattern is common on mobile more than on desktop. The Bypassing Pattern skips the first words of the line when multiple lines start with the same word. The Commitment Pattern reads the entire content word by word, often used by highly motivated and interested users. The lack of rhythm in scanning is the main issue, as it can lead to loss of attention. A screen with controlled rhythm can retain and deepen attention.
What are simple interfaces?
A simplified user interface (SUI) is a visual representation of a software interface that simplifies elements by removing unnecessary ones and reducing them to simpler shapes. These graphics are designed to keep essential elements visible and serve as a visual aid to support instructional content. SUI graphics make instructions easy to follow, allowing readers to quickly reach the point without distractions.
What are the 4 types of interfaces?
A user interface (UI) is the point of human-computer interaction and communication in a device, including display screens, keyboards, a mouse, and desktop appearance. It includes visual and audio elements such as fonts, icons, buttons, animations, and sounds. A good UI adheres to design principles that enable users to navigate and use it for their intended purposes. Many real-world businesses rely on web and mobile apps, leading to increased priority on UI to improve the user’s overall experience.
UI and web designing now require knowledge about user interaction design patterns and accessibility to ensure interfaces are user-friendly and not overly complicated. This includes UI design patterns, such as menu-driven, touch, voice, form-based, natural language, and mobile UI.
What is a simplified interface?
SUI graphics are a design treatment for screenshots that reduces contextually unimportant information to help users focus on key information. They often replace less relevant information with simple shapes, directing the user’s eye to the key information. SUI screenshots are not accurate software depictions but rather guides users through specific instructions. Content creators use this technique to guide the attention of learners or viewers on what truly matters.
What is F-pattern used for?
The F-Pattern design establishes a visual hierarchy and deliberate flow, guiding visitors to specific elements and reducing the rate of visitors exiting the site without engaging with the content. To implement this
design, one must first create a professional landing page with Instapage and then sign up for a 14-day free trial. The F-Pattern design has the potential to enhance visitor engagement and encourage action on the page in question.
What is the difference between F pattern and Z-pattern?
The F-Shaped Pattern is ideal for text-heavy pages, aligning with reader scanning patterns. The Z-Shaped Pattern guides the eyes in a dynamic “Z” formation, highlighting calls to action. Pretty Links can help test different page designs to maximize engagement and conversions. Strategic placement of content and CTAs, along with easy A/B testing, can significantly impact the overall user experience.
What are interface patterns?
UI design patterns are recurring solutions to common problems in user interface design, preventing reinventing the wheel and making design faster. These patterns are rooted in architecture and programming and are designed to optimize the user interface development process. By creating a library of components that provide proven solutions to user problems, developers can cut down time spent creating and testing parts, expediting the overall development process. UI designers quickly realized the benefits of UI design patterns.
What is the most important reading style?
In-depth reading is the most crucial method for understanding the concepts and arguments in a text. There are three styles of reading academic texts: skimming, scanning, and in-depth reading. Skimming involves skimming by reading the headings and first sentences of each paragraph or section, taking three forms: Preview, Overview, and Review. Scanning, on the other hand, is a method where the content is searched for a specific purpose or word, rather than dealing with all of the content.
📹 60-30-10 Color Rule
How can you use color inside of your mobile UI design projects to come out looking really mature and really seamless and really …
This article is amazing. I’m not an UI designer, but this is important in every kind of design. I can tell that this is one of the most important skills recruiters are looking for. All of this attention to detail is what’s gonna get you hired. You need to pay close attention and understand the importance of clean work, and why it’s so important in tight deadlines also. When you unlock that, you grow faster and you design faster too. Thank you so much for telling the nitty gritty of design, I hope it inspires many new designers to challenge themselves. I am gonna show this article to the great designers in my team also, haha. Greetings from Argentina ❤
To be very honest, the stage 4 design looked THE BEST to me. The laws and rules may not necessarily always produce the most pleasing interfaces; not ALWAYS so please do not get too stuck to them. Sometimes, intuition and overall appeal simply works (even if it does not follow all the rules by the book) (FYI, I’m a Ui/Ux designer)
As someone with decades of experience as both a hiring manager and job seeker, I can tell say, definitely, most recruiters and HR staff will never look at your portfolio. They’re searching for keywords on your resume. Period. I can also say with a high level of confidence that many hiring managers have no idea what good a UI is. Obviously, if you’re joining a team of UI/UX designers, the hiring manager will (sometimes) understand WHY one design is better than another. But even many of them seem to lack a real understanding of the differences between a good user experience and just a nice looking design.
Stage 6 suggestions 😊: the optical alignment seems to be incorrect. Everything seems to be aligned on the left to single vertical line. However you want to shift the headings ~2px to the right and maybe the circles ~1px to the left to compensate. To simplify this rule, when you left-align a rectangle and a circle, the rectangle will feel more to the left than the circle. Same applies to rounded rectangles, etc. Also dark shapes generally feel bigger than the light ones. You may want to add 1px border to the light cards, maybe make the plus button 2px smaller in diameter, etc. “Awaiting” buttons seems odd – it’s not clear whether it’s a button (is it clickable? What is the action? What state it’s in?). Also the layering of blues might not be giving enough contrast to pass AAA – just guessing. The book icon is super ugly, looks cheap, sorry. The gradients are too brutal, a bit more subtle approach would help. Overall, there’s more work to be done with the gradients, highlights, shading, background, etc. perusal this on phone screen, so I don’t really see all the details, hence I might be wrong about some of the stuff I mentioned. Just my two cents what I see from quick glimpse. Great article though, love this explanation of which detail matter!! 👏👍
At some point, it’s not about your UI design skills. It’s about how you communicate with others. Are you a reliable team member? Do you provide context to any questions or problems you need help with? Do you anticipate upcoming questions from your coworkers and strive to answer them before they become issues? Do you take feedback effectively and incorporate it into your designs? Are you willing to help others with their problems? All of these are not UI problems. These are skills that a lot of people who don’t get hired seem to be rusty in.
Awesome article! I think this article does well going over the parts of an interface, but there’s certainty a huge amount of effort that goes into planning the UI layout to begin with, so in your example, deciding to put menu on the top left and alerts on the top right, bottom icon navigation, and splitting the UI into a greeting, a CTA, teammates, and appointment cards, the order, how the previews look and what content they display, and the overall navigation and app/site layout.
Incredible! I just finished the Google UX Course and am on a 6-month UI self-learning journey. This article was of incredible use to me, thank you! There are so many points from the 4 version which I identified myself so I feel good! Thank Christ I’m not at level 1! I’m somewhere between 2 & 3 I’d say! Onwards and upwards!
You should mention accessibility, color ratio contrast, button size, etc. This is where you’ll see that as a designer, you are not only doing assets for Dribbble, but deeply thinking about your users. One layer you should mention is also how you collaborate with your peers. How is the dev hand-off? How is the communication with the stakeholders? Do you feel comfortable sharing a work in progress? How do you document your work? The list is long.
I was struggling to stay motivated in my career change journey, but I felt the spark again after perusal your course. Thanks a lot! ❤ I like the content and love the direct way you say things. It’s a breath of fresh air and what keeps me hooked. I wanted to take a go at the weekly challenges you mentioned. Could you tell me where I may find them?
All the article taught me is recruiters are missing the forest for the trees. All stages of the UI is just merely a copy of Facebook UI, and the only differences between each is MINOR things. As a article game designer who has to make UI, it’s what people actually do with the UI that is important, not alignment or whatever. There are some terrible looking UI that people play with more than sleek UI, and that is much more important. The closest any of that was touched on was the color choices in stage 5.
Level 5 looks nice, but there are other things to consider as well. For example, the icons contrast seems lower then 4.51:1 ratio, same with the text on ‘Upcoming appointments’ cards. From the UX side – what is the purpose of that hamburger on the top left? All the menu items are already in bottom row, the top left corner is the most difficult corner to reach with your thumb. What is the purpose of ‘Good morning Angelica’ ? It takes up lots of screen space without giving much value
It seem that if an employer has the knowledge of what a good UI design is might actually take a look at your portfolio. With that said, just how many pieces of work must you have and do you actually need to think of everything that ought to go into an app meaning all the features and functionality or simply show a believable finished product with awesome looking layout? I’m from a printing publishing background who never designed an app on the job but designed layouts for print. How can I word my skills and experience so that it captures the imagination of an employer?
Honestly, for me, your example of level 4 looks better than the example of level 5. I’m not an expert at all, of course, but I like level 4 more (I guess I just don’t like the thickness of the lines of an icon and of the plus at level 5, they are too thin and get blurry for people with myopia). Also, level 3 is not good at all, I think. I would probably make something even worse than this, so I am not the best judge here, but man, level 3 looks ugly… Even level 2 looks better than level 3 (except for the background color, which looks awful at level 2).
I don’t understand this article. In order to get hired as a UX or Product designer there are many, many more skills necessary than UI design. I would say that people only spend about 15/20% of their time at most doing UI at a tech company. But, also I would say that none of the UI designs shown here are enough. What about information architecture? What about prototyping? Even basic interaction design is not shown at all here on the few elements which are displayed. A single screen says nothing and in my opinion is putting the focus of the work on entirely the wrong thing. What is the problem you’re trying to solve and how is more important than the UI produced to do it.
I don’t get it when there are some text colours that almost unreadable: “novemer 2022” near healthcare report button and “Today” in the meetings section. Like maybe it’s not that important information, but i personally like to read all contents of the pages, and accent decisions like that make me mad sometimes 😀
In Level 5, is there a way to make the Awaiting button look more disabled? Especially if it were on a white background. I think to me, the only thing giving it away is the closeness to the card background color, and the copy “Awaiting” itself. But to me, if it said anything else, and were on a white background, it would not look disabled. I think i would instead make it white with a slight outline, and then the text inside it gray.
#1 is exactly the one I always see on LinkedIn. I always try to believe that the purpose is to ask for advice. However, the more I see those posts, the more I believe the intention is to “show off” their so-called good UI. I eventually had no choice but to quit those “UX groups” in order to avoid seeing those posts again.
Great article but I have one concern: mathematical precision isn’t always how the human eye interprets layout. A small square icon will look closer to an object than a circular icon on the other side of the object. Sometimes font kerning and colours may need to be slightly adjusted to give the appearance of consistency. Surely a little subjective correction is needed from time to time, correct?
I have recently started learning Ux, like 2-3 months back. I’m totally exhausted..doing it continuously for 10hours to someday 15hours. But Im happy after seeing your comparison that my work is not gone wasted. By your scaling system I’m at between 3rd to 4th stage. I have done many reworks already while continuing learning new rules and understanding designs..
As a developer, I’d like to say that the idea of being “unhireable” at anything below 4 is very untrue. Maybe if you’re only looking at Fortune 500 companies and positions making $500K a year, but for your average dev, you can get hired at 3, with them expecting you to improve while you’re there. Heck, I got hired as a web dev with no actual web development experience at all. Literally hadn’t touched HTML, CSS, or JavaScript. There isn’t some magical line of “yeah you’re not worth hiring until you’re here”, because then no one would get hired right out of college
Well, yes. But things you talk about are only 50% of UI design, keeping margins, fonts, colors and icons consistent and readable is not a work you can get paid for. What’s missing: 1. Aligning visuals to goals, hierarchy on page is not just to communicate what belongs to what, or what’s secondary. You need to drive user (attention) to the next best action. 2. Micro copy. No not marketing copywriting. UX copy: what does user know about this element? How does she feel right now? Do I need to ensure security or boost motivation? 3. Usage of frames/groups/auto layout. No need to explain here. 4. Forget about golden ratios – it’s bs for newbies. Learn proper composition, color theory (not bs like “red means danger, but not in China”). “Hidden level 6” is not animations – it’s visual delight (art). 5. Learn and apply basics of HCI. Does your UI follow mental model of the user? Or your mental model? Do you represent UI the way your user expects/imagines (metaphor)? Or the way it was built on back-end?
The problem with this is that the data used to design it are ideal. Take “Melissa McMillan” and make her “Melissa McMillan-Lawrence Ph.D” and you’ll find your layout not working as it should. What actually lands you the job isn’t the skills on making minute details perfect (though this shouldn’t mean that you shouldn’t pursuit becoming better), but how flexible you can design something that’ll be used in the real world.
Hey, there, young designers. I need to mention some things. First, your design needs to always look like level 5, at least. Even in his class 5 design, inconsistencies exist between the hamburger, plus, and the tab navigation icons. So what are the next level or steps to take to go beyond? Let me tell you, it’s not only about the beautiful, fancy visuals you see in Dribbble shots. Ask yourself: How does it look with interaction and the different states of components ( Hover, Active, Pressed, etc.) Are the accessibility requirements met, how consistent is the design over 30+ component sets, and so on. Noteworthy is how you build your design components up (you should do it like a frontend dev.) and how you communicate them with the developer. These are all crucial things that can make you truly valuable as a UI designer. I recommend you to branch into advanced topics like tokenization and white-label solution for design systems and learn about best practices in UX and UI. I hope some of you new joiners in the industry take this information to heart.
If anyone at a job ever tells you your design is not at a “level 5”, don’t worry, they won’t be around much longer. This type of designer to sort of come out of the woodwork the last 5 years is so out of touch and should get off the grift. A client does not care about pixel perfect UI. They DO NOT care how organized your file management is. They care about their brand messaging and does the site solve what they want to do, thats it. They want to save money making a site, and make money after launching it. It could look like absolute shit (Amazon for example) and if their click thru is up, they will hire you the rest of their life. You can learn every program that exists, every hack, short cut and plug in… you can’t teach taste, style and personality. This “your pixels aren’t lined up” garbage goes right out the window when a client sends you a dozen revisions and doesn’t know the first thing about design. I swear this business was far more fun 8-10 years ago, its become an absolute tech geek nightmare and all your sites look the same.
Stage 5 looks nice, but it still has one serious flaw from a practical perspective: it wastes space like crazy. If this would be on a phone, particularly the button fonts are already pretty small. Look how much space the text and images/icons actually take up. I’d say it’s no more than 10% of screenspace. And that huge greeting actually doesn’t count. Of course, that’s not going to stop anyone from hiring you, because there are few organizations who care about practical UX in the applications they order. Some care about looks, some care about functionality, noone cares about ergonomics. But you should care, if you care about your users at all.
This is brilliant, I’m going through websites daily to find new inspiration for designs (I’m a dev, if I see something, I know how to make it, but can’t come up with completely new designs). I never noticed those good designs are based on multiples of x as shown at 3:11 I just went through all components of my website and fixed it accordingly. Had been close most times but also found some way off. Looks way better now, thanks for sharing this information!
I appreciate people putting content out there (more than I will ever do) and don’t like being negative, but the YouTube design culture is bizarre. I’ve been a designer, and then design director for 12 years, and know dozens of other designers, directors, devs and general creatives. Nobody talks like this. There are no ‘levels’ and design out of context gets you nowhere. The example design is clean enough but is mostly basic design literacy. Following the guidelines in here is fine if you are a graduate or junior but it definitely isn’t going to get you head hunted or hired.
This is a very superficial view on UI design. I do like that it reveals some of the complexities considered in a piece of design work. However the clickbait title and superficial analysis levers on the anxiety of an audience on the job hunt. Doesn’t seem fair, given most hiring managers care more about the story of how you arrived at the designs, including challenges, the legacy, the stakeholder conversations that allowed you to deliver the work in that way more than some nice screens of (in this case) a pretend and meaningless mockup. Design, even specifically ui design is so much more than this.
GREAT! Probably around 4+ in terms of web design. Getting into details, that’s where I’m at. I think this may help people skim the content: 0:00 – Intro 0:06 – The Importance of Level Five UI Design 1:36 – Level Five – The Principals of Good UI Design 3:53 – Level Four – No Problem Finding a Job 6:03 – Level Three – Good, But Not Enough 7:19 – Level Two – Some Work to Do 8:22 – Level One – Everything is Wrong 8:56 – Best Learning Resources to Help 9:09 – Comparison of Levels 9:20 – Hidden Level Six! 9:32 – The importance of animations in design 9:53 – How to Reach Level Five in UI Design 10:42 – Closing Remarks
I’m very interested on no-code visual programming, not as to use them, but to create those kind of UI, but it’s very hard to find info because most searches will lead you to an already nocode app. I want to learn how to create those visual interfaces, what are the terms or resources that I need to learn?
UI/UX is not just about design but the communication between developer and user. It can be likened to what makes the perfect car…. Perfect form/function with perfect engineering. It is simple. The “next level” of UX/UI is being able to creatively integrate an approved design with the technical UML database fields that allow developers to understand and easily/quickly implement the backend.
How do you make the corner radiuses match? In level 5 it looks like the ‘read report’ button has a smaller radius that the other rectangles, while the ‘join meeting’ & ‘awaiting’ buttons are the same as their cards. Meanwhile, in level 3 this is swapped. When I set corner radiuses to the same value in figma, it looks like the corners are all the same height
Saying that what was presented at “level 3” is “not hirable” is pretty out of touch. Especially if you think someone should be creating designs for a year already around that stage. You mention some things like “visual hierarchy” and using the golden ratio but there’s no reasoning or rationale about what they are or why they’re good and should be used. For example, why use the golden ratio? Giving reasons like “it’s good spacing” or “it’s comfortable for the eyes” is very vague and doesn’t actually justify the critique. If you’re deriving the reasoning from something like gestalt theory then there’s still no reason why the spacing should conform to that specific ratio. Gestalt theory might instruct you to provide spacing for the sake of grouping elements but it isn’t particular about how much spacing should be provided. Most ratios would be adequate as long as they remain consistent throughout the whole design. You do offer some other valid critiques like using consistent spacing and “colour alone is not enough” for providing indicators of status and selection but this is something which takes 10 seconds to explain and to learn. Anybody can simply understand that and it doesn’t require years of learning. So it seems pretty elitist to say that someone would be “not hirable”. Being that this was the only real functional difference, I don’t see why it would be justified to say someone who produced the level 3 stuff wouldn’t be perfectly suitable for an entry position. This isn’t to say that there aren’t tiny, even invisible design adjustments that can still push a design towards perfection but that’s something at the very top end of design.
Amazing article, Michal!! I’ve been waiting for this article, totally worth it! Happy to know about the UI challenges, I got one of your courses, I’ll be joining the challenges pretty soon. I always wondered if recruiters do like to see Dribbble style UI designs in the applicants portfolios. Many Dribbble concepts are not too realistic because they are either not viable in terms of development or they have concepts that are not based on research and sometimes not even practical for real life users. I wanted to know, would it be best to design UIs based on what is in the market today showing decisions based on research and therefore risking to be too common and not setting apart from some other designers, or letting creativity flow, doing some nice but coherent animations, designs to grab attention and risking to look like it was made with visual appeal as priority if the recruiter expects the design to be more realistic, based on research and testing? Do most recruiters expect the normal designs (with UI design best practices still being implemented) more invested on usability and research or a “wow dribbble like” design that shows more skills and creativity on the design side? What are your thoughts on that?
Hm. Correct me if I’m wrong but speaking in Layman’s terms – the difference between a great, user-friendly design and a bad one is in the consistency of the design. So the more you stick to the repetition of the spacing of the elements, fonts, you can essentially design without thinking. Having a design system comes to mind having all the fonts, colors, sizes, and spaces provided. Of course, there are other things like color matching, typography, visual hierarchy, cognitive overload yada yada yada but nailing down the consistency seems to be the key to having great designs.
Hey man, I read you description and wanted to clarify something. You said if you want to get your first job as a UI Designer the only thing that matters on your portfolio are your actual designs and not your UX stuff? If this is true this is a MASSIVE weight off my shoulders and means I only need to focus on what I love (for now), which is UI design.
Stage 5 just has a little more breathing space horizontally, that’s basically it. Other differences are some lighter-weight icons and an accessibility bar on the home icon. The black text on green button is wrong and seems like the creator did it because it passes wcag 2.2, but in 3.0 this wouldn’t pass. White on green, like in stage 4, is the correct choice here. It’s all about the text luminosity.
You may have upto level 5 design skills but every projects want you to dish out designs on demand (counted in hours or days), usually with specs not in you design system or library, often unrealistic, not even aesthetically pleasing. Outputting a level 5 design only works on the weekends when real OG’s are searching for side gigs or new employer 😆😆😆
You need to also focus on: user journey, user research, how to work with shareholders, gestalt or heuristic theories, etc. We’re not just designers. I know many with strong portfolios who didn’t get hired because they lacked case studies. If they did get the interview, they could only articulate the design and not the case studies. You’re misleading people
Hi, What about the corner radius of the button above (Read report) and below (Join meeting) in the Level 5 sample? What about consistency in this case? Certainly my employers didn’t go to UI design school, but I doubt any of them would accept this. 😉 I think it was fine at level 4, so in terms of corner radius, level 5 is a step backwards, not forwards. What do you think about this?
Your actual UI satisfies a lot of technical standards, but the example is legitimately awful. This is very “dribbble,” designing UI without any thought on UX. A couple issues off the bat: – Do you get “good morning FIRSTNAME” every time you open the app? So much unnecessary space is being taken up by this, the hierarchy of information prioritized here is pretty crappy. An upcoming appointment where you need to join now is a lot more important but…a healthcare report is prioritized as the first card? – the use of 3D shapes thats used in the hospital report UI card is an issue, again a very dribbble like style. The visual itself doesn’t denote anything important about the card information, and it feels playfully out of character for a telemedicine app. – Why do I have the option to add teammates from the home page of the app, priotized above appointments? Why is “teammates” the word we’re using to refer to your coworkers? This feels very much like a social media app, instead of what should be a telemedicine app for healthcare professionals. – the use of profile icons is pretty excessive. Its likely that hospital staff will have photos of themselves, but patients is going to be a rarer case. You’ll have a lot of empty placeholder profile pictures in that case. I wish you would’ve used a better screen as an example for this article. The narrative that you’re driving that “level 5 UI via paying attention to golden ratios” is what is going to get you hired is misleading. The UX of this screen is pretty bad and believe me when I say managers would pass over this for one with messier spacing with better UX.
To answer your question “which level are you?” and considering lvl 5 is the max, you are in level 3 Malewicz. Failing to be compliant with accessibility standards like color contrast is from a low UI level. Please use a contrast checker and inspect your texts, the small ones fail and even the green icon of the bottom nav. A level UI designer lvl 5 delivers detailed accesibility specifications, including voice UI navigation, focus order, alt texts of Graphical objects and images, etc. Not even talking about interaction specifications that can include sound and haptic feedback. Please asses your skills before putting yourself in a pedestal and missinforming other designers. Contrast on UI elements checked: Text: “November”, Contrast Ratio: 2.71:1 Normal Text WCAG AA:Fail WCAG AAA:Fail Text “12:20”, “Today”, Contrast Ratio 1.91:1 Normal Text WCAG AA:Fail WCAG AAA:Fail Green icon (bottom nav) Contrast Ratio 2.67:1 Graphical Objects and User Interface Components WCAG AA: Fail Companies get sued for basic mistakes like this one.
This is awesome. My sister just finished a bootcamp and her UI is so far off from mine and i couldn’t pinpoint why. She’s probably around a 1 or 2 because they don’t teach UI in those schools. It seems like I’m between a 4 and a 5 after 6 years of trial and error and copying design. The first design thing I was ever taught was spacing and grids for magazine layout design and I think learning and mastering that skill can 10x your UI skills. Thanks!
Excellent article, thank you. Also good to know we’re at level 5. In QA we’re literally measuring the different spaces between elements with a plastic ruler and checking this against the size of the spacer in the design. It takes hours and hours to check the product and I don’t think the client notices–yet this is what you need to do at level 5. We use rulers as it’s super easy to check long ecreens. Many times you can eyeball it but the ruler never lies!
Speaking from 5+ years experience working professionally as a product designer (currently as a lead) and I just want to jump in and say the level 5 advice isn’t great. I only watched up until 3:59 so can’t comment on the rest of the article. Visually speaking, level 5 looks fine. He’s correct about keeping font family the same and icons being same style. But the spacing is way off. If you are working on or want to design for native apps, please do not listen to the multiples of x UNLESS x=8. You should be designing with the 8-point grid (which many articles touch on if you want to read up on it) in mind. The elements don’t even line up with each other properly in this article either. Design-wise, (I’m assuming) every iteration from level 1-5 is not a good example of good UX. Again, if it’s strictly UI then I’m fine with it. But for those who want to break into the UX field, think deeper than the surface visual level. Navigationally, why would an app have a bottom nav bar AND a hamburger menu on the top left? You are creating two different navigational systems. You will also need to consider ADA standards as well. The icons with no labels tell me nothing about what each tab does. Who is this app for? Am I a doctor? If I am then why do I have appointments with what looks like other doctors? Am I a patient? Then who are my teammates? Thinking about the user’s NEEDS will get you a job much faster than this “level 5 design”.