Basic processes and methods of layout structuring

The traditional consideration of layout design

The main method of structuring a layout is the use of empty blocks – rectangular frames (ie. placeholders) that are substitutes to establish the place and the way in which the content will be located. Thus, long before the establishment of some aesthetic details, we can easily test various variants that will lead to the establishment of the website’s architecture.

In general, this stage includes the establishment and representation of a main website navigation map (generically called Sitemap). These can represent different types of content, primary or side menus, the placement of a logo, a CTA button, or overall containers that can in turn be split into other sub-content blocks. From a technical point of view, this stage can be crafted in any graphic editing software, it being preferable to make some manual sketches on paper or blackboard. Also in this stage we will establish what is the main order of reading the blocks and what are the heavy traffic elements. This stage is more of an internal decision on content.

Tradittionaly a first step in creating web layouts was to build or install a 960px (pixel) grid system. The grid could be built directly in Adobe Photoshop by drawing guide lines and using the digital ruler, or it can be downloaded for free from various providers such as 960.gs. The purpose of this grid is to easily arrange information in units of pixels directly divisible by 3, organized in 12 or 16 columns. The use of a grid is still recommended due to the precise measurements that will later be transcribed into html and css code. The 960px size is most often used due to the ease of adapting the design for the monitors of large devices 1920×1080 px or for medium ones such as an Iphone4 – 320 × 480 points or retina display 640 x 960 px finally reaching micro-dimensions for example an Apple Watch of 272 x 340 pixels.

Aligning pixels with the above-named pixel-perfect measurement grid is still recommended since it facilitates the proper implementation of design elements within digital interfaces. By using this procedure, each pixel of the page is used wisely with the aim of avoiding the process of visual aliasing.

Suggestion: before producing visual interfaces in the Adobe Photoshop program we must check the command snap vector tools and transforms to pixel grid (located in Edit/Preferences/General menu). Once the command is active we will hold the Shift key to automatically align the objects to the pixel grid or lines guidance.

 

Although is highly recommended, technically pixel alignment is a more complex dilemma when it comes to testing and implementing results across different browsers and devices.

According to the common rules for the production of online interfaces, each website will have a fixed basic structure – which can also be called a template – which refers to the elements that will be common to most pages (ie. the logo, a menu, a main column, sidebar, header, footer, etc.) and a dynamic structure that refers to the information that will alternate between various types of content (ie. text, image, titles, video content, interactive buttons), dynamic forms of information collection etc..

In order to move the information that is structured with the help of desgin tools, many visual designers recommend the organization of content by groups of layers and sub-groups in the most complex situations. To easily select a group of layers in Photoshop, make sure you check the Auto-select: layers or groups command, located in the info bar of the (V) – move tool.

Suggestion: Depending on the type of interface, we can rename the layers in such a way as to facilitate its transposition into the programming language by us or by an approved programmer. Establishing a common language facilitates teamwork. Often these files can be made by one person and completed by another. Ie. header, main_content, btn_active, sidebar, image_placeholder, footer.

 

One of the first things we need to consider when producing a visual interface is the pixel size of the pages and the relationship between it and various devices. A minimum of three adaptations is generally adopted: 1920 x 1080 px – large monitor, 1366 x 768 px medium monitor and 768 x 1024 px small monitor or 800 x 600 px for tablets. Contrary to the use of a fixed size, at the moment, due to the increased number of devices and resolutions, an indicated solution is the use of a fluid layout – implemented by setting some sizes in (%) percentages within the css files as well as some terminal-type rules – which will be interpreted by the browser for a correct layout according to the specifications of the devices. I will return to this issue in an later article focused entirely on responsive design.

In order to methodically arrange the information and obtain a fluent navigation, I recommend a thorough study of the Gestalth principles enunciated by the German psychologist Max Wertheimer, Kurt Koffka and Wolfgang Köhler starting in 1910. According to Gestalth psychology, there are several principles that influence perception. These are based on the user perception and pathway through the visual interface: progressive perception, reification, multistability and invariance. In detail, Gestalt theory lists more than 10 fundamental principles underlying perception, some of which have become basic pillars in interface design.

  1. The principle of simplicity
  2. The principle of closure
  3. The principle of symmetry
  4. The form/substance principle
  5. The principle of connection
  6. The principle of framing
  7. The principle of proximity
  8. The principle of continuity
  9. The principle of common destiny
  10. The principle of parallelism
  11. The principle of similarity
  12. The principle of focus
  13. The principle of previous experiences

According to the common parameters established by W3C, the correct optimization of the images that will be uploaded to the server is 72 dpi and must be saved in the commonly accepted formats: png. Jpeg. GIF. (in the case of small animations).

 

Creating a Sitemap

A sitemap is a virtual map of a website that serves designers to organize the information coherently both from the point of view of navigation and the correct arrangement of the content. This map is adopted in pre-design stage and is considered more of an information synthesis step.

If the basic structure of a website is a model of the final product, when we talk about the architecture of a website, we refer both to the way it will work and to the aesthetic valences of the interface. A visual presentation should be as pleasant as possible. The designer make sure the navigation is coherent and adjusts many optical considerations. The final outcome is influenced by the technical choices, styles and attributes which are incorporated in the css. document of the website.

 

A few rules on typography. Styling fonts for online usage

Starting from the premises of typographic design, one of the most important aspects that we must study for a long time in the case of the online environment is the choice of a range of appropriate fonts. The text styling will represent the brand’s identity and the overall visual mood and voice of the product.

