Merge pull request #231 from WordPress/update/mockups

Update Mockups, March 10th.
WordPress · Mar 10, 2017 · d04171f · d04171f
2 parents f864b2e + cef605e
commit d04171f
Show file tree

Hide file tree

Showing 48 changed files with 82 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,8 @@ Gutenberg is the project name. Conversations and discussions take place in #core
 
 > The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg
 
+WordPress already supports a large amount of "blocks", but doesn't surface them very well, nor give them many rich layout options. By embracing the blocky nature, we can hopefully surface blocks that already exist, as well as attach more advanced layout options to each of them, allowing you to easily write richer posts.
+
 ## Overview
 
 - <a href="https://make.wordpress.org/design/2017/01/25/what-are-little-blocks-made-of">What are little blocks made of?</a>
@@ -22,58 +24,100 @@ Gutenberg is the project name. Conversations and discussions take place in #core
 
 - <a href="https://github.com/Automattic/wp-post-grammar">WP Post grammar parser</a>.
 
-## Mockups
-
-These mockups are all subject to change and feedback.
-
-**Blocks & Formatting**
+## How Designers Can Contribute
 
-![Hover](mockups/Formatting, Hover.png)
+The editor we're building means to make the editing experience better for every WordPress user, by creating an interface that "makes writing rich posts effortless, and has 'blocks' to make it easy what today might take shortcodes, custom HTML, or 'mystery meat' embed discovery", to quote the kickoff goal.
 
-![Click](mockups/Formatting, Click.png)
+That is difficult. So your designer eyes and help is appreciated, in what capacity you'd like to contribute.
 
-![Drag & Drop](mockups/Drag and drop.png)
+A good place to start is having a look at <a href="https://github.com/WordPress/gutenberg#mockups">the current mockups</a> and <a href="https://wordpress.github.io/gutenberg/">the UI prototype</a>. We also have a GitHub repository, where <a href="https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+label%3ADesign">anything labelled "Design"</a> could use thoughtful replies, mockups, animatics, sketches, doodles.
 
-**New Blocks**
+With regards to specific changes to the design, the details & execution (like colors, borders, shadows), those are best done as minimal and specific iterations on the work that precedes it, so we can ideally compare. That doesn't preclude wild ideas, but should be considered for precise tasks like "give the pressed buttons more contrast", things in that vein.
 
-![New Blocks](mockups/New Blocks.png)
-![Insert Between](mockups/Insert Between.png)
-![Insert Between, Keyboard Only](mockups/Insert Between, Keyboard.png)
-![Insert](mockups/Insert.png)
+Grab the Sketch file so you don't have to start from scratch:
 
-**Type Switcher**
+**<a href="https://cloudup.com/cMPXM8Va2cy">Download, Updated Mar. 10th.</a>**
 
-![Switcher](mockups/Type Switcher.png)
+## Mockups
 
-**Other Blocks**
+These mockups are all subject to change and feedback.
 
