Quantcast

[Design update] Style guide for pgAdmin4

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
28 messages Options
12
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

[Design update] Style guide for pgAdmin4

Shirley Wang
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

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

Please feel free to edit the Sketch file- my only ask is new versions hare named accordingly. 

If you have worked on front end features in pgAdmin before, we'd like to chat with you about your process and what it was like to implement styles. Let us know some times for a chat!

Thanks,
Shirley



--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

pg_Admin styles.pdf (115K) Download Attachment
pg_Admin styles.sketch (390K) Download Attachment
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Shirley Wang
Hi,

As I was going through the app, I noticed some inconsistencies with tables in popups, namely the height of each row and width between icons. 

Unclear as which should be considered the right one. 
current_styles.png

I propose documenting this:

- Even spacing between icons
- height of each row is always at 28px, regardless if there's a drop down menu or not.
dropdown-icons_spaced.png

text_input-icons_spaced.png

Is there anything I'm missing?

Shirley


On Tue, Apr 18, 2017 at 12:11 PM Shirley Wang <[hidden email]> 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

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

Please feel free to edit the Sketch file- my only ask is new versions hare named accordingly. 

If you have worked on front end features in pgAdmin before, we'd like to chat with you about your process and what it was like to implement styles. Let us know some times for a chat!

Thanks,
Shirley


current_Styles.png (161K) Download Attachment
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Dave Page-7
Hi,

I agree with both the spacing, and the height. Other questions:

- Should icons have a dividing line between them? I think so.

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

On Wed, Apr 19, 2017 at 9:49 PM, Shirley Wang <[hidden email]> wrote:
Hi,

As I was going through the app, I noticed some inconsistencies with tables in popups, namely the height of each row and width between icons. 

Unclear as which should be considered the right one. 
current_styles.png

I propose documenting this:

- Even spacing between icons
- height of each row is always at 28px, regardless if there's a drop down menu or not.
dropdown-icons_spaced.png

text_input-icons_spaced.png

Is there anything I'm missing?

Shirley


On Tue, Apr 18, 2017 at 12:11 PM Shirley Wang <[hidden email]> 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

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

Please feel free to edit the Sketch file- my only ask is new versions hare named accordingly. 

If you have worked on front end features in pgAdmin before, we'd like to chat with you about your process and what it was like to implement styles. Let us know some times for a chat!

Thanks,
Shirley




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

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Dave Page-7
In reply to this post by Shirley Wang
Hi

On Tue, Apr 18, 2017 at 5:11 PM, Shirley Wang <[hidden email]> 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/

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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Shirley Wang
Hi!

On Thu, Apr 20, 2017 at 4:18 AM Dave Page <[hidden email]> wrote:
Hi

On Tue, Apr 18, 2017 at 5:11 PM, Shirley Wang <[hidden email]> 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.

 
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Dave Page-7
Hi

On Thu, Apr 20, 2017 at 7:39 PM, Shirley Wang <[hidden email]> wrote:
Hi!

On Thu, Apr 20, 2017 at 4:18 AM Dave Page <[hidden email]> wrote:
Hi

On Tue, Apr 18, 2017 at 5:11 PM, Shirley Wang <[hidden email]> 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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Shirley Wang
Hello


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.

Ah ok. Do you have any files related to pgAdmin you can share (or put into Google drive folder)?
 
 
 
 
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.

They seem ok for buttons (cancel, save, reset, toolbar). I found the gradient is also on alerts when you click Dependencies, Dependents while selecting Server in the browser. 

I think those alerts should not have a gradient to match with the other types of alerts (notifiers and error messages). Since these specific alerts are not success / fail messages, the blue works because it's a neutral color.

highlight_selection color.png
Here is what the updated colors would look like in the app. 

Focus on text field in nodes
Screen Shot 2017-04-21 at 12.13.53 PM.png

Browser
Screen Shot 2017-04-21 at 12.14.55 PM.png

Highlight in dropdown menu
Screen Shot 2017-04-21 at 12.19.51 PM.png

Alerts Screen Shot 2017-04-21 at 11.29.11 AM.png
If this is ok, we will add these changes to our backlog as style changes.


--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

highlight_selection color.png (108K) Download Attachment
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Shirley Wang
One more thing: there are two very close greens between notifiers and toggle buttons in preferences menus

notifications_switches.png

I recommend documenting the green for switches (#5cb85c), which would change notifiers from this:

Notifiers.png

to this:
Screen Shot 2017-04-20 at 5.28.55 PM.png
On Fri, Apr 21, 2017 at 2:27 PM Shirley Wang <[hidden email]> wrote:
Hello


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.

Ah ok. Do you have any files related to pgAdmin you can share (or put into Google drive folder)?
 
 
 
 
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.

They seem ok for buttons (cancel, save, reset, toolbar). I found the gradient is also on alerts when you click Dependencies, Dependents while selecting Server in the browser. 

I think those alerts should not have a gradient to match with the other types of alerts (notifiers and error messages). Since these specific alerts are not success / fail messages, the blue works because it's a neutral color.

highlight_selection color.png
Here is what the updated colors would look like in the app. 

Focus on text field in nodes
Screen Shot 2017-04-21 at 12.13.53 PM.png

Browser
Screen Shot 2017-04-21 at 12.14.55 PM.png

Highlight in dropdown menu
Screen Shot 2017-04-21 at 12.19.51 PM.png

Alerts Screen Shot 2017-04-21 at 11.29.11 AM.png
If this is ok, we will add these changes to our backlog as style changes.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Dave Page-7
In reply to this post by Shirley Wang
Hi

On Fri, Apr 21, 2017 at 7:27 PM, Shirley Wang <[hidden email]> wrote:
Hello


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.

Ah ok. Do you have any files related to pgAdmin you can share (or put into Google drive folder)?

Nothing of any relevance now.
 
 
 
 
 
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.

They seem ok for buttons (cancel, save, reset, toolbar). I found the gradient is also on alerts when you click Dependencies, Dependents while selecting Server in the browser. 

I think those alerts should not have a gradient to match with the other types of alerts (notifiers and error messages). Since these specific alerts are not success / fail messages, the blue works because it's a neutral color.

They're also bootstrap standards. No problem changing them as far as I'm concerned (though - the entire set should be overridden, in case people use them in the future): http://getbootstrap.com/components/#alerts.
 

highlight_selection color.png
Here is what the updated colors would look like in the app. 

Focus on text field in nodes
Screen Shot 2017-04-21 at 12.13.53 PM.png

Browser
Screen Shot 2017-04-21 at 12.14.55 PM.png

Highlight in dropdown menu
Screen Shot 2017-04-21 at 12.19.51 PM.png

Alerts Screen Shot 2017-04-21 at 11.29.11 AM.png
If this is ok, we will add these changes to our backlog as style changes.

Sure.

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

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Dave Page-7
In reply to this post by Shirley Wang


On Fri, Apr 21, 2017 at 7:36 PM, Shirley Wang <[hidden email]> wrote:
One more thing: there are two very close greens between notifiers and toggle buttons in preferences menus

notifications_switches.png

I recommend documenting the green for switches (#5cb85c), which would change notifiers from this:

Notifiers.png

to this:
Screen Shot 2017-04-20 at 5.28.55 PM.png


Wouldn't it be better if it matched the (possibly-recoloured-by-us) Bootstrap alert-success class? I agree that it's silly having two closely matched colours, but I think it makes more sense to have the alerts and notifiers match, than to match the switches.

 
On Fri, Apr 21, 2017 at 2:27 PM Shirley Wang <[hidden email]> wrote:
Hello


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.

Ah ok. Do you have any files related to pgAdmin you can share (or put into Google drive folder)?
 
 
 
 
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.

They seem ok for buttons (cancel, save, reset, toolbar). I found the gradient is also on alerts when you click Dependencies, Dependents while selecting Server in the browser. 

I think those alerts should not have a gradient to match with the other types of alerts (notifiers and error messages). Since these specific alerts are not success / fail messages, the blue works because it's a neutral color.

highlight_selection color.png
Here is what the updated colors would look like in the app. 

Focus on text field in nodes
Screen Shot 2017-04-21 at 12.13.53 PM.png

Browser
Screen Shot 2017-04-21 at 12.14.55 PM.png

Highlight in dropdown menu
Screen Shot 2017-04-21 at 12.19.51 PM.png

Alerts Screen Shot 2017-04-21 at 11.29.11 AM.png
If this is ok, we will add these changes to our backlog as style changes.



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

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Shirley Wang
In reply to this post by Dave Page-7


On Mon, Apr 24, 2017 at 4:58 AM Dave Page <[hidden email]> wrote:
Hi

On Fri, Apr 21, 2017 at 7:27 PM, Shirley Wang <[hidden email]> wrote:
Hello


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.

Ah ok. Do you have any files related to pgAdmin you can share (or put into Google drive folder)?

Nothing of any relevance now.
 
 
 
 
 
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.

They seem ok for buttons (cancel, save, reset, toolbar). I found the gradient is also on alerts when you click Dependencies, Dependents while selecting Server in the browser. 

I think those alerts should not have a gradient to match with the other types of alerts (notifiers and error messages). Since these specific alerts are not success / fail messages, the blue works because it's a neutral color.

They're also bootstrap standards. No problem changing them as far as I'm concerned (though - the entire set should be overridden, in case people use them in the future): http://getbootstrap.com/components/#alerts.

Will do.
 
 

highlight_selection color.png
Here is what the updated colors would look like in the app. 

Focus on text field in nodes
Screen Shot 2017-04-21 at 12.13.53 PM.png

Browser
Screen Shot 2017-04-21 at 12.14.55 PM.png

Highlight in dropdown menu
Screen Shot 2017-04-21 at 12.19.51 PM.png

Alerts Screen Shot 2017-04-21 at 11.29.11 AM.png
If this is ok, we will add these changes to our backlog as style changes.

Sure.
On Fri, Apr 21, 2017 at 7:36 PM, Shirley Wang <[hidden email]> wrote:
One more thing: there are two very close greens between notifiers and toggle buttons in preferences menus
notifications_switches.png


I recommend documenting the green for switches (#5cb85c), which would change notifiers from this:

Notifiers.png

to this:
Screen Shot 2017-04-20 at 5.28.55 PM.png


Wouldn't it be better if it matched the (possibly-recoloured-by-us) Bootstrap alert-success class? I agree that it's silly having two closely matched colours, but I think it makes more sense to have the alerts and notifiers match, than to match the switches. 


Do you mean this?
Screen Shot 2017-04-25 at 9.46.03 AM.png

If so, ok! If there's no good reason to keep the same colors, we should switch. 
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Dave Page-7


On Tue, Apr 25, 2017 at 2:47 PM, Shirley Wang <[hidden email]> wrote:


I recommend documenting the green for switches (#5cb85c), which would change notifiers from this:

Notifiers.png

to this:
Screen Shot 2017-04-20 at 5.28.55 PM.png


Wouldn't it be better if it matched the (possibly-recoloured-by-us) Bootstrap alert-success class? I agree that it's silly having two closely matched colours, but I think it makes more sense to have the alerts and notifiers match, than to match the switches. 


Do you mean this?
Screen Shot 2017-04-25 at 9.46.03 AM.png

If so, ok! If there's no good reason to keep the same colors, we should switch. 

Yes, that one - and the related ones, where there are meaningful matches. FYI, here are the docs for both:

http://alertifyjs.com/notifier.html

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

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Shirley Wang
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
success-query.png
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. 

Dialog messages
database-error.png
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.
(below is current error message)
Screen Shot 2017-04-25 at 10.30.57 AM.png


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


Let me know what you think.

Shirley

Notifiers.png (16K) Download Attachment
Screen Shot 2017-04-20 at 5.28.55 PM.png (14K) Download Attachment
Screen Shot 2017-04-25 at 9.46.03 AM.png (16K) Download Attachment
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Dave Page-7
Hi!

On Tue, Apr 25, 2017 at 9:33 PM, Shirley Wang <[hidden email]> 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
success-query.png
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
database-error.png
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):

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


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
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Shirley Wang


On Wed, Apr 26, 2017 at 4:14 AM Dave Page <[hidden email]> wrote:
Hi!

On Tue, Apr 25, 2017 at 9:33 PM, Shirley Wang <[hidden email]> 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
success-query.png
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
database-error.png
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):

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:
Screen Shot 2017-04-26 at 10.53.50 AM.png

I think the addition of icons and some copy would help:
Screen Shot 2017-04-26 at 11.28.41 AM.pngScreen Shot 2017-04-26 at 11.28.51 AM.pngrunquery-success.png
Screen Shot 2017-04-26 at 11.42.30 AM.png
run query- fail.png
Screen Shot 2017-04-26 at 11.42.41 AM.png
Screen Shot 2017-04-26 at 11.39.05 AM.png

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

adebarros
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 <[hidden email]> wrote:


On Wed, Apr 26, 2017 at 4:14 AM Dave Page <[hidden email]> wrote:
Hi!

On Tue, Apr 25, 2017 at 9:33 PM, Shirley Wang <[hidden email]> 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
success-query.png
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
database-error.png
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):

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:
Screen Shot 2017-04-26 at 10.53.50 AM.png

I think the addition of icons and some copy would help:
Screen Shot 2017-04-26 at 11.28.41 AM.pngScreen Shot 2017-04-26 at 11.28.51 AM.pngrunquery-success.png
Screen Shot 2017-04-26 at 11.42.30 AM.png
run query- fail.png
Screen Shot 2017-04-26 at 11.42.41 AM.png
Screen Shot 2017-04-26 at 11.39.05 AM.png


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Dave Page-7
In reply to this post by Shirley Wang


On Wed, Apr 26, 2017 at 4:45 PM, Shirley Wang <[hidden email]> wrote:


I think the addition of icons and some copy would help:
Screen Shot 2017-04-26 at 11.28.41 AM.png

Agreed.

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

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Ashesh Vashi

On Wed, Apr 26, 2017 at 9:56 PM, Dave Page <[hidden email]> wrote:


On Wed, Apr 26, 2017 at 4:45 PM, Shirley Wang <[hidden email]> wrote:


I think the addition of icons and some copy would help:
Screen Shot 2017-04-26 at 11.28.41 AM.png

Agreed.
+1

--

Thanks & Regards,

Ashesh Vashi
EnterpriseDB INDIA: Enterprise PostgreSQL Company



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

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

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Shirley Wang
Hello!

Update on colors
As of now, there are several greys are very similar, used across multiple areas of pgAdmin with no overlaps on color.
greys-in-pgAdmin.png
Here are the greys organized by scale, with the narrowed down greys underneath:
v1- palette.png

The palette of 6 greys is flexible enough to be used across all the areas within pgAdmin, and easier to map consistency.v1.png
Here's what it looks like with the 6 greys

Dropdown menus
Change from having white hover to dark grey, keeps text color the same
Screen Shot 2017-05-02 at 11.35.54 AM.png

Query tool
greys-v2 (1).png
I think some interesting things with color contrast are introduced once we look at the uneditable query editor as accessed through 'View all Data'. 
viewalldata-greys (2).png
We can address this either by changing the greys in the results table, or changing the grey in the query editor. As of now, I think changing the query editor grey might work better to make sure that when columns are selected in the 'Data Output' panel, they stand out with the blue.

If we lighten the editor table and fade out the text in the editor, it would look like this:
viewalldata-lightgrey-opacity.png
Thoughts?
 
On Wed, Apr 26, 2017 at 11:24 PM Ashesh Vashi <[hidden email]> wrote:
On Wed, Apr 26, 2017 at 9:56 PM, Dave Page <[hidden email]> wrote:


On Wed, Apr 26, 2017 at 4:45 PM, Shirley Wang <[hidden email]> wrote:


I think the addition of icons and some copy would help:
Screen Shot 2017-04-26 at 11.28.41 AM.png

Agreed.
+1

--

Thanks & Regards,

Ashesh Vashi
EnterpriseDB INDIA: Enterprise PostgreSQL Company



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

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


--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

greys-in-pgAdmin.png (90K) Download Attachment
v1- palette.png (16K) Download Attachment
v1.png (98K) Download Attachment
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Design update] Style guide for pgAdmin4

