The new Vassar Department of Film homepage, launched May 7, 2013.

Vassar’s Film Department was long overdue for a redesign, and I was really psyched when the project was assigned to me. Having went to film school myself, I have warm and fuzzy memories from my years on set. Filmmaking is a highly collaborative art form, and students in film school can’t help but create strong bonds as they work on each other’s projects. It was those memories, and that feeling of kinship and collaborative creativity that I wanted to come through in the new Film Department website.

In our initial meetings with the department, other important design considerations came to light. Vassar’s Film program is very diverse. Unlike programs at similar colleges whose curriculums focus primarily on American and European films, students are exposed to a more global perspective of filmmaking. The Film professors, themselves, are from all over the world, so the Department’s multicultural perspective needed to be apparent, too.

Like all departments at Vassar, Film also values an interdisciplinary approach, grounding students in history and theory before offering intensive courses in production. The academic, theoretical approach was another characteristic that needed to be represented in the new site.

It was with all of these ideas in mind that I set out to create a new face for the Film Department.

Taking inspiration from the raw medium itself—film—I created angled color bands alluding to film strips, a black stripe behind the department title, and hard angles throughout, hinting at the sharp cuts of spliced film. Alongside this motif, vibrant, bright colors were interjected, inspired by colors found throughout the Vogelstein Center for Drama and Film. Finally, the design balances grittiness resembling film grain with clean-cut, neatly organized content areas. The design is both precise and professional, while exuding an energetic spark of excitement.

The real character of the department comes through, however, in the collage of rotating images on the homepage. The photos are arranged in a dynamic way, keeping with the  movement and energy of the color bands in the background; The images themselves show the full spectrum of what the department offers.

At the bottom of the page, a playful graphic also sums up the experience: students in silhouette direct a scene in front of a dramatically lit Vogelstein.

Responsive layouts.

With such a clear understanding of the department’s character, the design came together effortlessly. The tricky part was building the site responsively, working with the unique arrangement of images on the homepage and adapting the layout for multiple screen sizes. It took several breakpoints (nine, actually!) and a lot of trial and error to adjust the site seamlessly throughout the range of device sizes.

I also worked with my colleague, Ray,  to create a hiding search bar, so that precious screen space wasn’t wasted on a search form for users on smaller devices. Instead, the search collapses down to a single button, tucked at the top of the page, that can be tapped to expand the search.

While most of the content on the site was typical for our Vassar academic sites, there were some unique cases that Film presented. Mainly, students in the program complete a thesis project, either writing a dissertation or screenplay, or directing and producing a short film. The Student Work page was added to give equal attention to these projects, allowing visitors to watch completed films and read thesis papers.

The Student Work page lets visitors watch recent short films and read thesis papers.

Also unique to the Department is Film Festival accolades. Vassar Film actually has a designated staff member that submits films to festivals, and each year several students are official selections and award-winners at prestigious screenings around the world. The Festivals page was added to give recognition to these exceptional achievements.

A chart of recent film festival acceptances and awards gives recognition to successful student work.

Our Web Design team collaborated closely with the Film Department, and thanks to the organization and effort on their part, and our shared vision for the new site, the partnership was a successful one. The end result is dynamic and fun while staying true to the department’s mission and accurately reflecting its diverse personality. I am happy to have been a part of the project, and very pleased with the end result. Sources tell me, they are too. :)

Check out the new Film site for yourself here.

Just like any creative endeavor that requires a balance of expertise, problem-solving skills, and raw intuition, sometimes the mysterious process of creation gets curiously derailed. And regardless of whether you’re tackling a new project or you’re weeks or months into a complex one, Designer’s Block—the feeling of being completely out of ideas—is frustrating and inconvenient.I’ve put together a list of some antidotes I’ve learned over the years to help combat the burned-out feeling and give a burst of fresh air to your creativity:

Surf and stumble

The inspiring visual archive at Colossal.