-![Image](mockups/Image.png)
-![Quote](mockups/Quote.png)
-![Quote 2](mockups/Quote 2.png)
-![Headings](mockups/Headings.png)
+**Basic Blocks**
+
+_Text_
+![Text, Neutral](mockups/Text, Neutral.png)
+_Text, Hover_
+![Text, Hover](mockups/Text, Hover.png)
+_Text, Selected_
+![Text, Selected](mockups/Text, Selected.png)
+
+_Image_
+![Image, Neutral](mockups/Image, Neutral.png)
+_Image, Hover_
+![Image, Hover](mockups/Image, Hover.png)
+_Image, Selected_
+![Image, Selected](mockups/Image, Selected.png)
+_Image, Caption_
+![Image, Caption](mockups/Image, Caption.png)
+
+_Quote_
+![Quote, Neutral](mockups/Quote, Neutral.png)
+![Quote, Hover](mockups/Quote, Hover.png)
+![Quote, Selected](mockups/Quote, Selected.png)
+![Quote, Citation](mockups/Quote, Citation.png)
+
+_Quote 2_
+![Quote 2, Neutral](mockups/Quote 2, Neutral.png)
+_Quote 2, Hover_
+![Quote 2, Hover](mockups/Quote 2, Hover.png)
+_Quote 2, Selected_
+![Quote 2, Selected](mockups/Quote 2, Selected.png)
+
+_Heading_
+![Heading, Neutral](mockups/Heading, Neutral.png)
+_Heading, Hover_
+![Heading, Hover](mockups/Heading, Hover.png)
+_Heading, Selected_
+![Heading, Selected](mockups/Heading, Selected.png)
+
+_Empty Embed_
+![Empty Embed, Neutral](mockups/Empty Embed, Neutral.png)
+_Empty Embed, Hover_
+![Empty Embed, Hover](mockups/Empty Embed, Hover.png)
+_Embed, Neutral_
+![Embed, Neutral](mockups/Embed, Neutral.png)
+_Embed, Hover_
+![Embed, Hover](mockups/Embed, Hover.png)
+_Embed, Selected_
+![Embed, Selected](mockups/Embed, Selected.png)
+_Embed, Caption_
+![Embed, Caption](mockups/Embed, Caption.png)
+
+_Gallery_
+![Gallery, Neutral](mockups/Gallery, Neutral.png)
+_Gallery, Hover_
+![Gallery, Hover](mockups/Gallery, Hover.png)
+_Gallery, Selected_
+![Gallery, Selected](mockups/Gallery, Selected.png)
+_Gallery, Selected Image_
+![Gallery, Selected Image](mockups/Gallery, Selected Image.png)
+_Gallery, Caption_
+![Gallery, Caption](mockups/Gallery, Caption.png)
+
+_Basic UI controls_
+![Drag and drop](mockups/Drag and drop.png)
+![Insert](mockups/Insert.png)
+![Newlines](mockups/Newlines.png)
+![Type Switcher](mockups/Type Switcher.png)
 
-**Early Desktop Chrome Concept**
+**Early Admin UI Concept**
 
 **Note:** This is how it _could_ look.
 
-![Desktop](mockups/Admin Chrome.png)
+![Admin UI](mockups/Admin UI.png)
 
-![Desktop, Sidebar Open](mockups/Admin Chrome, Sidebar Open.png)
+![Admin UI, Sidebar Open](mockups/Admin UI, Sidebar Open.png)
 
-**Early Mobile Chrome Concept**
+**Early Mobile UI Concept**
 
 ![Mobile](mockups/Mobile.png)
