The Future of Writing was a design project commisioned by Microsoft Research Cambridge and the Microsoft Office team from the Royal College of Art in London. In this project five teams of design alumni from the college took a speculative approach to looking at the way in which authorship may change in the future. The result was five very diverse directions, described using video, text, images and interactive prototypes. This document describes the ideas, research and output of this project in detail.

We were thinking of the product as a set of screens. But there’s a problem with working this way: it’s not at all how people experience the product in real life. People use products in little flows that last anywhere from 30 seconds to a few minutes.

A user might first notice your product in a search result, browse around the product for a minute, and then leave. They might come back, sign up, and then leave again. They might open an email from the product, come back, make a purchase, and leave. Each of these little stories is a way that people actually experience your product.

UIKit is a small collection of flexible, decoupled components for the modern web. With an emphasis on structure-only styling making it it simple to apply application specific styling.

The Before and After Demonstration is a multi-page resource that shows an inaccessible website and a retrofitted version of this same website. Each web page includes inline annotations that can be activated to highlight some of the key accessibility barriers or repairs. Each web page is also accompanied by an evaluation report to inform the developers on the level of conformance to the Web Content Accessibility Guidelines (WCAG).

Visualizations of the structures of Choose Your Own Adventure Books.

1 - Find the set of architecture properties of key interest[1]
2 - Formulate an active approach to defining our an architecture that
induces these properties[2]
3 - Then, using the collective knowledge of already existing styles [3]
4 - Develop a style that meets the needs of the identified problem domain

This process is the actual topic of Fielding's dissertation. "REST" is
just his example "step 4" from above.

Presentation from Cesare Pautasso and Erik Wilde.

REST is the architectural style of the Web, and closely related to REST is the concept of a HTTP API. A HTTP API is a programmer-oriented interface to a specific service, and is known by other names such as a RESTful service contract, resource-oriented architecture, or a URI Space.

I say closely related because most HTTP APIs do not comply with the uniform interface constraint in it's strictest sense, which would demand that the interface be "standard" - or in practice: Consistent enough between different services that clients and services can obtain significant network effects. I won't dwell on this!

One thing we know is that these APIs will change, so what can we do at a technical level to deal with these changes as they occur?

The subjects covered in this document are large and complex, and there is a risk of growing to become unwieldy. The scope of the document is limited, though: to summarize the design considerations important for creating W3C specifications that enable stable standards for the Web, in a way that the Web standards community can discuss issues and altenatives with a common framework, and the evolution of the Web not hindered by interoperability concerns.

One of the important aspects of the Web that is, unlike many other communication applications, there is a broad community of Web developers: designers, programmers, individuals, software engineers, who create instances or strings intended for use in the languages of the Web. Because of the breadth of users as well as large numbers of implementations, the evolution and standadization of the Web has been different from the evolution of most previous communication standards. The history of the evolution of the web is messy: "browser wars", "best viewed by", widespread misunderstanding, slow standards. If we understand better the way in which the Web evolves, we can facilitate the development of useful standards.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Have we somehow conspired to arrange matters so that knowledge is always what we say about something rather than what we show about it? If so, it would account for the difficulty of using objects as constituting or communicating knowledge. Is the problem that the whole concept of knowledge and research arises out of words rather than actions, or do we simply have too narrow a range of examples, i.e. only lexical examples? Have we defined ourselves into a corner?

Oui is a kit and framework for building larger websites, in the same fashion as networked and distributed desktop applications.

All code is modern JavaScript -- Node.js for the server and in the browser at the client side.
The user interface is completely handled client-side
Client-server communication is REST-ful and exchange structured data (JSON)
All JavaScript, HTML and CSS is namespaced (derived from file structure)

The ideas I cite here, represented by the Hermenuetic Circle, definitely apply to TC39′s understanding of the text of ECMA-262, as well as various canonical texts in Computer Science. The committee works best when it spirals in on a solid design, avoiding local and premature optimizations and pessimizations.

The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual language, so we may share them in a fun and meaningful way.

Mashups are becoming increasingly popular as end users are able to easily access, manipulate, and compose data from many web sources. We have observed, however, that mashups tend to suffer from deficiencies that propagate as mashups are reused. To address these deficiencies, we would like to bring some of the benefits of software engineering techniques to the end users creating these pro- grams. In this work, we focus on identifying code smells indicative of the deficiencies we observed in web mashups programmed in the popular Yahoo! Pipes environment. Through an empirical study, we explore the impact of those smells on end-user programmers and observe that users generally prefer mashups without smells. We then introduce refactorings targeting those smells, reducing the complexity of the mashup programs, increasing their abstraction, updating broken data sources and dated components, and standard- izing their structures to fit the community development patterns. Our assessment of a large sample of mashups shows that smells are present in 81% of them and that the proposed refactorings can re- duce the number of smelly mashups to 16%, illustrating the poten- tial of refactoring to support the thousands of end users program- ming mashups.

Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices.

This listing is but an initial step in portraying the history of the visualization of data. We started with the developments listed by Beniger and Robyn (BenigerRobyn:1978) and incorporated additional listings from Hankins (Hankins:1999), Tufte (Tufte:1983, Tufte:1990, Tufte:1997), Heiser (Heiser:2000), and others (now too numerous to cite individually). In most cases, we cite original sources (where known) for the record; occasional secondary sources are included as well, where they appear to contribute to telling the story.

To convey a real sense of the accomplishments requires much more context- words, images, and, most usefully, interpretation. In this chronological listing, it has proved convenient to make divisions by epochs, and we provide some more detailed commentaries for each of these. The careful reader will be able to discern other themes, relations, and connections, not stated explicitly.

Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code!

It inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.

Stratum is a family of typefaces built from a synthesis of contemporary and historical sources. The austere geometry of early 20th century display faces paired with a desire for a contemporary lowercase have merged to produce this family of six weights.

Automatically hyphenates texts on websites.

The soft hyphen is the key to good-looking hyphenation and justification. And over the years it’s gained support in every A-grade browser: IE6+, Opera 7.1+, Safari 2+, Firefox 3+, and Chrome.

The most influential sans serif of the digital revolution (FF Meta) now has a serif companion.

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

It Sticks to the Bottom of the Page!

The Story Drifter is a tool that allows a person or a group of people to construct a non-linear narrative based on the context of an event and its connections with surrounding information. Our proposed tool uses stories, photos, videos, historical artifacts, names, dates, and anything else that could help to illustrate not only what happened, but why it happened.

Nicely designed portfolio site.

Typekit is the easiest way to use real fonts on the web. It's a subscription-based service for linking to high-quality Open Type fonts from some of the worlds best type foundries. Our fonts are served from a global network on redundant servers, offering bulletproof service and incredible speed.

A CSS framework that aims to cut down on your CSS development time.

This collection of photos is for anyone to use in just about any way they'd like. You may NOT, however, redistribute these photos individually or en masse, as photos, to any other websites or offline buyers. The photos themselves are still the intellectual property of their respective owners and you are merely receiving permission to use them in your designs, your art, your personal and professional projects, as your desktop backgrounds.

Producing lovely book designs with LaTeX.

There has been a lot of confusion from a wide varying uses use of this term for various different historical reasons, leading to uses which are sometimes ambiguous and in places inconsistent. This article attempts to shed light on the issue.

A Semantic Web portal dedicated to ontology design patterns (ODPs).

Clustr will generate shape(file)s for any old list of geographic coordinates.

We need to partition the idea of extensibility into two parts: extending the platform vs. extending the language.

The great disadvantage of testing and data is that you get precise, decisive answers you can and will act on, but you almost never know what question you really asked.

The server forwards from the identification URI to the generic document URI. This has the advantage that clients can bookmark and further work with the generic document. This setup should be used when the RDF and HTML (and possibly more alternative representations) convey the same information in different forms.

An archive of colour gradients for cartography, technical illustration and design.

Typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases.

A REST API should spend almost all of its descriptive effort in defining the media type(s) used for representing resources and driving application state, or in defining extended relation names and/or hypertext-enabled mark-up for existing standard media types. Any effort spent describing what methods to use on what URIs of interest should be entirely defined within the scope of the processing rules for a media type (and, in most cases, already defined by existing media types).

This two-part article is a step-by-step guide for those wishing to create new taxonomies for their business unit, or client. It will outline the many different elements that make up a quality taxonomy and the pitfalls you should be aware of when starting a new project.

In 1977 Charles and Ray Eames made a documentary film called Powers of Ten. The second half of the film includes a slow zoom into a man’s hand, right the way through cells and molecules all the way down to an atomic structure. It’s extraordinarily engaging, beginning at a familiar human context, and visualising something desperately distant and unknowable.

About a year ago James King brought a book to my attention from a series called Analysis of the Massproduct Design by Japanese product designer Taku Sato.

Analysis of the Massproduct Design is just like the Eames Powers of Ten video but for everyday products.

Each book takes a manufactured product and breaks down the content, graphics, construction and packaging page by page. The books are like infinite zooms into fabrication and history.

There are four, in turn looking at Xylitol Lime Mint chewing gum, a Fujifilm disposable camera, ‘Licca the fashion dress up doll by Takara Co.’ and a litre of milk from the Meiji Dairies Corporation. The blurb reads:

…we will take up and focus on one mass-produced product seen everywhere in our daily life without special attention paid to and from the point of view of design we try to take a closer look at and analytically examine it to find what kinds of ideas, efforts, ingenuities have been put in to it.

Each book begins with an overview and in some cases a history. This is from the book on the Fujifilm disposable camera.

As the book progresses, spreads examine the product in greater and greater detail. Near the end of the Fujifilm book, there’s a photographic one micrometer cross section of the film stock.

One of my favourites spreads is from the book examining Xylitol chewing gum and is titled ‘The Feeling on the Teeth When Chewed.’ It’s about the material qualities of tablets versus sticks of gum. A quote:

The firmness of a chewing gum changes gradually with the passing of the time of its being chewed. In order to make this change of the chewing feeling close to an ideal one, the elements that should make up of the chewing gum are controlled… The figure shows the strength of the chewing exerted in the mouth measured with an analyzing device called RheoMeter. These graphs will tell you how different the chewing feelings are between ordinary sheet-type chewing gum and sugar coated chewing gum.

An ideal chewing feeling! A RheoMeter! They’ve got a machine for testing the chewiness of gum.

I think Taku Sato actually designed the packaging for the milk carton he analyses. One of the spreads shows what each of the indents on the base of the cartons are for. Ambiguity in the translation adds to the mystery in some cases:

…(image a) is a little dented. This is for securing the stability of the carton when placed straight on a table… The number (image c) is the filling machine’s column index. The embossed information works for cause of the trouble to be clarified when it happens.

The books feel like imaginary manuals. They offer the seductive illusion that with this book the object can be completely known, all secrets unravelled. They somehow imply that if all was lost, objects like these could be reconstructed with this knowledge alone.

A while back I came across the term ‘Spime’ in Bruce Sterling’s book Shaping Things. He uses the word to characterise smart objects which talk about their histories, how they were made, where they were sourced, where they’ve been, etc. Spimes might be a cars which announce their locations, or a packaged beef steak which shows the cow it comes from and where that cow was raised.

Sato’s books are raw Spime porn. Objects showing off their shiny interiors, construction and their ancestors. The celebrity biographies of mass produced objects.

The examples here demonstrate some of the basic usage of Mapnik cascading style sheets. Most of the syntax has been borrowed wholesale from CSS, so it should be familiar to web designers.

Under what conditions is decentralization of facilities rational for a client-centered system of service or administration, and when is great centralization more cost-effective?

