Leveraging existing APIs, we followed our process of IA/UX, design, and development to create a beautiful, intuitive service to buy and sell gift cards, with full analytics and tracking for Simply Gifted to continue to monitor and optimize the platform.

What we produced is quite possibly the easiest way for small businesses to create and sell gift cards — and the best way for customers to find and purchase them on the web. Here’s a quick look at the finished product, and the process of how we produced it, below:

IA/UX

Widget:

We started by creating wireframes and user flows of the entire set-up and purchase process for business and customers.

We worked hard to make the platform as easy to use as possible, simplifying the user experience and removing every obstacle possible.

Scott, our design-lead on the project (above), works on early wireframe concepts.

The merchant website widget was designed for simplicity and ease of use for both businesses and customers:

Marketplace:

The gift card marketplace was designed to be equally simple, and easy to browse. Website visitors can search, customize, and purchase gift cards for local businesses across the country:

Revisions:

We went through a robust feedback process during IA / UX to ensure that all functionality was accounted for up front. It all turned out great:

Design:

After wireframes were complete, we took to adding a beautiful design to compliment the functionality.

Development:

After designs were polished, we dove in to code the fully functional Simply Gifted platform. We meticulously tested our code to make it flawless for the Simply Gifted launch.

What emerged is quite possibly the easiest way for businesses and customers to create and buy gift cards online.

For businesses, creating and selling gift cards is painless – and the typical hassles with merchant set-up and payment processing are removed. For customers, it couldn’t be easier to browse and find gift cards for great local businesses and buy gift cards for friends.

It was a pleasure to work with Simply Gifted, and we’re excited to see how the future of online gifting develops as we continue to be a part of its evolution.

With a stunning property portfolio and a national reputation as a leader in redevelopment of historic properties, we knew we would need to build an online property that would compliment their physical property portfolio and beautifully showcase their work.

We quickly uncovered that the most important aspects of the user experience would be to easily find properties and contact a leasing agent to arrange a tour of the space.

We designed a stunning property showcase with the user in mind. Large photos are the centerpiece of the site, with easy options to find and download property information, location maps, news and more. On mobile and tablet devices, task-oriented features are prioritized to enable easy navigation and use on the go.

Here are a few of our favorite features of the site:

Fully responsive design

The website is built to handle a wide range of uses, from full corporate presentations at the Douglas Development headquarters, to mobile users looking for directions to a property tour. At the website’s largest size, property photos are in the spotlight. When it scales down to mobile (and tablet) through the responsive design, task-oriented features are prioritized, allowing you to quickly pull up the property map and directions to get to your tour of the space on time.

Homepage carousel with parallax animation

Look closely at the homepage and you’ll see that the big, beautiful building photos are complimented by moving clouds and sky. The perspective is meant to emphasize the subtle details and character of the architecture, and leads you into the website wanting to see more.

Easy search and sort property filters

Look for properties by type, availability, and location. If you’re looking to lease a commercial or residential space in the DC area, there’s no easier way to find it than on the Douglas Development website.

Easy options to schedule a tour

Learn more about the property, and find the perfect space. After you’ve found the perfect space, scheduling a tour with one of Douglas Development’s leasing agents is only a click away.

Map embeds with custom branding

Easily find property locations and directions to site visits. On your way to a site visit, the easiest way to get there is to pull up the Douglas Development website and get Google Map directions directly from the property profile.

Social media integration

See behind-the-scenes photos from construction through completion on Twitter. Want to see what’s happenning behind the scenes at Douglas Development year-round? Check back regularly to see fresh photos on Twitter from property sites around town.

Custom content management dashboards

We designed custom page templates and dashboards to make content entry and updating a breeze. If the front-end couldn’t be easier to navigate, the back-end couldn’t be easier to manage. We customized the CMS in WordPress to give Douglas Development all of the tools they needed to keep the website looking great, and up-to-date.

We’re thrilled to have worked with Douglas Development on this project and have the opportunity to showcase work by one of the leading companies in the DC area.

We’re stoked to host such an awesome event. So, to make it even more awesome the iSL design team whipped up a fun, fully-responsive, parallax microsite to promote it.

Check the site for all the details, and make sure to join our meetup page if you plan on attending, or if you just want to see yourself as a Space Invader on the website :)

