\n
The screen layout<\/b> describes the design of graphical user interfaces. The screen design<\/b> includes a wide variety of apps in which screens can be used as part of human-machine interaction. It must be distinguished from the functions of a graphical user interface. The technical implementation is not part of the screen design.\n<\/p>\n\nGeneral information<\/span>
\n<\/h2>\nThe screen layout<\/b> can be understood as the conception and creation of the graphical user interface (GUI). The layout of the items on the screen is of great relevance. This mainly refers to the layout. The information architecture concept is presented in detail since the location of items such as navigation, text, headings, as well as sub-headings, images, videos, icons, and other user interface content is an important factor. Hence, the screen layout<\/b> it has to do with the composition of the multiple items and contents, and their appearance in their respective interface.\n<\/p>\n\nScreen layout usage<\/span>
\n<\/h3>\nThe screen design<\/b> It is not only used for websites, mobile websites or apps for smartphones, but also in many other apps that have user interaction as a central element in different screen sizes. These multiple output formats are challenging for designers as the content will be displayed on different screens. This also means that certain restrictions and possibilities must be taken into account and exploited.\n<\/p>\n
The characteristics and possible patterns of interaction must be supported by the graphical properties of the medium. At the same time, the overall impression of the screen must satisfy certain aesthetic requirements. For example, items on screens should have proportions that have an aesthetic effect on the viewer or user. This aesthetic is in turn associated with the user interface and is directly related to aspects such as web design, usability or user experience.\n<\/p>\n
![\"600x400-screensaver-en-01.png\"](\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/05\/600x400-dise\u00f1odepantalla-es-01.png\")
\n<\/p>\n
\nTypes of functions<\/span>
\n<\/h2>\nThe designers who are in charge of the design of the screens usually collaborate with programmers and web designers to support the characteristics of the visualization apps through the design. They have to comply with screen design standards and also pay attention to psychological and technical factors. After all, the screens are always part of the programming or markup language used and the possible patterns of user interaction. At the beginning of a procedure in the screen layout it is always this user. The design of the screen should be based on the target audience. Therefore, screen layouts<\/b> Barrier-free is conceived differently than screen designs for mobile devices. Children's screens contain design items different from those for adults.\n<\/p>\n
Throughout the design procedure, aspects such as corporate design or technical implementation with HTML, PHP and especially CSS also play an important role. The latter depends, however, on the area of application and the language used. Therefore, screen designers usually create a style guide that summarizes and documents the patterns of interaction and visual design. The purpose of a style guide is the consistent implementation of the different requirements for different output devices, target groups, and user interface features.\n<\/p>\n
\nStyle guide content<\/span>
\n<\/h3>\nStyle guides can consist of the following factors:\n<\/p>\n
\n- Information or page architecture.<\/li>\n
- General layout (for websites, this would be the output template structuring).<\/li>\n
- Basic user guide.<\/li>\n
- Detailed specification of display models.<\/li>\n
- Assignment of functions to screens (menu, navigation, content).<\/li>\n
- Assignment of functions to interaction styles (control with mouse, keyboard or contextual menu).<\/li>\n
- Typographic concept (font, font size, text layout).<\/li>\n
- Color scheme (font color, background and screen templates).<\/li>\n
- Style windows, pop-ups, infographics, icons, buttons and animations.<\/li>\n
- Definition of formats for numbers, dates or address information.<\/li>\n
- Design pattern (template) for post content.<\/li>\n
- Typically, samples are created in the style tutorial that give the customer a concrete first impression of the graphical user interface.<\/li>\n<\/ul>\n
\nImportance for usability<\/span>
\n<\/h2>\nThe screen layout<\/b> it goes hand in hand with the technical, psychological, and still practical aspects of a user interface. In the preliminary stages, attention should be paid to the target group, the purpose of the user interface, and the framework in which it exists. Whether it is a web portal, a mobile device web portal, or a software application, the screen design not only refers to the first impression of an application, but is a key factor in terms of the graphical properties of the entire interface. of user. Therefore, screen design plays a particularly important role in the areas of usability, user experience, and human-machine interaction. Screen layout affects website, app, and software conversions.\n<\/p>\n
<\/p>\n
<\/p>\n
\n<\/div>","protected":false},"excerpt":{"rendered":"
El dise\u00f1o de pantalla describe el dise\u00f1o de interfaces gr\u00e1ficas de usuario. El dise\u00f1o de pantallas incluye una amplia variedad de apps en las que se pueden usar pantallas como…<\/p>","protected":false},"author":1,"featured_media":69828,"parent":0,"template":"","glossary-cat":[],"class_list":["post-69827","glossary","type-glossary","status-publish","has-post-thumbnail"],"yoast_head":"\n
Dise\u00f1o de Pantalla - R Marketing Digital<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/wiki\/diseno-de-pantalla\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o de Pantalla\" \/>\n<meta property=\"og:description\" content=\"El dise\u00f1o de pantalla describe el dise\u00f1o de interfaces gr\u00e1ficas de usuario. El dise\u00f1o de pantallas incluye una amplia variedad de apps en las que se pueden usar pantallas como...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/wiki\/diseno-de-pantalla\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-28T21:47:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/05\/600x400-dise\u00f1odepantalla-es-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"589\" \/>\n\t<meta property=\"og:image:height\" content=\"392\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wiki\\\/diseno-de-pantalla\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wiki\\\/diseno-de-pantalla\\\/\",\"name\":\"Dise\u00f1o de Pantalla - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wiki\\\/diseno-de-pantalla\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wiki\\\/diseno-de-pantalla\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/600x400-dise\u00f1odepantalla-es-01.png\",\"datePublished\":\"2022-08-19T04:22:35+00:00\",\"dateModified\":\"2024-10-28T21:47:29+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/wiki\\\/diseno-de-pantalla\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wiki\\\/diseno-de-pantalla\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/600x400-dise\u00f1odepantalla-es-01.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/600x400-dise\u00f1odepantalla-es-01.png\",\"width\":589,\"height\":392,\"caption\":\"600x400-disenodepantalla-es-01-9843781-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dise\u00f1o de Pantalla - R Marketing Digital","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/wiki\/diseno-de-pantalla\/","og_locale":"en_US","og_type":"article","og_title":"Dise\u00f1o de Pantalla","og_description":"El dise\u00f1o de pantalla describe el dise\u00f1o de interfaces gr\u00e1ficas de usuario. El dise\u00f1o de pantallas incluye una amplia variedad de apps en las que se pueden usar pantallas como...","og_url":"https:\/\/rmarketingdigital.com\/en\/wiki\/diseno-de-pantalla\/","og_site_name":"R Marketing Digital","article_modified_time":"2024-10-28T21:47:29+00:00","og_image":[{"width":589,"height":392,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/05\/600x400-dise\u00f1odepantalla-es-01.png","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/wiki\/diseno-de-pantalla\/","url":"https:\/\/rmarketingdigital.com\/wiki\/diseno-de-pantalla\/","name":"Dise\u00f1o de Pantalla - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/wiki\/diseno-de-pantalla\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/wiki\/diseno-de-pantalla\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/05\/600x400-dise\u00f1odepantalla-es-01.png","datePublished":"2022-08-19T04:22:35+00:00","dateModified":"2024-10-28T21:47:29+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/wiki\/diseno-de-pantalla\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/wiki\/diseno-de-pantalla\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/05\/600x400-dise\u00f1odepantalla-es-01.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/05\/600x400-dise\u00f1odepantalla-es-01.png","width":589,"height":392,"caption":"600x400-disenodepantalla-es-01-9843781-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/glossary\/69827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/glossary"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/glossary"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/glossary\/69827\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/69828"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=69827"}],"wp:term":[{"taxonomy":"glossary-cat","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/glossary-cat?post=69827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}