Author Archives: admin

About admin

Designer by day, designer by night.
  1. Animating a Music Player UI with Keynote

    Leave a Comment

    Here’s an interesting animation that I came across on Dribbble.

    It’s by Jakub Antalik who, judging by his work, is a dab hand at UI design.

    This is a great example of how stutter-stepped animations that build-in one element at a time can really draw a user’s eye.

    The wave like effect is created by adjusting the animation start times so that each element moves onto the screen a fraction of a second after the previous one.

    In this article I’m going to explain how to create something similar using Keynote. Which incidentally I think is a great tool for prototyping animation. Let’s get started.

    First we need a UI design. Here’s the song listing screen which we’ll be animating.

    I created this using Photoshop. You can download the PSD if you’d like a closer look and see exactly how I put it together.

    Now, if we refer back to Jakub’s animation and analyse closely what’s going on there are 8 UI elements that are animated separately.

    1. The back arrow and label
    2. The title
    3. The “Add a Song” button
    4. Each of the 5 song items

    Each of these elements is stutter-stepped onto the screen by varying it’s animation start time. And this is exactly what we’ll be doing inside of Keynote.

    Fire up Keynote and set the slide size to 640 x 1136. Next add each of the exported image assets to the slide. Take care to position each element so that it matches the design. You can use Keynote’s position attributes to punch in coordinates so everything is aligned perfectly.

    Next we’re going to animate the UI. For this job we’ll use a “Move In” animation effect as our intention is to move each UI element onto the screen. In Keynote select “The back arrow and label” graphic and add a “Move In”. Set it’s duration to .4s, direction to “Right to Left” and set it to bounce.

    Next, copy this animation effect and apply it to all the remaining UI elements, then open the build order palette. It’s important to make sure the order of elements in this palette matches the screen order from top to bottom. Now, starting at the second item in the palette set each to “Start with Build 1” and add a delay of .2s. The delay is the important part. This creates the wave effect we are trying to replicate. If you preview the animation at this point each UI element should move onto the screen a split-second after the previous one. Here’s a video of the final animation.

    Hover + hold to play and loop the video

    Pretty cool right? And it’s easy to create. If we compare this to the original it’s obviously not as slick. But it’s 80% there, and that’s enough to communicate a UI animation idea clearly to a developer or even a client.

  2. Break Conference

    Leave a Comment

    break-conf

    The first Break Conference is over. All done until next year (fingers crossed). Was it good? yes it was. Very good in fact. Was it eclectic? again, yes. But this, I felt, was a good thing. Every day I’m neck deep designing and building for the web, so it was a refreshing break to spend a day listening to insights from speakers on product and print design. If you were there, you know what I mean. If you weren’t I’ve added my notes below. I hope they make sense.

    Sarah Richards sarahjrichards.com

    • Simpler, clearer and faster. These are the guiding design principles for Gov.uk.
    • Start with needs. User needs not government needs.
    • Gov.uk design principles.
    • Good rule of thumb: Use the 80–20 rule when content culling.
    • When analysing content think of the user. What content are they most likely looking for?
    • Example: Gov.uk restructured their bank holiday listing page to highlight the next holiday. This was the information the user really needed. They’re not looking for every holiday date, only the next.
    • Iterative, responsive change based on real user needs is at the heart of everything Gov.uk do.
    • The user. Always remember you’re designing for the user and their needs.
    • Have you identified your user? Specifically, exactly, precisely. Who is he or she?

    Nicolas Roope pokelondon.com

    • Make better things. Make things better.
    • Think about what the reality is for the user who you are designing for? Reference this when considering a design solution.
    • Extract what’s important to the user from the problem.
    • Design should be used as a tool to enable the user to complete tasks with ease.
    • Example: Mulberry checkout experience. The majority of project budget was spent improving the checkout experience.
    • Mulberry understand their brand is experienced through using their website. The customer experience matters. Make sure the experience is great for the customer.
    • Regards product design Steve Jobs understood it’s the why not the what?
    • Why should the product exist? To satisfy a user need.
    • Steve Jobs, Stanley Kubrick, James Dyson, Ingvar Kamprad (IKEA), all understood how to make a great product. Although through their methods they’re often misunderstood as dictator types.
    • Branding is a users experience with your product.
    • Nike Fuel is an example of a product that was nicely designed and smartly marketed but ultimately failed. Why? The product had no real user need.
    • The advantage of the start-up company: one vision, one goal. An idea that the collective believes in.
    • IKEA effect If you build it then you will like it more.
    • Thought: The bulb, an object associated with Ideas but the reality is it’s form is very much lacking in originality and innovation.

    Hamish Muir hamishmuir.com

    • Interested in form and language as applied to graphic design.
    • Important to view your work in context. For Hamish this meant observing how effective his posters were when viewed on walls around his city.
    • Crowell’s brief: use only Futura, create a face for the museum. Led to working closely with Futura for 5 years.
    • Nobody talks about how things are made.
    • Hamish felt in relative terms the A1 format is quite small and restrictive. Thought about how this medium could be extended. His solution was to use depth. Imply a 3rd dimension.
    • Form is always a result of conditions and technology. Example: the first pixel fonts.
    • Hamish often finds interesting visual solutions by restricting his work by using underlying numeric systems.
    • Example: all type sizes relate to each other. The proportions of each relate, for example 1:2, 1:3. This forms an under lying design system.
    • Process is important, we don’t get to see it very often.

    Dan Rubin danrubin.is

    • If thinking is an intellectual response to a problem, then the absence of a problem leads to the absence of thinking.
    • If you believe your product is already great, then you’re not going to give much thought to how you can make it better.
    • Focus on the people you are making things for. What do they really need?
    • Why did Color app fail? Their promise was not related to the reality of using the app
    • Transparency is important.
    • Everlane is a good example of a company practicing honest communication. They are very open about their production costs. Here’s all the costs and here’s what we charge you.
    • Why is it so hard to be honest?
    • You need to make a promise you can actually fulfill…if your promise is too great you erode trust.
    • Disney are the masters at experience design.

    Jane ni Dhulchaointigh Sugru

    • The magic is in the process.
    • It’s Important to share your ups and downs.
    • Creatively respond to people’s needs. Design is about solving people’s problems.
    • You don’t need to be an expert. Learn as you go. Jane had a good product idea but had to figure out how to make it real. She needed to learn about business and science.
    • Nobody else will care as much as you about your idea.
    • Don’t plan to be huge straight away. Start small and make it good.
    • Social proof. You need real world examples of your work. You can’t just say you’re great, you need to prove it.
    • How do your customers feel about you? This is branding.
    • Sugru epitomise start-up culture. As a company they really believe in what they are doing.
    • New branding evolved as product has evolved. Iterate. Design is never finished.

    Alex Klein kano.me

    • The best way to learn is through play and experimentation.
    • You don’t have to be an expert. Learn as you go.

    Adrian Shaughnessy uniteditions.com

    • Regarding client driven work it’s hard to have full control and create really great work. This led Adrian to reflect on what other things he could do with his skills. Which led to writing. Which led to Unit Editions.
    • All design begins with research.
    • The nature of graphic design is changing hugely.
    • Social media is hugely important to Unit Editions. The ability to communicate directly with a market is a huge advantage.
    • FHK Henrion first graphic designer to really understand publicity and how to use it to his advantage.

    Peter Smart petersmart.co.uk

    • Driven by innovation through user-centered design.
    • Worth remembering that we’re in the first minutes of the first day of the internet revolution.
    • The future of the web is tangible. Haptics will be used to improve communication.
    • The future of the web is connected devices which can communicate with each other.
    • The future of the web is invisible.
  3. Animating with Keynote

    Leave a Comment

    I’ve often felt envious of designers who could bring life to their interface designs using animation. Examples are all over sites like Dribbble. I wanted to create something similar, but how? The problem I initially faced was the steep learning curve associated with After Effects and Framer. I needed a simple solution. A tool I could pick up quickly. After some research and experimentation I discovered Keynote. Yes, that Keynote. Apple’s presentation tool.

    Keynote’s not known as an animation tool but trust me with just default effects and some simple techniques it’s possible to create some pretty complex animations. Not convinced? watch this:

    I watched this video and was impressed. I watched it again and again and then proceeded to pick apart the source file and recreate it. After a few hours I had the basics down and felt comfortable creating animation effects. And now, in this post, I want to share that knowledge. Admittedly the example I’m going to step through is a lot simpler, but you’ll get the idea and hopefully understand how easy it is to animate with Keynote.

    So then, enough explaining, here’s what we’re going to recreate:

    Hover + hold to play and loop the video
    • To get started launch Keynote and create a blank slideshow.
    • Select the document tab and set the slide size to 640px by 1136px (hi-res iPhone in portrait mode).
    • Make sure to switch the presentation type to self-playing and set delay to 0 for both transitions and builds.
    • Next, open the Build Order palette. You’ll be spending a lot of time working with this.

    If you’ve followed those steps you now have your Keynote document primed and ready for building the animation. Before we get started we need to create our image assets. I prefer Sketch for this as it’s export tools are very efficient. But use whatever tool you feel comfortable with.

    Make sure you create an image asset for each element you need to animate. Below you can see the list of Sketch artboards I created ( download available here ). One artboard for each scene. I’ve also listed out the individual graphic assets I exported from Sketch. Importing these to Keynote is very easy. Simply drag from the Finder to Keynote. Done.

    Lumosity artboards

    Lumosity assets

    Now we’re ready to animate. Lets consider just the first part of the Lumosity example (a segmented circle animates into view).

    Hover + hold to play and loop the video

    Lets recreate this.

    To set up the initial state take the segmented circle graphic and set it’s size to 2600pt and centre it. The centre of the circle should now be positioned outside the slide edges. Copy this slide and resize the segmented circle to 305pt. Centre it again. Toggle between the two slides. You now have your animation start and end states.

    Select the first slide and activate the animate tab and choose the Magic Move effect, set duration to 0.5s and acceleration to Ease Out. Preview this. Magic!

    Magic Move really is magic. It does all the heavy lifting. It works like this: once you have the same element on two slides with different properties or attributes Magic Move will work out their differences and animate them. Position, scale, opacity and colour can all be animated in this way.

    Using just Magic Move it’s possible to recreate the first 3s of our example video. You can download the source file to see exactly how I did it.

    Now that we have our intro animation sorted lets look at how the the second part of the animation flows.

    Hover + hold to play and loop the video

    It breaks down like this:

    1. The scoreboard background fades in
    2. A ribbon appears by scrolling onto the screen
    3. A badge appears by popping onto the screen

    Before we recreate this effect lets explain the details of Keynote’s Animate tab. The Animate tab is sub divided in to 3 more tabs. Build In, Action and Build Out. Each element you place on a slide can have one or all of these applied.

    A Build In is how an element appears on a slide. An Action is what happens to an element while it’s there. And a Build Out is how the element exits a slide. Each animation type has an extensive list of effects which can be tweaked and previewed.

    OK, back to our steps. To fade in the background I first added it to the slide and positioned it correctly then set it’s opacity to 0. Next I selected an Opacity animation from the Action tab and set Duration to .7s, Opacity to 100% and Acceleration to Ease Out. If you preview this effect the background graphic should gradually fade in to view.

    Onwards. Copy this slide. Remove the actions and set the background graphic to 100% opacity. This is our initial state for out next animation. Add the ribbon graphic and position it correctly. Then using a Keynote Shape place a white rectangle over the ribbon so it’s completely hidden. Set the width and height of the rectangle to equal the ribbon. Now we are ready to add animation.

    Select the rectangle and add a Move animation from the Action tab. Position the end state so as the left edge of the rectangle is butted against the right edge of the ribbon. Now set the Duration to .7s and Acceleration to Ease Out. Preview this effect and the ribbon should seem to appear on to the screen.

    Our last animation to add is the popping badge. Drop the badge on to the slide and position it. Select a Build In animation and choose the Pop effect. Set the Duration to .75s. The timing of this animation is important. We want the Badge to pop on to the screen at the same time the ribbon appears. To do this active the Build Order palette. Select the Pop build and set it to start with Build 1. Add a slight delay of .2s. And that’s it.

    Here’s the full movie.

    Hover + hold to play and loop the video

    You can download the Keynote file if you want to see exactly how it was built.

    Phew, that’s by far the longest article I’ve published but I hope it’s highlighted how Keynote can be used to prototype UI animation. I’ll wrap-up with this caveat: Keynote is not an animation tool so expect to find some shortcomings, but generally it’s good enough to test out an idea or demo UI animation to a developer. That’s how I’m using Keynote and with great success.

  4. How to get from a blank canvas to UI animation

    Leave a Comment

    How on earth do you get animations out of your head and onto a screen? What properties or values need to change to execute your idea? Try describing it and you’ll find it’s tough. Waving your hands around won’t help much either. So if you want to communicate your intentions clearly you’re going to have to understand how animations breakdown and what exactly is happening at each step.

    The best place to start is by looking at examples. And the best place for examples I’ve found is CAPPTIVATE.co. If you look closely at the various animations listed on that site and examine them carefully you’ll start to see patterns emerge. The same effects are being executed over and over again. And the majority of those effects are being created by manipulating just 3 properties: position, opacity and scale. Let’s define these properties.

    1. Position is the X and Y coordinates of an item on screen. Every element has a position and that can be changed over time.
    2. Opacity is the alpha transparency of an element. It can range from from 0 which is invisible to 100% which is opaque.
    3. Scale is the size of an item relative to its actual size. A scale of .5 means the item is half it’s actual size.

    With just these 3 properties it’s possible to create some very effective UI animations. Lets take a look at a simple example: an iOS modal alert.

    Hover + hold to play and loop the video

    This is a simple animation. But it’s a good example of changing two different properties (scale and opacity) to produce one effect.

    If you look closely at what’s happening, it breaks down like this: the modal starts at a scale larger than it’s original size and is animated down. At the same time the modal’s opacity is animated from 0 to 100%. And that’s it. Simple but effective. And much better than abruptly shoving a modal window into the centre of the screen.

    Here’s another example:

    Hover + hold to play and loop the video

    In this example a panel slides in from the bottom of the screen and is positioned on top of the product detail panel. This paper overlay effect is produced by manipulating the panel’s position, specifically it’s y coordinate which is increased. The effect is enhanced by reducing the scale of the background and animating it’s opacity down to 80%.

    This is a neat animation effect which gently guides the user into the new UI screen with ease. Again it’s a simple animation but an effective one.

    Lets take it up a notch and look at an example that has a lot more going on.

    Hover + hold to play and loop the video

    This animation has more scenes, more motion and more elements whizzing around and changing position but if you look closely and examine what’s actually happening at each step it’s still just 3 properties being manipulated, our good friends opacity, scale and position.

    If you’ve followed along diligently to this point you’ll no doubt have noticed a strange thing: the rate at which animation properties are changing is not consistent. Certain steps in the animation are executing at a faster rate than others. This is due to timing. And timing of animation is exactly what I’m going to explain in my next post for this series.

  5. UI Motion Design: Examples from the field

    Leave a Comment

    In this post I want to document some thoughts on the purpose of a number of UI motion design examples I’ve come across. I’ve pulled most of the examples below from the rather excellent capptivate.co. If you’re interested in UI motion design this site is a gold mine and well worth a bookmark.

    iOS 7 Calendar app animations, from BeyondKinetic.

    First up, Calendar app for iOS. It’s a great example of a transition which helps to guide a user into a new UI screen. By implementing a zooming animation to switch between UI states a user really gets the sense that they are drilling down to a deeper level.

    Hover + hold to play and loop the video

    This step-by-step build-in animation is an excellent example of how animation can be used to control a users attention. By animating each element separately the user is forced to visually focus on one element at a time. It’s also more visually interesting than animating in each screen one after the other. Word of warning though, by their nature step-by-step animations take longer which is annoying if repeated a number of times in the same app.

    Hover + hold to play and loop the video

    Yelp uses an animated transition to orient the user and help them understand the app’s navigation structure. When the user taps on the star icon, and the action panel is brought forward, the list interface is scaled back. Note that the list interface is still visible, by keeping the previous screen in view the user won’t feel disoriented and will have a better understanding of how to return to the initial state.

    Hover + hold to play and loop the video

    Facebook’s Paper has some great examples of animations that are used to help orient a user. In the example above when the globe icon is tapped a Notification panel slides out from under the icon. This transition clearly indicates that this content is always located there, tucked away behind the globe only a tap away.

    Hover + hold to play and loop the video

    Here animation is used to reinforce a mental model of the app’s navigational flow. Notice how when you slide content up from the bottom of the screen, it is positioned on top of the current view. This transition gives the user the impression that they can get back to the previous screen with a simple swipe down. Imagine for a second If the entire screen had faded out instead and then the new UI state was presented. In this situation the user would have a hard time knowing where they are contextually within the app.

    Hover + hold to play and loop the video

    This example illustrates how animation can be used to visually explain an apps layer hierarchy. Initially a menu is presented, then when ‘Processing’ is tapped a new layer is revealed. This transition gives the impression that the user has drilled down to a deeper level.

    So, to wrap up, it’s worth highlighting that like a lot of things subtlety is key. As useful as animation can be for an app’s UX it’s really important to not over do it. Be very clear on why you are adding animation and what the benefit is to the end user. And the end user is really what all this is about.