UI/GUI Design Guide Process Tutorial
•Télécharger en tant que PPTX, PDF•
75 j'aime•14,100 vues
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
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (19)
En vedette
En vedette (20)
Similaire à UI/GUI Design Guide Process Tutorial
Similaire à UI/GUI Design Guide Process Tutorial (20)
Dernier
Dernier (20)
UI/GUI Design Guide Process Tutorial
- 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.
- 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.
- 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
- 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
Notes de l'éditeur
- 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