initialize project

skullface · Jul 2, 2017 · e11973b · e11973b
1 parent b4c09ec
commit e11973b
Show file tree

Hide file tree

Showing 37 changed files with 2,386 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+_site
+.idea
+node_modules
diff --git a/404.html b/404.html
@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<h1>404</h1>
+<p><strong>Page not found :(</strong></p>
+<p>The requested page could not be found.</p>
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,17 @@
+# Site settings
+title: Design Resources
+description: My favorite websites, tools, and books for design.
+author: Jessica Paoli
+locale: en-US
+
+# Build settings
+markdown: kramdown
+highlighter: rouge
+permalink: /:title
+
+# Exclude from site build
+exclude:
+  - .DS_Store
+  - node_modules
+  - gulpfile.js
+  - package.json
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,5 @@
+<footer class="site__footer">
+
+  <p>made by <a href="http://twitter.com/skullface">@skullface</a> &bull; view/contribute on <a href="http://github.com/skullface/design-resources">GitHub</a></p>
+
+</footer>
diff --git a/_includes/head.html b/_includes/head.html
@@ -0,0 +1,17 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
+  <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+
+  <link rel="stylesheet" href="{{ "/css/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
+
+  {% if jekyll.environment == 'production' and site.google_analytics %}
+  {% include google-analytics.html %}
+  {% endif %}
+</head>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {% include head.html %}
+
+  <body class="site__content">
+
+      <main>
+      {{ content }}
+      </main>
+
+    {% include footer.html %}
+  </body>
+</html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -0,0 +1,14 @@
+---
+layout: default
+---
+
+<div class="site__header">
+  <h1 class="site__title"><a href="/">{{ site.title }}</a></h1>
+  <p>Websites, tools, and books for designers.</p>
+</div>
+
+<h1>{{ post.title }}</h1>
+
+<article class="post">
+{{ content }}
+</article>
diff --git a/_posts/.DS_Store b/_posts/.DS_Store
diff --git a/_posts/2017-06-30-a11y.md b/_posts/2017-06-30-a11y.md
@@ -0,0 +1,11 @@
+---
+layout: post
+title: Accessibility guidelines and tools
+---
+
+## Guidelines
+- [Vox Media’s Designer Accessibility Checklist](http://) : steps to take when designing to be sure your visual design and experience design is accessible for all users
+- [Google Material Design](http://) : a11y principles; practices for color, sound, motion, layout, copy, hierarchy, focus, and implementation
+
+## Tools
+- [Color palette ideas and contrast ratio checkers](http://) 👆
diff --git a/_posts/2017-06-30-browser-extensions.md b/_posts/2017-06-30-browser-extensions.md
@@ -0,0 +1,12 @@
+---
+title: "Browser extensions and tools"
+layout: post
+---
+
+## Google Chrome
+- [WhatFont?](http://)
+- [Type Tester](http://)
+
+### Chrome Dev tools
+- [Animation tools](http://)
+- [Full-page screenshot](http://)
diff --git a/_posts/2017-06-30-brushes.md b/_posts/2017-06-30-brushes.md
@@ -0,0 +1,9 @@
+---
+title: "Brushes, PSDs"
+layout: post
+---
+
+- [Kyle T. Webster](https://www.kylebrush.com/): best Photoshop brushes for drawing and adding small texture (though they are not of much use without a pressure-sensitive tablet)
+- [RetroSupply](http://www.retrosupply.co/collections/brushes) Photoshop and Illustrator brushes for adding large (2000px) texture; recommended packs are RetroSupply 1 and 2 for PS, VectorFuzz for Illustrator
+- [CreativeMarket](https://creativemarket.com/): huge marketplace for relatively high-quality design assets (including fonts and stock photos), great for when you need to recreate a specific style or work in a particular niche
+- [YouWorkForThem](https://www.youworkforthem.com/graphics/): cool textures and “graphics”
diff --git a/_posts/2017-06-30-colors.md b/_posts/2017-06-30-colors.md
@@ -0,0 +1,15 @@
+---
+title: "Colors and color palettes"
+layout: post
+---
+
+- [Coolors](https://coolors.co/app): interactive color palette generator
+- [Paletteable](http://www.palettable.io/): interactive color palette generator
+- [Sip](http://sipapp.io/): beautifully-designed OSX and iOS colorpicker app, saves palettes
+- [Randoma11y](https://randoma11y.com/): accessibility friendly text & bg color generator
+- [Colors from A11y Stats](http://clrs.cc/a11y/): text & bg combinations with their contrast ratio and WCAG AA/AAA rating
+- [Online contrast checker](http://webaim.org/resources/contrastchecker/) for accessibility (input hex code for text color and bg color)
+- [Contrast Analyzer for OSX](https://www.paciellogroup.com/resources/contrastanalyser/) for easy eye-dropper–tool accessibility color testing  
+- [Hex Naw](https://hexnaw.com/
+- [Kuler](https://color.adobe.com/create/color-wheel/): Adobe color palette resource
+- [Wikipedia’s category for color shades](https://en.wikipedia.org/wiki/Category:Shades_of_color_templates): omg so nerdy
diff --git a/_posts/2017-06-30-fonts.md b/_posts/2017-06-30-fonts.md
@@ -0,0 +1,37 @@
+---
+title: "Fonts"
+layout: post
+---
+## Directories and marketplaces
+- [Google Fonts](https://fonts.google.com/&sa=D&ust=1498933355778000&usg=AFQjCNH-hhkhkMn9pvoSUaDCoWeb_lgzYQ): [free]
+- [Type Network](http://www.typenetwork.com/): [paid]
+- [YouWorkForThem](https://www.youworkforthem.com/&sa=D&ust=1498933355779000&usg=AFQjCNEWrJwheEFvwG2raZBXfM13w9g_vQ): [paid]
+- [MyFonts](http://myfonts.com&sa=D&ust=1498933355779000&usg=AFQjCNFL8IvctCLeLFB_2Bio-gaoJ3gXog): [paid]
+- [TypeKit](https://typekit.com/&sa=D&ust=1498933355779000&usg=AFQjCNHI9-NVjfcM3o-JF0C6tBS7zLgn8g): [paid] included with Adobe CC subscription, some only available for desktop or web use
+
+##  Individual foundries
+- [Village](https://vllg.com/&sa=D&ust=1498933355779000&usg=AFQjCNF3fLFYrD3WN0eIp236xOyaw26RDw)
+- [Font Bureau](http://fontbureau.typenetwork.com/&sa=D&ust=1498933355780000&usg=AFQjCNEekABOiPNRm14ummFIu9JMNxfFAA)
+- [GrilliType](https://www.grillitype.com/&sa=D&ust=1498933355780000&usg=AFQjCNHgIHtkOrI_EwLrSVoICmyHh66atw)
+- [Okay Type](https://okaytype.com/&sa=D&ust=1498933355780000&usg=AFQjCNGlmL-3_tXTtoJGcxMqb8JopeMBFg)
+- [HvD Fonts](http://www.hvdfonts.com/&sa=D&ust=1498933355780000&usg=AFQjCNExMpcalIckvIT2UQQVx-ZMeJ4uRQ)
+- [Colophon](http://www.colophon-foundry.org/&sa=D&ust=1498933355781000&usg=AFQjCNExFmdqENTPeg2OMrchOnC0f6WvJw)  
+- [TypeTogether](http://www.type-together.com/&sa=D&ust=1498933355781000&usg=AFQjCNEnA2lMtBlDhwy0lYHR2-50j43t3w)
+- [Lineto](https://lineto.com/&sa=D&ust=1498933355781000&usg=AFQjCNEKheEYnm9dnC9Y6TfBaPl2Usqi6A)
+- [Mark Simpson](http://www.marksimpson.com/&sa=D&ust=1498933355781000&usg=AFQjCNHc2BCuBlpOBEfkzCNYJjz6zIvZwA)
+- [Just Another Foundry](http://justanotherfoundry.com/&sa=D&ust=1498933355781000&usg=AFQjCNEO4pS8er4_LeHdCEXNhvCQiY9v0g)
+- [DSType](http://www.dstype.com/&sa=D&ust=1498933355782000&usg=AFQjCNHIzlQoKCVvfMRD7EQxY5WiTQhcmg)
+- [P22](https://www.p22.com/&sa=D&ust=1498933355782000&usg=AFQjCNF7-f9TT4wXaOPalrnS7bbG6DBwAw)
+- [Process Type](https://processtypefoundry.com/fonts/&sa=D&ust=1498933355782000&usg=AFQjCNGwUt19kM_1ibmawX3Tq96stRItEg)
+- [Commercial Type](https://commercialtype.com/&sa=D&ust=1498933355782000&usg=AFQjCNFZKFfDAMTWGvRGtE8LI2HVHJgz3A)  
+- [Dalton Maag](https://www.daltonmaag.com/&sa=D&ust=1498933355782000&usg=AFQjCNEnA3gYuUSstIUsDvD3JWIwCP4mTA)
+- [Hoefler & Co.](http://www.typography.com/&sa=D&ust=1498933355783000&usg=AFQjCNHW_Zv3-zdsJdAY4bIkPzHVc4TOuw)
+- [A2 Type](http://www.a2-type.co.uk/&sa=D&ust=1498933355783000&usg=AFQjCNFY7ZGWnOwj3raERKkftBib4V6Olg)
+- [Sudtipos](http://www.sudtipos.com/&sa=D&ust=1498933355783000&usg=AFQjCNEp3iLJdhYA-_SEIMQNpiFIaCofMQ)
+- [Fountain](http://www.fountaintype.com/&sa=D&ust=1498933355784000&usg=AFQjCNF5HbCJF4ZyxEzjVq_bJgwr7sWRcA)
+- [Beta Type](http://betatype.com/&sa=D&ust=1498933355784000&usg=AFQjCNFgGsxAozHZukjaJY0N6YTjDFam3Q)
+- [Typotheque](https://www.typotheque.com/&sa=D&ust=1498933355784000&usg=AFQjCNG-YqIjAfWsExpNTqJLS9Ummmk9wg)
+- [Bold Monday](https://www.boldmonday.com/&sa=D&ust=1498933355784000&usg=AFQjCNE49Bd8YQIZLUdkDwooYCExqVNO9w)
+- [Avondale Type Co.](https://avondaletypeco.com/&sa=D&ust=1498933355784000&usg=AFQjCNFIHrIfpH8n1Q6jcqhSQMXzxaCBRg)
+- [FontFont](https://www.fontfont.com/&sa=D&ust=1498933355785000&usg=AFQjCNEwDh9ZH2Lrc3klAOy7eJnGvqa0GA)
+- [House Industries](http://www.houseind.com/&sa=D&ust=1498933355785000&usg=AFQjCNEY1EpYjGA49VqfjG69V9VhL_dqnQ)
diff --git a/_posts/2017-06-30-icons.md b/_posts/2017-06-30-icons.md
@@ -0,0 +1,9 @@
+---
+title: "Icons and emoji"
+layout: post
+---
+
+- The Noun Project: [free/paid] available for use with Creative Commons attribution or available to purchase without attribution for cheap
+- ≤ iOS9 Apple emoji 160x160px transparent PNGs
+- EmojiOne vectors [free, open source]
+- SymbolSet: [paid] super high-quality icon fonts categorized by topic and style
diff --git a/_posts/2017-06-30-inspiration.md b/_posts/2017-06-30-inspiration.md
@@ -0,0 +1,55 @@
+---
+title: "Inspiration and criticism websites"
+layout: post
+---
+
+## Web, mobile, product
+
+### Visual design
+- [Siteinspire](http://siteinspire.com): website design gallery
+- [One Page Love](https://onepagelove.com): one-page website design gallery
+- [Web Creme](http://www.webcreme.com): website design gallery
+- [Site See](https://sitesee.co): website design gallery
+- [HTTPSTER](http://httpster.net): website design gallery
+- [Really Good Emails](http://reallygoodemails.com): email design gallery  
+
+
+### UX patterns and components
+- [PTTRNS](http://pttrns.com): mobile design patterns and components
+- [Capptivate](http://capptivate.co): mobile design patterns and components in video form
+- [Unmatched Style](http://unmatchedstyle.com): website design and interactive components gallery
+- [Pattern Tap](http://zurb.com/patterntap): website components gallery
+- [Empty Stat.es](http://emptystat.es): empty state designs
+- [Little Big Details](http://littlebigdetails.com): delightful, thoughtful UX components that make a big difference
+
+## Typography
+- [Alphabettes](http://www.alphabettes.org): commentary, research, and work showcases by women in type design
+- [Typographica](http://typographica.org): reviews and commentary on type books and typefaces
+- [Fonts In Use](https://fontsinuse.com): identifying type in print in real life
+- [Type Wolf](https://www.typewolf.com): basically Fonts In Use online
+
+## Brand identity
+
+- [Brand New](http://www.underconsideration.com/brandnew): brand identity case studies
+- [BP & O](http://bpando.org): killer packaging and brand design gallery
+- [Shipcom](http://shipcom.tumblr.com): collection of shipping, manufacturing, transport, and logistics logos
+
+## Print, layout, packaging, art direction
+
+- [FPO](http://www.underconsideration.com/fpo): print design case studies
+- [Art of the Menu](http://www.underconsideration.com/artofthemenu): restaurant-specific print menu design case studies
+- [Grafik](https://www.grafik.net): cutting-edge and old school fringe aesthetic case studies
+- [Trendlist](http://www.trendlist.org): graphic design trends for the designer’s designer
+- [NubbyTwiglet on Pinterest](https://www.pinterest.com/nubbytwiglet/graphic-design-editorial-layout): print editorial layout gallery
+- [It’s Nice That](http://www.itsnicethat.com): creative inspiration worldwide
+- [Designspiration](http://designspiration.net): photography, print design, cool stuff gallery, Pinterest style
+- [Mind Sparkle Mag](http://mindsparklemag.com): print, brand, interior, industrial design features
+
+## Illustration and art
+
+- [Jacky Winter](http://www.jackywinter.com/all-artists): illustration collective
+- [Boooooooom](http://www.booooooom.com): art, illustration, design, photography interviews and features
+
+## Motion
+
+- [Wine After Coffee](https://vimeo.com/channels/wineaftercoffee): curated channel of the best motion graphics, animation, and video
diff --git a/_posts/2017-06-30-mocks.md b/_posts/2017-06-30-mocks.md
@@ -0,0 +1,9 @@
+---
+title: "Mockups"
+layout: post
+---
+
+- [Facebook Design](http://facebook.design/handskit/): [free] diverse hands holding mobile devices
+- [Graphicburger](http://graphicburger.com/mock-ups/): [free] physical product mockups & templates
+- [Pixeden](http://www.pixeden.com): [free] physical product mockups & templates
+- [GraphicRiver](https://graphicriver.net/): [paid] any product mockup you can ever think of
diff --git a/_posts/2017-06-30-prototyping-tools.md b/_posts/2017-06-30-prototyping-tools.md
@@ -0,0 +1,12 @@
+---
+title: "Prototyping tools"
+layout: post
+---
+
+- [Adobe Experience Design](http://www.adobe.com/products/experience-design.html): included with Adobe CC subscription, for creating wireframes and protoyping interactivity
+- [Principle](http://principleformac.com/): motion design prototyping tool for mobile and web applications
+- [InVision](https://www.invisionapp.com/): collaborative click-through prototyping tool for web and mobile
+- [Marvel](https://marvelapp.com/): simple click-through prototyping tool for web and mobile apps
+- [Atomic](https://atomic.io): prototyping tool for mobile or desktop interactions or animations
+- [Framer](https://framerjs.com): prototyping tool built on framer.js for prototyping mobile and desktop apps
+- 👆 [More details on these apps and the differences between them @ cooper.com](https://www.cooper.com/prototyping-tools)
diff --git a/_posts/2017-06-30-stock-photography.md b/_posts/2017-06-30-stock-photography.md
@@ -0,0 +1,12 @@
+---
+title: "Stock photography"
+layout: post
+---
+
+- [Stocksy](http://stocksy.com): [paid] high quality, stylish lifestyle paid stock photos (watermarked comps)
+- [Masterfile](http://masterfile.com): [paid] stock photos, a little higher quality than iStock (unwatermarked hi-res comps with a registered account)
+- [Women of Color in Tech](https://www.flickr.com/photos/wocintechchat/albums): [free] photos of women in color in tech settings since every other stock photo site fails at this hardcore
+- [Unsplash](https://unsplash.com/): [free] the first of the hip and gorgeous free with no strings attached stock photo sites
+- [Gratisography](http://gratisography.com/): [free] photos by one photographer requiring no attribution, most are weird but some are chill to save in a folder for later since they’re free
+- [Magdeline](http://magdeleine.co/browse/): [free] similar to unsplash, some are licensed in public domain, some require Creative Commons attribution
+- [Death to the Stock Photo](http://deathtothestockphoto.com/): [free/paid] new sets emailed weekly, premium plans available for more photos and unlimited access
diff --git a/_posts/2017-06-30-user-testing.md b/_posts/2017-06-30-user-testing.md
@@ -0,0 +1,8 @@
+---
+title: "User testing and interactive feedback tools"
+layout: post
+---
+
+- [Lookback](http://): users record their screen, face, voice, and touches while using your site/app/prototype/wireframe
+- [UserTesting](http://): finds participants for you, runs a usability test, and records and stores videos of real people speaking their thoughts as they use your site/app/prototype/wireframe
+- [UsabilityHub](http://): for quick 5-minute qualitative, navigation-based, or hot-spot based remote tests for static images or a series of images
diff --git a/_scss/.DS_Store b/_scss/.DS_Store
diff --git a/_scss/_syntax.scss b/_scss/_syntax.scss
@@ -0,0 +1,60 @@
+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/_scss/base/_base.scss b/_scss/base/_base.scss
@@ -0,0 +1,4 @@
+@import 'reset',
+        'colors',
+        'typography',
+        'forms';
diff --git a/_scss/base/_colors.scss b/_scss/base/_colors.scss
diff --git a/_scss/base/_forms.scss b/_scss/base/_forms.scss