Avatar
Vladimir Krstić
5c50da132947fa3bf4759eb978d784db12baad1c3e5b6a575410aeb654639b4b

Ha! Lots of designers dislike it. On the contary, I adore it. Carbon is mainly designed for big enterprise dashboards, tables, lists, etc. Spacing is optimized for dense content, and the IBM Plex font is stellar at tiny sizes.

Glad I could be of help. Really appreciate what few of you are doing here with designs!

This looks really good! I like it very much.

I have a problem with filter placement, it breaks the connection between the parent/s and the children. But if you put it above the parents it may not be so obvious what you filter. Probably can be solved with different visual presentation. Or, if filter applies to the whole tree it can go above. I would also prefer that you don't have a second dimension(horizontal scroll of parents), just stack all levels vertically. Users will better understand the flow.

This is a very complex problem to solve, needs a lots of research. These were all my assumptions. I feel like most would like to see a top level picture, to see the start, how many levels are in between, and where where they are at in that flow right now. Maybe I am horribly wrong. Based on my design if you've noticed that users often wanna see 2 parents above we can add button to roll-out next parent above active problem. Even if data shows that most of the time users want to see 2 parents above, it can be a bit hectic to understand why and it creates a bit more complex pattern. I would prefer simple pattern with added cost of extra click to open up that next parent just to keep the pattern simple and make sure user understands where he's at. Again, this is only me and my assumptions.

Keep on rocking!

This is super interesting. You have a column for each level, right? If that's the case, that would be a lot of horizontal scrolling and unnecessary scanning. It would be overwhelming on desktop and claustrophobic on mobile. Also, keep in mind that many desktop users don't use a trackpad or a mouse with a horizontal scroll wheel.

We should ask a question - what's the most important content a user needs to see at a glance? Probably:

- Active Problem

- Parent Problem

- Top Level Problem

What content is of medium importance? Probably:

- All parent problems (going all the way up to the top level)

- Child problems

What content is of low importance? Probably:

- Sibling problems

- Parent's sibling problems

So how would I do it?

We have a top-level problem - Problem Omega, and we are located at Problem Delta, which is buried 22 levels deep. We see these two at a glance. Between these two, we have 20 levels stacked. We don't need to scroll through all of them. We can expand and see the whole path down if we need to. Eventually, we can click on some of them, and at that moment, it becomes our active problem; it replaces Problem Delta. Now, if we jump like this, we would definitely need: navigate back, navigate forward, pin, or bookmark functionality. Below Problem Delta, we have his children. We don't have to stack them as they are below.

Here, I was thinking only about the most strip-down version, a mobile version. That's because it is easy to add things but super hard to remove them, so it's always wise to do a mobile design first.

Hope this helps. Cheers!

Inter was initially designed as a UI font for Figma. Still, it quickly grew beyond that and became the ultimate general-purpose font, for a good reason. Where it truly shines is readability and legibility at any size, especially small. Also, it has unbeatable neutral and unobtrusive looks. Simply put - user doesn't notice the font, but the content. No font achieves that to the level the Inter does. Subjectively, Inter is prettier than Helvetica, SF Pro, Roboto, while being more usable.

It's also worth noting that Inter is free and open source. Font collections of comparable quality usually cost from $300 up to a few thousand dollars.

Are there Nostr app teams with more than 1 designer? What about more than 2? How many teams have no designer at all? #nostrdesign

They've done similar shenanigans to cripple Firefox's UX countless times in the past. Never had the balls to target Safari, as far as I know.

GM. Sam and Greg are in M$. 🌤️

Inter 4.0 is out! All hail mighty RSMS! https://github.com/rsms/inter #nostrdesign

Can only a few movies, books, bands, etc., define you? It’s an ongoing, never-ending process. I wouldn’t know where to start and where to finish.

But if someone points a gun at my head, I’d say Metallica, Terry Pratchett, Fight Club, Mr. Robot. Which would translate, I guess, to a 2x fucked up energetic person with an absurd sense of humor.

- Millennial, wannabe X

It’s safe to say Big 3 is no more. #tennis

GM. Humans will prevail, AI will never be able to come up with something like this. #nba #genius

Replying to Avatar Niel Liesmons

Noswot.org | Feedback + Proposal

https://video.nostr.build/e96ea19151f348c62337fd2a2df6f5e65b212709d075210c92a4d6f09737213b.mp4

What I would change:

👉 Land on a page where you can directly browse users with their WoT scores. Don't land on a long about page.

👉 Mobile first!

👉 Have a switch to hide users you already follow. That way this tool can be used for new user discovery.

👉 Explain different modes with a tagline on the main browse page. Not somewhere deep down the about page.

👉 Show the profile pics + have a neat card layout for each user

👉 Add "Connections" as a metric and clickable link (amount of following that follows this user)

👉 Have a little minimal logo

Sidenote: Nostr offers more than Following, Followers and Reports (Profile Lists, Interactions, Labels, Reviews, ... ) so feel free to play around with these for the algo's too 😉

Figma: https://w3.do/XocIQ5M_

#nostrdesign #WoT

Few notes(mostly spacing):

1. In the card, the image on the right has a much bigger "weight" or visual impact than the text on the right. That's why we need more white space around text to balance visual impact. Right now, that text looks crammed to the right. Try to make bigger padding, like 18 or 20px.

2. The "Plus" icon is crammed against the content below. Try giving it more space to breathe.

3. The back arrow weight is thin compared to the font. Also, I'd suggest to center it vertically instead of aligning it with a baseline.

4. Space between cards is the same as space between content in the cards, 12px. This destroys rhythm, makes it linear. Try reducing the space between the cards.

5. Space between sections and section title and its content is identical, 12px. Increase space between content and/or reduce space between title and section content to get better proximity or grouping of content.

6. The first title is crammed against the top search. Give it more space to breathe.

7. Proximity needs to be better defined when you have two columns in a card. Try to put a line separator between two columns or play with spacing.

8. You could use the same font size for the number and title of data in the cards. Instead, make contrast with font weight and color.

Hope some of this helps.

This thing will battle Apple mouse for the worst product ever made.