If you’re not too blocked, and just need a quick gust of inspiring winds to get the creative storm brewing, you need not venture further than where you’re already sitting. Online design galleries, blogs, and sites like Pinterest and StumbleUpon (yes, I still use it!) are great for getting lost in beautiful design. There are endless places to browse, just make sure you bookmark your favorite stops so you can find them later on. My colleague, Chris Silverman, recommends LittleSnapper for organizing and easily accessing your findings; I keep an “inspiration” bookmark menu that is synchronized through Firefox Sync.

Here are some of my favorite places to get lost:
SiteInspire – website design gallery
Colossal – “art and visual ingenuity”
Design You Trust – design blog covering much more than graphics
FormFiftyFive – design inspiration
Visual.ly – infographics

Shift your perspective

Sometimes all you need is a little change in scenery. What is the problem that’s got you stumped? Chances are, a little sketching, writing, reading, or brainstorming will help you make headway.

Give yourself some extra brainpower by stepping away from the computer… in fact, consider leaving your desk altogether. Grab a sketchpad, leave your screens behind, and find a space that feeds your brain waves. Feeling drained and tired? A quiet nook by a window will give you peace and privacy. Wired and unfocused? A busy corridor bubbling with activity could get your neurons firing in tandem. Spend some time soaking in your new surroundings, and take a few minutes just creating whatever comes to you, giving yourself a break from the problem at hand. Let your ideas wander and enjoy where it takes you, eventually circling back to your “block” when you feel ready. You may find that your brief detour has sparked new and useful solutions.

Problem Swap

Two minds are better than one, and if you’re really stuck, don’t hesitate to ask for help. In fact, you may find that a colleague could use your input, too, and exchanging “design blocks” might shed light on unforeseen answers.

Start by finding a friend, co-worker, or online colleague you can trust, and offer to swap ideas. Frame your dilemma, provide files and notes, if it’s complex, and ask them to do the same. Determine a set amount of time for the two of you to ponder each other’s problem, and take that time to fully shift gears and immerse your mind in a fresh challenge. When you’re both finished, meet, Skype, or have a quick chat to share your findings. While having a fresh set of eyes on an issue doesn’t guarantee that you’ll immediately find a solution, it will certainly get you thinking in another direction—one that may eventually lead to the perfect resolution.

—

Designer’s block doesn’t have to crimp your creative process. The next time you feel like your treading water, take a break to try one of these techniques to wake your inner genius. You’ll be back on track and crafting killer websites in no time!

• Khan Academy—kids learn computer science—fun, interactive, collaborative, visual, via @grigs
• The Creativity of Indie Video Games | Off Book | PBS, via @pbs
• Street Ghosts—Google Maps inspired street art, via @adactio
• Guerilla Sculpture—with blue butterflies, via @themaninblue
• Ostrich Pillow—a micro environment for a power nap, via @wilto
• Acoustic Gangnum Stlyle—better than the original, via @MattWilcox

Some more interesting video (not shared with the kids):

• The Art of Web Design | Off Book | PBS via @pbs
• The Machine that Changed the World: The World at Your Fingertips | Episode 5 | History of Computers | PBS broadcast in 1992, this episode covers the internet. Fascinating considering Mosaic v1 was released in 1993, via waxpancake

This makes me very happy. Why? Because just as much as I love design and development, I also love the puzzle that is website planning: having a giant mountain of content and creating an architecture of organization that makes everything clear, simple, and user-friendly. My favorite method in this lengthy process of planning? Wireframing.

What is Wireframing?

Sample wireframes in a variety of styles.

Wireframing is the last step in the planning stages of building a website, when the content begins to take shape visually, and layout and hierarchy are the primary concern. Before considering design elements—color, shape, texture, pattern, typography—the skeleton of the site is “designed” with simple placeholder shapes or elements, so that the arrangement and organization of content can be easily modified. The point of wireframing is to see the layout of a page—its hierarchy of content, its navigational clarity and flow, and its individual elements—to work through iterations and difficult decisions before approaching the design process.

Why Wireframe?

Not all Web Designers that work in small, do-it-all-yourself environments choose to wireframe, but I’ve found it to be an absolutely essential tool for big, complex projects. Here’s why.

Focus on content

For years, an important mantra in Web Design has been “Content first”—and, for good reason. Beginning with content and the particular information that’s being communicated to your audience naturally means more informed design choices. By gathering the content and working with its visual organization outside of the context of style, you are able to commit your attention more specifically to the content itself: how its individual pieces are best represented and how the positioning and organization of content is aiding or detracting from the user experience.

Speed and efficiency

It’s very tempting to jump into the design phase of a project, but how often have you created a design that then had to be reworked and revised multiple times because of a lack of clearly-defined content structure? The design process, as any designer knows, is often elusive—the harder you “try” to design, the more difficult it is. Wireframing taps into your left-brain and allows you to work through layout ideas quickly without getting caught up in how individual elements will look. And, because you’re not digging through layer upon layer in Photoshop, you can quickly and efficiently make multiple iterations, try suggestions from colleagues, and test various layouts without committing to any one direction.

Test the user experience

Depending on how you create your wireframes, it’s possible to build simple prototypes that allows you to interact with (or, at the very least, visualize) the experience of moving through the site as a visitor. Wireframing is essentially bare-bones user experience testing, because, for the first time you can begin to “see” the finished product and predict potential issues with content flow and navigation. Catching these kinds of problems in the wireframing stage saves you from back-tracking in the design or development process.

Design with Clarity

In my opinion, the best reason to wireframe is to enter the design phase with absolute clarity about the content, purpose, flow, and structure of the site. Oftentimes, when I reach the point where wireframes are complete and it’s time to start designing, I can see the site so clearly that the design is nearly finished in my mind. Having that kind of an understanding of your project is essential to designing with ease and allowing creativity to bloom.

Where do I begin?

If you’re interested in adding wireframing to your process for the first time, I recommend the following tools and techniques:

Sketching

Yes, that’s right—a good ‘ole pad of paper and pencil should do the trick. If you’ve never wireframed before, I recommend that you start here to get a feeling for the process. Print out some wireframe templates and begin roughly shaping your layouts until you’ve solidified some ideas. You may choose to digitize your sketches, but if you have a small project or are more of a hands-on designer, this may be the only technique you need.

Adobe Illustrator

Since you’re probably already familiar with Illustrator and likely have it installed, too, this is a good first step for digitizing your wireframes. I find Illustrator quick and easy, opting to use the “Gray Box Method“, a technique coined by Jason Santa Maria back in 2004. It may be old-fashioned in web terms, but it still works well and is an excellent way to wireframe without purchasing extra software.

Balsamiq Mockups

Wireframing with Balsamiq Mockups

If you’ve tried the above two techniques and are ready for something more robust and specified, Balsamiq Mockups is a fantastic and affordable tool to add to your arsenal. Creating detailed, complex wireframes is as simple as dragging and dropping preset elements and customizing them. The most invaluable feature is the ability to create mockup links, allowing you to export PDF wireframe sets that allow the previewer to click through navigation and button elements and simulate the browsing experience.

–

These are just the tools I’ve used myself. There’s a whole slew of wireframing apps out there today, so if you find the process as invaluable as I do, be sure to look around and let me know what your tool of choice is. In the end, it’s all about creating a smooth and efficient process that best meets your personal needs, so that you have the space and the clarity to create beautiful work. Happy wireframing!

Lessons Learned
Site Best Practices, Content Repurposing, and Custom Reporting at Vassar
2012 Cascade Server User Conference
Atlanta, GA
September 18, 2012

Wordle

The first and most straightforward tool is a word cloud generator called Wordle.net. Word clouds are visual arrangements of words taken from an any text like an essay or speech. Certain words are given prominence in their arrangement through color, size or placement. I have used the text from this post to create this example.

Once I entered the text, I edited the case and chose to leave out common words that might clutter my cloud. I then chose a font, some layout options and palette. At the least, this kind of graphic serves as a quick scan of the content of a text but the effect is quite dramatic.

Many Eyes

The next tool, called Many Eyes, has many more features and works with spreadsheet data. Many Eyes requires you to create an account but it is still free. I used this tool to create a bubble chart seen as below. Each bubble represents comments submitted by conference attendees by category. The category’s bubble size depends on the number of comments per category.

