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.

Notes from CSS Dev Conf Honolulu

The first annual CSS Dev Conf wrapped up a couple of weeks ago. 

It featured over 20 speakers, two keynote presentations, and one massive wrap up panel of CSS experts featuring every speaker there.

Aside from the online conference, CSS Summit, I don’t think there’s ever been an organized event focused solely on the design language of the web for web builders. 

Slides:

Links:

To find out about the future of CSS Dev Conf, follow @CSSDevConf on Twitter.

2nd Annual In Control Conference

Coming this February, the 2nd Annual In Control Web Design Conference takes place in Orlando—far from Winter’s snowy reach!

After speaking at and attending several conferences, I’m very proud to say that the AIGA Orlando In Control Conference is an entirely different beast of Web design conference.

While SXSW and other conferences have couple of hundreds to thousands of people attend, we limit registration to a hundred people.

With limited enrollment, attendees get an intimate environment to focus like a laser beam on the content.

We’ve curated the content so that, for example, you aren’t getting that HTML5 talk at the end of the conference, for example, when you really needed it at the start to better understand the nature of semantic markup in its relation to CSS3 and jQuery.

Also, by keeping the conference to one-track, we aren’t forcing you to pick between two great speakers that would otherwise be slotted to speak at the same time.

Then at the end of each day, there’s the Wrap-Up Panel.

That’s when that day’s speakers join forces and take any questions from the attendees and even from fellow speakers. (Also, it’s a good time to ask for a design critique of your Web site!)

Giving attendees enough time to learn and ask questions of the attendees is at the core of In Control as sessions run about an hour and 40 minutes long.

This extra time helps keep speakers from feeling rushed (which in turn then makes them actually rushed) in presenting their material and opens up to more opportunity for Q&A. It’s web knowledge and experience in HD.

Just like last year, In Control boasts an incredible line-up:

And we don’t want to throw you into the streets to fend for yourself!

Thanks to MailChimp’s sponsorship, we provide snacks and lunch on both days. (Over at Environments for Humans, we’re still raving about the chocolate cake from last year’s In Control.)

As for swag, we also want to make sure it’s actually useful to attendees.

Thanks to our in-kind sponsors of O’Reilly, A Book Apart, PeachPit, Apress, and Rosenfeld Meda, your conference swag are Web design books!

Plus, a portion of your ticket goes back to AIGA Orlando to help promote design, mentoring projects and more in the local community.

If you’re serious about Web design and want to leave feeling inspired by some of the best in the business, check out this year’s AIGA Orlando In Control Conference.

And for a limited time, you can get $200 off with early bird pricing!

I’ll see you there!

Holiday Web Design Conference Recordings Sale

This past year at Environments for Humans put on a lot of big shows for the people who build Web sites and applications.

If you weren’t able to attend one of our conferences, but still would like to get some great Web design and development knowledge on topics like CSS, jQuery, Accessibility and more from people like Paul Irish, Stephanie Sullivan, Ryan Irelan and many others, well, now is your chance!

Get 50% our online conference recordings for the month of December with discount code “MERRYHOLIDAY”!

Head over to each respective online conference page to see more information about the conference and purchase recordings:

Thanks for a great year and have a happy, safe Holiday!

The iPhone iPad Summit

On August 25th, a line-up of eight awesome speakers will speak at the iPhone iPad Summit, an online conference for the iPhone and iPad hosted by Environments for Humans.

It’s online and live so you don’t have to travel to miss time away from work or family, but still get front-row seats to speakers and the ability to ask your questions.

Speaking at the iPhone iPad Summit are:

  • Jesse MacFayden from Nitobi is talking about PhoneGap,
  • David Kaneda, creator of jQtouch, covers his new mobile HTML5 framework, Sencha Touch, for iPad development,
  • Alasdair Allan, author of Learning iPhone Programming and Programming iPhone Sensors, speaks on iPhone Face Detection,
  • Jonathan Stark, author of Building iPhone Apps with HTML, CSS, and JavaScript, is talking about the iPhone Offline Mode
  • Simon St. Laurent, editor at O’Reilly Media, is covering HTML5 Client-side Data Storage
  • Suzanne Ginsburg, author of Designing the iPhone User Experience, is presenting on the user experience.
  • Author and designer Dan Rubin brings his Mobile Design with CSS3 presentation; and
  • Josh Clark, author of Tapworthy, covers his Designing iPhone Interfaces session.

Thanks to the wonderful people at MailChimp for sponsoring the event. (Check out ChimpKit, an Objective-C wrapper for the MailChimp API. )

And when you buy a ticket, attendees get a free O’Reilly ebook on iPhone development book of their choice. (Details on how to claim the ebook will be talked about during the day of the online conference.)

Free Ticket Giveaway

Lastly, I’m giving away a free ticket to the iPhone iPad Summit.

Simply leave a comment for this post, stating your favorite iPhone or iPad app and why. I’ll be picking a winner randomly on Friday morning. Best of luck!

NOTE: Congratulations to Anslsem for winning the free ticket to the iPhone iPad Summit.

2nd Annual CSS Summit Wrap-Up

Over at Environments for Humans, the 2nd Annual CSS Summit wrapped up in late July with an all-star line-up of CSS experts talking about the latest, greatest in CSS.

After a wonderful introduction by Dave Shea, author Denise Jacobs talked about troubleshooting CSS and set the stage for the day ahead.

With Web typography finally coming of age, Jason Cranford Teague covered where and what’s possible with today’s Web type.

These days the big news has been about CSS3.

Even though the specification is still being written, it’s what is in the browser that matters. And modern browsers like Chrome, Firefox, Opera and Safari are leading the pack with putting these new properties into place.

Zoe Gillenwater covered effective methods for how to bring in CSS3 into modern sites.

Stephanie (Sullivan) Rewis talked about tools to create progressively enhanced sites, code that takes advantage of the new stuff without locking out users running older browsers.

David McFarland, author of so many missing manuals, focused on an in-depth on CSS3 animations. As one attendee noted, Dave could have easily buried the audience with the specification, but instead kept a light, jovial mood throughout a very balanced presentation.

Small and powerful devices in their own right, the iPhone and iPads also have mobile version of Apple’s Safari browser. Estelle Weyl showed us how to sprinkle in CSS3 to create iPhone-like Web apps.

While not directly tied to CSS3, Compass creator Chris Eppstein’s talk focused on how to code manageable CSS3. With so many browser vendor prefixes, it’s easy for our code to become an unwieldy mess. While Compass requires a local version of Ruby installed on your computer, it outputs static CSS files that are perfect for uploading any Web server solution.

At the end of the day, Nicole Sullivan went over Object-Oriented CSS– a topic she covered during our first CSS Summit. This time, though, she brought a real-world case study, Facebook. Which benefitted from her expertise in bringing the file size down of their CSS files, considerably.

All in all, for a CSS fan like myself it wasn’t a bad day.

I’m grateful for the speakers’ time from their busy schedules (for example, Stephanie had just returned from her honeymoon) and the attendees. Without you all, it wouldn’t be possible.

Note: If you missed the 2nd Annual CSS Summit, recordings are available for purchase through the event page.

CMS Days’ Workshops and Summit

Content Management Systems are a pain.

The challenge of meeting the technical functionality of, well, managing content is a tough one. Content Management Systems usually don’t come with instructions on how to make a killer blog theme out of the box or how to work with a well-established brand or pre-existing
site templates.

That’s why at Environments for Humans, we are putting on CMS Days to make CMS’s work for you.

Through a series of Workshops and a Summit we intend to get you up and running with some of the more popular CMS’s out there.

Drupal Workshop Day

On Monday, March 29th, we start with The Drupal Workshop Day. 

Tom Geller, host of Lynda.com’s Drupal training session and the Drupal 7: Visual QuickStart Guide, presents the morning workshop that gets you and running with Drupal.

In the afternoon, Sheena Donnelly takes over to talk about implementing Drupal themes. Relatively new to Web design, she’s been theming Drupal sites for years and co-organizes the North Carolina’s Drupal User Group in the Research Triangle. 

Engine Summit — The online ExpressionEngine Summit

On the second day in CMS Days, we focus in-depth on ExpressionEngine with hour long sessions of advanced material. 

With speakers like EllisLab’s own John Henry Donovan, Happy Cog stars Ryan Irelan and <a href="http://markhuot this post.com/”>Mark Huot, Blue Flavor’s Leslie Flinger, nGen Work’s Fred Boyle and ExpressionEngine expert Chad Crowell, you will not only get inspired, but have immediate takeaways to help master ExpressionEngine.

WordPress Workshop Day

On Wednesday, it’s all about WordPress. 

The morning is hosted my Matt Harris, pro with WordPress and a regular at WordCamps, where he teach you how to come to grips with WordPress. 

In the after, Stephanie Leary takes over to present on creating themes in WordPress. Working with WordPress for six and author of the forthcoming Beginning WordPress 3, she knows WordPress inside and out. 

Django Workshop Day

On the final day, Jeff Croft tackles and tames Django. A freelance developer that regularly works with nGen Works, Jeff Croft shares his knowledge of Django. From starting Django to tricking it out, the all-day workshop is great for those new to Django or want to dive a bit deeper into it.

Tickets for CMS Days are available in four pack. For the price of three workshops, you get access to all four CMS Days!

Or tickets can be bought individually for each CMS:

Escaping Winter

In Control Orlando is a couple of months away, but it’s never too late to plan your escape from Winter

For a couple days in late February, Web design and development talks from HTML5 to usability and everything in between will be covered by some of the the best speakers and trainers in the world:

  • Kelly Goto
  • Stephanie Sullivan
  • Ethan Marcotte
  • Ted Murphy
  • Derek Featherstone
  • Greg Rewis
  • Shari Thurow
  • Jared Spool

Register now using my discount code INCCHRISS for $50 off.