patterns
Dwelling in ritual
Rain Chains & Musical Drains
Intricacy, centering, sun, enclosure
Parks intensely used in generalized public-yard fashion tend to have four elements in their design which I shall call intricacy, centering, sun and enclosure.
The scale of resolution determines what is seen
The patterns of Truchet's tiles appear at first glance as variously shaped interlocked regions of black and white, the boundaries between the square tiles being submerged whenever the two regions flanking them have the same color, just as in a real floor the air or cement between the tile edges is not perceived—until one looks closely. The scale of resolution determines what is seen.
Fabric
And finally, the things which seem like elements dissolve, and leave a fabric of relationships behind, which is the stuff that actually repeats itself, and gives the structure to a building or a town.
Simple variations of the parts
Symmetry, indeed, has been grossly overemphasized in both art and science: its main value is in giving meaning to its absence, dissymmetry, without which there could be no hierarchy.
The eye is repulsed by complexity if no order is detected, but it can be delighted by repetition, translation, rotation, reflection, magnification, and other simple variations of the parts.
patternsof.design
A Website by Nick TrombleyDrawing pictures of cities
An Article by Noah SmithThis is a famous picture by the artist Imperial Boy (帝国少年), who works in the anime industry. I sometimes claim that the entire genre of solarpunk is simply a riff on this picture.
If it’s not just “trees on buildings”, where does the Imperial Boy picture get its magic? Looking at it carefully and trying to analyze what I like about it, I think that much of it is about architecture, and even more of it is about the use of urban space — about how the structures in the picture shape the kinds of things you’d do if you were there. For example, here are five things I like:
- Open, walkable multi-level retail
- River with low bank
- Walkable streets
- Varied architecture
- Shade
Collaborative Information Architecture at Scale
An Article by Brandon DornHere I describe an approach for defining new information architectures for large organizational websites managed by many stakeholder groups.
Broadly speaking, there are four general phases to the approach:
- Auditing. Begin by immersing yourself in existing content and encourage stakeholders to adopt a critical, audience-minded perspective of their content.
- Diagramming. Work with stakeholders to develop new conceptual categories that better serve audiences and organizational direction.
- Elaborating. Think through content in detail and test new categories against specific instances and edge cases.
- Producing. Prepare content teams for production using a shared database of new sitemap pages and editorial considerations that you’ve developed incrementally.
The design systems between us
A Talk by Ethan MarcotteIn the early days, design systems promised us more consistent interfaces, more collaborative teams, and improved shipping times. While they’ve certainly delivered on some of those fronts, they’ve introduced new challenges too. Let’s talk through what’s working well—and what could be working better—as we take a closer look at the systems between us and our work.
Beyond Artboards
The Pursuit of Lossless Design-Development Handoffs.
Can't developers just see?
We designers love artboards. From rough UI sketches to high fidelity mockups, we see ourselves as visual artists expressing ideas on artboards that have a pre-defined width and height. To start a new project, we declare the size of the artboard in the first step.
What about responsive design? Not a problem! We diligently design on three artboards — one for mobile, one for tablet, and one for desktop — with content elegantly adapting, scaling, reflowing, reordering, and reprioritizing. We proudly hand off the artboards to developers while patting ourselves on the back: this is how responsive design should be done.
After weeks of arduous engineering, the product finally comes out. We find, to our great dismay, that some copy is hanging off the grid, the focal point of the hero image has been cropped out, the font sizes don’t even come close to the type ramp. What went wrong? Can’t the developers just see everything on all those artboards?
Nope.
We are the ones who paved the path
No matter how many screen sizes our artboards account for, some user’s browser will break loose from our prescription. With users resizing, rotating, and zooming the screen, new devices stretching, squashing, curving, and cutting (e.g. the speaker area in iPhone X) the screen, the sizes become infinite. Good luck making an artboard for each one of them.
Artboards are a lossy format. Using artboards in a handoff is a lossy process. When we pitch a finite number of plans against an infinite number of situations. We inevitably get in-betweens. Once there are in-betweens, there are unknowns. Once there are unknowns there is guesswork. Once there is guesswork, there are surprises. Engineers take the path of least resistance. We are ones who paved the path.
Until we get there
- As a designer, learn writing HTML, or better still, semantic HTML. If coding up the entire design is too hard, try coding up one component at a time, and not worrying about CSS. The HTML alone will prove invaluable for developers to understand the content structure. In addition, you are forced to optimize the information architecture as you work out the code from content.
- If coding by yourself is out of the question, pair up with the engineer who will receive the design. Work closely with him or her to prototype the design, validate responsive behaviors, and obtain feedback on the feasibility. Don’t call it an iteration until the design has seen played with in code.
- As a manager for large enterprise, co-locate your designers and developers, encourage interdisciplinary learning, understand that each minute spent on coding before the handoff translates to ten minutes saved from changing and fixing issues after the handoff.
- As a stakeholder in the handoff meeting, give the designer a thumbs-up when he or she demos live code running in browsers in place of mockups on artboards. That’s a design champion you are looking at.