Visual Communication Design Process

by Alastair Bruerton on Nov 19, 2009

4,892 views

A presentation on my VCD Process for a website design, the stages I go through, the benefits of following a process when doing design and the areas from where we can draw inspiration around us. I prese...

More…

Less

3 Embeds 35

http://www.slideshare.net	29
http://abruerton.com	5
http://webcache.googleusercontent.com	1

Statistics

Favorites: 12
Downloads: 0
Comments: 1
Embed Views: 35
Views on SlideShare: 4,857
Total Views: 4,892

Visual Communication Design Process — Presentation Transcript

TO BEGIN VCD Process P ALASTAIR BRUERTON 1

WHAT IS THE FUELING VCD FIRE Visual Communication Design is the graphical treatment of interaction design and i f i t ti d i d information ti architecture; it encompasses design p g decisions on typography, colour, imagery, texture, and composition g y, , p to convey themes, encourage interactivity and enhance usability and user experience NGAN TRAN 2

WHAT IS THE FIRE FUELING DESIGN? A PROBLEM B SOLUTION 3

FUELING INTO STAGES BREAK IT THE FIRE 1 A PROBLEM 2 4 3 B SOLUTION 4

FUELING STAGE 1 THE FIRE Analysis A ly & Research 5

FUELING STAGE 1 THE FIRE Requirements HIGH LEVEL 6

FUELING STAGE 1 THE FIRE Requirements WHAT IS THE PROBLEM? WHO IS THE TARGET AUDIENCE? WHAT IS THE GOAL? 7

FUELING STAGE 1 THE FIRE Constraints 8

FUELING STAGE 1 THE FIRE BRAND VALUES & COLOURS MEASURES OF SUCCESS Constraints DEADLINES & TIMEFRAMES BUSINESS & USER GOALS 9

FUELING STAGE 1 THE FIRE Determine Direction 10

FUELING STAGE 1 THE FIRE Brainstorm 11

FUELING STAGE 1 THE FIRE Keywords 12

FUELING STAGE 1 THE FIRE Associations & Relationships p 13

STAGE 1 FUELING THE FIRE Colours 14

STAGE 1 FUELING THE FIRE Imagery & Symbols 15

STAGE 1 FUELING THE FIRE S.M.P. SINGLE MINDED PROPOSITION CALL TO ACTION HOOK 16

STAGE 1 FUELING THE FIRE Reference point FOCUS OF THE DESIGN FOR ANY DECISIONS 17

STAGE 1 FUELING THE FIRE Feedback 18

STAGE 1 FUELING THE FIRE Mood Board 19

STAGE 1 FUELING THE FIRE Creative Brief 20

STAGE 2 FUELING THE FIRE Design D g & Refinement 21

STAGE 2 FUELING THE FIRE Set Deadlines & Timeframes 22

STAGE 2 FUELING THE FIRE Colour Palette 23

STAGE 2 FUELING THE FIRE Sketch page ideas 24

STAGE 2 FUELING THE FIRE VISUAL DESIGN FRONT END DEV Collaborate with team members INTERACTION 25

STAGE 2 FUELING THE FIRE 144 DPI - PRINT Photoshop template 72 DPI - SCREEN 26

STAGE 2 FUELING THE FIRE 960 PIXELS WIDE Photoshop template 1024 x 768 PIXELS | SCREEN RESOLUTION 27

STAGE 2 FUELING THE FIRE Photoshop template 12 COLUMN GRID 28

STAGE 2 FUELING THE FIRE Photoshop template 2 COLUMN PAGE LAYOUT 29

STAGE 2 FUELING THE FIRE Photoshop template 3 COLUMN PAGE LAYOUT 30

STAGE 2 FUELING THE FIRE Save regularly 31

STAGE 2 FUELING THE FIRE 0.1 01 0.2 0.3 1.0 Save Versions 32

STAGE 2 FUELING THE FIRE DESIGN Design Phase CONSIDERATION ADJUSTMENTS FEEDBACK 33

STAGE 2 FUELING THE FIRE DESIGN Design Phase REFLECT 34

STAGE 3 FUELING THE FIRE Packaging P k g g & Delivery 35

STAGE 3 FUELING THE FIRE 144 DPI - PRINT Client .jpgs 36

STAGE 3 FUELING THE FIRE Build .psd 72 DPI - SCREEN 37

STAGE 3 FUELING THE FIRE Work with Front End Dev to slice up file p 38

STAGE 3 FUELING THE FIRE Store .zip 39

POWER TO FUELING THE FIRE ABOUT VCDTHE PROCESS Why Why use a process? 40

POWER TO THE PROCESS FUELING THE FIRE Flexibility Fl b l y 41

POWER TO THE PROCESS FUELING THE FIRE Goal Size 1 2 3 42

POWER TO THE PROCESS FUELING THE FIRE A B 1 2 Process Size 3 1 5 A 2 4 B 43

POWER TO THE PROCESS FUELING THE FIRE 5 1 Process Stage % 4 2 3 44

POWER TO THE PROCESS FUELING THE FIRE 1 2 } 3 4 5 6 45

FUELING THE FIRE Inspiration p 46

FUELING THE FIRE EXIT Escape the Screen!! 47

FUELING THE FIRE WANDERING LISTENING TALKING Escape the Screen!! ART GALLERY BOOKS & MAGAZINES FILM & MUSIC 48

FUELING THE FIRE DRAWING Record your ideas NOTEBOOK 49

FUELING THE FIRE “Area” Phaidon Press IdN Magazine Reading “Envisioning Information” by Edward Tufte “Web Design Index” Pepin Press “Designer’s Guide To Color” by James Stockton 50

FUELING THE FIRE AUDIO VIDEO Discover Search WEBSITES BLOGS 51

FUELING THE FIRE ted.com ted com colorlovers.com ffffound.com www butdoesitfloat.com pechakucha.com smashingmagazine.com smashingmagazine com 52

FUELING THE FIRE http://delicious.com/aawb Last slide, go share alastair.bruerton@provoke.co.nz 53

Visual Communication Design Process

by Alastair Bruerton on Nov 19, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 35

Statistics

Visual Communication Design Process — Presentation Transcript