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.

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.
(http://www.digitalhollywood.com/)
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
(www.smartinsights.com). Americans used smartphone and tablet apps more than PCs to access the Internet as of Feb 2014 - the
first time that has ever happened. (CNN.com)
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 http://ia.net/
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”.
DesignInspiration.net
Fairly easy to remember.
Excellent site with free tools,
vectors, downloads and articles
WebDesignDepot.com
Inspiration, tips, tools,
resources and tutorials.
Subscribe to their newsletter
Webdesignledger.com
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
@ katy.walker@penton.com
Question
And
Answer