damus-io / damus

iOS nostr client
GNU General Public License v3.0
1.95k stars 291 forks source link

iOS re-desing proposal #82

Open robagreda opened 1 year ago

robagreda commented 1 year ago

Hello mates, contacted jb on Damus via DM, and shared this re-design version of the Damus app for iOS, he liked it already but he wants me to share it with you all, to see what you all think and if you have feedback or general comments.

Here is the Figma prototype view(now just scroll with blur effect): https://www.figma.com/proto/G4n8Fh3CNgU3Znu2Uhdt1W/Untitled?page-id=0%3A1&node-id=1%3A2&viewport=1361%2C433%2C0.53&scaling=scale-down

image

If you all like, we can move ahead and work on DM, Notifications, Posts, and more.

Thank you!

jb55 commented 1 year ago

cc @sdub18 @ismyhc

sdub18 commented 1 year ago

Oh yeah we can make that happen

sdub18 commented 1 year ago

That timeline is gorgeous. We should for sure do a meetup sometime this week or something. Start making some actionable steps

bebopkid commented 1 year ago

thoughts on pubkey in the home/global feed? it has name and username but neither are actually unique. but design looks great!

sdub18 commented 1 year ago

Personally I would be against that. For developers like us that is helpful but for regular people seeing the whole pubkey can definitely be jarring. Something I did on the Profile view was move that into an icon and then use pubkey_to_rgb_hex to give it a unique color based on value. That might be nice to put there though I agree. I definitely see where you are coming from though

robagreda commented 1 year ago

I see the little icon, works nicely to copy the key, would be nice to have the icon and once users touch it, raise a modal showing the public key, explain what that is and a copy to clipboard button. Thoughts?

sdub18 commented 1 year ago

Yeah I agree. That could be a nice middle ground. Definitely something to discuss further I think.

sdub18 commented 1 year ago

I think the tab bar could also use some work. That middle + button is not calling to me personally. But overall I do like that concept. It just feels more React Native/Kotlin and less native SwiftUI if that makes any sense. Just my personal opinion so feel free to take with a grain of salt

robagreda commented 1 year ago

Hey, yes, will keep exploring more concepts about that! I know that the + to create a new post is super important and maybe the placement is not sooo good at this point, so thanks for the feedback, always appeaciated.

bebopkid commented 1 year ago

I definitely see where you are coming from though

yeah def don't mean the whole pubkey πŸ˜… just some way to help identify authenticity. i like the color idea but not sure it's easy to understand what it conveys immediately; however, either way, yes, some way to help ppl understand who's a fake jack and a real jack πŸ˜‰

niteshbalusu11 commented 1 year ago

Wow, looks super cool!!

markrachapoom commented 1 year ago

looking good! would love to contribute in the near future :))

stackingsaunter commented 1 year ago

Great stuff, If you want a hand I am happy to design with you.

ghost commented 1 year ago

Small comment, Is it possible we could leave retweet the same icon as twitter? Think less confusion and no use reinventing what people already know. Mastodon clients drove me nuts because they change small things like this.

sdub18 commented 1 year ago

Small comment, Is it possible we could leave retweet the same icon as twitter? Think less confusion and no use reinventing what people already know. Mastodon clients drove me nuts because they change small things like this.

Haha thats so funny cuz I was feeling the exact opposite. But I totally agree with where you are coming from

nvk commented 1 year ago

Looks very pretty, my only suggestion would be to make information more dense. Maybe reduce the space between two posts and remove the button decoration around the icons. jm2cc

jb55 commented 1 year ago

Looks very pretty, my only suggestion would be to make information more dense. Maybe reduce the space between two posts and remove the button decoration around the icons. jm2cc

agreed

jpye-finch commented 1 year ago

dig it! would just check the accessibility on the purple links

robagreda commented 1 year ago

I can work on it, and change the colors, but I like them cuz you see right away the touch targets! :)

nvk commented 1 year ago

Another comment regarding the "Name" and "@name", nostr doesn't have @ native. It is a pubkey, so i'd suggest:

aerolit commented 1 year ago

