Landing page mockup
Today my UI design is inspired by an article I found explaining Breadcrumb design and its use case.
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.
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".
Simple navigation bar for today
Prompt for today was logo design. Designed simple logos using a circle + 4 different colors.
Playing around with this iOS wireframes plugin I found on Figma community.
Six Circles - an experience design framework is a book written by James Kelway - persuasion, behaviour, visual design, usability, interaction and content.
Reading about how Apple implements rounded corners, soft shadows, and delicate gradients into its UI design. These design trends are very effective and are probably here to stay.
^ Another article I'm reading about rounded corners.
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.
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!
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.
Design Agency landing page concept
Some quick neumorphism buttons for tonight
Simple card design today, not feeling motivated to design today
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.
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!
Experimenting with a free Figma file emailed to me from Daily UI - Process Masterclass. Just playing around with some of their assets.
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.
Random UI concept I designed in 10 mins. Super tired tonight. Goodnight.
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.
Recipe Concept App using my mom's recipe photos shes been posting via Instagram daily
Simple 404 page for today
UI Design of how a "Blogs" page might look like on a website with multiple blog posts.
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).
Working on building a design system for my self so it's easier to pull assets into my UI designs. Slowly but surely.
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.
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.
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.
Minimalistic Portfolio UI Design
[ My vision with the blob surrounding my name would be moving if developed using three.js/some other code ]
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.
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
Not feeling well today. All I could do was this simple form.
Experimenting with a plugin on Figma today called Redlines. It allows you to quickly measure and plot dimensions of any selected objects.
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.
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.
Today I redesigned the UI of ZARA'S landing page ✨
Prompt: Design a Contact Us page or form.
I tried to redesign Twitter's dropdown menu for a tweet.
Experimented with some neumorphism UI design today
A simple yoga studio UI for a desktop view. This is all I felt like making today.
Minimal UI Design landing page concept for a Branding/Creative Studio company #dailyui
Prompt: Boarding Pass
Wishing I could travel right now… #dailyui
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.
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.
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.
Just some simple button UI designs for today - all I could achieve today.
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.
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.
Prompt: Design a Leaderboard
Inspired by Billboard's 'Top 5' Charts #dailyui #billboard
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
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 🌱
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.
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.
Prompt: E-Commerce Shop (Single Item)
DailyUI Prompt: Design a Flash Message with both the outcome for an error and success.
Designed this in Figma.
simple splash page ui
I have been having a migraine all day. This is all I could do today.
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.
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.
1 of the 3 contact cards I remixed!
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.
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.
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.
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".
006 Menu screen concept
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.
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.
How the app icon would look alongside other apps. Used a Figma plugin to design this layout.
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.
- teachers speak to fast during lectures
- inability to retain information
- too much work to write down notes manually or type while someone is speaking
Feeling tired today, just put this together. Not too crazy about the prompt provided by DailyUI for today.
DailyUI003: Landing Page for CB2 Redesign
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.
Left aligned contents this morning making the screen look more organized. I also moved contents over to the center slightly.
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.
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.
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.
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.
Users can view the different types of "City Bikes" on this screen.
Users can see the different types of bike categories on this screen
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
Final Screen 2
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.
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.
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.
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
COVID-19 concept app
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.
Experimented with a more relaxing color palette against a black frame background
Added color, but this really hurts my eyes.
Spent more time playing around with the functionality and features of this screen
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
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.
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
Interface mockup designed using various resources.