Re: [Design update] Style guide for pgAdmin4

Hi!

On Thu, Apr 20, 2017 at 4:18 AM Dave Page <dpage(at)pgadmin(dot)org> wrote:

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