The Side Nav Revisited

Appointment by Paresh Khatri

Browse Shows – iOS App by Umar Irshad

Dialoggs – Collapsible Menu by Drew Wilson

Dashboard – Realtor Project by Brian Waddington
 

Zendesk Project Lotus by Jason Wu

Page Curls and Peels

Qiwy iOS app curl test by Mikael Eidenberg

Inside (first draft) – iPad – UI/UI/iOS by Cuberto

Peel Back by Juan Sanchez

Curl by Prathyush Pramod

Bookmark for Magazines by Ugur Akdemir

Folding Screens

Lockscreen Concept Continued by Johan Rundbert

Fold to unlock iOS style by Anton Kudin

Flipweek agenda by Wouter ● Bread&Pepper

UX/iOS idea with video process by Cuberto

Unlock Concept by Guillaume Gaubert
 

Complex Tooltips, Modals, and Popups

Category popup by Fares Farhan

Wunderlist Mini by Tanveer Junayed

Paris in the Spring by Dave Ruiz

Dashboard by Kerem Suer

Modal Window by Ionut Zamfir

Switch Elements

On Off Switch for iOS App by Cosmin Neagu

Qiwy iOS app switches by Mikael Eidenberg

Buttons, Lights & Shadows by Fernando Maclen

Toggle Buttons by Onur Orhon

Rocker switch v2 by Mike Bernardo
 

Interfaces with Depth and Layers

Credit Card by Matthew Sanders

Robots in disguise by Austin Bales

Circle by musHo

iPhone App UI by Filip Chudzinski

App Remix: Lose It! by Carl DeCaire
 

Progress & Loading Bars

FoodSimple Meal Manager by Handsome
 

Mini Music Player by Daryl Ginn
 

Countdown by Kerem Suer
 

Deloitte iPhone application by Deloitte Digital Australia
 

Progress bar lives by dimga
 

Social Sharing

Share Button by Patrik Larsson

Share by 3DROPS

Facebook button concept by Erik Deiner

Share Bar (Animated) by Shaun Moynihan
 

Tweet this by Eddie Lobanovskiy
 

Today, the ubiquity of mobile touchscreen devices, coupled with the steady increase in the resolution of consumer screens both in the mobile form as well as traditional laptop and desktop settings,  has revived scrolling as an effective and intuitive way to navigate through web content. With its rise, there has been a corresponding growth in the acceptable length of content-heavy pages, as designers experiment with using single pages to tell compelling stories with their content. The following is a collection of examples we’ve encountered that are poster children for the long scroll trend.

1. Navigation via narrative

Concise, and to the point has become a popular style of content on the web today. Simple contact forms, brief but clear “about” sections, and scannable “features” callouts – to name but a few – are leading the way in consolidating content into a single page. The pressure on the traditional horizontal navigation bar is easing, as it no longer must accommodate vast numbers of internal site pages. Instead, nav bars are being leveraged to lead users deeper into the story of the site’s main page. Keeping the story contained to a single page helps preserve the seamlessness of the experience, and helps guard against key content possibly being missed, due to the linear nature of how long pages present content.

Single: http://singlecard.co.uk/

Single utilizes a slider to deliver a simple story to its users. All of the nav elements on the site serve the purpose of leading the user through their story – even the top right navigation  tab takes you to the very last slide that contains the main call to action.

Pur-Suit: http://www.pursuityourself.com

Pur-Suit is another site that opts for a clean and easy-to-navigate layout that tells its story. The site does have a small navigation bar, but it is confined to the very top of the page and its purpose is focused on helping navigate users down the page.

Whitmans New York: http://www.whitmansnyc.com/

Whitmans provides all of the necessary sections a user would need to navigate through a restaurant site in a simple scrolling experience. The navigation sticks to the top right and remains a tool for jumping through different sections of the page, allowing users to quickly skip to the information they need.

2. Promoting engagement with metaphors & interactivity

Incorporating meaningful metaphors and rich interaction throughout the linear path of a long scroll page is a great way to keep users engaged with the story. Humans tend not to do well with uncertainty, so simple metaphors woven into the structure of your long pages help foreshadow what the user will encounter along the way. Sprinkling interactivity throughout these pages is similar to the good practice of stopping to stretch one’s legs on a long roadtrip – offering these mental breaks to your users keeps them focused, and helps them return to the journey refreshed and ready to continue.

Online Portfolio of Jan Ploch: http://www.janploch.de/

Jan Ploch uses the simple but fun metaphor of drinking a bottle of soda to compel users to reach the end of his page — thus concluding a satisfying drinking experience (*burp* – ahhh). This subtle visual interaction keeps users scrolling down the page to reach the end goal of seeing his final call to action.

La Moulade: http://lamoulade.com

La Moulade is a design firm that utilizes a wide range of scrolling from various angles – not just horizontal and vertical – in their web pages. The surprise of angular motion in a medium that is almost terminally married to up-down/left-right movement captures your attention almost immediately, but what keeps you moving forward is the gradual reveal of additional content. The text and images act as building blocks for an easily comprehended layout, as the viewer keeps scrolling through, creating a satisfying experience all the way through.

Dangers of Fracking: http://www.dangersoffracking.com/

The Dangers of Fracking site is an excellent example of creating engagement and interaction between the user and the content using long-page scrolling. The page tells the fascinating story of a single drop of water as it goes through the fracking process – making sure to provide informative snippets of content at each step along the way. The innovative transformation of the content encourages users to keep scrolling and discover what other surprises are in store.

Wunderkit: http://get.wunderkit.com

Wunderkit’s site is filled with all sorts of rich interactions that are cued to start when a user scrolls to certain sections down the page. The sum of all the small visual delights nestled within this page keeps users alert, and on the lookout to learn more about the product.

3. Improved comprehension

As anyone who’s infuriated a sibling by shouting random numbers while they’re memorizing a phone number can tell you, the human brain can only hold between 7 and 9 pieces of new information in short term memory at one time. Traditional sites with many separate pages break up content, therefore placing a greater burden on the user’s short term memory to piece together the holistic message from disparate fragments. Collecting content within a single experience allows users to follow an unbroken thread, thereby aiding in comprehension and recollection down the road.

