website design improvements

[max-mapper]

@olafveerman & Co have offered to help improve the dat website!

Pages:

• home
• team
• docs
• about
• stickers

The docs will ideally something simple along
the lines of http://pouchdb.com/api.html

It would also be awesome to have a generic layout design
for a sort of 'blog post'. Even if it's something simple where each
post is just a rendered markdown document paired with a separate UI
for listing all the posts (e.g. thats how http://maxogden.com/ is set
up)

In general I'm not 100% sure how the website will evolve over the next
year so it is probably best to keep things as
simple/flexible/componentized as possible. E.g. another project we're
working on is http://transform.datadex.io/, which deserves it's own
website but is also part of the Dat project. If we can re-use components across
projects so that Dat has a sort of visual identity/style guide then
that would be super awesome!

p.s. the dat sticker illustrator (designed by @jlord) is now at https://github.com/maxogden/dat-data.com/blob/gh-pages/logo.ai

[olafveerman]

OK, we'll start working on this later this week. Putting @danielfdsilva and @ricardomestre in the loop as well.

[ricardoduplos]

Hey @maxogden! We've been wrapping some other stuff. In the meantime, we started gather some inspirations. We'll get back to you soon.

[ricardoduplos]

Hey @maxogden!

We’ve been working on a modular and scalable design for the website. Scalable in the sense that new types on content can be added in the future, but also in the sense that the design could be applied to different satellite projects. Below we’re adding a mockup of the desktop version of the frontpage. The components are designed to respond well to different screen sizes and resolutions.

Some notes about the design:

Modular blocks / stripes

More types of blocks will be added in the future (eg. Code, Blog entries and Persons), but the stripes handle the current website’s content and contain some of the atoms that we’re reusing throughout the site: title, subtitle, buttons, video card, logos, features.
The two stripes that are ‘new’ in relation to the current site are the Intro stripe and the Features stripe (the one with the three icons).

Satellite projects

One of the ways to allow the satellite projects to have their own branding, while maintaining a consistent look and feel, is through the use of different primary colours. In this design we are using the Dat green, but the Transformers project could use the exact same design elements, but with red as primary colour.
On these projects, the DAT logo + copyright notice would be shown in the footer.

Footer

We believe that the structure of the proposed footer is generic enough to be applied to the other projects as well. Three sections with links for Explore, Learn and Connect content and a dedicated section for Support / Donation.

Intro illustration

This is a first attempt. We have more ideas we’d like to experiment with.

We look forward to your impressions and feedback.

[jlord]

✨ !!

[max-mapper]

Okay first of all I want to say that this is amazing, thank you so much!

My impression overall is one of joy and happiness :) I really like the use of the simplified dat green hex used in the intro/features stripes, it adds a nice level of visual complexity without being overkill (e.g. if the full dat logo was repeated many times it would look too 'busy'). The colors and layout feel very well balanced and spaced out.

It's hard for me to find anything I don't like... this seems to be exactly what we need at this point in time: a visual framework that is flexible enough for us to extend in ways yet unknown as the project evolves. I would be very excited to see a text-rich layout in the future (e.g. documentation).

Some thoughts sparked by the mockup:

The hierarchy of Page > Stripes > Atoms is really nice. I am getting excited about implementing some really nice reusable small UI modules based on this.

A style guide document, even in the form of an Illustrator artboard with design primitives, colors, fonts, simple UI atoms, etc, would also help us a lot to keep the visual framework hackable in the future. The Mapbox style guide is an example along the lines of what I am thinking. With something like a style guide we work towards turning the visual framework being developed here into a sort of Twitter Bootstrap-eqsue library for the Dat family of applications.

We also wanna do things like try and brand our many dat related github readmes. We are using simple shields.io badges now but there is definitely room for improvement there.

How do you imagine the intro illustration should look when on a smaller screen? Should the Illustration become semi-opaque like it is under the nav bar so that the text in the intro stripe remains contrasted and readable?

When it comes to implementing the mockups I would be more than happy to do the front end development (I actually really enjoy it, and don't get to do it enough). I am also very agreeable so if you have strong feelings either way on whether or not you want to do the implementing let me know! I have been developing some ideas (along with people like @kristoferjoseph) on writing modular frontend UI components and would love to use this process as an exercise.

[max-mapper]

Oh yea, I should also mention I have recently started work on https://rawgit.com/maxogden/dat-editor/master/prebuilt.html?remote=http://npm.dathub.org

This app will be embedded as the default UI inside dat instances. I'd love to be able to re-use styles and components between these projects. The editor is currently based on some Google styles and some crappy shades of green that I picked but I'm not at all married to them.

Also for the intro visualization we can probably also implement some fun WebGL stuff like what @hughsk did for https://nodesource.com/ :)

[kristoferjoseph]

✨ O.o ✨
This is great!
Can totally envision some simple animations for the polygons in the header hero area.
http://matthew.wagerfield.com/flat-surface-shader/

I have only one minor nit, I do not like the "get stickers" banner

The current placement breaks up the flow, maybe putting it on the upper left, or switching it to a button would be better?

[jbenet]

Guys, this is remarkable work! It is simply amazing. I love it.

Satellite projects
One of the ways to allow the satellite projects to have their own branding, while maintaining a consistent look and feel, is through the use of different primary colours.

Love it! Totally the right way to do it.

Later on, it would be super cool to have a dat-website-template repo that we can fork, change the primary colors in less and compile the output.

Footer
We believe that the structure of the proposed footer is generic enough to be applied to the other projects as well.

Yeah, SGTM. :)

Intro illustration
This is a first attempt. We have more ideas we’d like to experiment with.

Looks good. It's a bit busy, maybe try fading it out? Right now it overpowers everything else for me.

---

And +1 to all of @maxogden's points. In particular:

It's hard for me to find anything I don't like... this seems to be exactly what we need at this point in time: a visual framework that is flexible enough for us to extend in ways yet unknown as the project evolves. I would be very excited to see a text-rich layout in the future (e.g. documentation).

+9000

We also wanna do things like try and brand our many dat related github readmes. We are using simple shields.io badges now but there is definitely room for improvement there.

Yeah, we could have a banner with this awesome visual style that spans the width of the readme. I see two use cases:

1. larger subproject, should have:
   • [dat logo] > [subproject logo or name]
   • super short description of dat project
   • maybe where the subproject fits in dat ecosystem
2. smaller module
   • should have generic "this is part of Dat" banner
   • maybe shows the module name (nodei.co style)

---

Guys, this is fantastic! :) I love it.

[olafveerman]

Thanks all for your feedback, very encouraging.

Some of the ideas coined here are great (like the readme), but for now we'll be focusing on the website itself. We won't be able to pick these up right now because of time constraints. Maybe they deserve to be in their own issue?

Currently we are working on a new iteration of the design that will contain some more building blocks, like person 'cards' for the team page and a more text-rich layout. We'll also be incorporating your feedback, for example about the illustration and the stickers placement.
After that we'll move on to the style guide document with colors, buttons, etc.

Regarding @maxogden's comments about the frontend implementation: the modular approach is something that interests us a lot, so we'd be very interested to make a contribution here as well. Especially @ricardomestre has a couple of ideas about implementation. Let's discuss what would be the best way to collaborate on this.

[ricardoduplos]

Hey!

Here are three new mockups:

1. People cards for the team page
2. Text-rich page with sidebar, ideal for documentation
3. Text-rich page without sidebar, suitable for the about page and alike

We are still working on the Intro illustration. More news on this soon.

Looking forward to your feedback.

People cards page

Text-rich page with sidebar

Text-rich page without sidebar

[max-mapper]

@olafveerman @ricardomestre these look great! will be perfect for documentation and blog posts. Maybe we could do a quick google hangout to discuss implementation details? I'm free any time wednesday, thursday this week and any day next week

some tools/approaches for consideration (feel free to add more):

• https://github.com/atomify
• https://github.com/conradz/rework-npm
• https://github.com/maxogden/packify
• https://github.com/substack/brfs
• https://github.com/petehunt/js-css-loader

[ricardoduplos]

Hey @maxogden,

Thanks for the feedback!

Can we chat today at 9am (Oakland time)? Sorry for the short notice.

[max-mapper]

In 1hr 10minutes from now? Sounds good! I am [email protected] on google
hangouts or maxogden on skype

On Thursday, June 19, 2014, Ricardo Mestre [email protected] wrote:

Hey Max,

Thanks for the feedback!

Can we chat today at 9am (Oakland time)? Sorry for the short notice.

—
Reply to this email directly or view it on GitHub
#6 (comment).

[ricardoduplos]

Perfect! Talk to you soon on Google Hangouts.

[max-mapper]

Notes from the hangout:

• @ricardomestre is working on a v1 of the UI toolkit/library, will ship it soon
• after that @olafveerman and @ricardomestre will start implementing the mockups as well structured, simple CSS and HTML using (most likely) SASS/SCSS and jeet.gs
• ultimately I want to contribute the UI components towards a full featured UI library where the components are modular + self contained w/ their own behavior, style and markup. I also know @kristoferjoseph is excited about this use case as well

also @ricardomestre and @olafveerman and @mafintosh and @jbenet and I will all be in Berlin for csv,conf

[ricardoduplos]

Hey!

Here's the first approach to the Dat UI Kit - Basic elements. Some pieces are still missing, like the basic grid, form inputs and controls, tables, etc.

We're also working on a complementary document that features the components: cards, button groups, navs, etc.

So far, what are your thoughts on this?

[max-mapper]

@ricardomestre looks excellent! I can tell already that this is going to help a lot in the future as we re-mix content on the website. I'm excited to dive into building some stuff with this!

[max-mapper]

@ricardomestre we are shooting for a big dat release on dat's 1 year birthday, august 17th. is that timeline possible for the first implementation of the website css/html ? we can help implement as well

[ricardoduplos]

Hey @maxogden! We'll be finishing the UI Kit 'till the end of this week.
Regarding the first implementation of the css/html, we're going to have a slightly busier summer than initially thought, so it will be difficult for us to finish that by the 17th on our own. Later this week, we'll get back to you with the finished UI kit and a better idea on what we can contribute.

[ricardoduplos]

Hey @maxogden! Here are the UI Kits (Basic and Components), plus the previous templates (revised) in Illustrator format (AI):

https://dl.dropboxusercontent.com/u/240639/dat-ui-kit-v01.zip

As we said before, we're having a busier summer than initially thought, so it's hard for us to jump into the implementation right now.

We believe that the UI Kit and templates are a good starting point. If needed, we can discuss further implementation details with you. Feel free to reach out and have a chat with us.

[max-mapper]

@ricardomestre Hey Ricardo! Thanks a bunch for these. Is it okay if I put them in this github repo and start implementing the website html/css/js?

[ricardoduplos]

@maxogden Sure!

[NickColley]

@maxogden I would love to help out implementing this! I'm really into component design at the moment so all this is really exciting.

[max-mapper]

@ricardomestre @olafveerman i did a first pass at implementing the front page: http://datproject.github.io/website/ still need to work on responsiveness + modularization though

[ricardoduplos]

Hey @maxogden! Looks good! If we have time in the near future, we'll give you a hand. Also, congrats on the Wired article about Dat.