Editing Graphical user interface (section)

== Components ==
[[File:Schema of the layers of the graphical user interface.svg|thumb|300px|Layers of a GUI based on a [[windowing system]]]]
{{Main|List of graphical user interface elements}}
{{Further|WIMP (computing)|Window manager|Desktop environment}}
A GUI uses a combination of technologies and devices to provide a platform that users can interact with, for the tasks of gathering and producing information.

A series of elements conforming a [[visual language]] have evolved to represent information stored in computers. This makes it easier for people with few computer skills to work with and use computer software. The most common combination of such elements in GUIs is the ''windows, icons, text fields, canvases, menus, pointer'' ([[WIMP (computing)|WIMP]]) paradigm, especially in [[personal computer]]s.<ref>{{Cite web|title=What is a graphical user interface (GUI)?|url=https://www.ionos.com/digitalguide/websites/web-development/what-is-a-gui/|access-date=2022-02-25|website=IONOS Digitalguide|date=14 September 2020 |language=en}}</ref>

The WIMP style of interaction uses a virtual [[input device]] to represent the position of a [[pointing device|pointing device's interface]], most often a [[computer mouse|mouse]], and presents [[information]] organized in windows and represented with [[Icon (computing)|icons]]. Available commands are compiled together in menus, and actions are performed making gestures with the pointing device. A [[window manager]] facilitates the interactions between windows, [[Application software|applications]], and the [[windowing system]]. The windowing system handles hardware devices such as pointing devices, graphics hardware, and positioning of the pointer.

In [[personal computer]]s, all these elements are modeled through a [[desktop metaphor]] to produce a simulation called a [[desktop environment]] in which the display represents a desktop, on which documents and folders of documents can be placed. Window managers and other software combine to simulate the desktop environment with varying degrees of realism.

Entries may appear in a list to make space for text and details, or in a grid for compactness and larger icons with little space underneath for text. Variations in between exist, such as a list with multiple columns of items and a grid of items with rows of text extending sideways from the icon.<ref>{{cite web |last1=Babich |first1=Nick |title=Mobile UX Design: List View and Grid View |url=https://uxplanet.org/mobile-ux-design-list-view-and-grid-view-8f129b56fd5b |website=Medium |access-date=4 September 2021 |language=en |date=30 May 2020}}</ref>

Multi-row and multi-column layouts commonly found on the web are "shelf" and "waterfall". The former is found on [[image search engine]]s, where images appear with a fixed height but variable length, and is typically implemented with the CSS property and parameter <code>display: inline-block;</code>. A waterfall layout found on [[Imgur]] and [[TweetDeck]] with fixed width but variable height per item is usually implemented by specifying <code>column-width:</code>.