Loomio

Develop Diaspora* Design and Identity

Pablo Cúbico
Pablo Cúbico Public Seen by 161

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! :P

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

Jonne Haß

Jonne Haß April 7th, 2014 21:21

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

DU

[deactivated account] April 7th, 2014 21:26

I love the look!

Pablo Cúbico

Pablo Cúbico April 7th, 2014 21:26

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.

Rasmus Fuhse

Rasmus Fuhse April 8th, 2014 04:54

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.

Ryuno-Ki

Ryuno-Ki April 8th, 2014 05:55

… 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!

Rasmus Fuhse

Rasmus Fuhse April 8th, 2014 07:26

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.

Pablo Cúbico

Pablo Cúbico April 8th, 2014 15:08

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!.

Balasankar C

Balasankar C April 8th, 2014 15:56

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

Pablo Cúbico

Pablo Cúbico April 8th, 2014 18: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.

Steffen van Bergerem

Steffen van Bergerem April 8th, 2014 18:15

@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.

Sean Tilley

Sean Tilley April 8th, 2014 22:51

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.

Pablo Cúbico

Pablo Cúbico April 9th, 2014 17:18

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.

Jason Robinson

Jason Robinson April 22nd, 2014 19:12

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 ;)

Welcome aboard!

Pablo Cúbico

Pablo Cúbico started a proposal April 23rd, 2014 04:48

Develop Diaspora* Design and Identity Closed 10:01am - Friday 2 May 2014

TL;DR - This is a very detailed proposal.

Please read it in:

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

Results
Agree - 14
Abstain - 0
Disagree - 0
Block - 0
14 people have voted (0%)
Pablo Cúbico

Pablo Cúbico April 23rd, 2014 04:49

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!

Rasmus Fuhse

Rasmus Fuhse
Agree
April 23rd, 2014 07:31

There are some small issues. For example I don't like the inset shadow in the buttons. But it is a really nice start.

Pablo Cúbico

Pablo Cúbico April 23rd, 2014 13:24

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

goob

goob April 23rd, 2014 13:54

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.

Pablo Cúbico

Pablo Cúbico April 23rd, 2014 14:02

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!

goob

goob April 23rd, 2014 15:05

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.

Pablo Cúbico

Pablo Cúbico April 23rd, 2014 15:26

@goob of course! Also, we should definitely need to build a proper list of things that are in need of some design.

D

Dotan
Agree
April 24th, 2014 18:36

The option to have other 'themes' is necessary, and this design approach looks promising.

Ivan Gabriel Morén

Ivan Gabriel Morén April 24th, 2014 19:28

@Pablo: Would it be possible to see a mockup of your ideas for the default, light daspora design? The one that is linked from your proposal is a bit vague as it builds on a background image and a dark header with completely new icons, and personally I find it hard to see where you're heading exactly :)

I have by the way been working on some icons in a slow pace, tinkering possibilities to symbolize pods, users, notifications and so on. I'm pretty sure we could come up with our own personal and communicative iconset in the future, and maybe make use of svg as delivery format instead of converting all icons to an iconmap. Vector graphics are getting better support in browsers all the time, and would work out better on a responsive site as the dimensions don't affect file size. This is an off-topic discussion though, sorry for that ;)

Pablo Cúbico

Pablo Cúbico April 24th, 2014 19:55

Hi! The UI design for that part is just an attempt for making D* look better without even changing the layout that much, using the current one with just some CSS tweaks.

So, not much innovation there, think of it as a first iteration of a progressive enhancement approach; much more could be done by actually freeing the layout, but I wanted to be as realistic as possible with the current resources.

Background image is just a sample of how some basic customization that could enrich D* experience with little effort.

Having an icon set would be great!, we can really nail it doing some basic user testing to check if the metaphors match the actions.

Pablo Cúbico

Pablo Cúbico April 24th, 2014 19:56

(I meant: "some basic customization LIKE that")

Frode Lindeijer

Frode Lindeijer
Agree
April 25th, 2014 00:43

Sounds good, looks great!

SG

Stéphane Guillou
Agree
April 25th, 2014 04:52

I think this makes the front page more appealing, modern, informative and would help the project.

Cheers for the hard work.

Sean Tilley

Sean Tilley
Agree
April 25th, 2014 18:03

Ryuno-Ki

Ryuno-Ki
Agree
April 25th, 2014 22:21

Diego*

Diego*
Agree
April 25th, 2014 23:06

M

morgenstern
Agree
April 26th, 2014 12:40

Christian Giménez

Christian Giménez
Agree
April 26th, 2014 15:50

PG

Paul Greindl April 28th, 2014 17:38

Just to see that I understood correctly. Is the plan here to change the design to reflect what is proposed in the mock-ups?

Pablo Cúbico

Pablo Cúbico April 28th, 2014 19:09

Not exactly, the mockups are just an attempt to show the potential impact that a redesign could have. The plan is to open the process (it's explained on the proposal).

However, I have to mention that I put some serious thought into it, and that design reflects my ideas on what it should be like. If you go outside and look for another designer, he/she will come up with something totally different (probably). And of course it has my style on it, as it will with any other designer.

As for the diaspora* design, I explained in a previous comment:

The UI design for that part is just an attempt for making D* look better without even changing the layout that much, using the current one with just some CSS tweaks.

So, not much innovation there, think of it as a first iteration of a progressive enhancement approach; much more could be done by actually freeing the layout, but I wanted to be as realistic as possible with the current resources.

PG

Paul Greindl April 28th, 2014 22:17

OK, so the question is whether we should change the design? That sounds good to me :)

