Reference: https://collagerie.com/
Reference: https://mysa-skincare.com/
Reference: https://verbalplusvisual.com/about
Reference: https://aebeleinteriors.com/
Reference: https://verbalplusvisual.com/about
1
Reference: https://widr.nkfrv.com/
Reference: https://rose-maggie.com/
Reference: https://designedbywomen.org
Reference:
http://msds-studio.ca/projects
Didn't quite get the icons right lol got a little lazy :)
Reference: https://savee.it/i/xBREkEd/
1
Reference on right: https://dribbble.com/shots/14125907-Fitness-Mobile-App-UX-UI-Design
https://www.interaction-design.org/literature/topics/design-principles.
Hoping I get more time during the holidays to design more interfaces :)
https://www.smashingmagazine.com/2018/02/comprehensive-guide-ui-design/
Reading about some basic methodologies that I should continue to integrate and apply into my UI Design Process
I'm def very guilty of doing this with some of my UI designs… lol, however, the article makes a good point!
Curious to learn about this UI Trend
Article: https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9
Analyzed this reading again earlier today and forgot to post…
Article https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
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.
Article: https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
Reference: https://dribbble.com/shots/9898373-More
Tried to do something similar to the reference, this one is was a little rushed though.
Accidentally uploaded the wrong image yesterday lol. Uploaded the original instead of the one I redesigned.
Reference: https://dribbble.com/shots/14523762-Life-Journal-Art-Direction
Reading a lot about checkout flows today.
Article: https://uxplanet.org/how-to-design-a-better-checkout-experience-3497a8e69d0a
Reference: https://dribbble.com/shots/14234713-SBO
Simple/minimal redesign today. Reference: https://dribbble.com/shots/11357779-Format-web-site-design-interaction
quick ui layout using the @blushdesignapp
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 a layout from Dribbble. Reference image: https://dribbble.com/shots/14257486-Araw-Collection-Limnia-Brand-Animation
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 :)
Reference: https://dribbble.com/shots/10158812-Kobe-24-8
late night quick UI layout on the left inspired by an image I found on savee.it (really dope site for image inspo)
Redesigned a UI layout from Dribbble tn.
https://dribbble.com/shots/14340898-Field-Architecture-CA
designing some components
Inspo: https://dribbble.com/shots/11116447-Minimal-News-Components
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
Reading on empathy design tonight.
Article:https://medium.com/swlh/empathy-design-3-steps-to-create-an-empathetic-design-solution-7da4feb6bf98
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…
quick-read tonight on Medium - UX collective
Article: https://medium.com/@sansoni/design-better-vs-being-a-better-designer-58f2a91624f9
Quick read before bed.
4
dailyui using @blushdesignapp plugin on Figma
Simple UI concept today using the @blushappdesign plugin
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.
Article: ;https://uxdesign.cc/47-key-lessons-for-ui-ux-designers-3cb296c1945b
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.
Created a fun little banner for Twitter - inspired by @CreateRemote, @hyumankind. That's all for today
2
The redesign I did of an existing UI design I found on Dribbble that I liked! Timelapse of my redesign can be found here: https://share.vidyard.com/watch/iiDMyRdtyhpt6ZcWoiBfdg?
Article:
https://www.nngroup.com/articles/top-10-application-design-mistakes/
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.
Didn't get time to create a UI design today so I'm looking at some awesome websites on awwwards.com and getting inspiration.
Might redesign a site I like from the site tom
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.
Browsing through this UX resource database on Notion.
https://www.notion.so/UX-Resources-Database-f41f9080b0a54eb8a8bf927dcf38b1d9
Love reading about design trends
Article link: https://uxdesign.cc/8-ui-ux-design-trends-for-2020-68e37b0278f6
Some of my fav trends
- neumorphism
- asymmetrical layouts
- microinteractions
- 3D graphics
Visual Hierarchy in UX Design
Sizing
• 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)
Color
• 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.
Viewing Patterns
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.
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.
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".
https://medium.theuxblog.com/six-circles-a-experience-design-framework-fabe5fc5abc9
Six Circles - an experience design framework is a book written by James Kelway - persuasion, behaviour, visual design, usability, interaction and content.
https://uxdesign.cc/how-apple-makes-soft-ui-the-future-9f3ac69eea6f
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.
https://uxdesign.cc/make-sense-of-rounded-corners-on-buttons-dfc8e13ea7f7
^ Another article I'm reading about rounded corners.
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.
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!
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.
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.
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.
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: Subscribe Form
I used the @blushdesignapp plugin on Figma for these beautiful illustrations of astronauts, and some illustrations by @unDraw_co. ✨🌍 #dailyui
2
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.
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.
Prompt: Design a Direct Messaging App
Designed a Direct Messaging Concept App for multi-disciplinary creators. Used illustrations from @pablostanley's @blushdesignapp plugin. Illustrations by @bonniekatewolf and @IsabelaHumphrey.
A quick UI mockup I made using the @blushdesignapp plugin in Figma @pablostanley, inspired by Susana Ortiz’s illustration system of pots and plants!!!
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.
2
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.
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.
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
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.
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.
2
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.
Bike Rental Concept UI using @pablostanley's "Open Peeps" illustration library.
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.
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.
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
