Re: [Design update] Style guide for pgAdmin4

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: Inline image 1]

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.

>
>
>
> *Update on tools*
> I played around with Lucidcharts and it seems like the only units
> available for drawing out shapes are inches or centimeters, neither of
> which is particularly useful for specifying sizes of buttons, menus etc.
>
> I found Figma, which is a fairly feature robust web app, similar to Sketch
> and designed for collaboration (it's also free!). Other pros:
> - saved asset library for projects (perfect for mocking up future pgAdmin
> screens w/o the need to recreate assets)
> - version control
> - link for public access
> - generates some CSS from the image
>
> Here's the link to the project. https://www.figma.com/file/
> UjGekp34w6iBizjlGu2D4ccp/4.21pgAdmin-styles-Page-1
>
> Let me know what you think.
>

I'll have a play with it. Initial thoughts (after literally 5 minutes) are
that it seems like it could be very useful. I particularly like the asset
library.

Thanks!

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

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