Above: Old vs new—the homepages of studio-gs.com.
Kevin and I have just completed a serious revamp of our old website, http://www.studio-gs.com, and naturally a lot of thinking went into it. The broad strokes of what’s new about the site were included in our email to clients and friends: a lot of new work, a showcase of details, and a richer and more dynamic “News” section. These changes are fairly obvious to anyone familiar with the old site, but some of the models and discussions that informed the new site are not. L&UL seems like an ideal place to capture and share some of these ideas while they’re still fresh in my mind, so that’s what I’ve tried to do in the collection of notes below.
Less is More
We wanted you to see right away that something was different, so early on we discussed changing the homepage to signal a change in the overall site. We were very happy with the overall “look” of the studio, we’d come to love Peter Bilak’s Fedra Serif on that dark grey with hits of orange, so changing the identity wasn’t really the issue, it was more of an editorial shift we were after. One of the things that had always bothered us was how many options our old homepage confronted you with. There were a lot of links there, and, unless you knew just what you were looking for, it was hard to jump in or even dip your toe in the water. If the site were a book, it would be a short one, however its Table of Contents was long. This seemed like a disconnect, and very quickly we were able to improve it. “About” groups five links that never quite merited homepage status individually: “Profiles,” “Clients,” “Awards,” “Articles,” and the “Archive.” While the old site had 13 options on the homepage, the new site has 6.
With fewer buckets to drop content into, the content in the buckets that remain becomes both more varied and more a microcosm of the whole of our practice. The distinctions between types of content on the new site are now erased—except for books. That’s because we’ve noticed that clients come to us either to make a book for them or to make something else for them. So that’s the basic navigation now, “Books” or “Projects.”
By grouping a lot of books together, we’re able to establish quickly to a new client that we’ve made a lot of different books in a lot of different ways. We liked, too, the idea of seeing “Books” not as a individual items but as an ongoing process and approach to a method of bookmaking. By taking the books out of their individual pages and linking them together, it’s easier to see the design thinking that informs all of them. But even that decision is not totally hard-line: there are books, for example, in the “Gagosian Gallery” project.
While the word “Projects” remains on our homepage, the organization of that homepage and of the site in general represents a huge shift away from a project-based presentation and to a more case-based presentation. “Projects” is less clinical than “Case Studies,” but basically it allows us to present with a few larger projects in depth. Rather than each project maintaining its own individual integrity, the site presents the idea that, when grouped together, these discrete projects can show the evolution of a design approach over time. We realized we wanted to be less limiting in describing both what we made and how we made it and how that gets organized. We realized it wasn’t important to our audience to sort the projects into different “types” of design, nor was it important to draw lines around each project and keep it whole. When we do a number of pieces for a single client, we see that work as an ongoing process.
Above: The old archive page of studio-gs.com with endless projects all on individual pages. While this system is a great way to keep organized and works for many designers’ individual portfolios, it’s an overwhelming list for a new visitor to the site wanting to quickly get a sense of what we do.
The word “Showcase” itself is wonderfully ambiguous and was stolen from the website of the great British design studio Non-Format. In addition to a panoramic view of our approach to the craft of design with a series of detailed views of smaller unrelated projects, the “Showcase” also addresses a problem we had with the old method of photographing our work by holding it out with our hands. The problem was that even though it was sort of a nice first-person effect, made the photos more human, and gave you a clearer sense of scale, it also was distancing and made it harder to get up close to the work and see some of the detailing we think is so essential to its success. Finally, “Writing,” which has now moved from a secondary page to the homepage, forms the verbal piece to an otherwise visual puzzle.
Showing and Telling
Our homepage navigation was always upstaged by our large opening statement, and friends complained occasionally that the navigation was too small. By cutting them by more in half, we could enlarge them, and we were surprised and happy to find the design of Pentagram’s site navigation has a similar editorial viewpoint and aesthetic.
But the more we thought about that statement itself, the more it seemed a stranger and stranger thing to us, explaining to our visitors what the website “was.” Sometimes making things large can help people find them; but sometimes making things large can help us find ourselves. The largeness of the opening statement, for us, fell into the latter category, and our visitors didn’t need it. They knew exactly what the site was, and we were actually the ones struggling to frame it. We took the statement away and replaced it with an image that represents the new site’s mission: showing our work. The first half of the original statement does remain—the part about being located in NYC—because we felt it was important to our work and a website is sort of a placeless thing. But it’s been moved out of the way, and we’ve dropped the second part, because it’s obvious.
Fast and Slow
“News” was always on the homepage, but it now has fewer competing links to distract from it. While “Project” case studies will be gathered slowly and “Books” and “Showcase” slideshows will be changed infrequently, “News” ensures the site remains dynamic and relevant day-to-day by giving us a place to show new work, make announcements, and share good news.
The “News” section allows our site to have two rhythms, the slowness of a yearly or semi-yearly work update contrasted to the weekly updating of a blog. Happily, we found that by providing “News” links on project pages, we could also share with interested clients the ongoing nature of our work for these clients, so that if they’re interested, there’s a way for them to find out where a project stands as of their visit, even if we haven’t updated its portfolio page. The “About” page works in a similar way, archiving press and awards as we post them on the “News” blog. Essentially, through a smart use of category tags, we are able to use Wordpress—the engine that drives the “News” blog—as a lightweight content management system, similar to L&UL.
Top: Rather than archiving each individual issue, Topic Magazine’s project page shows all the issues together as well as other content developed for Topic’s special events. Bottom: A “News” link on Topic’s project page continues the story of the project with current press and updates.
Top: The “News” blog at studio-gs.com. Bottom: Using Wordpress’s category tags to help manage reocurring content. The entire “News” blog is navigated from within a single column.
While the content of the main portfolio pages is slow in the sense that it’s not updated that frequently, we also wanted it to be very, very fast to navigate. The reason for this is that our site really functions as a “second handshake.” The first handshake is sometimes real and sometimes not, but basically it’s when we’ve met someone or they’ve heard about us, or seen our design credit somewhere, and they want to know more. So they take our business card, or the link at the end of our bio, or they turn to Google, and they find this website, studio-gs.com. That site is neither a trigger for curiosity—that’s already there, which is how someone finds it—nor is the site a stand-in for speaking to one of us more comprehensively. It’s there to make the potential energy of someone’s interest into the kinetic energy of being personally inspired, having a deeper conversation with us, or directly collaborating on a project together.
Trailers vs Feature-Length Films
As a result, it was increasingly clear to us the site we wanted to make for our visitors was not a self-indulgent archive of everything we’ve ever made. What did they want to know? Whatever it was, we wanted them to find it quickly and easily. This meant cutting the number of pieces we showed way, way down, and we found that doing so made the work we did show all that much stronger. This also meant improving navigation significantly, getting rid of frames so that visitors could bookmark specific links and so we could cite specific projects in emails to new and potential clients. When you clicked the “Books” link on our old site, it would spit out a set of 6-8 covers, and from there you could go deeper and read about the individual projects by clicking on 1 2 3 4 5 6 7 8. But both the rollovers and the deeper project pages were not intuitive, and people would often miss them. We’ve scrapped this system entirely in the new site.
Above: The old studio-gs.com’s navigation with numbered rollovers running along the top of a page was not particularly intuitive or useful for new visitors.
We also found that having your mouse “wand” over a few numbers was not really a great way to browse. We had two ideas we liked better. The first was to show all the images from a project on a single page, but some projects had as many as 30 images, and it was an overwhelming amount to look at. We also found the images did not get stronger by being all visible at once—you’d notice little things like how our the colors of the pages in a book were subtlety different from one shot to the next, or how the camera shifted just slightly to the left. We found ourselves comparing images rather than looking at the design, and we suspected users might do this, too. In the same way, an early prototype of the site greatly enlarged the area for sharing images of our work, but, when we realized that we are not pro photographers and our images didn’t really stand up to this kind of scrutiny, we made them smaller again.
The best interface we saw for looking at a large number of portfolio images was on 2×4’s site. The images are big enough to see the design but not so big that you notice the photography. They are not shown all together but one by one, and you get the next picture by clicking a button that stays in the same place. Once you’ve clicked, the images slide forward, giving you the sense that you’re “making progress” and a counter tells you how many images you’ve seen and how many are left in the slideshow. Finally, the transition effect—the slide—keeps you from comparing the image you’re about to see from the one you’ve just looked at. (Showing all the images silhouetted on white erases these boundaries even more.) All of this is wonderfully considered, and it improves the experience of browsing the images tremendously. And you’ll be happy to know that the designer of this interface, Takashi Okamoto, is giving it away for free on his website, mudcorporation.com. You can download it here. Thanks, Takashi.
All of these upgrades to how much is on the site and how much clicking, scrolling, and navigating you have to do to get that content were driven around our basic vision that in order to fulfill its roll as an effective “second handshake,” the website shouldn’t be the whole two-hour feature-length film, it should just be a trailer of what’s in store if you give us a call. This idea of the site as a “trailer” was something we came back to again and again as we tweaked and obsessed over the redesign. It seemed to us that in order to show we’d evolved, we needed to be more confident in showing less, showing it more quickly, and defining our practice as a whole in a more open-ended way.
