tania

UI

designing some sort of UI every day
107 outputs

Creator

add bookmark
add bookmark

Landing page mockup

add bookmark

Today my UI design is inspired by an article I found explaining Breadcrumb design and its use case.

Article: https://uxdesign.cc/guidelines-for-breadcrumbs-design-a90eb1b21348

think of breadcrumbs as a supplementary navigation tool, especially for designs with very deep pages of content.

Breadcrumb designs are useful when a user may arrive at a page on a website that isn't the home page via an external link. By implementing secondary navigation, users will be able to understand what part of the website they are on. This will help them navigate to other more relevant pages.

add bookmark

DailyUI Prompt: Confirmation

This confirmation prompt can be used as a message to inform users that a part of their user-journey has been completed/has been successful!

A fun little message with an illustration is always engaging, rather than just having a message with plain text saying "Success" / "Your order is complete".

add bookmark

Simple navigation bar for today

add bookmark

Prompt for today was logo design. Designed simple logos using a circle + 4 different colors.

add bookmark

Playing around with this iOS wireframes plugin I found on Figma community.

add bookmark

I'm super exhausted today I had a full day of meetings, but still managed to bang out this UI of a Job Listings Page.

add bookmark
add bookmark

Prompt: Coming Soon

Today I played around with linear and radial gradients! I like the multi-colored background, I'm pretty content with it! I kept the screen minimal in its design. This concept can be used for any type of product launch, website redesign, or the launch or a new brand!

The white font might not be accessible for every user but can also be altered with all black font!

add bookmark

Prompt: Activity Feed Concept
Today I designed a simple activity feed for mobile. It consists of some of my artwork, my name, file type, and two icons to "comment" or "like. This concept can be implemented on any platform that needs a feed or it can be used as a method to share the work creators are doing.

add bookmark

Design Agency landing page concept

add bookmark

Some quick neumorphism buttons for tonight

add bookmark

Simple card design today, not feeling motivated to design today

add bookmark

Daily UI - Information Card

My design for today is very abstract. I like the way my name and the word 'Designer' overlaps over the card. The overlapping + the kerning of the words is a good way to use white space, but also keep the design looking modern and clean.

I've also been experimenting with ways to incorporate a dot grid into my design. I personally just enjoy using dot grids. Its a visually appealing element to fill in some space.

add bookmark

I didn't know what to make today, so I started reading some of Apple's Human Interface Guideline. I was reading about App Architecture, specifically Onboarding, and decided to redesign their one of their onboarding screen for the Pages App.

Key features when onboarding new users or returning ones
• Keep the onboarding experience fast, fun, and educational
• Avoid asking users for setup information at first glance
• Make it easy for someone new/old to use your app, let them dive right in rather than making it difficult!

add bookmark

Experimenting with a free Figma file emailed to me from Daily UI - Process Masterclass. Just playing around with some of their assets.

add bookmark

DailyUI056 - To-Do List UI Design.

Today I tried to redesign Apple's Notes App by following their UI Design. I didn't redesign all the features in the top navigation bar of the Notes App. My goal with this was mostly to just try to see if I can redesign this interface.

Their notes app is very minimal in its appearance with the use of rounded corners, light gray shadows, and strokes around their components.

add bookmark

Random UI concept I designed in 10 mins. Super tired tonight. Goodnight.

add bookmark

Reading articles on Hubspot tonight about Blog designs (Examples of blog designs, how to write a blog post, and design one).

Trying to understand what key features are essential for a blog post + blog. This will help me when I'm working on redesigning one this week for a new start-up I joined.

add bookmark

Recipe Concept App using my mom's recipe photos shes been posting via Instagram daily

add bookmark

Simple 404 page for today

add bookmark

Prompt: Testimonials

add bookmark

UI Design of how a "Blogs" page might look like on a website with multiple blog posts.

add bookmark

Prompt: Weather concept app
Today I designed the UI of a weather app. I kept the layout of the UI minimal, using light colors, simple shapes, and lots of grays.

I'm liking the layout of how I arranged the mobile screens in the frame (something you would see on dribbble lol).

add bookmark

Working on building a design system for my self so it's easier to pull assets into my UI designs. Slowly but surely.

add bookmark

I didn't get much time to work on my FL outputs today. I spent all my day baking lol, so this was all I could do today.

Played around with different strokes against a white/black background.

add bookmark

Prompt: A Blog Post

