Style Tile for Library

[Snugug]

Determine style tile for design library

[britanyponvelle]

• [x] Get existing style tile work from Jeri
• [x] Review existing content model
• [x] Use existing content model to Determine necessary elements for style tile
• [x] Explore other style tile examples
• [x] Test a color palette

[britanyponvelle]

@Snugug can you label this "visual"?

[britanyponvelle]

See progress on the style tile here: http://pages.design.ibm.com/jeribowers/wdl-style-tile/master/index.htm

[britanyponvelle]

Here is a overview of the elements I think we'll need in the style tile:

• [x] Tag
• [x] in-line code snippet
• [x] block code snippet
• [x] link
• [x] call-out box
• [x] headings
• [x] small meta text
• [x] body text
• [x] strong text
• [x] emphasized text
• [x] unordered list
• [x] Primary button
• [x] Secondary button

I've taken these from our existing WDL site, examples from Ryan's motion guidelines, and from the conent modeling Google Doc. If you find I am missing an element we should include, please let me know.

[britanyponvelle]

And here is a closer look at sections:

Headings & Body Text

Links, Bullets, code snippets, block quote

Navigation

Tags and Buttons

Call-out Box

[Snugug]

Have we looked at this for accessibility? For instance, the link color is only accessible for text above 18pt font or 14pt if bold.

I'm also a little unsure of the font sizes that are provided. .33em is roughly 6px font size, where as 5.610em is roughly 90px. The pt sizes are also incorrect; 12pt == 16px == 1em == 100%. Can you please provide updated font sizes to reflect font sizing on the web

We already have button styles in place; are these meant to change those button styles, or are we to update our button and form styling to match this style tile? Ideally our design library would use our pattern library to build itself.

Finally, are the colors presented representative of our "light" color palette for the pattern library? If so, we should codify that.

[Snugug]

