Hi On Thu, Apr 20, 2017 at 7:39 PM, Shirley Wang <sw...@pivotal.io> wrote:
> Hi! > > On Thu, Apr 20, 2017 at 4:18 AM Dave Page <dp...@pgadmin.org> wrote: > >> Hi >> >> On Tue, Apr 18, 2017 at 5:11 PM, Shirley Wang <sw...@pivotal.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