/r/UI_Design
User Interface Design (UI Design) is the design of user interfaces for the web and devices using design and typography principles with a focus on maximizing usability and the user experience.
UI Design Submission Policy
Visit the UI Design Wiki for all posts related to getting started in UI Design including career, courses, and software, please go here first before posting.
Follow reddiquette, don't self-promote No freelance, business, agency, OR self-promotion. This includes your portfolio, Dribble, Behance, Instagram, Youtube channel, apps, services, software, platforms, blogs and tools.
When sharing your UI WORK Include an overview of the project including the software & tools used, intended audience, etc to help others to understand your design and processes and provide constructive feedback.
When providing FEEDBACK Constructive criticism is encouraged and hate is not tolerated. If you dislike something say why and try to include helpful tips on how you see best to improve. Downvoting is not critiquing.
NO SPEC WORK, SURVEYS OR JOB requests, or any type of design contest. No FREE work requests of any kind. Respect our designers in the sub and the industry. Job posts belong in /r/forhire, /r/DesignJobs or /r/jobs
General
- All off-topic and lazy links posts will be removed. This including resources, kits, YT videos, Medium Blogs and other external blogs/content posts (e.g "5 UI trending tips/ tools in 2020").
- Please do not flood the sub with Daily UI challenges.
- Using multiple accounts to bypass the rules or for any other reason will get you banned.
- No memes or other types of non-design related content. See /r/CrappyDesign or /r/designmemes*
Resources
Related subreddits you might enjoy:
Other
NO PERSONAL INFORMATION Do not publicly post personal information. You will be banned for this.
Please report any posts which break these rules, to maintain the quality of the subreddit.
/r/UI_Design
189,923 Subscribers
Can’t Find Inspiration for Service Detail Pages – Any Advice?
Hi everyone,
I’ve been searching for design inspiration for detailed service pages – the kind of page that focuses on explaining a single service in-depth. However, I can’t seem to find anything useful.
I’ve tried searching with keywords like “services detail page” and “service page design,” but the results are either too generic or focus on unrelated content like landing pages.
Am I searching with the wrong keywords? Or is there a specific place or resource where I can find examples or inspiration for these kinds of pages? Any suggestions or advice would be greatly appreciated.
Thanks in advance for your help!
16:40 UTC
backend dev attempts ui design (gone wrong) (cops called) - suggestions?
00:56 UTC
Where to find icons like these?
Is there any page for inspiration or good resources that I can use for abstract and minimal icons like these? (I just made these quick in figma)
23:06 UTC
A diaphanous map UI
A sci fi map holographic map ui i made from scratch in blender for a short film. Uses shader nodes to achieve the topographical look and is procedural if you want to move it around or extend it. This is my first crack at this so any feedback would be appreciated.
17:58 UTC
What framework is Codecademy.com using?
I’ve noticed this framework being used lately, you also see it in Timeleft.com. What’s the name of the framework/ui design?
19:58 UTC
Any feedback for this map mockup? I'm having a hard time with how to show the text for each event marker.
11:10 UTC
Help i dont know how to fix this!!
So im a begginer to this but i want to learn, now i know the edges on top of each other should have a difference. Tho, i dont know the rule of how it works.
so this is with the same ( 20 px corner radius) which looks wrong,
while this is with a 2 px difference ( grey part with 20 px, green part with 18 px) ...so this worked with trial and fail but is there a rule to have a goood result everytime?
17:06 UTC
Please help i need solution on how to solve this issue with developer
The developers have reviewed the website design that i created but they are against on the idea of using light grey line for outline of component or line for tabs. They mention that it will be an accessibility issue and they want to have a score of 100 on accessibility so there won't be any issue report to them and they need to resolve it every. Honestly i feel this is very unacceptable because i look through many high end brand website have thin grey line as spacing and there website are running well? And just because of grey thin line i have to change the line to black so it can pass accessibility and by doing it that the website will very ugly.
For example this screenshot i share, developer aren't agreeing with the use grey line instead they want us to use a color that pass the accessibility such black or super dark grey. Is there a solution to it? Will using dark color and change the opacity works? or insists them to use the light grey? Please help
If i were to use black it will be like this and can you image how ugly the website will be? having such a dark line just to use it for space
06:14 UTC
I'm using DailyUI Challenge to keep myself Motivated and Consistent. This covers 11 Days of the Challenge. Share your thoughts and suggestion on my design skills and feel comfortable to comment as you think.
07:07 UTC
Chart: iPhone Resolutions
Bored. Made a chart of current iPhone resolutions (based on models listed on the App Store screenshot guidelines).
I have a note about flair: can we get a tag like “UI Reference” or something? A post like this doesn’t really require discussion, y’know?
Anyways, #Happy Holidays!
14:27 UTC
Thoughts on this golf app? (V2)
Intended Audience: iOS and Android Golfers
Tools Used: Expo & React Native
A few weeks ago I posted my previous UI, the link to that is here. I made a ton of improvements, and was curious what you guys think of it. I tried to increase the contrast, as was suggested, and strayed away from the all green theme.
This app allows users to log putting sessions and track their stats in the app, and is supposed to be modern and intuitive.
I do have some rough areas where I am looking for help:
- The inputs, the focused vs unfocused doesn't look right to me, couldn't figure it out on my own
- On the third column bottom row, the green with arrows is rotatable by spinning your finger, how would I show that to the user so they know they can do that?
- The end session buttons (which are the secondary style) look a little weird, but the primary buttons (all white) also seemed out of place. Does it look ok?
If there is anything else that stands out, please tell me, I am not a designer, so this has been quite the process.
Thanks for the help, it is greatly appreciated!
22:48 UTC
Labels to explain content recommendations
In social media feed designs, there's often a label to indicate to the user why a particular piece of content has been recommended to them. Basically a piece of text to explain:
- it's because you're subscribed to the feed
- your friend follows the original publisher
- you've indicated interest in the subject
- it's a promoted post, etc.
Is there a name for this design element?
10:10 UTC
Review this landing page design,
( rost cause it's not mine ) this is website of ERP.ai I saw this and I am dead
04:22 UTC
Any good resources for Enterprise/SaaS Software?
I was wondering if there are any good recommendations on designing for Enterprise software? I personally feel like the needs for enterprise software are a bit more difficult.
The user wants/needs a lot of information to be shown, reducing the number of clicks it takes to perform a sequence of actions, etc.
I looked up the wiki and have made a list of the books to check later, but it seems they're all like 4+ years old.
An example of an issue I commonly deal with:
Use Case: Pharmacy inventory management
Users: Multiple clients (stores) use the software to perform various actions: Contact Vendors, Check store inventory, report list of patients and information, patient overview and billing , etc.
Scenario:
- A user wants to see about 10 columns of data at once
- Problems
A lot of data at once, not really summarizable,
Smaller devices/mobile(rare usage) data overflows/unreadable
- Problems
I'm trying to improve my approaches and design to solve similar problems in my day to day without causing frustration to the clients who have been using the platform for almost 5+ years. Not sure if this post fits more with UX design, but I'll try here first!
20:19 UTC
Spacing breakdown
How much do you pay attention to the details?
Paying close attention to font size, weight, line height, letter spacing, and other design details can truly set your work apart.
22:54 UTC
HBO Max app
I’ve just noticed that if you scroll too quickly on horizontal show titles, it bounces back to the beginning.
Anyone have any idea of the thought process behind this? Is it to benefit the user or the business?
00:06 UTC
Has anyone seen subtle animated button example examples, such as this?
I got this from Snapchat. I’m looking for more examples in this nature on specifically mobile where there’s subtle animation to the container or border of the button. Has anyone seen anything like this? Thanks in advance!
00:13 UTC
Flash Message
This design provides a payment success confirmation screen with essential transaction details and clear next-step actions (PDF receipt download or exit). It’s targeted at users of fintech or e-commerce platforms, solving UX issues like providing instant feedback, ensuring information clarity, and enabling seamless post-payment actions.
14:28 UTC
Looking for feedback on a color palette/aesthetics
Hey. So I'm designing a mock website called Interpersonal, and I've been stuck on how to color code it correctly. The colors I'm working with are:
And I'm clueless as to how I should organize them. I'm also looking for feedback on the overall aesthetic. I don't want feedback on anything else, just the color scheme of the page. Thanks!
The design (it's unfinished):
13:08 UTC
action button beside the search bar
Hello again,
I’m working on revamping my previous design for the inventory screen. I’d like to enhance the overall layout and user experience. Currently, this screen displays a list of items in the inventory. The primary goal is to allow users to move items to another bin or delete them if they are damaged or no longer needed (with the happy path being the main priority).
My biggest concern is the action button located beside the search bar. It feels out of place, and I believe it could be improved.
Do you have any suggestions on how I can refine the layout and the way the items are listed? I need to consider visual cues, which is why I’ve included large images, along with the item name and its current location. The checkboxes are intended to enable users to select and move multiple items at once.
01:16 UTC
Which one do you think is better?Our team is working on an AI voice interaction app.
The designers are always torn as to which one you think looks better.Gradient colors are good? I would appreciate any tips!! Thank you!
03:24 UTC
Need your feedback to improve my designs for a game engine that we're building
09:04 UTC
What will be the future of UI?
I applied for a company, and they have given the following assignment to complete:
Imagine this is the year 2080. The United Nations Centre for Timekeeping has opened up the gates for the general public to experience time travel. As the majority of the public would be first time travellers; anxiety and uncertainty is a very big deterrent. Propose a solution through which these time travellers can understand the notions of time travel, get acquainted with the risks, gather information about vacant slots and book tickets accordingly. You can also set up the needed guardrails for the speculative scenario as well.
So should I design it for AR/VR, or just mobile?
13:27 UTC
Best base UI Kit for Design Library for MUI
My organization is using MUI v4 and they want to stay with it. As a designer, I want to create a Design Library in Figma that will be used to build mockups and create handovers.
I would like to customize the library so it doesn't resemble Material Design. Natural step would be to buy paid version of MUI Figma Kit and modify it, but this process seems tedious. Also, I don't know if I can expect a modern file structure – the reviews are mixed.
Would you suggest anything else that could help me create a comprehensive Design Library in design that my developers can use in code with MUI?
17:03 UTC
How can I improve this comment screen
17:22 UTC
Any tips on advanced search UI?
Not sure what would be a proper layout?
This is the whole page, please don't mind mixed languages, haven't gotten around finishing all translations...
08:06 UTC
How can I make this look better? (It looks so cheap, I am not sure why)
It is a social media dashboard intended as a portfolio project, but I would say the users would mostly be business and marketing professionals from X.
So far I used v0 to build it.
10:04 UTC
Seeking Feedback on My Wedding Invitation Website for Better UI/UX
Hi UI_Design community,
I’m a wedding invitation designer passionate about curating personalized and culturally rich wedding invitations. While I specialize in design and illustration, I feel that web design isn’t my strong suit. I’ve self-taught myself over the years and built my website on Wix, refining it as I go. Now, I’m hoping to tap into this community’s expertise to take my website’s user experience to the next level.
Overview of My Design
My website (here the invitation section I am seeking help for) showcases my custom wedding invitation services, which include both printed and animated e-invites. I cater primarily to South Asian audiences, including Indians, NRIs, and others looking for culturally unique wedding invites. The site features a portfolio of past designs, a step-by-step process for commissioning an invitation, and a contact form for inquiries.
In numerical order, these are the different sections of my Wedding Invitation page on the website, that is to be found in the curtain menu of "Art Services":
1) invitations section top - intro
6) Invites Portfolio (part of - as I showcase 19 images in total)
Target Audience
My target audience is engaged couples looking for bespoke invitations that tell their unique story. Most visitors land on my site through Instagram, Pinterest, Reddit, or word-of-mouth referrals. My goal is to have the site reflect the elegance and creativity of my designs while also making it easy for visitors to inquire about their own commissions.
The Challenges
- Aesthetics: I want the website’s design to evoke the same sense of beauty and detail as my invitations. I’m unsure if the current layout, color scheme, and typography fully capture that.
- Navigation: I need help ensuring the site is intuitive and user-friendly. Are the call-to-actions clear? Can visitors easily find the information they’re looking for?
- Encouraging Engagement: My main conversion goal is to have visitors fill out the contact form. Are there ways to improve the flow of the site to guide them toward this step?
Overview of Tools I’m Using
I’ve built the website (here the homepage) using Wix. I’ve customized the design with my own illustrations and images but have only basic knowledge of UX/UI best practices.
What I Need Help With
I kindly ask for your help about the following points:
Aesthetics: Suggestions on improving the color palette, fonts, and overall look to align better with the theme of wedding invitations.
Usability: Feedback on navigation and flow. Are there bottlenecks or confusing elements? (PARTICULARILY IMPORTANT!)
Form Design: My contact form is essential for inquiries, but I’m unsure if it’s optimized for conversions. Any advice here would be especially appreciated.
Overall Improvements: Are there specific elements I’m overlooking that could enhance the user experience?
So, basically my primary goal is to encourage visitors to fill out the contact form and ultimately commission me to design their wedding invitations. I’d love your thoughts on both the aesthetics and functionality of the page. Thank you so much for your time and input!
10:58 UTC
Different about figma and sketch
I considering choosing between sketch and figma. I usually use a Mac. I want to know what is significant feature difference between us?
1 Which one offers better value for money? 2 which one is more useful feature?
15:34 UTC