HOW Interactive Conference 2013: Tools & Resources

When I first set out to write about what I learned over 3 fabulous days at the HOW Interactive Design Conference in Chicago, I realized (as I sifted through pages and pages of notes) that what’s needed here isn’t another recap of sound bites from the event. What I usually hear from design conference attendees is “it was good but I was expecting more” or “I had a great time but it only reinforced what I already knew.” If you’ve scoured hundreds of articles, blogs, and books about how to be a better designer then you don’t need to learn more, you need to do more. So, with this article, I figured you’d want tools to get the job done.

I’ve put together the tools and resources that the speakers shared at HOW, some of which are free.

PROTOTYPING & WIREFRAME TOOLS

sketches

Axure.com
Make interactive wireframe and prototypes without writing code.

UIStencils.com
Get the tools you need to sketch any type of prototype with pen and paper. Check out this iPhone Stencil Kit!

Protosketch
Build fully-interactive prototypes from your UI Stencil Sketches.

FluidUI.com
Design working mockups for mobile and tablet apps in the browser to share instantly.

Invision
Quickly share a mockup or demo a mobile app with this prototyping and collaboration tool for designers.

Flinto
Make your designs interactive. Create iOS prototypes with your rough sketches or final mock-ups. This tool adds interactivity by linking screens so you can quickly share with your client.

Skala preview
Send pixel perfect previews from your Mac to as many devices as you like. And if you’re working in Photoshop CS5 or higher, you can preview as you edit.

Codiga
A cloud-based drag-and-drop mobile interface builder. Import your own code or choose from their JQuery powered library of components.

Wirify.com
Convert any web page into a wireframe. The PRO version lets you export and edit the wireframes into a variety of formats.

Sketch
A vector graphics app (Mac only) for web and UI design. Render text, create artboards, and use its adjustable 960 grid for wireframes. Using Sketch Mirror, you can preview your work on your iPhone and tablet over Wi-Fi.

USABILITY TESTING

Silverback
Usability testing software for designers and developers. Screen capture, record live video & audio of your users testing your website.

Optimizely
Website Optimization and A/B Testing

UXrecorder
Mobile Website Testing for iOS

DESIGNING & BUILDING

Chris Butler

Macaw
Tired of designing in Photoshop and Illustrator? This web design tool writes code as you draw it.

Codrops
A web design and development blog that publishes articles and tutorials on the latest trends and techniques.

Hammer.js
Javascript library for multi-touch gestures.

Adobe Generator for Photoshop CC
Create image assets in real time.

Adobe Edge Reflow
Design responsive CSS layouts for all screen sizes and export to an HTML code editor with Adobe Edge Reflow CC.

Communication is Key

BOOKS, BLOGS, AND MORE…

Want to know more? Here are some books from the HOW speakers themselves. If I hadn’t brought all carry-on luggage, I might have bought every one of these. Thank goodness for the internet.

Patrick McNeal Twitter
Creator of designmeltodown.com
Session:  What You Need to Know To Be An Effective Web Designer
Books: The Mobile Web Designer’s Idea Book, The Web Designer’s Idea Book

Chris Converse – Twitter
Codify Design Studio
Session: How to Turn Your PSD Documents into Web Pages
Some Great Resources and Templates can be found here

James Victore – Twitter | YouTube
Keynote Speaker
Book: Victore or, Who Died and Made You Boss?

James Pannafino
Associate Professor, Millersville University
Session: Interdisciplinary Approach to Interactive Design
Book: Interdisciplinary Interaction Design

Chris Butler – Twitter | Blog
COO, Newfangled
Session: Master (minding) the Process: Presentation Slides
Book: The Strategic Web Designer

Margot Bloomstein – Twitter
Principal, Appropriate, Inc.
Session:  Making Meaning in Content and Design – Presentation Slides
Book: Content Strategy at Work

Todd Zaki Warfel
Co-Founder, Nimbly App
Session: Interactive Prototyping & Exploration of Standard Prototyping Tools
Book:  Prototyping A Practitioner’s Guide

Terry White, Sr.
Worldwide Evangelist, Adobe
Session: Create HTML Websites, iPad Apps and eBooks Without Writing Code
Tutorials

Cameron Moll
Founder, Authentic Jobs
Session: Visual Execution of Branding Across Platforms
Books: CSS Mastery , Mobile Web Design

Christopher Cannon
Senior Designer, Bloomberg
Session: Designing Data: How to Create Meaningful Visualizations – Presentation Slides

Brian Wood
Co-Owner, AskBrianWood.com
Session: Bridging the Designer/Developer Divide

David Sherwin – Blog
Principal Designer, frog
Session: Using Storytelling Techniques to Create Better Interactive Experiences
Book: Success By Design: The Essential Business Reference for Designers

Dan Rhatigan
Type Director, Monotype
Session: Tailored Type for Screens – Website

Want a play by play of the event? Here’s a beautiful summary of the social media from the conference as it happened.

Have you used some of these? Do you have something to add? We want to hear about them!

Jennifer Marin is the co-president of AIGA Baltimore and she clearly loves resources.

25 Days of AIGA

In honor of the holiday season and AIGA Baltimore’s 25th anniversary, we’ve put together 25 Days of AIGA: a list of 25 awesome things about AIGA Baltimore and the magical holiday season.

December 1: Get up close and personal with the best of the best! Couldn’t attend Design Week 2013? Check out what we learned from Khoi Vinh, Matteo Bologna, and other amazing designers: http://ow.ly/rjWVB

December 2: Did you miss the members-only BPS workshop? Say HI to Kim and Kyle this month at their Pop-Up Shop, Holiday Card workshop, and 2 craft fairs! http://baltimoreprintstudios.com/workshops/

December 3: Say HI to Design Week 2012 lecturers, Post Typography! They’re having an epic poster sale on 12/7 at their studio http://ow.ly/rjZr9

December 4: Did you know your AIGA membership is good around the world?! If you find yourself traveling, check out the local chapter’s events and tell ‘em B’More says “Hi!”

December 5: Be in the know about all local art events. CBS Baltimore selected us as one of the top 5 to follow in the arts: http://ow.ly/rjZCZ

December 6: Wallet feeling the holiday pinch? Save with AIGA membership discounts on things like Adobe, Shutterstock, Apple, and Lynda.com.

December 7: Exclusive AIGA benefits are now more accessible than ever! Give your favorite designer a membership gift for $50:http://www.aiga.org/join/

December 8: You can look to AIGA for standard practices and legal requirements. Supporter-level members and above get a complimentary print copy of the AIGA ethics guide!http://ow.ly/rjZUg

December 9: Be counted. Join the largest community of design advocates, practitioners, enthusiasts and patrons! http://www.aiga.org/belong/

December 10: As a Baltimore chapter member, you have access to special members-only events! Check our events calendar for upcoming opportunities: http://baltimore.aiga.org/events/

December 11: Get to know us and other creative professionals! Who else is going to Baltimore Jingle Mingle tomorrow?! http://ow.ly/rjZRV

December 12: Be counted. Join the largest community of design advocates, practitioners, enthusiasts and patrons!http://www.aiga.org/belong/

December 13: Today, we’re simply enjoying time together with friends at our Board Member Holiday Potluck Dinner…YUM!

December 14: Support local designers and quality craftsmanship. We’ll be shopping at the Holiday Heap today. Come say HI!http://www.charmcitycraftmafia.com/holiday-heap-2013-2/

December 15: Designers caught in the act of giving back at MDFB:http://ow.ly/rk00E. How else can we team up to support the Baltimore community?

December 16: Do you know about Harris Creek Connected? Learn more about them and get involved in social design initiatives through AIGA!http://www.aiga.org/harris-creek-connected/

December 17: Reconnect with analog! Dr. Sketchy’s & Creative Alliance have life drawing events, & boardie Greg shares his thoughts: http://baltimore.aiga.org/for-the-love-of-analog-design/

December 18: Does your New Year’s Resolutions List include “Find a new job?” Members are in luck. We’ve got exclusive opportunities for you on AIGA Design Jobs (http://designjobs.aiga.org/)

December 19: Be found! AIGA members are invited to join our exclusive Behance network: http://www.aiga.org/aiga-member-gallery/

December 20: Get recognized with discounts on competitions! AIGA’s design competitions celebrate exemplary design and demonstrate the power of effective design. http://www.aiga.org/competitions/

December 21: Never stop learning! Whether you’re just getting started or well into your career, AIGA has authoritative advice, articles, compensation data, publications and more: http://www.aiga.org/Resources/

December 22: How do national design trends translate to the Baltimore community? Come find out at our monthly BLEND! and Converse events!

December 23: Let AIGA help keep you healthy in 2014 with health insurance discounts: http://www.aiga.org/health-insurance-discounts/

December 24: AIGA is turning 100 in 2014, so look for amazing celebratory things in multiples of 10! Cheers to the future of AIGA!

December 25: AIGA Baltimore doesn’t plan on slowing down our 25th Anniversary celebrations, either! Just wait ’til you see what we have in store…!

Design + Books = Love

All designers need inspiration, but where do you go to get it? While the web is full of great finds, design books often have just as much insight, not to mention beautiful paper and spreads to spark any designer’s imagination. Last night, Converse attendees shared together the design books that inspire them the most during a meet up at Zen West Roadside Cantina and they came up with quite a list! Make sure you add a few of these to your wish list and don’t forget to drop some hints to friends and family!

  • 10 Commandments of Typography by Paul Felton- Felton presents the rules of typography then tells you how to break them.

 

  • Interaction of Color by Josef Alber (iPad Edition)- This book was originally published in 1963 as a limited edition boxed set with paper samples to help explore color pairing. Now, it’s been re-envisioned as an app for interactive learning via iPad.

 

  • A Smile in the Mind by Beryl McAlhone- Learn how to capture your audience with wit and suffuse your designs with substance. This is a required read for the Creative Concepts course with Ed Gold (a former AIGA Baltimore chapter president!) at University of Baltimore.

 

  • Stylepedia: A Guide to Graphic Design Mannerisms, Quirks, and Conceits by Steven Heller- A great reference for all things design.

 

  • The Business Side of Creativity by Cameron S. Foote- Foote provides invaluable insight for anyone working for themselves, including pricing guides, advice on how to hire, and more.

 

  • The Standard by Sappi- This series published by paper manufacture Sappi uses paper samples, varnishes, folio, and other finishes to beautifully illustrate print production techniques.

 

  • Don’t Make Me Think (Second Edition) by Steve Krug- Learn how to refine your design thinking for the web. Krug will show you how to focus on your message without cluttering it.

 

  • Just My Type by Simon Garfield- “Comic Sans is not at fault is not at fault… it’s the people who use it.”

 

  • Readymade by Shoshana Berger- This compilation of hands-on projects will inspire you to get away from the computer.

 

  • Idea Selling by Sam Harrison-  Harrison provides daily digestible tips on how to successfully pitch your creative ideas to decision makers.

 

Let’s Recap the 2nd Annual Baltimore Design Week!

We totally believe in feedback.

Back in October, we went all out for our friends and colleagues in the Baltimore design community and we’ve been hearing about it ever since. If you haven’t emailed, tweeted, or talked to us face-to-face about your experience, we’d like to hear from you. Complements, suggestions, or criticisms: the more we receive, the better Design Week gets.

Okay, that said, let’s get to the wrap-up..!

Design Week opened up with a bike race through Baltimore to find and capture the each letter of the phrase” AIGA Baltimore 25″. Participants sent their photos back to our judges at Canton’s Myth & Moonshine. Search for #AIGATypeRace on Instagram or check out the Charm City Type Race photos on Facebook.

Then on Monday, we welcomed former design director of NYTimes.com, Khoi Vinh, to the 2640 Space in Charles Village for an evening panel discussion about interactive design. Vinh was joined by Andy Mangold of Friends of the Web, April Osmanof of Fastspot, and James Pannafino of Millersville University. The conversation included topics ranging from the evolving purpose of the web and the technical specifics of responsive design to the Baltimore art and tech scene. You can read more about what we learned here.

Next up for Design Week was a type design workshop with Mucca Design’s creative director, Matteo Bologna. Held at one of Stevenson University School of Design’s swanky Mac labs, attendees were given a hands-on tutorial on how to manipulate letterforms and craft their own typefaces. Matteo demonstrated the quick and dirty overview of formatting characters in Glyphs, a font editing software. Being a Bezier curve master certainly helps!

Thursday was AIGA Baltimore’s 25th anniversary, so we just went ahead and threw a huge party in Fell’s Point at the Waterfront Hotel featuring our guests of honor: the chapter’s past presidents. Baltimore Print Studios donated super-cool thank-you certificates, hot off the letterpress, to help us recognize the presidents, their respective boards, and everything they accomplished over the last 25 years. Studio, in-house, and freelance creatives from all over the city showed up, (and some students too), making it a very memorable and fun evening for all (Well, most of us can remember it, anyway). Check out those memorable moments on our Facebook page.

The next morning, we took visitors on three studio tours, each one unique in their approach to design and what services they offer.

First, we went to ADG Creative in Columbia where we got an in-depth look at their ultra-modern setup, well-equipped with innovative technologies for interactive design and video production. From there, we headed back to Fell’s Point, dropping in on Orange Element to hear about their process, tour their 3-story row house studio, and look at some of their clever design work, including some enviable wrapping paper. Our last visit was to Gilah Press where we got to see how their top-quality cards and wedding invitations are created in a surprisingly old-school way.

We invited our participants out to Birroteca  after the studio tours to join us in a collective sigh of relief as another fantastic Baltimore Design Week came to a close. Thanks to everyone who supported us, volunteered, or attended the events. You’re totally our new (or our old) best friend. And if you couldn’t make it, don’t worry because we’re going to start planning next year’s events shortly after our holiday break and we’ve already got some stellar ideas.

Want to see more pictures? Check them out here.

Top Ten Things We Learned from Design Week’s INTERACT Panel Discussion

On Monday, October 21, Khoi Vinh, former design director of The New York Times, joined AIGA Baltimore for a Design Week panel discussion on interactive design at the 2640 Space. Khoi and fellow panelists April Osmanof from Baltimore’s FastSpot, Andy Mangold from Baltimore’s Friends of the Web, and James Pannafino from Millersville University discussed what it was like to be an interactive designer in the 21st century. We laughed, we learned, and we gained new insights on working in the interactive field.

Here are a few things attendees learned from the discussion:

1. Every medium starts out with an initial purpose that evolves over time. The web started out as a library of documents and its purpose has evolved into a method of sharing content and creating conversation.

2. Baltimore has up-and-coming art and tech scenes (that often collide). People are moving to Baltimore because it’s a “cheap” place to start from the ground up. April Osmanof says Baltimore “has an art heartbeat at its core,” which fuels creativity on many different levels and industries.

3. Designers are learning to code HTML, CSS, and sometimes even Javascript because helps the team to complete projects on tight deadlines. Of course, it’s also helpful for designers and developers to speak (or at least understand) the same languages.

4. Pairing designers with developers is great for project communication and cross-training. Plus, it often results in better products.

5. Very few team-based creatives work from home. When everyone works together in the same place and at the same time we produce better work; we can get work done faster with fewer communication roadblocks.

6. If you’re just starting out in interactive design, work on a personal project to get some portfolio material. Remember that every artist was at first an amateur with developing skills.

7. There’s always something new to learn working in web production. On trying to keep up on new technologies, even James Pannafino struggles: “I freak out everyday.” So, know that you’re not alone.

8. As interactive designers, we have to get and stay comfortable with the ultimate unknown web. What’s next? Who knows.

9. Most clients know what responsive design is and why it’s important (finally!). If you still need to make the transition to coding responsively, ask yourself: “does this column or object need to have a fixed width or can it be flexible?”

10. Quick prototypes (like QuickTime movies with screen captures) are a great way to engage your client and convey interactivity from the get-go.

MD Food Bank Volunteer Day

AIGA Baltimore volunteered at the Maryland Food Bank on Saturday, September 21, and spent a few hours lending a hand to help end hunger. Who knew sorting cans of kidney beans from jars of peanut butter could be a fun time? We even got to go behind-the-scenes to see the mega freezer, which has a daytime temperature of -10 degrees! In just a few hours volunteers assisted in packing 10,785 pounds of food which equates to 8,296 meals!

Salvaged, donated food comes by the trailer-full into the warehouse, and all of it needs properly sorted and boxed before it can go back out to those in need. The cartons and cans are loaded onto the conveyor belt where daily volunteers help categorize it and pack it up.

Volunteers are critical to the Maryland Food Bank and its mission. Last year, volunteers contributed over 30,000 hours of service, saving the Maryland Food Bank $600,000.

Don’t wait for another AIGA volunteer day to give back—you can schedule a visit on your own. Better yet, bring your coworkers or friends. Check out www.mdfoodbank.org/volunteer or contact the volunteer program manager at 410.737.8282 x232 for more information on volunteer opportunities.

 

Happy 25th Anniversary, AIGA Baltimore!

We’ve had a lot to say about our 2nd Annual Baltimore Design Week over the last few weeks. There’s been so much going on we wanted to tell you about, including our plans for local studio tours, the Charm City Type Race, and special guests Khoi Vinh and Matteo Bologna.

Today, coinciding with Design Week, the Baltimore chapter of AIGA is celebrating our 25th year and we wanted to look at our history. We talked with former board presidents about their unique perspectives as they worked to make the Baltimore design community a source for events, ideas, and inspiration.

In 1988, Domenica Genovese was the senior art director at North Charles Street Design and she says she was enticed by the concept of starting a design-focused organization in Baltimore.

“Back then designers were second class citizens under account managers and sales and marketing,” she says, “So it was exciting to create a chapter that helps educate people about design.”

According to Genovese, there were no other goals aside from regularly getting together with about ten fellow designers, including two future AIGA Baltimore board presidents, Bob Shelley and Ed Gold. The group really just wanted to elevate the profession’s career status. One of their first events was an annual design competition called 20/20 where twenty designers were each given one minute to show off their talent and the success of the event pushed them towards becoming an official AIGA chapter.

Shelley says it took a lot to convince himself that he was ready to make the move from an unofficial gathering to an organization.

“I kept thinking about where to begin,” he says, recalling the memorable moments of early planning, “How do I create an AIGA chapter in Baltimore? It was mind-boggling. So many of my friends were there with me and I didn’t want to let them down. Plus, my company, RS Jensen, was splitting up and I was going through a divorce. But the Baltimore chapter was so important to me.”

“Then I thought, maybe a diversion would help me channel my energy into something I love: design.”

Pulling together a board, Shelley had a support system who convinced him that they were doing a good thing both for the present and the future. He visited other chapters throughout the country, getting their support to convince the AIGA National board that Baltimore needed its own chapter.

“Baltimore is not Washington,” he says, “We’re only 45 minutes apart but from completely different worlds.”

Ed Gold was, at the time, also the creative director of Barton-Gillet, a major advertising agency formerly located downtown. He remembers when desktop publishing changed everything.

“You either were print or video,” says Gold, referring to the available career choices at the time, “and you had a specific thing you did. When designers were able to set their own type using design software, it instantly put the linotype people out of business.”

Modern design tools are more available now than they were 25 years ago, when the equipment size and the specialized knowledge to operate it made them much less accessible. Gold believes because of this designers are now hired for their ideas instead of their ability to use those tools.

“With so much control in the hands of designers now, they’re in a great position to be entrepreneurs,” he says. “History is full of artists of all kinds who simply did something first because they could.”

We’d like to thank Domenica Genovese, Bob Shelley, and Ed Gold for talking to us. We’d also like to thank everyone who’s volunteered on the board over the last 25 years and, while we can’t list you all here, we can recognize our past board presidents and everything they’ve done for Baltimore’s design community and our AIGA chapter.

1988-1989 –  Robert Bob Shelley

1989–1991 – Anthony Tony Rutka

1991–1993 – Ed Gold

1993–1994 – Craig Zeigler

1994–1997 – Brenda Foster

1997–1999 – Kristin Seeberger

1999–2001 – Carl Cox

2001-2002 – Brigitt Thompson

2002–2004 – Joe Wagner

2004–2008 – Chuck Lowensen

2008–2011 – Christopher Jones

2011-2013 – Alissa Jones

Here’s to another 25 years!

There and Back Again (or, How to Get to and from Design Week)

We’ve got Design Week events going on all over the Baltimore metro area this year! From Owings Mills down to Columbia, we’re spreading our wings—and the love.

Some of you might be pondering your transportation options for our events. (You’re coming to every event, right??) So we’re here to help!

First off, we’re happy to announce that we’ve partnered with spanking-new ride-sharing service Lyft (of fuzzy pink car-mustache fame) to offer discounted rides to all guests for the Charm City Type Race and INTERACT panel discussion. Just download the app and enter the code AIGA under “payment” to receive $10 of free credit towards your ride. Learn more about Lyft here.

Another great option if you’re in the city is to use the Charm City Circulator. This free shuttle service runs through several of the city’s main corridors and would be an excellent choice for getting back to the starting point from the end point of the Type Race. You could also use it to get to our 25th Anniversary Party in Fells Point or the the Refresh Baltimore panel at MICA. County folks can connect to the Circulator via the MTA’s Light Rail service.

Alternatively, if you want a scenic, relaxing transportation option and aren’t in a time crunch, you could try out Baltimore’s Water Taxi service. It docks at several spots around the Inner Harbor. After the Type Race, wouldn’t it be nice to take a sea cruise back to Locust Point?

Parking

We always recommend carpooling when you can because it’s not only green, it’s less frustrating—instead of each of you finding your own parking spot, you only have to find one!

Some of our events feature street-only parking: the Charm City Type Race, INTERACT panel discussion, and studio tour at Gilah Press + Design. We recommend leaving yourself plenty of time to park for these events. If you end up arriving early, no worries. We’ll be happy to welcome you into the event.

For the Type Design for Non-Type Designers workshop on Tuesday, there will be plenty of free parking available at Stevenson University’s School of Design. Just make sure you account for rush hour traffic!

Whether you’re carpooling or not, you’ll also find street parking in Fells Point for our 25th Anniversary Party. If you can’t snag a street spot, there’s always the garage on Thames Street, which is pretty darn cheap and just a couple of blocks away. The garage is also an option if street parking is unavailable for the Orange Element studio tour in the same area. However, you’ll find plenty of free parking in ADG Creative’s lot!

We’re looking forward to seeing all your shining faces at these events. Let’s make Baltimore’s second annual Design Week awesome!

3 Reasons Why You Should Register for the Charm City Type Race

1) You don’t have to be a designer to have a great time. Bring your friends!

2) It’s good for you and the environment. Motorized vehicles are prohibited. Get outside and get active, while discovering new ways to look at our surroundings.

3) PRIZES! PRIZES! PRIZES! Did we mention that we’re giving away prizes?

Join us on October 20th for a a typography scavenger hunt through Charm City.

Board Spotlight: Jami Dodson!

Our social design director and subject of this month’s Board Member Spotlight, Jami Dodson sat down to fill us in on what this Southerner has been doing in Baltimore for the last decade.

“I moved here for grad school after working in advertising in Chicago,” she says, “I’ve always worked on the agency or design firm side and have recently switched it up by moving to an in-house team at a nonprofit. We’ve just built the marketing team from the ground up and the work has been very fulfilling and inspiring.”

When it comes to design, Jami’s says, for her, it’s all about the process.

“It’s problem solving,” she says, “that requires responsibility, intellect, and insight that’s clearly articulated to intended audiences. You can work for hours on something and then somehow when you’re about to give up and go be a farmer, it all comes together.”

About joining the AIGA Baltimore board, she says, “I’d been on the sideline of the Baltimore design community for awhile and decided it was time. I’d like to expand the role of what it means to be a designer by advocating for how our abilities can help to create social change. We have a lot to offer and I want to encourage designers to be active participants in the world around them.”

Speaking of the world, if she could paint her surroundings with one color, what would she choose?

“Any shade of green,” she nods, “Pantone 340 or Crayola’s yellow green.”

In her spare time, Jami says she likes to get outdoors and head to one of Baltimore’s parks.

“I love our city parks. Druid Hill Park has so many different parts to it. Nearby is Cylburn Arboretum, my favorite spot to take a walk or sprawl out on a blanket. It’s a hidden respite.”

When not designing or enjoying the outdoors, Jami says she’s often in the kitchen. Currently, her obsession is making fresh ricotta and grilling pizza. Next up: kimchi and sauerkraut.

“I really want to get to South America and Southeast Asia. The food alone would be worth the trip. Finding a chunk of time to take off is the hard part. Sagmeister was onto something when he recommended everyone take sabbaticals…it’s really important to step away from the screen.”

We totally agree.