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