Tools.
Sketch
Illustrator
Photoshop
Mail
Slack
Keynote
InVision
Pencils
Paper
Post-it Notes
@chris3ailey
Slide 5
Slide 5 text
Learning.
@chris3ailey
@chris3ailey
Slide 6
Slide 6 text
Read
Write
Blog
Tutorials
Newsletters
Mentors
…everyday!
@chris3ailey
How?
How?
Slide 7
Slide 7 text
Process.
@chris3ailey
@chris3ailey
Slide 8
Slide 8 text
The Design Process.
• Who uses it?
• What do they deliver?
• Why is it important?
@chris3ailey
Slide 9
Slide 9 text
Who?
@chris3ailey
@chris3ailey
Slide 10
Slide 10 text
@chris3ailey
Slide 11
Slide 11 text
@chris3ailey
Slide 12
Slide 12 text
@chris3ailey
Slide 13
Slide 13 text
@chris3ailey
Web.
Architecture.
Print.
Slide 14
Slide 14 text
What?
Depending on your design discipline will depend on the deliverables.
@chris3ailey
Slide 15
Slide 15 text
Brief.
@chris3ailey
@chris3ailey
Slide 16
Slide 16 text
Who writes the brief?
@chris3ailey
The client, you or both?
Both.
Don’t have one?
Write one.
Slide 17
Slide 17 text
AARON DRAPLIN. FIELD NOTES.
Slide 18
Slide 18 text
Why is a brief important?
• Project outline
• Protection
• Important tool
@chris3ailey
@chris3ailey
Slide 19
Slide 19 text
@chris3ailey
When? Before
During
After
Slide 20
Slide 20 text
@chris3ailey
Search. Business
Brand
Product / Service
Competitors
Slide 21
Slide 21 text
Meeting.
@chris3ailey
Slide 22
Slide 22 text
@chris3ailey
Ask.
History
Ambitions
Role
Responsibilities
Working practice
Customers
Product / Service
Competitors
Design
Technical Features
Budget
Slide 23
Slide 23 text
@chris3ailey
Actions.
Actions plan
What’s next?
Update brief
Logins
Brand Guidelines
Brand Assets
Deadlines
Set targets
@chris3ailey
Slide 24
Slide 24 text
Mood board.
@chris3ailey
@chris3ailey
Slide 25
Slide 25 text
What is a mood board?
@chris3ailey
An arrangement of images, materials,
pieces of text, etc. intended to evoke or
project a particular style or concept.
@chris3ailey
Elegant
Fashion
Spacious
Clean
Neutral
Simple
Modern
Slide 29
Slide 29 text
Style Tile.
@chris3ailey
@chris3ailey
Slide 30
Slide 30 text
What is a style tile?
@chris3ailey
Style Tiles are a design deliverable
consisting of fonts, colours and
interface elements that communicate
the essence of a visual brand for the
web.
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Wireframes.
@chris3ailey
@chris3ailey
Slide 36
Slide 36 text
What are wireframes?
@chris3ailey
A website wireframe, also known as a
page schematic or screen blueprint, is
a visual guide that represents the
skeletal framework of a website.
Slide 37
Slide 37 text
@chris3ailey
Slide 38
Slide 38 text
Web Designs.
@chris3ailey
@chris3ailey
Slide 39
Slide 39 text
Brief
Research
Mood board
Style Title
Wireframes
@chris3ailey
@chris3ailey
Explore ideas creatively
Explore multiple directions
Impress early
Shows progress
Protection
Gains trust & confidence
Breaks the project up
Sign off each stage
Low risk
Cost effective
Good for business