Webmasters Gallery

In the past year, adoption of Sketch at Google, where I work at, has taken off and is now a widely preferred tool. The more tools in our belts, the better, so here’s my take on why Sketch and the new material design¹ system are a great match.

Tools are an extension of our hands, and as such, they should be versatile, quick and intuitive. A lot has changed between the print era of offset presses and the digital era of cross-platform screens. Developers have attempted to adapt our tools, but Sketch is perhaps the most successful app in this regard — its creators have removed the bloat, started afresh and presented a smaller, fit-for-purpose feature set. What may seem on the surface to be a simple drawing tool in fact nails the core workflows of digital design.

²

The latest version of Sketch (3.2) ships with something special for those interested in Google’s latest visual design language: the material design sticker sheet. In this tutorial, we’ll design a test app with the help of Sketch and the material design sticker sheet.

Let’s Create a Notes App!

In this article, we’re going to make a very simple app — a notes app. Luckily for us, all of the components we need are already available in the latest Sketch app. These are the screens we’ll create:

⁴

You can also download the Sketch file⁶ (ZIP) that was used to make this notes app prototype; it could help you along in the tutorial.

The Template

In our template — File ? New from Template ? Material Design — you’ll see a wide set of components, icons and layouts. The sheet itself was designed by the hardworking material design team at Google and has been ported with the love and care of Amar Sagoo and myself. The groups and objects are named, styled and organized in a truly Sketch-friendly way.

It All Starts With an Artboard

With your new document open — File ? New (or Command + N) — press the A key (which is a shortcut for the Artboard tool). You can draw an artboard just as you would draw a shape, a slice or any other object. That’s because Sketch has a simple set of objects that all work the same way (more on that later). When the Artboard tool is selected, you can see on the right side a list of artboard sizes, including — you guessed it — all of the material design sizes. Click on the “Mobile Portrait” size and a white box should appear.

⁷

Sketch’s Killer Feature #1: Scale-Independent Exports

Note: Material design is defined using density-independent pixels⁹. As the Android Developers page explains¹⁰, a density-independent pixel (DP) unit corresponds to the physical size of a pixel at 160 DPI. Though we’ll be using pixel units¹¹ (px) in this Sketch tutorial, these are really density-independent pixels because you can scale them up or down upon exporting.

In today’s world, you can’t depend on the same pixel density, so DP units allow us to talk the same language when dealing with different device layouts. Sometimes you may be compelled to work at double or triple pixel size because you want to match the pixel size of your surface — don’t go down that route.

Stay at 1x pixels and then just export at the upscaled sizes. Sketch makes that as easy as a simple drag and drop. You’ll see a panel in the bottom left showing you the sizes slotted for exports, and you can even add your own suffix conventions for file names. When you do an “Export All” operation (Command + Shift + E), you’ll see that artboard, and Sketch will export all versions of the bitmap.

¹²

Now, head to the sticker sheet template and select the “mobile global elements” artboard. Only the important stuff there is selectable, so just click on that artboard and copy and paste into your document. You now have the basic layout of a mobile material design app. As you can see in the Layers panel, you have a group named “screen”. You’ll only need the contents of that group, so just go ahead and ungroup (Command + Shift + G) the “screen” group. You’ll now see four layers:

¹⁴

• navbar
  This is a symbol (symbols in the Layers panel are marked with purple color), which means it will be the same everywhere, and if you change the contents of the symbol, it will change everywhere in the file.
• status bar
  This is the top bar on the screen with Wi-Fi, time and status information.
• app bar
  This is your main navigation header, which displays the name of the current page and a button to go up or open the drawer.
• screen bg
  This is a background color, but it’s also a mask. You can delete this because your artboard will act as the mask for your screen.

Masks in Sketch Work… Upward!

In Sketch, masks work upward, meaning that layers above a masking object are cropped by that object. In Adobe Illustrator, however, you would place a shape on top of other layers to create a clipping mask; this threw me off at first. For more on masks, check Bohemian Coding’s documentation¹⁶.

If you move these layers around within an artboard, you’ll see that they are masked by that artboard. That’s the only case when an object that is higher in the Layers panel masks the objects below. Artboards always mask their contents and also house the coordinate space; so, an x value of 0 and a y value of 0 would mean the top-left corner.

¹⁷

Let’s go back to the sticker sheet. Let’s grab the half-width card components¹⁹ and paste them in our composition. The suggested margins for these cards is 8 pixels, so go ahead and space them out.

Sketch’s Killer Feature #2: Hover Guides

One of Sketch’s most useful features has to do with spacing: Select an object, hold down Alt, and then mouse around to see distances from your selection to other objects. And holding down Command + Alt and mousing around will measure objects that are deep within the hierarchy relative to other objects contained in groups.

²⁰

Finally, let’s get the floating action button from our buttons components and put that in. It should be 16 pixels from the navbar and 16 pixels from the right side.

Great! So, we’ve got the composition for our first Material app. It’s a scrolling card view.

The Navigation Drawer

²²

To get around the various areas of our app, we’ll make use of the navigation drawer component. Let’s duplicate our original artboard: Click on the artboard in the Layers panel list or on the title of the artboard on the page, then press Command + D. This will duplicate the artboard and move the new artboard 100 pixels to the right. You can continue your flow simply by duplicating and modifying, which is what we’ll do now.

Grab the navigation drawer from the mobile artboard — the layer is called “side nav.” Paste it onto your new artboard. You can change the categories in the navigation, but the top area is reserved for switching user accounts.

Material Forms

²⁴

What happens when you tap that big plus button? Well, you should probably be able to make a note. Let’s grab some of the form’s components in the sticker sheet and make a new artboard for them. Here, we can make use of the keyboard, which is a symbol that can be placed whenever we need it. We’ll use the dark one to fit our dark app.

Reusing Artboards

Of course, after you’ve created a note, you should see it added to the card view. Let’s duplicate the first screen and add in our new note. Just click on the name of the artboard right above the artboard itself. Now that the artboard is selected, press Command + D. That will duplicate the artboard and move it 100 pixels to the right, perfect for quickly mocking up a flow.

²⁶

Sketch’s Killer Feature #3: The Color Picker

Sketch provides a powerful color picker. Just press Control + C to select a color anywhere on the screen. Combining this with Command + click to click through to any element, you can easily recolor any object in no time.

²⁸

Covering The Tabs

Tabs are a great way to show different sets of content. In our app, we will have notes of importance and notes shared with others. Let’s make some tabs for “saved” and “shared” notes, with our current view being “all” notes. Jump back to the sticker sheet and click on the “tabs” component. Copy and paste that and position it next to the app bar. If you’ve grabbed the whole “app bar” tab from the sticker sheet, you’ll notice that it’s the wrong color. So, change the background color: Click through (Command + click) to the background of the tabs, and change the color to our main color. Move the tabs to the top, and you’re set.

³⁰

When copying components from the sticker sheet, you can take any level of elements. This means you can take a whole screen, just the components within or even just the icons. The tabs, as well as other components, have been prepared with a transparent background. Move within the “app bar” group and you’ll be able to copy the “tabs” group and paste onto any existing background. The advantage of a transparent background is that you will get the proper spacing around the component, but you can quickly place it on top of an existing background or toolbar.

Making A List

You’ll use lists a lot. They’re a fundamental component to any app, and material design gives us a number of options. We’ll have our “shared” tab contain a list view.

Copy the “three-line item” list from the sticker sheet and paste it in a new artboard. Ungroup the list and then just Alt + drag to duplicate an item, a set of items or a group. Do this until you have a full page of rows.

³²

Secondary Actions Are Shortcuts

You’ll notice a box on the right side of the list. This box is a secondary action. Tapping anywhere to the right of this action would open up that list item; but for quick actions (such as calling a contact or opening information about a document) you can use the secondary action. We’ll replace this placeholder box with a heart so that the user can quickly save notes.

In the sticker sheet you’ll find a small set of icons in the top left under “typography.” Grab the heart icon and paste it where the gray box is located. The icon should be in a group containing the heart icon and a transparent 24 × 24 box. This box helps with spacing, so make sure to grab the whole group.

³⁴

Sketch’s Killer Feature #4: Shared Symbols And Styles

