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/

Introducing Assistor PS DesignGuideToolSpeciallyMadeforUIDesigners http://assistor.net/en/assistor

For 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

1. witstudio.net service@witstudio.net T : +82 (0)2 508 2146 F : +82 (0)2 508 2147 Office : Gangnam-gu, Seoul, Korea Contacts

wit studio witstudio.net blog.witstudio.net