SXSW: Designing User Interfaces in Keynote

In their Designing User Interfaces in Keynote Workshop, presenters Joel Beukelman, Mobile User Experience Designer at Netflix, and Ted Boda,
Lead UI Designer at Netflix, demonstrate how to use Apple’s Keynote application to wireframe, create high fidelity designs, mockup interactions, create visual specs, simulate animations, and present all from one tool.

  • Use Keynote to wireframe, rapid prototype, create visual specs, use animations, and prototype hyperlink interactions.
  • Designers don’t make designs in a vacuum. Once you are done making those prototypes, you have to present and document it.
  • There are a lot of applications that help with all these activities, but Keynote does most of them.
  • When working in a collaboraitive spaces with many designers with Photoshop, designers are set up in layers and groups and how things are set up. This file structure complicates and slows communication between other designers and stakeholders.
  • Keynote provides DIY organization. Set up an initial set of slides, one each for the Project Name, the Project Summary, the Site, the Project Map, the Features.
  • Then flesh out different design sections for each Feature, give its own Feature Section. If there are several options or iterations, give each Option Name or Number.
  • Reference materials such as comps, visual spec, aniamtion, reference graphics and icons, etc oxycontin high. can be placed on their own unique slides—hidden at the end of the slide deck, but referenced as many times as you need.
  • Photoshop and Illustrator still have their place, but regulated to digital image creation.
  • Use Photoshop for preparing images.
  • Use Illustrator to create icons and other similar resources.
  • Shapes and text from Keynote, merging assets from Photoshop and Illustrator.
  • Once you have a slide showcasing a feature or design—and you need to make modifications, duplicate it and then make changes.
  • At Apple, they would produce a lot options and then whittle it down to the best solution.
  • At Netflix, they do about four options and then do user testing to determine the best solution.
  • In Photoshop, you can spend all sorts of time making a high-fidelity design, whereas you can build a design in third of time, tell that story to stakeholders, lock it down, and then go to Photoshop.

SXSW: The Economy of the GIF

In their Economy of GIF panel at SXSW 2013, Mark Portillo (Self-employed) Jimmy Repeat (MTV) Ferndano Alfonso III (Daily Dot) and Lindsey Weber (Writer) talked about this artistic side of GIFs and how it has opened up new avenues for artists and with it the potential to earn a living.

  • SXSW Panel Twitter Hashtag is GIFecon
  • Most people in the crowd pronounce GIF with a hard G. They seem to be okay being wrong.
  • Tools that they use to create GIFs: GIFshop, Photoshop, Flash, After Effects, Cinegram, IShowU, Slingbox
  • Life GIFs is the art of quickly created animated GIFs from live video.
  • Rubbable GIFs allow for control of the playback of an animated GIF.
  • Jimmy Repeat: We don’t make just GIFs, but repeating animations
  • Mark Portillo: DJ takes existing music and makes something new. Doesn’t mean the musician is better than the DJ. Like those that make GIF animations.
  • MP: GIFs exploded when Tumblr came out with thie “GIF Feature”.
  • Lindsey Weber: “Reaction GIF” is popular to put in these types of GIFs. You can search by emotion.
  • Ferndano Alfonso III: Can you make a living making this GIF animations?
  • JR: We don’t just do GIFs. We are designers. If we only did GIFs, it would be a painting in border colors. As a designer you have to wear multiple hats. From being the director, shooting your own videos, doing the After Effects.
  • LW: As a freelance writer, people who hire you you have to do many things. “Can you make a GIF?” And I know what they mean.
  • JR: GIFs add another level of attractiveness for your eyeballs.
  • LW: Where is the Stockphoto GIF store?
  • JR: GIF is the moving artform. There’s going to be LEDs everywhere. The repeating image is always going to be there. And with people finding more and more uses for them.
  • MP: It’s always going to be around. Like a pair a Converse. Always a classic.
  • LW: It’s hit it’s peak now. Vine is Twitter’s answer to GIF popularity, but it’s jarring to have audio with it.
  • JR: This room is packed. People love making GIFs, so the marketers are going to be there.
  • LW: The fate of Tumblr and GIF are intertwined.
  • LW: Live GIFfing of events gets around rights issues for videos because it’s less policed.