Rdio: http://www.rdio.com/

Rdio’s long scroll pages break up their content into digestible chunks of information that all relate to the main theme of each page. For example, the Apps page explores the various ways of using Rdio on different platforms – taking care to differentiate each section with good use of color blocks, while maintaining consistent style and flow from one section to another.

Think Green Meeting: http://thinkgreenmeeting.com

Think Green Meeting allows readers to jump to the information they need by clicking on the consistent navigation menu to the left. While the layout varies significantly from section to section, the panning motion between them connects the pieces together, reinforcing the main message.

Simple: https://www.simple.com/

Simple is a site for a new money management service…that’s not a bank. The concept requires some explaining. Their challenge is to demonstrate their key value proposition quickly and convincingly, and to motivate visitors to sign up. The one-page scrolling design is a dramatic departure from the majority of online financial services websites, which typically contain oceans of content – most of it text. Simple presents their key points briefly, linking to pertinent examples. This layered approach aids in comprehension of their new concept without overwhelming the visitor with details too early in the exploration.

Long page scrolling designs are great for delivering end-to-end stories to your audience, and with the proper execution can propel your users toward the main goal – whether that’s a form submission, a product purchase, or even just reaching understanding of an idea you want to share.

Have you been impressed by a long page scrolling site recently? Share it with us in the comments below!

We use them constantly at DT – and to such a degree that we thought it’d be great to create a way of making this versatile symbol much more accessible to our daily workflows.

Therefore, we’re very excited to announce Arrrows, a fully scalable icon font for all of your design needs.

With the current direction of the web and the growing use of CSS styles and web fonts, we realized that having a font library of different style arrows would not only save time in our workflows but also be a valuable tool in executing our designs on the web.

Here are some of the things we love the most about Arrrows:

• Dozens of different arrow styles to choose from for all types of use (normal arrows, decorated arrows, media player arrows, cursors, download/upload arrows, and general UI-related arrows to name a few)
• Two arrow styles, normal arrows and circled arrows, determined by two different font weights (Regular and Bold)
• Intuitive and easy access to different directions of arrow characters: lowercase characters and numbers for one direction (right) or uppercase and symbols for the other (left)
• Easy web font integration via @font-face implementation

Also, whether you decide to get the free icon set or font bundle, you’ll get access to the fully editable and scalable pixel perfect PSD containing the entire Arrrow icon set in both normal and circled arrow styles.

We hope that you’ll enjoy using Arrrows as much as we do!

Are you a designer on a deadline? If you are, then I’m sure you can recall the last time you thought to yourself, “if I had a little more time, I could…” what? Polish that button? Find a better hero image? Reevaluate that color palette? Take some time to do a little more QA?

The truth is, however, that we designers will always be looking for more time to polish the one pixel that got away. But rather than begging our project managers for more time on our projects, maybe it’s time we look at our own workflows and see if there are any ways for us to gain just a little more time.

Of course, since our go-to design tool in the office is Photoshop, we thought we’d share with you 50 simple Photoshop tricks and shortcuts we love using that can help trim excess spent time in your workflows.

Important Note: The following require Photoshop CS5 and a Mac OS X.

The Usual Keyboard Shortcut Suspects

Memorize these shortcuts. They hold the greatest influence and weight in slimming the time you usually spend in Photoshop.

1. Layer Blend Mode Shortcuts: Normal (Shift + Option + N), Multiply (Shift + Option + M), Screen (Shift + Option + S), Overlay (Shift + Option + O), Soft Light (Shift + Option + O), Saturation (Shift + Option + T), Color (Shift + Option + C), and Luminosity (Shift + Option + Y)

2. Cycle through Blend Modes Shortcut (Shift + – or +): If you like cycling through various blending modes for quick experimenting, this shortcut allows for you to move up and down your current layer’s blending mode. Note that if you’re in any of the retouching/painting tools, it will cycle through the blending properties of that retouching/painting tool

3. Opacity shortcuts: Tapping 1 through 0 will give you opacities between 10% to 100%. Tapping multiple numbers in quick succession, however, will give you that specific opacity percentage (i.e., tapping 5 and 6 quickly will get you a 56% opacity level).

4. Fill opacity shortcuts: Holding down shift and tapping 1 through 0 will give you fill levels between 10% to 100%. The same applies here where tapping multiple numbers in quick succession of one another will give you specific fill percentages.

5.Keyboard shortcuts for flipping foreground and background (X): Use this to switch between your current foreground and background colors located in your toolbar.

6. Keyboard shortcut for setting default white foreground and black background (D): Quickly accessing black or white will be necessary for many occasions, including a quick layer masking, or brushing highlights and shadows onto objects. This shortcut defaults your current foreground to black and background to white.

7. Brush tool shortcuts for adjusting the size and hardness of brush tools: Hit the bracket keys, [ or ], to change the size of your brush. Hold down shift when using the bracket keys to adjust the hardness of your brush in 25% intervals.

8. Hiding and showing rules and grids: Use Command + ; to show and hide rulers. Use Command + ‘ to show and hide grids.

9. Fast editing with Hue/Saturation (Option + Command + U), Levels (Option + Command + L), and Curves (Option + Command + M): Quick pixel editing is sometimes a necessary thing to do in a PSD. Even if you’re just trying to experiment or see how certain pixels can be manipulated, try utilizing these fast shortcuts to adjust hue, saturation, lightness, levels, and curves on the fly!

10. Shift + Anything for incremental nudging: While you may already know that Shift + any Arrow Key incrementally nudges an object by 10 pixels (multiplied by whatever zoom level you’re at), did you know that holding down Shift + Arrow Key in certain windows in Photoshop can also allow for 10% nudges? Try holding Shift + Up or Down Arrow on any number input field in Photoshop (like the font size input field or any number input field in a layer styles panel) and you’ll see that holding Shift in these instances will also jump your number values in increments as well!

Customized Must-Have Keyboard Shortcuts

These are a few useful customized keyboard shortcuts that for some reason didn’t make the cut when coming out in CS5. If you enjoy this sections tips, you can create your own keyboard shortcuts by going to Edit > Keyboard Shortcuts (or Shift + Option + Command + K)!

11. Flip Horizontally and Flip Vertically: How great would it be to have a keyboard shortcut that flips your pixels horizontally and vertically? Try custom binding Flip Horizontally to Shift + Command + H (for horizontal!) and Shift + Command + J (since V is so commonly used for pasting) for Flip Vertically.

12. Convert Point Tool: This is a powerful and useful tool when dealing with any sort of paths/shape layers in Photoshop. It also shares similar functionality to its sister tool in Illustrator so if you want to maintain a little more consistency between the two programs, consider binding this tool to C (which is currently the crop tool but we’ll get to that in our next point).

13. Edit > Crop: The crop/slice tool by default is a great tool to have, but think about how useful it would be to simply make a selection and crop with that selection instead in Photoshop. Even if you are a fan or frequent user of the crop/slice tool, utilizing the general crop function can be a valuable asset to have. So consider assigning a shortcut to this editing function such as Shift + Option + Command + C.

Photoshop, the Word Processor

Who knew Photoshop could be such a great typography program! Consider using these shortcuts below for faster and more impressive typography in your PSD.

14. All Caps (Command + Shift + K): Aside from using Underline (command+shift+U), this will be your go to for making certain parts of your typography all caps.

15. Faux Bold (Command + Shift + B) & Faux Italic (command+shift+I): If your font has a bold or italic weight, this shortcut will toggle between the font family’s weight. Otherwise, it’ll simply add a faux weight style to your font selection.

16. Decreasing and Increasing Leading (Option + Up or Down Arrow), Tracking (Option + Left or Right Arrow), and Kerning (Option + Shift + Up or Down Arrow): If you’re a typography machine, these shortcuts will turn your bland paragraphs into beautiful print-quality works of art!

17. Add Space After (or Before) Paragraph: Under the paragraph window, you can designate how much spacing a paragraph has after the paragraph is completed. No more double indenting to get the pseudo content separation you’re looking for.

18. Command + Enter = Commit… Anything: Instead of hitting that annoying little check box on the top menu bar, if you use this shortcut, you’ll be able to exit out of Type Tool editing mode. As a bonus, this shortcut also works for committing Transform edits as well!

19. Fast Cycling through Fonts: Trying to see which font would work best for that header copy? Select the text layer you’d like to adjust, make sure the text tool is active, and simply click on the font name’s input field. Once this field is highlighted, you can simply hit the Up and Down Arrow to cycle through your various fonts. You can also hit certain letters to jump through to various parts of your font library. Oh, and need to just experiment with one or two words in your text field? You can highlight the words you want to play around with and cycle through the fonts using the same method.

Layers, Masks, and Styles

Ah yes, the heart of Photoshop. You thought these things only sat in your layer panel? Check out what fun and convenient things you can do with them.

20. Merge one or more layers (Command + E): For a quick merging of one or more selected layers (and the don’t have to be adjacent to one another), hit Command + E to merge them up. All of the merged items will merge upward and assume the layer name of the top-most selected layer.

21. Create a flattened image of your PSD and place that image on top of your existing layers (Shift + Option + Command + E): An absolute favorite go-to. Rather than simply merging all of your PSD’s layers with Shift + Command + E, you can create a flattened image of your entire PSD on top of your existing layers. Sure your fingers will be doing quite a curl, but it’s well worth it!

22. Group layers (Command + G): Groups are a must for layer organization and any sort of collaborative work with other people. Select multiple layers and use this shortcut to group like items together. It reduces the scrolling work you’ll have to do in your layers panel and might aid in moving around, applying masks to, and correctly utilizing multiple layers at one time.

23. Layer linking: And if you’re opposed to grouping layers, you can always link layers of similar relation. Just right click on the selected layers you’d like to link and choose Link Layers. Linked layers don’t have to be next to each other so you can take some text from the top of your layers and link it to images that may be residing at the bottom of your layers panel. Linked layers will always move together if one of the linked layers is being moved. Similarly, linked layers will maintain the move-centric lock attributes (Lock position and Lock all) that any of its other linked layers may have.

24. Select multiple layers via selection: If you’re trying to move multiple layers within a given selection on your canvas, activate the Move tool and then hold down Shift + Option + Command and drag your cursor (it will create a rectangular selection marquee) over the area you wish to select multiple layers of.

25. Easy hiding and showing of multiple layers: If you have a section of layers you wish to show or hide quickly, you can click and hold down on a visibility symbol (the eye), and drag your mouse across the layers you wish to quickly toggle on or off. With this trick, you can either drag straight up or down the visibility symbols OR you can even weave around some visibility symbols that you don’t want to toggle so long as you’re still holding down and dragging!

26. See all corresponding layers at given pixel: Although tip #24 is a great way of selecting multiple layers at once via a selection, you might need to only select a certain layer within any given area of your canvas. Right click on the canvas and you will be given a menu list of all of the layers that have a visible pixel in that exact pixel location.

27. Selects all visible pixels on any layer, path, or mask: To select all visible pixels in any given layer, path, or mask (layer or vector based), hold down Command and click on the thumbnail in the layers panel to create your selection. For example, selecting a vector mask will select all path shapes within the mask, and selecting a layer with some brushed elements will select all of the brushed pixels on that particular layer. If you wish to make multiple selections, simply hold down Shift and click on any additional thumbnails.

28. Temporarily hide the effects of the layer or vector mask: To temporarily disable a layer or vector mask, Shift + click on the mask’s thumbnail to toggle the mask on and off.

29. Shift + dragging with direct select tool: This enables you to create selection boxes which allows for easier selection of bezier points (rather than having to click on them individually!). Remember you can hold down shift to click + drag multiple points

30. Keyboard shortcut for moving between layers (Option + [ or ]): If you’re working in the same layers, why not utilize a keyboard shortcut to quickly maneuver to the layer you need to be on rather than moving over to the Layers Panel and individually clicking each layer?

31. Keyboard shortcut for moving layers (Command + [ or ]): You can also quickly move a selected layer up or down layers panel. And if you need to simply move a layer to the top or bottom of your layers panel, hold down Shift + Command + [ (move to bottom) or ] (move to top).

