Содержание
Этот файл содержит неоднозначные символы Юникода, которые могут быть перепутаны с другими в текущей локали. Если это намеренно, можете спокойно проигнорировать это предупреждение. Используйте кнопку Экранировать, чтобы подсветить эти символы.
A metaphor
Let’s think for a minute about building a house. First, we need a blueprint, a permit, and an architect. And then we need a plot of land, and a bulldozer, and some concrete. We need to work with lumber to build a frame, and then we need to think about plumbing and electricity. That’s the kind of work we did in Q1. We built the frame, and made a plan for connecting the pipes and the wires.
Now it’s time to put stuff in the house: wallpaper, and paint, and carpet, and furniture. That’s the Q2 work.
A plan
There are two basic parts to the work that needs to be done.
- Making design decisions
- Documenting those decisions, and making them consumable
We’ll run these 2 streams of work in parallel.
- Vince and Michael will work on Making the Design Decisions (more about what this means in a minute).
- Michael and Craig will work on Documenting them and Making them Consumable, which, in this context means: Adding them to the documentation site, building the components in code, adding them to the sketch UI library, [etc.]
- Other members of the websites team will join those efforts as needed.
We'll work in 3-week sprints. Our next sprint starts on Monday, April 9.
For three weeks, we'll build prototype pages with real content from the website, so we can make design decisions in context. We’ll use the /security pages to begin. The content on these pages will give us a sandbox to make sure that our system works in real life. In order to apply the design system to these simple text-only pages, we'll have to define the following:
- Typography
- Fonts
- Scale
- Usage
- Text-color
- Layout
- Spacing
- Grid
- Breakpoints
- Color
- Interface
- Accessibility
- Component
- Simple
- Lists
- Links
- Default
- Hover
- Pressed
- Complex
- Local Navigation
- Simple
For every one of those bullet points, we need to
- make a design decision
- document that decision in Sketch, add to symbol library
- document in code, add to Protocol CSS framework
- write guidelines for the Protocol documentation website
A place
This is where our design decisions exist and the deliverables/ places we can show people when referring to the Design System.
| Code | Sketch | Definition |
|---|---|---|
| Design Tokens | Plugin | The small choices that affect most components (color, typography, spacing, etc.) |
| CSS Framework | Symbol Library | A central location to grab components from and start building pages. |
| Templates | UI Kit(s) | Pre-built pages that can be used for either testing new ideas or as a starting point for a new page on the website. |
A list
Here’s an (ongoing) list of all the Design Decisions we will need to make.
- Colors
- Brand Colors
- Mozilla
- Solid Colors
- ...
- Gradients
- ...
- Patterns
- ...
- Solid Colors
- Firefox (Photon)
- Mozilla
- Interface Colors
- Solid Colors
- Grey 1-5 (a scale of light to dark)
- Primary 1-5 (a scale of light to dark)
- Secondary 1-5 (a scale of light to dark)
- More colors here ?
- Accessibility
- Guidelines for color combinations that pass WCAG contrast testing
- Usage
- Success
- Define this color
- Warning
- Define this color
- Error
- Define this color
- Success
- Brand Colors
- Assets
-
Icons
Interface icons
Hamburger menu
Kebab menu
Arrows
Left
Right
Up Down
Plus (more)
X (close)
Magnifying Glass (search)
Play (video)
Play (audio)
Pause
Progress dots
Circle-i (info)
Pictograms
Examples:
https://www.dropbox.com/s/opcusiktkriushi/Screenshot%202018-04-04%2013.22.25.png?dl=0
https://www.dropbox.com/s/ac5h0kfmdr4dtv2/Screenshot%202018-04-04%2013.22.40.png?dl=0
Rules for sizing and spacing on an icon grid
Typography
Fonts
Zilla Slab
Open Sans
Usage
Mozilla
Firefox
Emphasis (https://polaris.shopify.com/visuals/typography#section-emphasis-styles)
Guidelines for how to do this without italic fonts.
Scale
Huge
Level1
Level2
Level3
Level4
Level5
Level6
Body1
Body2
Small
X-Small
Line length
Text color
Black (or almost black)
Lighter Grey
Grey
Darker Grey
Usage
HTML tags
h1
h2
h3
h4
h5
h6
p
a
etc.
Space
Working through some ideas here, but roughly:
Units of space based on 8px
Define
smallmediumandlargespace-unitslike 8, 16, 24, or something like that
Things like buttons are 32 px tall, because
1 rem font-size
smallpadding = 8px on top and bottom..Grid
6 columns
that are nestable?
While also considering spatial units like
half
third
quarter
fifth
sixth
Fixed gutters (30px on homepage, happy to change)
max widths
breakpoints (let's not call them that) "Viewport widths and how the grid adapts"?
I think we currently use:
< 760
760-1000
1000 - 1400
1400
but that could likely be improved
Simple components
Accordion
Breadcrumb
Button
Usage
Buttons do things
Links go places
Style
Font
Color
Space
Shape
Types
Primary
Secondary
Ghost
The Download Firefox Button ™
Subscribe
Apple Podcasts, Spotify, RSS feed, etc.
Available for Download
iOS App Store, Android Play Store, etc.
Sizes
Small
Medium
Large
Behavior
Default
Hover
Pressed
Focus
Disabled
Checkbox
Dropdown
Form
Usage
Style
Font
Color
Space
Shape
Behavior
Default
Hover
Press / Focus
Type
Validation
Labels
Hints
Icons
Image
Links
Lists
Ordered
Unordered
Modal
Confirmation Modal
Tour Modal (https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2017/11/Screenshot-from-2017-11-14-11-45-50.png)
Pagination
Progress indicator
Radio Button
Search
Tabs
Tags
Tooltip
Complex components (made up of more than one simple component)
Card
Image
Title
Blurb
Icon
Hover state
Size
Global navigation
Header nav
Footer nav
Local navigation
Horizontal (at the top of the page)
Vertical (in a left or right column)
Hero billboard
Full-page takeover (example: net neutrality, donate ...)
Video Player
Audio Player
Templates
Home
Category
Product
Article
-
Roadmap
Audit
Pages
About
Browser Comparison (Chrome v2)
Browser Comparison (Edge v1)
Browser Comparison (Edge v2)
Download Thanks
Email Privacy
Homepage
Pocket