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
   Tab bar
   Search Bar2. Containers   Backdrop
   Bottom Sheets
   List3. Controls   Buttons
   Checkbox
   Progress Indicator
   Text Field 
   Slider4. Popovers   Snack Bars5. Imagery   illustartions

1. Bars

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.

Navigation 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 Bar

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.

Search Bar

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.

2. Container

Apps use a various container that contains their content which basically helps in better content view and app design and Dropbox done it perfectly.

Backdrop

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 quick simple that helps the user to choose a destination for file import.

Bottom Sheet

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.

3. Controls

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

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.

Checkbox

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.

Progress Indicator

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 Field

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

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 Control

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.

4. Pop Overs

Popovers are the basic popups that the app shows to every user for better guiding them at every step they have to.

Snack Bar

Dropbox uses Snackbar as a popover for displaying the message like error and suggestions like an upgrade to premium.

5. Imagery

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.

illustrations

Dropbox uses custom illustrations for better guiding their audience on onboard and across their app for better understanding their features through visual understanding.

Thanks for Reading

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.