Dave Page-7
Hi

On Tue, May 2, 2017 at 8:47 PM, Shirley Wang <[hidden email]> wrote:
Hello!

Update on colors
As of now, there are several greys are very similar, used across multiple areas of pgAdmin with no overlaps on color.
greys-in-pgAdmin.png
Here are the greys organized by scale, with the narrowed down greys underneath:
v1- palette.png

The palette of 6 greys is flexible enough to be used across all the areas within pgAdmin, and easier to map consistency.

OK.
 
v1.png
Here's what it looks like with the 6 greys

Dropdown menus
Change from having white hover to dark grey, keeps text color the same
Screen Shot 2017-05-02 at 11.35.54 AM.png

That looks fine to me.
 

Query tool
greys-v2 (1).png

I *really* don't like the dark gray on the grid header - it's too imposing and grabs the eye away from the data. How would it look if we used the lighter gray that is seen on the row headers (the first column)? Looking at Excel, it uses the same colour for both the row and the column headers, though it's more like the bluish colour we're using for alternate rows (not that we should use that - see below).

 
I think some interesting things with color contrast are introduced once we look at the uneditable query editor as accessed through 'View all Data'. 
viewalldata-greys (2).png
I'm not overly convinced about the gray used for the codemirror gutter. It looks a little blue. Regarding the inactive edit area, I don't think that looks wrong (unlike one of the earlier drafts where the info bar was the same colour). However, I'm not against changing it.
 