The main aim of this task is to explore how hardware or software tools for reading e-books can provide support to users engaged with a variety of reading related activities, such as fact finding or learning.

Mapnik is a Free Toolkit for developing mapping applications.

We've been in a deep Mapnik dive for the past few months on a particular project, and this post is an attempt to collect the design issues we've run into and what we did to address them along the way.

Proposals for common ontology design patterns.

We wanted our maps to be a clean, low-energy slate for plotting news items in their geospatial context, their spatial relationship with each other. That’s the emphasis, rather than wayfinding.

The DVB (Digital Video Broadcasting) has adopted the Tiresias Screenfont as the standard font for the MHP (Multimedia Home Platform), which many set-top box and digital TV manufacturers are using as their standard development platform.

A design stencil kit to help designers quickly create mockups for specifications and user testing.

Designing effective poster presentations is an art unto itself. This guide provides resources to make the process easier.

took me a long time to make it here,
tried to ages ago when it first arrived but it was always crowded.
have heard that lots of jimjillbangs have them now.

the sensation’s pretty ticklish at first,
tiny nibbling all around,
made me think of what i guess certain types nanobots would do on a much different scale.

was wondering if this is what a hippo/rhino feels like when it’s mates, the Askari wa kifaru (rhino guards in Swahili) birds are tending to them.

Doctor Fish Cafe
Sinchon

Browsershots makes screenshots of your web design in different browsers.

The significance of the whole URI in a representation language designed for human consumption is likely to be different than its significance in a language designed for machine consumption. What matters is consistency in the protocol.

Rison is a slight variation of JSON that looks vastly superior after URI encoding.

Informational graphics that tell stories about subjects, time periods and events.

All the SVG elements are dynamically created based on colors sampled in whatever is the current header image.

You should first try to support the vast majority of cases in a way that’s easy to use, then deal with the outliers. Make your main type support the vast majority, and make a second type for the rare misfits.

If we’re aggregating (and building UI for) ’social web’ claims about the world rather than simple buddylists, I suspect aggregators will get burned unless they take care to keep careful track of who said what.

The complexity of many organisational/social problem situations defeats attempts at defining a problem: in many such situations the problem is 'what is the problem?'. SSM provides a framework for tackling such situations.

Mellel is an advanced word processor for Mac OS X designed especially for scholars, creative and technical writers, and anyone seeking a feature-rich and reliable word processor.

Inventables researches materials, process, technologies and innovations.

The first 24x7 coverage of a global sporting event using the internet. The media generated by the boats in their race around the world—emails, photos, videos, position data—was used for data-driven storytelling.

Wicked awesome tileable animated GIFs.

The clips convey information that the searcher may not have known to look for—often simply through the layout and typeface, which an engine such as Nexis doesn’t preserve.

Lifelong learning, design, meta-design, software design, creativity, social creativity, distributed intelligence, human-computer interaction, and design-for-all (assistive technologies).

The semiotic square is a map of logical possibilities. As such, it can be used as a heuristic device, and in fact, attempting to fill it in stimulates the imagination.

Form Fonts is a web-based subscription service that provides professional low-poly 3D models and textures for one low monthly fee.

To be considered a "featured modeler", models should be developed with efficiency in mind, creating the most beautiful result with the least amount of polygons as possible.

Altpick.com was created to answer the need to find photographers, designers, illustrators, animators and other graphic related businesses in a quick, efficient and effective way.

Guide to major architectural works in Tokyo.

In order to allay some of the myths surrounding typography on the web, steps through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS.

He currently works as a web designer and has taught classes on editorial illustration and comics at Columbia College Chicago and the University of Chicago.

We gather stories of all shapes and sizes from countless perspectives around the world, and then present them in a rich browseable landscape, helping you make connections you never knew existed.

Potrace is a utility for tracing a bitmap, which means, transforming a bitmap into a smooth, scalable image.

This project aims to create an archive of user contributed clip art that can be freely used. All graphics submitted to the project should be placed into the Public Domain

What are you doing? Blogging about Twitter.