Looking nice already! Why not show the pics in full screenwide and blend the text/username over in a semi transparent β€šbubbleβ€˜ or something.

scoder1747 commented 1 year ago

Can we also enumerate the Reply Icon so that the user knows how many replies have been already posted.

Screen Shot 2022-12-21 at 1 56 06 PM
scoder1747 commented 1 year ago

Also, we need to have a design for identifying whether the post is a reply or a main post.

scoder1747 commented 1 year ago

Another comment regarding the "Name" and "@name", nostr doesn't have @ native. It is a pubkey, so i'd suggest:

  • when nip5 available: "@Nickname" β€’ "nick@domain.tld" or "nick@domain.tld" β€’ "truncated pubkey"
  • when not available: "@Nickname" β€’ "truncated pubkey"

Yeah I agree. Probably, we can use last 10 characters of pubkey for "truncated pubkey" (just like last 4 digits of cr card or ssn).

ismyhc commented 1 year ago

Design looks great! However, Im more of a fan of using standard platform design especially in an open-sourced project as it makes it easier to maintain.

That said, it's a really great design and I have no real complaints outside of what's already been said. As long there are contributors willing to make these changes I think it's great!

Since there have been a few people step into help, I think Im going to focus on my DM focused app Seer! :)

alixanc commented 1 year ago

Another comment regarding the "Name" and "@name", nostr doesn't have @ native. It is a pubkey, so i'd suggest:

  • when nip5 available: "@Nickname" β€’ "nick@domain.tld" or "nick@domain.tld" β€’ "truncated pubkey"
  • when not available: "@Nickname" β€’ "truncated pubkey"

Yeah I agree. Probably, we can use last 10 characters of pubkey for "truncated pubkey" (just like last 4 digits of cr card or ssn).

Couldn't that still be brute-forced by fake accounts, making them actually look more legit instead of helping to identify the real accounts?

What about having a small "followers you follow" count directly visible, if you see an account is being followed by many of your follows that could be a reasonably secure indicator? Basically already what I'm using on Twitter, but more convenient if visible in timeline.

robagreda commented 1 year ago

Will be sharing a newer version soon, taking all your comments/feedback in consideration. You'll see more stuff as well so you can comment about. Thinking on adding a figma link so you can provide feedback right there! πŸ˜³πŸ€”

bitcoinuser commented 1 year ago

I would like to see the "replying to" part. I think maybe instead of show name, could show the profile image. Like "replying to: profile image 1 profile image 2, show more."

bitcoinuser commented 1 year ago

I would use a different font for the app. Something more modern, like this:

Screenshot_2022-12-21-23-17-29-172_com brave browser

robagreda commented 1 year ago

I already changed the font from Inter to Satoshi(obviously) to honor Satoshi Nakamoto,and looks good! And also have included the Replying to UI. As well I've incorporated the pubkey truncated pill into profiles and posts.

image

image

Bosch-0 commented 1 year ago

Very nice! Fellow product designer here, would love to help out. As you mentioned above sharing your Figma file (at least for commenting) would be handy and aligns with the whole open-source ethos. Maybe publish it as a Figma Community file so people can remix it?

As some others mentioned I would aim to keep things as close to Twitter as possible without copying it pixel by pixel. Jakob's Law applies here, people don't like change. Signal did a great job with their UX being quite similar to WhatsApp to make the friction of switching as minimal as possible. On the topic of Signal, rather then clutter the feeds with truncated pub keys we should do something similar to their "View Safety Number" feature where you click on the users profile and verify them. Maybe once you verify them it adds a small badge next to their name (similar to a Twitter blue badge) to show you have verified this person as someone you know. See below for what I am talking about:

image

stackingsaunter commented 1 year ago

@Bosch-0 100% agree on both Twitter-like design and opensourcing the design :)

The main difference with twitter would be Global and I'd think of adding chats in the future can be beneficial, so Damus would be a nostr-powerhouse, in contrary to some more niche/narrowed applications

CH-SYR3 commented 1 year ago

This looks awesome! Would love to see this happen.