Save the designers презентация

Содержание

Contents What is a Design Guide? Working with Developers Understanding the Situation Understanding Your Job

Слайд 1Design Guide Process Tutorial
ⓒ wit studio
witstudio.net
Save the designers
Ver. 1.0

Слайд 2Contents
What is a Design Guide?
Working with Developers
Understanding the Situation
Understanding Your Job

Слайд 3Design Guide
A Design
An Actual App

A long way to go
Design Guide Process

Needed

Слайд 4Design Guide
Exact Values(Size, Coordinate, Distance), Font Info, Effect Info, Image Resources

and Design Intent

What is a Design Guide Document?

A Document that delivers ‘every detailed information and intent’ to the developer.

GUI Design

‘Design Guide’ Document

Слайд 5Design Guide
A Design
A Design Guide
What you might THINK
An App!
Ta-Dah!!

Слайд 6Design Guide
A Design
A Design Guide
In Your Dreams
An App!
Ta-Dah!!
What you might THINK

Слайд 7Design 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.

No!!!

What?

God, damn it!!!

Слайд 8Design 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)

Слайд 9Practical Tips
What You Need to Discuss
Few Suggested Topics

Слайд 10Practical Tips
Communication
with a developer

Слайд 11Practical Tips
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.

Слайд 12Practical 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.
or

Even it’s

a same GUI used for a same interface,
images need to be exported differently regarding the developer’s style.

Слайд 14Practical Tips
Understanding
the Situation

Слайд 15Practical 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?

Слайд 16Practical Tips
Absolute Value vs Relative Value 1

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

Слайд 17Practical 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.

Слайд 18Practical 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.

Слайд 19Practical 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!

Слайд 20Practical 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.)

Слайд 21Practical Tips
Size of a Text Box
(Ctrl + T is not the

answer)

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.

Слайд 22Practical Tips
Understanding
Your Job

Слайд 23Practical 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

Слайд 24Practical 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)

Слайд 25Practical 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)


Слайд 26Practical 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.

Слайд 27Practical 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

Слайд 29Practical 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.

Websites for UI Designers

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/

Слайд 30Introducing Assistor PS
Design Guide Tool Specially Made for UI Designers
http://assistor.net/en/assistor

Слайд 31For More Information
Contact
service@witstudio.net

Company
http://witstudio.net/en/witstudio
http://blog.witstudio.net/

Product
http://assistor.net/en/assistor
https://www.facebook.com/assistorAPPitnl

Слайд 321. 제안 내용
witstudio.net
service@witstudio.net

T : +82 (0)2 508 2146
F : +82 (0)2

508 2147
Office : Gangnam-gu, Seoul, Korea

Contacts

Похожие презентации

АРХИТЕКТУРА. СТРОИТЕЛЬСТВО. ДИЗАЙН 424
МОУ Начальная школа – детский сад № 5 Ёлочка 283
Магистерская программа Государственное и муниципальное управление 300
Экономические и финансовые основы управления современной школой 325
Презентация влажных салфеток Happiness 403
Годовой отчет За 2012 г. 246

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика