Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4

Hi!

On Thu, Apr 20, 2017 at 4:18 AM Dave Page <dpage@pgadmin.org> wrote:

Hi

On Tue, Apr 18, 2017 at 5:11 PM, Shirley Wang <swang@pivotal.io> wrote:

Hello Hackers,

We've started to work on creating a style guide for pgAdmin4. 

Our goals with the style guide are to:

- have a single source of truth for visual design and workflows

- make it easier when adding or updating a section to the app to maintain consistency

:-)

 

How we'll know we're successful:

- conversations about design are more high level, driven by user needs and pains

- decreasing (or at least not adding to) current css bloat due to templating and overwrites

Sounds good.

 

Process for creating a style guide

We're going to start from the smallest building blocks of the site and use that to define larger and larger components. Currently, we're taking inventory of current styles in the app, including colors, typography, buttons, dialogs etc. 

Given how the front end is currently structured, we were thinking that static documentation of styles would be a good MVP, at least until we determine what the best documentation for developers on the community would be. Attached is the inventory of styles as of now, including a Sketch file (a tool for creating design mockups, also where I've been keeping track of styles). You can also access files here on Google drive here: https://drive.google.com/drive/folders/0B7jMyxF3NH5lb2JxREUxclp1Unc?usp=sharing

Also sounds good.

 

Please feel free to edit the Sketch file- my only ask is new versions hare named accordingly. 

Is this the app you used? https://www.sketchapp.com/

Yes. Also, I recognize it's probably not the best tool, given that there's a 30 day free trial and then you need to purchase a license. I'm looking into other programs that are free.

 

 

Some initial thoughts on the inventory:

- Wow, that's a lot of colours. I didn't realise we had so many. I think we need to work that down to a set of a dozen or less primary colours.

Me neither! I'm not so concerned with the number of different colors, but with the number of similar shades of each color. 

I can distill those down and send another email shortly.

 

 

- I wouldn't worry about the button colour borders and gradients too much. Those are standard bootstrap colours, so we should document them in terms of bootstrap styles, not colour components.

Ok. But are they appropriate for this app?

- We should change the browser list font and standardise on Helvetica Neue.

Ok 

- Is Helvetica Neue the best font for us? Our previous designer wanted to use Droid Sans, which I wasn't so keen on, but is there a better option to standardise on?

By standardize, do you mean only Helvetica throughout the app? I like Helvetica because it's a very readable typeface, but I'm not sure it's appropriate as the only typeface to use throughout the app. 

The only other place I've noticed that uses a different typeface, ignoring query editor panel, is the data output panel (uses Verdana). I feel like in this case though, a distinction is useful since output data is different from body copy.

 

Oh, and an ironic side note: the one style that we have had for 20 years now is the formatting/capitalisation of the "pgAdmin" name. You might want to stop using pg_Admin :-p

Ha ok will do

Your other questions, copied and pasted here:

- Should icons have a dividing line between them? I think so.

I agree too. Makes it clear what the click area is. Or do you mean when there's a light blue shading and there should be a light blue line between icons?

- What determines the light blue shading of a row? I believe it should always be the one with focus (assuming there is one with focus)

Yes, the one that's in focus.