The Living Style Guide: How CustomInk created a their new ux lead style guide
-
Upload
dara-pressley -
Category
Design
-
view
260 -
download
3
description
Transcript of The Living Style Guide: How CustomInk created a their new ux lead style guide
![Page 1: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/1.jpg)
Dara Pressley | @UXDiva Mobile UX Camp
Living Style Guide
![Page 2: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/2.jpg)
What we started with
![Page 3: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/3.jpg)
CustomInkStyleguideVersion 2.03
1. Grids 022. Color Scheme 033. Text & Links 044. Headers 055. Contextual Nav 06-76. Site Headers 08-117. Site Footer 12-148. Popup 14-169. Buttons 17-1910. Marquee 20 11. Aside Box 21
12. Form Elements 22-2913. Proof Images 30-3114. Icons 32-3315. Swatches 3416. Other Elements 3516.1. Pagination 3516.2. Rounded Corners 3516.3. Bread Crumbs 3516.4. Standard Table 3516.5. Modal Style 35 16.6. Image Borders 35
4
Font family: Museo Sans (default) or Museo Slab | fallbacks: Helvetica, Arial, Sans-serifFont Size: 16px (default) or 13px (small text, sub text, or paragraph copy in narrow columns) Line-height for 16px font: 24pxLine-height for 13px font: 18pxBottom margin for paragraph copy: 24pxFont-weight: 300 (default) or 500 (bold)Fonts From: http://typekit.com/
3.2 Link Colors
3.1 Basic Text Info
Text colors (for text inside a white background)
3. Text & Links
Link (and visited) color: redHover color: blue
Link color: brown Visited color: brown Hover color: red Active color: red
Special Cases:
For the: • product catalog color swatch links • whenever there is a link in a header tag on the contextual nav • for the links in the creme colored section of the footer • the links in the top nav’s toolbar those link colors are:
Default Link Colors:
Default Font Color: Brown (#54301A)Secondary (half) Font Color: (#B28E5B)
Default Font Color Secondary Font Color
PDF Style Guide
![Page 4: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/4.jpg)
• PDF StyleGuide
• Becomes quickly out of date
• Master file owned by one person — makes it hard to update
• Circulating copies — versioning
• Not directly related to development build
![Page 5: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/5.jpg)
HTML Generated Guide
![Page 6: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/6.jpg)
• HTML Generated Guide lacked documentation to show how items and components could be built.
• Developed Style Guide was too strict
• Difficult to change components or add news ones
• Did not offer flexibility for usability or changes for look and feel
• As a result, items were often developed for the page that were not tied back to a greater framework
• This caused inconsistencies across the site and made it difficult for global updates
![Page 7: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/7.jpg)
What we needed
![Page 8: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/8.jpg)
Mobile
• Adding the ability create mobile pages meant that our styles had to change on the site.
• We needed to create components and elements that would work on a smaller screen
• And we needed the ability to create both responsive and optimized experiences
![Page 9: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/9.jpg)
A new home
• A new homepage design created many styles and components that weren’t available in the Style Guide
• Also, it created many conversations about updating some styles to refresh brand identity
![Page 10: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/10.jpg)
Wish list
![Page 11: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/11.jpg)
Beyond what was needed
• UX / VX lead style guide
• representing the CustomInk design principles
• The coded expression of the style guide
• Ability to easily add to and update styles and components
• Documentation
• Prototyping Support
![Page 12: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/12.jpg)
Foundation
![Page 13: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/13.jpg)
Technologies
for ux prototyping
![Page 14: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/14.jpg)
Simplicity
Our developers spend a good amount of time on the foundation. - It was crucial that they built something that was easy to expand on - The creative team needed to ability to update — so we needed to be able to read and understand their code
![Page 15: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/15.jpg)
NomenclatureA rose by any other name would not smell as sweet
sb-Btn sb-Btn--primary is-Disabledsb-Btn--large
Developers used SUIT syntax and came up with a naming scheme that was both easy and predictable
![Page 16: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/16.jpg)
Content First
It was very important to design that we be able to build the page according to the needs of the content.
![Page 17: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/17.jpg)
• We had a notion of breakpoints
• But did not what to be restricted by them
![Page 18: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/18.jpg)
The hardest thing to get our minds wrapped around was that there is no grid. That we needed to be the grid and wrap its structure around the needs of the content. !We had a lot of discussion around the header and footer in particular. Because, regardless of what we did to the content area of the page, the users experience should be consistent as they move from page to page on their particular device
![Page 19: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/19.jpg)
Responsive Typography
src: http://typecast.com/blog/a-more-modern-scale-for-web-typography
Text needed to resize based on screen size. Large screen h1s look enormous on small screens.
![Page 20: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/20.jpg)
Using Icon Fonts saved on page weight and also made sure that our icons were always consistent (over using cut images)
![Page 21: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/21.jpg)
![Page 22: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/22.jpg)
The living style guide
![Page 23: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/23.jpg)
Living the Guide
![Page 24: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/24.jpg)
So we were having the week long discussion
Change the button borderAs usual with creatives, a lot of back and forth. !But I thought… wait, this is a 2 second change. !No need to put in a Jira request, then wait for dev to have time to pick up something which seems so minor from their perspective. And then what if we don’t like the change.
![Page 25: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/25.jpg)
Before:
![Page 26: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/26.jpg)
Code image here
maybe with some “bang” effect!!
A quick change to the variable from 2px to 1px. Save and commit changes to git hub…….. and….
![Page 27: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/27.jpg)
After:
Designers rejoice!
![Page 28: The Living Style Guide: How CustomInk created a their new ux lead style guide](https://reader033.fdocuments.in/reader033/viewer/2022061211/5479f39db37959532b8b48c9/html5/thumbnails/28.jpg)
Thanks!
Dara Pressley
@UXDiva