Coder Social home page Coder Social logo

'Post to Reddit' - Design about dawn HOT 13 OPEN

tunous avatar tunous commented on August 16, 2024 6
'Post to Reddit' - Design

from dawn.

Comments (13)

saket avatar saket commented on August 16, 2024 3

This looks quite nice to start with!

If it (still) matters, I was thinking that the post screen need not be a full-screen screen. It might look good as a dialog, somewhat similar to Things:

392x696bb

People aren't going to type a lot on phone, so a dialog should have enough space for them to share a link or type a short self-text. In case users want more space, they could always switch to full-screen compose.

Another advantage is that when a link is shared to Dank from another app, the background app will still be visible behind the dialog. This gives you a feeling that you aren't leaving your current app. I'm not sure if I'm able to explain this properly, but the cognitive overhead of switching apps is higher than smaller share dialogs.

from dawn.

dotvhs avatar dotvhs commented on August 16, 2024 1

So here are some more designs, closer to the idea of yours @saket.

A simpler one that would require a picker before that (probably from a FAB):
https://invis.io/H6PVTGBKXWT#/340116544_Create_Post-2-Simple

And a bit more advanced which I am not entirely on board with, because it is using tabs which are non-existent in Dank:
https://invis.io/H6PVTGBKXWT#/340116545_Create_Post-2-Tabs
NSFW switch on: https://invis.io/H6PVTGBKXWT#/340116546_Create_Post-2-Tabs_-_NSFW

from dawn.

dotvhs avatar dotvhs commented on August 16, 2024

I fully understand what you mean. I could do this the way you shown, yeah. I will think more about that.

from dawn.

Tunous avatar Tunous commented on August 16, 2024

I think that having post screen as a dialog is a good idea. I like how it looks in your designs @voythas (version without tabs).

One thing I would change here is to remove that formatting bar from the dialog for text post and instead add a button to full screen editor somewhere. So we would have 4 screens in total: dialogs for text, image and link posts plus a full-screen version for text post with all the formatting options available.

from dawn.

saket avatar saket commented on August 16, 2024

Looks nice!

One thing I would change here is to remove that formatting bar from the dialog for text post and instead add a button to full screen editor somewhere.

Agree with @Tunous. Will keep this screen consistent with comment reply and message reply designs.

The version without tabs looks cleaner to me as well, but I'm not sure how switching between link, self-text and image will look like in this case.

from dawn.

dotvhs avatar dotvhs commented on August 16, 2024

Yeah, I will put more thought to it. Expect new designs this weekend probably.

from dawn.

dotvhs avatar dotvhs commented on August 16, 2024

Here's new design that covers your ideas and should also resolve issue of switching between different post types: https://invis.io/H6PVTGBKXWT#/340605335_Create_Post-2-Simple_V2

from dawn.

Tunous avatar Tunous commented on August 16, 2024

One thing that is missing is an option for selecting subreddit which would be needed when posting via share action or from frontpage.

from dawn.

dotvhs avatar dotvhs commented on August 16, 2024

One thing that is missing is an option for selecting subreddit which would be needed when posting via share action or from frontpage.

I thought it perhaps could be a two step process in that case to not overclutter that UI? Not sure how I feel about that just yet.

from dawn.

saket avatar saket commented on August 16, 2024

A team member from my company's design team has agreed to help me with this. He has some ideas on how the dialog could be animated as well. I'll sit with him and sketch out some ideas based on your designs, @dotvhs

Opening a PR in the OG repository to track this: saket/dank#7

from dawn.

dotvhs avatar dotvhs commented on August 16, 2024

I hope you don't mind @saket that I will keep working on my designs.

Here's something I created today:
dank_post

Higher resolution version is located here: https://www.dropbox.com/s/uqxup73rdybgy9i/dank_post.mp4?dl=0

Designs alone:
a01
a01 copy
a01 copy 3

from dawn.

saket avatar saket commented on August 16, 2024

@dotvhs not at all, please keep going. Your ideas are good and I'll probably end up using some of them.

To give some feedback on this interaction, this is similar to what the official app does: show options for post kind (self-text, image, link) before opening the post screen. I think one problem with this is if you choose the wrong kind or change your mind afterwards, you can't change the kind without closing the post screen and clicking on FAB again.

By the way, do you have ideas on where to fit subreddit selection here?

from dawn.

dotvhs avatar dotvhs commented on August 16, 2024

To give some feedback on this interaction, this is similar to what the official app does: show options for post kind (self-text, image, link) before opening the post screen. I think one problem with this is if you choose the wrong kind or change your mind afterwards, you can't change the kind without closing the post screen and clicking on FAB again.

Yeah, I'm aware of that. The previous version had this solved by keeping current type as a button.

By the way, do you have ideas on where to fit subreddit selection here?

I had two, but I am not very proud of them, really. One is a bit unconventional, like this:
fab fab

And another is more of a workaround of the problem, which would be not displaying FAB on frontpage/popular/all/multireddits. :(

I will think about this more soon.

from dawn.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.