Designer's Guide to Interface - FEUP SINF 22-Out-2024

Transcript

1. The Designer’s Guide to Interface Don’t Panic!… Just balance aesthetics and functionality in a front-end design that just works L.EIC: Licenciatura em Engenharia Informática e Computação FEUP, Porto 2024–10–21 Pedro Amado pamado@fba.up.pt hitchhicker’s
2. The Designer’s Guide to Interface. FEUP, 2024 2 Table of Contents — A rather long preamble… — Introduction The role of visual interface design… is there anything else for the user? — Products and Experiences as Brands Branding — Typography Because nothing else will get through to the user… — Iconography — Color — Grid Systems and Layout
3. The Designer’s Guide to Interface. FEUP, 2024 3 Personal Presentation Pedro Amado Graphic Design Degree (FBAUP, 2002) MfA in Multimedia Art (FBAUP, 2007) Ph.D. in Communication Sciences and Technologies (UA, 2014) Integrated Member (Researcher / Board) of the i2ADS (2018—) Colaborator member of the ID+ / NIT (2021–) Portuguese Delegate for the ATypI w/ Vítor Quelhas (2012—) Founding member of the ATIPO (2018—) Pushing forward with the Ligatures Research Initiative (2024—) RESEARCH INSTITUTE IN ART, DESIGN AND SOCIETY
4. The Designer’s Guide to Interface. FEUP, 2024 4 Goodwin, K. (2009). Designing for the Digital Age. John Wiley & Sons. Kim Goodwin
5. The Designer’s Guide to Interface. FEUP, 2024 5 Goodwin (2009), Statelman (2013) Content first: content analysis and planning (data modeling) User research: personas (end-goals) and requirements Interaction Design Framework & Language MENUS AND INTERFACE CONTENT (STATIC) VIDEO AND ANIMATION SOUND
6. The Designer’s Guide to Interface. FEUP, 2024 6 Credits Iceberg https://cxl.com/blog/8-effective-ways-of-measuring-ux/
7. The Designer’s Guide to Interface. FEUP, 2024 7 Jones (2011), Tidwell (2011, p. 132-139), Goodwin (2009, p. 573-4) The Visual Hierarchy of the elements is achieved through the manipulation of the “variables” of position, size, color, alignment, repetition, density/proximity, “white space”, rhythm, color, style, texture, background color, and decoration of the elements visuals. The information must be evaluated and prioritized by: — Position (location, alignment, grouping,...) — Size (Dimensions, contrast, density,...) — Color (Surface treatments such as style, decoration,...)
8. The Designer’s Guide to Interface. FEUP, 2024 8 No Hierarchy
9. The Designer’s Guide to Interface. FEUP, 2024 9 Position
10. The Designer’s Guide to Interface. FEUP, 2024 10 Position + Dimensions (Size)
11. The Designer’s Guide to Interface. FEUP, 2024 11 Position + Dimensions + Visual Attributes (font style)
12. The Designer’s Guide to Interface. FEUP, 2024 12 Posição +Position + Dimensions + Visual Attributes (font style + color)
13. Introduction Balancing aesthetics and functionality in interface design
14. The Designer’s Guide to Interface. FEUP, 2024 14 Introduction: Balancing aesthetics and functionality in interface design While the visual design aspect is crucial for user engagement,… it should never compromise usability or functionality. — The role of visual design in creating first impressions. — An aesthetically pleasing interface can enhance user satisfaction but must always support user tasks <-- notice that this is not the brand, nor the product’s tasks.
15. The Designer’s Guide to Interface. FEUP, 2024 15 Introduction: Balancing aesthetics and functionality in interface design
16. The Designer’s Guide to Interface. FEUP, 2024 16 Introduction: Balancing aesthetics and functionality in interface design https://www.eleken.co/blog-posts/bad-ux-examples#jira-excessive-amount-of-features
17. Branding Overall feel and usability of the interface [through its look & feel]
18. The Designer’s Guide to Interface. FEUP, 2024 18 Branding Logotypes, Typography, Colors, Icons… all affect the overall feel and usability of the interface. Branding must consistently reflect the company’s identity while integrating seamlessly into the interface design.
19. The Designer’s Guide to Interface. FEUP, 2024 19 Brand[ing]
20. The Designer’s Guide to Interface. FEUP, 2024 20 Visual Identity AKA Branding (Wheeler, 2009) Designing, specifying, ordering, and printing or fabricating elements of a new brand identity system are all dependent on a set of intelligent standards and guidelines (…) The best branding tools communicate, “What does the brand stand for,” in addition to providing brand identity information.
21. The Designer’s Guide to Interface. FEUP, 2024 21 Previous EDP Brand (Material and Digital articulations)
22. The Designer’s Guide to Interface. FEUP, 2024 22 Previous EDP Brand (Material and Digital articulations) MANUAIS DE IDENTIDADE DA EDP, PT, BBC & BRAND BOOK DA CISCO DISPONÍVEIS ONLINE
23. The Designer’s Guide to Interface. FEUP, 2024 23 http://styleguides.io/
24. The Designer’s Guide to Interface. FEUP, 2024 24 https://www.ibm.com/design/language/
25. The Designer’s Guide to Interface. FEUP, 2024 25 https://carbondesignsystem.com/all-about-carbon/the-carbon-ecosystem/
26. The Designer’s Guide to Interface. FEUP, 2024 26 https://carbondesignsystem.com/elements/motion/overview/
27. Typography Type is the visual materialization of language — hence the product’s “voice” tone
28. The Designer’s Guide to Interface. FEUP, 2024 28 https://medium.com/thinking-design/when-designers-give-each-other-books-theyre-not-all-books-about-design-though-maybe-they-are-d449564b616e
29. The Designer’s Guide to Interface. FEUP, 2024 29 Maria (2014, p. 13) “Typography (…) isn’t supposed to be noticed. (…) Whether online, in print, or on the side of a spaceship, typography is the primary vehicle we use as designers to communicate our message. When we get it right, it’s powerful. And to do it well, we need to strike the balance between beauty and utility— and then disappear into the night.”
30. The Designer’s Guide to Interface. FEUP, 2024 30 Maria (2014, p. 13) Choose fonts considering: — readability, — function, — content (complete Character Set for proper internationalization) — aesthetics (check the designer’s information, where it has been used before, awards & distinctions…) <--workhorse fonts
31. The Designer’s Guide to Interface. FEUP, 2024 31
32. The Designer’s Guide to Interface. FEUP, 2024 32 BROWN, 2009, 2011, 2013; MARIA, 2009 Choose a versatile type family (e.g.: Merriweather, PT Sans & Serif, ...) Or combine 2 to 3 different typefaces (e.g.: Proxima Nova + Tisa Web) articulating them with the brand identity Use text font type(s) with actual content
33. The Designer’s Guide to Interface. FEUP, 2024 33 https://www.ibm.com/design/language/typography/typeface
34. The Designer’s Guide to Interface. FEUP, 2024 34 BROWN, 2009, 2011, 2013; MARIA, 2009 Choose a versatile type family (e.g.: Merriweather, PT Sans & Serif, ...) Or combine 2 to 3 different typefaces (e.g.: Proxima Nova + Tisa Web) articulating them with the brand identity Use text font type(s) with actual content
35. The Designer’s Guide to Interface. FEUP, 2024 35 https://www.fontpair.co/
36. The Designer’s Guide to Interface. FEUP, 2024 36 https://fontstand.com/
37. The Designer’s Guide to Interface. FEUP, 2024 37 https://www.monotype.com/font-pairing
38. The Designer’s Guide to Interface. FEUP, 2024 38 https://niamh-oshea.medium.com/12-excellent-font-pairing-tools-for-designers-65ffa417d487
39. The Designer’s Guide to Interface. FEUP, 2024 39 Brown (2009, 2011, 2013) Maria (2009) Choose a body size appropriate to the context (devices and environment) and reading (content and readers). This usually means between ~16–20 px (1–1.25em) for body copy Reading (technical text and labels may be as small as 12px) And then develop a Type Scale
40. The Designer’s Guide to Interface. FEUP, 2024 40 https://typescale.com/
41. The Designer’s Guide to Interface. FEUP, 2024 41 Brown (2009, 2011, 2013) Maria (2009) Set the appropriate column / line length (between 7 to 10 words) And paragraph length (vertical line count). (Always) adjust the leading (line-height) ~1.2 –1.75 em; Define differences in the hierarchy and the text’s functions (through typeface choice or, color, ...);
42. The Designer’s Guide to Interface. FEUP, 2024 42 https://m3.material.io/styles/typography/type-scale-tokens
43. Iconography Effective iconography enhances user interaction, while mismatched or inconsistent icon sets can cause confusion.
44. The Designer’s Guide to Interface. FEUP, 2024 44 [Icons] have always been used to compensate for an absence of text because of illiteracy or language differences (…). The efficacy of pictograms can be compromised by multiple factors: Ambiguity (…) Misinterpretation (…) [and] Offense…” “Good icons start with appropriate choices of symbols and images. Spend some time deciding what images will best represent each concept and reviewing them with your teammates and subject matter experts before you begin the time-consuming process of rendering…”
45. The Designer’s Guide to Interface. FEUP, 2024 45 (A reaaaally old Fedora Distro Icon Library)
46. The Designer’s Guide to Interface. FEUP, 2024 46 Goodwin (2009, p. 673)
47. The Designer’s Guide to Interface. FEUP, 2024 47 https://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077
48. The Designer’s Guide to Interface. FEUP, 2024 48 https://carbondesignsystem.com/elements/icons/usage/ Don’t just “font-awesome” any icon
49. The Designer’s Guide to Interface. FEUP, 2024 49 https://m3.material.io/styles/icons/overview
50. Color Color should be used to communicate meaning. Then and only then, to express style…
51. The Designer’s Guide to Interface. FEUP, 2024 51 https://m3.material.io/styles/color/system/how-the-system-works
52. Grid Systems and Layout Grid systems are essential for creating well-structured, balanced, and scalable interfaces
53. The Designer’s Guide to Interface. FEUP, 2024 53 Vihn (2011, p. 11, 13) “To say a grid is limiting is to say that language is limiting, or typography is limiting.” “Grids add order, continuity, and harmony to the presentation of information on frequently high-density web pages. Grids help users predict where to find information from page to page or from behavioral state to behavioral state, which aids in the communication of that information. Grids make it easier to add new content to a website in a manner consistent with the overall vision of the original website. Grids facilitate collaboration on the design of a single website without compromising the overall vision of that website.”
54. The Designer’s Guide to Interface. FEUP, 2024 54 UNIDADE MODULAR (COLUNAS) DA GRELHA (ECRÃS ARQUÉTIPO)
55. The Designer’s Guide to Interface. FEUP, 2024 55 UNIDADE(S) ATÓMICA(S) DA GRELHA E GRELHA DE LINHA DE BASE TIPOGRÁFICA (ECRÃS ARQUÉTIPO)
56. The Designer’s Guide to Interface. FEUP, 2024 56 CAMPOS E FUNÇÕES DA GRELHA (ECRÃS ARQUÉTIPO)
57. The Designer’s Guide to Interface. FEUP, 2024 57 EXEMPLO DE ESPECIFICAÇÃO DA GRELHA (ECRÃS ARQUÉTIPO)
58. The Designer’s Guide to Interface. FEUP, 2024 58 EXEMPLO DE ESPECIFICAÇÃO DA GRELHA (ECRÃS ARQUÉTIPO)
59. The Designer’s Guide to Interface. FEUP, 2024 59 https://grids.obys.agency/columns_vandegraaf/
60. Conclusion A beautiful interface is only useful if — It presents the content/information with the appropriate structure/presentation — Supports user tasks — Is consistent with the brand tone and values — Content is presented with Legibility, Hierarchy, and Versatility (Type, Icons, Colors) — Layouts allow for structural, proportional, and spatial guidance
61. The Designer’s Guide to Interface. FEUP, 2024 61 So what’s missing from the equation…? Behavior and interaction: — Elevation — Flow and snapping — Motion Content Guidelines: — Pictograms and Illustrations (including Data Viz) — Photography and video — Content (voice & tone, accessibility) — System feedback & messaging
62. The Designer’s Guide to Interface. FEUP, 2024 62 Study design patterns, case studies, and focus on the user experience. P. Ex. https://www.siteinspire.com/ https://www.awwwards.com/
63. The Designer’s Guide to Interface. FEUP, 2024 63 Study design patterns, case studies, … https://m3.material.io/ https://carbondesignsystem.com/ https://www.ibm.com/design/language/
64. The Designer’s Guide to Interface. FEUP, 2024 66 References Brown, T. (2009a). Real Web Type in Real Web Context. A List Apart. Retrieved May 01, 2014, from http://alistapart.com/article/real-web-type-in-real-web-context Brown, T. (2009b). Where to get web fonts. Nice Web Type. Retrieved May 01, 2014, from http://nicewebtype.com/notes/2009/10/20/where-to-get-web-fonts/ Brown, T. (2011). 8 Steps to Beautiful Paragraph Text on the Web. 8 Faces, 1(4). Brown, T. (2013). A Pocket Guide to Combining Typefaces. Penarth: Five Simple Steps. Goodwin, K. (2009). Designing for the Digital Age. John Wiley & Sons. Jones, B. (2011). Understanding Visual Hierarchy in Web Design. Webdesigntuts. Retrieved from http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/ Maria, J. S. (2009). On Web Typography. A List Apart. Retrieved May 01, 2014, from http://alistapart.com/article/on- web-typography Maria, J. S. (2014). On Web Typography. New York: A Book Apart. Vinh, K. (2011). Ordering Disorder: Grid Principles for Web Design. Berkley: New Riders Statelmen, L. (2013). Achieving Visual Hierarchy. Hack Design. Retrieved from https://hackdesign.org/lessons/19 Tidwell, J. (2010). Designing Interfaces: Patterns for Effective Interaction Design. O’Reilly. Retrieved from http://designinginterfaces.com/