Now, let’s make the row group into a symbol. This will allow us to edit its contents in many places at once. When you select a group, you’ll see a field in the toolbar that says “No symbol.” Click on this field and select “Create new symbol.” The name will default to the selected group’s name: “row.” Now you’ve got a symbol!

³⁶

Select each of the other row groups you’ve positioned on the artboard and, once again, click on the area that says “No symbol.” This time you’ll see your row symbol available for use; select it. Now that you’ve got a bunch of rows using the row symbol, when you change one, they will all change. Just like that, you have an interconnected set of elements.

Using our newfound power, let’s replace the heart with an overflow icon. The overflow icon is a set of three vertically stacked dots and indicates that more than one action is available. All you have to do is copy the “overflow icon” group (along with the padding) from the sticker sheet and paste it right beside the existing heart icon. Line it up with the heart icon, and then delete the heart icon. As you’re doing this, you should see the other rows automatically update. Yay for symbols!

With Sketch’s symbols, there is no editing mode. Symbols act just like groups and update immediately. This makes it easy to change symbols. Watch out, though: You may be editing a symbol in one place only to find that it has also changed in many other places across the canvas!

³⁸

Bottom Sheets

⁴⁰

In material design, bottom sheets are a great way for the user to take action without leaving the current context. These enter from the bottom of the screen and display a set of actions. In our app, the bottom sheet will be invoked when the user taps the forward icon in the top right.

Let’s grab the bottom sheet from the sticker sheet and paste it in a new artboard. Also, grab the scrim (semitransparent background) from the previous navigation drawer artboard and paste it behind the bottom sheet.

Dialogs When Needed

⁴²

As a last step, we’ll add in a dialog. This will be invoked when the user selects the delete action from the bottom sheet. In this case, we want to be really really sure that they want to delete this note. And finally, speaking of deleting, I encourage you to start fresh with your own designs. Sketch is such a quick program and material design is such an enabling guide that you can think big and different about how to delight users in your app. So, happy sketching!

Quick Start With Sketch Resources

Here’s a list of material design resources built for Sketch to get you up and running quickly:

• Material design sticker sheet⁴⁴
  This is the latest sticker sheet. It holds a good set of components and styles, and it is easy to copy and paste in your new compositions.
• Material design icon sheet⁴⁵
  This set of icons is ripped from the Material design repository on GitHub⁴⁸⁴⁶.
• Material design whiteframes⁴⁷
  This set of colors and icons is also ripped from the Material design repository on GitHub⁴⁸⁴⁶.

Conclusion: Keep The Principle In Mind With The Tool In Hand

Thanks for walking through material design in Sketch with me and making an awesome notes app. We have not only learned a new tool, but also started on our way to a new design system.

One final note of caution: Sometime we focus on existing components and miss an opportunity to address our users’ needs in a new way. You can always check your designs against material design’s principles⁴⁹:

• Material is the metaphor
  A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
• Bold, graphic, intentional
  The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus.
• Motion provides meaning
  Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

Remember, no matter how good it looks, the greater focus is not on the pixels, but on the user. If your sight is true, all else will follow.

(mb, al, ml)

Footnotes