Click here for the full experience.  Be sure to check it out on mobile as well!

Below is a quick photo tour of the process, from sketching/wireframing, to design, to development.  Scott, Roberto, and Mike were involved in the process from conceptualization to deployment.  Zach and Sarah also provided a great assist.

As Scott scaffolded the architecture of the project, Mike and Roberto created some digital assets to be scattered throughout the site.

We had a blast firing up After Effects and conceptualizing animations and sequences for the first scroll event.

Below is an internal favorite that just narrowly missed the cut.  Excuse the low quality of the GIF – a high res version is available here.

And finally… Credits.

Major props to Chetan + Nathan—our developer senseis—for some late-in-the game assistance when we were scrambling to launch this bad boy.

Recently, I had the pleasure of leading our troops through a course on Content Strategy – thinking about how we approach our web projects systematically, and help guide our clients and projects to greatness through excellent web content that fulfills both business and user needs.

The presentation covers high-level basics like defining content and content strategy, and gets deeper into the details like processes and page tables (which we refer to as Page Guides, for those of you who are already initiated).

A few key highlights you might not expect:

No shortcuts! Your create-content-quick-and-easy scheme is useless.
Goals: Useful web content must meet user needs and business goals.
Less, not more! You think more content is better? It’s not. Read why.
Content creation gets you half way. See how it all comes full circle.

What do you think? Leave a comment, or tweet us @iStrategyLabs to give us your take.

Some key stats included below:

• In the last 10 years, wireless taxes grew almost 4x faster than general sales taxes.

• If wireless was taxed like general goods, American wireless users would save a whopping $15 billion in taxes each year.

• Tanning and beer — taxed at 10% and 9.2%, respectively — are taxed at lower rates than wireless.

Full infographic below:

Want to see more? Check out some of our other mobile-focused infographics:

• All About Apps
• 2012 Mobile Year in Review
• Mobile Data Growth and What it Means For You
• Growing Demand for Wireless Spectrum

Props to Sarah Sugarman for the incredible infographic and to Zach Kahn for helping us out!

Although none of us could craft the perfect bracket, we were able to find some interesting Twitter data around mentions of Final Four teams from the past 3 years.

Although Cinderella story Virginia Commonwealth University (VCU) couldn’t muscle up enough prowess to beat Butler and move on to the championship game, it surely won on Twitter. Mentions of #vcu peaked at a whopping 124,187 tweets during the tournament – an 8,000% increase from its typical monthly showing.

Not surprisingly, the month of April saw UConn, the inevitable champion, and Butler, the runner-up, as the tweet leaders.

Kentucky stayed on top on and off the court during the 2012 March Madness. Led by Anthony Davis and Michael Kidd-Gilchrist, Kentucky won its six tourney games by nearly 12 points per contest. Nothing could stop them and the mentions just poured in, garnering almost 150k mentions by championship time – more mentions than all of last year’s Twitter activity combined.

If Twitter mentions is any indication of future success, as it has been for years past, it looks like the Wolverines may take the cake this year. They rocked almost 400k mentions during the month of March, which is twice what Louisville pulled in.

Some lessons learned:

