Develop Diaspora* Design and Identity

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

@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 :slight_smile:

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 :wink:

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.

(I meant: “some basic customization LIKE that”)

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

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.

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

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! :slight_smile:
  • 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 :slight_smile:

  • 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 :slight_smile:

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.

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 :wink: 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…

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.

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

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

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.

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.

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 ( :stuck_out_tongue: ) , 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.

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:

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

@jasonrobinson Awesome!
@shmerl Good font testing!

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

-CK

Hey guys! What about the topic ? Is it possible to propose something now ?