Seeing the Bigger Picture

Whether it’s zooming in and out, removing menu bar clutter, or seeing multiple windows of it at the same time, there are dozens of way you can view your working PSD. So let this influential and useful ability to view your PSD be easy and quick to use.

32. Toggle between Screen Modes Using F: Tap F once to toggle to Full Screen Mode with a Menu Bar. Tap F again to toggle to Full Screen Mode (automatically turns your gray artboard area black). And Tap F one last time to bring you back to your working Standard Screen Mode.

33. Spacebar + click to pan: An easy way of panning up, down, left, or right. Don’t forget to take advantage of the auto-easing effect Photoshop has upon mouse click release!

34. Zoom in and out using option + mouse wheel/scroll: This is an easy and great way of zooming in and out of areas without having to deal with forced zoom size intervals.

35. View Actual Pixels (command+1) and Fit on Screen (command+0): One of the most used go-to shortcuts. Sometimes you have to see

36. View PSD in two windows simultaneously: Seeing two views of the same PSD simultaneously comes in very handy. For example, you could be working on a homepage at 100% zoom on your main screen but have a full-window and zoomed out view of the entire homepage on another screen. It helps let you see the forest through the trees, especially when your head’s staring down at individual pixels of a design. So try utilizing a two window view by going to Window > Arrange > New Window for “Your PSD”

Options with the Option Key

The Option key, one of the greatest keys a Mac has to offer. But how does this key extend its great functionality into Photoshop? See what fun Option + dragging has to offer.

37. Easy Clipping Masks: If you want to quickly clip two adjacent layers together, hold down Option and hover your pointer between two layers. It will clip the upper layer to the lower layer.

38. Copying Layer Styles and Effects: Hold down Option and drag the fx symbol with the effects you want to copy over to the layer you wish to copy the layer effects to. It will duplicate all of the layer styles of the first layer over to the different layer. Additionally, if you only want to copy one particular style (such as a Drop Shadow) from one layer to another, simply click the actual name of the effect itself (in this case Drop Shadow) and Option + drag that effect over to the layer of your choice.

39. Copy Layer Masks and Vector Masks to other layers and groups: Did you know that you can also Option + drag Layer Masks and Vector Masks onto other layers and groups? Simply select the actual thumbnail of the Layer or Vector Mask and Option + Drag it over to the desired layer or group.

40. Option + double clicking on a background lock unlocks the background property: If you’re working with recently opened images or Background layers in Photoshop, you can simply hold down Option and double click on the lock itself to remove the locked Background layer property. As another note, dragging the lock symbol over to the trashcan will do the same trick (as well as for any of the other layer lock functions).

41. Fast Eyedropper: In addition to its normal useful shortcut (I), if you’re in any of the retouching/painting tools (such as the brush tool) you can easily switch your cursor’s tool function into a quick eyedropper by simply holding Option. The minute you let go of Option, your cursor will return to its original tool.

Things You Know You Should be Doing More

Even when no one’s looking, you should still be implementing these tips below into your everyday workflow. They’re great tricks to get into the habit of doing and they’ll make the usability of your PSD skyrocket!

42. Save for Web & Devices (Shift + Option + Command + S): As cramped as your hand might get from reaching to hit all of the keys for this shortcut, the price is worth the time saved since you’ll often be utilizing this when saving out your PSD.

43. Close an Individual PSD Window (Command + W): If you’ve got multiple PSD windows open that you’re jumping between and you need to quickly close one the PSDs, instead of aiming for that ridiculously small close button, try using Command + W to close that individual PSD instead. And if you get that annoying little fail-safe window for when you’re closing an unsaved PSD, why not save a click by hitting S (for Save), C (for Cancel) or D (for Don’t Save)?

44. Adding or subtracting from selections: If you want to do more than one marquee selection at one time, hold down Shift to add more selections or Option to subtract from your existing selections.

45. HUD Color Picker via Mouse instead of Color Picker via toolbar: A nice new feature of CS5 has been the convenient implementation of being able to access the color picker without breaking a workflow (via the normal Color Picker window that you have to click to open). Simply hold down Control + Option + Command and click while using a tool from the retouching/painting section of the toolbar to activate the new Color Picker. You can also customize the view of this Color Picker in the General tab of the Photoshop Preferences Panel.

46. Use Smart Objects: Smart objects are great in that they preserve the original state of an object before being converted to a smart object. They’re also useful in that you can create duplicates of a single smart object (like a button), make a change within the original smart object’s PSB file, and then have that change affect all of the duplicate instances of the smart object. To create a smart object, simple select the layer(s) you wish to combine into a single object, right click in the layers panel, and select Convert to Smart Object.

47. Use Smart Filters: If you love using filters, you will love using smart filters. Not only are smart filters non-destructive, but the smart filter gallery view allows you to see what a layer would look like with multiple filters stacked together, and once you’re done saving the filters, you can turn them off easily by accessing their visibility in the layers panel. Lastly, one of the greatest things about smart filters is that they come with Filter Masks which act just like Layer Masks, so you can mask away parts of the filter if you so choose!

48. Save Layer Styles and Patterns: You’ve probably made that same button style over a dozen times now, so why not simply save that layer style setting and apply it whenever you need to? The “New Styles…” button is placed right below the OK and Cancel buttons in the Layer Styles panel but it’s often overlooked. Simply craft your layer styles, hit the New Styles button and save your layer style into your presets. If you want to apply that layer style again in the future, simply go back to the layer styles panel, click Styles on the top of the left navigation bar, click on the style you created, and hit OK! You can also manage your styles as well as other presets through the Preset Manager via Edit > Preset Manager…

49. Snapshots and Layer Comps: Stop turning groups and layers on and off to see what your design would look like with different changes and compositions. Utilize Snapshots to take a temporarily saved history instances of your PSD’s state; or, consider using layer comps to save specific states of visibility, position, and layer styles that you can go back to at any time in the PSD.

