• I'm a senior designer at the university of chicago press. I'm a book designer. I am NOT a web designer. So why am I here? • good question! Although I didn’t have much web design experience, I ended up being closely involved in our recent website redesign, from the early planning stages through to the technical implementation and tweaking • Although I am not a web expert, my UP book design experience was actually good preparation for working on our website design. • UP book designers design both covers and interiors. This means we have to work both on the macro level, crafting powerful, engaging, and meaningful visuals, and on the micro level, organizing complicated texts and ensuring clear hierarchy and legibility • UP websites need that dual focus — they have to communicate complicated information in an authoritative and appropriate way
• First I’ll run through my experience working on our recent website redesign, then extrapolate from there and share some of my thoughts about university press website design. • I was part of a large group of people who worked on the site with an outside firm. A lot of people in my dept worked on the website, with the work led by Jill Shimabukuro, or creative director and head of design & production. This is just my perspective on it.
• We have a very strong design department at the University of Chicago • We definitely don’t have a house style, but I do think we have a consistent approach, and an interest in smart, well-crafted, type-driven design • Good design is valuable, and is an asset to the press. Our book designs are in many ways the public face of the press, and our department is responsible for that face. • <pause> • Early on the decision was made to hire an outside firm that specialized in web design. • To get the outside firm started, our department put together a sample of some of our design work to give them a sense of what we do
• Then we received these wireframes from the outside company. • We were all concerned by these layouts, which didn’t make much design sense to us. You can see some of our notes added in magenta. • We all thought the hierarchy and organization of information was strange • and didn’t inspire confidence
• I was really concerned, and thought our department should’ve been allowed to design the site ourselves, or least be more involved in the process. • we didn’t have much web experience, but we had tons of experience designing for the press. • so i went home that night and put together this VERY quick sketch. • I included some features I thought were important • a larger main panel with book information -- make this page content central. Everybody on twitter and blogs is looking for something to link to; they’re desperate for content. So make the content “hole” as david simon would call it, big and central. • big cover image => that’s how the book is recognized and remembered. • strong but simple masthead > with the idea that dept. divisions would be set off in black • Nobody asked me to do this, but I just really cared about the press, and wanted our website to be an extension of the books we publish. • I’m glad I did, because...
• because the first designs from the outside firm were ALL WRONG for our press • Terrible typography — nothing goes together at all • Strange navigation and hierarchy > “tu” and “fr” are stronger than the name of the press, or the different divisions! • Terrible masthead => typographically amateur
• just not the right look for us • here you can see the main book detail page. This page right here is really one of the hearts of the website — this is the type of page we want people to be linking to, to be tweeting. It’s supposed to be the central repository of content about this book. But the content hole is TINY • this just doesn't work. • So apparently nobody was happy with the designs, and we let the outside firm know that, and they explained that they didn’t really have a graphic designer, and were used to working from established brand guidelines. They asked us to give them very specific visual direction.
• so we did. • We sent them a masthead to use in their design, based on the one I proposed in my initial sketch, and finalized by Jill, our creative director. • it used color to separate the press name from the divisions. • the masthead is very simple, but uses a typeface called Attleboro that I designed. I drew it specifically to use on book covers • a lot of the designers in the department have used this font, so I guess it made sense to use it for the press • at this point Jill had a few of us designers spend some time playing with website design sketches and come up with type and color ideas.
• And eventually, after more back and forth, we got some improved designs from the outside firm; the design incorporated our masthead and some of our design suggestions, including the main navigation structure, from a design by Mike Brehm. • much better than before • but still needed lots of work • type is still kind of weird, and not very clean • left column boxes look bad!
• so then we started a process where we’d send them notes on their designs • lots of notes!
• and eventually we ended up with this • the heavy white slab serif font on the left bar is “Barrell”, designed by my colleague Matt Avery, who’s on a panel right now in another room.
• and this is the books detail page at this point. • much better than the initial proposal, much closer to our suggestions. • bigger emphasis on content hole, but I still think it should be bigger.
• Then our IT department started coding and building the site • my department was then responsible for reviewing the built out pages • we first reviewed the pages to see if they matched the outside firms initial design • but realized their design didn’t take into account a lot of specific things • and started making changes to improve legibility
• where did we come up with the technical specs to mark on their designs? • we used a great tool called FIREBUG • plugin for web browser that allows you edit CSS codes (text formatting) on a website on the fly, and see the changes instantly • life-saver • we logged a lot of time in firebug
• and many months later, after tons of work, ended up with this
• and then had to go through the process of extending the design to every page of site • outside firm only supplied a handful of pages; • my department is used to working on complicated reference books, and treated the website the same • we had multiple designers each tackle a chunk of pages • for example, here’s the info+services main page before custom design treatment
• and after some CSS modification • and of course every one of those links you see there goes to a page that needed it’s own custom design tweaking
• here’s an example. Something like 50 of these pages? • a lot of work by a lot of designers
• and we finally launched the site • it includes rotating hero banners designed for special books or events • although site is up, and done, we will continue to work on it • because we did so much in-house, we have the means to keep adjusting things
• although I think the final website is really pretty good, and definitely a huge improvement over our old one, this was a difficult process, and I think there are some lessons to be learned from what we went through
• One question that this raised is whether a university press should have a “brand” or a “visual identity,” and if so, what it should be like, and who should be responsible for it. • We were forced to confront this because we hired a firm that is used to making websites for companies with established brands
• this is the type of thing I think they’re used to basing websites off of. • Here’s a page from a brand guidelines for the YMCA’s recent redesign. • They have a clear and strong visual identity that could be easily exported to any format, including a website. • The real work is designing this brand. The website design is just an implementation of the brand guideline.
• So why didn't we have an established identity or brand? • I think most university presses don't have one either. • And honestly, I'm not sure that they should. We all have logos that we put on our business cards, and sometimes on our book spines. But when we publish a book, we don't mark it primarily as a book by US. In fact it's the opposite — a university press's real identity is defined by the books it publishes. • some presses associate themselves visually with their parent institution, but most of us don’t. We don’t try to have any strong visual identity apart from our books.
There is a famous essay about typography, written by Beatrice Ward in 1956. She asks the reader to imagine drinking some fine wine. Would they rather drink out of an ornate gold goblet, or a thin, clear, crystal goblet? The right answer is of course the crystal goblet, because it lets you appreciate the wine itself without getting in the way. Ward used this as a metaphor for typography — good design should be invisible, letting the words speak for themselves. I can see this metaphor applying to University Presses. You can argue that the press should be a crystal goblet, invisibly supporting and presenting the books that it publishes. • It would be innappropriate to overpower a book’s identity with the press’s.
• but the crystal goblet metaphor is a kind of a modernist fallacy • there is no such thing as neutrality or invisible design. • for example, this is one “neutral” way of setting our name.
• but in the 1950s this is what neutral would’ve look like
• and in the early 60s, neutral design looked more like this
• And this is how we did it in the 90s. • So if true neutrality is impossible, should it still be strived for?
Verso books has a very minimal, neutral website. But it is so masterfully done, so clean and elegant, it has a look of it’s own.
• The clarity becomes the voice of the press. • They’ve managed to create a strong and clear look without having a “brand” that overpowers their book covers. • we’ve gone in a much less neutral style for our website, but I think both approaches have their merits.
• yes, I’m a book designer. I like book covers. • What do they have to do with our website? • the strongest identity any press has comes from the books it publishes. And books get their identities from their covers.
A book cover design is a combination of concept
image
typography
and format. But the actual format of the book cover, the 6 x 9 size, is only a small part of the design itself • is there a way to harness the work that’s already been done, and use the concept, image, and typography? • use existing assets to help give the press a strong identity?
• Here is the University of California Press’s website • I love it -- very clean and smart. • they have a great traditional way of using book covers. > view larger
• really lets you see the cover, allows all the hard work that you’ve already done to be used again • why not use it, really show it? • seems easy, but not everybody does it, including us!!!
Here’s another interesting way of using book covers to give a press a strong identity. HUP’s website. Main page features rotating gallery of cropped covers. Very dramatic — similar style across covers gives strong identity to press. Very cool, but not carried through to subpages. Still cool.
Another way is the microsite. This is something we’ve been experimenting with, and I think will do more and more of. • this is a Book cover
and the same book’s interior. Book designers are already used to taking elements and putting them in new contexts
• not much of a leap to adapt visual language to website • very simple, but nice extension of book’s brand. • I think we’ll see more and more of this. • it’s a way of taking the work that went into the concept, images, and typography and combining them with a new format • could every book page on a press website reflect the design of the book? some type of autogenarated system?
One final idea about using the type of work we put into book covers on our websites. Could it be possible to make every book page a microsite, in effect? What if instead of putting a thumbnail of a book on a webpage, the webpage itself was a new version of the design? Instead of designing a book cover, the designer would design a book SYSTEM, that would then generate a book cover, a website, and who knows what else (marketing materials?). Could make sense in the move towards e-books, where the emphasis on the representation of the physical book (6 x 9 rectangle thumbnail) is less and less relevant.
and finally, based on our jumbled process, I think the best approach would’ve been to either: 1. 2. • don’t underestimate your in-house talent. Nobody understands your press better than your press. And when it comes down to it, graphic design is graphic design, weather it’s a book or a website.
