āđāļāļŠāđāļ§āļāļāļāļāļāļāļāļ§āļēāļĄāļāļĩāđ āļŦāļĨāļēāļĒāđāļāļāļāļāđāļāļĒāđāļāļāļāļąāļāļŦāļēāļŦāļāđāļēāđāļ§āđāļāļĢāļāļāļāđāļĄāđāļĢāļđāđāļ§āđāļēāļāļ°āļĄāļāļāļāļĢāļāđāļŦāļ āļāđāļēāļāļļāļāđāļāļĒāđāļāļāļāļąāļāļŦāļēāļāļĩāđ āđāļāļĨāļ§āđāļēāđāļ§āđāļāļāļąāđāļāļāļēāļāļāļēāļĢ Visual Hierarchy āļ§āļąāļāļāļĩāđāđāļĢāļēāļāļāđāļŠāļāļāļāļāļāļ§āļēāļĄāđāļĢāļ·āđāļāļāđāļāļĩāđāļĒāļ§āļāļąāļāļāļēāļĢāļāļąāļāļĨāļģāļāļąāļāļāļ§āļēāļĄāļŠāļģāļāļąāļāļāļāļāļāļāļāđāļāļĢāļ°āļāļāļāļāđāļēāļ āđ āđāļāļāļēāļĢāļāļāļāđāļāļ User Interface āđāļĢāļĩāļĒāļāļāļĩāļāļāļĒāđāļēāļāļ§āđāļē Visual Hierarchy āļāļąāđāļāđāļāļ āđāļĨāļ°āđāļāļ·āđāļāļāļēāļĢāļĒāļāļĢāļ°āļāļąāļāļāļēāļĢāļāļāļāđāļāļāđāļāļāļĩāļāļāļąāđāļ āļāļąāļāļāļąāđāļāđāļĢāļēāļĄāļēāļāļģāļāļ§āļēāļĄāļĢāļđāđāļāļąāļāļāļąāļāđāļĨāļĒāļ§āđāļē Visual Hierarchy āđāļāļāļāļāļ§āļēāļĄāļāļĩāđāļāļąāļāđāļāđāđāļĨāļĒ……..
āđāļāļĩāļĒāļāđāļāļĒ
Thanatorn Prangsrithong – Internship @ borntoDev
Visual Hierarchy āļāļ·āļāļāļ°āđāļĢ?
     Visual Hierarchy āļŦāļĢāļ·āļ āļĨāļģāļāļąāļāļāļąāđāļāļāļēāļĢāļĄāļāļāđāļŦāđāļ āļāļ·āļ āļāļēāļĢāļāļąāļāļĢāļ°āđāļāļĩāļĒāļāļāļāļāđāļāļĢāļ°āļāļāļāļāļēāļĢāļāļāļāđāļāļāļāļāļŦāļāđāļēāđāļāļ·āđāļāđāļŦāđāļāļđāđāđāļāđāļĄāļāļāđāļŦāđāļāļāļāļāđāļāļĢāļ°āļāļāļāļāļēāļĢāļāļāļāđāļāļāđāļāđāļĨāļ°āļĢāļēāļĒāļāļēāļĢāļāļēāļĄāļĨāļģāļāļąāļāļāļ§āļēāļĄāļŠāļģāļāļąāļāļāļēāļĄāļāļĩāđāļāļđāđāļāļāļāđāļāļāļāđāļāļāļāļēāļĢāļāļ°āļŠāļ·āđāļ
Visual Hierarchy āļŠāļēāļĄāļēāļĢāļāļāļģāđāļāđāđāļāļĒāļ§āļīāļāļĩāļāļąāļāļāđāļāđāļāļāļĩāđ:
1. āļāļēāļĢāđāļĨāļ·āļāļāđāļāđāļŠāļĩāļĒāļąāļāđāļāđāļŦāđāđāļŦāļĄāļēāļ°āļāļąāļāļāļēāļ
    āļāļēāļĢāđāļāđāļŠāļĩāļāļāļāļāļēāļāļāļ°āļĄāļāļāļāļ§āļēāļĄāļŠāļĩāļŠāļąāļāļŠāļ§āļĒāļāļēāļĄāđāļŦāđāļāļąāļāļāļēāļāļāļāļāđāļāļ UI āļĒāļąāļāļĄāļĩāđāļĢāļ·āđāļāļāļāļāļāļāļēāļĢāđāļāđāļāļēāļāļāļĩāđāđāļĢāļēāļāđāļāļāļāļīāļāļēāļĢāļāļēāļāļĩāļāļāđāļ§āļĒ āļāļēāļĄāļāļāļāļīāđāļĨāđāļ§āļāļāđāļĢāļēāļĄāļąāļāļāļ°āļĄāļāļāļŦāļēāđāļāļāļĩāđāļāļļāļāļāļĩāđāļŠāļ§āđāļēāļāļāļ§āđāļēāļāļļāļāļāļ·āđāļāđ āļāļķāđāļāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļāļĢāļąāļāđāļāđāđāļāļāļēāļĢāļāļāļāđāļāļāļŦāļāđāļēāđāļāļĒāļāļēāļĢāđāļĨāļ·āļāļāđāļāđāļŠāļĩāđāļāļāļŠāļ§āđāļēāļ āđāļāļ·āđāļāļāļģāđāļŦāđāļŠāđāļ§āļāļāļĢāļ°āļāļāļāļŠāļģāļāļąāļāļāļĩāđāđāļĢāļēāļāđāļāļāļāļēāļĢāļāļ°āđāļāđāļ āļāļđāđāļāļāđāļāđāļāļāļāļāļĄāļēāļāļēāļāļŠāđāļ§āļāļāļ·āđāļ āđ āļĄāļēāļāļāļ§āđāļēāļāļēāļĢāđāļĨāļ·āļāļāđāļāđāļŠāļĩāđāļāļāļĄāļ·āļāļĄāļ āļāļĒāđāļēāļāđāļĢāļāđāļāļēāļĄ āđāļĄāđāļāļ§āļĢāđāļāđāļŠāļĩāļāļĩāđāļŦāļĨāļēāļāļŦāļĨāļēāļĒāļāļāđāļāļīāļāđāļāđāļāļŦāļāđāļēāđāļāļĩāļĒāļ§ āđāļāļĢāļēāļ°āļ§āđāļēāļĄāļąāļāļāļģāđāļŦāđāļāļđāļĨāļēāļĒāļāļēāđāļāđāļāđāļēāļĒ
2. āđāļĨāđāļ§ Contrast āļāļ·āļāļāļ°āđāļĢāļĨāđāļ° ?
Image from sketchappsources Â
   Contrast āļāļ·āļ āļāļēāļĢāđāļāđāđāļāļāļĄāļ·āļāđāļĨāļ°āđāļāļāļŠāļ§āđāļēāļāđāļāļŦāļāđāļēāđāļāļĩāļĒāļ§āļāļąāļ āđāļāļ·āđāļāļŠāļĢāđāļēāļāļāļ§āļēāļĄāđāļāļāļāđāļēāļāļāļĩāđāđāļŦāđāļāđāļāđāļāļĒāđāļēāļāļāļąāļāđāļāļāļāļąāđāļāđāļāļ
   āļāļāļāđāļāļĢāļ°āļāļāļāļāļĩāđāđāļĢāļēāļāđāļāļāļāļēāļĢāđāļŦāđāļĄāļąāļāđāļāļāđāļāđāļ āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļŠāļ·āđāļāļŠāļēāļĢāđāļāļĒāļąāļāļāļđāđāđāļāđāđāļāđāđāļāļĒāļāļēāļĢāļŠāļĢāđāļēāļāļāļ§āļēāļĄāđāļāļāļāđāļēāļ āđāļāļ·āđāļāđāļŦāđāļāļđāđāđāļāđāļāļēāļāļĄāļāļāđāļŦāđāļāļŠāļīāđāļāļāļĩāđāđāļĢāļēāļāđāļāļāļāļēāļĢāļāļ°āļŠāļ·āđāļāļŠāļēāļĢāļāļāļāļĄāļēāđāļāđāļāļĨāļģāļāļąāļāđāļĢāļ āđ āļāļēāļĢāļŠāļĢāđāļēāļ Contrast āļāļāļāļāļēāļ āđāļĄāđāđāļāđāļāļģāļāļąāļāļāļĒāļđāđāđāļāđāļāļēāļĢāđāļāđāļāļ§āļēāļĄāļŠāļ§āđāļēāļāļāļĩāđāđāļĄāđāđāļāđāļēāļāļąāļāļĢāļ°āļŦāļ§āđāļēāļāļāļāļāđāļāļĢāļ°āļāļāļāļāđāļēāļ āđāđāļāđāļēāļāļąāđāļ āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļĨāļ·āļāļāđāļāđāļ§āļīāļāļĩāļāļĢāļ°āļāļāļāđāļāđ āļāļąāđāļāļāļēāļĢāđāļĨāļ·āļāļāđāļāđāļŠāļĩāļāļĩāđāđāļāļāļāđāļēāļ āļāļēāļĢāđāļāđāļāļāļēāļāļāļĩāđāđāļāļāļāđāļēāļāļāļąāļ āđāļĨāļ°āļāļēāļĢāļ§āļēāļāļāļģāđāļŦāļāđāļāļāļĩāđāļāđāļēāļāļāļąāļ āļāļāļāļāļēāļāļāļēāļĢāļŠāļĢāđāļēāļāļāļ§āļēāļĄāļāđāļēāļāđāļāļ·āđāļāđāļŦāđāđāļŦāđāļāļāļļāļāļŠāļģāļāļąāļāļāđāļāļāđāļĨāđāļ§ āđāļĢāļēāļĒāļąāļāļŠāļēāļĄāļēāļĢāļāļŠāļĢāđāļēāļāļāļ§āļēāļĄāļāđāļēāļ āđāļāļ·āđāļāđāļāđāļāļāļāļīāļāļāļāļāļāđāļāļĄāļđāļĨāđāļŦāđāļāļđāđāļāļāļāđāļēāļāļāļąāļāđāļāđāļāļĒāđāļēāļāļāļąāļāđāļāļāļāļĩāļāļāđāļ§āļĒ
3. āļāļģāđāļĄāļāđāļāļāļāļģāļŦāļāļāļŠāļąāļāļŠāđāļ§āļâĶ
Image from Cartoonity.com by Martin
     āļāļēāļĢāļāļģāļŦāļāļāļŠāļąāļāļŠāđāļ§āļāļŦāļĢāļ·āļāļāļāļēāļāđāļŦāđāļāļąāļāļāļāļāđāļāļĢāļ°āļāļāļāļāļāļāļŦāļāđāļēāđāļāđāļāđāļĢāļ·āđāļāļāļŠāļģāļāļąāļāđāļĢāļ·āđāļāļāļāļķāļāļāļĩāđāļāļąāļāļāļāļāđāļāļāļāļ§āļĢāļāļĢāļ°āļŦāļāļąāļāđāļ§āđ āļāļēāļĢāđāļĨāļ·āļāļāđāļāđāļāļāļēāļāđāļŦāđāļāļąāļāļāļāļāđāļāļĢāļ°āļāļāļāļāđāļēāļ āđ āđāļāđāļāļŠāļīāđāļāļāļĩāđāļŠāļģāļāļąāļ āļŠāļīāđāļāļāļāļāļāļĩāđāđāļŦāļāđāļāļ§āđāļē āđāļāđāļāļāļĩāđāļāļđāđāļāļāđāļāđāļāļĄāļēāļāļāļ§āđāļēāļŠāļīāđāļāļāļĩāđāļĄāļĩāļāļāļēāļāđāļĨāđāļāļāļ§āđāļēāđāļŠāļĄāļ āđāļāļĢāļēāļ°āļāļ°āļāļąāđāļ āļāļāļāđāļāļĢāļ°āļāļāļāļāļĩāđāļŠāļģāļāļąāļāļāļĩāđāļŠāļļāļ āļāļ§āļĢāļāļ°āđāļāđāļāļŠāđāļ§āļāļāļĩāđāļĄāļĩāļāļāļēāļāđāļŦāļāđāļāļĩāđāļŠāļļāļāđāļāļŦāļāđāļēāļāļąāđāļ āđāļāļ·āđāļāđāļŦāđāļāļđāđāđāļāđāļāļēāļāļĄāļāļāđāļāđāļāļāļĒāđāļēāļāđāļĢāļ āđāļāđāđāļĄāđāļāļ§āļĢāđāļāđāļāļāļēāļāđāļāļīāļ 3 āļāļāļēāļ āđāļāđāđāļāđ āđāļĨāđāļ, āļāļĨāļēāļ, āđāļĨāļ°āđāļŦāļāđ āļāđāļāļāđāļĨāđāļ§ āđāļāļĢāļēāļ°āļĄāļąāļāļāļ°āļāļ§āļāļŠāļąāļāļŠāļāđāļāđāļāđāļēāļĒ
