Design Guidelines (Spacing, Typography, Function)

[jesicarson]

Jesi to provide detailed specifications for spacing in forms, static pages, reader view pages.

Ref: https://github.com/participedia/usersnaps/issues/184 https://github.com/participedia/usersnaps/issues/134

[jesicarson]

Latest spacing and type specs for FORMS below (applies to all content types). .ai working file.

Changes from xyz:

• add authorship info #860 #781
• spacing standardization
• typography standardization
• add floating publish icon
• add required field asterisk #810

[jesicarson]

Latest spacing and type specs for READER PAGES below (applies to all content types). .ai working file.

Changes from xyz:

• standardized spacing, 30px from top nav, etc.
• Sidebar header, title type and narrative header size match (H2-28px)
• Grey bookmark and social icons (size match to homepage and footer) #822 , placement specified
• Authorship and data sidebar text match (base, 16px)
• data sidebar second line indent 15px #817
• Narrative type size 19.2 = base + (need to specify this in site type hierarchy)
• size of floating edit icon 60x60px, anchor placement 15px to the right of centre column, 60px above bottom of screen

[dethe]

For scaling to different sizes, we will set a minimum size for columns and reduce the number of columns as the window gets smaller. Columns themselves (with images and text) will have a fixed width and spacing between columns is also fixed. The row of columns will be centred horizontally and the amount of space on the left and right may change with screen size and the number of columns shown. When we are in list view and shrink past (???), switch to card view. List layout will also be fixed max size and be centred. Basically all pages will have a max width and be centred.

[jesicarson]

Material Design guidelines for breakpoints: https://material.io/design/layout/responsive-layout-grid.html#breakpoints and grid behaviour (we decided on fixed): https://material.io/design/layout/responsive-layout-grid.html#grid-behavior

[jesicarson]

@dethe If building homepage during the framework overhaul you mentioned in today's meeting, pls refer to this design for new bookmark design and colour: https://github.com/participedia/frontend/issues/822. Will post a pink markup version here too with type specs soon. Note amber wants smaller text for the "submitted by" data shown on homepage search results than currently on xyz. Speaking of which, instead of "base" we should use "medium" for text, whereas the narrative uses "large" and form placeholder and homepage results submitted by text would be "small". We can review this on Friday and I'll update the above specs to reflect the following:

Updated Dec 3, 2018 (added H4B - Use BOLD for logo only):

[scottofletcher]

@jesicarson did Amber have anything to say on the narrative headings? Using "small" will definitely make them 'pop' more but I have a hard time picking them out sometimes. That reminds me: are we ever going to implement the sidebar table of content we floated a long, looong time ago?

[jesicarson]

@scottofletcher Narrative headings ("Reader Narrative Header" tex shown above) will use H2, making them larger than what is currently in use on xyz (H3).

Don't remember what you mean by sidebar table of contents.

[scottofletcher]

RE H2: perfect!

RE table of contents: we had talked (like two years ago) about putting in a table of contents either on the side of the text (left on .net, right on xyz) or at the top of the page with little "^top" icons beside each heading to return to the TOC

[jesicarson]

right. sort of recall that. tricky because we didn't separate out the headers into separate fields - users can edit narrative headings to their hearts content, so not sure if this would work with a TOC unless that was also customizable. Gets a bit complicated, but can put it on the things to consider pile.

[scottofletcher]

@jesicarson this is for sure a wishlist item! toss it onto the consider pile and forget I brought it up (until I bring it up again, of course!)

[jesicarson]

@dethe Updated homepage design guidelines.

New things not currently on xyz:

• Submitted by text is now SMALL
• Results texts shows/says "results" not "pages"
• Pagination arrows are 2px, grey and include first, previous, next, last buttons (<< < > >>)
• Note spacing specs between bottom pagination and footer (too close on xyz currently)
• Sort by drop down text is SMALL, and the button arrow matches the pagination arrows
• Bookmark icons are now grey and smaller - 16px x 20px, open line weight 2px

[jesicarson]

Profile page design guidelines.

New things not currently reflected on xyz:

• spacing standards
• type standards
• alignment of edit prof button (left of 3rd column of results)
• add sort by
• pagination design update
• auto generated profile pic with first letters of name (TBC)
• admins see edit profile on all pages and can edit anyone's profile
• "Location" and "Member since" treated as user data headers, populated with user info
• "Contributions" (not "Authored") and "Bookmarks" (not "Bookmarked)

[jesicarson]

Edit profile design guidelines:

Changes from xyz:

• ability to change avatar (*pop-up editor design needed)
• "member since" data displayed (show date they signed up)
• spacing and type standardized (match to case/method/org FORM)
• new sections "Public Profile" and "Private Settings" **Do we want this? Or all in one list, no headings?
• Ability to add and verify new email addresses, (and then remove them - *design needed)
• Ability to change password
• Ability to set language

[dethe]

@jesicarson This is all awesome, but I just realized that what I don't see here are guidelines for mobile. A lot of it will scale just fine and I think most of our text sizes will work on mobile (we can tweak once we see it), but guidelines for sidebars going into the hamburger menu, minimum widths for things, and any other changes you would like to see on mobile devices would be helpful.

[jesicarson]

@dethe Ok, I will jump to mobile. But the way things are currently on mobile are pretty close. ie, on reader pages, the sidebar data goes into accordion menus below the images (not the hamburger), and this is already implemented on mobile. Probably the only text that will need to resize for mobile will be on the reader, however, since we use 'large' type on desktop for the narrative - I will check if this is already implemented as well. Not sure what scaling if any we currently have implemented on mobile for forms, but it seems to work fine as well.

Also - I had posted this above, thinking we could work with Material Design guidelines for breakpoints, does that make sense?:

• Material Design guidelines for breakpoints: https://material.io/design/layout/responsive-layout-grid.html#breakpoints
• and grid behaviour (we decided on fixed): https://material.io/design/layout/responsive-layout-grid.html#grid-behavior

I may need some guidance from you about how to create scaling / breakpoint guidelines specific to ppedia. But I will take a stab at it and get your feedback at our next working sesh.

Cheers!

[jesicarson]

Ok so @dethe will simplify the breakpoints. We discussed that the data will collapse into a nested drop down menu when resizing downward. Like it does currently on mobile (but I'll still provide mobile spacing specs for the record soon):

[jesicarson]

Here's the hamburger menu with links to admin access pages, which will only show on the hamburger menu of admins with these accesses when they are logged in.

@ascott here are updates to hamburger to include newsletter sign up. Thx!

UPDATED FEB 25 2019

Changes from xyz:

• appears below top nav bar (is "home" needed?), and stops at footer
• includes quick sub and login/profile buttons (as per last design, but not critical if it's a pain) - includes newsletter block on desktop, button on mobile (subscribe/sign up buttons link to: https://mailchi.mp/participedia/subscribe)

Desktop:

Mobile:

[jesicarson]

spacing and type for STATIC PAGES. Will apply to about, research, teaching, terms of use, etc.

[jesicarson]

Quick Sub Select Type page (updated Nov 5, 2018: removed title, placeholder text below buttons, tightened up spacing)

TLRC entries are publicly accessible but editing is restricted. See #899

[jesicarson]

Hi @ascott, Sorry there are no spacing specs on this, but to give you an idea of the updates coming to the homepage. Mainly, the "Participedia is... " text. I will work on how this looks on mobile and upload here shortly. This mockup has more tabs (teaching resources, users, news, etc) which can be added when those backend models are built and ready to roll out.

Update Dec 3 - Added spacing specs:

[jesicarson]

Mobile footer specs. @ascott is this doable? Thanks!

[ascott]

@jesicarson thanks, i think this should be doable. i'll update the footer PR to reflect these changes.

[jesicarson]

Vector UI kit for buttons, icons, colours, line weights

@ascott this page can be found in this .ai file.

[scottofletcher]

@jesicarson not totally sold on the newsletter signup in the desktop view of the hamburger. I think the mobile version would work for desktop too (otherwise, I see "Participedia Today" and immediately check out)

[jesicarson]

yes i was second guessing this myself actually. ill run it by amber if i can tomorrow

[ascott]

i'm not sold on it either.. i think your landing page does a good job of giving more information about the newsletter so it feels like we don't need to include that info here as well.

[jesicarson]

@ascott lets just do the button, thanks for the feedback!

[ascott]

@jesicarson ok sounds good

[jesicarson]

@ascott Mockup for news page (showing admin options). Clone of reader pages, except no data, no edit button, no "most recent changes by"