I uploaded a simple spreadsheet with categories in rows and the number of comments per category in the corresponding column. The colors are random and I didn’t have much control over the appearance but I was able to use a screen grab of the generated chart as a starting point in Illustrator to produce the one you see. I left the colors as is and work with the text to improve the legibility.

Both of these tools allow you to create visually compelling graphics fairly quickly. Whether you want to analyze word usage in a text or provide a unique chart for some simple statistics, both tools are a great value and easy to use. By playing around with data visualization, who knows, you might learn something about your subject that you didn’t expect.

Next post, interactive information graphics.

I’ve found the following three apps to be especially useful. Maybe they’ll be useful to you too.

LittleSnapper

Realmac Software

I get a lot of good ideas from things I see online: illustrations, typefaces, site designs, colors, etc. Thanks to Twitter, blogs, and the discoveries of my excellent colleagues, I’m never lacking interesting and inspiring things to look at. The problem has always been where to put them.

I used to have an “inspiration” folder for stuff like this. The inspiration folder was a largely unorganized jungle of downloaded pages and images, which, while limitedly useful for locating things I remembered to look for, was cluttered and didn’t encourage casual browsing. The other problem was collecting things that weren’t easily saved, like a part of a web page or a shot from a video. That meant taking a screenshot, pasting it into Photoshop, and saving it – not impossible, but not very convenient. It was a mess.

I ditched inspiration folders after I found LittleSnapper. LittleSnapper is sort of like the iPhoto of inspiration folders: it takes screenshots (or any other images you want to add to it) and then organizes everything in a library. All images can be edited with a basic set of tools – shapes, text, and arrows for annotation – and shared via FTP or Flickr.

This might sound familiar if you’ve ever used Skitch. Both LittleSnapper and Skitch are screenshot takers with similar capture abilities – timed screenshots, full web page capture – and they both allow annotating and sharing shots, but the differences end there. Skitch is best for quick and easy annotating and sharing; LittleSnapper is a full-fledged scrapbooking tool for assembling an image or pattern library.

If you’re diligent about organizing – which I’m trying to be – LittleSnapper provides a number of ways to keep things findable, starting with its own built-in categories: “Screenshot”, “Illustration”, “Mockup”, and a couple of others. Conveniently, it’ll automatically categorize items if it knows their origin, classifying a screenshot as “Screenshot” or a saved web page as “Websnap”, and images can be tagged and assembled in smart collections.

Besides its organizing abilities, LittleSnapper comes with a built-in Webkit-powered browser. It’s not meant to replace a regular browser, but for sites with a lot of things you want to snap – like a Flickr gallery or portfolio – it’ll save a lot of switching back and forth between your browser and LittleSnapper. (You can also install the Safari plugin or Chrome bookmarklet for quicker access from your regular browser.) The built-in browser is great for snapping screenshots of entire pages, and it’s worth noting is that LittleSnapper doesn’t just save an image of the page – it also saves the page itself in webarchive format. If you ever want to review the original page, it’s right there in your library.

LittleSnapper can also select individual page elements – tags, paragraphs, whole modules – just by clicking them, no marquee-dragging needed. I’m in the process of building a pattern library, so a lot of times, there’s only one thing on a page I really want: an image, or a search box or comment form, or maybe an article layout. It’s a small thing, but if you’re going through an entire page of images and you want to snap each one individually, as I’ve done, clicking instead of dragging really speeds up the process.

You don’t have to have only one library. I’ve found it’s better to have multiple libraries for specific topics or projects, both for organizational and performance reasons. Like iPhoto, LittleSnapper can have multiple libraries, although, also like iPhoto, this feature isn’t immediately evident. There is no “New Library” command – the only way to create a new library other than copying an existing one is to hold down Option when launching LittleSnapper. Similarly, you have to switch libraries under “Advanced” in Preferences or, again, by holding down Option at launch time. It’s not that big a hassle but it’s still awkward, especially considering that having one huge library is not, in my experience, the best way to do things. My biggest library contains 3,119 images and weighs in at 3GB, and scrolling through it is noticeably laggy.