1. 1 http://www.google.com/design/spec/material-design/introduction.html
2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-stickersheet-opt.png
3. 3 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-stickersheet-opt.png
4. 4 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-allscreens-opt.png
5. 5 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-allscreens-opt.png
6. 6 http://provide.smashingmagazine.com/sketch-material-design.sketch.zip
7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-artboards-opt.png
8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-artboards-opt.png
9. 9 http://developer.android.com/training/multiscreen/screendensities.html#TaskUseDP
10. 10 http://developer.android.com/training/multiscreen/screendensities.html
11. 11 http://en.wikipedia.org/wiki/Pixel
12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-sizes-opt.png
13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-sizes-opt.png
14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-globalelements-opt.png
15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-globalelements-opt.png
16. 16 http://bohemiancoding.com/sketch/learn/
17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-cards-opt.png
18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-cards-opt.png
19. 19 http://www.google.com/design/spec/components/cards.html
20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-FAB-opt.png
21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-FAB-opt.png
22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-navdrawer-opt.png
23. 23 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-navdrawer-opt.png
24. 24 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-forms-opt.png
25. 25 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-forms-opt.png
26. 26 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-noteadded-opt.png
27. 27 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-noteadded-opt.png
28. 28 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-colopicker-opt.png
29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-colopicker-opt.png
30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/05/12-tabs-opt.png
31. 31 http://www.smashingmagazine.com/wp-content/uploads/2015/05/12-tabs-opt.png
32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/05/13-rows-opt.png
33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/05/13-rows-opt.png
34. 34 http://www.smashingmagazine.com/wp-content/uploads/2015/05/14-rowsSymbol-opt.png
35. 35 http://www.smashingmagazine.com/wp-content/uploads/2015/05/14-rowsSymbol-opt.png
36. 36 http://www.smashingmagazine.com/wp-content/uploads/2015/05/15-switchsymbol-opt.png
37. 37 http://www.smashingmagazine.com/wp-content/uploads/2015/05/15-switchsymbol-opt.png
38. 38 http://www.smashingmagazine.com/wp-content/uploads/2015/05/16-rowsSymbol-opt.png
39. 39 http://www.smashingmagazine.com/wp-content/uploads/2015/05/16-rowsSymbol-opt.png
40. 40 http://www.smashingmagazine.com/wp-content/uploads/2015/05/17-bottomsheet-opt.png
41. 41 http://www.smashingmagazine.com/wp-content/uploads/2015/05/17-bottomsheet-opt.png
42. 42 http://www.smashingmagazine.com/wp-content/uploads/2015/05/18-dialog-opt.png
43. 43 http://www.smashingmagazine.com/wp-content/uploads/2015/05/18-dialog-opt.png
44. 44 https://github.com/BohemianCoding/SketchTemplates/blob/master/Material%20Design.sketch
45. 45 https://github.com/patrickkeenan/SketchTemplates/blob/master/Material%20Design%20Icons.sketch
46. 46 https://github.com/google/material-design-icons
47. 47 https://github.com/patrickkeenan/SketchTemplates/blob/master/Material%20Design%20Whiteframes.sketch
48. 48 https://github.com/google/material-design-icons
49. 49 http://www.google.com/design/spec/material-design/introduction.html#introduction-goals

The post Sketch With Material Design appeared first on Smashing Magazine.

Editor’s Note: This article contains many video examples that show functional animation. Therefore, it may take longer to load on slow connections.

A good UX designer can easily explain the logic behind each decision in a design concept. This includes the information architecture, the hierarchy of page content, the flow and the assumptions made.

Sooner or later, animation will be introduced to the wireframe concept, and then making design decisions or explaining them becomes harder. Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength. Animations deserve a far better ground in our design considerations. We should be justified in defining animations and explaining their purpose — just the same way that we explain all other elements in a design.

What Is Functional Animation?

Functional animation is subtle animation that we embed in a user interface design as part of our process.

Unlike animation made by Disney Studios or animation made for computer games, functional animation has a clear, logical purpose. Their purpose is to serve a design concept by supporting the solution we are trying to convey. Functional animation is yet another tool in our UX design arsenal.

In a perfect world, we should be able to validate functional animation against a well-defined set of logical purposes. If a certain animation in our design follows a logical purpose, then it is a valid functional animation and its existence in our design is probably justified. But if it fits no purpose, then it might be redundant and need to be reconsidered.

In the past year or so, while working on various projects, I’ve collected a family of nine logical purposes that today help me validate functional animation. I’ve realized that by examining a well-defined animation, I can easily fit it in one or more groups in this family.

It also works the other way around: When an animation doesn’t fit a functional purpose, it usually also feels awkward or annoying. Below are the family groups I have collected so far. I hope you find them useful in validating your own design animation.

Orientation

Direction illuminates structure. In this group, we find animation that plays a role in our navigation, casting light on the website’s information architecture. The logic behind this type of animation is to maintain the user’s sense of orientation and to help the user comprehend the change that has just happened in the page’s layout, what has triggered the change and how to initiate the change again later on if needed.

A classic example is a button that toggles hidden content. When you click it, a hidden panel appears. And when you close the panel, it shrinks back into the action button.