Suggestion: A method often used in the world of web design to choose the right fonts is to alternate between a serif font for titles ie. Georgia with a sans serif to represent paragraphs ie. Open Sans Family.

 

Designers agree to use fonts approved by the web browser manufacturers, for example Google Fonts. Most brands use a well-defined hierarchical structure determined by the font size. The dimensions are organized according to the importance of the content in the context. Called headings, they are assigned descending from H1 (represented in the <h1> code) – the largest font size, H2, H3, H4, H5, to the smallest size H6 – generally used for image captions or providing additional information. The main paragraph template is defined by the character p (represented in the <p> code) being set to 12px-14px.

Among the most used contemporary fonts I mention: Roboto Font Family, Open Sans, Arial, Verdana, Montserrat, Pt Sans, Source Sans Pro, Raleway, Pacifico, Ubuntu, Georgia, Lato, Noto, Lora etc.

For a better understanding of web typography I recommend the article A UI/UX Designer’s Guide To Web Typography written by Loop11, a company conducting user research and testing.

Color: contrast and Hex codes, RGB Color Channel

The theory of contrasts which is traditionally defined in the field of visual arts is successfully applied to the production of virtual interfaces. According to the principles and symbolism of colors, we must associate the shades used with the values ​​and presentation context of the interface.

Note: In order to avoid the use of a too wide color range, some designers recommend the method of working in black and white of the interface. After establishing the general layout, they use color accents in the areas of interest of the interface, such as in the case of buttons of interest. Unexpectedly, this technique offers easy control over the dominates, reinforcing the unitary aspect of the product.

Regarding the technical methods of conversion into code, the colors are transformed into hex codes (hexadecimal codes) which are assigned to each element in the css file.

Suggestion: Any type of web content will use the RGB color channel represented by the percentage composition of the colors Red, Green, Blue on a scale from 0 to 255. In the case of printed materials, the CMYK channel is most used. Web designers also prefer the RGBA – that includes an extra channel (alpha channel) for representing the transparency information of an visual element. 

 

Not at all unexpectedly, the visual elements of an interface will take on the properties of objects in the environment. In reality the properties of objects are defined by the light-shadow relationship. This process can be easily assign to the design elements that populate a website. In the case of the virtual world, the light projected correctly on the objects (such as content boxes) will highlight or willfully obscure the passage of the visual space.

In the contemporary period, most virtual interfaces use a well-defined color palette which is consistent visually and conceptualy. Establishing a clear color ratio – a well-defined color scheme – dramatically increases or ensures the positive perception of the promoted product.

Navigation: menus, principles and types

Like a complex machine, a web interface will provide the means by which the user can access, manipulate and direct virtual information in order to achieve a result – preceded by an action or to ensure the appropriate consumption of the presented content.

Similar to a trigger mechanism, a menu represents the 0 point of an action of an interactive interface. It is the main navigation element of a website which it is represented visually by the burger menu symbol (3 parallel bars superimposed at equal distances). Oftenly, the menu is composed of a sequence of simple texts (a list of links). When visual designers preffer other methods or even a different placement than the standard one – the users have trouble to navigate the interface.

Note: According to the good practices recommended by W3C, it is preferable to use the text type menu, constantly present in the header of a website. The exception is in the case of mobile navigation, where for limited space reasons, the burger-menu is preffered.

 

Apart from the method described above, secondary menus are added to develop an auxiliary level of interactivity. An example used in most interfaces is the link menu incorporated in the footer of a website. If using a sidebar, tabs, accordeons and links can be implemented to redirect the user.

Content types

Depending on the type of information, the structure it represents and the actions triggered, the visual elements forming an interface can be organized into several categories: navigation elements, common elements, dynamic elements and static content elements.

Comonly used by visual designers: Headers, image sliders and various sections, blocks, backgrounds, full-width images, videos, texts, buttons, links, CTA sections, contact forms, log in forms, sign up forms, footers, social media links etc..

Inevitably the menus presented in the previous section will be part of the navigation elements category. Along with these, you can add: sub-menus, navigation arrows present in various slides; the logo – implemented through the home link; contextual menus (ie. dropdowns) that reveal additional options; the scroll bar and other elements or links; the read more buttons or tabs that can be expanded.

COMMON ELEMENTS 

The common elements of the interface are those delimited within the basic static structure of the website: header, the primary column, sidebar, pre-footer and footer. These are fixed containers in which the dynamic information will be placed. Although, on an innovative note, these elements may be different when we navigate from one page to another, in the digital world it is recommended to avoid confusion by using perception by similarity and the concept of familiarity. So it is possible that the user will learn faster to use a familiar interface – with elements placed in generic locations – at the expense of a creative design – which intends to hide the means of navigation.

Note: One frequent pattern in UX design is the implementation of buttons redirecting to social networks in the footer section.

 

DYNAMIC ELEMENTS 

Dynamic elements represent the fully interactive regions of a website: the login or signup forms, the contact form, animations, transitions, calendars, micro-applications, complex commands or other elements that require the implementation of an operating script based on the feedback-response system following direct interaction with the software.

FIXED CONTENT

Visual designers consider fixed content, static elements that can be easily placed in any region of a website: pages, texts, images, lists, buttons, covers, quotes, testimonials, badges, etc. Their typology can be different from one page to another, from one website to another.