We can address this either by changing the greys in the results table, or changing the grey in the query editor. As of now, I think changing the query editor grey might work better to make sure that when columns are selected in the 'Data Output' panel, they stand out with the blue.

If we lighten the editor table and fade out the text in the editor, it would look like this:
viewalldata-lightgrey-opacity.png

I could live with that (assuming the loss of focus/definition is an artefact of the mockup).

So to summarise:

- I'm happy to see the number of grays reduced as proposed.
- I don't like the dark gray column headers.
- I think the column and row headers should be the same colour.
- I think we should review the bluish-gray used for the codemirror gutter (though, it looks fine for the alternate rows)
- We should use a light-gray for the disabled codemirror, with slightly faded text.

What do you think?

Thanks!
 
Thoughts?
 
On Wed, Apr 26, 2017 at 11:24 PM Ashesh Vashi <[hidden email]> wrote:
On Wed, Apr 26, 2017 at 9:56 PM, Dave Page <[hidden email]> wrote:


On Wed, Apr 26, 2017 at 4:45 PM, Shirley Wang <[hidden email]> wrote:


I think the addition of icons and some copy would help:
Screen Shot 2017-04-26 at 11.28.41 AM.png

Agreed.
+1

--

Thanks & Regards,

Ashesh Vashi
EnterpriseDB INDIA: Enterprise PostgreSQL Company



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

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



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

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
12
Previous Thread Next Thread
Loading...