Category: UI design
Type: mobile app, web, smart watch
Date: 2021
Landing Page
A landing page is a standalone web page, created specifically for a marketing or advertising campaign. For this user interface of the week, my landing page was based off of one of my own UI projects, WAVE. WAVE is a social media music mobile application. When designing this landing page, my goal was to catch the viewer's attention, gain their interest in the app, and take action to download.
Snackbars / Banners
Banners are typically used in UI design for notifications. Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom or top of the screen. They shouldn't interrupt the user experience, and they don't require user input to disappear.
Calendar
The calendar I designed is meant for a desktop interface. This particular calendar is used for setting dates and reminders for certain periods of time.
Buttons / Sliders
I was challenged to create a user interface with a "slider." Sliders are often used to indicted users to input certain values or options. In this case, I designed an app for outdoorsman to shop for gear and equipment for adventures, and utilized the slider to scroll through various products.
Modals
Modals are large UI elements that sit on top of an application's main window—often with a layer of transparency behind them to give users a peek into the main app. To return to the application's main interface, users must interact with the modal layer. The modal I designed prompted the user to create an account for a Travel Booking application.
3D Icon
3D icons are very popular designs for mobile applications. For this user interface, I designed a fire icon resembling a popular dating app, and added dimension with bevel and emboss to create a 3D look.
Countdown Timer
I designed a countdown timer design suited for an apple watch. The design utilizes shadow to create dimensionality to the timer, as well as graphic icons indicating the time of day.
Image Lists / Chips
Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold. Chips are compact elements that represent an input, attribute, or action. I designed a movie ticket purchasing application similar to fandango, and created an image list of the films the user can choose from, as well as utilizing chips in order to choose a certain time.
Tool Tip
Tooltips are small UI elements that help guide users towards taking specific actions. They're triggered when a user hovers over an on-page item or when they click on a hotspot. Tooltips give users extra information that paves the way for product success. I designed a payment page where users can fill out their credit card information, and used a tool tip to indicate the purpose of a certain button.