Viget.com Blogs

Building a Traffic Heatmap with Google Analytics and R

Todd Moy — Tue, 14 May 2013 15:35 GMT

For all of the reporting power that Google Analytics provides, occasionally I want to see data in a way it doesn’t natively support. Most recently, I was interested in understanding hourly and daily shifts in traffic across sections of a site. Knowing when these occur could help authors time their publishing schedules for maximum exposure.

Here’s what I was looking for – a heatmap that boils a few month's worth of data into a weekly view. As you can tell from this example, traffic tracks closely to normal working hours.

My first thought was to pull the data in CSV form from GA, hack it up in Google Spreadsheets or Refine, and then chart it out. But I soon found that I couldn’t find a way to reproduce this chart using their stock widgets. I looked at D3 and a few other charting frameworks and, though I was impressed, I wasn’t ready to commit to that learning curve. Plus, I didn’t want to spend a lot of time pulling data exports from GA if I could help it.

Looking further afield, I remembered R.

Building it in R

R is a scripting / programming environment geared to scientists, statisticians, and data wonks. I had spent some time working through CodeSchool’s R Course a few weeks back, just to see what it did. At the time, I didn’t have a use for it but I figured it would come in handy later.

Sure enough, when I looked into it further, I found a heatmap function that would do precisely what I needed. And finding a post about connecting to GA data programmatically convinced me to spend a Sunday morning bulldozing through just enough R to munge data into the format I needed.

The result is a visually interesting, visceral illustration of how users are hitting the site. Here’s how you can get the same thing, while hopefully not burning part of your weekend along the way. Fair warning though - this tutorial is on the technical side and uses libraries that are still in development. Caveat all the emptors!

Assembling your materials

Here's what you'll need to get started. This assumes you're running on Mac OS X.

Download and install R - this is the core binary for the language. Their site is a frameset nightmare, so I linked directly to UC Berkeley's mirror.
Download and install RStudio Desktop - this is an IDE that runs atop R. It's free and makes working with R much easier.
Get a copy of the heatmap script - once unzipped, this should give you the source code needed to create a heatmap.
Download RGoogleAnalytics 1.2 - this is the library that helps us connect to Google. Get the tar.gz version; we'll use this later. Edit: Version 1.3 was posted a few hours ago and after a cursory look, it seems to work too.

Once you have all these, launch RStudio and take a deep breath. It's about to get real.

Installing the libraries

We use two major libraries in this script: RColorBrewer for producing sane color schemes and RGoogleAnalytics for getting the data. The latter relies on RCurl for network requests and RJson for parsing the data returned.

Installing RColorBrewer, RCurl, and RJson

Most libraries in R are super-easy to install. Just issue a command and R installs the right thing from the Comprehensive R Archive Network (CRAN). Let's do it now.

Navigate to the Packages panel and click Install Packages. In the dialog that follows, type rjson, RCurl, RColorBrewer into the Packages field. Confirm the other settings match the screenshot below and click Install.

The installation process will write its status to the RStudio console. Once it stops, you should see a line that states that the downloaded binary packages are located in some byzantine path on your machine. Don't be afraid: this is good and signifies that they were installed properly.

Installing RGoogleAnalytics

Sadly, it's not the same process for RGoogleAnalytics. That library is still under significant development and, as a result, we'll need to install it from the file you downloaded earlier.

With RStudio open, open the Packages pane and click Install Packages. Choose Install from package archive and select the library you downloaded earlier. Once you're ready, click Install.

Once it's done, the console message should look similar to the previous step. For me, however, it complains that the package isn't available for R 3.0 but then soldiers forward and installs properly. I haven't traced down the cause but, if you know it, let's discuss it in the Issues.

Running the script

Connecting to GA

Provided you made it through the above steps mostly unscathed, we're now at the fun part. We're going to open the project, step through the code, authenticate to Google, and make a diagram.

Open the Google Analytics Heatmap.Rproj project in RStudio using the project menu, then open traffic_heatmap.R from the Files pane. We'll do most of our work here.

RStudio can execute code all at once or line-by-line. Because part of our script asks for user input, we want to move line-by-line. To do this, first ensure your cursor is on line 1 in traffic_heatmap.R. Then hit “⌘-Return” to step through each line in succession. Alternatively, you can click the Run -> button.

Do this until you execute the following line.

ga <- RGoogleAnalytics()

Once this line is run, Google’s OAuth Playground will appear in your default browser, asking you to authorize access. It uses the current active account so, if this is different from your GA account, you may need to log into that first and rerun the last line.

Once done, GA will allow us to exchange the authorization code for an access token. Do this, then paste the resulting token at the prompt within the RStudio console.

Choosing your profile

Since each GA account can manage many different profiles, you will need to choose the one you care about. Stepping through the code with ⌘-Return, you'll encounter this line.

( ga.profiles <- ga$GetProfileData(access_token) )

Running this will echo the profiles that you manage in GA. Find the number of the profile you want to use. This will be the number in the far left column.

1      2219134   www.example.com
2    239481199   www2.example.com
3    232342324   beta.example.com
4        47342   legacy.example.com

Querying and displaying

Now we can get some data. First, replace the "1" after my_profile with the profile number you just chose. You'll probably also want to change the date range.

my_profile    <- 1           
my_start_date <- "2013-01-01"
my_end_date   <- "2013-03-31"

Once you're satisfied with that, move your cursor back to the my_profile <- your_profile_number line. Step through it and the rest of the code. You'll know you're on the right track when you see the following written to the console:

> ga.data <- ga$GetReportData(query)
[1] "Your query matched 168 results that are stored to dataframe ga.data"

The code thereafter cleans up the data and modifies its format to something the heatmap chart can use. You can step through it as fast as your fingers will allow – there's nothing else to change.

Once you're done, you should see the chart appear in the Plot panel. From there you can export the file to a format you prefer.

Whew, that's it. You're done.

In Conclusion

While the initial investment of time was high – Sundays are in short supply! – it's trivial to run this again. Because of this, it becomes incredibly easy to:

compare different sections of a site
map unique visitors instead of pageviews
look for time drifts in device usage
gauge uptake from social media efforts

Essentially any dimension, metric, or filter available through the GA Reporting API can be used. So have fun experimenting with it.

If you run into technical problems, I'll do my best to help out but I'm still learning too. Feel free to add any issues you encounter here. Same goes for any enhancement ideas. And if you're a benevolent R wizard who wants to improve my code, fork it and send me a pull request. I'd be much obliged.

Oh, and by the way, we're hiring!

We're looking to grow our UX team in all three of our office locations. Check out our UX Designer job listing and, if you think you're a fit, please get in touch!

Single-click layer exporting in Photoshop

Dan Tello — Tue, 14 May 2013 14:37 GMT

Use this sweet photoshop action to save out layers and groups with one click.

One of the most repeated tasks in the build-out process is saving out an individual asset in the comp as a .png or .jpg. If you ever find yourself repeating the same sequence of actions over and over again in Photoshop, STAHP, and open up that dusty actions pallet.

Before we get into actions, lets compare two ways to do this manually...

A bad way:

Turn off all the layers behind it your asset
Use the slice tool
Zoom in 1000% to make sure you're not cutting off any pixels, or leaving any blank ones.
Save for web
Delete all of the non-slices you just accidentally exported along with the one slice you did want, because you forgot to customize your export options.
Remember which layers you hid to export that one piece, and re-enable them.
Delete the slice you created that's overlapping another asset you need to cut out separately.
Have an emotional breakdown as you realize you must repeat this process 99 more times today.

This was my terrible work flow years ago. Let's never go back there, friends. There is a better way.

A better way:

The best thing about this workflow, is that it's COMPLETELY automatable, meaning we can turn this in to a reusable action.

Right click on the layer or group title and click "Duplicate Layer/Group"
In the dialog that pops up, change the destination document to "New" and hit ok.
- Now you have a new photoshop document with just that isolated asset!
In the menu bar, select Image > Trim... > Transparent Pixels
- Now your document is exactly the size of your asset, to the exact pixel
Save for Web (works cleanly since you're saving the whole document - no accidental extras or generated filenames)
Close your document.

And now you're back to your pristine Photoshop file, with your perfectly sized asset saved out and ready to go. There's nothing to undo to get back to where you were.

Now, let's look at how to set that up as an action.

The BEST way:

Press F12

One keystroke, name that file, and you're onto the next one. How you do dis, you ask? ACTIONS my friend. Saving the steps listed in "A Better Way" as an action with a shortcut key is SUPER easy.

Here's how:

Select the layer or group containing your asset
Open your actions palette (window > actions)
Hit the "Create New Action Button", and name it. (I called mine "Asset to File")
Press record (figure a. below)
Carefully repeat each step listed in "A better way", including closing the document
Hit the stop button (figure a. below)

Your new action should now look something like this:

Make sure to switch on the "dialog on/off" toggle box next to "Export" (figure b.). This tells the action to pause when the save for web window appears, so that you can change your settings and name your file before exporting. At this point, you can use your action on another asset, by selecting it, and hitting the play button (figure a.)

The last step is to assign a function key.

Select your action in the actions palette
Open the actions palette context menu (figure c.) and select "Action Options"
Choose a function key (and an optional modifier key if needed)

To save you some time, I've saved out this, and an alternate version of this action for you to download here. The alternate version only opens the layer in a new file and trims it. I bound this to shift + F12, and use it when I need to isolate the layer, but make adjustments before saving.

That's all I got! You now know how to make actions, and how to save out any layer or group with the press of a button. What are some of your favorite time-saving actions? I'd love to hear what tricks you guys and girls are using to speed up your build-out workflows.

SXSW, Part of the Process for Getting Enlightened and Energized

Blair Culbreth — Thu, 28 Mar 2013 17:37 GMT

What I find lovely, both times I've been to SXSW Interactive, about a conference so large and diverse is seeing the connections between wildly different sessions. This year one of the overwhelming themes was process. What I first heard in a panel about web typography was repeated in a panel that covered the early days of NASA. The same point made in a responsive design panel was echoed in a discussion about wearable devices. And so on...

So processes! How we learn, how we teach, how we advance our industry and ourselves, why something works or doesn't work, what we're aiming for and where we are in the meantime. There was much introspection and celebrating of the journey, more so than the destination this year. The panel for 100 Year Starship beautifully summed up the merit of examining how we're all working, growing, and how we'll carry on in the future:

Pursuing an extraordinary tomorrow creates a better today.

Here are some ways that pursuit was illustrated at SXSW this year:

Of course, responsive design was a big topic this year. The consensus was that no one has the best process for creating a responsive site nailed down just yet. Which is a good thing! We now have an opportunity for designers and developers to rethink how they collaborate and how to create responsive sites that use responsive to its full, creative potential.

Always look for ways to grow. Here's maybe my favorite thing I learned this year: a person has either a fixed mindset or a growth mindset. Those with a fixed mindset see their intelligence, skills, and abilities as built-in and static. Those with a growth mindset see them as things that can be developed with hard work and learning. As a result, the work of those with a fixed mindset is static. They aren't as interested in alternative points of view or negative feedback. Meanwhile, those with a growth mindset are sponges for criticism; they want to know how they can do better and how others before them have succeeded. Seek honest feedback and perspectives that challenge your own, not just praise and reassurance, and your creativity and quality of work will grow.

Study and share processes, not just finished products. Whether it's a site, app, or a planet outside our galaxy, we can learn so much more from their growth than from just studying their final state. Every project has a story full of successes, failures, and breakthroughs that are valuable. Show a man a nice site, and he learns how to create an inferior, derivative site. Teach a man how a nice site was made, and he learns how to create nice work of his own.

Embrace your silly and side projects; you never know where they'll lead. Whether it was science hack days or just doing something about one of life's little annoyances, silly side projects were stars this year. Why do them? Even if it's a weekend-long project that goes nowhere, it's a chance to play and try new things you wouldn't get to otherwise. Best case scenario: your bit of fun ends up being the first step in a process that ends with helping scientists detect cosmic rays in a cloud chamber.

The space exploration sessions were not only a highlight of this year's lineup, but also a fitting reminder why it's important to view our work and processes as works in progress that we're always rethinking. Space exploration has always meant pushing our technology to its limits to reach far beyond our planet. And the further we've reached out, the more we've seen there are no limitations. There is no final end-point to the universe, only another journey that take us further out than our last one. Similarly, there is no end-point in our field. There's always something to learn, a problem to solve, and a tool to use today that didn't exist yesterday. Just doing what worked yesterday is no fun. Pursue an extraordinary tomorrow, and you'll be better for it today.

The Process of Being at SXSW

To visually bring you a piece of the SXSW experience, I could attach blurry photos of LeVar Burton (but I already did that.) Instead, here are some hopefully more informative visuals. First up, everyone should know my pain when it came to choosing between three or four sessions all taking place at the same time:

Wearable and self-tracking devices were a popular topic this year. Formally, this meant several exciting sessions. Informally, this meant I wore my FitBit all week and kept announcing to everyone how far we'd walked, whether they wanted to know or not.

And just where were we doing all this walking to? Well...

Your SXSW Homework

Should you choose to accept it, here's a list of assignments as varied as the sessions themselves.

Do something fun and silly with responsive or adaptive design. Prove the complaints that responsive is just boring box rearranging wrong.
Read Carol Dweck's original study about growth and fixed mindsets. Or at least get the gist of it from the slides for the session Why Your Brain Needs Negative Feedback.
Create something classy with CSS Clouds.
If you run, jog, walk, or hike, play Zombies, Run! and experience one of the best examples around of an experience that marries narrative and technology.
Look at all the awesome stuff we can do with typography on the web!
Watch When We Left Earth: The NASA Missions on Netflix Streaming. Because it's beautiful and inspiring.

An Unlikely Hanging Quote Mark

Jeremy Frank — Wed, 27 Mar 2013 13:42 GMT

On a recent project, the blockquote style that the designer put together seemed to be using a different typeface for the hanging quote mark, than for the text. The text below is set in Lato and you can clearly see the difference in the comp version on the left and the Lato quote mark on the right.

Don’t Waste Time, Just Ask The Designer

After spending some time unsuccessfully trying to find a typeface match for the quote mark, I asked the designer. It turns out that the custom quote mark IS set in Lato. However, it’s simply two commas doubled up next to each other and rotated 180°. We actually can do this in CSS by using a few different tricks, but first, the base styling.

Base Styling + Rotation

Writing the CSS to style and position a hanging quote mark is pretty straightforward. Nothing too complicated here, but note the content and transform properties below (vendor prefixes omitted for brevity).

blockquote p {
  font-size: 24px;
  line-height: 1.5;
  font-family: LatoItalic, sans-serif;
  margin: 0 0 .7em;
}

blockquote p:first-child:before {
  content: ',,';
  display: block;
  float: left;
  font-size: 2.6em;
  line-height: 1;
  margin-left: -.6em;
  transform: rotate(180deg);
}

Of course this won’t work so well in browsers that don’t support CSS transforms, but we can easily test for support using Modernizr, and provide a similar and acceptable fallback.

.no-csstransforms blockquote p:first-child:before {
  content: '“';
}

And there we have it; unconventional custom hanging quote marks using commas, without resorting to using images, extra webfonts or custom icon fonts.

Other Possibilities

Using transforms on individual characters like this can magically make additional characters available for use, such as: rotating single and double “angled” quotation marks (‹, «, », ›) 90° to create up and down pointers. It’s also quite possible that rotating stacked characters from :before and :after pseudo-elements, can produce some interesting iconography. However, with minor rendering inconsistencies among different platforms, browsers and typefaces, that level of complexity would warrant the use of an svg icon or a custom built icon font instead.

Get Stronger Through Rest

Minh Tran — Mon, 18 Mar 2013 14:58 GMT

"You don't get stronger on your training days. You get stronger on your rest days."

I feel this adage holds true in many disciplines, especially the two that I'm most passionate about: designing and rock climbing. But make no mistake, resting can be the hardest thing to do. When you're passionate, driven, and experiencing adrenaline and success, stepping away seems like a setback. Add a looming deadline or an upcoming competition, factor in major stress, and rest can seem irresponsible. As creative professionals, we tend to engulf ourselves in our work, but we hamstring ourselves in debatably the most crucial part of the design process, stepping back and re-evaluating.

Mind and Body
When we're passionate about any activity, we engulf ourselves in what we enjoy. We seek to push ourselves to our limits. I push myself to the limit when I train for climbing, with the goal to get better and stronger.
More often than not, as we engulf ourselves in these activities, overtraining occurs. Training injuries are one of the most common injuries in sports, because, well – we get too psyched.

Pushing ourselves mentally is no different. Think of your creative muscles as another muscle group. We go through the same processes in training. We work within limits that our body sets for us, and develop training patterns. Like our physical muscles, our mental muscles need time to recover from the stress that we place on them.
Without integrating recovery time into our physical training, we get repetitive stress injuries. Without integrating that same recovery time into our creative training, we burn ourselves out.

The Benefits of Mental Rest
Mental rest isn't just about preventing injury. Giving ourselves time to recover mentally allows us to step back and be more intentional about the decisions we make on a daily basis. For design, that applies to being more intentional about decisions on layout, type, concepts, ideas, or plans.
I always try to remember that the world is my muse, and I limit myself when I limit my exposure to it. I can't grow creatively and mentally by just sitting in front of my computer at work and at home. I've got to try to step away and be inspired by my co-workers, friends, and family. I've got to take vacations and explore the world around me, get my hands dirty every once in a while. We must wonder, question everything and stay curious, that can't happen if we don't step away from our computers, make room for rest, recovery and reflection.

While you crank through your work, email, and meetings to meet deadlines, remember to break it up. Find solace throughout the day to pay attention to all the decisions and actions you have made and are going to make throughout your day. Revere the weekends; have fun. Make time to go out and enjoy other activities. Take vacations; travel and go places out of your comfort zone.

Don’t be fooled. Hard work is what defines our lives and what we do, but rest molds us and sustains us.

What a car rental taught me about UI conventions and bug reports

Josh Korr — Fri, 08 Mar 2013 14:16 GMT

My wife and I recently rented a cute li'l Fiat on vacation. The car wasn't really big enough -- we had two suitcases plus a part-time guitar -- but how could we pass up something so darn cute?

We had some good times with that Fiat. We laughed, we cried, we briefly went insane in the darkness of its hideous blind spot.

Most importantly, I learned two things from that snub-nosed rascal that are relevant to Viget.

Lesson No. 1: Be Smart When Breaking UI Conventions

I learned this lesson twice.

The first instance came minutes after we got in the car. We buckled our seatbelts. I turned on the car. Played with all the buttons and dials, natch.

I reached to lock the door -- and realized there were no inner locks.

In fact, there were no buttons, tabs, or switches of any kind on the inner door. But while we easily found the window buttons on either side of the gear stick, we could not figure out how to lock the doors from the inside.

It took a day before I figured it out. We knew to pull the silver handle to open the door. Turns out you can also push in the door handle, which locks the doors and helpfully reveals an "I'm locked!" red strip.

The second instance happened a couple days later. My wife called from the road, worried that the car wasn't going faster than 40 mph. After a slow ride home, we realized she had accidentally put the car in first gear. She didn't realize it because while the gear stick label says "D," apparently sometimes "D" means "1." <Shakes fist at Fiat.>

More specifically: The gear stick is the kind that moves along a predefined but back-and-forth path, making a satisfying ka-chunk when it lands in each gear's slot and giving automatic drivers the illusion of driving a manual. When you ka-chunk down to the "D" slot, there's an option to slide the stick to the left. If you do that -- despite the stick now being directly adjacent to the giant "D" -- you've actually switched into first gear. The only way to know this is to look at the digital odometer. (You can then tilt the stick down or up to a "+" or "-" to go into second gear, back to first, etc.)

In both instances -- the lock mechanism and the gear stick -- Fiat broke with design convention in non-intuitive ways, and did not provide any guidance or cues to help users understand the new conventions.

The door lock design is at least a good new design convention; it's an elegant way of reducing buttons -- and therefore user movements -- without reducing functionality. But the gear shift seems like both a bad convention and bad design. It introduces confusion without reducing the number of user movements needed to shift gears.

The takeaway for web design: if you're thinking about breaking with longstanding user interface conventions, make sure the new convention is actually better. And if it is, consider giving users a little help in acclimating to the new convention.

Lesson No. 2: Steps to Reproduce Are Key for Bug Reports

My wife's phone call about slow driving was effectively a bug report -- and a reminder of the importance of detailing steps to reproduce when reporting a bug.

A bug report's basic format is: "I did A (and B and C...), expected Y to happen, but Z happened." For those of us trying to diagnose bugs, it's crucial that "I did A" lists the discrete steps a user took before encountering the bug. That way, we can take the same steps the user took and try to reproduce the bug.

In many cases, though, "I did A" is a user's interpretation or mental model of the actions taken, rather than the actual actions taken. As I've written:

Mentally, we elide the multiple discrete steps that make up any experience, whether in the real world or on a computer. We think, "I turned on the car," rather than, "I inserted the key into the ignition, depressed the brake, and turned the key three clicks to start the engine." We say, "I checked my email," rather than, "I typed 'www.gmail.com' into the web address bar; then I entered my username and password, checked 'Stay signed in', and clicked the 'Sign in' button; then I clicked the 'Important' subnav link in the left sidebar."

But it's very hard to accurately guess the steps a user took -- and hence hard to reproduce and diagnose a bug -- based on the user's interpretations and mental models.

In my wife's case, she said "I put the car in drive" -- her interpretation of what she did. The actual steps were: "I ka-chunked the gear stick down to the 'D' slot, then slid the stick to the left." Once we thought about the discrete steps, we were able to reproduce the "bug" and realize what happened.

For those of us who report bugs to developers, it's crucial to change our way of thinking so we can break down experiences into discrete steps -- and so we can solicit these steps from users who submit bug reports to us.

Art Direction: Be a Sherpa, Not a Shepherd

Tom Osborne — Wed, 20 Feb 2013 15:34 GMT

What is Art Direction?

…it is the charge of a sole art director to supervise and unify the vision. In particular, the art director is in charge of the overall visual appearance and how it communicates visually, stimulates moods, contrasts features, and psychologically appeals to a target audience. The art director makes decisions about visual elements used, what artistic style to use, and when to use motion. (Source: Wikipedia)

From My Point of View

There are many ways to look at what it means to provide art direction. I prefer to think about it this way. Basically, any time someone is transferring vision or direction of how something should look and feel to another person to help execute upon, that is art direction. It is then the role of the Art Director (the one providing the vision) to help guide the vision and see it through.

Directing By Doing, Not Dictating

At Viget, this means doing. Here the art director is also the lead designer. From rough concepts to compositional designs, she gets things started. The range of what is needed upfront to help transfer vision varies depending upon the given task. It is rare that multiple designers are needed on our projects; but, when they are (our work on PUMA for example), it’s the responsibility of the lead designer to provide art direction to the supporting designer or designers.

It is never a case of telling someone how to design without getting dirty first. Without taking time to better illustrate abstract thoughts, you’re simply providing critique, not art direction. A good art director is a good guide, translator, mentor, and leader. A good art director is a sherpa, not a shepherd. A shepherd guards. A sherpa guides.

Often, in order to get the intended results, it is necessary for a lead designer to show supporting designer(s) something beyond abstract thought – a visual (or series of visuals) is needed to help guide the process. As a result, we often begin with sketches or inspiration boards as a starting point. Once we have a client's blessing to proceed in a direction, the process continues with more formal art direction and regular critique to keep things moving forward.

While any designer can provide art direction, not every designer can art direct well. Becoming a good art director comes with experience. It usually involves getting things wrong before getting things right. Over time, the cycle of getting things right and wrong builds wisdom to better know which ideas are strong and which are weak. This is especially true in client-facing situations and why you’ll find our experienced designers with more opportunities to provide art direction.

Learning From Bad Examples

The title of "art director" is meaningless when it's not part of the role.

In my first design job out of college, I was so excited to have the title of Art Director on my business card. There were only two designers and my colleague was the Creative Director. The problem was that neither title meant anything because we rarely worked on the same project together. We were both, very plainly, designers. I later removed the title from my résumé because my prospective employers were confused by the title in association with my youth and lack of experience.

Good Art Directors don't hover.

Many years later, I worked at a large corporation. I was again excited to have finally earned an Art Director title and position. What it meant was that I was invited to more meetings and had a team of people whose designs I would supervise. I did very little designing of my own. I believe that is more design management than art direction.

I do not believe you can art direct yourself – you just, simply, design.

The term “art-directed design” has been used recently to describe blog posts where each entry has a unique look and feel. The basic premise is that every article is custom-designed to reflect the content of the post editorially. Though the result is usually quite beautiful, to me, this is not art direction. These are examples of editorial design.

Art Direction Is a Transferrable Act

I've learned that art direction is more than just approving work. It involves solid direction and often that means getting things started, showing where things can go, and clarifying direction through supporting visuals.

Better With Experience

I’ve noticed that different people have different perspectives about what is and isn’t art direction. I believe that art direction can be an amazing growth area for a designer because it involves working with other people and it takes effort to get good.

Good art direction is something that comes with experience. At its worst, it’s uncomfortable and deflating. At its best, it’s rewarding and empowering. It’s in the uncomfortable moments that we seek knowledge from our mentors to help us improve. It’s the rewarding moments that give us as individuals and as teams the courage to continue.

I feel fortunate to work at a place where we have the opportunities to lead with vision while also following where needed. I love that I work with a team that understands that good art direction takes commitment, practice, and support to get better over time. Most importantly, I love that I work with sherpas, not shepherds.

Also check out Dan Mall's ALA article, Art Direction and Design, which is one of my favorites on this subject.

Art Movements and Web Trends (and Gratuitous Mucha Posters)

Blair Culbreth — Wed, 06 Feb 2013 17:23 GMT

Art Nouveau was popular in the very end of the 19th century, into the beginnings of the 20th century. It affected all branches of fine art and design. Before Art Nouveau, anything that wasn't painting or sculpture was considered an inferior art form. It sought to establish that ads, architecture, furniture, etc all deserved just as much craftsmanship and good design.

As it rose to popularity, Art Nouveau was considered new, modern, and young. It was characterized by natural, organic forms and shapes. The goal of all these curving, flowing shapes was to create buildings, environments, and furniture that was an extension of the natural environment around it. Designers emphasized high quality craftsmanship over sloppy mass production, and form that follows function above decoration just for decoration's sake.

(Nestle and Job advertisements by Alfons Mucha. Cafes Torrefies by Henri Privat-Livemont)

In architecture and furniture, designers used iron, glass, and wood in unconventional ways to achieve this beautiful, decorative aesthetic.

(Paris Metro entrance designed by Hector Guimard)

In spite of how popular and influential Art Nouveau became, as a movement it was relatively short-lived and really, what it best did was transition design from the 19th century to modern styles. It had meant to get away from clutter and pointless decoration, but as artists and designers took it further, that principle seemed to go by the wayside. And as World War I approached, the inefficient and expensive way architecture used its medium no longer seemed worth it. Iron and glass had more important things to do, like fight the Central Powers! Bauhaus, Art Deco, Plakatstil, and other styles that were more streamlined, geometric, and matter-of-fact took over. Decoration and ornamentation were suddenly out; stark, minimal design that focused intensely on function over form was in.

Bold, strong shapes! Advertisements that showed the product, not half-naked ladies! (Dubonnet ad and Normandie poster by A.M. Cassandre. Manoli ad by Lucian Bernhard. Binaca ad by Niklaus Stoecklin)

Today, Art Nouveau still influences designers. Just as Bauhaus, Mid-Century Modern, Pop Art, and other past art movements simultaneously do the same. They're constantly being reimagined, remixed, and reinterpreted in ways to best suit the needs of a design.

Art Nouveau experienced a bit of a psychedelic revival in the 1960s. And Art Deco is always being tweaked and used in new designs. (Fillmore poster by Bonnie MacLean. Saville poster by Hapshash and the Coloured Coat. Black Keys poster by Shepard Fairey)

My Point Being…

Digital and web design as a medium is young. Really young. The fact that it is even recognized as a real medium, one that deserves the craftsmanship and quality of design as any other medium, is still a relatively new accomplishment. And it's changing and evolving every day, just as technologies and our relationship with them are constantly new and different. So it's natural that periods of transition are sometimes needed; what we need from the web and our devices changes. Our digital language is constantly changing. At one point in time, we needed a calendar on a computer to look like a calendar on a desk, because what the hell does a computer calendar look like?!

The never-ending evolution. Once upon a time, Lotus Organizer looked amazing. (Lotus Organizer, iCal, Anchor)

We have needed to take nature and extend it into UI, site design, apps, into all things interactive, so that this new and foreign thing is relatable and familiar. So that our definition of what is a part of our natural world is redefined. So, fashions come and go. We get excited about one thing, take it too far, then course correct. From this we're constantly learning strengths and weaknesses of different styles.

Art Nouveau, at its best, is beautiful, functional, and richly elegant. Skeuomorphism has the same capacity. (Is now the part where I link to 76 Synthesizer? Yep.) And our historically heavy reliance on visual metaphors has served a purpose. It bridged the gap between our natural and digital environments. That linen texture, the first time you saw it on an iPad, helped you emotionally connect to this new, alien device.

Flat design feels exciting and new right now because it is a visual shift. It represents a new relationship between users and their devices. One that is, visually, more streamlined, matter-of-fact, and honest. It doesn't hide the medium behind these visual metaphors; it embraces it for what it is. It dares to assume that it doesn't need visual cues from the real world to feel comfortable, familiar, and engaging.

So does this mean creating flat designs will always generate work that's trendy or forward-thinking? Does it mean skeuomorphism is always dated and tacky? Neither. It just means we, as an industry, have lately been consciously focusing on another option in our collective toolbox. Though it may start to feel like overkill, this reflection on our evolution is worthwhile. We have a fuller picture of the directions that are available to us. Whether the best solution for a project is to go west, into untamed, wild flat territory, go east and find a new, fresh perspective on the classics, or Robert Peary out and be the first to trek into uncharted northern lands. We explore what's out there to become better navigators and conquerers of the vast terrain ahead of us.

As we start reinterpreting and remixing digital design trends, we'll begin creating solutions that aren't trendy at all. They'll simply be the best solutions for a project.

Bounce Back: Become A More Resilient Designer

Mindy Wagner — Wed, 30 Jan 2013 16:48 GMT

February is almost here, which means I've had a month to reflect on the past year’s successes and failures. My days slide by quickly, so I try to slow down at least once a year to focus on the big picture. It’s encouraging to see all that I did accomplish (yay me!) and it brings clarity to the things that still need work - helping me decide what next year's goals should be.

Looking at my professional life in 2012, I’m happy to see lots of wins. But I also see something big that I’m putting on the must-fix list. I fell prey to negativity on two challenging projects. It happens to everyone from time to time, but it’s a waste of creativity and energy and I certainly don't want to let it creep in again. Since I’m a “project person”, I decided to get my hands on some reading material and research ways to combat it.

Positive psychology sounds like a creepy cult thing, but it’s not about Stuart Smalley style affirmations or kitten posters at your desk. Although that sounds awesome too. I find reading about how our mind works (and how we can manipulate it) to be fascinating - and encouraging. Most of it is common sense stuff. But how many of us spend time intentionally making ourselves happier? We go to the gym and eat our veggies, but ignore our happiness level unless we get to a very bad place. Once you start thinking about it, that seems pretty silly.

I went down the rabbit hole, consuming everything I could find on the topic. Boiling down all the research I’ve done in the last few weeks, I’d sum it up like this: A huge chunk of our happiness (or unhappiness) hinges on our resiliency. And your personal resiliency can be improved.

That’s great, right? It seems we’re not completely doomed by some genetic happiness setpoint. In fact, experts in the field believe about 40-50% of personal happiness is within our control.

What Is Resiliency?

Psychological resilience is your ability to cope with stress and adversity, and to adapt in the face of negative experiences. Being resilient doesn’t mean you’re unbreakable; it means you bounce back well.

Resilient people accept that they will sometimes fail, and that those setbacks are transient. They understand that not all failure is personal, and that even the most personal of failures will have benefits. Instead of dwelling on mistakes and should-have-dones, they view failures as opportunities to learn and grow. This mentality helps them take a few hits and come back stronger.

Why It Matters For Designers

Designers who are happy with safe, predictable solutions - those who see design as just, well, work - don't have to struggle nearly as much. But for those of us emotionally invested in our designs and in trying to move the web forward, failure is inevitable. We need to deal with those failures the right way so we can continue to push boundaries.

It’s no secret that this career path is hard on your ego. We’re constantly in the line of fire. It’s expected that our work will be questioned, challenged, and perhaps undone. For every big win, there will no doubt be a handful of tough losses. You’ll have awesome ideas that never see the light of day. You’ll run up against challenging clients who question every tiny decision you make and committees who can’t agree on anything, including your work. You’ll fail repeatedly in ways both big and small. It’s just part of the job.

To be a great designer you need to be able to cope with rejection and dismissal more gracefully than most. Because when that rejection happens, you need to move forward and create the next awesome thing that will get the client (and you) excited.

Resilience will help you to be:

Open-Minded
When you receive frustrating feedback or a project takes an unexpected turn, you feel a sudden loss of control. Humans naturally crave control, so any threat to our sense of control over a situation is uncomfortable. In response, we feel an immediate and instinctive rush of emotions. We want to shut down and refuse to change. Stress and conflict can greatly inhibit our creativity.

Resiliency lets us stand back, evaluate the situation, and come up with a solution that is equally good - or maybe even better - than the one we first proposed. If you can manage your negative emotions, you can keep a clear head and an open mind.

Engaged
When a project gets frustrating, it’s hard to keep your passion for the work. As negative experiences pile up, it is natural to begin detaching so that the failures are less painful. This is, of course, absolutely no good. We need passion to do great work, and to enjoy doing it.

Resiliency can keep you from feeling helpless. It gives you the energy to dig deeper, take decisive action, and stay motivated in the face of obstacles.

Confident
It’s easy to let design critiques chip away at your confidence. The work we produce can come off as fairly subjective. It can feel difficult to measure or prove how good it actually is. Even the most successful designers I know get insecure about their work sometimes. But confidence is essential for a designer. You need to take risks, be bold, and successfully sell your solutions.

Resiliency helps you stay positive so you will believe in your design skills even when they’re being challenged.

To have a long, successful, and most importantly enjoyable career as a designer, you need to build up your resiliency.

How Can We Be More Resilient?

Some people are more naturally resilient than others, but everyone can learn to be more resilient than they are right now. Research has shown you really can train your mind to be more positive. You can cultivate good feelings and learn better mental habits. It’s all about self awareness and self regulation.

Simple ways to improve your resiliency as a designer:

Be Positive - Even If You Have To Fake It
Your brain has plasticity, which means you can change how it processes things. You can actually become more positive by acting as if you are a more positive person. It sounds crazy, I know. But science says it’s true, and I believe in science.

Being positive is hard. Sometimes, you just can’t make yourself feel positive no matter how much you want to. But for starters, you can avoid acting outwardly negative. Because venting to others doesn’t seem to truly relieve bad feelings. Instead, studies show it makes you feel even angrier - and it makes others around you feel worse too. So skip the big rants and try to pretend you’re not seething inside, because “fake it till you feel it” has been proven to work. Studies show even a faked smile actually makes you happier. And people using botox are less prone to anger because they can’t make angry faces!
Be Flexible
Don’t fall into the common designer trap of all-or-nothing thinking, interpreting everything as either perfect or terrible. There are always shades of gray. Accept that change is a part of good design. That others might have great suggestions. That your first solution might not have been the best one.

Flexibility is an essential part of resilience. Resilient people see setbacks as an opportunity to branch out in new directions. If a design you love gets rejected, try to see it as a chance to come up with an even better design. There are many ways to solve any given problem, but we often get locked into the first thing we come up with. Think of it this way - finding alternate solutions to will force you to grow as a designer.
Believe In Your Abilities
When our work is dismissed, it can feel as though our self (and not just our design) has been rejected. Deep down, we start to wonder if the client thinks we’re stupid or talentless. But nine times out of ten the dismissal has more to do with politics or hidden agendas than it does your work. And even if they do think you’re a no-talent goofball, it doesn’t mean they’re right.

Resilient people tend to see failures as temporary and specific. They don’t think “I failed this, so I fail at everything, and I’ll continue to fail forever and ever.” Their confidence in their abilities can weather a few storms without being eroded. But building up that thick skin takes practice. When you begin to doubt your abilities, stop and make a list of similar obstacles that you successfully overcame.

If you believe yourself to be competent, you’ll stay creative and keep trying. If you believe yourself to be incompetent, you’ll almost certainly get stuck. Guard your confidence fiercely.
Find Meaning & Celebrate Wins
Happiness isn’t just about positive experiences. To be truly happy, humans need to feel like what they have done is meaningful and valuable.

It’s easy to focus on only the negative when a project starts to go badly. Be intentional about stopping to notice the wins and successes. Revisit past successes when you’re feeling negative, and try to reframe failures. Much of our takeaway feeling about a project comes from how we tell the story. If we keep telling the story in a more positive way, we’ll remember it that way later on.
Seek Out Support
Strong personal relationships are incredibly important to resiliency. So occasionally, get out from behind your desk and work on building and maintaining good relationships with your team and/or professional peers. If you have your own cheerleading squad waiting in the wings you’ll know where to go when you need motivation. They’ll remind you just how awesome you are and stop you from sliding into a dark place.

To Sum It Up

Designing for real clients and real projects will always come with challenges, and there’s not much you can do to change that. But you can change how you view and respond to the curve balls Simple shifts in thinking can produce pretty profound effects on your mindset, and in turn your work and professional growth. So embrace adversity, hone your coping skills, practice resiliency and remind yourself: This too shall pass.

Want extra credit? Here you go:

Dr. Martin Seligman’s Authentic Happiness program at UPenn

The Build and Broaden Theory (PDF)

The Positive Psychology Progress Report

Dan Gilbert - The Surprising Science of Happiness (TED talk)

Stefan Sagmeister - 7 Rules For More Happiness (TED talk)

Jessie Arrington's Rainbow Creative Mornings Talk (semi-related to happiness, definitely inspires me to be more lighthearted)

Who Says the Web is Just for Squares?

Trevor Davis — Tue, 08 Jan 2013 13:30 GMT

With the continued adoption of advanced CSS by browsers, we are starting to have the ability to do more and more using just CSS. As we have seen, you can make all kinds of crazy shapes with only CSS. On a recent client project, the designer challenged me with a grid of diamonds.

Oh, also, this is a responsive site. Challenge accepted!

So first, I focused on just getting a single square rotated and working how I wanted. Then, I moved to a single row. Then, multiple rows. Finally, multiple rows at different breakpoints.

Some setup for this article:

I’m using Modernizr to detect if the browser supports CSS3 Transforms.
I’m using Sass and Compass for all of the CSS.
I’m including all of the Compass CSS3 mixins: @import "compass/css3".

Single Diamond

It’s fairly simple to just rotate a single square 45 degrees, and then rotate everything inside of it back 45 degress:

<a href="#" class="diamond">
	<div class="content">
		Diamonds Are Forever
	</div>
</a>

$diamondSize: 190px;

.diamond {
	background: #f4f4f4;
	@include box-shadow(0 0 0 1px #ccc);
	color: #000;
	display: block;
	height: $diamondSize;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	width: $diamondSize;

	.csstransforms & {
		overflow: hidden;
		@include rotate(-45deg);
	}
}

.content {
	display: table-cell;
	height: $diamondSize;
	padding: 0 10px;
	@include rotate(45deg);
	text-align: center;
	vertical-align: middle;
	width: $diamondSize;
}

Single Rows

Next, I worked on displaying a single row of diamonds:

<ul class="diamonds">
	<li>
		<a href="#" class="diamond">
			<div class="content">
				Diamonds Are Forever
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="diamond">
			<div class="content">
				Diamonds Are Forever
			</div>
		</a>
	</li>
	<li>
		<a href="#" class="diamond">
			<div class="content">
				Diamonds Are Forever
			</div>
		</a>
	</li>
</ul>

.diamonds {
	font-size: 0;
	margin: 40px auto;

	.csstransforms & {
		padding: 39px 0;
	}

	> li {
		display: inline-block;
		font-size: 18px;
		margin-right: 80px;

		.no-csstransforms & {
			margin: 0 20px 20px 0;
		}
	}
}

Honestly, the padding value on the list and the right margin on each list item were a result of me just doing some pixel nudging until things aligned correctly.

Multiple Rows

Now was when the real fun started. The basic idea is to use margins to push the diamonds around until they align into a grid. This involved some math, and a whole lot of pixel nudging until things were perfect. I used nth-child to assign specific margins to specific children. Here are the margins for the following example:

.csstransforms .diamonds > li {
	//Add left margin to the 4th diamond,
	//and then every fifth diamond
	&:nth-child(5n+4) {
		margin-left: 135px;
	}
	
	//Remove the right margin to the 3rd diamond,
	//and then every fifth diamond
	&:nth-child(5n+3) {
		margin-right: 0;
	}

	//Add negative top margin to every child after the 3rd diamond
	&:nth-child(n+3) {
		margin-top: -55px;
	}
}

From there, I abstracted that out along with a respond-to mixin to work with various breakpoints. To see all of the code for that, you should check out the GitHub repo, but here is a little snippet:

@mixin respond-to($query) {
	@media only screen and #{$query}  {
		@content
	}
}

@mixin diamond-grid-breakpoint($query, $maxWidth, $n, $maxRow) {
	@include respond-to(#{$query}) {
		.csstransforms & {
			max-width: $maxWidth;

			> li {
				&:nth-child(#{$n}n+#{$maxRow + 1}) {
					margin-left: 135px;
				}

				&:nth-child(#{$n}n+#{$maxRow}) {
					margin-right: 0;
				}

				&:nth-child(n+#{$maxRow}) {
					margin-top: -55px;
				}
			}
		}	
	}
}

$diamondQuery1: '(min-width: 1348px)';
$diamondQuery2: '(max-width: 1347px) and (min-width: 1078px)';

.diamonds {
	@include diamond-grid-breakpoint($query: $diamondQuery1, $maxWidth: 1270px, $n: 9, $maxRow: 5);
	@include diamond-grid-breakpoint($query: $diamondQuery2, $maxWidth: 1000px, $n: 7, $maxRow: 4);
}

Again, lots of pixel pushing to get things just right. I would expect if you wanted to use a layout like this, you will need to do a bunch of pixel nudging and adjustments to suit your needs. But, this is just an example of what can be done.

One Minor Annoyance

There seems to be a minor issue with webkit browsers and odd window widths. Some of the box-shadows don’t show up when the window is an odd number, but they do when it’s an even number. Very weird. A solution is to add the following:

.diamond {
	@include backface-visibility(hidden);
	@include perspective(1000);
}

But, then the text gets all blurry, so that kinda stinks, but I guess it is the lesser of 2 evils. Below is an image showing the grid without the fix and then with the fix.

Here is the GitHub repo and a demo. Go forth and make some creative layout with different shapes!

Updated Omnigraffle Stencil for Bootstrap v2.2

Lance Gutin — Thu, 03 Jan 2013 12:33 GMT

In February of 2012, Elliott meticulously built and released an Omnigraffle stencil for Twitter Bootstrap 2. Like Bootstrap itself, Elliott's stencil was exhaustive and popular. His announcement ranks among the most visited posts all-time on Viget's Inspire blog.

Internally, while Viget rarely uses the Bootstrap framework for front-end development, the Omnigraffle stencil is a favorite tool among our UX team. For rapid wireframing, an extensive and current library of UI elements can be indispensable.

So when version 2.2 of Bootstrap was released a few months back, we started to rethink our stencil. In the end, we decided to rebuild the entire stencil from the ground up.

As with our first stencil, our primary task was to painstakingly recreate nearly all of the Bootstrap elements with visual accuracy. However, for this update, we wanted to devote more weight to utility. Speed matters when wireframing and pixel-perfect elements just aren't very useful if they breakdown with actual content.

Additional Notes

Most changes involved replicating new elements added to Bootstrap. Cosmetic edits were also made frequently to fonts, colors, and sizes.
Glyphicons were swapped out in favor of the more extensive and completely free Font Awesome.
Organization was changed slightly to surface the most universal elements first. Less common elements are still available in the last canvas of the stencil.

Thanks

A huge thank you should be extended to Elliott for building the first stencil and Todd for his continued support on GitHub. And props to @fat and @mdo for creating, maintaining, and updating Bootstrap. Impressive stuff.

Download

Contents include Omnigraffle stencil, template, and color palette. Also check out the README file for instructions for how to install these files. If you have any comments or suggestions, please let us know!

zip file

github

Mailbag: Do you still use Photoshop mock-ups?

Tom Osborne — Wed, 02 Jan 2013 17:00 GMT

Every now and then we are asked great questions through the Viget contact form. Sometimes the questions are worth responding to publicly through our blogs. This one comes to us from Anthony.

[Anthony]: I just wanted to ask you guys what you thought about the idea of eliminating Photoshop from the design process in favor of designing in the browser.

[Tom]: It's an interesting question and one that touches on some healthy debates we have. We're still partial to using image editing software of some sort as part of our design process. Our preference is Photoshop but there are others like Illustrator and Fireworks that we utilize from time to time. That said, we are prototyping more and more alongside static comps to illustrate intended behaviors without having to commit too much time into either. As animations and transitions become more integral to the work we're doing it's helpful to have references to demonstrate our intentions. We simply can't fully sell our vision if we don't have something to refer to. This is becoming more common and we are spending more time in HTML, CSS, and JS to help us with this.

Similar to your question, you might ask, "Why not combine the two and just design in the browser?" One reason is that we just haven't seen many extraordinary designs done this way. We're looking for designs that go beyond style and function and further into the emotional and communicative side of design. In other words, we're mostly seeing decorative design with simple colors, patterns, and surface level treatments by those we've seen designing in the browser. We believe that design needs to communicate so much more especially as it relates to brand promise. We believe our clients come to us wanting something more. So we spend more time thinking about narrative which often equates to designing less piecemeal. Storyboards, sketches, and image editing software are good tools to help with the type of storytelling we go for.

We are, however, trying to learn from those who are experimenting with moving to the browser earlier in the client approval process. I have personally found Matt Griffin's ALA article "Responsive Comping: Obtaining Signoff without Mockups" to be intriguing. I anticipate we'll begin to test the waters more as we begin to see successes from others and build up more of a comfort level ourselves. Until then, our designers love image editing software for better or for worse. We have found more opportunities to get in the browser earlier with projects that are large interfaces with lots of views versus smaller one-pagers or microsites that are intended more for marketing or otherwise aspirational purposes.

One recent example of doing more design in the browser was with our recent redesign of the World Wildlife Fund website. With that project we did a few comps to get things started. The site was far too vast to comp every page so we built a visual design system consisting of very intentionally designed elements. Using the initial comps as a guide we were able to grab various components from the parts kit and create pages on the fly. Once we had pages put together we were able to make small tweaks as needed to ensure the integrity throughout. This approach is more common with larger websites, applications, and sites designed responsively. You can read more about our work with WWF in our portfolio.

We'd love to see some good work that was done without image editing software if anyone has any to share. Post any links as comments below.

How to Visualize Your Site as a Treemap

Todd Moy — Thu, 13 Dec 2012 17:03 GMT

Early into a content audit a few weeks ago, I wanted to visualize the website in conjunction with pageview data. I suspected that the site had a few isolated hotspots of activity and some large dormant areas, but I wanted more certainty. I also wanted a visceral sense of where the content lived and what was important.

So, my questions were simple:

Which sections and subsections comprise the majority of the site?
Which sections are visited most often?

To answer these, I wanted an efficient way to get at this data. I soon discovered that I could produce a useful visual quickly using Google Spreadsheets' support for Treemaps.

After playing around with this, the tool seemed reusable and I cleaned it up for others. Here's how you can create one.

Getting and populating the template

First, you'll need to make a copy of the template from Google Drive. You'll need a Google Apps account, naturally.

Once you have that, you'll need to replace the list of pages with your own. In this example, each page has:

Page title
Page URL
Pageviews (or some other metric)

Note: Technically, you don't need Page URL since it's only used for reference. But I find it helpful to have around.

Getting data will be the hardest part of this exercise. Depending on your access to the technology that powers the site, this may be readily available or not.

For me, I turned to a sitemap.xml file because it contained two bits of data I cared about: the page title and the URL. This file is easily produced by many CMSes, Google Webmaster Tools, or an external site spider. All I had to do was extract the relevant information, which I did using Google Refine.

Getting metric data will depend on what you're interested in. Page-level analytics like time on page, bounce percentage, and repeat visits are easily attainable from Google Analytics. Your CMS may provide other insightful information such as days since last update.

Paste that info into columns A, C, and D on the Raw Data tab.

Grouping the data

In its raw form, a list of pages isn't terribly useful. So, we need to group the pages. These groups become the blocks in the treemap; the number of pages in each determines their size. These groups can be anything you care about. Here, I'm grouping pages by subdirectory, but other grouping strategies could be:

By author
By audience
By template type
By nav section

Don't worry about the entire hierarchy of groups at this point. Right now, focus only on the nearest grouping that you'd want to appear as a block. For example:

example.com/about/team/karen/ → Team
example.com/about/team/will/ → Team

If you have any one-off pages that you want to force to show up as a block, add them to their own group.

example.com/about/history/ → History
example.com/about/mission/ → Mission

Tallying the data

Now that the pages are grouped, you'll need to aggregate the data and present it in a table that's understandable to the Treemap. On the Tallies tab, you'll see the data is arranged in the following way:

In Column A, you need to list every unique group you created on the Raw Data tab. Column B is where you create the hierarchy of groups. For each group (except the first) you need to identify its parent. Each parent must match the name of a group in Column A exactly. Everything must ultimately roll up to one group – in this case, "Home."

You can nest groups as deep as you'd like. For example, if you wanted this nesting...

Home / Blogs / Blog-1

...you'd enter the data like so...

Home
Blogs → Home
Blog-1 → Blogs

As you add groups, Pages per Group and Average Page Views should update automatically. If you're using a different metric than pageviews, you may need to adjust the formula in Column D. It's currently set to average data for all items within a group.

You can check your progress in the Tests table on the right. When all items are zeroed out, you're done.

Viewing and Customizing

Jump over to the Treemap tab to see your creation. If you nested the groups, you can navigate down a level by clicking the blocks and headings. Going up a level isn't as obvious – you right-click the topmost heading.

Once your data is presented as you expect, it's worth exploring options under the "Advanced edit..." button. Here, you can change the color scheme and adjust the number of levels of hierarchy shown.

That's all folks. If you have questions or additional thoughts, drop 'em in the comments.

Manage Common Design Elements using Photoshop Variables

Mark Steinruck — Tue, 02 Oct 2012 14:20 GMT

In the past I wrote about a method of linking files to a single smart object. As hard as I tried to make it work, this method never gained traction in my day-to-day workflow because it felt messy and unintuitive.

I dropped the whole idea for a while until a recent project came up that required multiple designers to be working from a large number of files. All of the files shared the same header and footer, and the client continued to make changes to those pieces. Making these types of changes and updating every file is tedious and time consuming. So I started to explore variables in Photoshop.

I’ll say up front that this isn’t the perfect solution to the problem. That would be a common library like the one in Fireworks (hint, hint Adobe). But variables have been around in Photoshop for a long time, which makes them a better, less hacky solution than installing a third-party panel.

Variables in applications like Illustrator, Photoshop, and InDesign are traditionally used for batch processing. For example, if you want to create a business card for multiple people, variables make it simple by just updating a text file with the information and running a script to output the files. For the purposes of this example, I’ll focus on using variables for pixel replacement of common page elements.

Step 1: Define Variables

Create layers with the variable names. If you’re working on a team, it might be helpful to name the layer something like “varHeader” and label it with a color so that others know that the file uses variables.

Go to Images > Variables > Define. Now select the layer that is named varHeader in the dropdown, click the Pixel Replacement checkbox, and give the variable a relevant name. I like to use the method “As Is” so that the imported file isn’t resized. The imported file is aligned relative to the boundaries of the file in which it is placed. In the case of a header, I like to pick the top left corner of the grid so that my header file will always align correctly.

Click the Next button.

Step 2: Create Data Sets

Data sets are simply groups of data presented in tabular form. To create a data set, click the small hard drive icon with an arrow pointing to it. Give the data set a name that anyone will understand. In the Variables box, make sure that header is selected and set the Value by selecting the file that you want to import. You can then see the variable name, file name, and the layer that they're associated with below.

Click Apply, then click OK.

That’s it! You’re first variable is linked to an external file. Replicate the process to link additional variables to their associated files.

Step 3: Apply Data Set

The whole point of this is the ability to update your designs easily when changes are made to the external/imported files. Simply open the design file and go to Image > Apply Data Set. Select the data set to update and click Apply.

Tips & Tricks

Duplicating Templates

Create a base template file that can be duplicated to start each page design. The duplicated file will maintain the variables and data sets so that there’s no need to set them up each time.

Importing Data Sets

If you don’t set up a template file, you can also import the data sets by creating a comma delimited text file with all of the data in it. The problem here is that you still need to set up all of the variables as described in Step 1. Importing data sets is more useful when you have large sets of data, like the business card example mentioned earlier.

Using Smart Objects + Variables

Let’s say that you have multiple design comps within a single PSD. It’s likely that the footer for each design will shift position depending on the page length. Remember that when you update a variable layer, it’s positioned relative to the file in which it’s being placed, and the point that you select on the grid when setting up the variable.

To avoid the hassle of repositioning the footer and/or making multiple updates to each instance of the footer, convert it into a Smart Object. Make duplicate instances of the Smart Object by selecting New Smart Object via copy in the contextual menu. Now set up the variables within the Smart Object just like you did in the example above. If you make changes to the imported footer file, apply the data set in the Smart Object. It will automatically update every instance of that Smart Object in your comp. (Props to Mindy for figuring out that mind-bending trick.)

Breaking It Down

You might have a navigation which would show different selected states based on the comp that you’re importing it into. Separate the navigation into it's own file and import it as it's own variable. Within the imported navigation file, create all states of the navigation like you would in a sprite. When the file is imported, add a mask to the navigation layer so that you can just slide the navigation to the correct state based on the comp.

Q&A

What if I move the location of the imported file on my hard drive?
Applying the data sets, which is the whole point of this, won’t work unless you relink the variables to the new file location as shown in Step 2. However, it won’t change the display in the design. So you can still send the comp to someone and the header and footer files will still appear correctly.

Will this bloat my file size?
Quite the opposite. While the external file maintains its layers in the external/imported, it appears as a flattened file in the comp. Instead of bloating the file size, it actually reduces it. As an added benefit, you also have a folder of page parts already separated into individual files for the developer which may save them time in some cases.

Does it work on Dropbox and Google Drive?
Yes, absolutely. It’s actually easier if multiple designers are working on a project because the imported files can stay in one location.

Have additional questions? Post a comment and I'll do my best to help you work through it.

Level Up Your Presentation: An Almost Seamless Transition From Keynote to a Browser (and back again)

Jason Toth — Tue, 02 Oct 2012 13:28 GMT

One issue I encounter when presenting in Keynote is how to seamlessly move back and forth between my presentation and a browser window. Yes, you can always escape out of Keynote and go directly to your desktop, but this process exposes your audience to any presentation notes you have on screen and requires you to move around windows. Basically, it just doesn't feel professional to me.

In preparing for a recent presentation, I wanted to address this issue by documenting a process that more seamlessly moved between Keynote and a browser window. My goal was to discover an efficient transition between the two while minimizing the exposure of the process to the audience.

After connecting your laptop to a secondary display, follow this process:

Prepare your displays

Open System Preferences > Displays. Make sure that the white menu bar is visible on your laptop display and that 'Mirror Displays" is turned OFF
Change the desktop background on both displays to black or dark gray (this is optional, but I prefer to have the desktop not be a distraction during the presenation)
Close all windows on your secondary display (should just show a solid dark background)
Close all windows on your primary display except for Keynote and your browser

Prepare your browser window

Open all sites in separate tabs in your browser window and arrange the tabs in the order that you will show them during your presentation
Resize your browser window so it fills as much of your screen as it can
Leave the window open, behind your Keynote presentation

Prepare Keynote

Within Keynote, hit Alt-Command P to play your presentation, making sure your presentation displays properly on both displays. Your laptop should display the "presenter view" and the secondary display should only display your slides. Your displays should look something like this...

If your screens are reversed, hover over the top area on your "presenter slide" to make the Keynote options menu appear. Select "Options" and then the "Swap Displays" action in the menu. You should now see the "presenter slide" view on your laptop.

To switch between Keynote and your browser

When you get to a point in your presentation where you need to jump out of Keynote and into a browser, follow this sequence:

Tap the H-button (this hides Keynote, displaying the browser window on your screen and a black screen for the audience)
Command-F1 (turns display mirroring ON—the audience now sees your browser window)
Control-Command F (enters full screen browser mode for both displays)
Alt-Command-Right Arrow (advance to next browser tab)

To return to your Keynote presentation

Control-Command F (exit full screen browser mode, displaying the browser on your desktop for both displays)
Command-F1 (turns display mirroring OFF)
Command-Tab (returns to Keynote and displays slides to audience)

Once you memorize the sequence of key commands, you can move from Keynote to a browser in less than a second. The set-up and steps may seem a bit obsessive, but the seamless transition in/out of your presentation will project a level of professionalism to your audience. They know you're prepared!

Plus, they won't see you futzing about your desktop and you'll have a few more minutes of talk time.

I'm sure there are other ways this could be done, and I'd love to hear how others have accomplished this.