Archive by Author

A Wrap-up of Duke’s Science Photo Walk

Another photo walk has come and gone, but some stunning images are here to stay. The walk is a curious experiment — we bring a variety of people together, cluster them into small spaces with a mere handful of minutes at each location, and step back to see what happens — yet we are impressed with the results every time. Despite being rushed (we marched through four sites in two hours!) our participants captured some serene, candid and all-together surreal moments along Duke’s Science Drive. We hope you enjoy these photos as much as we do.

Prize Winners

After seeing a number of excellent submissions in a tight competition, we are pleased to announce the following prize winners from last Friday’s photo walk:

"Greenhouse Dew" by Lindsey Wu
Grand Prize: “Greenhouse Dew” by Lindsey Wu
"Anticipation" by Celeste Hodges
First Place: “Anticipation” by Celeste Hodges
"Chain on the roof of the French Family Science Center" by Natalie Nobles
Second Place: “Chain on the roof of the French Family Science Center” by Natalie Nobles
"Brain in Latex Gloves" by Scott Van Manen
Third Place: “Brain in Latex Gloves” by Scott Van Manen

Lindsey, our grand prize winner, will join the Duke Photography crew on an official university photo shoot. Celeste, Natalie and Scott will all receive prizes compliments of Duke University Stores!

Honorable Mentions

We were unable to award prizes to the following photos, but we thought they deserved a special shout-out:

Untitled by Josh Stout
Honorable Mention: Untitled by Josh Stout
"The view above" by Celeste Hodges
Honorable Mention: “The view above” by Celeste Hodges
"Stairwell Traffic" by Lindsey Wu
Honorable Mention: “Stairwell Traffic” by Lindsey Wu
"In The Open" by Jonathan Canfield
Honorable Mention: “In The Open” by Jonathan Canfield

The Full Set

You can view all the awesome submissions in this slideshow from our Flickr album:

Thank you to everyone who joined us for the walk and to all who submitted their artwork. We would also like to convey the utmost gratitude to our event partners: the staff at the Duke University Live Plant Collections and the Duke Canine Cognition Center, Dr. Ken Lyle and the Duke Chemistry Department, Dr. Len White and the Duke Institute for Brain SciencesDuke University Stores and our friends at Duke Photography.

Also, thanks to our friends at Durham Magazine for this nice blog post.

Stay tuned for details on our next walk.
Hint: We’re thinking of spring! 

If you want updates for future photo walks and #pictureDuke events, subscribe to our email list. We promise not to bombard your inbox!

The new @DukeU on Twitter

Twitter recently launched several features to make user profiles more engaging, including a new header image. To take advantage of these additions, Duke’s social media team designed new graphics to use for our Twitter background and header images. Here’s a walkthrough of the approach.

the new @DukeU experience

The header:
The header is a new feature Twitter introduced in September that gives users an additional element of customization and personal branding. However, there are a few constraints:


Twitter recommends 1200x600px with a maximum file size of 5Mb.

Regardless of what file size you are working with, your final product should have a 2:1 aspect ratio.


Twitter will automatically apply a darkening gradient to your header image, and layer white text over that gradient.


our recently redesigned undergraduate admissions site

Though the size constraints actually give users a great degree of freedom, allowing users to upload hi-res files, we kept our header simple, which gave us more flexibility when designing the background. More on that later.

For inspiration we referred to the subtle, but graphically intriguing backgrounds on the new Duke Undergraduate Admissions site, and designed the header image shown below:

Twitter also applies a wide white stroke to your avatar and layers that over your header as well. To undercut the off-putting boldness of this effect, we changed our avatar to the blue on white version of our logo. This way the stroke appears to be a part of the image rather than a boundary constraining it.


The background:

Backgrounds are a bit trickier to deal with because different users will see different swathes of your image based on their monitor’s resolution and what browser they are using.


There are two kinds of boundaries to operate within. First, Twitter allows backgrounds up to 2048px wide (no height limit), with a maximum file size of 800KB. However, regardless of the background dimensions, viewers will only see what portions of it their monitor and browsers allow. While Twitter’s allowances tells us which perimeters we should design for, browser data dictates where we should place important content:

99% of Twitter visitors have at least a 1024px wide resolution. Twitter’s own content occupies 865px, so that leaves you with 132px (a pair of 66px gutters on either side of Twitter’s content) to work with. This is enough space for a logo or a brand name to descend down the side of the canvas, but doesn’t leave much room for other graphic elements.

85.4% of visitors have a 1280px or greater resolution. This gives designers 372px (194px on either side) to work with, and is the option we pursued. (Browser data from W3Schools Jan 2012)


Earlier, Twitter allowed backgrounds to be left-aligned only. This could be problematic for some designs since graphics were anchored to side of the user’s browser rather than anchored to the content, making the right-hand gutter functionless for incorporating further information. With the most recent update, users have the options to left-align, right-align, or center their background images. Centering allows users to make full use of both gutters, and also fixes design to your content.

The various background alignment options Twitter now offers.


We created a 1920x1520px background at 72 ppi. We used the left gutter to create a banner 180px wide. For a the rest of the background, we used a high-resolution photograph.
Using a photo can present a few challenges. When using the header image feature, the user needs to be sure that the background and header don’t clash and compete with each other (or the profile photo) for the viewers attention. To negate this issue, we used a subtly patterned header, though the inverse is just as plausible – highlighting a photographic header and utilizing a clean graphic background. Combinations of dual photos or dual graphics work as well; it’s just a matter of finding visuals that compliment each other.

Additionally, because Twitter limits background images to 2048px in width, viewers with a browser resolution higher than this (or than your photo) will see empty canvas space on either side of the uploaded background. Popular solutions include having your background fade into whichever color you set as the background color (or utilizing a background that strongly features that color). However, since our background photograph features a wide range of colors, we selected a clean black from the Duke Style Guide to accentuate and showcase the photo.

A quick look at the 'Save for Web' panel in Adobe Illustrator. Key elements are highlighted.

Lastly, photos are typically much larger files than other kinds of graphics due to their color depth. Our final image was 7.6MB, well over the 800KB Twitter allows. To get our file size under this limit, we used Adobe Illustrator’s “Save for Web” feature to decrease the quality of the image.

By decreasing the file’s quality to 61%, we reduced the file size to 794.1K – right below the 800K mark – while introducing minimal artifacts. Naturally, a user can shift the balance the other way, in which image quality would be prioritized over photographic dimensions – it’s just comes down to what aspect the designer would like to optimize.

For those interested in adopting this background, we’ve provided the following resources:

Duke Social Media Twitter Background

Duke Social Media Twitter Header


Happy designing, and tweet on!

– Jonathan