I made a new UI interface every week that highlights a different feature. Everything from snackbars to map interfaces were explored, and each was given its own unique branding. All interfaces were designed in Figma.
Login Page
This second-hand buying and selling app for interior design features a clean and minimalist login page. The login and sign up buttons distinctively carry differing hierarchies so the user can clearly tell them apart.
Buttons and Sliders
This UI features a music app that allows the user to customize their listening experience. The buttons encourage ease of use for automated controls and the sliders allow the user to detail the audio further.
Bottom Navigation Bar and Icons
The bottom navigation bar presents a simple and accessible UI that grounds the user and allows them to know where they are in the app and where they might go with the convenient helper text. The easy to understand icons break down the various pages within the app into simple pictures, allowing the user to understand at a glance the organization of this daily health app.
Progress Indicator
A simple color overlay and loading symbol allow users to not get frustrated when a page does not load. It communicates inter-workings of the app and eliminates any confusion over the delay.
Text Fields With Error State
This appointment booking app features two versions of text fields: outlined and filled. These are designed with users in mind so the information fields are clearly separated by differing stylizations. Additionally, as with many text fields, error states are to be expected, and this UI displays how the interface might look in that instance.
Tooltip
As a sister UI to the text field interface, tooltips are another UI component that might pop up to enhance the user experience. This simple design allows the tooltip to highlight a feature that the user may not yet know about.
Date Picker
This calendar feature within an app highlights a multi-day date picker that clearly labels which days the user has selected and provides additional information, such as what these dates are selected for.
Map
This hand-drawn map creates a seamless interface for swift understanding while driving. A top bar promptly displays the next direction with the bottom bar provides additional information.
Selection Controls
This UI features togglable selection controls to customize the app to the user's preferences. The pop-up menu is easily reached from the main page and can swiftly swipe away when not in use.
Image Lists and Chips
This clean yet funky app interface provides the user with inspiration pictures for interior design projects. Additionally, it suggests further filters in the way of chips under the search bar for a better searching experience.
Modals
This set of responsive web and mobile modals allows brands to clearly communicate high-priority information to the user. The responsive design provides ease of transferability between different dimensions of interfaces.
Banner
This cartoon streaming app features a slide-down banner to inform users of functions that require a response. It's prominent yet not intrusive design catches the user's attention without disrupting their experience.
Snackbar
Like the banner UI shown above, this snackbar component helps the app clearly communicate with the user. However, this particular unit is a much lower priority and simply allows the user to know the app executed their request successfully and disappears with no need for interaction.
File Upload
This colorful yet systemized app interface makes file uploads easy and fun. Past file uploads are made readily available with the title, size, and date of when they were last modified. Additionally, new files are easily uploaded with the floating upload button in the lower lefthand corner. Thumb-based navigation at its best.
Menu
This pop-out side menu slides out from the hamburger overflow menu in the top navigation. From there, users can easily view their files in organized categories or adjust system preferences in the settings menu.
Tabs
This UI features a money managing app in which the user can easily balance and keep track of their money through tabs, seamlessly switching between savings, checking, and credit balances.
Timer
A countdown timer with visual indicators is shown within the small confines of an apple watch.
Landing Page Desktop and Mobile
Transferring a landing page from a desktop to a mobile interface is crucial to maintaining the consistency of the brand. Here the systems of the previously established mobile app, Terre, were utilized to make the landing pages of the websites as seen on mobile and desktop interfaces.
