Save the designers

If you like this presentation – show it...

Slide 0

Design Guide Process Tutorial ? wit studio witstudio.net Save the designers Ver. 1.0

Slide 1

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

Slide 2

Design Guide A Design An Actual App A long way to go Design Guide Process Needed

Slide 3

Design 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

Slide 4

Design Guide A Design A Design Guide What you might THINK An App! Ta-Dah!!

Slide 5

Design Guide A Design A Design Guide In Your Dreams An App! Ta-Dah!! What you might THINK

Slide 6

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. No!!! What? God, damn it!!!

Slide 7

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)

Slide 8

Practical Tips What You Need to Discuss Few Suggested Topics

Slide 9

Practical Tips Communication with a developer

Slide 10

Practical 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.

Slide 11

Practical Tips Absolute Value vs Relative Value Based on Full Screen (Absolute Value) Based on Certain Content (Relative Value)

Slide 12

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.

Slide 13

Practical Tips Understanding the Situation

Slide 14

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?

Slide 15

Practical 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

Slide 16

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.

Slide 17

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.

Slide 18

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!

Slide 19

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.)

Slide 20

Practical 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.

Slide 21

Practical Tips Understanding Your Job

Slide 22

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

Slide 23

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)

Slide 24

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)

Slide 25

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.

Slide 26

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.

Slide 27

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

Slide 28

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. 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/

Slide 29

Introducing Assistor PS Design Guide Tool Specially Made for UI Designers http://assistor.net/en/assistor

Slide 30

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

Slide 31

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

Slide 32