The first time, a user cannot really predict an interaction that is about to happen. The opening animation of the hidden panel growing in size helps the user stay oriented and not feel that they have left the page or that content has suddenly vanished. They remain in control of everything that is happening. The closing animation helps the user associate the shrinking panel with the action button — so, the next time they will remember how to open the panel again.

Logical purpose: Avoid a surprising transition, and orient the user.

Example Videos

Same Location, New Action

A well-known usability rule is to be consistent in both the design and content of a website. A consistent website is predictable and, therefore, learnable. This rule applies to action buttons, among other things.

In certain cases, we are forced to design an action button whose functionality changes under certain conditions. We usually see this in designs where overall space is limited. Thus, a user who has learned the functionality of an action button may need to learn new functionality.

“Save” and ”Edit” buttons are probably the most common example of switchable buttons. But this is an easy case because, while the actions are contradictory, they have the same context. In other situations, when the two actions have no immediately apparent relationship, we face a usability challenge. That’s where functional animation can help.

Logical purpose: Emphasize a functional change in an action button.

Example Videos

Zoom In

The third family has some similarities with the orientation group we saw earlier. In these animations, the user selects an item in a list to zoom into its detailed view (which overtakes the list view) and is able to go back to the full list view.

We commonly see this in image galleries, cards and item selectors. A user will select an item and will immediately see the detailed screen that is associated with that selection.

The challenge here is to make sure the user feels they are still in control and remain in the given context. Functional animation is usually a must in this situation.

In examining numerous functional animations in this family group, I’ve noticed a common pattern that, when implemented accurately, enhances the animation’s effectiveness:

1. The initial state is the original list of items.
2. Each item is designated with a unique visual cue, such as a dominant color, a symbol, a bold title or a thumbnail image.
3. When the user makes a selection, a new page is created and the selected visual cue is relocated to a prominent, dominant position. For example, the entire page might be colored with an item’s unique color; the item’s symbol would expand and be positioned in the page’s title; the item’s name would get bigger and appear in the page’s title.
4. A noticeable action button to dismiss appears in the new page, such as “Cancel,” “Close,” “Back” or “x.”

Logical purpose: Associate a thumbnail with its detailed view.

Example Videos

Visual Hint

Visual hints assist users to better understand how to interact with a product’s interface. It is especially needed in designs that contain an unconventional object or a unique navigation method.

This kind of functional animation is easily detected when we open a page and a quick one-time animation is suddenly triggered that demonstrates how certain functionality in the design operates.

Logical purpose: Hint to exhibit unconventional functionality or a hidden action.

Example videos

Highlight

This family group assists users in those unfortunate situations when there is a need to rise above a noisy layout.

Designers usually strive to avoid noisy layouts, which load the screen with various pieces of textual and visual content that compete with each other for the user’s attention.

One way to minimize noise in an interface is by removing clutter. However, sometimes this task is not so trivial. Consider a news website whose owners want to remove pieces of textual news or images from the home page.

Motion, by its nature, has the highest level of prominence in a user interface. Neither text paragraphs nor static images can compete with motion. We can take advantage of this with this functional animation group. Remember, though, that increasing interface noise by adding an object with a higher level of prominence is a slippery slope.

In the animation sample below, we see that the addition of an item to the shopping cart is not noticeable enough due to the crowded background. So, animation is needed.

Logical purpose: Grab the user’s attention, and rise above a noisy layout.

Example videos

Simulation

Sometimes during design analysis and user interviews, we find that users have a need that we can address only with a tailored simulation.

For these special cases, we would create a customized functional animation. In the example below, soccer analytics are presented in a way that figures, numbers, tables and graphs could never compete with. In the second example, the user can monitor temperatures on a map according to time and geography — a particular use case that could hardly be addressed any other way.

Logical purpose: Simulate topics that are otherwise hard to convey.

Example videos

Visual Feedback

Visual feedback is extremely important in user interface design. In real life, buttons, controls and objects respond to our interaction, and this is how people expect things to work.

But remember that functional animation in this family group needs to be very subtle and should be designed responsively. Button feedback is extensively used in every interface, so using functional animation where it is not really needed will cause more harm than good. On touch devices, functional animation can be most beneficial as a substitute for rollover effects.

Logical purpose: Acknowledge the user’s action.

