3

I’m in New York. Again. This time it’s for Google’s AMP Conf, where I’ll be giving ‘em a piece of my mind on a panel.

The conference starts tomorrow so I’ve had a day or two to acclimatise and explore. Seeing as Google are footing the bill for travel and accommodation, I’m staying at a rather nice hotel close to the conference venue in Tribeca. There’s live jazz in the lounge most evenings, a cinema downstairs, and should I request it, I can even have a goldfish in my room.

Looming above my hotel is 32 Avenue of the Americas. On the outside the building looks like your classic Gozer the Gozerian style of New York building. Inside, the lobby features a mosaic on the ceiling, and another on the wall extolling the connective power of radio and telephone.

The same architects also designed 60 Hudson Street, which has a similar Art Deco feel to it. Inside, there’s a cavernous hallway running through the ground floor but I can’t show you a picture of it. A security guard told me I couldn’t take any photos inside …which is a little strange seeing as it’s splashed across the website of the building.

I walked around the outside of 60 Hudson, taking more pictures. Another security guard asked me what I was doing. I told her I was interested in the history of the building, which is true; it was the headquarters of Western Union. For much of the twentieth century, it was a world hub of telegraphic communication, in much the same way that a beach hut in Porthcurno was the nexus of the nineteenth century.

For a 21st century hub, there’s the third and final corner of the triangle at 33 Thomas Street. It’s a breathtaking building. It looks like a spaceship from a Chris Foss painting. It was probably designed more like a spacecraft than a traditional building—it’s primary purpose was to withstand an atomic blast. Gone are niceties like windows. Instead there’s an impenetrable monolith that looks like something straight out of a dystopian sci-fi film.

Brutalist on the outside, its interior is host to even more brutal acts of invasive surveillance. The Snowden papers revealed this AT&T building to be a centrepiece of the Titanpointe programme:

They called it Project X. It was an unusually audacious, highly sensitive assignment: to build a massive skyscraper, capable of withstanding an atomic blast, in the middle of New York City. It would have no windows, 29 floors with three basement levels, and enough food to last 1,500 people two weeks in the event of a catastrophe.

But the building’s primary purpose would not be to protect humans from toxic radiation amid nuclear war. Rather, the fortified skyscraper would safeguard powerful computers, cables, and switchboards. It would house one of the most important telecommunications hubs in the United States…

Looking at the building, it requires very little imagination to picture it as the lair of villainous activity. Laura Poitras’s short film Project X basically consists of a voiceover of someone reading an NSA manual, some ominous background music, and shots of 33 Thomas Street looming in its oh-so-loomy way.

A top-secret handbook takes viewers on an undercover journey to Titanpointe, the site of a hidden partnership. Narrated by Rami Malek and Michelle Williams, and based on classified NSA documents, Project X reveals the inner workings of a windowless skyscraper in downtown Manhattan.

He begin in the 1980s; Christmas day in the Santa Maria household—Jason gets Castle Greyskull. One Christmas, his parents played a cruel joke on him. Instead of getting him toys, they got him books. But these books were better than regular books. They were choose-your-own-adventure books; classics like You Are A Shark and War With the Evil Power Master. The best part is that they are interactive. Of course you cheat. You go back and see what would have happened if you had made a different decision. Let’s look at the decisions we make when we are building website. Jason will show us seven small decisions that change the outcome of a finished website.

Be a thinker

Don’t just dive into moving shit around in Photoshop. Stop and figure out the problem before trying to come up with a solution. Take a look at the Enterprise car rental site. It’s not terrible but it’s also not exciting. It’s just bland.

At the beginning of a project, get acquainted with it. Get a feel for the content.

Find the message

The difference between good design and great design is intelligence.

Sum up a website with a message, as if you were introducing a friend at a party—what’s important? Everything on the site should communicate that message. The White House website does this. So does A Working Library.

Be a reverse engineer

Come at things from a different angle. Jason played Layer Tennis recently with Derek Powazek. They decided to play around with the format by introducing three truths and a lie. This prompted new ways of thinking about what they were producing.

Take lessons from improv. Play the “yes” game in brainstorming sessions. Take what people are offering and add to it.

Plot it out

Jason comes from traditional graphic design background of grids and systems. Cue obligatory Vignelli quote. But how big should your grid be? Just because you can go to 960 pixels doesn’t mean you should. Don’t blindly approach grids from a set size. The space on the screen is a valuable design tool. You can use for your grid but you can also use it for whitespace. Brockman says:

The grid system is an aid not a guarantee.

There are other kinds of grids, not just columns. It’s about choice. How do you choose to fill that space? 960 pixels is not right for everyone. Stop and consider. Big Cartel feels small and approachable because it doesn’t go full width. That fits the message it wants to communicate.

Grids don’t necessarily have to be uniform. Yet most grid tools start from that assumption. It seems like a small decision but it effects everything further down the line.

Think horizontally, then vertically

Thing of the page as a delicious parfait. The design of Jason’s own site can adapt to the content. His grid is just some horizontal strips. The different sections can then work together or stand alone. Within each layer there are then sub-layers. Only then does Jason think about how things line up vertically.

Design systems, not pages.

Stop, modulate and listen

Jason wrote a 24 Ways article on modular layout systems. You can narrow page elements down to identifier, size and placement: what it is, how big it is and where it goes. You can then apply those things to class names. Have classes for identification, size and placement. Then combine those classes e.g. class="pic two left" or class="pic seven right". Clients like the self-documenting nature of this.

Be a matchmaker

The state of type on the web today is still questionable. The choice isn’t large. It’s as if Netflix only offered four films for you to choose from. But type on the web is going to change soon. The conversations are already happening. In the next six months to a year, you will see more of a push for understanding of type and how to use type. Jason has some rules of thumb when choosing typefaces:

Don’t use two script typefaces together. Or two sans-serifs together (or two serifs together), for that matter. One of each is a good rule of thumb.

Pair fonts from the same designer. Perpetua and Gill Sans go great together because they were both made by that loony Eric Gill.

Find harmony and structure. Bedoni and Futura are very different; one is serif and one is sans-serif. And yet they share geometric forms.

Conversely, look for contrast. Caslon and Garamond are too similar to use together.

Step by step, all those decisions add up. It’s like Stewart Brand says in How Buildings Learn. People don’t begin building a house and plan for adding an addition but over time, bit by bit, you add to the house. Buildings adapt over time. So do websites.

It worked a treat. When I was going through security and when I was boarding the plane, I showed my passport and my iPod. They took the iPod, put it under the same scanner they were using for paper boarding passes and scanned the QR code on the screen.

I like paper as much as the next dead-tree fetishist but this was one instance where I was happy to go digital.