Styleguide and Language for the UI's

[daviddias]

@olizilla and @alanshaw brought up a ton of valuable points to the discussion, some of them were focused on the lack of Style Guide and Language.

@olizilla @alanshaw, mind sharing a recap here?

[lidel]

Some inspiration from Mozilla: Photon Design System

[olizilla]

Via @akrych

Some more examples of Guidlines Design Systems:
https://material.io/guidelines
http://ux.mailchimp.com/patterns/
https://developer.apple.com/ios/human-interface-guidelines/overview/themes/
http://www.audi.com/ci/en/guides/user-interface/responsive-ui.html
https://atlassian.design/
https://polaris.shopify.com/visuals/colors
http://codeforamerica.clearleft.com/

[olizilla]

• Create a ui-style-guide repo as a guide to the design language of ipfs apps.
• Support UI experimentation, but retain a coherent feel across apps by providing a reusable color palette, type-scale, font-family, and spacing, as drop-in, atomic, css rules.
• Provide brief explanations of how, why and where to use them.
• Document how to add new elements. Over time this project should expand to include reusable components and ui patterns as we create them.

[akrych]

@olizilla About the Design System Guidelines - Can we create together a list (a small one - first MVP) with what we need in first?

In my opinion it should be:

Logo(options and do/dont's)
Colors
Typography
Buttons
Forms
Errors and message
Iconography
Resources to download (logos, color schemes, set of icons)
When we have this list - I will design graphic elements/descriptions :)

[olizilla]

For sure!

My main focus on this is to make sure that that whatever the design guidelines are, that I make them easy for devs to implement, by capturing them in code and publishing it as a repo and website.

I made a start on that here: https://github.com/ipfs-shipyard/ipfs-ui-style-guide and I'd love to chat about it when you have time.

[olizilla]

Also! Everything in https://github.com/ipfs-shipyard/ipfs-ui-style-guide is TBC as I haven't checked it with you yet @akrych 😄

[lidel]

Hi all, be sure to check (first sketch of) IPFS Brand Book Guidelines at ipfs-inactive/ipfs-ui-style-guide#3 :)

[akrych]

Hello Guys,

I start working on IPFS Web GUI Kit and and I would like to show you how the work is going :)
The first thing to go: Colors, Buttons, Inputs, Selects, Dropdowns, Checkboxes, Radio buttons etc. The next will be:

• Typography,
• Icons(I made second set with filled shapes - when we finish I can make a font from them),
• Labels,
• Tabs,
• Progress bars,
• Tooltips,
• Pagination,
• Carousel,
• Notifications,
• Tables

You can also see it and CSS inspect on Zeplin: https://zpl.io/awyMrgj
Feel free to comment, if you want to change or add something :)

[lidel]

@akrych fantastic 👌

Small request: we probably want to extract/add info about scrollbar.
Right now it is a part of long select-list:

For example, @hacdias could use it in File Manager :)

[akrych]

@lidel

Small request: we probably want to extract/add info about scrollbar.

sure :) 👍

[hacdias]

Btw

I would like to be able to take the info about the border/shadow on hover/active and such 😄

[akrych]

@hacdias - Sure thing:) - all parts will have the dimensions and attributes described (btw. You can se almost everything is in Zeplin now - I guess that the "focus" one have missing shadow because I made it by the "glow" not "shadow" function in Photoshop:)

[hacdias]

Thanks!

[lidel]

Just a thought: we should consider using Github Pages for hosting things like UI Kit (after conversion to HTML page) directly from github repo. (It is possible to provide custom index.html)

[olizilla]

But IPFS tho!? Seriously though, I agree we should keep the process super simple.

…

On 21 Jan 2018 18:36, "Marcin Rataj" ***@***.***> wrote: Just a thought: we should consider using Github Pages <https://pages.github.com/> for hosting things like UI Kit directly from github repo. (It is possible to provide custom index.html <https://user-images.githubusercontent.com/157609/35197610-08178e00-fee2-11e7-8ac7-64300a2f79e0.png> ) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADl98sdVK65TuLHWvjIaUVFt7OEPJ_mks5tM4OqgaJpZM4RChRk> .

[daviddias]

@akrych that looks HAWT 🔥 👏🏽👏🏽

Just a thought: we should consider using Github Pages for hosting things like UI Kit (after conversion to HTML page) directly from github repo. (It is possible to provide custom index.html)

👍 for simplicity, 👎 for not dogfooding our stuff. Having a publish script on merge to master should not be complicated.

[alanshaw]

@akrych this is super cool! One issue I noticed - the selected radio - I was expecting a solid turquoise circle inside, I think the turquoise hoop could be misconstrued as a deselected.

[akrych]

@alanshaw Sure, we can change it:)

[akrych]

Next update :)
The next step is cut it for subpages and describe guidlines for them. I will also add subpage about use a logo and resource to download (logos, icons etc.)

[akrych]

Link to better quality: https://c1.staticflickr.com/5/4701/28390704879_54074deeec_o.png

[olizilla]

Very nice! I made a start on css-ing the previous version over here:
https://ipfs.io/ipfs/QmW7Y6314aYnwKPJCtLv747fZ9HuixjVjkJxH6asChL3Hs/

and extracted out a minimal re-usable set of css utility classes over here:
https://github.com/ipfs-shipyard/ipfs-css

[hacdias]

Hey @akrych! I really like what you've been doing 😄 I'll probably start to implement it on IPFS Desktop soon!

@malikpiara also liked it very much! He also has some suggestions: maybe use the grey color on the 'Cancel' buttons and a green color on 'Create'.

Btw, do you have it on Zeplin?

[lidel]

Issue extracted from ipfs/ipfs-companion#769 (comment):

The default button style has low contrast, making white text in the first column hard to read:

(we switched away from that style in Web UI and Companion, switching to version from the second or third column)

[jessicaschilling]

Closing in favor of #29 (and mentioning this issue there for the sake of not losing these design sketches)