Make an animated GIF with Keynote and Photoshop

I enjoy the InVision newsletter because it includes great interviews with designers and useful tips, like this article from Andy Orsow called 7 tips for designing awesome animated GIFs.

I learned how to make animated GIFs with Photoshop at Shillington, but found the process unwieldy. I didn’t realize you could give yourself a huge head start by doing your animations as a video first. I didn’t have ScreenFlow or After Effects, so I was intrigued by Andy’s suggestion that I could use something considerably more low-tech (and probably already on YOUR computer too.)

Pro tip: If ScreenFlow or After Effects aren’t in your budget, create your animation in Keynote, and export it as a video. Yep, there’s finally a use for that setting. —@andyorsow

Here is the result of my little experiment. I made this animated GIF with Keynote and Photoshop. It was a pretty straightforward process and it was a fun way to learn something new. If you want to try it out yourself, please read on for a few more tips you might find helpful.

arrow-circle-line

Set up your Keynote workspace

You can change the size of the “canvas” in Keynote by setting the slide size in the inspector. I choose 600×200 because that’s the width of graphics for my blog. You can pick any size that makes sense for your project.

 

Screen Shot 2014-12-14 at 6.32.34 PM

Turn on the rulers and drag some guides so you can orient yourself as you’re working.

Screen Shot 2014-12-14 at 6.38.43 PM

Create your animation in Keynote

The Keynote animation settings are a little fussy to get used to but there’s a lot already built in. Everything you’ll need us under the “Build” tab of the inspector. You “group” actions by using the “Start Build” drop down, which allows you to run actions at the same time. For example, the circle rotates and moves at the same time, that’s TWO actions)

Screen Shot 2014-12-14 at 6.40.26 PM

Export to Quicktime

When you’re ready, export the file to Quicktime format. I only had one slide in my deck with the animation, so I kept all the defaults (Playback Uses: Manual Advance), 24 frames per second. I just turned off Audio (not sure that was actually necessary)

Finish it up in Photoshop

Importing the .mov file into Photoshop was pretty straightforward. File > Import > Video Frames to Layers. As Andy suggested, I chose the option “Limit To Every 2 Frames”

Screen Shot 2014-12-14 at 6.46.12 PM

Once I imported the file into Photoshop, I immediately tried to Save for Web, but the GIF didn’t animate. I wasn’t sure what was wrong so the second time I imported it, I opened the animation panel (Window > Animation) and verified the playback was working before I exported.

It was better to do it that way anyhow because I could tune the animation by extending time and removing frames. I found that I needed to extend the last frame to 1 second to make the animation look like there’s a little pause before it starts.

What will YOU make?

Please leave a comment if you found this helpful or leave a link to your animated GIF project. I’d love to hear from you.

My favorite hand-drawing resources

fear-pencil

I’m on a quest to be better at hand-drawn visual communication. I think of the subject as “chunks” I need to master:

  • Communicating abstract concepts visually
  • Hand lettering
  • People and objects in context
  • UI sketching

Here are some resources I’ve found fun/memorable/useful. Several of them cover more than one of the areas of mastery I mention above, so I have not categorized them.

Sketching Across the Design Process, Ray DeLaPena

Ray’s workshop at Lean UX NYC 2013 strongly influenced the way I think about the different contexts of sketching: “thinking,” “talking,” and “showing.”

Kate Rutter, Strategic Sketcher at Intelleto

My friend Kate Rutter creates and shares amazing resources. If you get a chance to attend a workshop or hear hear speak at an event, do it!

Hand Lettering Ledger, Mary Kate McDevitt

Although you might think that hand-lettering is just the territory of graphic designers and illustrators, I think it’s great for any hand-sketcher to have a couple different hand-printed fonts in their toolkit. The book has great examples and loads of different worksheets, so buy it on paper and practice, practice, practice!

The Sketchnote Handbook, Mike Rohde

This book is worth getting on paper. It’s printed on nice paper and bound well so it’s a pleasure to read. The electronic version is not as satisfying.

The “Back of the Napkin” series from Dan Roam

I first saw Dan Roam at SxSW 2010 when he launched “The Back of the Napkin.” He now has a several books and tons more resources on his site.

VizThink

The VizThink folks are an international community. They have interesting events and good resources.

Quick, Useful UI Sketches, Lane Halley (that’s me!)

