With the recent launch of our new product, SlideDeck 2.0, we thought we’d do something a little different by giving insight into some of the inner workings on how we go from idea to execution in our designs. In this case, we wanted to show you our process behind the brand identity of each of our decks. Since the concept of a “deck” is new to SlideDeck 2, we wanted to make sure that users had the necessary visual clues to guide them towards which one was right for their needs. Thus, these deck brand identities needed to fulfilled the following requirements in order to make the cut:
- Icon had to clearly indicate what kind of functionality it served as a deck.
- Icon needed to convey an immediate connection and understanding on what it did upon the initial seconds of seeing it.
- Icon needed to maintain neutrality in its purpose; in other words, a video deck shouldn’t suggest it’s simply a YouTube deck when it supports uploaded videos, Daily Motion, and Vimeo as well.
- A sense of tangibility and realness to each icon
While the concept of an image-centric deck seemed simple at first, we quickly realized that any decision to use a picture-based visual (such as a polaroid or picture frame) would violate requirement #3 in that the purpose of the deck could be misconstrued based on what topic the photo reflected.
Different image sources were meant for different people; Flickr decks were typically photography centric while Dribbble decks were design centric. So we went with something that spoke more to the core of the deck, which was that this deck served as a “snapshot” of an image; therefore, we determined a camera theme would be most effective. We created a moodboard, looked at elements of a camera that helped distinguish it the most, and put together a clean yet detailed icon that would be identifiable when scaled at various sizes.
Of all the deck icons, the SocialDeck icon presented the most difficulty in executing the requirements we had set for icon creation. We struggled with the idea of how to visually represent the concept of “social,” especially since A) utilizing one or two types of social icons would remove the deck’s identity from the more general concept of using it for social means, and B) the usage of the social deck is so varied in that it can be used as a visual header for one site or be used as a dynamic footer for another. At first, we tried having a “social gathering” feel and introduced actual images of users.
In the digital world, however, the concept of social isn’t just with people, it can also be solely with yourself (ever seen a Twitter stream used as a personal soapbox?). We wanted to avoid focusing on one particular action that the social deck was capable of (such as sharing with friends, socializing, broadcasting) and instead speak towards a broader function and purpose that a deck utilizing social media could offer. So we moved onto speech bubbles.
At this point, we also wanted to emphasize the idea of sharing thoughts and ideas in addition to words. After all, so much of social media isn’t about what someone is saying but rather what someone is sharing. Therefore, we created a comment bubble that was left “open ended.” It was a representation of communication in its purest form, without specificity in words or returned communication — it was clear and translucent, only to be left being filled by whatever “background” existed for the user.
What visualizes a “post”? Depending who you are and what hobbies you pursue, a post could be visualized as one of many things — whether it’s a post-it note, a job posting on a board, or even a flyer on a wall. But what if we threw a curve ball in that in addition to visualizing a post, we also had to visualize a “page.” Well, that’s what we had to do when coming up with this deck’s identity. Our PostDeck icon needed to convey to a user that they could use the deck for both custom post types and pages as a feed source. So we decided to tap into the source behind what posts and pages had in common with our users: WordPress. There we stumbled across the defining visuals for posts and pages — pins and paper sheets.
So we created a nice modern-styled push circular push pins (the traditional ones always left painful indents in your thumb anyway) and stuck it into a simple college-ruled sheet of paper. To give it a nice textural and tangible feel, we worked some corkboard into the background frame for the icon and viola! A hybrid visual that represents what its functionality is in the most literal sense. But then there was a matter of the WordPress branding into the page — to give that recognition factor a little more oomph.
Should we have gone with truly organic? A scribbly sharpy look? A nice subtle WordPress watermark? In the end, it came down to a matter of initial impact, scalability, and easy recognition.
Aside from a camcorder (which has a similar iconic aesthetic to the camera icon we did in the ImageDeck), what is the next most recognizable item a user would connect to cinematography? Our answer is a movie clapboard. Initially, we moodboarded out a clean, crisp, and sharp clapboard and then executed based on that theme.
The design was close, but still missing something. Back to requirement #4, we had to ask ourselves, was this icon realistic? Well in the real world, numbering wouldn’t come out so perfectly in Helvetica — hence the need for placeholder roll/time/date slots on a real clapboard. And while the text served its purpose in legibility, it put the legitimacy of its realism to question. So we found a clean chalk font, added some chalk smudging (since a SlideDeck would probably be edited more than once), made some tweaks here and there, and came up with the VideoDeck’s final icon.
If it was one thing we didn’t want for this icon, it was another typical RSS icon with a splash of graphical treatment thrown on to it. We wanted to bring the original intent and experience of a “feed” to the user by reintroducing what a feed could be represented as in the real world. We brainstormed recognizable objects in real life that accomplished what feeds do in the virtual realm and in the end, gravitated towards newspapers.
Newspapers delivered its most recent news and content to the user in a similar manner that feeds did; furthermore, they were a highly recognized representation of “recent news” that would be familiar for all audiences. Going for sort of a patina-ed and aged look, we came up with a folded newspaper icon sitting on a flat wooden surface. We added our own fun little embellishments to the larger versions of the icon, such as the date it was created, an image of an actual SlideDeck, a newspaper title based on our own name, and some pseudo-content that had fun facts about SlideDeck and DT. After our first look over, however, we felt the look and feel was right but that we’d also need some pseudo-content that stood the test of time.
We also wanted a blatant giveaway element somewhere on the icon that let users know that this deck was indeed RSS centric. So we changed up the copy, had the feature image of a newspaper be an RSS icon, and set the final icon off to the presses!
And there’s the story of our deck icons. So what do you think? Let us know in the comments below — we’d love to hear your thoughts!