Modern UI design is not just about aesthetics, but also about inclusivity, consistency, narrative setting, and enabling learning without learning. To create an effective mobile UI, designers must research and understand their users, understand UI design patterns, work with various design tools, and create engaging, useful, accessible, and trustworthy products or sites.
In 2021, designing for mobile devices is just as important as designing for desktop. Some must-know mobile UX design tips include being generous with spacing, using familiar elements, app speed and performance, choosing the right fonts, respecting platform guidelines, conducting comprehensive research, keeping it simple, going for white space, getting the curves right, making waiting pleasant, and using motion.
To create a top-notch app UI design, focus on simplicity and clarity, use familiar elements, app speed and performance, choose the right fonts, respect platform guidelines, and follow comprehensive research. Use clean, minimalistic lines and shapes, use clear and concise language in labels, instructions, and error messages, and avoid using a limited color palette.
In summary, creating a modern UI design involves practicality over aesthetics, inclusivity, consistency, narrative setting, and enabling learning without learning. By following these principles, designers can create visually appealing and usable mobile experiences. Additionally, it is essential to respect platform guidelines, conduct thorough research, keep it simple, go for white space, use curves correctly, make waiting pleasant, and use images for motion.
📹 Level up your UI design skills in 7 minutes! | EP1
P/S: The last screen should be Name on Card and Card Number. Apologies for the mistake as this was all done under 1 hour …
What is the best color for modern UI?
This article examines the prevalence of the color blue in user interface (UI) design, particularly in the context of smartphone applications. It considers the popularity of blue as a color choice for various prominent apps, including Facebook, Twitter, Shazam, and Safari. Blue is regarded as the safest color on a global scale, as evidenced by survey results indicating that the majority of individuals express a preference for this hue. Consequently, blue is a prevalent selection for user interface (UI) design.
What makes a UI modern?
A modern UI design aligns with the audience’s perception of a credible visual experience, incorporating user-centric trends, usability, patterns, and structures that flow with hand-eye motion. While it’s challenging for end-users to identify all aspects of modern UI design, they can resonate with a modern design. The goal of creating an advanced and contemporary UI is to build credibility and utility, making customers feel comfortable surfing with an interface that fits their style and requirements. This design segment can sometimes be overlooked by users.
What are the 4 C’s of UI design?
The first C of Four Cs in user experience design are consistency, continuity, context, and complementary. These include elective recovery, operational effectiveness, data and digital, collaborative working, population health management, financial sustainability, research, policy, evaluation, training, data, digital and real world evidence, improving patient access, building healthcare partnerships, growth strategy, due diligence, and enterprise value creation.
Is it hard to design a UI?
Learning UI design is a challenging process that requires constant practice, iteration, and repetition. It is similar to other visual design fields and UX design, as it uses similar tools but with different techniques. UI Designers use similar tools to Graphic Designers, who use programs like Photoshop and Illustrator to design digital assets. However, UI Designers learn to use additional tools for building user experience layouts, many of which were developed to address the limitations of these programs.
In professional environments, there is a great deal of overlap between the two positions, as Graphic Designers likely learn programs like Photoshop and Illustrator to design digital assets for UI Designers. Students interested in learning more about graphic design should consult the topics page on Noble’s website.
Can I use Figma on my phone?
Figma Mirror is a Figma application that is accessible on both iOS and Android devices, with a more limited web version that can be used for access. The application enables users to view their Figma designs on mobile or tablet devices, open files and prototypes, or mirror desktop views. The application is available for download on iOS and Android platforms, and a web-based version is available for mirroring.
How can I create my own UI?
UI designers can create their own UI design strategy by setting design goals, conducting user research, creating a wireframe, developing the visual design, prototyping, handing it over to developers, and gathering user feedback. However, branding is not their forte, leading to the common appearance of UIs across different brands. Understanding the UI design process is crucial to avoid poor planning and confusing outputs.
The seven key steps include setting design goals, conducting user research, creating a wireframe, developing the visual design, prototyping, handing it over to developers, and gathering user feedback.
What’s the next UI design trend?
The 2024 UX and UI design trends include AI in design, animated icons, and cross-platform UX. Instagram is improving its desktop experience to accommodate growing demand. UXPin is a tool for creating high-quality prototypes to test UI design ideas. AI-integrated design is becoming a trend, with ChatGPT taking over industries like design. This includes brainstorming solutions, constructing research plans, and making complex UX design decisions.
How to create a stunning UI?
To implement user-centered design in your own work, focus on simplicity, clear language, consistency, visual appeal, and interactive elements. Avoid using jargon or technical terms that may confuse users. Use consistent design elements throughout your product or service to help users learn and remember how to use it. Use attractive colors, fonts, and images to create a visually appealing interface. Lastly, use buttons, menus, and sliders to allow users to interact with your product. By following these tips, you can create a user-friendly and effective product.
Is it hard to create a UI?
Learning UI design is a challenging process that requires constant practice, iteration, and repetition. It is similar to other visual design fields and UX design, as it uses similar tools but with different techniques. UI Designers use similar tools to Graphic Designers, who use programs like Photoshop and Illustrator to design digital assets. However, UI Designers learn to use additional tools for building user experience layouts, many of which were developed to address the limitations of these programs.
In professional environments, there is a great deal of overlap between the two positions, as Graphic Designers likely learn programs like Photoshop and Illustrator to design digital assets for UI Designers. Students interested in learning more about graphic design should consult the topics page on Noble’s website.
📹 5 Tips to improve your UI Designs
———————————————————————————— //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship …
Did you enjoy this article? Should I make more vids like this? 🥺 ——– UPDATE (27/6/2023) ——– My redesign of this is nowhere perfect, so let’s learn how to improve it further, together! Below are the feedback/suggestions from all of you. —- Important Fixes —– 1. In the ‘Add card’ page, it should be a card name & card number field. 2. Payment methods that are NOT selected should NOT be disabled (greyed out)! This would confuse users, thinking that there are errors. Instead, the selected payment method should be prominent (ie. a checkmark to indicate that it is selected). 3. Keep the checkout process straightforward and simple. In my redesign, there are different scroll directions/interaction patterns, while it looks better, it may not be user-friendly. 4. When designing, ensure all text meets the WCAG Contrast Ratio standards. There are free plugins on Figma that do this. —- Suggestions / Notes —– 1. To consider how to set ‘Card’ payment method as default when user doesn’t want to save card. 2. ‘Scan card’ feature should be discussed across the team and evaluate if this is worthwhile. (thank you @edumazieri) 3. I placed the ‘close’ button on the top left corner because that’s where users are accustomed to tap on when they exit/go back. For example, Spotify and Expedia app places their close button on the top left corner. There is no right/wrong placement as this is subjective to the product you’re designing. 4. When designing GPay/PayPal/Apple buttons, check the payments company’s brand guidelines.
First and foremost, I appreciate the concept of exploring design enhancements. I’ve reviewed the comments to ensure I’m not being repetitive, and I couldn’t find a similar one. I apologize if this point has already been addressed. One thing that caught my attention, and I’d like to inquire about, is the decision to keep the logos on the right and the full names on the left. Just a thought, these three companies are well-established in the market, where their brands speak for themselves. By simply looking at the icons, we can easily identify them. I believe it might be worth considering to maintain the initial concept.
I agree with many of your suggested optimizations, however I would still have a few questions. I understand this is only a mental exercise, optimal solutions are only found through a proper design process. I hope readers understand I am not here to criticize, asking these questions and considering edge cases and guidelines is important for all of us to develop our craft together. I will be extremely nitpicky just for the sake of the exercise. Let me know what you think 🙂 – Make card default is only possible if the user saves the card. How would that case be handled (user does NOT save card, but wants to make card default)? – The disabled button could lead to confusion for the user. It’s a better practice to keep interactive elements enabled unless there is a clear indication on the screen of why it is not (such as an error). Do you think that should be considered a potential issue? – I understand the intention of making the design look prettier, but on a checkout process, specially the payment method step which is usually anxiety inducing for the user, that would not be the ideal place to add to the cognitive load with 2 separate scroll directions and 2 separate interaction patterns for the same field. Are there any usability reasons to go with this solution? And these last 3 are things to consider, not exactly questions: – Input fields need to have proper contrast. WCAG AA standard requires a minimum 3:1 contrast ratio for non-text elements. – Adding a feature to scan a card is indeed helpful to users, however that is not a UI decision, that is a feature that needs to be scoped and implemented by the team.
Interesting to see the process behind improving designs. The final design looks fresh and modern. I do wish there was an actual side-by-side at the end of the article. I found myself needing to scan around to compare the final result to original. Also (and maybe out of scope for this), I’d like to see design articles that also consider WACG guidelines as things like the main CTA color contrast would probably get flagged for improvement
OMG, that End Result was such a great one… Wanda, too, had done a great job… I like the way you still refer to other people’s designs too still learn, even though you are a great designer. We are all people learning everyday. Please continue this as a series I would love to watch more article of this kind…
wow, this is one of the best UX design articles i’ve seen. You explain things perfectly and its so easy to understand. A lot of what you did were things that make so much sense that i didn’t know i could do in Figma since i haven’t seen that in any other article iv watched in my journey of UX design. Thank you so much for this! This inspired me to work harder and improve my skills so i can do this full time, i am really passionate about UX even though i just started in the last 2 months <3
Love your redesign ! As a young designer, it was also interesting to see the way you structure your notes, how you set priorities and reflect on the task at hand. It’s a bummer we’re not focusing enough on this at school bc it’s an important step since it’s at the early stage of the process. Also, I would love to see a article that shows like a step by step guide of a project hand off to engineers/developers ! Thanks for the amazing content Rachel !🔥❤
I’m so unreasonably mad how short the disclaimer was. If you’re perusal this on a smart tv or Chromecast, pausing the screen fills up the screen with Google’s UI, making the “pause to read” worthless Yeah I know it’s stupid to be mad over it but it’s done so often and you even did side little hand effects and editing for it.
Entire redesign is great except, for the placement of “Add new card” button in the end of carousel. Most of the users who would want to add their card would want to have the CTA upfront somewhere. It’s highly unlikely they would expect it there. Essentially, there is no information scent for them to expect it there. Rest all looks cool!
The article was great, but I have feedback for your redesign. Graying out the other options when one is selected gives the impression that those options are no longer available. That would deter the user from trying and changing to them, so that’s not a good practice. Also for my taste the icon in the progress bar was a bit too heavy for the eye, it should be a bit simpler in design or a bit lighter but looking at the whole screen it just draws my eyes a bit too much.
Excellent work and error analysis. But it seems to me that you gave a new body to the design, but took away the soul. In the old version of the design, it is somehow homey and family-like, and the new design has some kind of office type. Roughly speaking, the first option is a person with a soul, and the second is a robot that does a certain job. At the same time, we humans want robots to be similar to humans, just as different. I think it was possible to do with fewer corrections and leave the soul and carry out cosmetic repairs of the body 🙂 You have made a major rent and built a new house. Thanks for the article, don’t be offended by my opinion.
Quick question… I feel like “Save as default payment method” & “Save card for future purchases” are more or less the same thing. I know they’re not but either way, you’d be saving the card. Correct? Can you help me understand your reasoning for wanting to add that button instead of rewording it to read more clearly to the user?
As a user, I’d love to see the Add new card button at the bottom rather than at the end of a carousel and here is why: when we add the first card everything is good and Add card would be the first thing I see. However, if my card got expired after a while, I wish I can add a new one quickly and continue my shopping. Instead of 1 tap as in the first version of the design, I have to perform 2 actions now: scroll the carousel and only then tap on the Add a card. Other than additional action, I believe some people just won’t get they can add a new card this way. Depends on a user persona for sure, but still
Hey Richel! I’m currently learning UI/UX design. Your redesign is truly outstanding, and the way you present the results is truly remarkable. I’m curious to know if you’ll be demonstrating the results in the article. It would be super helpful for me to improve the quality of my designs. I’m also wondering if anyone who sees my comment could share their thoughts about it. Thanks a bunch!
Hi Rachel this is so cool!! The organized steps you took to point out each element you wanted to improve was INCREDIBLY helpful (I’m a disorganized mess). I just had a question/comment on your final redesign in the “Add credit or debit card screen”. Is the “Name on card” supposed to be labeled as such? I only ask bc the placeholder “0”s look like the input box is for card numbers. I know this is so trivial bc your purpose was to show your process in redesigning screens. I just wanted to see if maybe I am misreading the screen!
Sorry. It’s not about UI, but UX more, I think. And it’s good too, and it’s just another topic. I want to say that UI is more about visuals without a context that we have: rhymes of elements, repeating patterns, colors mix, width and length of elements and their consistency. This article is kind of a mix of UI and UX tips and ideas
Criticism: The new design uses toggles where it should use checkboxes, and they are too far away from the labels. Toggles and checkboxes are for different purposes, it’s not a design choice. Also, I don’t see the benefit of renaming the add card button. Scan my card is not a design choice, it’s a feature that, depending on the platform, can be non-trival to implement. Designers need to understand which features are trivial and which are not.
An article said that the input field order should match the order in which the information is provided on the card. So that the user does not have to flip the card often while entering the data. What’s your opinion on this? Or should we continue with the existing, conventional layout and order of input fields to avoid any confusion?