Today, I’m going to start a new series with this article and I call it UI breakdown in which I’ll break down the UI elements of several Big apps, this is just version 1.0 of what I’m thinking which I created for testing out my idea.
if you like the idea or wanted to suggest, go ahead and share your ideas below, and with that said, let’s get started.
I’ve chosen dropbox because it is one of my favorite apps as there are several apps on the app store that offer cloud service much cheaper than dropbox, but there is the design of the app that holds its users (like me) for using it.
before getting deeper into the article here is the quick context box so that you’ll choose your favorite element from the list and go to it by clicking it.
Elements1. Bars Navigation Bar
Search Bar2. Containers Backdrop
List3. Controls Buttons
Slider4. Popovers Snack Bars5. Imagery illustartions
Every app has the most basic bar section, which provides basic functionality like navigation through multiple screens, searching the content, and swiping between several tabs of content. let’s see how dropbox uses the bar.
The navigation bar is the part of the elements that help the user to easily navigate through the various screen of the app and Dropbox uses it very effectively by displaying icons and label they have created a navigation bar with better UI and UX design.
Tab bars are the basic elements of UI design that help the user to easily navigate between several screens inside the main screen. Navigation bar use for primary screens but the Tab bar use for secondary screens.
The search bar is self-explanatory means that it’ll help you search for things you want and Dropbox designed it very grateful. If you want to search for things inside a single folder you can also do it with it.
Apps use a various container that contains their content which basically helps in better content view and app design and Dropbox done it perfectly.
The backdrop is a container that opens above another screen that helps you to quickly do simple work without destroying your previous work behind the screen. Dropbox uses a simple backdrop that helps the user to choose a destination for file for import.
A bottom sheet is a simple sheet-like thing that appears from bottom to top and apps prefer it for better one-handed usage of their app. Dropbox makes it simple and easy to use by adding icons and giving colors to the most important thing (like the delete button).
The list is the basic container every app use to arrange their content in a list view. Dropbox uses it for arranging their files according to the alphabet which helps users to easily navigate through files.
Controls are the elements that help users to control the app just like they want. Dropbox makes it easier to control the app by adding several controls that are really helpful.
Buttons are basic but Dropbox makes them great by designing them with blue and white color for better contrast and also they make their text short and precise for better user experience.
The checkbox is also one of the common control that helps users to check the things they want and uncheck the things they don’t want. Dropbox uses them for selecting files and images for sharing, deleting, etc.
When you press a control it sometimes required some time to process thing where you have a progress indicator that shows you progress which Dropbox uses when you click the photo and upload it.
Text Fields are another most common thing that every app has and Dropbox let it simple as hell which is great for the user. Dropbox uses it for editing files name, entering your password and email, etc.
Sliders are controls that help you to adjust something by sliding the thumb of the slider which helps for controlling several things like the contrast in the case of Dropbox.
Segmented controls are just like navigation, tab bar but they have used so precisely for doing specific work. In the iOS version, Dropbox uses it very effectively for switching Between edit and arranging the files. It is kind of a father of switch button.
Popovers are the basic popups that the app shows to every user for better guiding them at every step they have to.
Dropbox uses Snackbar as a popover for displaying the message like error and suggestions like an upgrade to premium.
Images are the most important part of the application and it helps users to visually understand various things which Dropbox uses very effectively on their onboarding.
Dropbox uses custom illustrations for better guiding their audience on onboard and across their app for better understanding their features through visual understanding.
So this is the small introduction of the breakdown if you want a deeper look into the app ui breakdown where I literally break every element into atoms for better understanding just give a clap or share your response below.