All in all, LittleSnapper is a really useful tool if you need to collect visual snippets and ideas. Check it out at Realmac Software or the Mac App Store.

Typecast

beta.typecastapp.com

I’ve never been satisfied with the way Photoshop renders type. No matter which anti-aliasing method is applied, text in Photoshop always looks choppier than native Mac or WebKit rendering, especially at smaller sizes. (Arial and a few others on the “sharp” setting look like different fonts entirely.)

So, not too long ago, I started incorporating browser-rendered type into my mockups. I’d put the text I needed on a page, style it with CSS, and paste screenshots of the result into my designs. It worked but it was hardly convenient, since I had to create a new kit in Typekit, host it somewhere so Typekit could find it, and then hand-code the associated type and layout CSS. I kept wondering how hard it would be to build a point-and-click web app for in-browser type styling.

Tim suggested I check out Typecast, a web app that does exactly that. It’s great for creating styled content that can be pasted into a mockup, but I’d say its biggest strength is making it easy to compare and experiment with different fonts. Typecast currently offers typefaces from Fontdeck, Fonts.com, Google Web Fonts, and Typekit, but accounts with these services aren’t required to try their fonts on Typecast. You can paste content directly into editable columns – or, to use the official Typecast terminology, “containers” – create as many containers as you need, and use any typeface from Typecast’s library. Containers can be widened or narrowed by dragging, and all the most common HTML tags – paragraph, blockquote, and headers – are available under a dropdown. (Typecast doesn’t include anchor tags at this time.) It’s pretty straightforward.

The design is nice. The container columns are arranged side by side on an otherwise uncluttered page, sort of like clippings on a wall, or a table with sheets of paper spread out on it. The horizontal scrolling feels a little unnatural initially, but Typecast has tried to mitigate that with numbered buttons in the upper left that jump to a particular column.

Typecast will also generate CSS from your styling. This is especially convenient if you need to quickly style something, like a WordPress theme with a nice layout and ugly type choices, or a site based on one of the bare-bones WordPress themes. At this point, though, it doesn’t go the other way – you can’t edit the CSS to style an element. Although CSS monkeying is admittedly what I was trying to get away from, there have been moments when hand-tweaking the CSS would have been quicker than working with the palette.

There are still a few rough edges, hence the “beta” in the URL, but I’ve found Typecast to be really useful even as a beta. They seem to be hard at work on improving it – they just added the ability to change the background color, which is a feature I’d wanted to see for a bit – and they’re extremely responsive about feedback. I think the final version is going to be pretty cool.

Check out Typecast at beta.typecastapp.com.

Fontcase

Bohemian Coding

I found Fontcase a little while ago while searching for font management software. Linotype’s free FontExplorer, which I’d been using up until that point, stopped being free, and I decided to hold off on buying it in case there was anything better. I’d liked FontExplorer, but after testing Fontcase, I decided to go with that instead.

If LittleSnapper is iPhoto for screenshots, Fontcase feels like iPhoto for fonts, down to the way fonts and font families are represented as tiles and mousing over a tile displays the different fonts in that family. Colored bars on tiles indicate whether or not a font is activated and what kind of font it is (green bar for user-installed fonts, yellow and black stripes for system fonts). Like any good font manager, Fontcase also has a number of organization features. Truth be told, I haven’t actually organized my fonts at this point since I can usually find what I need just by scrolling or searching, but if I was so inclined, I could create collections (similar to albums), genres (descriptive categories like “Sans”, “Script”, “Dingbat”, etc), and tags.

Fontcase also has a really nice type tester called Typesetter. Typesetter provides three templates where you can experiment with different combinations of fonts: Default (a series of headers with paragraphs), Header (a large header and sub header), and Columns (header, intro paragraph, and then two columns of text). You can’t modify the layout of the templates – add a third column, for example, or widen the columns – but they’ll still give you a sense for how well a particular font works on paragraphs.

