interfaces
An open platform is essential
Web trails
gridless.design
A Website by Donnie D'Amatoget rid of the grid
Blasphemy, I need structure and order!"
The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how we might change our perspective. Let's think outside of the grid and allow other guidelines to provide a comprehensive layout.
Web Design is 95% Typography
An Article by Oliver Reichenstein95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.
Why Do All Websites Look the Same?
An Article by Boris MüllerOn the visual weariness of the web.
Cloudbusting
An Article by Daisy AliotoIt is fun to revisit memories this way, a digital stamp in my weather passport, where everything can be contained in a forecast and Stockholm sits between Vilnius and London by sheer chance. It has also been a way to feel close to people I love while traveling, to know whether it is raining where they are.
As with most technology, this is artistry by committee. There is no Thomas Cole waiting in the wings. But someone has to animate the stars, to decide when to streak one across the screen–to play god in our pockets.
Always Already Programming
An Article by Melanie HoffEveryone who interacts with computers has in important ways always already been programming them.
Every time you make a folder or rename a file on your computer, the actions you take through moving your mouse and clicking on buttons, translate into text-based commands or scripts which eventually translate into binary.
Why are the common conceptions of what a programmer and user is so divorced from each other? The distinction between programmer and user is reinforced and maintained by a tech industry that benefits from a population rendered computationally passive. If we accept and adopt the role of less agency, we then make it harder for ourselves to come into more agency.
The Finish Fetish Artists
An EssayFor others, perhaps especially those artists who worked with light and transparency and were involved in the birth of the Light and Space Movement, an immaculate surface is a prerequisite. Helen Pashgian explained this very clearly:
“On any of these works, if there is a scratch... that’s all you see. The point of it is not the finish at all – the point is being able to interact with the piece, whether it is inside or outside, to see into it, to see through it, to relate to it in those ways. But that’s why we need to deal with the finish, so we can deal with the piece on a much deeper level”.
The importance of a pristine surface calls for a very low tolerance to damage by the artists. The feeling is shared by Larry Bell:
“I don’t want you to see stains on the glass. I don’t want you to see fingerprints on the glass... I don’t want you to see anything except the light that’s reflected, absorbed, or transmitted”
Spatial Software
An Article by John PalmerSpatial Interfaces
An Essay by John PalmerSoftware applications can utilize spatial interfaces to afford users powerful ways of thinking and interacting. Though often associated with gaming, spatial interfaces can be useful in any kind of software, even in less obvious domains like productivity tools or work applications. We will see spatial interfaces move into all verticals, starting with game-like interfaces for all kinds of social use-cases.
Spatial Web Browsing
An Article by Maggie AppletonThere are some new apps appearing that offer alternative ways of browsing the web...This canvas-based approach adds spatial dimension to the web browsing experience; they allow us to arrange browser windows above, below, to the left, and right of other browser windows.
The same way we're able to put an open book next to a piece of paper and below a row of sticky notes in meatspace. Arranging objects in space to create groupings, indicate relationships, and build hierarchies is one of those classical human skills that never goes out of style.
How I Build
An Article by Pirijan KetheswaranIn 2014, I wrote about my belief that design and engineering are best when tightly woven together. That’s truer now than ever.
If I’m feeling confident, I’ll jump right into my text editor…From here, more functionality is added and the code is tweaked until the feature looks and feels right to me. Whether it’s something simple like this, or prototyping a new interaction like multi-connect, there’s no substitute for designing with real code.
In rare cases when I have ideas or plans that I’m less confident about, it’s time to break out the paper, pens, and markers,
Because the Kinopio interface elements and aesthetic are full-grown, I almost never use traditional design software anymore.
In search of visual texture
An Article by Rachel PruddenI’m now more inclined to attribute Looseleaf’s power to its visual texture than to some cognitive media-style abstraction. And the visual texture owes more to the beauty (yes, beauty!) of the original pdfs from the Vasulka Archive. Perhaps the demo is best understood not as a prototype generic tool, but as a specific curated experience in its own right, with form and content claiming equal importance in its overall success.
Even so, I think there are some general lessons that can be drawn from this demo:
- Content is not inert
- Visual texture lets content breathe
- Visual texture lets the eye wander without losing itself
Menus, Metaphors and Materials: Milestones of User Interface Design
An Article by Boris MüllerStudents traditionally learn art and design by studying the masters, analyzing, sketching and interpreting the grand visions of the past. In doing this, they get to understand the ideas, concepts and motivations behind the visual form.
In user interface design, this practice is curiously absent.
press.stripe.com
A WebsiteStripe partners with millions of the world’s most innovative businesses. These businesses are the result of many different inputs. Perhaps the most important ingredient is “ideas.”
Stripe Press highlights ideas that we think can be broadly useful. Some books contain entirely new material, some are collections of existing work reimagined, and others are republications of previous works that have remained relevant over time or have renewed relevance today.
Embracing Asymmetrical Design
An Article by Ben NadelHumans love symmetry. We find symmetry to be very attractive. Our brains may even be hard-wired through evolution to process symmetrical data more efficiently. So, it's no surprise that, as designers, we try to build symmetry into our product interfaces and layouts. It makes them feel very pleasant to look at.
Unfortunately, data is not symmetrical…Once you release a product into "the real world", and users start to enter "real world data" into it, you immediately see that asymmetrical data, shoe-horned into a symmetrical design, can start to look terrible.
To fix this, we need to lean into an asymmetric reality. We need to embrace the fact that data is asymmetric and we need to design user interfaces that can expand and contract to work with the asymmetry, not against it. To borrow from Bruce Lee, we need to build user interfaces that act more like water:
“You must be shapeless, formless, like water. When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot. Water can drip and it can crash. Become like water my friend.” — Bruce Lee
Changing Our Development Mindset
A Fragment by Michelle BarkerWe simply can no longer design and develop only for “optimal” content or browsing conditions. Instead, we must embrace the inherent flexibility and unpredictability of the web, and build resilient components. Static mockups cannot cater to every scenario, so many design decisions fall to developers at build time. Like it or not, if you’re a UI developer, you are a designer — even if you don’t consider yourself one!
...Sometimes interpreting a design means asking the designer to further elaborate on their ideas (or even re-evaluate them). Other times, it means making design decisions on the fly or making recommendations based on our knowledge and experience.
AJDVIV
A WebsiteThe Fidelity Curve
An Article by Ryan SingerHow do we choose which level of fidelity is appropriate for a project?
I think about it like this: The purpose of making sketches and mockups before coding is to gain confidence in what we plan to do. I’m trying to remove risk from the decision to build something by somehow “previewing” it in a cheaper form. There’s a trade-off here. The higher the fidelity of the mockup, the more confidence it gives me. But the longer it takes to create that mockup, the more time I’ve wasted on an intermediate step before building the real thing.
I like to look at that trade-off economically. Each method reduces risk by letting me preview the outcome at lower fidelity, at the cost of time spent on it. The cost/benefit of each type of mockup is going to vary depending on the fidelity of the simulation and the work involved in building the real thing.
What UI really is (and how UX confuses matters)
An Article by Ryan SingerPeople mix the terms UI and UX together. UX is tricky because it doesn’t refer to any one thing. Interface design, visual styling, code performance, uptime, and feature set all contribute to the user’s “experience.” Books on UX further complicate matters by including research methods and development methodologies. All of this makes the field confusing for people who want to understand the fundamentals.
That’s why I avoid teaching the term ’UX.’ It means too many things to too many different people. Instead I focus on individual skills. Once you understand the individual skills, you can assemble them into a composite system without blurring them together. For software design, the core skill among all user-facing concerns is user interface design.
User Inyerface
A WebsiteA worst-practice UI experiment.
Beyond Artboards
An Essay by Chuánqí SunThe Pursuit of Lossless Design-Development Handoffs.
Intelligent arrows
A Fragment by Chris CoyierReminds me of a little feature I like in Notion where if you type dash-arrow (like ->) it turns into → — but intelligently — like it doesn’t do that with inline code or a code block.
Safari 15 isn't bad, just misunderstood
An Article by Jeff KirvinWhat I see in Safari 15 is the first steps into a new design language for iOS, one prioritizing adaptive, contextual interfaces. Ever since the move to the new “all screen” iPhone X design, content has been king on iOS, and Apple has been removing more and more user chrome. This is the next step on that journey.
The Nine States of Design
An Article by Vince Speelman- Nothing
- Loading
- None
- One
- Some
- Too Many
- Incorrect
- Correct
- Done
State of the Windows
An ArticleHow many layers of UI inconsistencies are in Windows 10?
We’ve all heard this riddle: if you dig down deep enough in Windows 10, you’ll find elements that date from Windows 3.x days. But is it actually true? In this article we’ll discover just how many UI layers are in Windows and when they were first introduced.
narrowdesign.com
A Website by Nick JonesDesign
Prototype
CodeGuidebook: Graphical User Interface Gallery
A WebsiteGuidebook is a website dedicated to preserving and showcasing Graphical User Interfaces, as well as various materials related to them.
It's all just geek talk
A Fragment by Riccardo MoriI’m finding that many people not only have lowered their standards with regard to the user interface, but more and more often when I bring up the subject, they seem to consider it a somewhat secondary aspect, something that’s only good for ‘geek talk’. The same kind of amused reaction laymen have to wine or coffee connoisseurs when they describe flavours and characteristics using specific lingo. Something that makes sense only to wine or coffee geeks but has little to no meaning or impact for the regular person.
The problem is that if an increasing number of people start viewing user interface design as an afterthought, or something that isn’t fundamental to the design of a product or experience — it’s all just ‘geek talk’ — then there is a reduced incentive to care about it on the part of the maker of the product.
Pictures of Websites
An Article by Matthew StrömWhen I was a product designer, people would ask what I did for a living, and sometimes I’d answer “I draw pictures of websites.”
Sure, I could just say “I design websites.” That’s true. The end result of my work is (hopefully) that a website looks better, works better, or results in better outcomes.
But most of my day isn’t spent looking at the website, or working on the code of the website, or manipulating the website directly in some way. It’s spent in Figma or Sketch, drawing pictures of how I think the website should look and work.
Through some kind of alchemy, the pictures I draw have an impact on the finished website. But they’re not all the same.
The User Interface of URLs
A Research PaperURLs (Uniform Resource Locators) have rapidly become the standard method for specifying how to access information on the Internet. Although mostly used on the World Wide Web, URLs are also becoming more common for specifying locations for other distributed Internet services such as Gopher and anonymous FTP. Internet users see URLs both online and in print, and therefore URLs have visual interfaces. This paper gives an overview of many of the issues that concern the visual and user interfaces of URLs.
Web History Chapter 6: Web Design
A Chapter by Jay HoffmannAfter the first websites demonstrate the commercial and aesthetic potential of the web, the media industry floods the web with a surge of new content. Amateur webzines — which define and voice and tone unique to the web — are soon joined by traditional publishers. By the mid to late 90’s, most major companies will have a website, and the popularity of the web will begin to explore. Search engines emerge as one solution to cataloging the expanding universe of websites, but even they struggle to keep up. Brands soon begin to look for a way to stand out.
Unobtrusive feedback
An Article by Jeremy KeithThe text 'added' and 'removed' drifts upwards from the toggle button and fades away.
So we all know Super Mario, right? And if you think about when you’re collecting coins in Super Mario, it doesn’t stop the game and pop up an alert dialogue and say, “You have just collected ten points, OK, Cancel”, right? It just does it. It does it in the background, but it does provide you with a feedback mechanism.
The feedback you get in Super Mario is about the number of points you’ve just gained. When you collect an item that gives you more points, the number of points you’ve gained appears where the item was …and then drifts upwards as it disappears. It’s unobtrusive enough that it won’t distract you from the gameplay you’re concentrating on but it gives you the reassurance that, yes, you have just gained points.
The Mother of All Demos
A Lecture by Douglas EngelbartA name retroactively applied to a landmark computer demonstration, presented by Douglas Engelbart on December 9, 1968. The 90-minute presentation essentially demonstrated almost all the fundamental elements of modern personal computing:
- windows,
- hypertext,
- graphics,
- efficient navigation and command input,
- video conferencing,
- the computer mouse,
- word processing,
- dynamic file linking,
- revision control,
- and a collaborative real-time editor
The UX of Lego Interface Panels
An Article by George CaveTwo studs wide and angled at 45°, the ubiquitous “2x2 decorated slope” is a LEGO minifigure’s interface to the world. These iconic, low-resolution designs are the perfect tool to learn the basics of physical interface design.
Like, just a post complaining that screens should be better
An Article by Matt WebbIt’s been 19 years since Pixar released Monsters, Inc. with all that CGI hair. Where are my hairy icons? Ones that get all long and knotted as the notifications number goes up.
Why can’t I feel my phone? I found that paper from 2010 (when I was complaining about keyboards) about using precision electrostatics to make artificial textures on touchscreens.
I should be able to run my thumb over my phone while it’s in my pocket and feel bumps for apps that want my attention. Touching an active element should feel rough. A scrollbar should *slip. Imagine the accessibility gains. But honestly I don’t even care if it’s useful: 1.5 billion smartphone screens are manufactured every year. For that number, I expect bells. I expect whistles.
The Evolution of Useful Things
Here, then, is the central idea: the form of made things is always subject to change in response to their real or perceived shortcomings, their failures to function properly. This principle governs all invention, innovation, ingenuity.
Spike and spon
Using an older, pointed knife and spoon, a "spike and spon," to keep the fingers from touching food may have given us the phrase "spic and span" to connote a high standard of cleanliness.
Shaped and reshaped
[Inventions] do not spring fully formed from the mind of some maker, but, rather, become shaped and reshaped through the (principally negative) experiences of their users within the social, cultural, and technological contexts in which they are embedded.
Form follows failure
Imagining how the form of things as seemingly simple as eating utensils might have evolved demonstrates the inadequacy of a "form follows function" argument to serve as a guiding principle for understanding how artifacts have come to look the way they do. Reflecting on how the form of the knife and fork has developed, let alone how vastly divergent are the ways in which Eastern and Western cultures have solved the identical design problem of conveying food to mouth, really demolishes any overly deterministic argument, for clearly there is no unique solution to the elementary problem of eating.
What form does follow is the real and perceived failure of things as they are used to do what they are supposed to do. Clever people in the past, whom today we might call inventors, designers, or engineers, observed the failure of existing things to function as well as might be imagined. By focusing on the shortcomings of things, innovators altered those items to remove the imperfections, thus producing new, improved objects. Different innovators in different places, starting with rudimentary solutions to the same basic problem, focused on different faults at different times, and so we have inherited culture-specific artifacts that are daily reminders that even so primitive a function as eating imposes no single form on the implements used to effect it.
Their wrongness is somehow more immediate
In general, a successful design, which Alexander terms a good fit between form and context, can be declared only when we can detect no more [points that conform to the standard against which we judge]. It is "departures from the norm which stand out in our minds, rather than the norm itself. Their wrongness is somehow more immediate than the rightness."
A small corner of the world of things
It need not be only the likes of engineers, politicians, and entrepreneurs who have a hand in shaping the world and its things, for we are all specialists in at least a small corner of the world of things.
My job is simply to design gadgets that I like
Inventors are people who not only curse, but who also start to think of what can be done to eliminate the bother...When I see something that I don't like, I try to invent a way around it. My job is simply to design gadgets that I like.
More easily asked than definitively answered
Some design questions are more easily asked than definitively answered. Inventors are seldom at a loss for problems, and so they must choose which ones they will work on.
Only a commercial and utilitarian view
By World War II, we seem to have come to take new gadgets for granted or relied upon advertising to inform us of what was new. Whereas our great-grandparents apparently found the latest improvement on the fountain pen or the bicycle of intellectual interest, most people in our generation take only a commercial and utilitarian view of such things.
Stick like hell
When the Wizard of Menlo Park called invention 10 percent inspiration and 90 percent perspiration, he was speaking not only about the creative act of inventing but also about the whole inventive process needed to bring more than intellectual success. Edison warned against discouragement during the perspiration phase in the following way, reminding us that we get things to work by the successive removal of bugs:
Genius? Nothing! Sticking to it is the genius! Any other bright-minded fellow can accomplish just as much of he will stick like hell and remember nothing that's any good works by itself. You've got to make the damn thing work!...I failed my way to success.
This tactile form of doodling
Paper clips have also served as objects of more inwardly directed aggression by providing something for the fingers to twist grotesquely out of shape during phone calls, interviews, and meetings. This tactile form of doodling may consume only a fraction of the twenty billion paper clips produced each year, but it underscores the almost limitless functions to which a single form can lead.
Materials and how to employ them
Forming a paper clip presents a common dilemma encountered by engineers and inventors: the very properties of the material that make it possible to be shaped into a useful object also limit its use. If one were to try and make a paper clip out of wire that stayed bent too easily, it would have little spring and not hold papers very tightly. On the other hand, if one were to use wire that did not stay bent, then the clip could not even be formed. Thus, understanding the fundamental behavior of materials and how to employ them to advantage is often a principle reason that something as seemingly simple as a paper clip cannot be developed sooner than it is.
Sonorisms VI
A small corner of the world of things
This tactile form of doodling
The crowded past of reality
Infundibular cores
Whose form our hands have often grown to gloveThe need to dispense a product properly
Difficulties in getting Scotch tape off the roll, for example, prompted the development of a dispenser with a built-in serrated edge to cut off a piece squarely and leave a neat edge handy for the next use. (This provides an excellent example of how the need to dispense a product properly and conveniently can give rise to a highly specialized infrastructure.)
Intrapreneurship
The characteristic of 3M that enabled it to attain such diversity in its product line is a policy of what has generally come to be called "intrapreneurship". The basic idea is to allow employees of large corporations to behave within the company as they would as individual entrepreneurs in the outside world.
...It is 3M's policy (and that of other enlightened companies) to allow its engineers to spend a certain percentage of their work time on projects of their own choosing, a practice known as "bootlegging".
Customers will confer a favor on us
A leaflet printed in March, 1906, tacitly confessed to many difficulties. The instructions for applying the fastener were wordy and complicated. The sponsors of C-curity betrayed their own lack of security by stating: "Customers will confer a favor on us by reporting any difficulty in applying fastener, in which case we will send more detailed instructions." The "instructions for using" were not merely wordy but worried.
The inventive process was often a nonverbal one
Through the ages, the professional users of tools by and large have not needed to, been able to, or wanted to talk to outsiders about their implements. They did not need to because tools themselves are used to make other tools, and thus users could very often fashion a new tool with their old ones. If they did need to communicate the design for a new tool to someone outside their trade, they could do so without having to reveal the tool's intended use...Besides, the inventive process of conceiving a new tool was often a nonverbal one. Finally, craftsmen were unwilling to share information about their specialized tools because to do so would have been to give up their competitive edge and their value to those outside the craft.
The reflective craftsman
Specialized tools like bench shears have proliferated throughout history in part because craftsmen necessarily do the same task with the same tool over and over. After a while, the task becomes routine, and the craftsman is able to perform it with predictable skill. The most creative of artisans is frequently one who, in the midst of routine, pays attention to the details of the work and the tools that effect that work, and so it is that the reflective craftsman develops ideas for new and improved tools in the course of working with those that he perceives to limit his achievement or efficiency.
Form eschews function
Many of the most contemporary silverware patterns appear to be designed more for how the pieces look than for how they work...There is a kind of design that can ignore function entirely. We might say that this is a "form eschews function" school of design, and one that places considerations of aesthetics, novelty, and style above everything else.
But to design from the handle is to shoot from the hip when it comes to silverware, for the business end of the individual pieces is where the action is going to be. Though Emily Post may not have perceived that tradition emerges out of the minimization of failure, there is no excuse for a designer to overlook the fact. Yet this is exactly what modern product designers seem to do when they strive so hard for a striking new look that they throw out function with tradition.
Style consists in distinction of form
Writing about style in architecture, the nineteenth-century theorist Viollet-le-Duc asserted that "style consists in distinction of form," and complained that animals expressed this better than the human species. He felt that his contemporaries had "become strangers to those elemental and simple ideas of truth which lead architects to give style to their designs," and he found it "necessary to define the constituent elements of style, and, in doing so, to carefully avoid those equivocations, those high-sounding but senseless phrases, which have been repeated with all that profound respect which most people profess for that which they do not understand."
Such an unholy alliance
Something was wrong, according to Raymond Loewy, who admitted that, "with few exceptions, the [competitors'] products were good." He was "disappointed and amazed at their poor physical appearance, their clumsiness, and...their design vulgarity." He found "quality and ugliness combined," and wondered about "such an unholy alliance."
...Loewy was also "shocked by the fact that most preeminent engineers, executive geniuses, and financial titans seemed to live in an aesthetic vacuum," and he believed that he could "add something to the field." But, not surprisingly, the people he approached were "rough, antagonistic, often resentful."
Most advanced yet acceptable
There is an apparent reluctance among consumers to accept designs that are too radically different from what they claim to supersede, for when, for when familiar things are redesigned too dramatically the function they perform can be less than obvious and thus possibly suspect. Loewy summarized the phenomenon by using the acronym MAYA, standing for "most advanced yet acceptable."
Combinations and arrangements
Everything designed has an element of arbitrariness in its form. Loewy described how groups of his designers used to go about designing a new model automobile. Different groups were given different tasks, such as the front and rear of the car, and the conceptual work began, to be cut off at some predetermined time by deadlines that were imposed at the outset. After a time, there were "piles of rough sketches," and Loewy saw the design proceed as follows:
Now the important process of elimination begins. From the roughs, I select the designs that indicate germinal direction. Those that show the greatest promise are studied in detail, and these in turn are used in combination or arrangements with one another. A promising front treatment can be tried in combination with a likely side elevation sketch, etc. From this a new set of designs emerges. These are then sketched in detail. After careful analysis, they boil down to four or five.
Economy of material and labor
Whatever the comparative merits of [various bed framing methods], what is clear from Aristotle's Mechanica is that economy of material, and labor, was as much an issue in ancient times as it is now.
More profitable and a better buy
The bottom line is certainly of concern, both to those seeking profit and to those seeking value, but neither of these can be measured solely by the amount of dollars spent on production or product. The nonquantitative word "quality" conveys countless ways in which a more expensive thing might be more profitable and yet a better buy as well. The advantages of thicker metal in an automobile body can clearly be argued from various points of view, including resistance to denting and even simple snob appeal. Whereas the manufacturer can use these as selling points and also as justification for a higher price tag, the buyer can easily justify spending more for a car that will keep its appearance longer and provide a status symbol.
Substance over style
By the 1930s, the teardrop shape, known since the turn of the century to be the form of least resistance, was incorporated into Boeing and Douglas aircraft, and, being the contemporary artifact that best symbolized the future, the airplane set the style for things generally. The most static of mundane objects were streamlined for no functional purpose, and chromed and rounded staplers, pencil sharpeners, and toasters were hailed as the epitome of design.
...Though all design is necessarily forward-looking, all design or design changes are not necessarily motivated by fickle style trends. The best in design always prefers substance over style, and the lasting concept over the ephemeral gimmick.
When engineers refuse to leave well enough alone
In a column entitled "March of the Engineers," the humorist and social critic Russell Baker lamented the complexity and sophistication of his office's new telephone system...Baker closed his column by defining the new telephone system as "another bleak example of the horrors created when engineers refuse to leave well enough alone."
In The Design of Everyday Things, Donald Norman wrote that "new telephone systems have proven to be another excellent example of incomprehensible design."
To anticipate all the uses and abuses
Success depends wholly on the anticipation and obviation of failure, and it is virtually impossible to anticipate all the uses and abuses to which a product will be subjected until it is in fact used and abused not in the laboratory but in real life. Hence, new products are seldom even near perfect, but we buy them and adapt to their form because they do fulfill, however imperfectly, a function that we find useful.
Lighter, thinner, cheaper
The evolution of form begins with the perception of failure, but it is propagated through the language of comparatives. "Lighter", "thinner," and "cheaper" are comparative assertions of improvement, and the possibility of attaching such claims to a new product directly influences the evolution of its form. Competition is by its very nature a struggle for superiority, and thus superlative claims of "lightest," "thinnest," "cheapest" often become the ultimate goals. But the goals more often than not are incompatible. Thus, the lightest and thinnest crystal can be expected also to be the most expensive. But limits on the form of artifacts are also defined by failure, for too light and too thin a piece of crystal might hardly be usable.