UI/GUI Design Guide Process Tutorial
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

UI/GUI Design Guide Process Tutorial

  • 7,397 views
Uploaded on

What is a Design Guide? (design spec) ...

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

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • This is a great tutorial. Great product as well.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,397
On Slideshare
6,142
From Embeds
1,255
Number of Embeds
14

Actions

Shares
Downloads
164
Comments
1
Likes
74

Embeds 1,255

http://www.designersfav.com 643
http://uiuxvn.tumblr.com 184
https://assets.txmblr.com 173
https://twitter.com 147
http://cubicwater.com 40
http://ux.cubicwater.com 37
http://uiux.cubicwater.com 18
https://tempos21.bluekiwi.net 5
http://yandex.ru 2
http://search.yahoo.com 2
http://www.slideee.com 1
https://tweetdeck.twitter.com 1
http://www.tumblr.com 1
http://ssbrazurespace.azurewebsites.net 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Save the designers

    Design Guide Process Tutorial
  • Contents

    - What is Design Guide?
    - Working with Developers
    - Understanding the Situation
    - Understanding Your Job
  • A long way to go

    Design Guide Process

    A Design
    An Actual App
  • What is a Design Guide?
    A document that delivers ‘every detailed information and intent’ to the developer
    Exact Values(Size, Coordinate, Distance), Font Info, Effect Info, Image(Resource) and Design Intent

    GUI Design

    Design Guide Document(Sample)
  • What you might imagine

    A Design
    A Design Guide
    An App! Ta-Da!!
  • What you might imagine

    A Design
    A Design Guide
    An App! Ta-Da!!

    Only In Your Dreams 혹은 Impossible
  • What you might imagine

    A Design
    A Design Guide
    An App! Ta-Da!!
    Different information for different developers
    Every developer wants information customized to their style.
    Every information is different for each situation.
    Your valuable time GONE. Rework Inevitable
    Everyone starts to fight over who’s fault it is.
  • Suggested Process

    A Design

    Communication
    before Guide work
    (Drawing Blueprint)

    A Design Guide

    An App! Ta-Da!!

    Communication with a developer is essential
    Communication should take place before the Guide Work(Every developer has their style)
    Thinking that documenting every little detail would solve the problem is very dangerous(for both designer and developer)

  • What you need to discuss

    Few Suggested Topics
  • Communicating with a developer(글자 크기?)
  • 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
  • Absolute Value vs Relative Value

    Based on Full Screen
    (Absolute Value )

    Based on Certain Content
    (Relative Value)
  • Exporting an Image

    Even it’s a same GUI used for a same interface, images need to be exported differently depending on the developer’s style.

    Ex. When exporting a radio button image

    Style A / Style B
  • - Understanding the Situation
  • Understanding Units

    px, dpi, sp, etc

    Mistake 1:
    Thinking that px(pixel)and a pt(point)is a totally different unit
    The general resolution settings in Photohop is 72dpi, which can be confusing when differentiating them.

    Mistake 2:
    Sp, d[p is a relative unit
    You need to know which platform your project is using.
    The value of d-p is different in every resolution : ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi …
    The value of s-p is different in every resolution : a sp value in hdpi? Or a sp value in xxhdpi?

  • Absolute Value vs Relative Value 1

    When you are working on an Android Design, you need to think about the resolution and the ratio all the time.

    Absolute Value X

    Relative Value O

  • Absolute Value vs Relative Value 2

    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
  • Image vs Code

    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.

    Background by Image
  • Which platform and language developers use

    You need to know what kind of language developers are using to figure out how you would export an image.

    Glossy Effect
    Mask Effect
    Shadow Effect

    Ex: If a shadow can be expressed by code, you should not export the shadow with the image - > Rework needed
  • How text will be shown

    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)

    Text into an Image

    Text into a Code

  • Size of a Text Box

    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(Ctr-l + 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(Ctr-l + T) is always different (CS3, CS4, CS5, CS6, CC and etc)

    Confirming the size of the Transform Box(Ctr-l + T) in Photoshop is only
    a way of getting the closest value as possible.(Not 100% Accurate)
  • - Understanding Your Job
  • Foreseeing the whole picture 1
    (Never get stuck in your own little box)

    Ex. Graph design

    Design work done

    What if the graph reaches the top?
    Where would numbers go?
    (Need to document how it should be done beforehand)
  • Foreseeing the whole picture 1
    (Never get stuck in your own little box)

    Ex. Text & Flag Design

    Design Work Done

    What if the text gets a bit longer?
    How will the text be shown? What about the margin on the far right?
    (Need to document how it should be done beforehand)
  • Different button design for different states

    You need to get used to designing for every state.
    It’s very simple, but easy to forget.
    (You can also decide whether you would cut the image in every state or just make a difference in opacity)
  • Always design elements in Groups

    Very risky if you are drawing a UI design like you are painting a canvas such as on the left(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 essential



  • 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
    Because of a wrongly exported image.
  • Understanding Blend Mode 2

    Blend Mode applied in layer

    The moment you cut out the top layer, the color changes as there is no more background layer.
  • Learning Attitude

    As the trend never stops changing, you always need to be ready to learn new things.

    User interface and experience is important,
    But the most important thing is to understand the basics of values.
    (PX, DPI, SP and etc)

    Websites you might want to have a look

    Dribble : http://dribbble.com/
    Behance : https://www.behance.net/
    iOS Design Guidelines : http://bit.ly/1dvuIv0
    Google Design Guidelines : http://bit.ly/1jBgLfv
    wit studio Pinterest : http://www.pinterest.com/witstudio/
  • Design Guide Tool Specially Made for UI Designers
  • Contact

    Company

    Product

Transcript

  • 1. Design Guide Process Tutorial ⓒ wit studio witstudio.net Save the designers Ver. 1.0
  • 2. Contents • What is a Design Guide? • Working with Developers • Understanding the Situation • Understanding Your Job
  • 3. Design Guide A Design An Actual App A long way to go DesignGuideProcessNeeded
  • 4. 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
  • 5. Design Guide A Design A Design Guide What you might THINK An App! Ta-Dah!!
  • 6. Design Guide A Design A Design Guide In Your Dreams An App! Ta-Dah!! What you might THINK
  • 7. 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.
  • 8. 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)
  • 9. Practical Tips What You Need to Discuss Few Suggested Topics
  • 10. Practical Tips Communication with a developer
  • 11. 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.
  • 12. Practical 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. 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.
  • 14. Practical Tips Understanding the Situation
  • 15. 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?
  • 16. 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
  • 17. 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.
  • 18. 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.
  • 19. 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!
  • 20. 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.)
  • 21. 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.
  • 22. Practical Tips Understanding Your Job
  • 23. 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
  • 24. 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)
  • 25. 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)
  • 26. 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.
  • 27. 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.
  • 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
  • 29. 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/
  • 30. Introducing Assistor PS DesignGuideToolSpeciallyMadeforUIDesigners http://assistor.net/en/assistor
  • 31. 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
  • 32. 1. 제안 내용 witstudio.net service@witstudio.net T : +82 (0)2 508 2146 F : +82 (0)2 508 2147 Office : Gangnam-gu, Seoul, Korea Contacts
  • 33. ⓒ wit studio witstudio.net blog.witstudio.net