• Hail to the victors: Winners get more mentions than losers. Since 2011, winners of their Final Four game as well as the championship games scored the most mentions. One exception: VCU, an #11-seed Cinderella story who won the hearts, and tweets, of Americans across the country.
• Football schools get a little bit more love throughout the year. Look at Ohio State. Look at Michigan. Where other Final Four team spikes come March from an otherwise non-existent fan base, schools with prominent football programs see a steady level of activity 6 months out of the year.
• Twitter is still gaining popularity [#duh]. In 2011, we were seeing 230 million tweets per day. Last year, it went up to 400 million tweets per day. So although it looks like March Madness keeps getting more popular – especially with more than 2 million #marchmadness tweets seen over the past 30 days – it’s really Twitter in general that is the popular one.

Data collected with Topsy Pro <3

When we were tasked with modernizing Ben’s website, that legacy was in the forefront of our minds, and during an exploratory trip to the Bowl (that included a few half-smokes and chili fries, for research purposes), we remarked at how visually stimulating the Ben’s Chili Bowl experience is, whether it be the famous mural, the charisma of the building itself, or the overwhelming amount of photographs of famous patrons tacked to the wall, Ben’s is just as much a feast for the eyes as it is the stomach.

ISL was fantastic in that they created a site for us that perfectly captures the classic look and feel of Ben’s, but in a clean, up-to-date and fully functional package.  We can now display pictures of each menu item, tell our story in a visual timeline, blog about the latest happenings at Ben’s, and sell our products to everyone in the U.S. in a visually stunning way.  Thank you ISL!

Nizam Ali

When designing the site, ISL designer, Scott Simpson, wanted to “give it a vintage, 50′s diner theme, but incorporate more modern aspects as well. There is a deli-paper style, vintage americana in terms of the signage.” Our goal, in essence, was to capture the character of Ben’s while giving it a 2013 facelift. Scott relates, “It’s such a unique place. I wanted to use a lot of large, full-screen images to get across the feel of being at Ben’s because the only way you can really get that feeling across is to see it and experience it.” Our wireframes reflected that kind of concept well.

For those perfect large, full-screen images, we reached out to Joshua Cogan, an award winning photographer whose work has been featured in the New Yorker, Washington Post, GQ, Travel Channel, and Discovery Channel and whose Masters in Anthropology showed us he understood the importance of capturing the nuances of a culture.

The color choices and typography reflected Ben’s existing scheme and were influenced by old-school vintage diner menus and signage. However, as a nod to modernity, the navigation icons were hand-drawn by iSL designer Mike O’Brien in order to highlight the kitschiness of the restaurant as well. That modernity is also shown in the layout of the page. Scott admits, “The blog and the timeline are my favorite pages because the content floats on top of everything, and it’s an interesting way of laying things out.”

What truly helped modernize the site, though, was the work of our Dev team. ISL developer Megan Zlock describes, “We wanted to make the homepage responsive so that people trying to get to Ben’s (even if they weren’t exactly coherent) could get the information they want, especially the location and hours (even on mobile) without any difficulty.”

The true test for the Antimatter team, though, was the incorporation of the Ben’s Chili Bowl store, one of the most popular features of the site, and a huge source of income for Ben’s. For this part of the project, we worked with UltraCart, and made sure to focus strongly on the user experience, specifically how things would transition from WordPress to UltraCart and back again seamlessly.

The final product is a website that we are incredibly proud of. It was unbelievably exciting to work with such an established piece of DC culture, and we consider it an honor to collaborate with the Alis and the rest of the Ben’s Chili Bowl team.

From February 18-22, 2013, iStrategyLabs produced the second annual Social Media Week DC, creating a week-long festival giving thousands of Washingtonians a platform to express their interest and love for social media.

We had a fantastic turnout:

• 115+ entirely community-organized events
• 6000+ registered attendees
• 10,700+ #SMWWDC tweets
• 43,000+ SMWWDC Facebook post views
• 2400+ SMWWDC Facebook page likes
• 70+ trend and event re-cap blog posts from the SMWWDC Editorial Team
• 60+ local and national media mentions

Approaching SMWWDC 2013, our planning team decided that it was most important to put the power in the hands of the people. We thus encouraged members of the community to curate discussions, host panels, throw events, and engage with social media in its established and emerging forms. To make this happen, we:

• Recruited an advisory board of amazingly talented social media and tech people to curate their own events, in addition to promoting others;
• Anchored the week with events such as our opening party and closing party, while putting together an awesome keynote line-up featuring Steve Case, Linda Abraham, and Aneesh Chopra;
• Actively monitored and mentored our community organizers, assembling DC’s events in one cohesive SMWWDC package;
• Constructed a 30+ member editorial team to produce fresh, engaging content during the build-up to and throughout SMWWDC;
• Constantly pushed for more engagement with our social audiences through SMWWDC’s Facebook & Twitter accounts;
• Sourced multiple community venues to provide space for event organizers in need of a place to host;
• And partnered with multiple sponsors to provide an official SMWWDC hub for the week in its entirety, opening its doors to many an community event organizer to use as a canvas for their respective events.

In sum, SMWWDC was truly a social media phenomenon for our Nation’s capital.

Our Presidential Trivia-themed opening party was the place to be on Monday night. Sponsored by Twitter and moderated by iSL’s very own Katie Lancos, this event was full of surprises.

Thanks to a partnership with Onomonomedia at our SMWWDC hub provided by Popularise & Fundrise, we captured some of the quirkier moments in-between sessions.

Some of the members of our advisory board even jumped in on the action.

And with Onomonomedia’s innovative .GIF feature, there was no shortage of fun to be had.

The Closing Party thrown at Malmaison by iSL and No Kings Collective attracted hundreds of people to a sold-out party, where DC’s best and brightest mingled, celebrated the events of SMWWDC, and danced the night away.

Couple our exciting venue and partiers with a live band, and you had one night to remember in our Nation’s capital. #SMWWDC #2013

In order to understand what methods were most successful over the course of our campaign, we looked at the most common characteristics found among the top 20% most engaging tweets. Below is a summary of the most engaging attributes of our promoted tweets.

Most Effective Targeting Type: Search (and/or Handles)

Targeting search proved to be the most engaging targeting method, as we targeted hashtags around specific events that already had an active conversation occurring. This produced 68% and 77% more engagement than targeting handles and interests.

However, opportunities for search-targeted tweets to show were far less than targeting handles because of its smaller potential audience size, causing it to earn almost 6x less impressions than handles and lowering its overall effectiveness.

Overall, tweets targeting the followers of other relevant handles were 5% more engaging than those targeting general interest groups.

Most Effective Call to Action: “Check Out”

A significant attribute of the varying engagement level of a tweet was whether there was a call to action present. Tweets with any call to action had 48% more engagement than those without a call to action.

Between the tweets using a call to action, “Check out” preformed 18% better than tweets using ‘Watch.”

Most Effective Mention of Media: Video

Our analysis shows it’s critical to share with your audience what exactly they are looking at. Tweets that revealed the type of media they were linking to produced 58% more engagement that those that didn’t.

Among the top 20% most engaging tweets, we found that promoting a video was 52% more engaging than promoting an infographic. (However, among the top 50% of tweets, videos only produced 10% more engagement.)

The Name of the Game is…

A big insight is that mentioning the title of what you’re promoting proved to be 28% more engaging than saving those precious characters for something else. Overall, being as specific as possible in promoted tweets is proving to yield higher engagement levels.

— Embassy Suites (@EmbassySuites) March 7, 2013

Although Vines are only 6 seconds long, these things don’t just happen with the snap of a finger; it actually takes a lot of time, planning, and resources. Let’s take a look at how we made it happen:

1. The Concept

We knew for our first Vine we wanted to highlight one of Embassy Suites’ three brand pillars: two-room suites, complimentary made-to-order breakfast, and a daily manager’s happy hour. After several rounds of concepting, we decided to focus on the free breakfast, a staple for which their brand is very well known.

Narrowing down our ideas, we had to figure out a way to highlight this brand pillar and the brand itself, all in just 6 seconds. We also knew we wanted to shoot on-site to showcase the actual breakfast that Embassy Suites serves.

2. Practice makes perfect

If you have ever tried to create a Vine before, you KNOW that there is no room for error. There is no editing, no splicing, and certainly no command + z. If on second 5.5 you mess up – tough luck, you’re starting over. So we set up a scene on-site the week prior to the actual filming and launch to practice our composition, lighting, and timing. That helped us to answer a lot of questions, identify specific materials we were going to need, and work out any kinks that would prevent us from getting a perfect final cut.

3. Setting up the scene

Come gameday, we had to be ready. We had the chef make up several colorful, perfect omelets to use – one in filming and others for backup.

We collected plates of breakfast items and began to build our scene mimicking what we decided on in the test round. The plate we used as a base was a custom plate we had made with the Embassy Suites logo, Twitter handle, and hashtag #firstpost.

Et voila! A plate of delicious complimentary cooked-to-order breakfast perfection.

4. Filming the Vine

This was a 3-man operation: one person held the camera (I mean, iPhone), one person pressed the screen to initiate recording, and one person pulled away food after each take and cleaned the plate. With everyone in place, we began creating the Vine, recording for a little less than a second, pulling away food, and repeating until the plate was clear (about 4 or 5 times).

Once the plate was clear, we replaced the first plate with a second plate we designed – identical, except for the addition of a “yum” thought bubble – which closed out the Vine.

Once you start filming, there’s no turning back. I would love to say we got it on the first try. But we didn’t. Luckily we allowed for enough time and resources to retake until it was perfect and ready for posting.

Disclaimer: Free breakfast not included in all instances of Vine video-making.

Here’s how it works:

Sign into Vine with Twitter and that’s it, you’re ready to record. With Vine’s custom camera, video records when you tap and hold on your phone screen. Take your finger off the screen and Vine stops recording. The simple, real-time editing lets you create everything  from simple 6-second un-cut videos, to more complex stop-motion clips and animations.

How brands are using Vine:

Across all industries, from food to gaming, brands have used Vine to foster online discussion with their fans and even tease new products. Here are a few great examples :

GE: It’s Raining Data

Gap: What shoes do you plan to wear with The 1969 Skimmer?

Rolling Stone: Guess Who’s on the cover

Nintendo of America: Check out what you get with the Wii U ZombiU Deluxe Set

Bacardi: #SixSecondCocktail

A few of our personal favorites:

People have been shooting and sharing Vines non-stop since the service launched this past January.

Some cool Vine spin-off apps include Channel 6, ”a personalized channel of videos posted to Vine” (type a search term in the bottom left corner to sort and filter). Similarly, All Around the Vines pulls together a collection of Vine videos you might like based on category and tag. Here are a few of our staff favorite Vines:

- @Corbett3000  
 

- @eshutt
 

-@EmilyTav
 

Best of both worlds:

We worked with our client Embassy Suites to get them on Vine and create their #FirstPost to promote the delicious breakfast you can expect when you stay at an Embassy Suites hotel.

With all of these fantastic Vines in just over a month, we can’t wait to see what comes in the near future from fans and brands alike.

+++

All-star interns Ryan Horgan  and Zach Khan contributed to this article. 

The platform is uniquely seductive for one simple reason: an app is a hermetically sealed, self-contained universe. A universe where (nearly) all variables are known, and under the creator’s control. And there is nothing we like more than control.

So, when DoubleTree by Hilton brought us their “Home & Away” iPad app, nearly one year ago, with clear instructions to “remake it entirely,” it was quite literally a dream come true.

Our only caveat? We wanted to build it in iOS6 before it officially launched. Using this new software would allow us to take full advantage of a number of novel features, including: grid layouts, enhanced maps and share sheets.

Armed with these insights, iSL set out to design an iPad app that could serve as an efficient, highly functional travel assistant — one that would improve the experience of being “on the road” in a very real way. It was clear that building something aesthetic was not going to be enough: this had to be a workhorse of an app.

In iOS 6, Apple provided the UICollectionView class which allowed us to build all kinds of great interfaces. For this app, we chose a straightforward layout and used a traditional, scrolling collection view. We were putting a lot of information in each collection view cell, so we did not want to make the layout itself too confusing.

The concept is simple though: tell the app which bank, gas station, coffee shop, pharmacy, rental car, etc. that you, as an individual, prefer, and the app will effortlessly map your brand preferences around your hotel. The app also allows you to connect to @DoubleTree on Twitter to voice your feedback.

Fairly quickly, it became clear that the map was the star of the show. We wanted to highlight the hotel location but still provide relevant details for the users surroundings. One of Apple’s most contested decisions in iOS 6 was to switch to using their own maps solution, moving away from Google. While opinions may vary, it allowed us to really bring to life the map and info displayed within the app. In addition to the in-app map, we also included the ability to get directions to any location of interest. With one click, you are into the built-in Maps application with turn-by-turn directions.

And thus, version 2.0 for the DoubleTree by Hilton’s Home & Away iPad app was born (iTunes Download): 

As iSL moves forward, we are making responsive design our norm, rather than an upgrade. With all of the different device sizes and capabilities now, it’s hard to just keep to the 960grid and call it a day. There’s so much of the audience and the experience of the site you are not addressing when you design that way.  Of course, there’s a lot more to think about when you design and build responsively, but it’s always worth the result.

So how did we do it?

The UX/UI Phase: Try These on For Size

Rather than thinking about specific pixel sizes for our template, it was important to pick a few general ranges. We thus started the UX process by creating wireframes that took into account a variety of viewport sizes (mobile, tablet, desktop and wide desktop) so the site could pretty much accommodate any device that’s thrown at it.

We chose to tackle the most content-rich pages first in our wireframes. That way, we could form a flexible structure that the rest of the site could fall within. We laid out our wireframes starting mobile first and working our way up to desktop. Once we had a good idea on how the page would adapt based on viewport width, we carried this structure over to the remaining pages.

The Design Phase: Mobile-First

Early on, thinking about the mobile and tablet experience of the site is really important, even more than the desktop size. So, we took a “mobile-first” approach to both design and development. This determines the order of content in the mark-up (HTML), which then gets styled to the different screen sizes.

The Development Phase: Fluid or Break-Points? I’ll take both.

As you style and start determining the responsive structure of the site, there are two choices for designers and developers. The site can either be a fluid site (which uses percents so content always fills the entire width of the screen) or it can jump down in size incrementally with break-points.

For Mobile Future, fluid was really the best option. It looks the best on the most screen sizes and always fits the screen without floating in the middle. However, some breakpoints were also included as to help text scaling and layout changes as the screen gets thinner. The breakpoints were set at strategic intervals with some device sizes in mind, but overall, the focus was on where breakpoints would help the content look the best:

• Over 1180px wide (for larger monitors)
• 960-1180px wide (some text and elements scaled down a little for smaller standard screens)
• 770-960px wide (this was the “adjust” breakpoint, which added some CSS to help the larger layout scale well in this range)
• 530px-770px wide (this is essentially the “tablet” size, where everything breaks into a stacked layout for smaller screens.)
• 0 – 530px wide (small, mobile size with stacked layout and smaller headers)

The Moral of the Story: Collaboration is King

While we found it helpful to design to a couple of viewport sizes (desktop and mobile), it was impossible to design at every possible width. This required quite a bit of cross-team collaboration and in-browser design throughout the development process (so much for just handing over flat PSDs!) While this was a more time-consuming process – allowing for frequent sit-down tweak sessions and SASS to compile sprites – it helped smooth out those last little details.

So how did it all work out? See for yourself.

Some key stats included below:

• In 2007, the app industry didn’t exist.  It took nine months to reach 1 billion apps downloaded.  By year’s end, two billion apps will be downloaded—every week.

• The apps economy has created at least 500,000 U.S. jobs and will grow from a $25 billion marketplace this year to $46 billion in 2016.

• The average mobile American has more than 100 apps on their smartphone—and spends, on average, 127 minutes a day using them.

Full infographic below:

Want to see more? Check out some of our other mobile-focused infographics:

• 2012 Mobile Year in Review
• Mobile Data Growth and What it Means For You
• Growing Demand for Wireless Spectrum

Our Social Machines™ work focuses on bridging the online and off by enabling real-time social data to affect things in the real world.

What started with a Foursquare Lockbox soon morphed into a GE Social Fridge and a Thought for Food Social Vending Machine.

Today we’re proud to show the early prototype of our most diabolical Social Machine to date.

Meet Paintbot: an Arduino powered paintball gun that can be fired using Tweets.

Big props to Zach, Taylor, Nathan and Mike for creating this in less 12 hours.

The video speaks for itself. Note: The Paintbot is offline at the moment for cleaning :)

