Re: [Design update] Style guide for pgAdmin4

As a person with red-green color blindness, this would be a big help.

On Wed, Apr 26, 2017 at 11:45 AM, Shirley Wang <swang(at)pivotal(dot)io> wrote:

>
>
> On Wed, Apr 26, 2017 at 4:14 AM Dave Page <dpage(at)pgadmin(dot)org> wrote:
>
>> Hi!
>>
>> On Tue, Apr 25, 2017 at 9:33 PM, Shirley Wang <swang(at)pivotal(dot)io> wrote:
>>
>>> Hello!
>>>
>>> *Update on alerts*
>>> Here are mockups of error and update alert styles, as modeled by
>>> bootstrap.
>>>
>>> Success messages appear
>>> - after running a query
>>> - adding a database (database connected)
>>>
>>> Error messages appear
>>> - after running query
>>> - missing info in dialogs
>>>
>>> Let me know if I'm missing any areas that have different styling.
>>>
>>>
>>> *Running a query*
>>> *[image: success-query.png]*
>>> [image: error-query.png]
>>> I've added rounded corners - it doesn't seem like there are any other
>>> areas where sharp corners are used so I think these should be round.
>>>
>>
>> Nice!
>>
>>
>>>
>>> *Dialog messages*
>>>
>>> *[image: database-error.png]*
>>>
>>> *[image: connectserver-error.png]*
>>>
>>> A note about 'connect to server' message. Currently the error appears
>>> above where you enter a password. I think all messages should live at the
>>> bottom of the dialog, above the buttons.
>>>
>>
>> Agreed. I like the change - though I prefer the version in Figma (below):
>>
>> [image: Screen Shot 2017-04-26 at 09.10.37.png]
>>
>> I think it looks more attractive, and is more obviously a "transient
>> element" (for want of a better term) - i.e. something that will go away
>> again. I think we also need to style the error highlighting on the actual
>> field to use the same shades of red.
>>
>
> Cool. Agree with those points. Let's do that.
>
> Another thing, I was checking if the success and error messages are be
> differentiable for people who have Deuteranopia (red-green color
> blindness), and it's pretty difficult.
>
> Example:
> [image: Screen Shot 2017-04-26 at 10.53.50 AM.png]
>
> I think the addition of icons and some copy would help:
> [image: Screen Shot 2017-04-26 at 11.28.41 AM.png][image: Screen Shot
> 2017-04-26 at 11.28.51 AM.png][image: runquery-success.png]
> [image: Screen Shot 2017-04-26 at 11.42.30 AM.png]
> [image: run query- fail.png]
> [image: Screen Shot 2017-04-26 at 11.42.41 AM.png]
> [image: Screen Shot 2017-04-26 at 11.39.05 AM.png]
>
>