I’ve pulled together my current thinking about UI sketching in a workshop. I use a technique I call “reverse wireframing” to teach you to see the structure of UIs and through a series of exercises, you’ll create your personal shorthand to draw UI elements.

Good luck, and please leave comments with your favorite resources!

LeanUX14 Presentations and Speakers

I attended Lean UX 2014 in New Jersey April 10-12, 2014. Below, please find the schedule with with links to the videos, slides, materials and information about the speakers. If you can’t find what you’re looking for, please check back later. I am adding links as I can find them and will continue to update this post. If you have found something I don’t have yet, please feel free to add missing info in the comments – thanks!

UPDATE April 28, 2014: Will has started to post the videos, I’m adding links here as they are added to the LeanUX site.

Thursday

Conference Opening – Will Evans
Keynote: We Are What We Repeatedly Do: Idealized Design & Beginner’s MindJabe BloomSlideshare
Tilting at Windmills: Innovation in Large Organizations  | SlidesAlistair Croll
6 Ways Results-Driven Learning Can Transform Work Culture  – Carmen Scheidel
LeanUX Wins: Design Thinking in Large EnterprisesSlidesAriadna Font Llitjos
Keynote: Lean Change: It’s Organizational and Personal – John Shook Lean Global Network
Lean UX: Agility Through Cross-Functional Collaboration | SlidesJeff Gothelf
Philosophy of Lean: A Phenomenological Understanding of Product Innovation | SlidesThomas Wendt
Optimizing Organizational Frameworks for Applied Design | SlidesLynn Teo
Keynote: Roadmap to the Lean Enterprise | SlidesTrevor Owens
Is Bad Research Better Than No Research: Doing LeanUX Right | SlidesDr. Deidre Kolarick
The Lean Agency | SlidesMona Patel
Eating Our Own Dog-food: A Story of Customer-Led Product Innovation – Jodie Moule | Slideshare
The Values Gap – Jen Guarino, Shinola
Safe-Fail, NOT Fail-Safe – Alicia Juarrero
Branding Moments | SlidesBill Beard
So You Want To Get Lean: Integrating Lean Startup | Slides Melissa Perri
The Balanced Team Movement | SlidesLane Halley
Keynote: It’s the Process, Jim, But Not As We Know ItDave Snowden

Friday

Workshop Descriptions .pdf

Morning Workshops

Effective Customer InterviewingAdrian Howard
Show Me What You’re Thinking – Ray DeLaPena | Slideshare
Facilitating Meetings That Don’t Suck – Virginia Cagwin | Slideshare & Jacklyn Burgan | Slideshare
How To Do Lean Research Right – Dr. Deidre Kolarick
Being a Successful User-Centred Product ManagerAndrew Mayfield
Validate Before Code – Steven Cohn
Managing to Learn Using A3Joshua Howell & John Shook
Communicating the Business Value and Getting Buy-in for UX Research – Christine Perfetti & Ezra Gildesgame

Afternoon Workshops

Deeper Understanding: Stories, Observations, Insights – Dan Szuc | Slideshare
Recruit Participants for Customer ResearchTomer Sharon | Speakerdeck
Design Research Methods – Thomas Wendt
Lean Analytics: Use Data to Build a Better Business FasterAlistair Croll
Lean Fundamentals: Value Stream Mapping for N00bs – Adam Yuret & Jabe Bloom
Lean Branding: Developing Powerful Brands in Lean Environments – Bill Beard
Applying Service Design to Your Agencies’ Delivery – Markus Andrezak / Christian Becker
Designing to Learn: Creating Effective MVP ExperimentsMelissa Perri

Friday General Sessions

Design Resonance: Making Sense of Cynefin and User Experience – Michael Cheveldave | blog post
UX + BA Working Together in Harmony – Jacklyn Burgan with Aaron Majcher
Towards a Theory and Method of Test Driven Design – Jonathan Berger | blog
WWE Ethnography: Let’s Get Ready to RumbleTomer Sharon | Speakerdeck
From Dinner to Dining: The Evolving Role of the DesignerZaana Howard
Creation & Production Combined: The Power of Connected WorldsMarkus Andrezak

Saturday

Morning Workshops

