Develop Diaspora* Design and Identity

Features and Ideas
1

Was: Diaspora UI enhancements with minimum coding effort

Hi people!

I’m new here, I was starting an experiment with Diaspora UI, just by doing minor enhancements with little or no coding, just CSS/HTML, not breaking any JS logic or backend work.

I started a mockup and it turned out pretty nice, so I thought: what if I turn that into a proposal?

I hope you like it! But if you hate it, don’t hesitate to say so… I may do it on a fork for fun anyway! :stuck_out_tongue:

Strategy, time, resources, etc.

Details on the proposal are here:

http://piratepad.net/diaspora-ui-proposal

Feel free to edit, add, etc.

Mockup

Mockup is here, click “Comments” on the bottom, or press “C”, you will see some pink comment bubbles. Feel free to comment there also:

http://invis.io/X3RBEAQA

Thanks for your time!

You can find me at hola@pablocubi.co

Note: This discussion was imported from Loomio. Click here to view the original discussion.

2

I think we should focus on porting our pages to bootstrap first. You can join the effort at https://github.com/diaspora/diaspora/issues/4466

3

I love the look!

4

Perfectly reasonable! I’m aware of the porting effort, as I said in the pad, on the “notes” section, the mockup is based on Bootstrap’s grid.

But despite that, what do you think about the approach?

I think we can also advance with some mockups as the bootstrap effort goes on.

5

Your mockup looks promising! It’d really nice if the developers would have some designers like you to be able to give diaspora a beautiful experience.

To be more concrete here: I guess it would be an ideal world if we had a theming engine in diaspora, so that podmins or users could adjust the look of the software easily. Your proposal of being able to change the background might be a good start.

6

… it’s pink!

I’d prefer a slide button like in extensions.gnome.org (see
GNOME Extensions
the on-off-slide on the left-hand-side in a red box). Those circles looks unfamiliar.

The HTML seems to be invalid (many non-standardised attributes). I doubt, a screenreader could handle it properly … yes, we have blind users on diaspora*! Speaking of accessibility … how do you capture the ‘c’ key? Please do not hijack all keyboard events as Twitter does!

7

Ryuno, the C and the comments are only part of the mockup and won’t be included into the real page. If you leave the comments away it’s not even pink. The mockup is in fact just an image. So you should not question the validity of the html but the look of the mockup.

8

Thanks @rasmusfuhse ! I’m a developer also, I think free software needs more designers and UX guys aboard.
The customization options were meant for users, not for podmins… but now that you mention it, wouldn’t be bad at all. But I don’t know if D* being different on each pod would be a good thing, it may lose some consistency. Anyway, that’s a whole different discussion!.

9

Cool… Its much better than the current UI. Kudos!!

10

Twitter just added new customization options with the legend: “make this space yours!”. That’s the idea, providing the sense of ownership. Sadly they used the same “police blue” color that “the other one” uses.

11

@hola I like a lot of the ideas you implemented in your mockup.

Like @jonnehass already said we will need to port everything to Bootstrap first. I already ported the conversations and notifications.

Right now I am working on a port of the stream/people view. If you have some ideas you would like to add to that discussion that would be much appreciated. You can also start porting any part of the UI to Bootstrap which will be much appreciated.

IMO some redesign would be great as soon as our whole UI uses Bootstrap. I also did a small mockup of the people view. I just did some basic changes but I think they go into a similar direction. I am looking forward to hear and see more of your ideas.

12

There’s a lot in here that I like. I also feel that Diaspora could use a little bit more visual polish, but as others have said before me, first we must get everything set up on BootStrap.

13

I just setup my environment to start contributing to the bootstrap porting in process.

Besides that: what do you guys think about this “minimum effort” strategy of doing polishing without changing the layout. The benefits are:

  • It’s faster than actually changing the layout
  • Won’t alter the existing flow for current users
  • Won’t affect any possible underlying JS (won’t break anything)
  • Will put Diaspora in another level, better looks could lead to more engagement both for users and devs.
  • Less discussion needed (except for a few new minor features, like choosing your own background).

Sad reality is, that the common user don’t care about the backend, if it’s Ruby/Rails or Python/Django or whatever, they will feel more engaged if we present a polished UI.

To achieve that, I would use InvisionApp (the one on the mockup link), which I currently use for my UX work with clients, it’s just a bunch a JPGs with clickable areas, and I can do some “interactive” mockups in top of the preexisting bootstrap layout.

InvisionApp lets us all comment and discuss mockups before implementing, it’s a real time saver.

We all agree on the porting to Bootstrap side, it’s mandatory, so let me know what you think about the approach, and we can start thinking on doing some serious UI refinement other than updating the CSS framework.

14

Awesome @hola nice to have a UX guy here - that mockup looks totally awesome. It would be nice to have mockups on big changes - and I think we’ve been slowly going in that direction, just with less bling-bling :wink:

Welcome aboard!

15

Proposal: Develop Diaspora* Design and Identity

TL;DR - This is a very detailed proposal.

Please read it in:

https://gist.github.com/pablocubico/43caf969442f72f6cd3a

Outcome: N/A

Votes:

  • Yes: 14
  • Abstain: 0
  • No: 0
  • Block: 0

Note: This proposal was imported from Loomio. Vote details, some comments and metadata were not imported. Click here to view the proposal with all details on Loomio.

16

I’ve summarized all the feedback I had in the proposal:

https://www.loomio.org/d/KZJhVLgM/diaspora-ui-enhancements-with-minimum-coding-effort

Vote!

17

@rasmusfuhse great! Designs are of course far from being final. I was experiment with some textures, styles are yet to be defined.

18

One small point: Diaspora currently uses Entypo for icons, and a decision was taken not to move to FontAwesome.

The first stage would seem to be conceptual: what Diaspora is for, and what sort of experience we want people to (be able to) have. From this design ideas will come.

Although it would be good to have a common strand running between the various elements of the project (Diaspora itself, the project site and the wiki) I don’t think the design needs to be completely unified throughout. As long as there is a common ‘feel’, that is enough.

We can use the minimal amount of branding necessary for users to know that they are using parts of one project. We’re not a commercial operation needing to ram home the branding at every opportunity.

If we’re going to change the design of the UI in Diaspora itself (and no reason we shouldn’t), we should allow users to keep the current ‘classic’ design if they want to. I don’t think we should force a change on people unless they want it.

I absolutely agree with your points about (a) accessibility and (b) responsiveness. Ideally, Diaspora should be equally easy to use for people with all levels of (dis)ability and on all devices.

If the Diaspora UI can be made completely responsive, it might be that the mobile version will no longer be needed. But that decision should be made as part of a separate discussion.

It looks as though you’ve made some decisions already (e.g. ‘Foundation will have a warm color palette suitable for discovery’), and it would be good to have some discussion about these things, but your input about them will be valuable.

It would be good to work out a minimum set of criteria for compliance with Diaspora’s design and branding, so that pods which want to customise their look can do so while still recognisably remaining part of the Diaspora ecosystem. I think this is what you address at the end of your proposal. Customisation of the UI of individual pods should, I think, be welcomed and encouraged.

Thanks again for all your valuable work on this.

19

Hi @goob thanks for taking time on your input!

Please mind anything I say as merely suggestions and not decisions! However, I have strong belief in those.

Didn’t know about the FontAwesome thing, I think Entypo is pretty much the same… as long as they are vectorial and free, have no special preference. Of course Diaspora* could have its own set, but that will be another phase, since it’s much more work.

Thanks again!

20

Oh, two things which I have been wanting to redesign for a while, but haven’t had the energy/expertise:

If you’d like to help me also with those, I’d appreciate it.