The Anatomy of a Good Design: An Analysis of 4 Sites

This content originally appeared on NN/g latest articles and announcements and was authored by Sarah Gibbons, Kelley Gordon

Summary: Visually pleasing designs use consistent type styles and spacing, create a visual hierarchy, and utilize an underlying grid structure.

In a previous article we broke down why three designs look good. In this article we will analyze three additional user-interface designs and discuss the visual-design principles that make them attractive. Afterall, how something looks affects the perception of how well it functions.

Example 1: Comfortable Editing Experience

Our first example is from Dovetail , a data-analysis platform. This design used a grid, a type system, and consistent iconography to create a comfortable editing and reading experience.

Alignment to a grid. A 3-column grid acted as a base to which elements are aligned. The leftmost grid line provided a vertical anchor for the sidebar navigation. The middle column of text was also left aligned to a grid line, and the rightmost grid line separated the tags and comments area. Setting up a grid in your designs will keep elements aligned consistently across different screens.

This content originally appeared on NN/g latest articles and announcements and was authored by Sarah Gibbons, Kelley Gordon

Print Share Comment Cite Upload Translate Updates

APA

Sarah Gibbons, Kelley Gordon | Sciencx (2023-03-05T17:00:00+00:00) The Anatomy of a Good Design: An Analysis of 4 Sites. Retrieved from https://www.scien.cx/2023/03/05/the-anatomy-of-a-good-design-an-analysis-of-4-sites/

MLA

" » The Anatomy of a Good Design: An Analysis of 4 Sites." Sarah Gibbons, Kelley Gordon | Sciencx - Sunday March 5, 2023, https://www.scien.cx/2023/03/05/the-anatomy-of-a-good-design-an-analysis-of-4-sites/

HARVARD

Sarah Gibbons, Kelley Gordon | Sciencx Sunday March 5, 2023 » The Anatomy of a Good Design: An Analysis of 4 Sites., viewed ,<https://www.scien.cx/2023/03/05/the-anatomy-of-a-good-design-an-analysis-of-4-sites/>

VANCOUVER

Sarah Gibbons, Kelley Gordon | Sciencx - » The Anatomy of a Good Design: An Analysis of 4 Sites. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/05/the-anatomy-of-a-good-design-an-analysis-of-4-sites/

CHICAGO

" » The Anatomy of a Good Design: An Analysis of 4 Sites." Sarah Gibbons, Kelley Gordon | Sciencx - Accessed . https://www.scien.cx/2023/03/05/the-anatomy-of-a-good-design-an-analysis-of-4-sites/

IEEE

" » The Anatomy of a Good Design: An Analysis of 4 Sites." Sarah Gibbons, Kelley Gordon | Sciencx [Online]. Available: https://www.scien.cx/2023/03/05/the-anatomy-of-a-good-design-an-analysis-of-4-sites/. [Accessed: ]

rf:citation

» The Anatomy of a Good Design: An Analysis of 4 Sites | Sarah Gibbons, Kelley Gordon | Sciencx | https://www.scien.cx/2023/03/05/the-anatomy-of-a-good-design-an-analysis-of-4-sites/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.