Example videos

System Status

This group is all about control. For the user, control means knowing and understanding their current context in the system at any given time.

Functional animation provides real-time monitoring of system status, enabling the user to quickly understand when an action began, the time remaining and exactly when it has ended. Perhaps the very first functional animation that served this role in HTML websites is the spinner GIF, which is still being used in many interfaces to indicate an action in progress.

Effective functional animations in this family group usually follow this pattern:

1. Show clear feedback to indicate that the process has initiated.
2. Present ongoing feedback while the process is in progress.
3. Estimate the completion of the process (a step, by the way, where spinners fail).
4. Show clear feedback that the process has terminated.

A well-known animation in this group is “pull down to refresh,” which initiates a process of content updates on mobile devices. Examine the implementation of these animations in various applications, and you will soon notice that animations that do not fully comply with the four steps laid out above feel wrong. For example, uncertainty arising from the lack of clear feedback that a process has terminated could prompt the user to initiate the refresh action again.

Logical purpose: Impart a sense of control in a linear process.

Example videos

Marketing Tool

This group is all about Marketing — and it’s got some fun animations! Whereas the previous eight groups in our family of animations are quite logical, this one is full of emotions!

Suppose we need to indicate a product’s behavior, highlight a particular feature, promote a unique capability or even bundle a brand’s values and style into a product.

In any of these scenarios, an animation might serve the company’s marketing strategy well. The approach might not be clearly user-centered, but it definitely has a functional purpose.

Logical purpose: Support a company’s brand values or highlight a product’s strengths.

Example videos

Summary

When it comes to providing pleasure or delight in our websites and apps, animations contribute a lot. But always remember that they must be functional first.

Aarron Walter of MailChimp writes about the hierarchy of user needs in his book Designing for Emotion. It’s similar to Maslow’s hierarchy of needs, but rather than describing our personal needs, Aarron describes our needs as users. Walter’s hierarchy positions the functional need as the base of the pyramid, while the need for pleasure is up on top — and applicable only if the base has been fulfilled. In this article, I’ve dealt only with this functional base, without going into aspects of pleasure and delight, which deserve an article of their own.

So far, I’ve compiled a family of nine rules. These nine rules map well to every animation I’ve encountered so far. They help me to assess animations that I see in interfaces, and they are a strong set of guiding principles in deciding how to add animations to a wireframe design. I hope they serve you in your design process in the same way they serve me.

However, this research is in progress. So, the next time you come across a functional animation, go ahead and test it against one of these nine groups. If it doesn’t neatly fit any of them and the animation has a clear purpose, share it with us, maybe you have found the tenth family of rules!

(cc, ml, al)

Footnotes

1. 1 https://dribbble.com/shots/1964352-Tasking-App
2. 2 http://www.buildinamsterdam.com/
3. 3 https://dribbble.com/shots/1861517-Messages-Animation
4. 4 https://photojojo.com/store/
5. 5 https://dribbble.com/shots/1410455-Soccer-analytics
6. 6 http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input
7. 7 http://www.yikyakapp.com/
8. 8 https://dribbble.com/shots/1901531-Loading
9. 9 http://bellroy.com/slim-your-wallet

The post Functional Animation In UX Design appeared first on Smashing Magazine.

It’s nothing new. Companies benefit from the web. Still not all make use of it. There are whole industries underrepresented; even after 25 years of website development. The food service industry is such an underrepresented niche. Before you disagree, you’re right, there are loads of websites with food-related content out there. But look around you. How many potential website owners are there directly within your reach. You’d probably be surprised how many of these don’t run a proper website. So why not acquire these small businesses systematically? All you need is a fast and reliable way to create a web presence that suits their needs. As small businesses tend to have small cash, you will not be able to call the whole plethora of front-end wizardry. Instead, consider choosing a dedicated theme designed to handle all the needs of the gastronomy. Bon Appetit by StylemixThemes is one such theme, available at Themeforest for small money – the perfect foundation for food services and you… The Tasty Offers of the Bon Appetit Theme Bon Appetit is a dedicated, responsive theme for restaurants, cafés, bars and other food services. It is available over at Themeforest for a price of 48 USD. There […]