I've been slacking on learning variants, but better late than never :)
quick toast notification icon design
making some gradients 😛
Quick UI this morning. I used a plugin on Figma called Saly that has some 3D Images.
Playing around with variants again today in the Figma community file.
didn't really feel like doing much today + waited till last min to do this quick button design. gn
Playing around in the Figma Community Variants Playground file :)
I'm def very guilty of doing this with some of my UI designs… lol, however, the article makes a good point!
Trying to learn more about button systems. If anyone knows any resources/links that might help me in this area please drop them below.
Practicing low-fi wireframing with grid layout in Figma
Want to learn more about using rounded buttons vs. sharp-edged buttons. How to create different types of buttons to easily identify what kind of action a user should be making.
Adding to the design system… want to start working with variants more and creating a design system that works for me while designing
making some checkbox variations tn
Playing around with Figmas recent/new feature called Variants. This feature helps to create a design system by easily manipulating components.
Practising my prototyping
animation/prototype was being glitchy because my MacBook was slowing down during the screen recording lol :(
happy halloween 🎃
Spent most of my day in the morning/afternoon learning about UX/UI road mapping and product backlogs. These are techniques that I want to slowly integrate into my role as a UX designer at work to help improve company metrics, the overall usability of the product, customer satisfaction, and more. I think it will also be a good way to keep track and constantly revisit, goals, and tasks that need to be completed. Need to read more about this tom.
Recreated an interface I found on Dribbble that was inspiring. I haven't gotten the time recently to spend much time on my daily UI designs so I decided to push my self a bit more today :)
Quick simple wireframe sketch ✍🏽
I finished the layout I started yesterday :) that's it for today. Happy Thanksgiving weekend 🍁🎃
quick wireframe sketch on procreate this morning. For those of you you saw my post last night, I didn’t post anything UI related. I felt bad at first for kind of breaking my streak, but I don’t feel as if I did. It’s a process, and there will be days where a routine might get interrupted with some family time or something else.
Back on it again. All a process
Spending some family time today at a cottage, nothing to upload for today.
a quick landing page design for a portfolio
added more features to the dashboard design from yesterday
Looking at dashboard designs on dribble today and just iterating. Trying to come up with something that might work for a dashboard redesign I've been thinking about approaching @ work.
Going to finish working on this today/tom.
played around with some button cta's earlier, forgot to upload busy day
experimenting some more with this dashboard design, something easy for today
Low-fi mockup of a basic dashboard and blocks I might need to design one.
An improved design of the card I made yesterday.
low-fi card component design for tn!
Prototyping isn’t optional anymore
The ‘role’ of a designer has been a topic of discussion several many years now. In the past decade, the role of a Designer got split into…
didn't feel like doing too much today, just some simple buttons again
Using stroke weight + simple shadow blurs to display cards that are inactive & active.
Left: Original UI Layout
Right: Original UI Layout
Added to my wireframes from last night
Sketching wireframe designs for a UI concept inspired by skincare/makeup review videos I am watching right now.
some blog ui components I worked on for a bit today
some boring button design tn 💤
Playing around with an auto-layout playground in Figma. All I felt like doing today 😪
playing around with auto layout buttons tn
some buttons after a long day of work!
Skincare inspired UI layout
Read this article earlier this morning that was sent to me by a friend. Very insightful - might give it another read and take notes on some of the key points.
Recreated an interface today.
Original redesign on the left. Could've chosen different images to fit the color palette better for my design.
Left: Original Layout
Right: My Redesign
The original layout is on the top and the bottom frame is the redesign I did 🖋
some button designs
some quick button designs before bed… not feeling this design at all.
Quick mobile nav design, inspired by andreysenes on Figma community.
Reflecting on the importance of creating a hierarchy/style guide before designing UI layouts for a product, company etc. I've been through a situation & learning experience before where I didn't do this and I either had to alter the designs to identify the correct h1-h6(headings), realizing that I had too many typefaces (unrealistic to maintain a consistent hierarchy). Just reading more about this today.
A quick UI layout of what a landing page/shop might look like if I were to sell my artwork as prints (@i.n.f.u.s.e - on Instagram). I've been thinking about scaling my brand and joining a platform like etsy or Shopify where I can sell my illustrations. Thinking about the best ways to scale this business.
Redesign of a lifestyle/lookbook showcase layout I found on Dribbble. Original UI layout is on the right.
Overuse of Modals
Modals appear on top of the current page and the background content is usually dimmed (under the assumption that dimming will reduce distractions and help users focus on the task at hand). Unfortunately, this design choice reduces context for users by covering up information that they may wish to refer to while filling out the form. (Note that, even if the covered-up window does not contain information needed for the editing, users often attempt to leverage the work they’ve done previously, by copying and pasting previous inputs or even simply using other entries as templates for how to think about the current task.)
Found this point interesting about modals, because I'm currently working on designing some examples of modals for my part-time job with Epilogue.
Recreated an interface I found interesting! Took me about 10-15 minutes to create the exact design on the left.
Chanel inspired landing page.
Spending some time today looking at some UX Resources. Might spend some more time browsing UI Garage for inspiration for my Daily UI Concept designs. I usually spend my weekdays practicing my UI concept designs and don't get enough time to do it on weekends. I usually spend my weekends reading articles about good UX/UI to help me when I'm designing my Daily UI concepts/while I am designing interfaces for work.
Minimal UI design inspired by some skincare
quick UI design before bed
Success/Thank-you message mockup for an Iphone 8 Plus
Played around with some wireframing in Figma today with a file I found on Figma community
Music catalog UI concept inspired by Billie Eilish's single "my future". I also really enjoy creating vinyl mockups using photoshop. So I decided to integrate that into this UI design.
Didn't get to do any designing today, but read this article earlier on Medium.
Daily UI: Redesigned Jaden Smith's landing page inspired by his new single 'CABIN FEVER'. I designed a vinyl mockup using Photoshop and this was super fun to do!!!
Video game inspired UI design I might continue to explore for future designs/side projects
Experimenting with prototyping using Framer today
Used the "Handz 3D Illustration" plugin in Figma today for my UI design. Thought the hands would be a good way to represent something like teamwork or just using it as a 'pointer to emphasize a certain piece of information.
a little fun prototype I made with Framer for today's UI lol
Experimenting more with prototyping simple interactions using Framer. Something I think I'm going to use more. If anyone knows any other tools/resources for prototyping please comment below :)
DailyUI088 - Notes Widget App. I designed this concept app in Figma and prototyped using Framer. Happy with the outcome and transition.
Subscription selection concept for individuals/families
DailyUI086 - I've been feeling really anxious at home these days and I didn't feel like doing something super complex so made this mood checker concept app thing 🤷🏽♀️
Random concept app I made today - not happy with this design at all. But sometimes you just have to make something to keep your creative momentum going.
I don't spend a lot of time on weekends designing UI designs, but rather reading short articles on Medium about UX/UI. So tonight I read a short article about some principles that make a good UI.
Love reading about design trends
Article link: https://uxdesign.cc/8-ui-ux-design-trends-for-2020-68e37b0278f6
Some of my fav trends
- asymmetrical layouts
- 3D graphics
Today I experimented with designing a UI for a color picker using a file I found on the Figma community. I like coming across different websites that generate color palettes for me or even just easily give me the hex code for colors.
Prompt: Gradient Background
Landing Page concept for The Ordinary
I designed a very minimal UI for what the brand's site could look like. The clean and minimal design reflects its minimally designed products.
Visual Hierarchy in UX Design
• use sizing and scale to draw more attention to elements more than others - need to be careful if assets become too large. (keep font-weight and sizing in mind)
• bright/dull colors can also be used to draw users attention to specific areas in the user-journey creating a more pleasant experience
primary high contrasting color on buttons that serve as the most crucial call to actions.
The Z Pattern
• the Z pattern starts on the top left to the top right, and then down to the lower left, and across horizontally to the lower right, essentially following the path of the letter 'Z'.
On Apple’s website, as you’ll see below the Mac page is designed to show multiple Mac options at the top, scanning horizontally and then placing a tagline along the diagonal direction. It then finishes off with a call to action for their product. All information is laid out very clearly, in a path that most people are already subconsciously drawn to use.
The F Pattern
• the F pattern is most commonly used for text-heavy sites such as article pages or blogs. It allows the user to read information from top left to top right all the way down each line.
Proximity of elements
Placing elements closer together can give the reader the perception that they are related, which will give them the incentive to read on or engage further.
•try asking the right questions that will help identify your target and improve engagement. Oftentimes on a team/client might say, "bold the title more to make it stand out", or "can we use orange in the background to make it pop?", but its important to ensure that you don't give importance to every single element. This can make a page super distracting and unclear.
Reading some medium articles before bed
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.
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.