background preloader

UX > Mobile

Facebook Twitter

Designing Uis for Notches & Bezel-less iPhones. iPhone X was the most significant step up since the original iPhone, and it set a new bar for mobile app designers and developers. iPhone XS and XR series that were released after iPhone X were both based on the same concept of bezel-less phones.

Designing Uis for Notches & Bezel-less iPhones

Before diving into details on how to design for any of those devices, we recommend you download the Apple UI Design Resources for your favorite design tool, which includes templates, along with comprehensive UI resources that depict the full range of controls and views using the iOS SDK. These resources help you design apps that match the iOS design language. Splitwiser - The all-new Splitwise. Mobile app redesign — UI/UX Case Study! It took me around 6 hours to create this Promo Video.

Splitwiser - The all-new Splitwise. Mobile app redesign — UI/UX Case Study!

Do check out my beautiful Behance Presentation as well. Alright then. Let’s get started. Hey, Chethan. I want to redesign a website or an app. So a lot of young designers ask me the above question and I have a standard answer to this. Pick an app/website which you think you would be an apt user for. Wait up…Not so fast! I DO NOT recommend redesigning popular apps such as WhatsApp, Facebook, Instagram or Twitter. Oh! These apps have been designed by more than hundreds of designers. I guess now you know why I picked Splitwise. Why? Because it’s splitting mechanism does not meet my needs. However, my expenses were made in such a way that I had to split a single amount in multiple ways. Let me share an example of my type of expense so that you understand the real problem 😭. 5 friends go for dinner. 3 are vegetarians 🥦, 2 are non-vegetarians 🍗, 3 of them drink 🍻. The Ultimate Guide on Designing a Dark Theme for your Android app. Okay, now let’s talk numbers.

The Ultimate Guide on Designing a Dark Theme for your Android app.

So as I mentioned there are 2 contrast ratios that need to be satisfied. And here are the elements that play a role in the contrast ratio. 6 Best Practices for Mobile App Search Filtering. 7 Basic Rules for Button Design - UX Planet. Buttons are an essential element of interaction design.

7 Basic Rules for Button Design - UX Planet

They have a primary role in the conversation between a user and the system. In this article, I’ll review seven basic principles you need to know to create effective buttons. Minimalistic Design With Large Impact: Functional Minimalism For Web Design. About The Author Nick Babich is a developer, tech enthusiast, and UX lover.

Minimalistic Design With Large Impact: Functional Minimalism For Web Design

He has spent the last 10 years working in the software industry with a specialized focus on … More about Nick Babich … As web design focuses more and more on good user experience, designers need to create the most usable and attractive websites possible. Carefully applied minimalist principles can help designers make attractive and effective websites with fewer elements, simplifying and improving users’ interactions. Design. A Comprehensive Guide To Mobile App Design. About The Author Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on … More about Nick Babich … (This article is kindly sponsored by Adobe.) Basic Patterns For Mobile Navigation: Pros And Cons.

About The Author Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on … More about Nick ↬ How To Design Error States For Mobile Apps. About The Author Nick Babich is a developer, tech enthusiast, and UX lover.

How To Design Error States For Mobile Apps

He has spent the last 10 years working in the software industry with a specialized focus on … More about Nick Babich … The best error message is the one that never shows up. 11 Successful Mobile App Screen Designs. The most successful mobile apps out there have certain things in common.

11 Successful Mobile App Screen Designs

To start with, they somehow manage to be unique and predictable at the same time. They deliver something of value that users either want or need in their lives, pulling them in and refusing to let go for minutes at a time. But that’s not all. 10 Do's and Don'ts of Mobile UX Design. Mobile design can be a tricky subject, with many things to consider when creating a mobile app.

10 Do's and Don'ts of Mobile UX Design

To simplify the task, I’ve prepared some highly practical tips on what you should and what you shouldn’t do when designing a mobile app. Keep them in mind as you’re designing your app’s experience. First, the do’s 1. Designing a better ‘Settings’ screen for your app - UX Collective. UX Trends for 2019 — Displays Grow Faster Than Our Thumbs! Smartphones with larger screens are capturing a bigger audience each year, impacting the way devices and apps are designed.

UX Trends for 2019 — Displays Grow Faster Than Our Thumbs!

This raises the issue of how to plan the accessibility for thumbs more than ever before. Just look at the Thumb Zone heat map created by Scott Hurff that’s been applied to every iPhone display size since 2007. Since iPhone 6s, the screens have expanded and it looks like this growing trend will continue — especially that latest iPhones use 19.5:9 aspect ratio. What’s striking is that navbars are moving away from users’ comfortable reach.

Design for Fingers, Touch, and People, Part 1. Capacitive Touch Now, in 2017, when someone talks about touchscreens, they mean capacitive touch.

Design for Fingers, Touch, and People, Part 1

This is the type of touchscreen on all mobile phones, tablets, entertainment systems, cars, kiosks, and increasingly, other small devices that are currently in production. Capacitive touch uses the electrical properties of the body. That’s why it doesn’t work with any old pen as a stylus, when wearing gloves, or even when your skin is too dry. A finger acts as a capacitor, whose presence on the screen is measured by nodes on a grid—comprising layers on X and Y axes—between the display screen and the protective plastic or glass cover, as shown in Figure 1. While high-resolution detectors exist, they are used only for special devices such as fingerprint sensors.

This is not a perfect system. A few years ago, Motorola put a handful of devices in a little jig, so they could robotically control the pressure, angle, and speed of touch sensing precisely. Size, Pressure, and Contact Patches. The Thumb Zone: Designing For Mobile Users. About The Author Over the past eight years, Samantha has developed a bunch of websites and apps professionally. Some may say that she is jack of all trades, her most proficient … More about Samantha Ingram … If there is one thing that will stand the test of time, it’s thumb placement on mobile devices.

This makes consideration of the “thumb zone”, a term coined in Steven Hoober’s research, an important factor in the design and development of mobile interfaces. Have you ever interacted with a mobile website or app that simply didn’t play nice with your thumbs? In this article, I will share the knowledge I’ve acquired about the thumb zone and how to apply its rules to navigation, cards and swipe gestures. Learning From The Best.

Designing for Large Screen Smartphones. As smartphones continue to get larger but our hands don’t, what kinds of design solutions can ensure mobile interactions remain comfortable, quick, and easy on our thumbs? Here's a few options to consider... Designing for Thumbs In his analysis of 1,333 observations of smartphones in use, Steven Hoober found about 75% of people rely on their thumb and 49% rely on a one-handed grip to get things done on their phones. On large screens (over four inches) those kinds of behaviors can stretch people’s thumbs well past their comfort zone as they try to reach controls positioned at the top of their device.