2017
2016
2015
Textures.js
by sbrothier & 1 other
Textures are useful for the
selective perception of different categories
Pattern fills - samples.
by sbrothier
There are many ways to fill the background of a DOM or SVG element, including using solid colors or gradients. If you want to use a repeating pattern of some kind, the easiest way to do so is to create an SVG document that defines it and use it as a pattern fill. SVG images are typically smaller than bitmap images and remain sharp on high-dpi screens. Unlike CSS3 gradients, SVG images are supported on IE9. (source: http://philbit.com/svgpatterns/#whysvg)
2014
Transparent Textures
by sbrothier & 1 other
background-color: #8a0027;
background-image: url(http://www.transparenttextures.com/patterns/knitted-netting.png);
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
Can You Identify These Cities From Their Light Signatures? - Facts So Romantic - Nautilus
by sbrothier, 1 comment
The light that a city emits is like its glowing fingerprint. From the orderly grid of Manhattan, to the sprawling, snaking streets of Milan, to the bright contrast of Kuwait’s ring-roads, each city leaves its own pattern of tiny glowing dots. See if you can ID these cities based on the way they shine.
capptivate
by sbrothier & 1 other
Back in June of 2013, I launched Capptivate.co: a kinetic pattern library that captures and preserves delightful iOS animations. For an overview of the thinking behind the site, how to use it, and info about the tools I used to build it, read this post.
About Pattern Lab and Atomic Design
by sbrothier & 2 others
Atomic design is a methodology used to construct web design systems.
The Pattern Library
by sbrothier & 2 others (via)
THIS ON GOING PROJECT COMPILES PATTERNS SHARED BY THE MOST TALENTED DESIGNERS OUT THERE FOR YOU TO USE FREELY IN YOUR DESIGNS.
2013
How the Float Label Pattern Started
by sbrothier
I first had the idea for a new input pattern back in August. The idea was simple enough - animate placeholder text to show an icon beside the input so you don't lose your context. I've been doing 99% mobile work for the past 2 years and little things like this can really add up. I wanted a solution that saved space, looked clean and clear, but didn't forego usability.
