Your SlideShare is downloading. ×

Interactive Design Basics


Published on

This presentation covers a little bit more than just the basics. Geared more toward technical people that work with designers, it explains what we do, how we do it and what the future holds for the …

This presentation covers a little bit more than just the basics. Geared more toward technical people that work with designers, it explains what we do, how we do it and what the future holds for the field of interactive design.

Published in: Design, Business, Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Hello! Welcome INTERACTIVE DESIGN BASICS OK so we are covering a bit more than the just the basics... to my presentation on
  • 2. What is graphic design? It is the process and art of combining text and graphics in order to communicate a message effectively. This includes anything from logos, flyers, newsletters, to illustrations, infographics, print magazines, posters, signs, TV and film titles/lower thirds, banner ads and of course, web sites and mobile applications which all require different types of skill sets and knowledge of many different software applications. 01
  • 3. 6 Building Blocks of Graphic Design Whether you are designing for a printed magazine, a LCD monitor screen, a small iPhone screen or a massive projection screen, these basic concepts still apply. Typography Subtle but powerful, type is understood as LIGHT and BOLD & HEAVY font weights. 1 Lines Use a line to divide or unite elements on a page or provide an anchor (bottom, top). 4 Shape Square is the most popular but circles and triangles and other geometry is used, too. 2 Texture Does it appear smooth to the touch or rough? Is it slick/expensive or handmade? 5 Mass To create a mood use heavy text and graphic elements or minimal lightweight elements 3 Color Color provides cues. Red is attention grabbing, blue coveys stability. 6 02
  • 4. The Big Picture Another way to look at design is through the eyes of the artist. A photographer, painter, jewelry maker, writer, musician & most creatives utilize these 6 additional principles in order to execute their ideas. Balance - the rule of thirds - the visual center - the use of grids Proximity Similar items are close together/different elements are farther apart Contrast Light text on dark background, dark text on light background. Alignment Avoid always centering text, align graphics and text to create dynamic layouts Consistency Logos are created for consistency. Use the correct logo and brand colors. Negative space Space is one of the most overlooked aspect of design 03
  • 5. Graphic Design Software Illustrator For illustrations, as in scanning in a drawing, turning it into a vector. Logo creation, business cards etc. Photoshop Enhancing Photography (Lightroom now #1 for batch editing). High end designs and “special effects”. InDesign/Fireworks Vector based layout software, InDesign for print, Fireworks for on screen design. both allow multiple “pages” or screens. InVision App Simple way to create interactive comps with desktop & mobile displays and share via web browser. Everyone uses each tool differently. However, these are the typical uses for Design software as it changes literally every year depending on the software updates. Browser based apps such as InVision are becoming more common to allow for better collaboration. 04
  • 6. 6 Principles of Effective Interactive Design Today the majority of media is experienced through the digital format. Usability and the utility, not just the visual design, determine the success or failure of a website or application. Thinking too much? Everything should be obvious & self explanatory Focus Users Attention Moderate use of visual elements can help your visitors to get from point A to point B Feature Exposure Simple visual guidelines are extremely effective Effective Writing No cute words, no exaggerated statements. Negative Space White space reduces the cognitive load Conventions Follow users expectations. It’s not boring it just works. 05
  • 7. Let’s analyze this epic website FAIL. OK so its more for a laugh but sometimes it’s the best way to learn. ( THIS IS WHAT NOT TO DO! 06
  • 8. Latest Trends in Digital Products 89% of consumer media time was spent in mobile apps, 11% in mobile web according to latest statistics by Nielsen ( Americans used smartphone and tablet apps more than PCs to access the Internet as of Feb 2014 - the first time that has ever happened. ( As of January, 55% of American adults had smartphones, while 42% owned tablets, according to the Pew Research Center. 2% lower than mobile devices which have exceeded PCS for the first time ever. Apps made up 47% of Internet traffic 8% of traffic came from mobile browsers (most sites have not developed good responsive sites yet) 45% 47% 8% 07
  • 9. The World has gone mobile... But has your web experience? Responsive design is THE new web design process. Why? 1) One application to maintain which runs everywhere 2) Mobile & desktop simply isn’t enough 3) One site for all devices 08
  • 10. What is the secret to web design? EDITORIAL WEB DESIGN IS 95% TYPOGRAPHY Try going through all of the web designs that you love, strip out the images and ask yourself “how would that website look with just text and spacing?”. When designers say “text is the interface”, they really do mean it. Some designers might disagree but at the end of the day some extra visual flair might be what separates your design from the rest, but you still need to get the first 95% down. Especially when it comes to news and magazine websites. For a little inspiration on the cutting edge of designing & building interactive products check out 09
  • 11. Collaborating with Designers On a typical day most designers are challenged by others who are not clear on the basic differences. Here are 4 ways to avoid any confusion when collaborating with an interactive designer. 1 Ask for a comp! It really helps to have a completed layout with all major assets shown in the format it will be displayed. Delivered as a “flat” PNG or JPEG. High Fedelity Wires Sometimes we need to plug in content first before we can really know what direction to go, but it should be understood as such. Low Fedelity Wires Created by an information architect or user experience person. Typically in black and white with detailed annotations. Be Organized InVision is a great app for organizing your final wireframes and comps. Use it to share and collaborate with your team. 2 3 4 10
  • 12. MIKE DOE Product Designer About Me: I like to make things. I’m like a digital architect. I make tools and products that help people . They look pretty and are fun/easy to use. Skills: Conceptual Drawing/Illustrator UX Code 90% 88% 95% 80% Industrial design degree, design or product design 12 Meet the New Creative Team In no particular order, here are examples of creative folks working in the digital field that you may encounter in the near future.
  • 13. JANE DOE Interactive AD About Me: I help create editorial content and work with high quality photography and illustrations that enhance content. I also manage designers and have a solid technical background too. Skills: Original Content Photoshop/Illustrator Design Trends Code 80% 90% 95% 60% BFA or MFA in Fine Arts / Communication Design 11 Meet the New Creative Team On the content creation side of things you typically work with an interactive art director.
  • 14. JOHN DOE UX Designer About Me: Although I’m a user experience expert, I’ve also got the goods to make something boring, potentially exciting. Skills: Photoshop, Fireworks Illustrator User Experience Code 90% 88% 50% 80% (Assume they have UX design degrees these days) 13 Meet the Creative Team I’m both left and right brained, creative and analytical (as are most designers working in the digital field).
  • 15. Design Inspiration When I haven’t had my coffee and can’t remember urls, just google “design inspiration”. Fairly easy to remember. Excellent site with free tools, vectors, downloads and articles Inspiration, tips, tools, resources and tutorials. Subscribe to their newsletter 14
  • 16. A little About Me I’m a Designer that’s worked at Penton for 4 years. In spare time, I play in a band, shoot nature video/photography and mentor neighborhood kids in the arts. 15 twitter/katywalk
  • 17. Thank you for being here! Please share my presentation with others at Penton & feel free to reach out if you have any additional questions or comments that were not answered @ Question And Answer