HICapacity UI talk by Kathryne Sakata

7,117 views

Published on

HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design.

These steps may seem tedious, but as you dive into the design or even the development stage, you’ll quickly find out that this process will help to diminish problems that could occur down the road.

These are the UI slides

About Kathryne Sakata
====
Kat received her graphic design degree from the New Media Arts Interface Design Program at Kapiolani Community College. She is currently a Graphic Designer and Web Developer at Design Asylum, Inc. and the Lead UI Designer at Undefeated Games, Inc. Kat enjoys engaging with new people and sharing her enthusiasm for design. She is an active member of AIGA Honolulu, HI-Capacity and Alakai Young Professionals and participates in various events including Startup Weekend, HNL New Tech Meetup, and WetWare Weds.

Event info: http://www.hicapacity.org/2013/05/23/ui-ux/

Published in: Design, Technology

HICapacity UI talk by Kathryne Sakata

  1. 1. UI & UXIndustry Practiceskat sakata + @katroppitiffany higa + @thinktifferent
  2. 2. Ui (user interface)DEFINED AS:The design of computers, appliances, machines, mobile communication,software applications and websitesthe big idea:Not necessarily to make things as simple as possible, to make them asobvious as possible• Provide a user-friendly experience• Complete Goals, EfficientRESULT:Reduction in training, costs, happier, satisfied and highly engaged users!
  3. 3. “Don’t make me think.”– Steve Krug, Usability Expert
  4. 4. the processfoundation is key!
  5. 5. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  6. 6. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  7. 7. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  8. 8. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  9. 9. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  10. 10. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  11. 11. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  12. 12. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  13. 13. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  14. 14. The clientPrimary Objective & goal:Any sort of information or description you can find out• What will users be doing? • What is the need?• Likes and dislikes • CMS, RWD, Cart...?Target Audience (Know thy user):Young, old, male, female, mom, dad, social workers, students, etc...Competitors:Who has done it and is it working?• What the client say they needs vs what they really needresult: Defined goal & making sure that all interests are understood
  15. 15. “Obsess over customers...Start with customers &work backward.”– Jeff Bezos, Founder & CEO of Amazon
  16. 16. site promoting app for kidsThe cLient – Kapu, The digital toy box
  17. 17. portfolio websitethe client – DF
  18. 18. shopping cartthe client – Lazy made
  19. 19. rwdthe client – food sense (youner audience)
  20. 20. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  21. 21. the sitemapDefined as:To organize the structure and layout of the websitePurpose:• Lists all the pages• To create reference materials for client signoff• Knowing what you’re getting yourself into!• Speak the user’s language
  22. 22. “If you think every pixel, every icon,every typeface matters, then you alsoneed to believe every letter matters. ”– Getting Real by 37 Signals
  23. 23. New yorkarizonaSFhawaiiIntwfbmissionthe teaminterests specialtyceodesignerdirectordeveloperprintwebidentityposterstationerypackagingHomefooterproductsservicesaboutconsultbuildthe designtrainingmaintenancesalearchivednewgallery contact32 pages
  24. 24. New yorkarizonaSFhawaiiIntwfbmissionthe teaminterests specialtyceodesignerdirectordeveloperprintwebidentityposterstationerypackagingHomefooterproductsservicesaboutconsultbuildthe designtrainingmaintenancesalearchivednewgallery contact32 pages
  25. 25. missionthe teamprintHome Intwfbproductsservicesaboutconsultbuildintereststhe designtrainingmaintenancesalearchived specialtynew webgallery contactfooter20 pages
  26. 26. slickplangrid & layout
  27. 27. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  28. 28. grid & layoutDimensions 960 x 1024 px (1280px) – The Norm 1024 x 768 px (1280px) – Standard Monitor 800 x 600 px (1280px) – LeastCommon 320 x 480 px – iPhoneWidths 768 x 1024 px – iPad 1200px – L. DesktopSmashing Magazine http://mobile.smashingmagazine.com/2013/03/21/responsive-web-de sign-with-physical-units/99 Designs http://99designs.com/designer-blog/2012/12/03/responsive-web-design- key-tips-and-approaches/
  29. 29. setting up your psd filegrid & layout
  30. 30. setting up your psd filegrid & layout
  31. 31. setting up your psd filegrid & layout
  32. 32. setting up your psd filegrid & layout
  33. 33. setting up your psd file for RWDgrid & layout
  34. 34. twitter bootstrapfoundation skeleton gumby 2grid & layout
  35. 35. your layoutequation:Order + Harmony + Balance + Comfort =Dramatically improves the communication of your designKeep in mind:• Horizontal Balance • Size• Vertical Balance • Color• Radial Balance • Shape• Symmetrical Balance • Value• Asymmetrical Balance • Position
  36. 36. balancegrid & layout
  37. 37. balancegrid & layout
  38. 38. radial balancegrid & layout
  39. 39. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  40. 40. wireframeDefined as:Simple visual guide to show you what a Web page would look likefocusing on the site structureRule of thumb:Keep it bare bones & don’t add color, typeface and graphicsPages to create wireframes for:HOME sub gallery contact
  41. 41. – Jakob Nielson, Web Usability Consultant“The more users’ expectationsprove right, the more they will feelin control of the system and themore they will like it.”
  42. 42. roughwireframe
  43. 43. detailedWireframe
  44. 44. digitalwireframe
  45. 45. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  46. 46. the latest trendskeep in mind: trendy, doesn’t make it a great solution
  47. 47. flat design: Most populartrends
  48. 48. trendsflat design: Most popular
  49. 49. trends – microsoft’s windows 8 helped pioneer flat designflat design: Most popular
  50. 50. trends – Google and facebook are doing it tooflat design: Most popular
  51. 51. flat designtrends
  52. 52. trends – flexibility and the amount of pre-existing patterns and functionality built intwitter bootstrap: snap, there it is again!
  53. 53. trends – Smooth scalability, easy sizing, 1 file rather than multiple spritesicon fonts
  54. 54. trends – resolutions are increasing, make it look good on any deviceretina support
  55. 55. FULL BROWSERTRENDS – PLAYGROUND INC, A CREATIVE AGENCY
  56. 56. trends – LEAN ANALYTICSFULL BROWSER
  57. 57. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI Recap
  58. 58. “we’ve been spoiled.”– Jason Santa Maria, Co-Founder & Creative Director of Editorially&
  59. 59. typographybasic guide to choosing your typefaces:Contrast, Body Copy, Explore Different Styles
  60. 60. A ASanstypography: contrastThe most important thing to keep in mind!serif
  61. 61. Lorem Ipsum is simply dummy text of theprinting and typesetting industry. LoremIpsum has been the industry’s standarddummy text ever since the 1500s, when anunknown printer took a galley of type andscrambled it to make a type specimen book.It has survived not only five centuries, butalso the leap into electronic typesetting,remaining essentially unchanged.typography: start with text face for body copy1. Sturdy and legible at smaller size 2. Healthy contrast between character3. As text get smaller, choose text type with slightly larger x-heightold standardLorem Ipsum is simply dummy text of theprinting and typesetting industry. LoremIpsum has been the industry’s standarddummy text ever since the 1500s, whenan unknown printer took a galley of typeand scrambled it to make a type specimenbook. It has survived not only fivecenturies, but also the leap into electronictypesetting, remaining essentiallygeorgiaHa Hacap heightX heightbaseline
  62. 62. typography: contrastExploring different styles
  63. 63. the clientsitemapgrid & layoutwireframetrends & inspirationstypographytips & UI recap
  64. 64. Make sure you:Set resolution to: 72 PPI, RGB, Set your dimensions, Snap to: Guidetips to setup
  65. 65. UI RECAPNO WORRIES, ALMOST PAU!
  66. 66. 1. The client• Basic summaryGet as much information as you can• Primary objectiveWhat will this website be used for?• Target AudienceKnow thy user• CompetitorsWhat’s been done
  67. 67. 2. sitemap• to organize the structure• reference materialEveryone is on board, sounds good• small vs. bigKnowing what you’re getting into• users languageAt this point, begin thinking about terms...
  68. 68. 3. grid and layout• norm 960px (1280px)• standard 1024px (1280px)• least 800px (1280px)• RWD: frameworks• equationOrder + Harmony + Balance + Comfort = Improvement in comm.• Balance, size, color, shape, value, position
  69. 69. 4. wireframe• visual guideSite structure w/o color, typeface, and graphics• stick to itTry not to stray far from it, easy that way• make frames for...Home, Sub, Contact, Blog, Gallery• rough, extreme, digital
  70. 70. 5. trends & inspirations• trendiest: flat designCultural and Technological reasons• isn’t always the best solution• twitter bootstrapFlexible, pre-existing patterns and functionality• full browser• one pagers & parallax sites (?)
  71. 71. 6. typography• contrast: sans vs. serifMost important thing to remember• text face for body copyFrist thing you should doMake sure it’s sturdy and legible when smallHealthy contrast between charactersHigher x-height• stylesChoose type with choke styles to play with, ex: Proxima Nova
  72. 72. 7. tips for you son!• 72 PPI (Pixels per inch)• dimensionsStart at 1280px and set your guides up• snap to: guide• ColorDefault CMYK, change to RGB with Proof Colors
  73. 73. !inspirations#cheehoo
  74. 74. UI Cartpatternpattern tap
  75. 75. colour loverscolorpltts kuler color scheme designer
  76. 76. webdesigner depotblogssmashing magazine CODROPS css tricks
  77. 77. BehanceGreat resource for inspirationsdribble creattica
  78. 78. css maniagalleryflat design niice the best designs
  79. 79. TYPECASTtypographyA LIST APART ARTICLE FONT DECK GOOGLE WEB FONTSTYPEKIT BY ADOBE
  80. 80. disregarding everything! Provided by Chris sassOMG, S**t mother f**K, &%$#)*@!+(%$!!!!!!!!!
  81. 81. muchmahalos!

×