ui/gui design guide process tutorial

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

Upload: witstudio

Post on 11-Aug-2014

6.633 views

Category:

Design


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: UI/GUI Design Guide Process Tutorial

Design Guide Process Tutorial

ⓒ wit studiowitstudio.net

Save the designers

Ver. 1.0

Page 2: UI/GUI Design Guide Process Tutorial

Contents

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

Page 3: UI/GUI Design Guide Process Tutorial

Design Guide

A DesignAn Actual

App

A long way to go

Design Guide Process Needed

Page 4: UI/GUI Design Guide Process Tutorial

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

Page 5: UI/GUI Design Guide Process Tutorial

Design Guide

A Design A Design Guide

What you might THINK

An App!Ta-Dah!!

Page 6: UI/GUI Design Guide Process Tutorial

Design Guide

A Design A Design Guide

In Your Dreams

An App!Ta-Dah!!

What you might THINK

Page 7: UI/GUI Design Guide Process Tutorial

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!!!

Page 8: UI/GUI Design Guide Process Tutorial

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)

Page 9: UI/GUI Design Guide Process Tutorial

Practical Tips

What You Need to DiscussFew Suggested Topics

Page 10: UI/GUI Design Guide Process Tutorial

Practical Tips

Communication with a developer

Page 11: UI/GUI Design Guide Process Tutorial

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.

Page 12: UI/GUI Design Guide Process Tutorial

Practical Tips

Absolute Value vs Relative ValueBased on Full Screen(Absolute Value)

Based on Certain Content(Relative Value)

Page 13: UI/GUI Design Guide Process Tutorial

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.

Page 14: UI/GUI Design Guide Process Tutorial

Practical Tips

Understanding the Situation

Page 15: UI/GUI Design Guide Process Tutorial

Practical Tips

Understanding Unitspx, 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?

Page 16: UI/GUI Design Guide Process Tutorial

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

Page 17: UI/GUI Design Guide Process Tutorial

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.

Page 18: UI/GUI Design Guide Process Tutorial

Practical Tips

Image vs Code

Background by Image

Backgroundby Code

main_bg.png

#10914dor

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.

Page 19: UI/GUI Design Guide Process Tutorial

Practical Tips

Which Platform and Language Developers Use

Glossy Effect XMask Effect OShadow Ef -fect 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.

MistakeMeans Rework!

Page 20: UI/GUI Design Guide Process Tutorial

Practical Tips

How Text will be Shown

Text into an Image Text into a Code

txt_ex.png

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

Page 21: UI/GUI Design Guide Process Tutorial

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.

Page 22: UI/GUI Design Guide Process Tutorial

Practical Tips

Understanding Your Job

Page 23: UI/GUI Design Guide Process Tutorial

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)

Statechange

Page 24: UI/GUI Design Guide Process Tutorial

Practical Tips

Looking at the Whole Picture 2(Never get stuck in your own little box)

ex) Text & Flag Design

Statechange

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)

Page 25: UI/GUI Design Guide Process Tutorial

Practical Tips

Different Button Design for Different StatesYou 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)

Page 26: UI/GUI Design Guide Process Tutorial

Practical Tips

Always Design Elements in GroupsDesigning 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.

Page 27: UI/GUI Design Guide Process Tutorial

Practical Tips

Understanding Blend Mode 1Blend 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.

Page 28: UI/GUI Design Guide Process Tutorial

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

Page 29: UI/GUI Design Guide Process Tutorial

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 PrinciplesiOS Design : iOS Human Interface Guidelines > Designing for iOS 7

wit studio Pinterest : http://www.pinterest.com/witstudio/

Page 30: UI/GUI Design Guide Process Tutorial

Introducing Assistor PS

Design Guide Tool Specially Made for UI Designershttp://assistor.net/en/assistor

Page 32: UI/GUI Design Guide Process Tutorial

1. 제안 내용

[email protected]

T : +82 (0)2 508 2146F : +82 (0)2 508 2147 Office : Gangnam-gu, Seoul, Korea

Contacts

Page 33: UI/GUI Design Guide Process Tutorial

ⓒ wit studiowitstudio.netblog.witstudio.net