50. Snap to Pixels: Last but one of the most important, whenever using paths or shape layers, be sure to enable this option to ensure pixel-perfect designs. And when you do decide to move around those shapes, avoid Transform + moving these elements as different zoom levels make them susceptible to being placed in between pixels (rather than being locked in line with the next available pixel)!

So there you have it, 50 of our best tricks and shortcuts we use when working in Photoshop. So, did you find any new tricks from this list? Have any Photoshop tricks you think are must-haves to a workflow? Let us know in the comments below!

It’s quickly becoming apparent through its increasing popularity in mobile and web UI that designing transitions as well as crafting movement and animating elements are crucial to enriching the experience of an app or site.

Motion has every bit of influence on a user’s cognition, as does a palette of color or the setting of type. The timing of transitions has the ability to convey the emotions of your brand in addition to compelling users to stay engaged in your storyline. After all, for decades film directors have mastered the special ability of framing human emotion through the speed, type and style of camera motion.

By understanding the power of motion and movement, designers can utilize these tools to keep users on the edge of their seat – eagerly awaiting what sort of experiences an app or site has to offer. Check out the examples for remarkable websites with mood evoking animation.

http://community.saucony.com/kinvara3/
Saucony delivers an exciting campaign by inviting users into an interactive journey showcasing their new shoe, the Kinvara 3. In each section, parallaxing elements move simultaneously with the user’s cursor aim to maintain user engagement and create a remarkable experience. Once reaching the bottom of the page, the shoe is completely reconstructed in the center of the screen which ties the entire storyline together.

http://createdm.com/
In their homepage slider, CreateDM injects spirit into elements with animations that mimic real life movement and behaviors. The pumping hearts, the light switching on, and the compass tipping over provide comfort and delight to users through the familiarity of their own environment and life experiences.

http://squareup.com/
Square’s homepage slider features subtle movements between blurry background environments and a focused user interface. These serene movements serve as a visual connection tying together the realistic interactions and the simple experience of using the app. Square’s ability to utilize motion creates a genuine ambience that drives credibility and delivers insight to the benefits users can expect to receive from their product.

http://space.angrybirds.com/launch/
AngryBirds Space leads users through content on a low-gravity journey across an intergalactic realm. Rovio, the creators behind the AngryBirds app, utilize this design to reinforce brand consistency with content transitions and character movement that reflect the physics seen in the actual mobile game. The various parallax sections within the vast space environment allude the multiple stages and extraordinary adventures a gamer will experience when playing the game.

http://get.wunderkit.com/
WunderKinder introduces the features of their app through an amazing sequence of steps. Each step is timed perfectly to allow the viewers to take a moment and learn about the many uses of Wunderkit. The crafted transition of elements perform well in attracting attention and guiding users through the benefits of the app. Also as a special bonus, the graphics in their individual steps contain app-like animations that deliver a level of tangibility to the experience.

http://slaveryfootprint.org/
The beginning of SlaveryFootPrint.org prompts users with a single question. Selecting the answer to the question initiates an introductory animation and inserts a pause that prepares users in anticipation. As a user scrolls down, sections of content slowly fade from the sides of the screen to simulate a live dialogue in an empathetic tone. Slavery Footprint also incorporates subtle transitions of breaking chains and moving hands which reinforce compassion to their users.

http://jamesanderson613.com/
In just the first few seconds, JamesAnderson613.com creates an energetic environment with slow-fading introductory sentences and quick moving information points. As a user scrolls down, their attention is drawn to the content which fades into the bottom of the screen.

http://www.nike.com/jumpman23/aj2012/
The Fly Around campaign by Nike introduces users to an intense, fast-paced experience with swift section transitions followed by a slower ease-out of content. The high-speed journey matches well with the product identity solidifying a lasting impression to web visitors.

http://assets.wwf.org.uk/custom/foodstory/
Food Story from the World Wildlife Fund engages users with interactive elements by presenting slight bounces when a mouse hovers over them. The slow transition of content from the right side of the screen prepares users to begin reading the facts at the top of the screen. Slider controls within each section will bounce objects in to view which keeps users engaged and curious to learn more about the subject.

http://www.shoutdigital.com/
Shout highlights their personality through the playful animations of illustrated characters. Each character exudes their own signature movement which brings light to Shout’s creative imagination.

http://www.soleilnoir.net/believein/#/start
SoleilNoir offers an intriguing experience beginning with a sequence of text leading to a pulsing Scroll arrow. Moving downward through the site takes users into a colorful adventure, featuring objects replicating real life movement such as a moving bike and even an eaten cheeseburger. By creating familiar motion in their design, SoleilNoir is able to induce feelings of comfort which help to strengthen readability for their users.

http://www.nintendo.com.au/gamesites/mariokartwii/#home/
Nintendo’s parallax raceway invites users into a high-speed environment filled with action. Billowing smoke, flying turtle shells and multiple crashes give users a sneak peek into the invigorating fun they’ll receive when playing any of the games from the Mario Kart series.

http://www.bagigia.com/
Bagigia begins with a blinking mouse button inviting users to scroll down where they introduce their product through a series of fading sentences. In order to aim complete focus to their product, the top navigation bar is kept hidden, and it only bounces in on hover.

http://www.dangersoffracking.com/
Scrolling down on Dangers of Fracking enables content to slowly fade in, educating users about the awareness of hydraulic fracturing. Since this is an informative and serious subject, the slower transition of content gets the message across in a clear and simple manner.

hhttp://www.ghosthorses.co.uk/
Ghosthorses features interactive elements to entice users every step of the way throughout their website. From the buttons to the images, their use of animation complements with their confidence and expert attitude.

39 Web Apps and Tools We Use to Create Websites

Meeting, Brainstorming, Strategy

Our initial planning phases are all about collaboration. Here’s what we use to communicate, ideate and put the plan together.

Skype – Like many of you, our clients are in far-flung places. Jumping on a plane to review every comp or brainstorm every feature just isn’t efficient. Skype is the perfect way to get face-to-face with clients and review mockups in real time. It’s our default mode of communication when we need to screen share something.

Whiteboard – It’s not digital, but there’s nothing more valuable than being able to sketch out quick flows, wire concepts and architectures. We try to put one on every available wall surface. And now that we’ve run out of wall space we’ve taken to sketching on our glass conference room table as well.

