Diaspora Foundation Site Proposal

Website, Documentation, and Discourse
1

Hi all!

Some time ago I’ve made a proposal (https://www.loomio.org/d/KZJhVLgM?page=1
) about redesigning diaspora’s identity (to some extent, not the logo), and build a better DiasporaFoundation site based on that.

Well, I’ve presented some mockups, and now I’ve forked the site and made a new version of the homepage.

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

First we could port the current page to the new design, and then possibly add some features as having a Pod map right on the foundation page. And clarifying the joining process, maybe hosting a video, etc.

So, if I have green light from the people involved, the porting could be achieved in no time, this is actually running code already.

I’m reposting a comment on the other proposal below:

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.

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

2

Nice ! I really love the design !

3

:smiley:

4

Awesome! I’d say go for it. Shall we vote. I like voting :smiley: Maybe just a few days, if no objections, otherwise we extend.

Would be easier to tune various things if work is officially started.

The repo is here? https://github.com/pablocubico/diaspora-project-site/tree/foundation-landing

5

Might this design be the base for a diaspora* design evolution ?

6

@jasonrobinson Yep, that’s the repo!

Actually, my goal was to create a proposal, not a discussion, I’ll create one now.

7

Proposal: Continue work with Diaspora Foundation site as shown

Continue developing the design currently available in this URL:

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

The reasons behind some choices are on the discussion description.

Feel free to ask anything!

Outcome: N/A

Votes:

  • Yes: 5
  • Abstain: 1
  • 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.

8

It’s wonderful that something is happening to the project site! Some points on the design so far:

I was thinking, can’t we let go of the top bar? It feels misplaced, transparent and in the way as some content is duplicates (join button, logo) or could be placed more logical (language settings in the footer, navigation on top or in content). Getting rid of the header makes it feel less of an application and more of a information site and eases up the space, especially on smaller screens. :slight_smile:

Then the buttons. I don’t know when differentiating from the popular became more important than designing an interface that focuses the content. Subject is the flat debate. Diaspora is pretty unique as a concept, we don’t need a totally unique design to prove that. Designing diaspora specialized buttons feels a bit dramatic, regular bootstrap buttons look okay and will probably age with dignity.

9

Hi there! Thanks for the feedback!

Mainly, differentiating from the popular and focusing on the content do not exclude each other. You can be different and still focus on the content.

I don’t think using Bootstrap buttons will do any benefit, or provide more “content focus”, but will definitely make the site look like just another Bootstrap site with no identity.

Identity is constituted by the whole package, by how you approach the design, if you use rounded corners or not, if you use textures or not, what is your palette, and many other nuances.

So, if you use the same styles as any other around, what you get is a loss in Identity, which is key to communicate Diaspora better: a consistent identity.

About design, if it’s content-focused or not, and such; that’s an issue you approach from many fields, perhaps information architecture being the most prominent. In that sense, I moved some of the content to the home page. A very minor change, but still important.

Much more needs to be made, this idea was basically a port of the existing architecture, to a newer design.

With further analysis of the content, more changes could come, to really focus on the content and re-layout the pages around it.

10

Hi! I’ve been trolled by a few friends, so I made an extensive FAQ for this design, it’s really long, but give it a look if you want some answers on what’s happening here.

https://gist.github.com/pablocubico/8cc06c42afa5d8727859

To put it in simple words, I would just love to have green light from the community to build a great foundation site, trust me on this, guys!

11

Hey, I don’t get what we are voting exactly here.

About your design:

  • I agree the current design can be improved. I especially like the use of a big picture as the body background (many websites like twitter or flickr use that now, it’s nice) and I also like the black footer, and the use of opacity. Transparency is nice!
  • I think we should not change the colors which are always been part of the identity of diaspora*: the blue and the green buttons, the black header. Especially, where does that orange come from? I personally don’t like it at all. The shadow inside the buttons looks weird too, we should probably reuse the diaspora* buttons here (not the bootstrap ones).
  • I think all the content should be directly accessible. Why having to click to read it? (I’m talking about Decentralization Freedom Privacy links).

Thanks for working on improving the design!

12

I think blue it a too much common color : FB and Twitter already use it. I also agree that orange makes this site appear a bit “commercial”. Maybe we can find a unique color : purple or violet ?

I also think that this may be the starting point of a new design for the diaspora* server.

13

AFAIK we’re voting to show support for the effort @hola has done so far and to tell him that if he continues, he will not do it for nothing :wink:

