A redesign idea
Pablo Cúbico
Public
Seen by 31
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.
Pablo Cúbico Thu 17 Apr 2014 4:21PM
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". :P
goob Thu 17 Apr 2014 4:27PM
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.https://wiki.diasporafoundation.org/Main_Page - that's a really tired and unaesthetic design.
Pablo Cúbico Thu 17 Apr 2014 4:33PM
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.
goob Thu 17 Apr 2014 4:45PM
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.
Pablo Cúbico Thu 17 Apr 2014 4:50PM
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.
goob Thu 17 Apr 2014 6:43PM
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.
goob Thu 17 Apr 2014 6:45PM
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.
Steffen van Bergerem Sat 19 Apr 2014 2:02AM
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.
Pablo Cúbico Sat 19 Apr 2014 9:17PM
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.
@steffenvanbergerem and @goob please check it if you have some time.
goob · Thu 17 Apr 2014 4:09PM
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.