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
Text of UI/GUI Design Guide Process Tutorial
Design Guide Process Tutorial wit studio witstudio.net Save the
designers Ver. 1.0
Contents What is a Design Guide? Working with Developers
Understanding the Situation Understanding Your Job
Design Guide A Design An Actual App A long way to go
DesignGuideProcessNeeded
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
Design Guide A Design A Design Guide What you might THINK An
App! Ta-Dah!!
Design Guide A Design A Design Guide In Your Dreams An App!
Ta-Dah!! What you might THINK
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 whos fault it is.
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)
Practical Tips What You Need to Discuss Few Suggested
Topics
Practical Tips Communication with a developer
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.
Practical Tips Absolute Value vs Relative Value Based on Full
Screen (Absolute Value) Based on Certain Content (Relative
Value)
Practical Tips Exporting an Image ex) When exporting a radio
button image. Style A : Style B :or Even its a same GUI used for a
same interface, images need to be exported differently regarding
the developers style.
Practical Tips Understanding the Situation
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?
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
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.
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.
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!
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 arent 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.)
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.
Practical Tips Understanding Your Job
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
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)
Practical Tips Different Button Design for Different States You
need to get used to designing for every state. Its very simple, but
easy to forget. (Decide whether you would cut the image in every
state or make a difference in opacity)
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.
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.
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
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/
For More Information Contact [email protected] Company
http://witstudio.net/en/witstudio http://blog.witstudio.net/
Product http://assistor.net/en/assistor
https://www.facebook.com/assistorAPPitnl
1. witstudio.net [email protected] T : +82 (0)2 508 2146 F
: +82 (0)2 508 2147 Office : Gangnam-gu, Seoul, Korea Contacts