Another thought; the indentation for lists looks to be very large; thoughts on making it either in-line with the flow of the text coming from it (so the left edge of the bullet/number lines up with the left edge of a paragraph's text) or hanging the bullets?

[joshkimmell]

I'm not a fan of hanging bullets. The point of a list is to differentiate itself from the body of the content. I agree with making the list element (bullet or number) in-line with the rest of the body.

[britanyponvelle]

@Snugug sorry about that, I mistyped "pt". I've updated it now. Does that look right? Agreed on hanging bullets. Doing that now.

[Snugug]

The sizes look much better now.

Do the colors come from the IBM Design colors or from our workshop or both (or neither)?

[britanyponvelle]

@Snugug these are IBM design colors. @bobbinrobyn is working on matching the colors from the color workshop to IBM Design colors, so as she works on that I can test those.

[Snugug]

Awesome, thanks!

Can you include what the colors are?

[britanyponvelle]

@Snugug Yes, I can definitely do that! I will work on including those today. Also, I was not meaning to replace the existing button styles. How do I find out what the existing style for those are? I wanted to include them on the style tile for color testing.

[Snugug]

Partner with @una so she can show you what we have already.

[Snugug]

@britanyponvelle @bobbinrobyn For lists, do we want text for the 2nd line of a list to wrap under the bullet or be flush with the start of the line of text?

[Snugug]

And for ordered lists, do we want numbers, numbers with leading zeros, roman numerals, alphas? What style

[britanyponvelle]

@Snugug I think text for bullets should be flush at the start of the next line of text. It's less distracting and easier to make out individual points.

For ordered lists, I prefer numbers without zeros in case there are any long lists. Roman numerals aren't as common, and leading with zero doesn't really add anything beneficial. Thoughts?

[britanyponvelle]

@Snugug @joshkimmell For Beta 1, what kind of deliverable did you have in mind specifically? Will a PDF of the tested elements work for Beta 1 (like I've been uploading here), or did you have something else in mind?

[britanyponvelle]

Updated: lists, unordered lists, Electricity color palette (using IBM Design colors)

[Snugug]

Liking how this is coming together. I'm going to update the the list PR with the new direction.

The link color here is much better than it previously was and now passes AA accessibility for any size text. You can check accessibility here. The blockquote text color only passes AA accessibility standards for text size 18pt (not px) or higher, or 14pt bold text (roughly 24px large or 19px large and bold)

[Snugug]

I'm also curious: are you building these style tiles to test different color palettes, or are we narrowing down which palette we're going to use for the actual site? If it's the later, that's related to #94 and we're going to need both dark and light palettes.

[britanyponvelle]

@Snugug Ok great! Thanks for the link. To answer your second question, it's a bit of both. Right now we are using it to test color palettes to narrow down which palette we will use for the actual site. The decision for which palette we will be using will be primarily based on user testing @bobbinrobyn is doing.

[Snugug]

@britanyponvelle is it safe to say these are the font sizes for our headers? If so, might I suggest that they'e a little big? 90px for a h1 and 67px for an h2 are kinda huge and are going to overwhelm content around it. Think of what a 90px h1 would look like on a mobile device; it'd take up almost 1/5 of a the screen. To give you a reference, the browser default is 32px.

I assume these sizes were chosen based on the Design Language's Type Scales (or modular scales, which appear to have been updated to allow for more than just the perfect fourth scale).

If you haven't read it already, I highly recommend reading More Meaningful Typography to learn about why we should use modular scales when designing typography. One of the more powerful things you can do when creating modular scales is to create a double stranded scale; one that has more than 1 important number (base font size) or more than 1 type scale (ratio). They let us fill in the gaps that may be present in a single stringed scale. Tim Brown (who wrote More Meaningful Typography) and Scott Kellum (Sr Front End for Vox) have made a modular scale site where you can play with multi stranded scales visually (I've added one with two bases initially). It'll even tell you what modular scale number you should use (the ms() part) and what Sass settings to use for the modular-scale Sass plugin

Finally, something to think about is responsive typography and how our type will look at different screen sizes. I wouldn't drop our body copy below 1em, but shaking up our scale and line height (which we need to include here too) at smaller sizes due to a smaller measure, and larger at larger screens. Mark Bolton's Five simple steps to better typography is a little outdated but provides a good overview of how the core pieces of typography work together.

[Snugug]

For what it's worth, when I'm working on determining typography, I doit from the view of an article: how would all of these pieces work together in long-form text. This I find provides me with the best overall legibility for the core of my typography, while allowing one-offs like callout font sizes to live on their own. Something to consider.

[britanyponvelle]

Thanks for the references, Sam. I've reworked the typography section a bit. I narrowed the H tags down to support the content in the content model Kathryn and Robyn are working on. The base size is still 1 em, but I incorporated 2 ratios for determine type size: Perfect Fourth and Major Third. Perfect Fourth ratio for desktops and tablets, making H1 about 2.5 the size of the body text for clearer contrast. Major Third ratio for phone screen sizes, making H1 only twice the size of the body text so it doesn’t overwhelm the content. Thoughts? @joshkimmell @Snugug @poofichu

[Snugug]

Awesome. I did. If you could include the modular scale size that'd be awesome.

As for swapping from one scale to another, phone/tablet/desktop aren't really good descriptors; their sizes vary widely and often overlap with each other. Instead of talking about them in terms of device categories (and in general when we do responsive work), I'd encourage you to throw these into the browser and see what size the browser is when you want to switch from one to another.

I also notice that in these new tiles you've dropped H4-6 styling

[britanyponvelle]

Yes, I can definitely include a scale! And I will work on putting type in the browser tomorrow and change "desktop and phone". I knew that wouldn't fly :) I am new to designing in the browser, but up to the challenge.

Also, I dropped the H4-H6 because I didn't think we would need them for the content we will have on the site. I was thinking we could style them later if we find we need more sizes.

[Snugug]

:stuck_out_tongue_closed_eyes:

Awesome! If you'd like to pair with me tomorrow on that I've got some time.

For the H4-H6, they have semantic meaning even if they won't be used often, so we should include some styling for them. It doesn't need to be much, just enough to have a distinct visual hierarchy (or enough to distinguish them from paragraph text)

[britanyponvelle]

Okay, great! I will shoot you a message tomorrow.

I will work on H4-H6. Also, for the modular scale size, did you have something like this in mind:

or

or something else?

[Snugug]

Actually, much easier than that. If you use the modular scale link that I sent, simply set it to one setting and copy/paste the link here, then set the other one and do the same. That'll provide me with everything I need to know!

[britanyponvelle]

Ah, ok! Here it is: http://www.modularscale.com/?16&px&1.333,1.25&web&text

[Snugug]

Awesome, thanks!

[britanyponvelle]

No problem! Here are updated H4-6 tags

[britanyponvelle]

*Update: Here is the typography in browser: http://pages.design.ibm.com/blponvel/wdl-typography-test/gh-pages/

https://git.design.ibm.com/blponvel/wdl-typography-test/tree/master

Testing H6 tags, base size, and major third + perfect fourth ratios. The breakpoint is at 500px

[Snugug]

Was this completed?

[britanyponvelle]

Yep, if everyone is on board with these decisions so far I think we can close it. @joshkimmell @poofichu

I've updated the tile with the newest info (breakpoints and headings)

[britanyponvelle]

@Snugug Josh gave the ok to close this issue. The elements are there, but we will continue to use the tile to help us iterate the visual design of the site.

[Snugug]

Yup, closing it just means we're done with this work, not that we won't build on it. Closing!

[britanyponvelle]

Iteration update:

• Added secondary colors using lighter tints to brighten up the palette
• moved orange 30 to the secondary palette, and orange 50 to primary so it can be integrated easier
• experimenting with buttons
• took line numbers out of code snippets and added a stronger weight

@poofichu is working on putting these elements in the browser so we can iterate quickly. Other Elements to test:

• [ ] Code syntax for snippets

[britanyponvelle]

updated: