1 / 31

7 th Meeting

Learn essential principles and techniques for creating impactful user interfaces. Discover the importance of problem-solving and functionality in design, as well as tips for typography, color, logos, and more.

lelandkoch
Download Presentation

7 th Meeting

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 7th Meeting (UI) Design in HCI

  2. Human-Computer Interaction A

  3. - Jared M. Spool (@jmspool) Great designers don’t fall in love with their solutions.Great designers fall in love with user’s problems. Human-Computer Interaction A

  4. - Steve Jobs Design is not just what it looks like and feels like. Design is how it works. Human-Computer Interaction A

  5. What is bad design When the design does not go linearly with user experiences Human-Computer Interaction A

  6. Section of Jokes How to be a successful designer in (Indonesian) government’s projects Human-Computer Interaction A

  7. BASIC RULE Never ever create a simple design. Try to make it as complicated as possible. Ignore all aesthetics, ignore your idealism. Here, you do not need all of them. Just make it quick andput all information overwhelmingly. Yes, everything, with no exception. If you can make it difficult, why bother to make it easy? Human-Computer Interaction A

  8. Font Never ever use standard fonts. Use the awkward ones. Ahh, you can try Jokerman! Don’t forget the outline and the shadows. More unique, better Sans/sans serif are meehhh Human-Computer Interaction A

  9. Logo The favorite shapes are: pentagon (Pancasila), star, circle, boomerang, and shield.Ahh, don’t forget rice and cotton! Always remember to design logo complicatedly. Human-Computer Interaction A

  10. Color Government’s favorite color is blue, followed by yellow and green.For banner or flyer design, don’t forget to apply gradient! Blue gradient: IDOL! Violet and pink are detested Human-Computer Interaction A

  11. Print Do remember to draw boomerang shape on banner or flyer designs;and the MOST IMPORTANT thing is: OFFICIAL/ OFFICER’s PHOTOS White or dark background is likely rejected Human-Computer Interaction A

  12. Web Put a lot of activity photos for gallery and slideshow (don’t forget the running text).Put as many texts as possible. Set the font smaller if necessary. Overwhelming texts are LEGIT! Noo! You got to much white space. Human-Computer Interaction A

  13. Slogan Ensure common people do not understand the slogan.Sanskrit and/or acronym will make it perfect! This is too simple. Remember basic rule! Human-Computer Interaction A

  14. Typography The real of text as visual art of communication Human-Computer Interaction A

  15. Anatomy of a Typeface • A typeface is a set of type families of a unifying and distinctive design, e.g., Times New Roman • A font is one instance of that family, e.g., Arial light italic • Standard measuring unit is the point, measured from top of ascender to bottom of descender Human-Computer Interaction A

  16. Two Big Groups: Serif and Sans-serif Human-Computer Interaction A

  17. Type “Etiquette” • Larger x-heights are often easier to read at small sizes,but look dense when leading is tight • Long lines of type (>70 characters) are hard to read • Justified text often creates river, be careful. • Choose one type family or two: No font salads please. • use of ALL CAPS or all italic slows reading • Changes in weight more noticeful than in typeface Human-Computer Interaction A

  18. Pro Tips on Colors in Interface Design Human-Computer Interaction A

  19. Human-Computer Interaction A

  20. Human-Computer Interaction A

  21. Human-Computer Interaction A

  22. Human-Computer Interaction A

  23. Human-Computer Interaction A

  24. Human-Computer Interaction A

  25. Human-Computer Interaction A

  26. Human-Computer Interaction A

  27. Resources for UI / UX Designers Human-Computer Interaction A

  28. UI/UX | Pallete • https://color.adobe.com/create/color-wheel/ • https://colorhunt.co/ • https://www.materialpalette.com/ • https://brandcolors.net/ • https://www.grabient.com/ Human-Computer Interaction A

  29. UI/UX | Fonts • https://www.dafont.com/ • https://www.losttype.com/ • https://fonts.google.com/ • https://wordmark.it/ • https://www.fontsquirrel.com/ • https://creativemarket.com/ Human-Computer Interaction A

  30. UI/UX | Downloads • https://xdresources.co/ • https://www.xdguru.com/ • https://freebiesui.com/ • http://principlerepo.com/ • https://ui8.net/ Human-Computer Interaction A

  31. UI/UX | Inspiration • https://medium.com/ • https://savee.it/ • https://collectui.com/ • http://styleguides.io/ • https://uimovement.com/ • https://muz.li/ • https://pttrns.com/ • https://uigarage.net/ • http://uipatterns.io/ • http://thepatternlibrary.com/ • https://dribbble.com/ • http://collectui.com/challenges Human-Computer Interaction A

More Related