Google Docs – Emailing files back and forth, buying Microsoft Office and dealing with version control just isn’t for us. If you’re over it too, we’ve found that Google Docs has come so far so fast that it is now our primary office suite for business docs. Plus docs make for perfect repositories for brainstorming notes, business requirements, to-do lists, timelines, and more.
Google+ – We use Google+ in the office in a number of ways, but it’s a great resource in helping us share and track innovative and interesting projects we find on the Web. It’s a great source of idea fodder to help in this phase of the project.

Basecamp – If your job is to ship, Basecamp is the lightweight tool to help you do that. We use Basecamp to track milestones, to-dos, team availability, project correspondence, files and more. If you’re in an Agile environment you might like JIRA or Pivotal Tracker for software built for that workflow.

Dropbox – Collecting and managing images, client files, presentations, comps and any other project file just works better on Dropbox. The desktop app makes it easy to add and access files stored on Dropbox and features such as folder sharing, public links and photo galleries make it a handy tool for working with clients and team members no matter where they are. Plus it’s great for version control because it saves past instances of uploaded files.

Information Architecture

They’re our go-to tools as we start to determine user flows, information architecture, prototypes, and user experience wireframe concepts.

Axure – A powerful wireframing tool that helps us build wireframes and emulate user experience and flows with interactive linking between wireframed pages. Axure lets us do quick and dirty wires for internal review and then lets us polish them up and annotate them for client delivery. If you’re looking for a less-expensive wireframe solution, we’re also fans of Balsamiq mockups and Mockingbird – especially for lower fidelity wireframe sketches.

Omnigraffle – A great tool for vector-based user flows, site maps, customer experience touchpoints and more. Omnigraffle is a great tool to help show overall user experience and the system interactions or information architecture.

Whiteboard – If we had a nickel for every time we went to a whiteboard in this phase we wouldn’t need to charge for our services. Again, it’s invaluable for ideating, trying out ideas and collaborating on solutions to business requirements.

Design, Presentation, and Iteration

When it’s time to bring the idea to life with design, there are the tools we turn to.

Adobe Photoshop / Adobe Illustrator – This is where the heavy design lifting is done. This isn’t news to any of you in the field; but these are the workhorses of the design phase, noway around it. Sure, there are other programs out there, but Adobe is still the best for everything from page layouts, logo development, custom art and production graphics. If you don’t love Photoshop, Fireworks also gets the job done if you’re doing mostly Web-based work.

Join.me – Why pay for WebEx or GoToMeeting when you can use join.me for easy screen sharing and client presentation. It’s dead-simple, and you can either pay for a recurring username and meeting room, or use a one-time code for free. It’s a great way to walk a client or colleague through a design.

GoToMeeting – If you need more from your screen sharing software, such as passing control of the screen between parties, conference call chat and recording, then paying for GoToMeeting may be a better option for you than Join.me.

Getty Images/iStockPhoto – We try to stay away from stock imagery whenever possible; but sometimes you need it. These libraries are deep and provide a wide range of options for finding that perfect shot of a hand shake for your contact page (I kid!)

Notable – Notable is a collaborative tool for sharing and tracking group feedback on creative comps. The ability to highlight and comment on particular areas of the comp make it easier to focus the conversation and communicate questions and changes even with remote teams.

Cloud – CloudApp is a simple desktop client for Mac that lets you instantly create hosted files by dragging local files to their app icon. Cloud immediately puts a short-link URL on your clipboard linking to a hosted version of the file. Great for avoiding those nasty 5MB Microsoft Exchange email size limits.

Skitch – A great, fast way to grab screen captures and share them with others via a hosted version of the capture. Their annotation tools make it easy to point to a particular element of the image for discussion. Plus, Skitch’s sets feature lets you put multiple related shots in one place for easy viewing.

Verify – Verify lets you show comps and concepts to an anonymous audience. The audience members have five seconds to review your designs and then answer a question you specify. From A/B tests on which creative they like better, to answering what they think the business does based on the design, it’s a great way to get quick, inexpensive feedback when trying to decide on a direction.

UserTesting – Want a more in-depth user experience review? UserTesting can provide panels of user testers based on information you provide. The sessions are task-based and the user’s screen is recorded. A survey can also be included. If you want to user test your new app or new site, it’s a great way to validate your assumptions or identify hidden usability problems.

Basecamp – This phase is all about back and forth, and Basecamp is a great tool to manage the iterations and make sure we’re all on the same page and working from the latest version.

Development

With design locked it’s time to build the engine that is going to get this project up and out to the public. Here’s our list of tools to get ‘er done.

TextMate/Notepad++ – The best, lightweight desktop code editors. If you’re a Mac you’re probably TextMate. PC? Notepad++. The built-in templates, auto-complete features and overall polish make them the gold standard when it comes to Website development. They’re perfect for coding out a website, or a WordPress install.

FileZilla/Transmit – Your go to FTP clients. Not overly sexy but critical to workflow. But you already knew this.

PuTTY/Terminal – Server configuration, crons, software and database setup, maintenance, etc. It’s still the easiest and best way to efficiently manage servers.

Aptana – A robust IDE (Integrated Development Environment), Apatana lets you build applications right on your desktop. Pick your language and get bring your app to life with everything you need to dev and QA your web app right on your desktop.

Coda – Coda bills itself as one-window web development for OSX, and that’s a pretty accurate statement. Coda provides a text editor, FTP, Subversion control and more rolled into one pretty package. Some people swear by Coda, we’re those people.

Beanstalk – Hosted subversion and Git version control. Beanstalk lets you easily manage your deployments by doing the complicated merging, updating and logging changes while providing collaboration and communication tools to help your team more effectively manage deployments. A nice tool if you don’t have a full-blown deployment team for rolling out new builds.

Firebug – If you do any front-end Web dev you live with Firebug open on a regular basis. It’s great for identifying styling issues, trying out new CSS in your browser and pushing and nudging items into place with minor CSS tweaks. The copy styles makes it easy to take those tweaks and build them into your primary CSS files.