Applying the Cynefin Framework for Improving Speed, Agility, and Innovation – Michael Cheveldave
Inclusive Design & Lean UX – Kel Smith, Elle Waters & Sophie Hwang
Designing an MVP that Works for Your Users – Ariadna Font Llitjos
Story-mapping the User Experience – Donna Lichaw
Design Thinking for Designing and Delivering Services – Zaana Howard
How to Draw Quick, Useful UI SketchesLane Halley
Mapping the Customer Journey – Jodie Moule & Stephen Moule
Overcoming Analysis Paralysis – A Case Study in Ethnographic Methods – Lynn Teo

Afternoon Workshops

Decision-Focussing – How to clarify Decisions and Get Information required for Decision-Making – Kim Ballestrin handout 1 | handout 2
Capturing Product Vision with the Idea Stack – Eli Bozeman
Making Sense of Messy Problems: Systems Thinking for Complex Business Models - Johanna Kollmann
Mapping Your Minimum Viable ExperienceCourtney Hemphill
Introduction to Design Studio Methodology – Oonie Chase & Will Evans
Visual Problem Solving & Facilitation – Dean Meyers
Enhancing Proto-Personas With CharacterizationsChelsey Delaney & Taren Sterry

Closing Sessions

Restarting the Enterprise (Why Innovation Teams Suck)Adrian Howard
Conditions for Success: People, Skills, Spaces for Healthier Design – Dan Szuc | Slideshare
Management, Alignment, and Collaboration Done Differently – Arne Rook & Fridtjof Detzner | Jimdo
Designing For Services and Long-Term Innovation – Shelley Evenson, Fjord

How to make quick, useful UI sketches

As I’ve embraced Agile and Lean Startup methods, I’ve learned to adapt my UX practice so it is more QUICK, VISUAL, COLLABORATIVE and CONTINUOUS. Learning how to quickly sketch screen layouts and user interface (UI) elements helps me think through design problems, communicate ideas to other people, collaborate, and reduce the need for pixel-perfect deliverables.

In this workshop, I’ll lead you through a series of exercises which help you learn to draw good-looking, quick, useful, user interface sketches, followed by a discussion about how and when we can use sketching in our own projects.

No prior sketching or UX experience required, everyone can draw. Just grab some paper, a pencil and an eraser and follow along. This brief tutorial should take you about 1 hour.

Quick, Useful UI Sketches from Lane Halley

Free resources to hone your design skills

If 2013 was the year of code, let’s make 2014 the year of design. Here is a list of free resources that can help you develop and improve your design skills, delivered right to your inbox!

Hack Design

HackDesign is “An easy to follow design course for people who do amazing things.” Sign up to get a new design lesson in your inbox each week, hand crafted by a design pro.

Design for Hackers

Design for Hackers teaches the principles of good visual design to programmers, developers, and makers of any kind. Each email from the 12-week course is based upon a chapter of Design for Hackers. You can buy Design for Hackers as a companion book for the course, or just get the emails for free. There’s also a Facebook page where people in the program connect.

Gibbon

Gibbon makes “playlists for learning. Almost all the knowledge is available on the web, all you need is someone to guide you to it.” Specify how much time you want to dedicate per week and the topics you’re interested in and it will send you a list of links in email each week. Topics include design, development and business.

myFonts

I look forward to the myFonts Newsletter because it’s always a great source of inspiration and education about fonts and the designers who create them.

The Smashing Newsletter

I consider the Smashing Newsletter a must-read for any Web designer. It’s a great way to track hot topics and emerging trends in Web design.

UIEtips

Most UX people are aware of Jared Spool through his writing, speaking and event hosting. When you subscribe to the UIE Newsletter you get UIEtips mailings which contain useful free content, in addition to announcements of paid virtual seminars and events.

If you know a great resource not on this list, please leave a note in the comments. Thanks!

Top books from 2013

When Media Contour asked me to contribute to a year-end wrap up of favorite books, I was happy to participate. I’ve re-posted my selection below. You can check out the full post here which also includes lists from fellow Cooperista Chris Noessel and LA friends Kai Gradert and Jod Kaftan.

Q: What are you currently reading?

I read a lot and hardly ever finish one book before I start another. Here are several favorites from the top of the stack.

Evil by Design: Interaction Design to Lead Us Into Temptation by Chris Nodder
The practice of User Experience design requires an understanding people and their motivations. In this well-written book, abundantly illustrated with examples, Chris examines how the seven deadly sins (Pride, Sloth, Gluttony, Anger, Envy, Lust and Greed) form a framework for understanding human behavior and provides 57 design patterns to make the insight actionable. I’m savoring this book a chapter at a time, because I’m taking so many notes about ideas I want to test in my current projects. I do most of my reading on my iPad or Kindle, but I made an exception for this book because It’s beautifully produced and a pleasure to read on paper.

Design for Hackers: Reverse Engineering Beauty by David Kadavy
David is the author of famous and funny blog posts including “Why you hate comic sans.” I work with a lot of people who don’t have a design background. When they ask me “what’s an accessible book about design?” I love recommending David’s book because he’s such a clear thinker and good writer. He also has done a great job building a community of learning around this book. You can connect with David and other readers of the book on his Facebook page.

Earlier this year, I also enjoyed jQuery for Designers: A Beginner’s Guide by Natalie MacLees. Natalie is a pillar of our local WordPress community. It’s great to see some of her wisdom captured in print. If you enjoy working through cookbook-style tutorials, and have a basic understanding of css and html, following the chapters of this book will give you a great basic understanding of the mechanics of jQuery for use in your next Web design project. I am grateful to Natalie for making this subjct approchable enough I could tackle it in a couple weekend.

Q: What’s up next on your reading list? Why?

I have a huge stack of technical books I plan to skim or reference in the next year. Here are a couple that I’m reading for fun.

The Year Without Pants: WordPress.com and the Future of Work by Scott Berkun
I started getting more interested in WordPress this past year. I’ve been self-hosting my WordPress blog “The Apprentice Path” since 2010. After attending WordCamp LA In September I started to realize the greater potential of the platform and was impressed with the culture and community that surrounds WordPress. I picked up Scott’s book to learn more about how things work behind the scenes at Automattic. I also had the pleasure of seeing Scott speak at the Warm Gun conference in San Francisco a couple weeks ago. You can see a summary of his talk on his blog http://scottberkun.com/2013/danger-of-faith-in-data/

I’m really excited to see that Mary and Tom Poppendieck have a new book “The Lean Mindset: Ask the Right Questions” Everyone who is interested in “Lean Startup” or “Lean UX” or “Lean” anything will do themselves a HUGE favor by going back to the source and reading Mary and Tom’s writings about Agile and Lean Software Development.

Q: What is your favorite book and why? What are the key takeaways?

Am I allowed to say “my sketchbook?” What, you mean a PUBLISHED book? OK then.

I had to think carefully about which books I’ve read more than once. And then I noticed “101 Things I Learned in Architecture School” by Matthew Frederick on the shelf near my desk. This small, lovely and useful book is a collection if thoughts and practices drawn from architecture and relevant to many other disciplines. Sometimes when I am stuck for an idea (or procrastinating!) I flip it open at random and find just the answer I need.

Best wishes for the new year, and Keep Reading!

Update: Combining UX and Development Stories

About a year ago I wrote a post “Combining Design and Development Stories in Tracker” for the Carbon Five blog. In that post, I describe my experience writing separate UX and development stories in one backlog. Recently, a few people have approached me to ask my current thoughts on the topic. Do I recommend Tracker for managing UX activities? What do I think about combining UX and dev activities in the same story? My thoughts are below. What’s your experience? Please leave me a comment!

Q: Do I recommend Tracker for managing UX activities?

A: A tool is just a tool. I used Pivotal Tracker because that’s what my team wanted to use. My advice would be pretty much the same if we were using Trello or JIRA or Confluence or paper cards or any other issue tracking tool. The point is the conversation that happens and who participates.

Q: What do I think about combining UX and development activities in the same story?

A: My current thinking on the subject is that there’s an adoption curve. Teams grow more comfortable thinking about UX and development work holistically when they understand the “big picture” of the project they are working on and have engaged, collaborative working relationships with each other.

The Agile UX Adoption Curve

Through my own projects in the past year, and by listening to other people share their own experiments with this, I think there’s an adoption curve. Designers show up, provide value and form relationships and UX work is gradually drawn into the team’s process. I’ve seen teams move through stages that are roughly like this:

  • Designer shows up at standups to consciously represent they are part of the team and learn what’s going on. UX work is discussed with PM and not visible to the development team.
  • Designer works closely with PM and participates in iteration planning meetings to guide the scope of stories written. Designer shows comps/wire frames at the start of an iteration planning session and facilitates conversation to help the team envision what they are making.
  • Designer maintains work in some parallel system, for example, Pivotal (development stories) Trello (PM/design stories) or two walls of cards in a team room. Dev team has visibility into design activities but it’s not integrated.
  • After trying to deal with the complexity of work on two boards and blocking issues, team realizes that ux design and validation work has to be pulled into stories, team starts to use tags and epics to identify stories that contain various activities (design, validation, styling). Designers and developers start to pair more at this point.
  • Team realizes that it all has to be considered together and starts to write stories that include development and design work together. Teams start to break down the distinction between “developers” and “designers” as strict roles start to blend into each other.

I’ve noticed that “complication factors” (power dynamics, huge team, distance collaboration, team members shifting in and out) tend to keep teams in the first steps of this journey. Teams that work together closely over time tend to get farther down the list.

I’d love to know what you think about this. Please share your own experience in the comments below.

Agile & UX Together at UX Week 2013

At UX Week in San Francisco I spoke about “Agile & UX: Two Great Tastes That Taste Great Together.”

Many UX designers are introduced to Agile as a set of practices (standups, sprints, backlogs, retrospectives). At the core, agile is based on a set of values. By considering and connecting with these agile values, UX designers have an opportunity to connect with developers to cultivate better understanding and smoother working relationships.

I encourage UX designers to cultivate an agile mindset by keeping these six objectives in mind:

  • Be part of the team
  • Create conversation
  • Run experiments
  • Reduce waste
  • Find your cadence
  • Expand your toolbox

Agile & UX: Two Great Tastes That Taste Great Together from Lane Halley

Please take a look at the deck and tell me what you think in the comments below!

Workshop: How to Draw Quick, Useful, UI Sketches

OPODZ, Los Angeles, September 18, 2013

  RESERVE YOUR PLACE

Quick, Useful, UI Sketches

In this fun, hands-on workshop, I’ll lead you through a series of exercises which help you learn to draw good-looking, quick, useful, user interface (UI) sketches.

  RESERVE YOUR PLACE

This class will cover:

  • Types of sketches
  • Why sketch?
  • Sketching materials
  • Grids, containers and functional groupings
  • Developing your personal UI shorthand

This workshop is appropriate for designers, product managers, Web developers, software engineers or anyone else who needs to think about or communicate concepts for digital products. No prior artistic or drawing experience necessary. If you can draw a circle, a square and a triangle, you’ve already got the basics covered!

Learning how to quickly sketch screen layouts and UI elements helps you think through design problems, communicate ideas to other people, collaborate, and reduce the need for pixel-perfect deliverables. Join me for this two-hour workshop and pick up some new skills you can use right away in your own projects.

  RESERVE YOUR PLACE

Workshop: Lean UX for Digital Designers

Hands-on Lean UX Workshop for Digital Designers

    RESERVE YOUR PLACE

I’m pleased to announce that I’ve joined Jaime Levy or JLR Interactive to present a 2-hour, hands-on workshop geared toward digital designers. Join us to learn Lean UX techniques that can be used immediately with your clients and teams.

Practice pragmatic Lean UX techniques

The following topics will be covered along with hands on exercises:

  • What is Lean UX?
  • Defining the Product & Customer
  • Exploring Key User Experiences
  • Validating the Customer and Idea with Qualitative Research
    RESERVE YOUR PLACE

Learn with the experts

Lane Halley is a product designer at Carbon Five, where she uses Lean UX design and Agile construction methods to create Web and mobile products. Lane’s a popular teacher and speaker on the subjects of user experience (UX), Lean Startup, Agile and product design. Recent speaking engagements include The Los Angeles UX Meetup, The Lean Startup Conference, QconSF and Agile UX NYC.

Jaime Levy has been a pioneer for over 20 years in the creation of innovative browsing and non-linear storytelling experiences for digital products and services distributed on disk media, mobile devices, the Web and iTV. These days she runs a User Experience Strategy and Design consultancy in Los Angeles called JLR Interactive that caters to startups and enterprises who are open to practicing “lean” principles for transforming their business concepts into sustainable and scalable online solutions. Throughout her career, Jaime has been a part-time college professor, for 7 years at NYU ITP and is currently teaching UX Design in the Fall/Spring quarters and UX Strategy in the Winter quarter at UCLA Extension.

    RESERVE YOUR PLACE