Author Archives: admin

About admin

Designer by day, designer by night.
  1. A Photo Retouch Process

    Leave a Comment

    I’ve been taking photos for maybe 3 years. iPhone only. For editing I’ve been using Instagram or occasionally Snapseed. Which means my workflow to date has been limited to mobile.

    “Limited” is the word to note. Having never used Photoshop for photo editing I wondered was I limiting myself somehow. Curious to find out I listed out the steps I typically take when editing a photo on my phone:

    1. Crop & straighten
    2. Sharpen
    3. Edit contrast
    4. Colour correct
    5. Highlight the focal point

    Then I went about repeating these steps with Photoshop. Here’s the tools and techniques I ended up using:

    Crop & straighten
    Easy one. Photoshop has a tool for this. The crop tool. It’s intuitive and easy to work with.

    A little research and I found a technique for this using the High Pass filter. I found it helpful to work non-destructively using a smart object. This meant I could easily update the filter settings throughout the editing process.

    Edit contrast
    For this I used a Levels Adjustment Layer. Then experimented with the sliders until it felt right. I’ve a tendency to apply too much contrast. So it’s helpful, as with all edits, to take a break by looking away for a second or two then evaluate the image again. If you’ve gone too far you’ll notice it.

    Colour correct:
    I found two methods of doing this and ended up using both:
    1. A Colour Balance Adjustment Layer
    2. A Selective Colour Adjustment Layer

    This step is really intuitive. I experiment with the tonal ranges and sliders until it looks good to my eye. Then stop. I’m sure there’s more to it. But I’m learning as I go.

    Highlight the focal point
    For this, I used a new layer filled with middle grey (#777777). And set it’s blending mode to Overlay. This darkens the image. Then using a large soft brush I burn (darken) or dodge (lighten) specific areas.

    So, that’s a summary of the techniques I’ve been experimenting with. I’m working intuitively and having fun just trying to improve the image. The hardest part is knowing when to stop with the editing.

    So do I think there’s a benefit to using Photoshop for image editing over mobile apps? Absolutely. The level of control and flexibility Photoshop provides over details is wonderful.

    I’ve added the results of this experiment below. The photos are random shots I’ve taken during October in and around Dublin.

    If you want to see more of my photos I post to Instagram.

  2. There’s nothing wrong about copying

    Leave a Comment

    I’ve been working as a digital product designer for a little over a year now. It’s been a positive experience for sure. There’s nothing like a career shift to get you out of your comfort zone. Which is a good thing. But it has resulted in my software of choice becoming Sketch.

    This is relatively new for me. Photoshop was my go-to design tool for many years. Since it had been over a year, I was curious to learn if any new features had been added.

    One such feature is the Select and Mask Taskspace. I wanted to try this. And after stumbling across a post by Anton Repponen I decided to figure out how to create something similar.

    I’ve added the end result below. This project was a reminder for me that these small practice exercises are important. And that there’s nothing wrong with learning by copying the work of others. Here’s a list of the things I figured out how to do:

    1. Create a seamless repeating pattern from a sourced image
    2. Quickly and accurately mask using a new feature of Photoshop
    3. Realistically apply a pattern to a product. In this case a Nike shoe.

    So here’s to personal projects as a way to continue learning.

  3. 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.

  4. Break Conference

    Leave a Comment


    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

    • Simpler, clearer and faster. These are the guiding design principles for
    • Start with needs. User needs not government needs.
    • 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: 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 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

    • 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

    • 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

    • 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

    • 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

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

    Adrian Shaughnessy

    • 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

    • 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.
  5. 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. 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.