Visual Communication Design Process
•
30 likes•11,498 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 presented this at the Wellington Web Meetup on the 12th November 2009.
Recommended
More Related Content
What's hot
What's hot (20)
Recently uploaded
Recently uploaded (20)
Visual Communication Design Process
- 1. TO BEGIN VCD Process P ALASTAIR BRUERTON 1
- 2. 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
- 3. WHAT IS THE FIRE FUELING DESIGN? A PROBLEM B SOLUTION 3
- 4. FUELING INTO STAGES BREAK IT THE FIRE 1 A PROBLEM 2 4 3 B SOLUTION 4
- 5. FUELING STAGE 1 THE FIRE Analysis A ly & Research 5
- 6. FUELING STAGE 1 THE FIRE Requirements HIGH LEVEL 6
- 7. FUELING STAGE 1 THE FIRE Requirements WHAT IS THE PROBLEM? WHO IS THE TARGET AUDIENCE? WHAT IS THE GOAL? 7
- 8. FUELING STAGE 1 THE FIRE Constraints 8
- 9. FUELING STAGE 1 THE FIRE BRAND VALUES & COLOURS MEASURES OF SUCCESS Constraints DEADLINES & TIMEFRAMES BUSINESS & USER GOALS 9
- 10. FUELING STAGE 1 THE FIRE Determine Direction 10
- 11. FUELING STAGE 1 THE FIRE Brainstorm 11
- 12. FUELING STAGE 1 THE FIRE Keywords 12
- 13. FUELING STAGE 1 THE FIRE Associations & Relationships p 13
- 14. STAGE 1 FUELING THE FIRE Colours 14
- 15. STAGE 1 FUELING THE FIRE Imagery & Symbols 15
- 16. STAGE 1 FUELING THE FIRE S.M.P. SINGLE MINDED PROPOSITION CALL TO ACTION HOOK 16
- 17. STAGE 1 FUELING THE FIRE Reference point FOCUS OF THE DESIGN FOR ANY DECISIONS 17
- 18. STAGE 1 FUELING THE FIRE Feedback 18
- 19. STAGE 1 FUELING THE FIRE Mood Board 19
- 20. STAGE 1 FUELING THE FIRE Creative Brief 20
- 21. STAGE 2 FUELING THE FIRE Design D g & Refinement 21
- 22. STAGE 2 FUELING THE FIRE Set Deadlines & Timeframes 22
- 23. STAGE 2 FUELING THE FIRE Colour Palette 23
- 24. STAGE 2 FUELING THE FIRE Sketch page ideas 24
- 25. STAGE 2 FUELING THE FIRE VISUAL DESIGN FRONT END DEV Collaborate with team members INTERACTION 25
- 26. STAGE 2 FUELING THE FIRE 144 DPI - PRINT Photoshop template 72 DPI - SCREEN 26
- 27. STAGE 2 FUELING THE FIRE 960 PIXELS WIDE Photoshop template 1024 x 768 PIXELS | SCREEN RESOLUTION 27
- 28. STAGE 2 FUELING THE FIRE Photoshop template 12 COLUMN GRID 28
- 29. STAGE 2 FUELING THE FIRE Photoshop template 2 COLUMN PAGE LAYOUT 29
- 30. STAGE 2 FUELING THE FIRE Photoshop template 3 COLUMN PAGE LAYOUT 30
- 31. STAGE 2 FUELING THE FIRE Save regularly 31
- 32. STAGE 2 FUELING THE FIRE 0.1 01 0.2 0.3 1.0 Save Versions 32
- 33. STAGE 2 FUELING THE FIRE DESIGN Design Phase CONSIDERATION ADJUSTMENTS FEEDBACK 33
- 34. STAGE 2 FUELING THE FIRE DESIGN Design Phase REFLECT 34
- 35. STAGE 3 FUELING THE FIRE Packaging P k g g & Delivery 35
- 36. STAGE 3 FUELING THE FIRE 144 DPI - PRINT Client .jpgs 36
- 37. STAGE 3 FUELING THE FIRE Build .psd 72 DPI - SCREEN 37
- 38. STAGE 3 FUELING THE FIRE Work with Front End Dev to slice up file p 38
- 39. STAGE 3 FUELING THE FIRE Store .zip 39
- 40. POWER TO FUELING THE FIRE ABOUT VCDTHE PROCESS Why Why use a process? 40
- 41. POWER TO THE PROCESS FUELING THE FIRE Flexibility Fl b l y 41
- 42. POWER TO THE PROCESS FUELING THE FIRE Goal Size 1 2 3 42
- 43. POWER TO THE PROCESS FUELING THE FIRE A B 1 2 Process Size 3 1 5 A 2 4 B 43
- 44. POWER TO THE PROCESS FUELING THE FIRE 5 1 Process Stage % 4 2 3 44
- 45. POWER TO THE PROCESS 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
- 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.
- 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.
- The design process from start to finish can seem like a Marathon.
- Breaking it into smaller stages can help it be more manageable. There are key stages which the designer goes through.
- The first is the Analysis & Research stage. This happens before any visuals are even being considered.
- The first step is to identify the problem and gather as much information as necessary to fully understand it.
- You ask questions and try to get a mental model of the challenge.
- 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.
- Constraints are good. They allow the designer to understand their environment within which the design is to exist.
- After gathering enough information it is time to start laying it out and filtering through it all.
- 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.
- After getting down a good amount of words and relationships the next step is to start identifying the important words.
- The next step is to start grouping those words and seeing what links and patterns there are.
- 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?
- Start thinking of symbols which also relate and support these keywords. What images would help communicate this message?
- 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?
- 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.
- 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.
- This feedback could be presented as a Moodboard. Fuzzy
- Or in a Creative Brief with further detail. Focussed
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- When designing for the web it helps if you have a flexible but robust grid.
- Regardless how long you’ve been in the game one of the best habits to get into is saving regularly.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Because the process is broken into stages you can adjust them depending on what the requirements and goals are.
- 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.
- 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!
- 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.
- 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.
- 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.
- 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.
- Here are a few sites I keep returning too...