Foy my UI design today I decided to make a blog post design for my own website. Not sure if this is something I would implement as I don't often write blog posts. However, if I wanted to add this to my website this is how it would look.

add bookmark

I spent this morning practicing auto layout in Figma. I learned how to apply the auto layout to create a card with some child and parent auto-layout frames.

With auto-layout buttons can resize with their text, lists can rearrange themselves when items are moved around, and elements can be nested to create complex interfaces that respond to their content.

I also duplicated the cards to create a horizontal scroll effect for a prototyped version of how multiple cards can be implemented together.

Day 045 UI Design

Minimalistic Portfolio UI Design

[ My vision with the blob surrounding my name would be moving if developed using three.js/some other code ]

add bookmark

Prompt: Product Customization - Design something related to customizing a product. It could be a custom t-shirt, shoes, etc

Today I designed a single mobile screen of what it might look like to customize Jordan 1's. I focused on grouping my assets and creating components.

*I need to remember to name my design components whether its a button or a shape. This helps to keep things organized when designing various design elements.

add bookmark

A simple rounded card that I designed today.
Focus points for my next UI designs:
- work on grouping/creating components for assets
- build + follow my own design system
- practice auto layout

add bookmark

Not feeling well today. All I could do was this simple form.

add bookmark

Experimenting with a plugin on Figma today called Redlines. It allows you to quickly measure and plot dimensions of any selected objects.

add bookmark

Prompt: Design a file upload element. Is it the loading screen and icon? A progress element?

I designed a drag and drop file upload element. I like the progress bar upload element because it shows users which files are being uploaded and the progress of upload completion.

Not sure how I feel about the dotted/dashed stroke element. Something I was experimenting with rather than using a simple stroke for the border.

add bookmark

Prompt: Design something related to pricing.

Today I designed a pricing table. This pricing model concept can be used across any business trying to sell a digital product, software, subscription, etc.

add bookmark

Today I redesigned the UI of ZARA'S landing page ✨

add bookmark

Prompt: Design a Contact Us page or form.

add bookmark

Prompt: Dropdown
I tried to redesign Twitter's dropdown menu for a tweet.

add bookmark

Experimented with some neumorphism UI design today

add bookmark

A simple yoga studio UI for a desktop view. This is all I felt like making today.

add bookmark

Prompt: Subscribe Form

I used the @blushdesignapp plugin on Figma for these beautiful illustrations of astronauts, and some illustrations by @unDraw_co. ✨🌍 #dailyui

add bookmark

Minimal UI Design landing page concept for a Branding/Creative Studio company #dailyui

add bookmark

Prompt: Boarding Pass
Wishing I could travel right now… #dailyui

add bookmark

Prompt: Onboarding. Design something onboarding related.

Today I designed an onboarding user journey for a business that sells plants. Many small businesses are currently selling plants online via Instagram and Facebook. This is a UI design that can be used for their mobile app/website if they are looking to expand.

I spent a lot of time on this one. I practiced designing buttons, cards, a search bar, some icons and more.

add bookmark

Prompt: Search - Design something search-related. It could be a search bar, an advanced search window, a search function, etc.

I designed a search bar this morning inspired by Ye's unreleased album #Yandhi and #Jesus is King.

add bookmark

Online Store (Art Prints) Concept
Today I designed the UI of what an online store might look like that is selling art prints/any product. I took one of the visual art designs that I made today and incorporated it into the design. I really like this design, might even use this style/approach when designing a store for my prints in the future.

add bookmark

Just some simple button UI designs for today - all I could achieve today.

add bookmark

Redesigned a countdown timer because I was unhappy with the previous countdown timer I designed. This UI concept can be used for the launch of any product, sales, discounts and more. Kept the design minimal.

add bookmark

Prompt DailyUI: Location Tracker 📍
Designed this in Figma using the Mapsicle Plugin. It's a great plugin that lets you embed a map into your design based on any address/location.

add bookmark

Prompt: Design a Leaderboard
Inspired by Billboard's 'Top 5' Charts #dailyui #billboard

add bookmark

Prompt: Analytics

Today I designed a Sleep Visualizer UI with some sleeping analytics. I adopted a Neumorphism design for the two screens. This was definitely a fun exercise and I’m happy with the outcome. #dailyui

add bookmark

Prompt: Design a Pop-up/Overlay
Today I designed the UI of what a discount pop-up may look like on an e-commerce site.