Border-radius.com – Need the CSS for a rounded button? Enter the values and this handy tool cranks out the style information you need to get your rounded button on.

Javascriptcompressor.com – JS can be a resource hog if it’s not properly optimized and managed in the code. You don’t want to kill your load time with bloated Javascript, which is why javascriptcompressor.com comes in handy. You paste in your JS code and you’ll get compressed JS back that will be easier on your user’s Web client.

jshint.com – Have a pesky JS bug you’re trying to squash or looking to validate your existing code for any potential issues? Paste your JS into the site and it will spit out a list of errors and potential issues.

Papercut – Email notifications are a way of life with any Web app. But sometimes you don’t want to go through the headache of connecting your app to an SMTP server just to test and see if it can send email. So Papercut lets you set up a simple SMTP server and GUI so you can receive test emails from your app and validate their content and creative.

ColorZilla – If you’re using gradients in buttons and other UI elements this handy tool will let you specify gradient settings and then generate the CSS style information you need. Next time don’t skip the gradient because the code is too complicated, use the gradient and get the code with ColorZilla.

CSS Compressor – Just like it’s JavaScript counterpart, CSS Compressor optimizes your CSS files to improve website performance and reduce page load time. Code bloat is ugly, even if your user can’t see it. Clean it up with this handy tool.

Visual Event – Need to debug a website or app and are having a hard time tracking back the JS function tied to the event and page element? You’re not alone, which is why Visual Event exists. Visual event makes it easy to debug by displaying the event and corresponding subscribed JS function. Now you can hunt down and squash JS bugs in a fraction of the time. You’re welcome!

Post-Launch

Shipping a product doesn’t mean our work is done. Iteration is key to improving performance and learning from real user feedback and data. Here’s how we collect that data.

Google Analytics – The gold standard of free data. With properly configured goals, user segments and ecommerce tracking, Google Analytics will give you every Web metric you need to see how your site is performing.

KISS Metrics – Want to see individual-level performance? Google Analytics can’t do that. Want cohort analysis? Google Analytics misses again. But KISS Metrics gives you both, plus detailed funnel analysis that help you identify weak spots in your conversion funnels that you can prioritize in your product iterations.

KISS Insights – Hard data is great, but it can’t tell you what the user was looking for or if they enjoy using your website or app. KISS Insights lets you deploy a simple, single-question survey widget to your website. It’s a great way to solicit qualitative feedback that can uncover insights about your user experience that can’t be gleaned from analytic packages.

Optimizely – On the Web there’s no excuse not to always be testing. Optimizely lets you test page elements quickly and easily. A/B tests or multi-variate, Optimizely’s visual editor and test setup makes it easy to run new experiments and collect data for continuous conversion improvement. Visual Website Optimizer or Google Website Optimizer are also good options for on-site A/B testing.

CrazyEgg – Get detailed click maps and scroll maps that help you understand where your user attention is going and where it wains. It’s a great way to visualize what page elements are being seen and capturing attention. You may find that a design element is getting all the user attention, while your call to action is missed by the majority of users who give up scrolling before they get there.

Survey Monkey – Surveys are a great way to get detailed feedback from your users. From their overall satisfaction, net promoter score, demographic insight and feedback on features and functionality, you can’t beat a detailed survey. Survey Monkey makes it easy to create surveys with different questions types, branching based on previous responses and deployment via web, email or social channels.

That’s our list. Have a favorite that we didn’t cover? We’d love to hear about it in the comments. We hope this list of tools and apps introduced you to a resource or two that will make your web development efforts easier and more efficient. We’re constantly evaluating new technologies and tools to help us do our job better. We’ll do our best to report back in a year’s time with our latest list of development technologies. Until then, be sure to share with us any new gems you find that help you do more quality work.

Some things we’re interested in hearing about:

• What kind of articles have been most helpful for your own betterment?
• Is there any feature you’d like to see on the blog (i.e., access to popular posts, prominent archive pages, more share features)
• What are prominent things that you enjoy about our blog?
• Are there any parts of our blog that you feel can use improvement?

Furthermore, if you have a few moments, we’d love for you to take this survey that’ll help us to better understand what will enhance your experience on our blog. And don’t forget, we also encourage you to make any comments that you have below!

Thanks for reading and supporting our blog. We look forward to hearing from you!

1. Icon had to clearly indicate what kind of functionality it served as a deck.
2. Icon needed to convey an immediate connection and understanding on what it did upon the initial seconds of seeing it.
3. 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.
4. A sense of tangibility and realness to each icon

ImageDeck

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.

SocialDeck

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.

PostDeck

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.

VideoDeck

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.

FeedDeck

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!

We’ve redesigned and rebuilt SlideDeck from the ground up to evolve the huge potential we saw in content sliders as an interactive web element. Instead of painstakingly creating and formatting your content one slide at a time, SlideDeck 2 allows you to create stunning content sliders for your WordPress website in minutes, by adding a beautiful layer of design over your existing content from around the web.

SlideDeck 2 intelligently formats your content to display it in its best light, whether you’re showing blog posts, shots from your Flickr account, a YouTube video, and almost anything in-between. If you’re the hands-on type, deep customization options give you even greater control over how your content appears to your visitors.

Check out SlideDeck below to see the major new features!

[SlideDeck2 id=9928 iframe=1]

Decks - SlideDeck 2 handles images, posts, video, social and RSS content

Dynamic Content Sources - Includes support for over a dozen different content sources around the web, including Instagram, Flickr, YouTube and Twitter – with more on the way

Design Lenses - Comes with 7 beautiful and highly configurable slider styles that offer over 29 million possible combinations

Awesome WordPress admin interface - an intuitive and gorgeous admin area that makes creating and managing your SlideDecks a breeze.

Covers - Encase your sliders within beautifully-styled title and ending slides, just like an interactive book

You can get a full rundown of the features, or check out our live examples. Got questions? Visit the FAQs. If you’re one of the lucky folks who pre-ordered SlideDeck 2, you can immediately access your download by logging into your dt account.

In the coming weeks, we’ll be going behind the scenes to tell you the story of SlideDeck 2’s creation over on our digital-telepathy blog, so stay tuned!

