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.
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
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
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
Notas do Editor
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.