Tools & Tips for Interactive Design

Posted inEditor's Picks
Thumbnail for Tools & Tips for Interactive Design

Matthew Richmond’s HOW Design Live session is one of 23 hand-picked by our knowledgeable staff as the cream of the crop from HDL. It’s not too late to experience it: HOW Design Live Online has been extended to June 29!


“Because you can, be fearless.” – Matthew Richmond

mbr_140305_4386_edit_wide_800px

Conference presenter Matthew Richmond joined us for a live chat as part of HOW Design Live Online, sharing his insights on designing some of the world’s most recognizable brands.

Matthew Richmond is considered a Founding Partner and Executive Creative Director at The Chopping Block, Inc., a full-service graphic design studio founded on the principle that good design spans all mediums. His work has won notable recognition from Communication Arts, ID Magazine, HOW Magazine and Flash Forward. In 2003, Matthew and the Block were featured in the Cooper Hewitt National Design Museum’s Triennial Exhibition. Notable projects include work for Adobe, Scholastic, MoMA, NBC, They Might be Giants, Phish, Time Inc., and Turner Entertainment. For the past fifteen years, Matthew has presented and instructed on all aspects of digital and analog design, photography and illustration. When not in the studio, Matthew can be found teaching digital illustration, branding, identity and advanced techniques to the graduate students at the School of Visual Arts.

At HOW Design Live, Matthew tackled everything from desktop design and development tools to online/mobile solutions for building and scripting interactive projects. He explored creative design tools, wireframing/prototyping tools, site building and fantastic open source frameworks/libraries that enable designers to stand tall in today’s world of fancy, high-impact, standards-based interactive projects. Watch the session at HOW Design Live Online—now extended to June 29!

Check out what Matthew had to say in this excerpt from the chat session, and register for HOW Design Live Online to catch more sessions with your favorite conference presenters.

Matthew Richmond: Tools & Tips for Interactive Design

Matthew Richmond: Hi, this is Matthew Richmond from choppingblock.com, chopshopstore.com and School of Visual Arts in NYC.

Screen Shot 2014-06-19 at 9.54.27 AM

Parker: Hello Matthew, Thanks for coming! You mention a lot of tools in your talk. What are 3 you use all the time and can’t live without?

Matthew Richmond: Hi Parker! Thats a good question… I only get three eh?

1. Adobe Illustrator. Can make almost anything in there.

2. TextMate – I spend a lot of time using a text editor. Thats where most of the thinking comes in. Copy, prototypes, front end HTML & CSS and playing with scripted animation. All using the web for reference and a text editor.

3. And I would normally say my sketchbook, but this week we have been really enjoying using Adobe’s Project Mighty & new drawing apps. Have not used the sketchbook in a few days.

Rolland: Hey Matthew, how do you keep tabs on the latest tools? Do you read tech blogs?

Matthew Richmond: I tend to talk to a lot of designers and students about how they work and i am often picking up new things from them. My downtime is most often the moments in which i am procrastinating and flipping through blog posts vis an rss reader like FeedBin. So i read blogs like Codrops, A List Apart, Swiss Miss, etc… and end up picking up a lot of new tools to explore.

Screen Shot 2014-06-19 at 9.53.59 AM

Jimmy: Hi Matthew, what web design project were you most proud of out of everything you’ve done?

Matthew Richmond: I will always be fond of the They Might be Giants and Phish work. The designs were really fun and the experience of working with great musicians (and their equally great teams) while the internet was still coming of age was a really amazing experience.

We just did 2 years of education software work for Scholastic that will help kids learn math, thats pretty cool too.

Rolland: Good point about talking to your peers. To clarify a bit, I’m primarily a print designer, and I want to improve my marketability by learning some web design basics. What tools/resources should I look to as a super beginner?

Matthew Richmond: As a super beginner you should spend some time on A List Apart and also consider reading HTML5 for Web Designers and CSS3 for
Web Designers
. That will give you a good introduction to the medium. Which is KEY!

Then i would suggest a class or workshop where you can make things and get some design feedback. You need to figure out a way to surround yourself with other people who are learning. SO you can work as a team and talk about it.

Katie: What’s your take on agile vs. waterfall design processes? (Or others, if you prefer to approach it differently.)

Matthew Richmond: Waterfall just does not really work. The game now is to be as agile as possible. Given the unknowns of most projects and the expectation to price a whole job without having a concrete idea whats going to be delivered, you have to work as a team to identify whats important and start with that.

Something that has been HUGE for us is switching to an estimated budged based upon hours and them billing time and materials. We have a solid understanding of the end goal, we estimate (because we understand ourselves) that it will be 1000 hours. And then we start working. As the projects shift or new issues are discovered – we all discuss the timeline and budget. it keeps all the stakeholders collaborating on what the MVP (Minimum viable product) or Minimum lovable product is.

The more and more we work with other teams (usually other development teams) the more often we are working in tandem with their agile processes.

Lynn: Hi Matt. Great presentation at HDL. It was really packed with info. Two part question here: Chopping Block started back in 1996. What were your top tools at the beginning of the internet? You’re still successful in 2014. How did you manage to keep up with the ever-changing industry?

Matthew Richmond: It’s a good question! I was just reminiscing about this recently. We first started talking to Adobe about a product called Imageready. We were convinced it was the future. It later became the “Save for web” tool. I think the most important part of learning any of this (and the tools) is that you have to become FEARLESS. All of those tools are going to change. You can’t just learn Photoshop, or Sublime text and be done. You have to get used to jumping in and figuring things out. Trying a tool just to see if any one part of it is useful.

Personally i feel that the design community is slowly accepting that the days of the one monolithic design tool is coming to an end.

We all need to be accepting of hopping around and using the best parts of each. For example Sketchup is SUCH an amazing and easy to use 3d program and it exports to formats that can be used in Photoshop and illustrator

Why on earth would you want something new built in? Just use that. It’s fast and easy. And you can use it today. But you need to lower your hesitation to try new stuff. You should all be playing with demos of Sketchup (for 3d) and Sketch for UI design. Because you can, be fearless.

Screen Shot 2014-06-19 at 9.52.49 AM

Sketchup (for 3d) and Sketch for UI design

Parker: You’re very well-versed on the tools that are out there. Have you ever thought of creating your own tool to replace something you use but thought “there has to be a better way?”

Matthew Richmond: Oh man, If i could afford the team to do so. I would be making design and web gallery tools all day. Thats why i really like the occasions we get to work with Adobe or other software design groups. I cant do anything without thinking “there has to be a better way!”

Katie: How did you get into interactive/web design initially?

Matthew Richmond: Initially, i was in the right place at the right time. I was in Architecture School thinking a lot about the architecture of information and privacy – and the internet happened. I worked for a lot of web startups here in NYC, early web design. I remember getting a phone call when animated gifs hit the internets “we have to make these, they are cool”

Parker: Have you ever seen your suggestions to Adobe turn into an actual tool?

Matthew Richmond: Many many times. I have a love / hate relationship with adobe thats been really positive lately. Some of my closet friends came from the Illustrator and Photoshop teams. I have build panels and a few features here and there.

We built the first Adobe Kuler. Pay attention to their announcements next week, good stuff.

Screen Shot 2014-06-19 at 9.53.06 AM

Adobe Kuler

Lynn: Matt, are you one of those people with 14 tabs and 26 tools open at once? How many tools do you say you use in an average (or as close to average as you can get) day?

Matthew Richmond: Ha… I do have a lot of tabs open but i am not one of those crazys with 50 tabs than i never shut. Normal is Illustrator, font manager, text editor, Photoshop (or Sketch) and several web browsers. Most of the code i write is scraped together from samples and demos i find online. So i tend to keep really organized bookmarks so i can quickly jump to things like ‘my favorite javascript resources’ or ‘the handy links i saved to help be remember the WordPress loop.’

Rolland: Going off your response to Katie’s question, do you have a favorite gif?

Matthew Richmond: Ha, thats awesome. I don’t make many of them but I am kinda fascinated with cinemagraphs. Like these. I have this desire to live in a future where flat-screens are so prolific that we all have these hanging on our walls.

Professionally… i will say that illustrators and photographers who can do a little animation are in demand. As more and more publications are only distributed digitally – it will continue.

Lynn: Can you clarify what you mean about the code you write bei
ng scrapped together?

Matthew Richmond: Sure… “Nobody writes this stuff from scratch.” if you have a vision of a web developer guy/girl who sits down and opens new BLANK documents all day, you are mistaken. You build upon the last things you did well, you find a little snippet of HTML or CSS online that you like and you paste it into your projects.

I like sharing Listamatic with designers who are just getting started with interactive design. That page, that “Simple horizontal list” is literally how almost EVERY website navigation bar is created. There is the HTML, there is the CSS. Sure there are a few tweaks we could do to make it a little better. But why would you write if from scratch. Use it and learn it. Now, click the “Next list” button… there are dozens of styles, each getting a little more advanced.


120_HDLOnline1

For more information from Matthew, you can watch his session at HOW Design Live Online.

Chat with other HOW Design Live speakers at HOW Design Live Online and watch 23 hours of video from the conference! Register with code HOWLIVE14 to get $100 off registration!

Live Chat Schedule:

  1. Monday, June 9 at 3 pm ET: Corwin Hiebert

  2. Tuesday, June 10 at 2 pm ET: Marcia Hoeck and Ed Roach

  3. Wednesday, June 11 at 1 pm ET: Robin Landa

  4. Wednesday, June 11 at 2 pm ET: Hamish Campbell

  5. Thursday, June 12 at 2 pm ET: Matthew Richmond

  6. Friday, June 13 at 1 pm ET: Andy Epstein

  7. Friday, June 13 at 2 pm ET: Nancye Green

  8. Monday, June 16 at 2 pm ET: Sara Wachter-Boettcher

  9. Tuesday, June 17 at 2 pm ET: Justin Knecht

  10. Wednesday, June 18 at 2pm ET: Chris Converse

  11. Thursday, June 19 at 2 pm ET: Allan Haley

  12. Friday, June 20 at 1 pm ET: Douglas Davis

Learn more and register here.

If you were a Big Ticket attendee at the 2014 HOW Design Live conference, please contact us at howdesignlive@fwmedia.com to receive access to all conference videos.