Visual Hierarchy เป็นวิธีการนึงที่นำมาใช้ในการออกแบบ User Interface ช่วยให้ผู้ใช้สามารถเข้าใจข้อมูลที่แสดงผลบนหน้าจอสมาร์ทโฟนได้ง่ายมากขึ้น ซึ่งองค์ประกอบจะมีทั้งหมด 8 ข้อดังนี้ 

1.Size การกำหนด Size จะมีผลต่อการดึงความสนใจของผู้ใช้ อย่าง หนังสือพิมพ์ในส่วนของหัวข่าวจะใช้ตัวหนังสือตัวใหญ่ ใช้เพื่อดึงความสนใจของผู้อ่าน และเป็นเนื้อหาสำคัญที่ผู้อ่านควรจะรู้ 

2.Color - สีก็เป็นส่วนนึงของการดึงความใจจากผู้ใช้ และยังรวมถึงการใช้สีในการสื่อความหมายของผลิตภัณฑ์และโปรดัค 

3.Contrast - Contrast จะช่วยแยกความแตกต่างของ element ในแต่ละส่วนของการดีไซน์

4.Alignment - ใช้ในการเรียงลำดับความสำคัญของเนื้อหาในดีไซน์ เช่น หน้าล็อกอิน ต้องมีช่องที่ใส่ Username ใส่ password และ ปุ่มล็อกอิน ช่วยให้ผู้ใช้เข้าใจได้ว่า เขาต้องทำอะไรก่อน 

5.Repetition - การRepeat style ช่วยให้ผู้ใช้รู้และเข้าใจได้ว่าคอนเทนต์นี้มีความเกี่ยวข้องกัน 

6.Proximity - ความสอดคล้องการของดีไซน์ เช่น Header ต้องมี Subheader ด้วย

7.Whitespace - การเพิ่มช่องว่างระหว่าง Element ช่วยให้ผู้เข้าใจได้ว่า Element นี้มีความแตกต่างกัน 

8.Texture and Style - การใช้ Texture and Style นอกจากช่วยในเรื่องของการเรียงลำดับความสำคัญของ Content แล้ว นอกจากนี้ การใช้ Font บอกได้ถึง Mood & tone ของ Design อีกด้วย 

Pattern ที่นำมาใช้กับการดีไซน์จะมีอยู่ 2 pattern ที่นำมาใช้ 

• F - Layout ตัวอย่างที่เห็นได้อย่างชัดเจน คือ Google Search เน้นการนำมาใช้การดีไซน์ที่ List 

https://cdn.tutsplus.com/webdesign/uploads/legacy/022_F_Layout/f-pattern-3.jpg

• Z - Layout นำมาใช้กับ Design ที่มีโฆษณาสำหรับ Business product ที่ต้องการให้ผู้ใช้มีการกระทำ call to action ต่างๆกับ product