Getting Started: UI in Web Design

This PDF slides is cover how we approach and make good user interface for designing website and stuffs.
This slides is used when I speaks at Malang Digital Lounge June 29, 2015

Transcript

1. Getting Started UI in Web Design Author: Yuri Pratama ( @yuripertamax )
2. Intro •  My Name is Yuri Pratama •  UI & UX Analyst & Designer •  Front End Engineer •  Back End Developer & Programmer •  Freelancer & Remote Worker
3. Outline •  Definitions •  Web Design Trends •  Workflow •  Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
4. Outline •  Definitions •  Web Design Trends •  Workflow •  Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
5. User Interface •  Space where interactions between humans and machines occur
6. User Interface Design •  Design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing the user experience
7. User Interface in Web Design •  Design of user interfaces for websites / web based application or systems.
8. User Interface Elements •  Design •  Fonts / Typeface / Typography •  Colors •  Layout •  Contents •  etc.
9. Outline •  Definitions •  Web Design Trends •  Workflow •  Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
10. Web Design Trends •  2004 •  2005 •  2006 •  2007 •  2008 •  2009 •  2010 •  2011 •  2012 •  2013 •  2014 •  2015
11. 2004 Trends Cluttered Layout Restrained, Pale Color Schemes All Flash Sites Starburst Effects Pattern & Textures
12. 2005 Trends Horizontal Navigation Subtle Earth Tones Script Fonts XHTML + CSS Layouts
13. 2006 Trends Huge Fonts Neutral Background Colors Reflective Surfaces Badges and Labels Color Gradient Fills
14. 2007 Trends Glossy Interfaces Grid Format Highly Textured Design Swirls and Flourishes Vector Illustrations
15. 2008 Trends Glowing Rainbow Backgrounds Grunge Styles Handmade Elements Vintage and Retro Watercolor
16. 2009 Trends Oversize Everything Radical Transparency Magazine Look One Page Layouts Textured Backgrounds
17. 2010 Trends Minimalism Typography Based Designs Fixed Navbar 3D Environments Infographic Driven Designs
18. 2011 Trends Boards and Grids Full Background Photos Parallax Scrolling Diagonal Designs Ribbon & Stitches
19. 2012 Trends Responsive Web Design Vertical Narratives Skeumorphism Interactivity Circular Design Elements
20. 2013 Trends Flat Design Video Backgrounds Metro Style Fixed Header Mixed Typography
21. 2014 Trends Code Free Design Full Width Pages Clarity and Simplicity Non Standard Nav Blocking
22. 2015 Trends •  Material Design •  Monochromatic Colors •  Microinteractions •  Large Heros Areas
23. Outline •  Definitions •  Web Design Trends •  Workflow •  Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
24. UI Workflow in Web Design •  Requirements •  Analyze •  Prototyping •  + UX / Usability * •  Testing * •  Code * •  Deploy * * not covered now
25. Workflow: Requirements •  Users Needs •  Goal and Target •  Media / Type
26. Workflow: Analysis •  Appeal •  Usage •  Target Audience •  Look and Feel
27. Workflow: Prototyping •  Mockup? •  Prototype? •  Wireframe?
28. Prototyping: Wireframe •  Low fidelity •  Small cost •  Quick Documentation •  Black & White, Gray, Sketchy
29. Prototyping: Prototype •  Middle to High fidelity •  High cost •  For User Testing •  Interactive
30. Prototyping: Mockup •  Middle to High fidelity •  Middle cost •  Gather Feedback •  Static and Full Final Visualization
31. Workflow: UX / Usability •  Users Psychology •  Target •  Behavior •  Many much more
32. Workflow: UI / UX Testing •  A/B Split Testing •  Usability Testing •  Budget Testing •  Etc
33. Workflow: Code •  HTML •  CSS •  Javascript
34. Workflow: Deploy •  Server •  Cloud •  VPS
35. Outline •  Definitions •  Web Design Trends •  Workflow •  Common Paradigms •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
36. Common Paradigms Mistakes •  User Interface & User Experience •  Web/UI Designer & Front End Developer
37. User Interface (UI) •  UI = User Interface •  UI is not UX •  UI is appearance •  Technical aspect •  About user’s interaction •  Part of UX
38. User Experience (UX) •  UX = User Experience •  UX is not UI •  UX is behavior •  Emotional aspect •  About user’s feel
39. UI & UX •  Complementary •  UI + UX = Usability •  UI need UX, vice versa — to reach goal
40. UI & UX : Relationship
41. Web / UI Designer •  Not need to know about code •  Must have knowledge about basic and design concept •  Must know how to make good website design •  Must stay update today's website design trend •  Responsible to make good UI
42. Front End / Web Developer •  Not need to know about basic design concept •  Must know how translating & converting design to code
43. Web UI Designer & Front End Devs •  Communication •  Sometimes it handled by one person
44. Outline •  Definitions •  Web Design Trends •  Workflow •  Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
45. Do’s •  Priority focus •  Choose right colors in the right scheme •  Choose right typeface in the right purpose •  Be simple and cool
46. Don’ts •  Effects overuse •  More than 3 typeface in a page •  Out of color scheme
47. Outline •  Definitions •  Web Design Trends •  Workflow •  Common Paradigm •  Do’s and Don’ts •  Resource and Inspirations •  Software and Tools
48. Resource and Inspirations •  Dribbble, Behance •  Awwwards, Tympanus, Onepagelove, etc. •  Themeforest, Creative Market, etc. •  Smashing Magazine, Speckyboy, etc. •  Google with keywords “web design showcase”
49. Outline •  Definitions •  Web Design Trends •  Workflow •  Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
50. Software and Tools •  Offline •  Online
51. Offline SW&Tools •  Prototype/Wireframe/Mockup Tools •  Code Editor •  Font Management Tools •  Color Tools
52. Offline SW&Tools: Wireframe •  Pencil Evolus •  Balsamiq •  Sketch (OSX)
53. Offline SW&Tools: Prototype/Code •  Sublime Text •  Brackets •  Atom
54. Offline SW&Tools: Mockup •  Adobe Photoshop (Bitmap) •  GIMP (Bitmap) •  Adobe Illustrations (Vector) •  Inkscape (Vector) •  Sketch (OSX)
55. Offline SW&Tools: Font Mgmt •  Suitcase ( Win, OSX ) •  Linotype ( Win, OSX ) •  Opcion ( All )
56. Offline SW&Tools: Color •  Color Schemer •  Color Picker
57. Online SW&Tools •  Wireframe •  Prototype
58. Online SW&Tools: Wireframe •  Gliffy (Atlassian)
59. Online SW&Tools: Prototype •  InVision App •  Marvel App •  Avocode •  Proto.io •  UXPin •  Webflow
60. Online SW&Tools: Color •  Color.adobe.com •  Coolors.co •  Colourlovers.com
61. Reference •  https://en.wikipedia.org/wiki/ User_interface_design •  http://www.slideshare.net/nicolasdemange/ ux-is-not-ui-10294039 •  http://www.cooper.com/prototyping-tools •  http://www.smashingmagazine.com/ 2008/09/05/25-font-management-tools- reviewed/
62. Thanks! Yuri Pratama twitter. @yuripertamax web. http://yuripertamax.me behance. /yuripertamax dribbble. /yuripertamax mail. hello@yuripertamax.me phone. +62 888 551 8 441