What is a Design Guide? (design spec)
It's a better way for designers to co-work with developers.
Assistor official site - http://www.assistor.net/en/assistor
Facebook - https://www.facebook.com/assistorAPPitnl
Twitter - https://twitter.com/Assistor_PS
4. Design Guide
Exact Values(Size, Coordinate, Distance), Font Info, Effect Info, Image Resources and Design Intent
WhatisaDesignGuideDocument?
A Document that delivers ‘every detailed information and intent’ to the developer.
GUI Design
‘Design Guide’ Document
6. Design Guide
A Design A Design Guide
In Your Dreams
An App!
Ta-Dah!!
What you might THINK
7. Design Guide
A Design A Design Guide An App!
Ta-Dah!!
What you might THINK
Different information for different developers.
Information needs to be different for each situation.
All your valuable time gone, Rework Inevitable.
Everyone starts to fight over who’s fault it is.
8. Design Guide
A Design A Design Guide An App
Suggested Process
Communication
before Guide work
Communication with a developer is essential.
Communicate before the Guide Work starts.
Documenting every little detail will not solve the problem.
(for both designer and developer)
11. Practical Tips
Coordinate vs Distance
or
Even you are documenting a same element,
you need to decide whether you are going to use a coordinate or a distance.
12. Practical Tips
Absolute Value vs Relative Value
Based on Full Screen
(Absolute Value)
Based on Certain Content
(Relative Value)
13. Practical Tips
Exporting an Image
ex) When exporting a radio button image.
Style A : Style B :or
Even it’s a same GUI used for a same interface,
images need to be exported differently regarding the developer’s style.
15. Practical Tips
Understanding Units
px, pt, dpi, sp and etc
Mistake 1:
A px(pixel)and a pt(point)is a totally different unit.
The general resolution settings in Photoshop is 72dpi,
which makes it confusing when differentiating them.
Mistake 2:
SP, DP is a relative unit.
You need to know which platform the developer is using.
The value of DP is different in every resolution : ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi..
The value of SP is different in every resolution : SP value in hdpi? or SP value in xxhdpi?
16. Practical Tips
Absolute Value vs Relative Value 1
Screen Screen Screen Screen Screen Screen… …
100 100 100
X
O
When you are working on an Android Design,
you need to think about the resolution and the ratio all the time.
Absolute
Value
Relative
Value
17. Practical Tips
Absolute Value vs Relative Value 2
Galaxy Tab
Galaxy S4
Optimus G
Nexus 4
Except for the area where it should never be changed,
you need to document the elements with a relative value
so you can cope with different situations in different devices.
18. Practical Tips
Image vs Code
Background
by Image
Background
by Code
main_bg.png
#10914d
or
If it is a simple monotone element which can be developed by code,
it does not need to be exported as an image.
With a simple color code, developers can create the same element more easily.
19. Practical Tips
Which Platform and Language Developers Use
Glossy Effect X
Mask Effect O
Shadow Effect O
ex : If a shadow can be expressed by code,
you should not export the shadow as an image. ->
You need to know what kind of language developers are using
to figure out how you would export an image.
Mistake
Means Rework!
20. Practical Tips
How Text will be Shown
Text into an Image Text into a Code
txt_ex.png
GothamRounded Book
28 PT
#22AF5D
or
These days, there aren’t many cases where you have to turn a text into an image file.
Still, you need to document exactly how you want your text to be shown.
(Font Name, Size, Color Code and etc.)
21. Practical Tips
Size of a Text Box
(Ctrl+Tisnottheanswer)
How Photoshop and Development tools render text is totally different.
Very accurate work is needed to find the exact size of the text box.
Most of the time, Transform Box(Ctrl + T) is considered as a standard value.
But the problem is, even though the text might be a same font, and same size,
the size of the Transform Box is always different.(CS3, CS4, CS5, CS6, CC and etc.)
Confirming the size of the Transform Box in Photoshop is only
a way of getting the closest value as possible.
23. Practical Tips
Looking at the Whole Picture 1
(Never get stuck in your own little box)
ex) Graph design
A Finished Design What if the graph reaches the top?
Where would the numbers go?
(Document how everything would be done)
State
change
24. Practical Tips
Looking at the Whole Picture 2
(Never get stuck in your own little box)
ex) Text & Flag Design
State
change
A Finished Design What if the text gets a bit longer?
How will the text be shown?
(Need to document how it would be done)
25. Practical Tips
Different Button Design for Different States
You need to get used to designing for every state.
It’s very simple, but easy to forget.
(Decide whether you would cut the image in every state or make a difference in opacity)
26. Practical Tips
Always Design Elements in Groups
Designing without arranging the layers is very risky.(Hard to edit and manage)
UI design needs to be designed in Groups and arranged in modules just like on the right.
Basic knowledge(categories and definitions) of UI design is always essential.
27. Practical Tips
Understanding Blend Mode 1
Blend Mode is an effect that literally blends two images.
You need to understand the effect before exporting the image.
You can see that the color of the button is totally different in an real app,
all because of a wrongly exported image.
28. Practical Tips
Understanding Blend Mode 2
The moment you cut out
the top layer, the color
changes as there is no
more background layer.
Blend Mode applied in layer
29. Practical Tips
Learning Attitude
As the trend never stops changing, you always need to be ready to learn new things.
UI and UX is both very important,
but the most important thing is to understand the basics of units.
(px, dpi, sp and etc.)
You need to make an effort to design logically.
WebsitesforUIDesigners
Dribble : http://dribbble.com/
Behance : https://www.behance.net/
Android Design : Android Developers > Design Principles
iOS Design : iOS Human Interface Guidelines > Designing for iOS 7
wit studio Pinterest : http://www.pinterest.com/witstudio/
Contents
- What is Design Guide?
- Working with Developers
- Understanding the Situation
- Understanding Your Job
A long way to go
Design Guide Process
A Design
An Actual App
What is a Design Guide?
A document that delivers ‘every detailed information and intent’ to the developer
Exact Values(Size, Coordinate, Distance), Font Info, Effect Info, Image(Resource) and Design Intent
GUI Design
Design Guide Document(Sample)
What you might imagine
A Design
A Design Guide
An App! Ta-Da!!
What you might imagine
A Design
A Design Guide
An App! Ta-Da!!
Only In Your Dreams 혹은 Impossible
What you might imagine
A Design
A Design Guide
An App! Ta-Da!!
Different information for different developers
Every developer wants information customized to their style.
Every information is different for each situation.
Your valuable time GONE. Rework Inevitable
Everyone starts to fight over who’s fault it is.
Suggested Process
A Design
Communication
before Guide work
(Drawing Blueprint)
A Design Guide
An App! Ta-Da!!
Communication with a developer is essential
Communication should take place before the Guide Work(Every developer has their style)
Thinking that documenting every little detail would solve the problem is very dangerous(for both designer and developer)
What you need to discuss
Few Suggested Topics
Communicating with a developer(글자 크기?)
Coordinate vs Distance
Even you are documenting a same element, you need to decide whether you are going to use a coordinate or a distance
Absolute Value vs Relative Value
Based on Full Screen
(Absolute Value )
Based on Certain Content
(Relative Value)
Exporting an Image
Even it’s a same GUI used for a same interface, images need to be exported differently depending on the developer’s style.
Ex. When exporting a radio button image
Style A / Style B
- Understanding the Situation
Understanding Units
px, dpi, sp, etc
Mistake 1:
Thinking that px(pixel)and a pt(point)is a totally different unit
The general resolution settings in Photohop is 72dpi, which can be confusing when differentiating them.
Mistake 2:
Sp, d[p is a relative unit
You need to know which platform your project is using.
The value of d-p is different in every resolution : ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi …
The value of s-p is different in every resolution : a sp value in hdpi? Or a sp value in xxhdpi?
Absolute Value vs Relative Value 1
When you are working on an Android Design, you need to think about the resolution and the ratio all the time.
Absolute Value X
Relative Value O
Absolute Value vs Relative Value 2
Except for the area where it should never be changed, you need to document the elements with a relative value
so you can cope with different situations in different devices
Image vs Code
If it is a simple monotone element which can be developed by code, it does not need to be exported as an image.
With a simple color code, developers can create the same element more easily.
Background by Image
Which platform and language developers use
You need to know what kind of language developers are using to figure out how you would export an image.
Glossy Effect
Mask Effect
Shadow Effect
Ex: If a shadow can be expressed by code, you should not export the shadow with the image - > Rework needed
How text will be shown
These days, there aren’t many cases where you have to turn a text into an image file.
Still, you need to document exactly how you want your text to be shown.(Font Name, Size, Color Code and etc)
Text into an Image
Text into a Code
Size of a Text Box
How Photoshop and Development tools render text is totally different.
Very accurate work is needed to find the exact size of the text box.
Most of the time, Transform Box(Ctr-l + T) is considered as a standard value.
But the problem is, even though the text might be a same font, and same size,
the size of the Transform Box(Ctr-l + T) is always different (CS3, CS4, CS5, CS6, CC and etc)
Confirming the size of the Transform Box(Ctr-l + T) in Photoshop is only
a way of getting the closest value as possible.(Not 100% Accurate)
- Understanding Your Job
Foreseeing the whole picture 1
(Never get stuck in your own little box)
Ex. Graph design
Design work done
What if the graph reaches the top?
Where would numbers go?
(Need to document how it should be done beforehand)
Foreseeing the whole picture 1
(Never get stuck in your own little box)
Ex. Text & Flag Design
Design Work Done
What if the text gets a bit longer?
How will the text be shown? What about the margin on the far right?
(Need to document how it should be done beforehand)
Different button design for different states
You need to get used to designing for every state.
It’s very simple, but easy to forget.
(You can also decide whether you would cut the image in every state or just make a difference in opacity)
Always design elements in Groups
Very risky if you are drawing a UI design like you are painting a canvas such as on the left(Hard to edit and manage)
UI design needs to be designed in Groups and arranged in modules just like on the right
Basic knowledge(categories and definitions) of UI design is essential
Understanding Blend Mode 1
Blend Mode is an effect that literally blends two images.
You need to understand the effect before exporting the image.
You can see that the color of the button is totally different in an real app
Because of a wrongly exported image.
Understanding Blend Mode 2
Blend Mode applied in layer
The moment you cut out the top layer, the color changes as there is no more background layer.
Learning Attitude
As the trend never stops changing, you always need to be ready to learn new things.
User interface and experience is important,
But the most important thing is to understand the basics of values.
(PX, DPI, SP and etc)
Websites you might want to have a look
Dribble : http://dribbble.com/
Behance : https://www.behance.net/
iOS Design Guidelines : http://bit.ly/1dvuIv0
Google Design Guidelines : http://bit.ly/1jBgLfv
wit studio Pinterest : http://www.pinterest.com/witstudio/