Re: [Design update] Style guide for pgAdmin4

Hi

On Thu, Apr 20, 2017 at 7:39 PM, Shirley Wang <swang(at)pivotal(dot)io> wrote:

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

FYI, we use LucidCharts internally. It's a pretty good Google Apps
integrated version of Microsoft Visio.

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

Personally I think they're fine.

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

Maybe, maybe not - what I do believe though is that the treeview doesn't
warrant an exception.

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

That's a good point.

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

With or without the shading, I think the light vertical line between those
buttons in the grid adds useful definition. They don't have a border like
the other various buttons, so it helps frame them (and I don't think they
should have a true border, as that would use too much space).

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

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

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