You can imagine that this is one hot ticket, and, unfortunately, some people aren’t able to visit this amazing event and left to sit at home wondering about what they are missing out on; that is where iSL came in. We designed and built a Tumblr page for the NACS Show 2012 whose content was comprised of real-time photos, videos, and text garnered by the iStrategyLabs Social Media Team that scoured the floor during the show. We were able to let the show live online so anyone not in attendance could digitally follow along and those that did attend could get a chance to see what they might be missing out on.

The main mission was to capture the sights, sounds, and overall exciting energy of the two day expo while also being sure to emphasize the NACS brand as much as possible. It was imperative that this be incredibly mobile friendly and our clean-cut, easy-to-navigate design made sure that was the case. Easily sorted by content type, and searchable, the Tumblr page became a hub for all NACS Show activity, all happening in real-time.

Once we arrived at the show, it was just a matter of trying to capture all the amazing content. Two days was barely enough time to experience everything at the NACS Show!

We interviewed reps from some of our favorite brands…

And got a first-look at some of the mind-blowing new products we can expect to see in stores soon…

Luckily, there were plenty of energy drinks to be found.

So we were able to power through and really get behind the scenes.

Finally, after two incredible days, we made like Elvis and left the building, counting down the days until the NACS Show 2013 in Atlanta!