I spent some time today browsing multiple websites and stores to buy plants, this is what inspired my design for today. Happy with the outcome 🌱

add bookmark

Prompt: On/Off Switch
Experimented with a Neuomorphism design trend today.

Neomorphism: Components have a dark box-shadow on the bottom and a light box-shadow on top. The combination of both creates the effect of the elements pushing themselves through your display.

add bookmark
add bookmark

Prompt: Countdown Timer

I tried to use the smart animate feature in Figma to change the numbers for the countdown. The moving plants are a gif I designed in Procreate. Not really happy with the outcome.

I might redo this prompt today and design a countdown timer for a mobile/desktop.

add bookmark

Prompt: E-Commerce Shop (Single Item)

add bookmark

DailyUI Prompt: Design a Flash Message with both the outcome for an error and success.

Designed this in Figma.

add bookmark

A quick UI mockup I made using the @blushdesignapp plugin in Figma @pablostanley, inspired by Susana Ortiz’s illustration system of pots and plants!!!

add bookmark

simple splash page ui

add bookmark

I have been having a migraine all day. This is all I could do today.

add bookmark

Prompt: Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing.

-------

Simple prototyping to showcase how the share button would be used.

add bookmark

Prompt: Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing.

------------

For today's prompt, I designed a social share button for a user reading an article on a mobile view. This type of UI design can be used on any platform's blog. The article design is inspired by something I learned how to do yesterday. 👇🏽

-------------

Yesterday I came across an article on Dribbble that turned out to be super useful for me. In the past, I used Adobe Illustrator a lot but found better tools for designing, such as Figma.

This article was super useful because it explains how to generate a color palette between two colors using the "Blend Tool" on Illustrator.

I haven't found any tools that generate a robust color palette by selecting your own colors. I definitely think I'm going to be using this feature often.

add bookmark

1 of the 3 contact cards I remixed!

add bookmark

Today I am not doing my Daily UI Prompt since I didn't have time to complete it. Instead, I remixed a contact card from someone in the Figma Community this morning.

add bookmark

DailyUI009
Design a music player. Also, consider the device type that's playing the music. A dashboard in a tour bus, a smartwatch, or via a web browser. Each device type will have different requirements, features, and restrictions to consider.

Designed a quick mockup for an apple watch.

add bookmark

DailyUI008

Prompt: Design a 404 page. I wanted to design something bold and fun because a 404 page is something that people land on often.

I looked at some 404 pages on Dribbble and many were space-themed, so I decided to go for this type of design. This 404 would only work for some brands/websites as it may not align with the branding guideline.

Thinking of making another 404 page that is more minimal and can be used by many brands/businesses.

The astronaut was designed using Procreate and the rest of the assets were created in Figma.

add bookmark

DailyUI007
Prompt: Settings (Design settings for something). Using my daily prompts only during the week. On the weekend my concepts will be a random UI design.

Using a Figma plugin I designed a mobile screen that displays settings for 'General' and 'Security and Privacy".

add bookmark

006 Menu screen concept

add bookmark

Simple wireframe of a mobile screen. I would use this screen as part of my user's onboarding journey to display, an image, some text, and a next button.

add bookmark

https://www.dailyui.co/
DailyUI is the website I use to receive prompts every day to design a new user-interface. Although, DailyUI does not send prompts on the weekend.

add bookmark

DailyUI005
How the app icon would look alongside other apps. Used a Figma plugin to design this layout.

add bookmark

DailyUI005
Prompt: App Icon
Notetaker was the name of an app idea I had a while ago. The app would be able to record your voice and transcribe every word into text. This tool would be used by teachers/students in classrooms.

Pain points:
- teachers speak to fast during lectures
- inability to retain information
- too much work to write down notes manually or type while someone is speaking

add bookmark

DailyUI004: Calculator

Feeling tired today, just put this together. Not too crazy about the prompt provided by DailyUI for today.

add bookmark

DailyUI003: Landing Page for CB2 Redesign

add bookmark

DailyUI003: Landing Page - consider important landing page elements (call-to-actions, clarity, etc.)

This is the current landing page for CB2. They don't really have a welcoming page, rather a landing page that showcases their products right away.

The services they offer get hidden in between their content and products. CB2 provides users with a service where they can redesign their rooms with a virtual room design using AR.

add bookmark

Left aligned contents this morning making the screen look more organized. I also moved contents over to the center slightly.

add bookmark

DailyUI002: Credit card checkout form/page
Redesign of Nike's current checkout/payment interface.

Not the happiest with this redesign, but I wanted to output this before 12. The page doesn't seem quite balanced and isn't using the white space effectively.

Too much white space in the middle is distracting. I might work on redesigning this again in my spare time.

add bookmark

DailyUI Prompt 002: Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.

My goal for this UI design what to redesign the payment/checkout section of Nike's website.

Need to explore these two areas more to get a better understanding of what assets make an intuitive and seamless web checkout experience.

add bookmark

The image on the left: inspiration
The image on the right: Current sign-up page of Vans.

I tried to make my redesign more clear and concise. I feel that my redesign emphasizes the brand more with the use of a bright-colored image of their product. This will catch users' attention and will make them want to sign up.

Starting a dailyUI Challenge today

Thinking of starting a #dailyUI challenge to continue practicing my user-interface design skills. Not sure how long I can keep up the streak for. Today I redesigned the sign-up page for @vans_66.

Today's prompt: Create a signup page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can imagine.

While I was scrolling on Dribbble I came across a UI design and tried to incorporate it into my redesign. In my next output, I will post my inspiration and the current sign up page for Vans.

add bookmark

Users can view the different types of "City Bikes" on this screen.

add bookmark

Users can see the different types of bike categories on this screen

add bookmark

Onboarding Screen

add bookmark

Bike Rental Concept UI using @pablostanley's "Open Peeps" illustration library.

add bookmark

Bike Rental Concept App
1. Using Pablo Stanley's "Open Peeps" free illustration library
2. Trying to create an e-commerce onboarding experience
3. Still playing around with the layout of how users would be able to select what category of bikes they are interested in

add bookmark

Final Screen 2

add bookmark

Screen 1

add bookmark

Final music concept UI design, inspired by Apple Music's UI and The Weeknd's album "After Hours.

1. Used a template kit to guide me with the design
2. Tried to adopt Apple Music's UI, by using dark mode, using coral/red on icons and fonts and more.
3. It was fun creating an interface similar to an app I use daily, might do more of this.

add bookmark

This is the original UI music template in the Figma freebie kit I downloaded. Used this as a guide to help me develop my music concept app, inspired by Apple's UI.

add bookmark
add bookmark

Music Concept UI - a concept of The Weeknd's new album "After Hours".

1. I downloaded some Figma Freebie Kits today that include a collection of design resources.

2. The kit came with some music app templates, so I am currently trying to explore what I can do with it

3. Trying to follow Apple's UI design by using dark mode, coral/red colored icons/fonts and more.

add bookmark

Screen 2

add bookmark

Screen 1

add bookmark

COVID-19 concept app design

1. Designed most of the illustrations myself, a few are from an open-source library
2. Used split complementary colors for the UI
3. Also played around with a free Figma UI kit for iOS

add bookmark

COVID-19 concept app

add bookmark

Screens against a white background. The original design is much cleaner and ADA compliant. This might have a few accessibility issues, but overall the colors are more pleasing.

add bookmark

Experimented with a more relaxing color palette against a black frame background

add bookmark

Added color, but this really hurts my eyes.

add bookmark

Spent more time playing around with the functionality and features of this screen

Yoga App Concept Design

Yoga app concept design: 3 screens completed

1. I will experiment with different colors for the design, rather than just shades of black and white. Current yoga apps in the market are very bright and colorful.

2. Used an 8 grid spacing technique for some of the layout

add bookmark

Added some more screens and playing around with the layout. I am using Figma to design my mockups and it is very intuitive and easy to build mockups.

add bookmark

Fitness UI Mockups

1. Logo design done by me using the Procreate App
2. Playing around with some linear gradients in for the mobile background using whites, greys, and blacks.
3. Not sure how I feel about the addition of the dot grid, might keep it or leave it for the final mockup
4. Color contrast for the illustrations might have to change to make it visually pleasing to the eyes
5. Font colors are ADA compliant

add bookmark

Interface mockup designed using various resources.

alxndr
That stripe inspiration 👀
tania
@alxndr dailyUI gives me a prompt everyd...
tania
I got access UX Design Master class pack...
internetvin
💫
tania
ty ✨✨
lucas
Really like this one.
tania
Thanks Lucas. I'm going to see how long ...
lucas
Pretty cool to see how you progress.
Day 045 UI Design
Starting a dailyUI Challenge today
Yoga App Concept Design
00:00
tania
tania UI