4. āđāļĨāđāļ§āļāļēāļĢāļāļąāļāļāļĨāļļāđāļĄāļĄāļąāļāļāļĩāļĒāļąāļāđāļ
   āļāļēāļĢāļāļąāļāļāļāļāđāļāļĢāļ°āļāļāļāđāļāđāļāļāļĨāļļāđāļĄāđāļāđāļāļāđāļāļāđāļāļāļŦāļĢāļ·āļāļāļąāļāđāļŦāđāļāļđāđāļāđāļāļŦāļĄāļ§āļāļŦāļĄāļđāđ āļāđāļāļ°āļāļģāđāļŦāđāļāļđāđāđāļāđāđāļŦāđāļāđāļāļĢāļāļŠāļĢāđāļēāļāļāļāļāļŦāļāđāļēāļāļĒāđāļēāļāļāļąāļāđāļāļ āđāļāļĒāļāļēāļĢāļāļąāļāļāļāļāđāļāļĢāļ°āļāļāļāļāļĩāđāļŠāļąāļĄāļāļąāļāļāđāļāļąāļāđāļāļāļĨāļļāđāļĄāļāđāļāļĄāļđāļĨāļāļĩāđāļĄāļĩāļāļĢāļīāļāļāļāļēāļĢāđāļāđāļāļēāļāđāļāļĩāļĒāļ§āļāļąāļāđāļŦāđāļāļĒāļđāđāļāđāļ§āļĒāļāļąāļ āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļāļąāļāļāļĨāļļāđāļĄāđāļāđāđāļāļĒāļāļēāļĢāļāļģāļĄāļēāļ§āļēāļāđāļ§āđāļāļīāļ āđ āļāļąāļ āđāļĨāļ°āđāļ§āđāļāļ§āđāļēāļāļāļ·āđāļāļāļĩāđāđāļāđāļāđāļĨāļ°āļāļĨāļļāđāļĄāļāļĒāđāļēāļāļāļąāļāđāļāļ
āļŠāļĢāļļāļāļŠāļļāļāļāđāļēāļĒāļŠāļīāđāļāļāļĩāđāļāļđāđāļāđāļēāļāļāļ°āđāļāđāļĢāļąāļ
     āļāļēāļĢ Visual Hierarchy āļŠāļēāļĄāļēāļĢāļāļāļģāđāļāđāđāļāļĒāļŦāļĨāļēāļāļŦāļĨāļēāļĒāļ§āļīāļāļĩāļāļēāļĢ āđāļāļĒāđāļāđāļĢāđāļ§āļĄāļāļąāļāļāđāđāļāđ āļāļąāđāļāļāļēāļĢāđāļāđāļŠāļĩāđāļāļāļŠāļ§āđāļēāļāđāļāļĄāļ·āļ, āļāļēāļĢāđāļāđāļāļ§āļēāļĄāļŠāļ§āđāļēāļāļāļĩāđāđāļĄāđāđāļāđāļēāļāļąāļ, āļāļēāļĢāđāļāđāļāļāļēāļāļāļĩāđāđāļŦāļāđāđāļāļ·āđāļāļāļĩāđāļāļ°āđāļŠāļāļāļ§āđāļēāļĄāļąāļāļŠāļģāļāļąāļ, āđāļĨāļ° āļāļēāļĢāļāļąāļāļāļĨāļļāđāļĄāļāļāļāđāļāļĢāļ°āļāļāļāļāđāļēāļāđāļāļĩāđāļĄāļĩāļāļĢāļīāļāļāđāļāļĩāļĒāļ§āļāļąāļāđāļŦāđāļāļĒāļđāđāļāđāļ§āļĒāļāļąāļ āļ§āļīāļāļĩāļāļēāļĢāđāļŦāļĨāđāļēāļāļĩāđāļŠāļēāļĄāļēāļĢāļāđāļŦāđāļāļđāđāđāļāđāļāļēāļāļŠāļēāļĄāļēāļĢāļāđāļāļāļąāļŠāđāļāđāļāļđāļāļāļļāļ āļĢāļ§āļĄāļāļķāļāļŠāļēāļĄāļēāļĢāļāļāļģāļāđāļāļĄāļđāļĨāļāļĩāđāđāļāļāļĢāļąāļāđāļāđāđāļāļāļēāļĢāļāļąāļāļāļēāļāļēāļĢāļāļāļāđāļāļ UI āđāļāļ·āđāļāļāļĢāļ°āļŠāļāļāļēāļĢāđāļāļāļēāļĢāđāļāđāļāļēāļāļāļāļāļāļđāđāđāļāđāļāļēāļāđāļŦāđāļāļĩāļĒāļīāđāļāļāļķāđāļāđāļāļāļĩāļāļāļ°āļāļ°
    āđāļāđāļāļāļĒāđāļēāļāđāļĢāļāļąāļāļāđāļēāļāļāļ°āļāļļāļāļāļ āļāļēāļĢāļŠāļĢāđāļēāļ Visual Hierarchy āđāļĄāđāđāļāđāļĒāļēāļāļāļĒāđāļēāļāļāļĩāđāļāļīāļāđāļĨāļĒāđāļāđāđāļŦāļĄāļāļ° āļŦāļ§āļąāļāļ§āđāļēāļāļāļāļ§āļēāļĄāļāļĩāđāļāļ°āđāļāđāļāļāļĢāļ°āđāļĒāļāļāđāļāļąāļāļāļđāđāļāđāļēāļāđāļĄāđāļĄāļēāļāļāđāļāđāļāļĒāļāļ°āļāļ°
āļāđāļēāļāļāļīāļāļāļēāļ
1. Design Stack24, [UI Design] Visual Hierarchy āđāļāļāđāļāđāļēāđāļāļāđāļēāļĒāļĄāļēāļāđāđ, May 6, 2020, from: https://medium.com/@4namikaze.minato4/visual-hierarchy-āđāļāļāđāļāđāļēāđāļāļāđāļēāļĒāļĄāļēāļāđāđ-9234626ff62a [Accessed 12 Jan 2022]
2. UI blogger, Visual Hierarchy in UX/UI Design, Jan 12, from : https://uxplanet.org/visual-hierarchy-in-ux-ui-design-97d8526c5e35 [Accessed 12 Jan 2022]
āļŦāļēāļāļāļļāļāļŠāļāđāļāļāļąāļāļāļē āļŠāļāļēāļĢāđāļāļāļąāļ āđāļāļāļāļĨāļīāđāļāļāļąāļ
āđāļĨāļ° āđāļāļāđāļāđāļĨāļĒāļĩāļāļāļāļāļąāļ§āđāļāļ ?
āļāļĒāđāļēāļĢāļāļāđāļē ! āđāļĢāļĩāļĒāļāļĢāļđāđāļāļąāļāļĐāļ°āļāđāļēāļāļāļīāļāļīāļāļąāļĨāđāļāļ·āđāļāļāļąāļāđāļāļĢāļāļāļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļāļāļāļāļāļļāļ
āđāļĢāļīāđāļĄāļāļąāđāļāđāļāđāļāļ·āđāļāļāļēāļ āļāļĢāđāļāļĄāļāļāļīāļāļąāļāļīāļāļĢāļīāļāđāļāļĢāļđāļāđāļāļāļŦāļĨāļąāļāļŠāļđāļāļĢāļāļāļāđāļĨāļāđāļ§āļąāļāļāļĩāđ