I’m sure all of us will then later get a say in bits here and there in the design. But, I want to point out here that in a successful team, not everyone does everything. Successful teams need trust, trust in individuals to make the best decisions based on their professional skills.

Looking at the design of Pablo I can see he is a design and UX professional. I check their site http://vispress.com/ which also screams out tip top professional design to me. I think our “team” is lucky to have received a serious about UX contributor, and as such I’m willing to put a lot of trust in the decisions made by Pablo.

This doesn’t mean that things shouldn’t be discussed or that design should be accepted “as is” - but IMHO it does mean that some (large amount) of freedom does need to be given to the (professional) person wanting to do the effort and make it happen.

When I talk about trust, even though our “team” is not very structurally strict, we already have key members who we trust to make good decisions, because we know them to be professionals (like @jhass <3).

What I am trying to say, when it comes to small (or big) details in the design, I personally would love to see some trust to move this design renewal forward. We can always change things later that @hola insisted we’re good things, but we then, after real usage, notice weren’t :wink:

this semi-rant opinion powered by some excitement about a redesign of the site, and a large glass of wine

14

I think it’s great that someone’s working on improving the design. I appreciate that this is just a starting-off point, and not a finished design.

First, I think I should say that I’m not sure why there’s a vote on this. That doesn’t seem appropriate to me, as subjective things such as design are better dealt with by an ongoing conversation rather than a flat yes/no vote.

Things in the design proposal I think are improvements:

  • Having a vertically much smaller home page. This is because of the interactive info box holding the main part of the text. This works well in my view.
  • The new typeface. I like it, it’s free, I think it works well in diaspora*'s environment. As you say, it has some personality, and I like the fact that it comes from a research rather than corporate setting.
  • The background image works quite well, I think, with blurred image at the top, and a dandelion clock in focus at the bottom, which you see only when you scroll down.
  • I like the look of the footer bar, although it needs to be less deep. That would be easily fixed.

Things I think don’t improve on current design:

  • The huge grey bar with ‘The online social world…’. It just looks, to me, lumpen and unattractive.
  • There is too much vertical space before the info-box (this is also a problem with the current project site design). I think the info-box either needs to be properly visible on the screen without scrolling, or the home page should contain only logos and a strap-line, with the info-box on a separate page. One solution would be for the diaspora* logo and ‘Online social world’ to be the default pane of the info-box.
  • The orange is too in-your-face. It might work if it were less saturated, more subtle. It doesn’t, to me, give the right impression of what Diaspora is all about.
  • Not sure about the white header bar. It doesn’t fit with the current Diaspora app UI. (See below for more thoughts on this.)
  • Many elements of the design look rather corporate and ‘appy’. It would be good to have something which shows that Diaspora is not a venture-capital-backed corporate start-up.

I realise some of these comments are rather subjective, but I don’t have the energy to give detailed reasoning for everything.

Some of the design ideas in this proposal do not fit in with the current Diaspora app UI. This is not to say that the UI of the app itself cannot be improved - it can - but I think it would not be a good idea to have a project site which didn’t reflect at all the UI of the app itself. It’s like the current sign-up page, which bears no relation to the rest of the UI.

If there is a desire to move away from the current UI - and we haven’t really had that conversation yet - the UI of the whole app should be changed at the same time as that of the project site, so that the project site and app complement each other. To my mind, this proposal doesn’t complement the app UI - it’s something else entirely. We need to make sure that the project site experience supports the app experience.

I agree with Fla that ‘we should not change the colours which have always been part of the identity of diaspora*’, although I disagree that the blue and green buttons are part of diaspora’s identity - they are basically default Bootstrap colours, and we can definitely benefit from moving away from them. The black header is much more an essential element of diaspora’s UI, so we’d need to have a proper conversation about changing that.

I hope those comments are helpful and I haven’t offended. I appreciate you putting so much work into this, and hope you’ll continue.

I think there was a proposal for a design/UI working group, so let’s set that up and keep the conversation going.

Thanks again.

15

@goob

First, I think I should say that I’m not sure why there’s a vote on this. That doesn’t seem appropriate to me, as subjective things such as design are better dealt with by an ongoing conversation rather than a flat yes/no vote.

This vote is not a flat yes/no vote on the design. It’s a show of support for the basic design. I’m sure Pablo wants to know if he has support to continue, or whether to just drop it here :wink:

16