What goes for your design proposal I can sadly not agree because of several reasons:
* We have a minimal design that makes using diaspora* comfortable and gives it a clean sleek look, quite the opposite to the design proposed here
* when we redesign the current look we should avoid making the UI cluttered and full of slightly outdated transparent boxes.
* I see the point of choosing individual background pictures but I think the situation with the objects that currently are transparent should be solved in a different way (without the transparency :P)
* please, please rethink the buttons and their shadows! :)
* please don't forget that "good" design often is as little design as possible, KISS (Dieter Rams 10th principal for good design: "Good design is as little design as possible" focus on the important things, think them through thoroughly and then make them really, really good!)

Another issue, which probably is just an issue with the mock up, is that everything is a bit strangely unaligned and does not really follow a pattern. This of course leads to a messy and uneasy feeling. But that shouldn't be a big deal to fix :)

  • elements I like are the round profile pictures, the current square one look a bit lost to me... I also think it's a good idea to make the top bar darker and maybe skip the pattern (?) as well as cleaning up the right column with information!

I really look forward to a creative and inspiring design process and good discussions! Let me know what you think. (I'll see if I can make a mock-up as soon as I have some time, maybe Wednesday) Ah, and don't get me wrong, it's great that someone takes the initiative to start a process of redesign, I just think we need to think it through carefully and consider all the possibilities :)

Pablo Cúbico

Pablo Cúbico April 29th, 2014 03:33

Great! Don't take anything for granted on the D* mockup, it's just something I did tweaking the current CSS styles without almost touching the markup.

There has been a discussion (the classic "flat" vs "skeuo/realistic" one), and I think (from the feedback I had) that we will go on a "not-so-flat" thing, developing Diaspora's own tone.

I made some experiments with shadows, but nothing final, I wanted the buttons and other elements to be more perceived as skeuomorphic than the content areas. So we can end up with a mix of modern and clean design, and more volume on some elements.

It will be great to have another mockup!, my goal is to build some alternatives (a few, not a thousand), and showcase that to the community, collect feedback and end up with a synthesis.

PG

Paul Greindl April 29th, 2014 08:18

Yeah, we're kind of keen to keep diaspora* away from the temporary flat design. But minimalism does of course not mean flat design by default ;) And in our case the mission seams to be to create a clean, usable and nice-looking interface while preserving diasporas non-flat style/identity....

PG

Paul Greindl
Agree
April 29th, 2014 09:23

L

lebarjack
Agree
April 29th, 2014 13:37

Trolli Schmittlauch

Trolli Schmittlauch
Agree
April 29th, 2014 18:46

Vostok

Vostok
Agree
May 1st, 2014 20:56

Sounds good!

Karthikeyan A K

Karthikeyan A K
Agree
May 2nd, 2014 05:40

Pablo Cúbico

Pablo Cúbico May 18th, 2014 23:38

Just wanted to say I catched the usual seasonal flu (winter is coming down here) and the had a crazy week to catch up at work, but I'll keep you guys posted on the bootstrap porting contributions and some design proposals on the run.

Sean Tilley

Sean Tilley May 19th, 2014 17:14

Keep us posted! Looking forward to your ideas! :D

Shmerl

Shmerl October 1st, 2014 21:00

It's been a while. Is this still in the works?

Birch**

Birch** October 2nd, 2014 22:57

The ideas here are great. I quite liked the way the two sidebars seemed to allow for easier emphasis on the sb- content and the way the text/page content pops out. (always been fond of the dandelion image) maybe with less colour though so that focus is still more on the center content.

Pablo Cúbico

Pablo Cúbico October 6th, 2014 00:03

This is sitll in the works, I'm trying to help on porting to bootstrap now, then I'm working on having an open design process/method so the design ideas can be presented to the community and maybe have some voting mechanism.

Pablo Cúbico

Pablo Cúbico October 23rd, 2014 19:26

Hi! To all who were interested, here is a sample of what a new foundation page could look like.

http://diaspora-site.vispress.com/

I forked the code and made a home page sample, no internal sections, but at least you can choose language.

I've been working on developing a unique style for it, with a unique palette, the Diaspora's exclusive "not-so-flat" buttons ( :P ) , and Titillium as font.

The choice for Titillium is because is a free font with lots of weight options. From Campi Visivi, the Fine Arts Academy of Urbino, Italy.

Another option was Open Sans, many widths, but it's used in Google+ and all over Android apps, same with PT Sans.

Titillium is a light, modern sans serif font, with more personality than the classic Helvetica clones.

You can change the language on the top bar.

This is intended to be responsive, also.

Please feel free to tell me what you think.

Shmerl

Shmerl October 23rd, 2014 19:30

The design looks neat, but the font would probably need a few tweaks in Fontconfig for Linux users. It looks a bit fuzzy by default for me:

Jason Robinson

Jason Robinson October 23rd, 2014 19:31

Woah - impressive and pretty :) Will comment more tomorrow, but initial: taking the home page to 2014, which is what we need!

Pablo Cúbico

Pablo Cúbico October 23rd, 2014 19:35

@jasonrobinson Awesome!
@shmerl Good font testing!

Corey Kimball

Corey Kimball October 24th, 2014 00:21

The design is cool; however, I'd make the user-image larger, and possibly add a header before the stream-feed- nice work!

-CK