Uploaded byAlastair Bruerton
Visual Communication Design Process
The document outlines the process of Visual Communication Design (VCD), detailing its stages from problem analysis to design and delivery. It emphasizes the importance of understanding the target audience, goals, and constraints throughout the design process. Additionally, it covers tools and techniques for brainstorming, creating mood boards, and collaborating with team members to refine the final design.
Visual Communication Design Process
- 1. TO BEGIN VCD Process P ALASTAIR BRUERTON 1
- 2. WHAT IS THE FUELINGVCD 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
- 3. WHAT IS THEFIRE FUELING DESIGN? A PROBLEM B SOLUTION 3
- 4. FUELING INTO STAGES BREAKIT THE FIRE 1 A PROBLEM 2 4 3 B SOLUTION 4
- 5. FUELING STAGE 1 THEFIRE Analysis A ly & Research 5
- 6. FUELING STAGE 1 THEFIRE Requirements HIGH LEVEL 6
- 7. FUELING STAGE 1 THEFIRE Requirements WHAT IS THE PROBLEM? WHO IS THE TARGET AUDIENCE? WHAT IS THE GOAL? 7
- 8. FUELING STAGE 1 THEFIRE Constraints 8
- 9. FUELING STAGE 1 THEFIRE BRAND VALUES & COLOURS MEASURES OF SUCCESS Constraints DEADLINES & TIMEFRAMES BUSINESS & USER GOALS 9
- 10. FUELING STAGE 1 THEFIRE Determine Direction 10
- 11. FUELING STAGE 1 THEFIRE Brainstorm 11
- 12. FUELING STAGE 1 THEFIRE Keywords 12
- 13. FUELING STAGE 1 THEFIRE Associations & Relationships p 13
- 14. STAGE 1 FUELING THEFIRE Colours 14
- 15. STAGE 1 FUELING THEFIRE Imagery & Symbols 15
- 16. STAGE 1 FUELING THEFIRE S.M.P. SINGLE MINDED PROPOSITION CALL TO ACTION HOOK 16
- 17. STAGE 1 FUELING THEFIRE Reference point FOCUS OF THE DESIGN FOR ANY DECISIONS 17
- 18. STAGE 1 FUELING THEFIRE Feedback 18
- 19. STAGE 1 FUELING THEFIRE Mood Board 19
- 20. STAGE 1 FUELING THEFIRE Creative Brief 20
- 21. STAGE 2 FUELING THEFIRE Design D g & Refinement 21
- 22. STAGE 2 FUELING THEFIRE Set Deadlines & Timeframes 22
- 23. STAGE 2 FUELING THEFIRE Colour Palette 23
- 24. STAGE 2 FUELING THEFIRE Sketch page ideas 24
- 25. STAGE 2 FUELING THEFIRE VISUAL DESIGN FRONT END DEV Collaborate with team members INTERACTION 25
- 26. STAGE 2 FUELING THEFIRE 144 DPI - PRINT Photoshop template 72 DPI - SCREEN 26
- 27. STAGE 2 FUELING THEFIRE 960 PIXELS WIDE Photoshop template 1024 x 768 PIXELS | SCREEN RESOLUTION 27
- 28. STAGE 2 FUELING THEFIRE Photoshop template 12 COLUMN GRID 28
- 29. STAGE 2 FUELING THEFIRE Photoshop template 2 COLUMN PAGE LAYOUT 29
- 30. STAGE 2 FUELING THEFIRE Photoshop template 3 COLUMN PAGE LAYOUT 30
- 31. STAGE 2 FUELING THEFIRE Save regularly 31
- 32. STAGE 2 FUELING THEFIRE 0.1 01 0.2 0.3 1.0 Save Versions 32
- 33. STAGE 2 FUELING THEFIRE DESIGN Design Phase CONSIDERATION ADJUSTMENTS FEEDBACK 33
- 34. STAGE 2 FUELING THEFIRE DESIGN Design Phase REFLECT 34
- 35. STAGE 3 FUELING THEFIRE Packaging P k g g & Delivery 35
- 36. STAGE 3 FUELING THEFIRE 144 DPI - PRINT Client .jpgs 36
- 37. STAGE 3 FUELING THEFIRE Build .psd 72 DPI - SCREEN 37
- 38. STAGE 3 FUELING THEFIRE Work with Front End Dev to slice up file p 38
- 39. STAGE 3 FUELING THEFIRE Store .zip 39
- 40. POWER TO FUELING THEFIRE ABOUT VCDTHE PROCESS Why Why use a process? 40
- 41. POWER TO THEPROCESS FUELING THE FIRE Flexibility Fl b l y 41
- 42. POWER TO THEPROCESS FUELING THE FIRE Goal Size 1 2 3 42
- 43. POWER TO THEPROCESS FUELING THE FIRE A B 1 2 Process Size 3 1 5 A 2 4 B 43
- 44. POWER TO THEPROCESS FUELING THE FIRE 5 1 Process Stage % 4 2 3 44
- 45. POWER TO THEPROCESS FUELING THE FIRE 1 2 } 3 4 5 6 45
- 46. FUELING THE FIRE Inspiration p 46
- 47. FUELING THE FIRE EXIT Escape the Screen!! 47
- 48. FUELING THE FIRE WANDERING LISTENING TALKING Escape the Screen!! ART GALLERY BOOKS & MAGAZINES FILM & MUSIC 48
- 49. FUELING THE FIRE DRAWING Record your ideas NOTEBOOK 49
- 50. 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
- 51. FUELING THE FIRE AUDIO VIDEO Discover Search WEBSITES BLOGS 51
- 52. FUELING THE FIRE ted.com ted com colorlovers.com ffffound.com www butdoesitfloat.com pechakucha.com smashingmagazine.com smashingmagazine com 52
- 53. FUELING THE FIRE http://delicious.com/aawb Last slide, go share alastair.bruerton@provoke.co.nz 53
Editor's Notes
- #2 Welcome, today I’m going to share with you a Process for Visual Design going from the Analysis phase through to the finished state being ready for Front End Development.
- #3 Quote explaining visual design is not merely a pretty interface, but encourages users to interact, incorporates brands and their values, it assists in hierarchy of information and evokes emotions.
- #4 The design process from start to finish can seem like a Marathon.
- #5 Breaking it into smaller stages can help it be more manageable. There are key stages which the designer goes through.
- #6 The first is the Analysis & Research stage. This happens before any visuals are even being considered.
- #7 The first step is to identify the problem and gather as much information as necessary to fully understand it.
- #8 You ask questions and try to get a mental model of the challenge.
- #9 Dino Dini (a video game developer ) states that the design process can be defined as "The management of constraints". He identifies two kinds of constraint, negotiable and non-negotiable. The first step in the design process is the identification, classification and selection of constraints.
- #10 Constraints are good. They allow the designer to understand their environment within which the design is to exist.
- #11 After gathering enough information it is time to start laying it out and filtering through it all.
- #12 The first stage is to brainstorm, this is a great way to rapidly examine all the potential avenues and areas of information and begin finding patterns. Get a bunch of post-it notes or an A3 and start jotting downs words which are linked to your research, creating lists of relevant words, topics, and phrases Then start linking them onto similar words until you feel you’ve covered all the key points from your questions and meetings.
- #13 After getting down a good amount of words and relationships the next step is to start identifying the important words.
- #14 The next step is to start grouping those words and seeing what links and patterns there are.
- #15 What colours help to reinforce those words? Along with any Brand colours are there other colours which support the key messages starting to take shape?
- #16 Start thinking of symbols which also relate and support these keywords. What images would help communicate this message?
- #17 This is a great method for future proofing your design decisions and to help you out when you start going down a tangent and wandering from the path. This has to be a concise and direct sentence that nails what message you’re trying to translate through the design. What are you trying to say?
- #18 This method helps you to push back on outside pressures further down the track to. Having such points agreed on early can help you cover yourself and defend design decisions.
- #19 After you’ve analysed the data it is important to see what the client thinks. It helps them know you have understood their problem and if any misunderstandings have occurred it is early enough in the process to make these changes without large time and budget costs. Having this agreed on ensures that future communication has a strong foundation for further design discussions and decisions.
- #20 This feedback could be presented as a Moodboard. Fuzzy
- #21 Or in a Creative Brief with further detail. Focussed
- #22 The next stage is the Design stage. After the groundwork has been done and the constraints identified it is time to bring the research to life.
- #23 Before you switch on the design brain though take a little moment to plan out how much time you have and break it into stages so you don’t get to the last hour and haven’t yet begun refining your work.
- #24 The first thing to do is lock down your colour palette. You don’t want to get carried away and have too many. Keep it focussed to allow you range and contrast but still convey the key message of your design. Often brand colours will already exist but you can still have room to add a few which compliment them and help balance the deseign.
- #25 By now you’ll be ready to get stuck into Photoshop but hold a moment longer. Photoshop for all it’s mighty glory is not a fast concept development tool, it is a refinement tool. A pencil and blank paper will let you test out several ideas before the program is even loaded.
- #26 Upon beginning your design at some stage you will want to take a step back and consider how the design is going, the strengths and the weaknesses. The feedback can come from yourself, a colleague or the client depending on the circumstance. Not all feedback is constructive though so it is up to you to decide what changes to make. After the adjustments have been introduced the cycle begins again.
- #27 Screen resolution is 72dpi, printing this out though can make it appear fuzzy and small. Designing at 144dpi allows you to have a presentation quality design for print and halving it gives you the screen version ready.
- #28 Designing to your constraints refers to the presentation method too, 1024 x 768 is presently the most common screen resolution setting. Setting your design to 960px wide ensures it fits comfortably inside a browser window and including vertical scrollbars.
- #29 When designing for the web it helps if you have a flexible but robust grid.
- #32 Regardless how long you’ve been in the game one of the best habits to get into is saving regularly.
- #33 Saving versions when you get to a key stage in your design or want to try a different angle helps in case a file corrupts and allows you to make comparisons if you’re unsure of a certain design direction.
- #34 Upon beginning your design at some stage you will want to take a step back and consider how the design is going, the strengths and the weaknesses. The feedback can come from yourself, a colleague or the client depending on the circumstance. Not all feedback is constructive though so it is up to you to decide what changes to make. After the adjustments have been introduced the cycle begins again.
- #35 An important technique in any design process is to step away from your design. This allows you to see it with fresh eyes. Depending on timeframes you may just go for a walk around the block, move onto some other work or even sleep on it. A good nights rest allows the brain to process all the ideas which have been brewing upstairs and gain some valuable perspective. The next day you’ll return to your design better for it.
- #36 Once the design is finished and signed off there is still the crucial part of preparing it for the Front End Developer. The successful execution of any design is crucial or there was no point in doing it.
- #37 When corresponding with the client you may have to email the designs for approval unless a meeting is arranged. Any designs emailed through need to be of reasonable quality for both screen and print in case the client wants to hand out the design to other colleagues. 144dpi helps ensure the design won’t appear to pixelated for print.
- #38 Save another version for the build phase as 72dpi, this helps ensure accuracy and quality for the web as you slice up the design, turning layers on and off.
- #39 Collaboration is essential for a successful design. Work with the Front End Developer to ensure both are happy with the plan of how the design will be integrated for the website. Share your ideas and experience.
- #40 Once the design phase is complete ensure all necessary files and resources are safely stored away for future use. You’ll want to make sure your backups are secure and safe.
- #41 A process helps by allowing you to narrow down options and focus on a clear goal. Design is the planning that lays the basis for the making of every object or system.
- #42 The benefit of having a process is the flexibility of it as design tasks change. As the size of the design changes so to can the process adjust to support it.
- #43 No matter what size the end goal is a good process helps to ensure you have a solid foundation on which to base your design.
- #44 By understanding and using a process so can understand the steps necessary and adjust them to fit your constraints be it time, money or both.
- #46 Because the process is broken into stages you can adjust them depending on what the requirements and goals are.
- #47 The benefit of a process helps let you focus on the important part which is the designing. Having the steps laid out give you more time for the creative side of the project.
- #48 Even though most of our work is web based doesn’t mean you have to spend the rest of your time there too. Locking yourself behind a screen is not the way. Escape the screen!
- #49 Just as the design you do is for the real world so too should you exist in it. Go wandering and you’re bound to stumble upon inspiration. Interacting with those around you, gooing to exhibitions, reading a book and listening to music are all great ways to fuel the brain.
- #50 As you have ideas it helps to jot them down for later analysis. As you jot down an ideas it frees up space for more ideas. Before you know it you’ll be needing a new notebook.
- #51 Reading is a great way to escape the digital realm (except for screen readers, ahem) and allow the mind to focus. Switching off the digital discractions helps us reconnect to the human elements and calm the mind.
- #52 This space away from the net allows us to identify new interests and topics. After taking the time to gather these ideas you may want to share them. A great part of the web for all its distractions is as a sharing and collaboration tool.
- #53 Here are a few sites I keep returning too...