A redesign idea

Website, Documentation, and Discourse
1

Hi! I’ve gave this some thought, as I would really like to see Diaspora moving to a next step in the near future. I already proposed some minor tweaks on Diaspora’s UI and started contributing to the Bootstrap porting (will continue this long weekend! woohoo!).

In the meantime, I took a deeper look into the foundation website, and I would really love to see something like this happening, an up-to-date bold redesign, that could help engaging more people, users and potential developers.

I have visual communication experience from working with agencies for years, so I can help with about anything regarding that. I believe that good branding is crucial to make Diaspora more engaging for users and devs.

Take a look at the EmberJS site for an example, is just a JS framework, pure code, but their site is heavily designed and branded. Even if you don’t know Ember, entering their site gives you some idea that something is going on well there.

I think free software needs a lot from us designers, and sadly, not many designers engage with that.

So, here is a first take I took on the Diaspora Foundation site. I’ve put some serious thought into it. It may be shocking, but please be imaginative, and trust me on this, an updated look like this could be a hit. Try to envision the impact of a relaunch campaign.

This is an interactive prototype with two screens: home, and philosophy. You can click on “Philosophy” or “find out why”, just click anywhere and you will find the hotspots. You can also leave comments there, pressing C o hitting the comment button at the bottom.

Feel free to love it, hate it, criticize, implement it… IMHO, it’s a good starting point to checkout some looks and go further with the rest of the pages. Not a big site, this would be really easy to implement.

Font is Open Sans (free)
Background image is a free photo from sxc.hu.

http://invis.io/YURK5NT7

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

2

Well, I like it. A lot. I’m one of the people who put the current site together, albeit based on an original Dan Grippi design from 2.5 years ago. I agree it could do with being refreshed, and I like your approach. Not much more to say at the moment, but I think it’s a good direction to go in.

Ideally I wanted as little text on the landing page as possible, but in the end it was proving too difficult not to have at least a reasonable amount of text. If you can make the landing page cleaner, that’s great.

3

Glad you like it! Is crazy how 2.5 years is old, the design itself is not bad, it’s just the way web evolves that makes anything look old in a very short time span, and corporations push trends forward to make the little guys (small businesses, organizations, anyone) look outdated.

I wanted the landing to have the minimum: logo, caption, call to action.

There’s two action paths actually: Join, and “find out why”, wording is something to discuss maybe. “Find out why” seemed ok. The site will need to choose a communication mood: bold, aggresive or not, etc.

A friend of mine suggested the most aggresive one: “Diaspora: not made by cops”. :stuck_out_tongue:

4

I wanted the landing to have the minimum: logo, caption, call to action.

That was exactly my concept too, but we just couldn’t find a way to make it work. (I’m very much an amateur designer…) So I’m really pleased to see your mock-up takes the same approach.

I’m not sure what you mean by ‘The site will need to choose a communication mood: bold, aggresive or not, etc.’ - but that’s not important right now. Do you mean a strapline (as in ‘not made by cops’)?

ps: if you fancy having a go at redesigning the wiki as well, that would be fab! I wanted the landing to have the minimum: logo, caption, call to action.diaspora* project wiki - that’s a really tired and unaesthetic design.

5

By mood I meant a style (playful, aggresive, any style). Choosing the right words when you have a style in mind is way easier. Anyway, not important right now.

We could do something for the wiki! I want to let this discussion evolve and maybe create a proposal for the foundation, if we are ok with that, then we can apply the same concepts everywhere (this would be good for branding consistency).

For the wiki, yeah, I’ve read a lot of the wiki, I was using a MediaWiki Bootstrap theme last year, it maybe easier to implement that and then apply some changes over.

6

Yeh sure, the wiki will be a whole different beast, I just wanted to mention it as the design is so bad (in my opinion) - basic wiki design just ain’t that attractive nor easy to use. It would be fantastic if that design could be improved at some point.

Right, mood, I see what you mean. Sure we can discuss that. (I meant that it’s not important for me to understand what you meant - not that what you said wasn’t important - sorry for any confusion.)

One other thing: if we’re going to redesign anything (project site, wiki) it will be important to make it responsive, and especially to have a good mobile UX. That’s something which is lacking at the moment. I’m sure you’ve considered this, but I needed to say it.

Thanks for your energy and your ideas.

7

Oh yeah! Forgot to mention that, I designed that page thinking on basic responsive patterns: horizontal things become stacked vertical, as the navbar, etc.

It’s easy to achieve using Bootstrap’s grid. We can use just the grid, for responsiveness, and not the widgets, it works really well. It also provides basic “collapse navbar into a menu” functionality.

8

Great. The current project site is based on Bootstrap in any case, so hopefully there won’t be a huge amount to change in getting it responsive. It’s really a case of working out how to present different elements in different screen sizes and formats - that was just more work than I was able to take on at the time. This sounds very encouraging.

9

ps: the entire site is on Github: https://github.com/diaspora/diaspora-project-site , so you can find everything and see how it works at the moment.

10

The mockup is looking really good. IMO we should use the same design concepts for the foundation website, the wiki and the diaspora* software. We don’t have to redesign everything at the same time but when we try to redesign the foundation website we should at least consider which design concepts we can use for the diaspora* software.

11

Hey Steffen! Glad you liked it too. Of course that’s the idea, I’m thinking on some “not-so-flat” alternatives, that could work for both the foundation site and diaspora* itself.

Foundation is more of a discovery site, diaspora* should be something that you can look every day without getting tired, but both should share some of the aesthetics.

I forgot to add these two pages, in some of them I experimented with some not-so-flat buttons, and embedding podupti.me inside the foundation website. Maybe podupti.me can have a second view with the new styles and it can be embedded externally via an iframe into the another one. to reduce coding to a minimum.

http://invis.io/YURK5NT7

@steffenvanbergerem and @goob please check it if you have some time.

12

You can click Join and the first two pods on the join view.

13

I’m thinking on some “not-so-flat” alternatives

Let’s call them ‘fat’ design!

We’ve been talking elsewhere about making an ‘official’ pod finder from the fantastic resource of podupti.me and the new stats collector produced by @jasonrobinson - so, while we’d like to include a pod finder resource on the official site, it won’t be taken directly from the current podupti.me.

In an ideal world, I think we could present people with a choice of ‘how do you want to choose a pod’ - from, say, location (any local pods serving the community you live in), special interest (e.g. ‘pet-board’), size, security features, and so on, and present a selection of pods based on those criteria. That’s all up for discussion, but I expect the eventual feature will be something different from what’s currently available, so don’t do too much work on it until we’ve been able to thrash out what will be included in it.

(I can’t find where the discussion on what to include in an ‘official’ pod selector, but perhaps someone else can provide a link.)

14

Haven’t had time to check this before. Very nice mockup @hola - like it. Also I don’t think the project site needs to look like the d* UI itself - though the wiki and other project resource pages should follow some kind of common theme.

The project site should definitely be responsive and mobile first - that is a must imho. With a gorgeous modern responsive project site I think we could totally get more people interested.

The pod choosing is probably the most important thing that would need refining. As @goob said, not so much a list but an interactive experience. Big buttons, not so much text or lists - and most importantly an easy way to just click one button to go to a signup page.

15

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!