Have you picked up your copy of SlideDeck 2 yet? Created something fantastic with it? Tell us in the comments!

Communication is key to a lasting relationship… with your clients. And to exercise good communication, you need to set expectations not only early on, but also during a project, in order to maximize opportunities for success. There’s a popular saying goes, “if we can’t define it, we can’t measure it, and if we can’t measure it, we can’t manage it.” By setting expectations, you A) minimize chance of error via miscommunication, B) assign responsibility and accountability, and most importantly, C) define accurate project scope for both you and your client. So take some time and look over these important steps that will help you establish expectations with your clients.

Setting Expectations at First Contact

Establishing Roles: Discuss your capabilities as well as your limitations.
First impressions are always important, and they certainly apply when setting expectations about what you can can do for a client. When a client calls or emails you, it’s important to be straightforward about what services you do and do not provide. If you can provide excellent front-end development but you don’t have a familiarity in e-commerce, don’t be afraid to state that. Your clients shouldn’t expect you to be savvy at everything and you shouldn’t pretend that you are either. It occurs frequently where a party acts upon the assumption that the other party member can or cannot do something; as a result, scopes unexpectedly change and trust is broken. By the way, this rule of setting capabilities and limitations applies both ways. Don’t assume that your client will provide all necessary content and assets on X day. Be realistic and discuss what’s possible and what’s not — and identify potential weak points that can be resolved through early and smart planning. Otherwise, you’ll be left with the consequences of delayed response times, disappointing deliverables, and missed expectations.

Establishing Duties and Participation: Identify the point of contact and the frequency that you will be communicating.
It may seem like an unnecessary question to ask someone in this age of technology and high-speed connection, but you’d be surprised how difficult it can be to reach the right person at a time when you need them the most. It’s important to identify the point person of contact that you should go to for general communications, questions, and concerns for your project. If there are other special needs and circumstances for communicating, such as talking to a head developer or a marketing campaign strategist, be sure to get introductions down early in the project as well.  If you’re one of four members on a team, make sure you designate the point person of contact on your side as well so that all channels of communications remain efficient and filtered (to prevent superfluous and unnecessary disruption to others).

In addition to determining the point people of contact, it’s critical that you determine frequency of contact as well as expected response time with your client. If your workflow involves a very iterative process that requires a lot of protoyping and progress checks, make it known that you will be contacting your client frequently and that you will be expecting a more participatory role from them early on in the project. If you’re prone to sending preliminary designs first thing in the morning, inquire if you can expect a feedback response by the afternoon; that way you can plan your schedule accordingly on when would be the most efficient time for you to do revisions.

Creating Project Requirements: Reinforce accountability and transparency by creating a timeline filled with milestones and important due dates.
Aside from the primary purpose of a project timeline, which is to outline a project’s scope at a more granular level, creating a timeline for a project accomplishes two significant things: 1) it sets responsibilities and encourages accountability on both ends of the relationship, and 2) it gives a sense of transparency and trust. Timelines and milestones remind both parties that a collaborative effort must continuously occur throughout a project in order to ensure progress. With the second point, having the details of a project laid out in detail fosters client trust by providing transparency through the relationship.

Reinforcing Expectations During a Project

Preparation and Information: Keep organized, planned, and transparent
Remember, you’re the one who’s done dozens of these kind of projects, not your client. As such, the responsibility of keeping a project well-planned and organized falls on you. It’s up to your expertise and familiarity with your work process to lead your client and keep the project moving at its most efficient pace. Keep a spreadsheet, centralized documentation, and have a  go-to person (project manager or scheduler) to get a birds eye view on the project as a whole. Evaluate how well things are going as a whole, use foresight to determine what’s to come, and make the necessary plans to continue keeping everything going smoothly.

Iteration and Confirmation: Repeat your understanding of things to prevent misinterpretation and miscommunication.
It’s pretty easy to hear and interpret what someone has to say, only to later find out that what you thought you heard wasn’t what they meant at all. Whether it’s due to ambiguous communication on their part or a gross misunderstanding of your own, misinterpretation can easily happen if you’re not careful. Prevent these mistakes from becoming problems by reiterating, in your own words, the key points of the conversation. This is a great practice, not only in person, but on the phone and over Skype as well. It’s also recommended that all verbal communications be followed up with a written synopsis to ensure clarity and accountability.

And be sure to practice iteration and confirmation when your client is trying to explain something to you, like a description of a particular visual aesthetic they had in mind, or when they’re simply expressing their opinion on something. You’ll quickly learn that not everything you hear is what you think it is.

Next Steps: Always keep the project in motion.
Remember that you’re the expert.  Therefore, you should always be proactive in setting expectations on whatever the next courses of action should be — whether they depend on your clients’ actions or your own. Setting next steps reassures your client that A) you’ve got a good handle on where the project is at, B) their wishes and expectations are being met, and C) everything is still progressing at an optimal pace. On an additional note, next steps also keep you responsible for keeping the project on course while keeping your clients accountable for any dependencies that they need to be responsible for.

Resources That Can Help Foster Communication

So now that you know how to build up good expectations for you and your client, here are a few awesome tools that can help you achieve efficient communication for your next projects.

• Basecamp: A good web app that keeps conversations, files, and schedules in one central location.
• Notable: A useful feedback tool that allows individuals to make annotations on an image (such as a screen shot or design comp).
• Phone: The classic go-to for having conversations and presentations. Although online exchanges are important, don’t be afraid to call up your client when you need to for the quickest response!
• Google Voice: A free alternative to phones — Google voice has a great interface that allows you to make calls and take transcribed voice messages while staying on your Gmail interface.
• Skype: Useful for calls, conferences, screen shares, and instant messaging, Skype is a popular and familiar app that many of your clients will already be familiar with using.
• Join.me: A easy-to-use and free online screen sharing and conference calling application that has remote control functionality built into it as well.
• Google Video and Hangouts: Another useful alternative for having video chats and conference calls with multiple users.
• Google Spreadsheets: A great method for creating schedules and task lists that can then be shared and collaborated on via the web.

Have any other suggestions or advice on promoting communication with your client? Make a note of it in the comments — we’d love to hear about it!