-
-## How Designers Can Contribute
-
-The editor we're building means to make the editing experience better for every WordPress user, by creating an interface that "makes writing rich posts effortless, and has 'blocks' to make it easy what today might take shortcodes, custom HTML, or 'mystery meat' embed discovery", to quote the kickoff goal.
-
-That is difficult. So your designer eyes and help is appreciated, in what capacity you'd like to contribute.
-
-A good place to start is having a look at <a href="https://github.com/WordPress/gutenberg#mockups">the current mockups</a> and <a href="https://wordpress.github.io/gutenberg/">the UI prototype</a>. We also have a GitHub repository, where <a href="https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+label%3ADesign">anything labelled "Design"</a> could use thoughtful replies, mockups, animatics, sketches, doodles.
-
-With regards to specific changes to the design, the details & execution (like colors, borders, shadows), those are best done as minimal and specific iterations on the work that precedes it, so we can ideally compare. That doesn't preclude wild ideas, but should be considered for precise tasks like "give the pressed buttons more contrast", things in that vein.
-
-Grab the Sketch file so you don't have to start from scratch:
-
-**<a href="mockups/editor.sketch">Download, Updated Mar. 1st.</a>**
diff --git a/mockups/Admin Chrome, Sidebar Open.png b/mockups/Admin Chrome, Sidebar Open.png
diff --git a/mockups/Admin Chrome.png b/mockups/Admin Chrome.png
diff --git a/mockups/Admin UI, Sidebar Open.png b/mockups/Admin UI, Sidebar Open.png
diff --git a/mockups/Admin UI.png b/mockups/Admin UI.png
diff --git a/mockups/Drag and drop.png b/mockups/Drag and drop.png
diff --git a/mockups/Embed, Caption.png b/mockups/Embed, Caption.png
diff --git a/mockups/Embed, Hover.png b/mockups/Embed, Hover.png
diff --git a/mockups/Embed, Neutral.png b/mockups/Embed, Neutral.png
diff --git a/mockups/Embed, Selected.png b/mockups/Embed, Selected.png
diff --git a/mockups/Empty Embed, Hover.png b/mockups/Empty Embed, Hover.png
diff --git a/mockups/Empty Embed, Neutral.png b/mockups/Empty Embed, Neutral.png
diff --git a/mockups/Formatting, Click.png b/mockups/Formatting, Click.png
diff --git a/mockups/Formatting, Hover.png b/mockups/Formatting, Hover.png
diff --git a/mockups/Gallery, Caption.png b/mockups/Gallery, Caption.png
diff --git a/mockups/Gallery, Hover.png b/mockups/Gallery, Hover.png
diff --git a/mockups/Gallery, Neutral.png b/mockups/Gallery, Neutral.png
diff --git a/mockups/Gallery, Selected Image.png b/mockups/Gallery, Selected Image.png
diff --git a/mockups/Gallery, Selected.png b/mockups/Gallery, Selected.png
diff --git a/mockups/Heading, Hover.png b/mockups/Heading, Hover.png
diff --git a/mockups/Heading, Neutral.png b/mockups/Heading, Neutral.png
diff --git a/mockups/Heading, Selected.png b/mockups/Heading, Selected.png
diff --git a/mockups/Headings.png b/mockups/Headings.png
diff --git a/mockups/Image, Caption.png b/mockups/Image, Caption.png
diff --git a/mockups/Image, Hover.png b/mockups/Image, Hover.png
diff --git a/mockups/Image, Neutral.png b/mockups/Image, Neutral.png
diff --git a/mockups/Image, Selected.png b/mockups/Image, Selected.png
diff --git a/mockups/Image.png b/mockups/Image.png
diff --git a/mockups/Insert Between, Keyboard.png b/mockups/Insert Between, Keyboard.png
diff --git a/mockups/Insert Between.png b/mockups/Insert Between.png
diff --git a/mockups/Insert.png b/mockups/Insert.png
diff --git a/mockups/Mobile.png b/mockups/Mobile.png
diff --git a/mockups/New Blocks.png b/mockups/New Blocks.png
diff --git a/mockups/Newlines.png b/mockups/Newlines.png
diff --git a/mockups/Quote 2, Hover.png b/mockups/Quote 2, Hover.png
diff --git a/mockups/Quote 2, Neutral.png b/mockups/Quote 2, Neutral.png
diff --git a/mockups/Quote 2, Selected.png b/mockups/Quote 2, Selected.png
diff --git a/mockups/Quote 2.png b/mockups/Quote 2.png
diff --git a/mockups/Quote, Citation.png b/mockups/Quote, Citation.png
diff --git a/mockups/Quote, Hover.png b/mockups/Quote, Hover.png
diff --git a/mockups/Quote, Neutral.png b/mockups/Quote, Neutral.png
diff --git a/mockups/Quote, Selected.png b/mockups/Quote, Selected.png
diff --git a/mockups/Quote.png b/mockups/Quote.png
diff --git a/mockups/Text, Hover.png b/mockups/Text, Hover.png
diff --git a/mockups/Text, Neutral.png b/mockups/Text, Neutral.png
diff --git a/mockups/Text, Selected.png b/mockups/Text, Selected.png
diff --git a/mockups/Type Switcher.png b/mockups/Type Switcher.png
diff --git a/mockups/editor.sketch b/mockups/editor.sketch