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

UI/GUI Design Guide Process Tutorial

on

  • 6,773 views

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

Statistics

Views

Total Views
6,773
Views on SlideShare
5,544
Embed Views
1,229

Actions

Likes
71
Downloads
149
Comments
1

13 Embeds 1,229

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • This is a great tutorial. Great product as well.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Save the designers <br /> <br /> Design Guide Process Tutorial
  • Contents <br /> <br /> - What is Design Guide? <br /> - Working with Developers <br /> - Understanding the Situation <br /> - Understanding Your Job
  • A long way to go <br /> <br /> Design Guide Process <br /> <br /> A Design <br /> An Actual App
  • What is a Design Guide? <br /> A document that delivers ‘every detailed information and intent’ to the developer <br /> Exact Values(Size, Coordinate, Distance), Font Info, Effect Info, Image(Resource) and Design Intent <br /> <br /> GUI Design <br /> <br /> Design Guide Document(Sample)
  • What you might imagine <br /> <br /> A Design <br /> A Design Guide <br /> An App! Ta-Da!!
  • What you might imagine <br /> <br /> A Design <br /> A Design Guide <br /> An App! Ta-Da!! <br /> <br /> Only In Your Dreams 혹은 Impossible
  • What you might imagine <br /> <br /> A Design <br /> A Design Guide <br /> An App! Ta-Da!! <br /> Different information for different developers <br /> Every developer wants information customized to their style. <br /> Every information is different for each situation. <br /> Your valuable time GONE. Rework Inevitable <br /> Everyone starts to fight over who’s fault it is.
  • Suggested Process <br /> <br /> A Design <br /> <br /> Communication <br /> before Guide work <br /> (Drawing Blueprint) <br /> <br /> A Design Guide <br /> <br /> An App! Ta-Da!! <br /> <br /> Communication with a developer is essential <br /> Communication should take place before the Guide Work(Every developer has their style) <br /> Thinking that documenting every little detail would solve the problem is very dangerous(for both designer and developer) <br /> <br />
  • What you need to discuss <br /> <br /> Few Suggested Topics
  • Communicating with a developer(글자 크기?) <br />
  • Coordinate vs Distance <br /> <br /> 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 <br /> <br /> Based on Full Screen <br /> (Absolute Value ) <br /> <br /> Based on Certain Content <br /> (Relative Value) <br />
  • Exporting an Image <br /> <br /> Even it’s a same GUI used for a same interface, images need to be exported differently depending on the developer’s style. <br /> <br /> Ex. When exporting a radio button image <br /> <br /> Style A / Style B
  • - Understanding the Situation <br />
  • Understanding Units <br /> <br /> px, dpi, sp, etc <br /> <br /> Mistake 1: <br /> Thinking that px(pixel)and a pt(point)is a totally different unit <br /> The general resolution settings in Photohop is 72dpi, which can be confusing when differentiating them. <br /> <br /> Mistake 2: <br /> Sp, d[p is a relative unit <br /> You need to know which platform your project is using. <br /> The value of d-p is different in every resolution : ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi … <br /> The value of s-p is different in every resolution : a sp value in hdpi? Or a sp value in xxhdpi? <br /> <br />
  • Absolute Value vs Relative Value 1 <br /> <br /> When you are working on an Android Design, you need to think about the resolution and the ratio all the time. <br /> <br /> Absolute Value X <br /> <br /> Relative Value O <br /> <br />
  • Absolute Value vs Relative Value 2 <br /> <br /> Except for the area where it should never be changed, you need to document the elements with a relative value <br /> so you can cope with different situations in different devices
  • Image vs Code <br /> <br /> If it is a simple monotone element which can be developed by code, it does not need to be exported as an image. <br /> With a simple color code, developers can create the same element more easily. <br /> <br /> Background by Image
  • Which platform and language developers use <br /> <br /> You need to know what kind of language developers are using to figure out how you would export an image. <br /> <br /> Glossy Effect <br /> Mask Effect <br /> Shadow Effect <br /> <br /> 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 <br /> <br /> These days, there aren’t many cases where you have to turn a text into an image file. <br /> Still, you need to document exactly how you want your text to be shown.(Font Name, Size, Color Code and etc) <br /> <br /> Text into an Image <br /> <br /> Text into a Code <br /> <br />
  • Size of a Text Box <br /> <br /> How Photoshop and Development tools render text is totally different. <br /> Very accurate work is needed to find the exact size of the text box. <br /> Most of the time, Transform Box(Ctr-l + T) is considered as a standard value. <br /> <br /> But the problem is, even though the text might be a same font, and same size, <br /> the size of the Transform Box(Ctr-l + T) is always different (CS3, CS4, CS5, CS6, CC and etc) <br /> <br /> Confirming the size of the Transform Box(Ctr-l + T) in Photoshop is only <br /> a way of getting the closest value as possible.(Not 100% Accurate)
  • - Understanding Your Job
  • Foreseeing the whole picture 1 <br /> (Never get stuck in your own little box) <br /> <br /> Ex. Graph design <br /> <br /> Design work done <br /> <br /> What if the graph reaches the top? <br /> Where would numbers go? <br /> (Need to document how it should be done beforehand)
  • Foreseeing the whole picture 1 <br /> (Never get stuck in your own little box) <br /> <br /> Ex. Text & Flag Design <br /> <br /> Design Work Done <br /> <br /> What if the text gets a bit longer? <br /> How will the text be shown? What about the margin on the far right? <br /> (Need to document how it should be done beforehand)
  • Different button design for different states <br /> <br /> You need to get used to designing for every state. <br /> It’s very simple, but easy to forget. <br /> (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 <br /> <br /> 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) <br /> UI design needs to be designed in Groups and arranged in modules just like on the right <br /> Basic knowledge(categories and definitions) of UI design is essential <br /> <br /> <br /> <br />
  • Understanding Blend Mode 1 <br /> <br /> Blend Mode is an effect that literally blends two images. <br /> You need to understand the effect before exporting the image. <br /> <br /> You can see that the color of the button is totally different in an real app <br /> Because of a wrongly exported image. <br />
  • Understanding Blend Mode 2 <br /> <br /> Blend Mode applied in layer <br /> <br /> The moment you cut out the top layer, the color changes as there is no more background layer. <br />
  • Learning Attitude <br /> <br /> As the trend never stops changing, you always need to be ready to learn new things. <br /> <br /> User interface and experience is important, <br /> But the most important thing is to understand the basics of values. <br /> (PX, DPI, SP and etc) <br /> <br /> Websites you might want to have a look <br /> <br /> Dribble : http://dribbble.com/ <br /> Behance : https://www.behance.net/ <br /> iOS Design Guidelines : http://bit.ly/1dvuIv0 <br /> Google Design Guidelines : http://bit.ly/1jBgLfv <br /> wit studio Pinterest : http://www.pinterest.com/witstudio/
  • Design Guide Tool Specially Made for UI Designers
  • Contact <br /> <br /> Company <br /> <br /> Product

UI/GUI Design Guide Process Tutorial UI/GUI Design Guide Process Tutorial Presentation Transcript

  • 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 who’s 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 it’s a same GUI used for a same interface, images need to be exported differently regarding the developer’s 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 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.)
  • 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. It’s 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