1 Introduction

Graphic Design has long studied grid and typography, but there are very few studies of such variables on digital artifacts [1]. A Grid organizes the page, giving it structure, hierarchy and consistency [2] in a very different manner on the web than on paper [3]. Typograpy is “[…] the means by which a visual form is given for a written idea […] a visual language that enhances power and clarity” [4]. Both typography and grid are vital to the final usability of a digital site [5]. This research proposes Grid and Typography Guidelines to inform the design of digital art magazines considering the usability aspects of the website media.

2 Methodology

The authors selected three variables: for Grid the variables are: Structure, Hierarchy, and Constancy and Variation; For Typography the variables are: Legibility, Hierarchy, and Identity. The authors analyzed five art magazines for their best and worst practices: three Brazilian magazines (DASartes, Select, and Zupi), one American (Triple Canopy), and one British (Aesthetica Magazine).

Figure 1 shows the methodology used: the authors selected from the theoretical references the Design principles and their variables regarding their application on the Web. Then the authors performed an expert evaluation of the websites of the selected art magazines as per best and worst practices. The overall findings were compiled into a set of Guidelines. The guidelines were user-tested and validated as per the UTAUT methodology, proposed by Venkatesh et al. [6].

Fig. 1.
figure 1

Methodology

Full size image

3 Elaboration of the Guidelines

The first step consisted of a thorough bibliographical research to identify design best practices and recommendations. With said recommendations, the authors analyzed the sites of the five Magazines. A total of 30 analyzes was performed, crossing six variables (three for grid plus three for typography) with five art magazines. Worst and best practices were found, as well as their recurrence in the studied websites. Worst practices were thus categorized due to lack of following the indicated conditions. The authors then compiled a series of ideas to help solve the problems. Best practices were considered as such because they met the pre-established requirements or because they have been shown to be functional and well applied in the design of websites.

As an example, Fig. 2 shows Triple Canopy Magazine as a successful illustration of how the guidelines can be implemented. The website has coherent alignments relating the header with the image at the bottom. It has a visible navigation, with the three lines fixed menu at the left top of the page. The images are fully shown on the screen, the grid of the pages vary in order to respect the different contents but also maintains consistency in order to keep the reference of the website. Regarding the typography options we can perceive that the font respects the text’s function, calling for attention when necessary and being informative if it needs so. It has an identity coherent with the magazine’s style, has a clear hierarchy, legibility and readability. The type size is accordant with the medium (in this case, a desktop screen).

Fig. 2.
figure 2

Example of website

Full size image

The guidelines were derived by a compilation of the results into a series of best practices to be followed by designers to inform their future design. The guidelines related to grid are the following: (a) Coherent alignments (the grid must be coherent with the content); (b) Visible Navigation (important elements should be “on display”; (c) Visual elements arrangement (random display of content may prevent a good layout); (d) Proportions (make your images responsive); (e) Variation according to each page (grids should follow content and platform specificities); (f) Logical constancy (menu, footnotes and margins may have a fixed location); (g) Responsiveness. Guidelines for Typography: (a) Understand the function of the text (legibility, form etc.); (b) Typography has identity (it communicates subjective impressions); (c) Balance; (d) Hierarchy for organization; (e) Value Legibility and Readability; (f) Consider type size according to the medium; and (g) Adequate spacing.

4 Validation of the Guidelines

Initial validation came from the literature review that provided the theoretical base with which to create the guidelines. Then the authors used those guidelines to perform heuristic evaluation of websites of art magazines; the heuristics are presented elsewhere. Finally, an Intent of Use validation was performed, as per the UTAUT (Unified Theory of Acceptance and Use of Technology) proposed by Venkatesh et al. [6]. For this evaluation, the construct “Social influence” was not considered because the user research was completely voluntary.

The intent of use validation followed an online survey format with the questionaire available for a 10-day period (from July 14th to July 25th, 2015). There were 23 responses from designers. For each construct of the UTAUT model, a hypothesis and its related questions can be found on Fig. 3.

Fig. 3.
figure 3

Hypothesis confidence interval

Full size image

The Student t distribution was used in order to measure the answer’s confidence interval and to validate the hypothesis. Figure 3 shows the construct, its related hypothesis and questions, the means the confidence interval. According to the results, all the hypothesis for the proposed guideline have a 99.95 % of confidence interval, thus validating the guidelines.

The Guidelines were written in an informal language to appeal to young designers. The final guide is freely available online, on the following address: http://annaretore.wix.com/guideline#!home/c1dmp.

5 Conclusion

This research considers the digital media as its own language, respecting it as being separate from the printed media. The guidelines derived after the analysis will help designers in their task of creating digital art magazines that take into consideration design and usability aspects. During the research, a process for analyzing variables was created (see Fig. 1): such process can be used in future studies for other variables. This paper makes the guidelines available to the design community.

There is a natural limitation on these guidelines. They address a very specific field and the results may not be transferred to all web sites and other scenarios. However, they can be the beginning for future studies.