Understanding User Interface layout Patterns

Types of Layout Patterns

card style layout pattern
Split-screen Layouts
Single-page Layouts
Asymmetry layout pattern
Navigation Tab layout

Salient Points

  • Card Layout-blends text and image
  • Split-screen layout — for minimalist designs
  • Grids — grids need not be visually apparent but they help in element placement, proportional distribution, and interface consistency
  • Single-page layout — a linear and simple experience for users
  • Asymmetry- more expressive to the eye as it conveys movement.
  • Navigation — a common feature of most websites, like a signboard it points you to the needed pages without scouring the whole website
  • Carousel is a series of linear images or text or both with little whitespace that usually showcases some important content.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store