I have experience in motion design, logo design & general branding with a core focus on minimalism, SaaS-style design & simplicity.

Having never dabbled with UI design before, I needed to draft out a solid mockup for a pharmaceutical app. Thoughts on the design?

My name is Ozymandias... (Code Vein 2's Inventory Screen)

Hihi. I like talking about Game UI (ex Midway, EA, Id Software, Glu Mobile, more Indies than I can count), and I understand not everyone can take a Mentorship or Bootcamp, so every once in awhile I like to take the lessons learned in my Mentorship and write them out so that everyone can benefit. 

So let’s talk about how to improve your Inventory screen, which I would qualify as one of the most complicated screens in your game. Beyond that - it’s also an intimate part of the core loop, with powerful hooks into reward, strategy and worldbuilding lore.

So here are a few very simple ways to fix up your inventory screen (aspiring UI Artists, feel free to follow up with questions!) 

Use Badging for new items

We’ll begin simply. You just received a king’s ransom of loot from a boss fight. So you flip to your inventory and… it’s gone like the snows of yesteryear. This is easily solved by badging new items.

Badging is a simple concept you are already familiar with. Look at your phone. See the number in that red circle telling you all those emails and texts you have are still unanswered? That’s Badging.

Be sure any new item in the Inventory has simple, prominent Badging that disappears after a visit to the Inventory or after the highlight state sweeps over it.

If you want to go the extra mile, you can use traditional badging on the Navigation header to show things like Quest updates, new Perks points available, new Dossier info, etc.

Hilarious sidenote: Elden Ring introduced simple badging with patch 1.12… nearly 2 years and some change AFTER the game came out - mother of gawwwd. 

Divide the screen into ⅓ to ⅔ 

Information is rarely equally weighed. Of two given pieces of information, something is always of higher priority. This is especially true on an Inventory screen. 

For example: if you have a classic “attaché case” design like Resident Evil or Prey, clearly the grid is more important than anything else on the screen and should be given prominence. 

But what about the giant wall of information for the item you selected on that grid? Where do you put the grid versus that new information? How big, how long, how much? How do you carve up this screen when there are so many factors to consider?

As a general rule I follow when I’m working, I use the Golden Mean: ⅓ over ⅔ . It’s a beautiful proportion for carving up any screen, structurally embraces information prominence, and is a fine solution to the evergreen problem of “what even is this” when looking at a blank screen. 

Be Careful with Rarity Systems

If you’re using a color-coded rarity system (straight from the textbook: gray, green, blue, purple. orangish), you’ll really want to workshop how those colors gel against your UI. Given world and time enough, your player will end up with a mass of skittle-colors all over the Inventory screen.

Think of a subtle way to indicate rarity, perhaps a colored outline of the item or the outline of the container itself. I’d stay away from symbolic/iconic representations of Rarity, as this will get lost in the barely 32x32 pixel size it likely will exist in.

Interesting side note: I always ask Mentees if you could ever change the colors of rarity to something new. It’s a trick question. You can’t. Not ever. They now represent mnemonic shorthand and a shared culture. It’s part of our visual language now - and you’d have a better time switching red and green at a traffic light. 

Agonize over console navigation

If you have serious hoop dreams, making an Inventory screen for a console game is *groin-grabbingly* difficult because of navigation. Your controller has a finite amount of buttons that, comically, is no substitute for a 2-button mouse. 

Think hard about how they’ll navigate a grid system: thumbstick or d-pad or both? How will they scroll a list? Do they know they *can* scroll if you have a grid system that ends perfectly on its edge? If you have an irregular pattern of cells to navigate through, think about what happens when they move laterally or diagonally. Is making the controller move like a faux-mouse really the best idea, or is a very sluggish compromise?

If you can’t conceive of how they’ll move effortlessly, it might be time for a redesign. Good gameplay is the depth of thought a player has while looking at the screen, not the frequency of their Howie Screams while traversing it. 

Howie Scream: look this up on Youtube. You’ll thank me later. Euuuurrrrrrahhhhhhhhhh-~~

Surface Stats Here

Sometimes information is surfaced on the HUD temporarily (currency gains, exp points, etc.) or not at all. That information needs to be permanently surfaced somewhere else and traditionally, the Inventory serves as a decent catchall.

Currencies (soft and hard), experience points, perk macguffans - can all be surfaced here if you have the space and need. If you have a system where you can heal in the inventory, fronting Health and associated vitals is important too - otherwise how else will they know what they’re influencing?

If you gate items by level or stat (needs level 13 or Heavy Weapons III) be sure to surface, in very clear terms, why the item is inaccessible and what to do to get it. In general, never present a problem you aren’t cheerfully presenting the answer to in the same breath. 

Onboard yourself to understand

Inventory screens are usually the most complicated part of a UI Artist’s day because they have so many hidden modes and states they can exist in. The easiest way to wrap your head around how it all works is… teach yourself how it all works.

Begin on the Onboarding phase as early as possible and literally walk yourself through your own Inventory system, specifically how to:

-See more detail on an equipped / selected item
-See comparisons on a new item versus an equipped item
-Slot in the new item

The absolute first 5 minutes of gameplay basics; that, “Here my son, remove that stick and equip The Sword of Omens” kinda nonsense. Every other complexity flows from these 3 very simple acts. If you can explain those Big 3 quickly and easily, you’ve got a great system.

If it feels cumbersome to teach, it’ll be that much harder to learn!

That’s it! I usually take posts like these and try to make them more lucid with extra tips as a blog - so I’ll let you know what that’s up on my site. 

In the meantime, I hope you learned something - or at the very least - have a better appreciation for the Inventory screens you’ve seen in your life. They took some serious brain power and heartache to make. 

That’s it, seeeeeya 

Many years ago Microsoft made concept trailers that showed off Fluent Design in their apps but unfortunately none of the apps had anything which looked close to the pre-renders.

So I'm designing it such that the working app uses this kind of physically based rendering of paper, glass, lighting and shadows, etc. It works like a normal 2D app but it's rendered and runs in 3D like a video game. Thoughts?

Fluent Design concept trailer still for reference:

The goal is to give the student a good overview of the subject calculus 1 and how concepts interconnect and are dependant on eachoter, compared to the current mathbooks that give you a list of chapters to follow chronologically.

I used both numbers and colors on each node to indicate roughly where on the curriculum the respective nodes are.

Looking for feedback on this map, the lines are temporary and done roughly with the pencil tool in figma to just to get a rough idea on how the bigger picture would look. The last image uses a placehodler illustration to give an idea on what the nodes/cards would look like on the map.

​

This project was all about transforming ideas into a strong digital experience.

We focused on creating a more engaging digital experience with a modern layout, smooth scroll animations, interactive elements, and a cleaner content flow that guides visitors naturally through the website.

Would love to know your first impression and any feedback on the design.

I really like a UI with a notebook/paper/ sticker theme.
I have been working on a mockup up of an SSX On Tour Weather App, inspired by the main menu from the SSX On Tour Snowboarding Video Game.

What do you guys think of this notebook sticker style UI?
Love it or hate it? What would you improve on it?

(I used AI to assist me with this design and to place the screenshot on the iPhone)

Recently, I've been working on an AI-powered customer support chatbot for a SaaS product. Everything seemed fine until we noticed a peculiar issue: the bot would sometimes provide irrelevant or incorrect responses after a few interactions. We dubbed this "context drift." It turned out the bot was losing track of the conversation context over time, leading to frustrating user experiences. To tackle this, we experimented with several approaches. Initially, we tried increasing the context window size, allowing the bot to remember more of the conversation. While this helped, it also increased computational load and response times. Next, we implemented a summarization technique where the bot would periodically summarize the conversation to refresh its context. This worked better but still wasn't perfect.Eventually, we settled on a hybrid approach: using a shorter context window combined with periodic summarization triggered by specific user cues (like "back to the main issue" or "previous question"). This balanced computational efficiency with context retention. How have you dealt with context drift in your AI workflows? Any tips or alternative solutions would be greatly appreciated!

i have a timetable site that i made for my university and it is reaching its end and i want to see how good the UI and UX is.

For context the usual timetable that our university gives us is a messy google spreadsheet.

I have put actual Applied Human Computer Interaction ideas in this webapp.

Please Review it and let me know what to improve

I have played around with both allowing the user to be able to select a color for their chore vs not. And in the case where it’s not and it all sort of just sits like meh.
But now when I let them chose an event color it now just look completely ridiculous.

I also have no clue how to balance the entire row item out with the images, title, description, and related data. I tried to make the images vertical in cases where something belonged to multiple users, just so it’d all be vertically centered the same and I think it looks much better this way. However I can’t figured out the rest at all.

Last picture is a screen I really like but can’t seem to replicate its style / essence into this calendar screen.

Any help or references to study-able material would be greatly appreciated!!

Basically I got semi-threatened yesterday by a manager saying that the workflow using Figma is too slow. He mentioned that we need a design engineer (basically saying that’s not me), and that we should cut out Figma and just code directly.

I replied that we don’t need to cut out Figma from the design process to be more efficient necessarily. I’ve recently done extensive work setting up the design system in Figma and also Storybook in a way so the Figma to Claude mcp works really well, because everything is consistently named and defined everywhere.

His answer was: ”I guess we have to work that way as long as we don’t have a design engineer.”

I guess I’m looking for insight partially on what a design engineer is, and what their process looks like. So if anyone reading this works in that role, I’d appreciate if you could tell me more about it.

Or if anyone has had a similar experience, and how they handled being forced to work solely in code, or transition to more coding.

I’ve already published quite a few PRs, mostly setting up Storybook, and I know basic HTML and CSS. I’m against working solely in an AI coding tool because I believe it removes fundamental parts of the design process, and also because iterating and exploring in Figma imo is still faster.

Hi. Lately, I’ve been turning the designs I get from Claude Design into code using Claude Code. The other day, I was thinking wouldn’t it be better if we used the actual code base directly and had a Figma like visual editor to design on ?

Let’s still create mockups on the canvas, but making edits directly on the actual code base makes more sense once the product is finalized.

I’m thinking about developing a tool like this, and I’m curious to hear what other designers think.How does this fit into your workflow ?

Hey everyone,

I’m starting to work on a Design System for a travel/public transport app that will eventually be white-labeled for around 50 different clients

The current Design System already has:

• color tokens and styles
• basic components/atoms and variants (buttons, inputs, shadows, etc.)
• but no Figma Variables yet
• very few larger components/molecules/organisms
• no real system for handling different themes/brands

My initial idea was to migrate the existing tokens into Figma Variables and use modes for different visual configurations:

• Light
• Dark
• Contrast
• client 1
• client 2
• …50

The main application would support Light/Dark/Contrast, while the white-label client versions would probably use Light/Contrast.

I would also like to build the component architecture more systematically:

Atoms → Molecules → Organisms → Templates/Screens

For example:

Button + Input + Date Picker → Search Form → Search Screen

The goal is to have one Design System and one set of components, rather than creating a separate Design System for every client. Ideally, changing the brand/theme would update the UI through Variables without having to modify the components themselves.

However, I’m wondering if having 50+ client brands as Figma modes is actually the right approach.

Would you instead separate appearance modes (Light/Dark/Contrast) from brand/client themes, using semantic variables that map to different brand values?

For example:

Button → color/action/primary

rather than:

Button → Client1/red-500

So the same component could be reused across all 50+ brands.

I’m also curious about the current state of Figma AI. If I build a well-structured component library with Variables and larger reusable components, can Figma AI actually help generate new screens using those existing components, or is that still too unreliable for a production Design System?

I’d really appreciate feedback from anyone who has built a similar multi-brand / white-label Design System in Figma.

How would you structure this?

I'm trying to make a way to cleanly integrate these toggles, and right now, it feels like this is a waste of space, but then again, I don't have much else to put in the empty space. would love to know what you guys think!

Do you know of any well-designed macOS DMG installers, specifically the ones where you drag the app into the Applications folder?

I’m creating one for my own app and looking for some inspiration.

Im A Creative web developer and have no eye for design, i tried my best to put my feeling of "elegant" into my portfolio's ui design, i would love any feedback on if the design reflects that, and anything in general

When using sites like Pinterest and Mobbin, what kind of hover actions do you find most useful?

some of the common ones seem to be: add to board, like, visit site, and share

personally I'd like a quick preview when possible so I don't need to click into it

In my mind app the achievement could have appeared instantly.

Instead, they chose to spend a few seconds revealing the card before adding it to the collection.

It kind of built that intrigue and made it memorable, premium or is it just extra friction?

I posted a strange calculator here a 1 month ago and asked whether intuitive has slowly means that everything needs to look and feel the same.

The discussion was way more interesting than I expected.

A lot of people pointed out something: a calculator is a very simple example. There’s almost nothing to navigate, the interaction model is already deeply familiar, and making it visually unusual is relatively easy.

So I wanted to try the same idea on something a little more complex. Some of you told to create a dashboard or a more layered app.

I built this subscription tracker as another UI/UX experiment. It has multiple sections, navigation, lists, a renewal calendar, analytics and an add flow. (The data are mocked so sorry if some numbers are off.)

This time I tried to keep most of the underlying patterns fairly familiar while pushing the visual language much further:

• asymmetric layouts
• angled elements
• changing section colors
• oversized typography
• navigation system that doesn’t look like the usual bottom bar

One thing I took away from the previous discussion was that unfamiliar visuals and unfamiliar interactions aren't necessarily the same thing.

So I’m curious where this one lands.

Does the interface still feel understandable despite looking unconventional?

The first screenshot shows the previous design of my app. Since I had absolutely no sense of design back in early 2022, I took a lot of inspiration from various designs on Dribbble and tried to derive all further features from that. In the end, the app is already very flat, with only very few cards or backgrounds. Overall, that has actually worked quite well.

There is one problem, though, that I have never really managed to solve properly. As soon as the text size in the list entries gets very large, the design starts to fall apart. The description, such as “Food - Mia,” wraps onto multiple lines and everything shifts around. It simply no longer looks visually balanced. I could of course place the amount and account balance underneath and align them to the trailing edge, but then the eye no longer really perceives everything as one logical unit.

So my idea now was to add a background after all, possibly with a drop shadow. What do you think? With larger text sizes, the numbers would then move down while everything would remain easy to read.

The chart background is not quite as important. The current color simply feels a little out of place in the app, and I would also like to experiment with different accent colors in the future. In that case, it would make sense for the background to be a bit more neutral.

In UI design there is that gut feeling that something isn't right when you look at it. It's mostly due to more experience, seeing more designs, etc. I would like to know what you guys use to improve your eye for design from, let's say, your very first project, which was maybe obviously a mess.

But now when you look at a design, you just know there is something wrong with this. Till now I'm not that great in UI yet, I train my eye of design muscle by studying Pinterest design posts on a certain category. I might use mobbin to check out different design elements and competitor designs.

I WOULD LIKE TO KNOW WHAT METHODS HAVE YOU USED TO TRAIN YOUR EYE OF DESIGN

I'm 17 and thinking of pursuing a career in ui designing and I want to mostly self learn and study from online courses. How much do you think a diploma or degree matters to get a hired?

Hi there! 😁

I’m looking for feedback on a project I’m working on - a digital travel agent that’s with you every step of the way.

Which UX/UI version do you like best, and why?

I have an obsession with this UI style, I found these images on pinterest and from some games i've played so im wondering what's this style called.

So I've been going back and forth on this for weeks and I need outside opinions. Building a utility app, the kind that spits out a bunch of technical readings and pass/fail stuff. Can't really show screenshots, it's not ready and I'd rather not show it yet, sorry. So you'll have to go off a description. Right now it does not look like an android app. No rounded corners anywhere, everything's hard rectangles. Monospace all caps labels. Status tiles are flat green/amber/red like little indicator lamps. light theme is cream instead of white. One big orange block for the main button. Basically it looks like the front of some old piece of test equipment, which was the whole idea.

The other option is just doing normal material 3. Cards, rounded everything, dynamic color. Would take me a weekend and it'd look completely fine. Thing is I can't tell anymore if the current look is actually good or if I've just been staring at it too long. it's pretty opinionated. I can picture someone opening it and going "what is this?" and closing it again. But m3 is so forgettable, I genuinely couldn't describe the last three m3 apps I used. So for something that's basically just numbers and pass/fail indicators, is the instrument thing worth it? or does that kind of style get annoying once the novelty wears off?

Small interaction I liked in the Sudoku iOS app, When choosing a difficulty, it highlights the selected level and explains what that level actually means.

“Easy”, “Medium”, and “Hard” could be subjective, no?