Typesetter’s killer feature, however, is its ability to edit content and typefaces on web pages. Like LittleSnapper, Fontcase comes with a built-in web browser – enter a URL into the address bar and Typesetter will load the page, at which point you can edit all text on that page, as well as changing it to whatever typeface you want. One use of this would be to augment the somewhat limited templates I mentioned above by making your own templates and then loading them in the browser. (The templates need to be on a server, though – Typesetter won’t load local files, i.e. URLs that don’t start with “http”.) Also, Typesetter’s browser won’t display fonts from Typekit. If you’re testing a Typekit-heavy page, the text will be styled in whatever your backup fonts are. If you want to see how one of your own fonts would look in a layout, though, it’s extremely useful.

Get Fontcase at Bohemian Coding or the Mac App Store.

Got a tool or utility that makes your job easier? Tell me about it below.

The library’s website is one of the largest and most complex on campus, bringing together numerous search tools, catalogs, and a wellspring of resources and information. It’s absolutely essential that the homepage helps visitors not only recognize the abundance of content at their fingertips, but also quickly and effectively find what they’re looking for.

Vassar Library Website - Previous Design

Typically, a project like this could easily span a year. But, with many other projects in our queue and the Library’s site just a few years old, we opted to give the homepage a facelift while maintaining the overall style and structure of the design. My job was to reconfigure what was already there so it worked better for users.

Site statistics and the librarians’ experiences with students revealed that the yellow search box in the center of the page was getting plenty of traffic, but the main menus and “help links” (in the brown box) were being ignored. I tackled this in several ways:

First, I looked closely at the list of help links. The list had no label, no sub-labels, and no apparent organization. It was simply a list of links that were given equal weight but not necessarily related. The librarians had mentioned that students often asked for help finding these resources, so apparently the brown box was not being noticed.

BEFORE: Statistics and feedback revealed that the yellow search box was working well, but the brown box link panel to the left was barely noticed.

I began with reorganizing the links into related sections, giving each one a contextual title and the entire area the label “Quick Links.” Next, I decided to capitalize on the effectiveness of the yellow box by extending it behind the Quick Links. Using some subtle shading, borders, and gradients, I was able to make the entire list appear connected to the main search box, but still secondary content.

We also decided to move the entire area up, decrease the height of the main photo, and add arrows to the main navigation links.

Stats also revealed that the only link students were clicking in the main navigation was “Hours.” As a group, we chose to remove the page from the navigation and add a link with today’s hours to the header. This meant relocating the “Ask a Librarian” button—a very important link—to the yellow box. Placing it in the corner, at the intersection of lines, with an eye-catching button style will hopefully maintain its visual dominance.

AFTER: Reorganizing content, adding labels, and modifying the containing box help to give more clear direction to the search options and their related links.

When I started analyzing the organization of the page, I found that the word “search” was used inconsistently. For example, the yellow box contained three major search tools: Discover (a single-interface catalog search), the main Catalog, and Databases. However, buried in the navigation, you could find other search tools for journals and numerous off-site sources. Furthering some of the confusion, the “Search” link in the main navigation took you to a Google search page for the library website only. Everyone agreed that the search items needed to be labeled and grouped together more clearly, so we reorganized the Search navigation menu, and restricted the yellow box to all available search tools, with additional resources for searching located just beneath the search forms.

Because “Discover” was another way of searching the Catalog, we combined the two into one tab, letting users toggle between the two modes.

Lastly, I suggested moving the “My Accounts” menu—which was previously in the yellow box—up into the main navigation bar. Giving it a unique style and separation from the main nav reflects that it’s a related, but specific and contained list of links.

The Makeover Revealed: Check out the new Vassar Library Homepage

There were other small adjustments we made here and there, including adding a photo slideshow, reorganizing pages and menus, and restyling elements of the page for consistency with the new look. In the end, everyone is really pleased with the makeover, and we’re eager to hear how students and members of the Vassar community respond to the changes. Hopefully, visitors will be better able to find what they need online so that the librarians and staff can focus more on what they do best: serving  patrons with personal attention, advice, and insight that a website can’t yet offer.

Check out the library’s homepage makeover here.