Main steps:
- Meet
- Introduction
- Questions
- Money
- Explore
- Research
- Brain-words
- Mood-board
- User stories
- Map & structure
- Doodle
- Breather
- Sketches & wireframes
- Direction
- Design
- Scale
- Typography
- Color palette
- Identity
- Elements
- Guidelines
- Style tiles
- Iteration
- Produce
- Graphics
- Code
- Pattern library
- Interactions
- Adjust
Find out what is the intended outcome and restrictions of the project. Get a good feel of what they want. The more you get to know, the closer the end result will be to the client's needs.
Be cautious. Take notes. Don't make physical barriers. Understand.
The basic ones:
- Who are you and what do you do?
- Who is your main competition?
- How do you want to be perceived by customers (word associations)?
- Who's your ideal customer?
- Do you need a symbol, or are you recognisable by name?
- Where will the logo be used?
- Is there a unique story behind you or visuals associated with you?
- What is your current identity and/or website?
- Do you have an existing content?
These are all not necessarily questions for client -- some of them you should ask yourself.
This is the moment you need to calculate how much should the project cost.
There are some things you should take into account:
- your hourly rate (not neccessarily for charging per hour)
- the cost of upkeep (you buy fonts, software, hardware, pencils, paper, white tea, vegan pizza, etc.)
- underpricing yourself (you are too shy and too modest, this would be a percent value)
- how much different ideas/subjects you need to produce (how much logo examples, how much illustrations)
- how many free rounds of adjustments are there
- how much time (in hours) would it take for main project steps to take
Then it could be something like this:
var rate = 40;
var upkeep = 100;
var underpricing = 1.1;
var ideas = 3;
var rounds = 3;
var meet = 1;
var explore = 2;
var doodle = 4;
var design = 12;
var produce = 1;
var adjust = 2;
var finalPrice = Math.ceil(underpricing * (upkeep + rate * (meet + explore + (doodle * ideas) + design + produce + (adjust * rounds))));Organize all your brief data, outline the key words and fill out the blanks. Analyze all new information.
There is a great chance that internet has some information on the subject. Or the subject itself is on the internet. You should also check out the competition and their visual language. Research the subject.
Write down all the emotionally important words and then go with the flow with them -- it is best to get to the third level of associations.
Get yourself some visual inspirations for the project, regardless of its type. Search for some old engravings or woodcuts, interesting photos and shapes. Take some photos yourself of things in world and your notes/doodles. Finish up your mood board: take all the most important images and glue them together to see and create relationships.
They are rather optional for a small projects, but writing them for complex systems could be very helpful in understanding the project and noting down all the functionalities that needs to be designed.
As a ROLE, I want GOAL
As a ROLE, I want GOAL so that BENEFIT
Create a box-diagram describing all elements of your project with their meta data and the relationships between them. Use page tables to describe what every page is about and what elements it should include. Order every element and information by priority.
Now you should have the basic outlines of a HTML page.
Start with heavy drawing, make some drafts and wireframes for the initial client's feedback. Never get fooled by thinking your first ideas are your best.
You absolutely need some relaxed-mind thinking about the project -- while taking a shower or a short walk, on the bus or while you eat your breakfast. Just take a break from everything, do some physical activity, and the wisdom will fall upon you.
Work out from the research, map and structure of the project. It is best to just use the pencil and paper and lock yourself out of the world for one hour (with stopwatch). Draw even if you don't have any ideas yet, let your hand do the thinking. Try to avoid trivial and over-used concepts. Explore your ideas and have fun with it. Don't get attached to them, as they will most likely change.
You should make a few there-and-back-agains to the doodling, allowing your mind to digest what you have done already and come up with some new ideas.
Sketch out The Initial Drafts for the client.
Create mockups and prototypes that will be, or will be transformed into, the final product.
Unify the design with chosen scale, so nothing gets out of place. Use golden ratio 1:1.618 or something cool like 1:2. The Modular Scale by Tim Brown is a great tool for that.
If your project is a website it will most of the time consists primarily of text, so choose good typeface. It is best to have a solid package of tested families. As for the logos, remember that you can modify the typeface slightly or create all the letters by hand and eye.
Use some given or important colours as primary and add emotionally responsive as secondary. Mix and match with the help of colour wheel. Create up to 4 different shades or tints. Then check whole palette with colour blindness filters, and optimize it, so that it will be perceivable to the greatest number of individuals. You are ready to go.
Use your software of choice and create first logo steps in pure black. Refine the idea with maths and style and slowly start polishing it up. Flipping the design left-right and up-down will help you get the visual balance and should be unconsciously a part of your workflow.
It is optional, but helps standardize stationary, signage and other elements of brand identity.
Brand guidelines book is always a nice thing. But create one only if necessary (money). It probably should contain:
- meaning behind the design
- main logo version
- secondary/alternative logo versions
- logo construction
- spacing
- color usage
- typography
- layout and grids
- printing on colour backgrounds
- reproduction / incorrect usage
Using style tiles allows you to quickly iterate over chosen selections and not waste too much time. Also, in the case of mistakes, you don't have to change perfectly crafted mockup.
In your style tiles it would be nice to include:
- font chosen
- colour palette
- headline
- subheadline
- paragraph with bold, em and link
- patterns
- photography style or filter
Optionally, ideally and more-priceally have these also:
- navigation menu
- mobile navigation menu
- other subheadlines
- ordered and unordered list
- blockquote
- horizontal rule
- table
- form inputs with errors
- button
- icons
- popup message
There is no way you are going to hit the mark on the first time. The feedback will come and the refinement will start. Be prepared for this and include a few but's in the initial contract.
Be sure to have all your design approved by client at this point.
Cut out only the stuff that can't be replicated using CSS or icon fonts. Create all necessary variations of the identification elements.
Start with the pure HTML to get the style-independent content. Then define some SCSS variables and create the basic typography setup.
Build a single page that consists of all the components -- based on Style Tiles and finally accepted mockup -- it enforces the consistency, helps to spot the repeating patterns in the code (DRY), establishes all the names and allows for easier component creating in the future.
Add future-friendly interactions to your website, remembering that the user should get a good experience, even if the fancy stuff doesn't work.
The client and some people should play around to find out if there are any bugs or problems. You will fix them obviously. Any stuff that is additional and beyond the initial agreement expands the contract. Good planning should save everybody from spending any unnecessary time here.