I have a few visual suggestions for the foundation site as well, what would be the best way to collaborate on ideas here?

17

Just wanted to add that having the whole text available on the page without any click needed is also essential for SEO.

18

Hi all! Been away for a few days.

First of all, thanks for all the feedback and the support. Thoughtful feedback is always welcomed, no matter if it’s criticism or kudos.

Sorry for the voting not being too clear, this is about starting a new design but of course is not final. Surely it’s not the best possible design in the world (have you read the FAQ I posted?), I know it’s a bit shocking, but I needed to do something to be able to start this conversation from somewhere, so I went ahead with some ideas I believed in.

As a newcomer, I also wanted to show to some extent what my ideas were, and what I’m capable of, and that’s the output.

I’m trying to think better ways to open up the design process for FOSS projects. It’s not an easy task, even well designed things like Mozilla’s products are note very open on the design side. This is mostly due to the lack of open source culture among designers. Being a designer and developer, I come from both worlds and I know for sure that design knows very little of it.

I’d like to collect feedback, and start doing some visual options, and maybe we can vote on that.

I’m thinking on a weekly iterative workflow, something like:

  1. Upload the first design to Invisionapp where we can comment on every design and start discussions there over the weekdays.
  2. Collect that feedback and work on improvements/alternatives over the weekend.
  3. GOTO 1

As this can go on forever we’ll have to set the best tool to fast decision-making: deadlines. We should set a deadline for publishing a first version of the site. Maybe a couple of months would be good. Websites are not written on stone, we will of course keep improving that after publishing.

You can check out how it works here:
http://invis.io/XCSGCE4Y

(Background looks buggy, don’t mind that).

Please let me add some comments on the various topics mentioned:

  • Header: Got it: black header. Seems like a sensitive topic!
  • No click to content: Noted, we’ll find a way to solve that.
  • Button colors: The blue and green buttons are (as far as I can tell) no part of Diaspora’s identity. Most of the current site is default Bootstrap, and this brings many problems: 1) it is not anybody’s identity, it’s Twitter’s idea of button colors invading your design. 2) that palette is outdated, and also, it has nothing to do with identity, is just a color map of the various actions: green = success, red = danger, etc. 3) Being the default theme for a framework, it’s really harmful for identity purposes, because it makes your site look just as any other Bootstrap site. What will experienced users recognize by looking at them? Bootstrap, not Diaspora. I can’t stress this enough.
  • Consistency I: Diaspora UI + Foundation site UI: We have to make both consistent, but not equal. The foundation site is not something you’ll see every day as Diaspora, I mean, it is a totally different use case. However, I’ve been doing some experiments with that, overriding CSS on diaspora (not changing actual code), so it’s really buggy and it’s just the stream but you can check it out here: http://uxpod.vispress.com/ , but as you might see, I’m for using a colder palette on Diaspora, and a warmer on Foundation. This is because the different use cases.
  • Consistency II: We have to develop an identity manual before continuing, that will serve as an umbrella for all the other decisions.
  • Identity: Can you please elaborate what elements you all consider as an essential part of Diaspora’s identity?
  • Corporate design: I would like more output on why this looks “corporate” or “appy”. There is no such thing as “corporate design” for me, I don’t make that distinction, unless you use recruiting cliché images with guys on black ties over a blue background. I can see the design as “trendy” or “modern”, and well, corporate sites are usually are trendy and modern. Why? Because they have the money to ditch away a 2-year-old design and have a whole design team working on the latest trends over tons of UX data. But I think a FOSS project shouldn’t be any less bold, daring or modern than any corporate site. If communicating that Diaspora is not a venture-backed startup is important, we won’t do it by conveying the idea through the design style, but by explicitly saying so. And I think even the current site does a good job on stating that.

@goob I proposed the “UI working group”, and as I said before, in order to make this work it would be nice to have some people as you, Stefan, Fla, Sean and any other interested in being engaged and providing constant feedback, maybe communicating by e-mail, having IRC meetings and such. And of course, commenting on the invision designs will be the most helpful.

19

GOTO 1

Goto considered harmful !

I really like your initiative. Working on source code is easy, fluant, but design is a bit more complicated as the look and feel metter and the underlying code too. And there’s no real easy way too work together on design.

So to me, it’s a big go on. We can discuss details afterward but I really like your work.

20

All good, I especially like the graphical explanation of how D is different to other networks, as I think that’s one of the sticking points for people getting their head around things.