Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Started: UI in Web Design

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

Yuri Pratama

June 29, 2015
Tweet

More Decks by Yuri Pratama

Other Decks in Design

Transcript

  1. Intro •  My Name is Yuri Pratama •  UI &

    UX Analyst & Designer •  Front End Engineer •  Back End Developer & Programmer •  Freelancer & Remote Worker
  2. Outline •  Definitions •  Web Design Trends •  Workflow • 

    Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
  3. Outline •  Definitions •  Web Design Trends •  Workflow • 

    Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
  4. 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
  5. User Interface in Web Design •  Design of user interfaces

    for websites / web based application or systems.
  6. User Interface Elements •  Design •  Fonts / Typeface /

    Typography •  Colors •  Layout •  Contents •  etc.
  7. Outline •  Definitions •  Web Design Trends •  Workflow • 

    Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
  8. Web Design Trends •  2004 •  2005 •  2006 • 

    2007 •  2008 •  2009 •  2010 •  2011 •  2012 •  2013 •  2014 •  2015
  9. 2004 Trends Cluttered Layout Restrained, Pale Color Schemes All Flash

    Sites Starburst Effects Pattern & Textures
  10. 2014 Trends Code Free Design Full Width Pages Clarity and

    Simplicity Non Standard Nav Blocking
  11. Outline •  Definitions •  Web Design Trends •  Workflow • 

    Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
  12. UI Workflow in Web Design •  Requirements •  Analyze • 

    Prototyping •  + UX / Usability * •  Testing * •  Code * •  Deploy * * not covered now
  13. Prototyping: Wireframe •  Low fidelity •  Small cost •  Quick

    Documentation •  Black & White, Gray, Sketchy
  14. Prototyping: Mockup •  Middle to High fidelity •  Middle cost

    •  Gather Feedback •  Static and Full Final Visualization
  15. Workflow: UI / UX Testing •  A/B Split Testing • 

    Usability Testing •  Budget Testing •  Etc
  16. Outline •  Definitions •  Web Design Trends •  Workflow • 

    Common Paradigms •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
  17. User Interface (UI) •  UI = User Interface •  UI

    is not UX •  UI is appearance •  Technical aspect •  About user’s interaction •  Part of UX
  18. User Experience (UX) •  UX = User Experience •  UX

    is not UI •  UX is behavior •  Emotional aspect •  About user’s feel
  19. UI & UX •  Complementary •  UI + UX =

    Usability •  UI need UX, vice versa — to reach goal
  20. 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
  21. Front End / Web Developer •  Not need to know

    about basic design concept •  Must know how translating & converting design to code
  22. Outline •  Definitions •  Web Design Trends •  Workflow • 

    Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
  23. Do’s •  Priority focus •  Choose right colors in the

    right scheme •  Choose right typeface in the right purpose •  Be simple and cool
  24. Outline •  Definitions •  Web Design Trends •  Workflow • 

    Common Paradigm •  Do’s and Don’ts •  Resource and Inspirations •  Software and Tools
  25. Resource and Inspirations •  Dribbble, Behance •  Awwwards, Tympanus, Onepagelove,

    etc. •  Themeforest, Creative Market, etc. •  Smashing Magazine, Speckyboy, etc. •  Google with keywords “web design showcase”
  26. Outline •  Definitions •  Web Design Trends •  Workflow • 

    Common Paradigm •  Do’s and Don’ts •  Resources and Inspirations •  Software and Tools
  27. Offline SW&Tools: Mockup •  Adobe Photoshop (Bitmap) •  GIMP (Bitmap)

    •  Adobe Illustrations (Vector) •  Inkscape (Vector) •  Sketch (OSX)
  28. Offline SW&Tools: Font Mgmt •  Suitcase ( Win, OSX )

    •  Linotype ( Win, OSX ) •  Opcion ( All )
  29. Online SW&Tools: Prototype •  InVision App •  Marvel App • 

    Avocode •  Proto.io •  UXPin •  Webflow