Shawn Wang
100 Bytes of CSS to look great everywhere
An Article by Shawn Wanghtml { max-width: 60ch; padding: 1.5rem; margin: auto; line-height: 1.5rem; font-size: 24x; }
Metrics have a strange hold on the imagination
A Fragment by Shawn WangOnce in place, metrics have a strange hold on the imagination: I've seriously had a CTO carelessly reject my genuine idea out of hand because "it doesn't help OKRs", the same OKRs we previously agreed should not describe all that we do.
I agree with Amir Shevat that we should "do the right things over the easy to measure things."
The Genius of Apple's Name
An Article by Shawn WangIt's easy to have strong opinions about stuff only developers see since user validation is just asking people like yourself. It's much harder to name something consumer facing. Here are some useful rules I gleaned from Apple:
- Two syllables max
- Familiar English word - literal 5 year olds can spell and pronounce it right
- Starts with A - useful for alphabetical sort. Amazon did this too
- Name leads to easy logo/swag/branding ideas
- Evoke aspirational qualities - knowledge, health, nature
Don't Rush to Simplicity
An Article by Shawn WangYou've probably heard this story before:
A businessman finds a fisherman, who is living an idyllic, peaceful life by the sea.
He laughs and tells the fisherman how to get rich instead.
The fisherman asks him what he will do after he gets rich.
He replies that he would retire to an idyllic, peaceful life by the sea.There's supposed to be a deep life lesson in there, but it's always felt insincere to me.
To me it is better to have reached the heights of a career, or suffered an epic defeat, even if I do end up in the same place as everyone else in the end.
To me simplicity is made more beautiful when understood through a long personal struggle with complexity. When I can dance with it, having turned a mighty nemesis into an old friend, and teach others to do the same.
Better to have loved and lost, than never to have loved at all.
80/20 is the new Half-Ass
An Article by Shawn WangThe Pareto Principle is making you lazy.
Let me be more precise: The Pareto distribution is a useful model of power law effects in real life. But people are using it poorly, primarily as an excuse to be lazy.
...People forget that the devil is in the details. The first 20% everyone knows to say on Twitter. The remaining 80% is the ugly, nasty, hacky, unglamorous shit nobody talks about unless you've got time to sweat the details.
The Nature of Order
Levels of Scale
Scale refers to how we perceive the size of an element or space relative to other forms around it. All things – a tea cup, a building, language, entire eco-systems – consist of smaller components. It is the relationship of the smaller elements which determines the character and degree of life of the whole.
Objects which contain a high degree of life tend to contain a beautiful range of scales within, which exist at a series of well-marked intervals and have clearly recognizable jumps between them. To have good levels of scale, it is extremely important that the jumps between different scales of centers not be too great or too small.
Strong Centers
The idea of a center is at the heart of all that creates life within an object. But rather than the traditional view of an isolated geometry in space, a true center is defined not only by its internal cohesion, but by its relation to context. A strong center can only occur when other centers are intensifying it.
Like levels of scale, the concept of strong centers is recursive. In something which is alive, a strong center is made of many other strong centers, at different levels, which in turn make us aware of the whole they compose.
Boundaries
The articulation of a form depends to a great degree on how its surfaces are defined and meet at edges. The effect of a strong boundary is twofold: First, it focuses attention on the center, further intensifying it; and second, the boundary unites the center which it surrounds with what is beyond.
For the boundary to accomplish both of these tasks – to separate and to unite – it must have a degree of presence as strong as the center which it bounds.
Alternating Repetition
The principle of repetition orders recurring elements in a composition according to their proximity to one another, and by the visual characteristics they share. Elements need not be perfectly identical to be grouped in a repetitive fashion; they must merely share a common trait of size, shape, or detail characteristics allowing each element to be individually unique, yet belong to the same family.
When the repetition within a group of elements occurs parallel on a number of different levels, an alternating rhythm of centers forms, one series of centers intensifying the other.
Positive Space
Positive space refers to shaped space. Where an element occurs in space, the element not only exists with its own shape, but it also acts to define the shape of the space around it. For something to be whole, both the element itself and the space around it must engage one another, each intensifying the other. When this occurs, every single part of space has positive shape as a center – there are no amorphous, meaningless leftovers.
Every shape should be a strong center in itself, which is in turn made up of other, smaller centers.
Good Shape
Shape is the principal identifying characteristic of form, resulting from the specific configuration of a form’s surfaces and edges. Good shape happens when the surfaces and edges of a form have strong centers in every part of themselves.
A good shape, even if complex, can usually be broken down easily into more simple shapes. A good shape tends to contain a high degree of internal symmetries, an overall bilateral symmetry, and a well-marked center. The good shape also creates positive space around it, is very strongly distinct from what surrounds it, and has a feeling of being closed and complete.
Local Symmetries
Symmetry, or the balanced distribution of equivalent forms or spaces about a common line or point, can organize elements in architecture in two ways: an entire organization can be made symmetrical, or a symmetrical condition can occur in only a portion of the building or object, at any scale. The latter case is what we refer to as local symmetry.
Overall symmetry in an object tends to look mechanical and lifeless, usually due to the fact that local symmetries are absent within the overall form. However, when there are local symmetries, centers tend to form and strengthen the whole.
Deep Interlock
Forms which have a high degree of life tend to contain some type of interlock – a “hooking into” their surroundings – or an ambiguity between element and context, either case creating a zone belonging to both the form and to its surroundings, making it difficult to disentangle the two.
The interlock, or ambiguity, strengthens the centers on either side, which are intensified by the new center formed between the two.
Contrast
Works of art which have great life often have intense contrast within: rough/smooth, solid/void, loud/silent, empty/full. It is the difference between opposites which gives birth to something. Contrast is what often gives other principles their degree of life – the intensity of the boundary, the markedness of the alternating repetition.
Contrast strengthens centers by making each a deeper entity of itself, and thereby giving deeper meaning to both. It is, at its simplest, what allows us to differentiate. But meaningless contrast remains meaningless. It is only when centers are actively, mutually, and meaningfully composed that it acts to deepen the whole.
Graded Variation
Gradients must arise simply because in the natural world, things vary in size, spacing, intensity, and character. All living things tend to have a certain softness. One quality changes slowly, not suddenly, across space to become another.
In something which has life, throughout the whole there are graded fields of variation, often moving from the center to the boundary or vice-versa. We are able to read the character of a larger center often because of the gradation of smaller centers across the larger form.
Roughness
Roughness is the odd shape, the quick brush stroke, the irregular column size or spacing, the change in pattern at the corner – it is adjusting to conditions as they present themselves with meaning, but without ego or contrived deliberation.
Though it may look superficially flawed, especially with human perception accustomed to mass-produced regularity and perfection as a goal, an object with roughness is often more precise because it comes about from paying attention to what matters most, and letting go of what matters less.
Echoes
When echoes are present within a design, all the various smaller elements and centers, from which the larger centers are made, have a certain sameness of character. There are deep internal similarities, or echoes of one another, which tie all the elements and centers together at various scales to form a cohesive unity of being.
The Void
Objects or elements which have the greatest depth, which actively draw the senses in, have at their heart an area of deep calm and stillness – a void bounded by and contrasted with an area of intense centers around it.
When an element becomes all detail, its own constant buzz tends to dilute its overall strength. Like a musical wall of sound, it pushes against our perception to produce a flat field-like state. Conversely, it is the pause which allows us to interlock with a piece of music and feel its depth. The presence of void, at many scales, provides a contrasting calm to alleviate the buzz and strengthen the center.
Inner Calm
Living things tend to have a special simplicity, an economy developed over time in which all things unnecessary, or not supporting the whole, are removed. This does not preclude ornament, as even in nature ornament has its very necessary place. What simplicity does is cut away the meaningless attachments to an element, the things which often distract and confuse its true nature. When this is done, an object is in a state of inner calm.
Not-Separateness
Not-separateness is the degree of connectedness an element has with all that is around it. A thing which has this quality feels completely at peace, because it is so deeply interconnected with its world. There is no abruptness, no sharpness, but often an incomplete edge which softens the hard boundary. The element is drawn into its setting, and the element draws its setting into itself.
Not-separateness is a profound connection occurring at many scales between a center and the other centers which surround it, so that they melt into one another and become inseparable.