How We Made This Site

This site was made by a small group of folks at Microsoft with input from our friends at An Event Apart. Aaron Gustafson handled the UX and front-end duties with optimization & accessibility feedback from David Storey, Stephanie Stimac created the visual design, and Antón Molleda & David García handled all of the back-end and server stuff. Sarah Drasner created the wonderful animated SVG illustration you may have seen on the large-screen view of the homepage.

You may not realize it, but this site was actually designed to abide by the rules of this contest. A usable version of every page can be dowloaded in under 10 kilobytes. It is responsive and built with progressive enhancement and accessibility in mind.

The design uses system fonts to save on file size. Headlines are rendered in Georgia by default. Georgia was designed in 1993 by Matthew Carter and hinted by Tom Rickner for the Microsoft Corporation. If Georgia’s not available, we fall back to Times New Roman by Victor Lardent for Monotype, Times (Linotype’s Times New Roman clone), and the system serif if none of those are available. Body copy is rendered in Segoe UI by Steve Matteson for Monotype. If Segoe UI is not availble, we fall back to Frutiger by Adrian Frutiger, Helvetica Neue from D. Stempel AG, Arial from Monotype, and (finally) the system sans-serif if none of those are available.

If you happen to be offline, you might catch a glimpse of Matías Pitters’ Cog or Marc Grützmacher’s Avatar, and Scott Lewis’ Unlink, all of which come from the Noun Project. We use them when we can’t load the project screenshots or judge photos. All are are licensed under Creative Commons.

Want More Details?

If you want to tuck a bit more into the the actual build process, we’ve written about it: