README Image concepts

[ashygee]

Per the conversation with @broccolini on Primer illustrations, I've updated the readme concepts for the primer/styles and primer/components readme's.

You can view in detail in the figma file. I've also included some mocks of what the readme will look like when viewed on GitHub. View in Figma

[ashygee]

Trying to get closer to the website illustration styles. I took some of the inspiration from this image:

• Reverted the Octicon's to their original positioning
• Playing with the stroke widths. I'm now using the same stroke widths of .75pt and 2pt as seen in the website illustration files
• Removed overlapping of outlined geometric shapes

[broccolini]

Thanks @ashygee this is heading in the right direction! Some feedback below (also posted in slack earlier):

• The far left options look best to me, though I'd be interested in seeing an option with light blue dots outside the box similar to how they do it on the site pages.
• I think these should be a test case for the updated/consolidated styles so I'd like to see the single color thin lines vs thicker stroke lighter blue lines (like the site illos)
• The hand-drawn style line connects the octicons in other illustrations we have, so the line appears to come out of the end of the icon, on these ones it seems to be connecting the boxes instead which doesn't feel right to me - let me know if there is a reason for this though
• Outline shapes like the hexagon and the circle shouldn't overlap. From what I've seen on the site designs they do not overlap. We shouldn't do that either. (I noticed we do on the team page illo so we should fix that.)
• The lightning bolt icon rotated looks odd. I don't think any octicons should be rotated.
• The top right option has a the top line of code blocks very close to the edge, when we use the code blocks I think they should obviously overlap the edge of a shape or have a good amount of space.

[ashygee]

@broccolini I've gone ahead and fine-tuned the concepts with your feedback. The concepts for primer/styles and primer/components both have three different variations for background:

• A: Outline Box
• B: Dot Pattern
• C: Outline Box + Dot Pattern

primer/styles concepts

primer/components concepts

Details

• For Style A I wanted to focus on the simplicity of Primer's style. For both /style and /components I've used the primitive shapes seen in the original primer banners.
• The dot pattern for B & C has been lightened to blue-100 in order to better suit the white background of the readme on github.com and npm.
• The dot pattern on C is thinner to take into account of the outline box pairing.
• Stroke width variation is now similar to the web illustrations. 1px stroke is used for all connecting lines. The thicker stroke is consistent at 2px.
• 3px stroke for the squiggle paired with the paintbrush and the outline on style B.
• For the /components concepts the hand-drawn line connects the octicons as seen in the other illustrations instead of the blocks.
• Octicons have been rotated/flipped back to their correct and original positioning.
• Each overlapping element maintains consistent spacing with our spacing guidelines by being on a base 8.
  

Mocks

Example screen mocks of the README images can be seen in full resolution in Figma.

[ashygee]

README images live on primer/components and primer/primer.style repos