Re: [Design update] Style guide for pgAdmin4

Hi

On Tue, Apr 18, 2017 at 5:11 PM, Shirley Wang <swang(at)pivotal(dot)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/0B7jMyxF3NH5lb2
> JxREUxclp1Unc?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/

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.

- 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.

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

- 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?

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

--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company