See you in Atlanta!

Header Photo Credit: JD Hancock via Compfight cc

At iSL, we’re pretty lucky to have a Wacom Cintiq 21UX in the office. For those unfamiliar, the Cintiq’s a pressure sensitive monitor that you can draw on with an electronic pen the same way you’d draw on paper. It’s seriously top of the line. I’ve been wanting to make an animation with the Cintiq for a while now, and this seemed like the perfect opportunity to do just that. So I made this gif:

And of course I had to create a process breakdown.

Step 1: Sketch the concept

Right at the start I knew I wanted to morph our Social Machines logo into our iSL logo, the only question was…how? Drawing inspiration from several logo bumps I’d seen around the internet, I decided the way forth was to use a sort of black-hole implode-then-explode technique. Simple, quick, and allows for some messy fun in-betweens. I sketched out some loose keyframes on paper to help me visualize the idea.

Step 2: Timing out Keyframes

To help myself time out this animation, I scanned my concept drawing into photoshop, divided out the individual drawings onto separate layers (treating them like keyframes) and arranged them in the timeline panel where they would appear approximately when the animation ran at full speed. The goal being to figure out the major points of action in the animation so that I could fill in the space in between with the appropriate drawings. The result looked something like this:

Step 3: Actually Drawing the Thing

From there on, I had my road map laid out and it was just a matter of drawing the final animation. I wanted the first and final frames to look as crisp as possible so I simply placed vector elements at the beginning and end of the animation. I wanted the morphing motion to look as fluid and cartoony as possible so I drew all of those frames with the Brush tool (actually, the Pencil tool because it allowed me to fill areas with the Paint Bucket more easily).

