Hello! Welcome

INTERACTIVE DESIGN BASICS

OK so we are covering a bit more than the just the basics...

to my presentation on

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

6 Building Blocks of Graphic DesignWhether 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

The Big PictureAnother 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

ProximitySimilar items are close together/different elements are farther apart

ContrastLight 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 spaceSpace is one of the most overlooked aspect of design

03

Graphic Design Software

IllustratorFor illustrations, as in

scanning in a drawing, turning it into a vector. Logo creation, business

cards etc.

PhotoshopEnhancing

Photography (Lightroom now #1 for batch editing).

High end designs and “special effects”.

InDesign/FireworksVector based layout software, InDesign for print, Fireworks

for on screen design. both allow multiple “pages” or screens.

InVision AppSimple 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 Principles of Effective Interactive DesignToday 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 AttentionModerate use of visual

elements can help your visitors to get from point A to point B

Feature ExposureSimple visual guidelines are

extremely effective

Effective WritingNo cute words, no

exaggerated statements.

Negative SpaceWhite space reduces the

cognitive load

ConventionsFollow users expectations. It’s not boring it just works.

05

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

Latest Trends in Digital Products89% 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

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 everywhere2) Mobile & desktop simply isn’t enough

3) One site for all devices

08

What is the secret to web design?

EDITORIAL WEB DESIGN IS 95% TYPOGRAPHYTry 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

Collaborating with DesignersOn 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

MIKEDOE 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 TeamIn no particular order, here are examples of creative folks working in

the digital field that you may encounter in the near future.

JANEDOE 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 TeamOn the content creation side of things you typically work with an interactive art director.

JOHNDOE 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 designdegrees these days)

13

Meet the Creative TeamI’m both left and right brained, creative and analytical (as are most designers working in the digital field).

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

A littleAbout 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

Thank youfor 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