freeCodeCamp/guide/english/visual-design/layout/index.md

1.8 KiB
Raw Blame History

title
Layout

Layout

Layout refers to the arrangement or placement of elements on a given page. Elements can include functional items such as paragraphs, headings, lists, and sections. Elements can also include design items such as icons, shapes, and images. The use of whitespace, padding, and margin is also used heavily in layout. You can consider the former to be design characteristics rather than elements in and of themselves.

The layout of a page is the arrangement of these various items into a presentation that conveys meaning to the person viewing the page. Thus, a primary consideration for layout should be how the layout will be understood and what meaning it will ultimately convey. Without carefully considering the meaning of a layout, you can cause confusion and distrust amongst your target audience.

One common mistake you might make is to determine layout based on what you think looks best. Doing this can violate the idea of standard conventions and should be avoided until you are more experienced in layout design.

Standard Conventions is a term used to describe a process or application of a technique that has industry-wide approval and general cultural acceptance amongst users. Examples of these conventions as it relates to layout are listed below:

  • Placement of heading text above the paragraph its meaning to describe.
  • Placement of a navigation bar at the top of the page.
  • Use of whitespace to separate different sections and types of content.
  • Lack of whitespace to bring together sections and types of content.
  • Ensuring elements are neat and organized (i.e two buttons aligning to be visually acceptable)
  • Simplicity of the layout such that it is easy to follow and flows nicely
  • Use of visual hierarchy to help keep the layout visually flowing (Size, color, positioning, etc)