All told I drew about 25 images for this animation. Not so bad. I was able to crank the whole thing out in a couple hours. Here’s what the frames look like:

Step 4: Provide y’all with the PSD so you can see for yourself

I’m a huge fan of sharing. So for folks who want to check it out I’m offering up the .PSD file from which I exported this gif. I used Photoshop CS6 Extended Edition. Not sure how that will effect backwards compatibility, but I’m pretty sure you’ll need Extended Edition to manipulate the timeline.

Anyhow, hope you enjoyed this post. Look forward to more from me regarding dope Photoshop tricks and other such things that are awesome.

The Thought For Food Challenge has been selected as one of the 15 finalists from around the world that “demonstrates intrapreneurship, innovation, social impact, and sustainability.”

Please support this important work by voting it up by March 8th:

·        Visit this site and click on the “checkmark” next to the TFF entry

·        Sign up, vote and spread the word

Last year’s promo animation is below:

Since its first ceremony in 1929, the Oscars have become a staple in the entertainment industry across America and throughout the world. But where are they MOST popular? Let’s look at search interest to help answer that question.

With the help of Google Trends, I identified the top cities each year from the past decade with the highest search volume for “Academy Awards.” The chart below scores their relative search volume. Drumroll please…

And the winner is: San Francisco!

After a rocky near decade of highs and lows, with which almost any Hollywood actor can empathize, San Francisco challenged rival Californian city Los Angeles and took the #1 spot for highest search volume for “Academy Awards.” Could it be due to the anticipation of Ashton Kutcher’s pending Steve Jobs movie? I can’t imagine what else it could be.

Runner-up: Los Angeles

Like any classic twist ending, Los Angeles stunned the country last year as it dropped from its #1 ranking in search volume for the Academy Awards. To date this year, LA is still trailing to San Francisco.

Up-and-comer: Seattle

Just like ol’ Brucie, Seattle has come back onto the Hollywood Search scene with a Vengeance. After missing the top ten in 2010, Seattle now sits in third place for most searches for “Academy Awards” and is closing in fast (cue less-than-believable car chase scene).

Past its prime: New York and Chicago

Both New York and Chicago, peaking in interest in the late 2000s, have since been on a steady decline of about 15 points. I guess there are better things to watch on TV?

Darkhorse: Toronto and Washington, D.C.

Don’t count them out of this race just yet – with many other major cities on a decline, unassuming Toronto and Washington are poised to make their theatric debut on the top 5 center stage soon enough.