Determining rendering data for a graphical user interface

Abstract

A computer-implemented method (100) for determining rendering data for a graphical user interface (10), GUI. The method comprises obtaining (110) a modular scale (30) for a plurality of design elements (20) of the GUI (10); determining (120) a scaling rate (50) for the modular scale (30); applying (130) the scaling rate (50) to the design elements (20) such that the modular scale (30) is propagated to reflect sizing properties (32) of the design elements (20) in relation to at least one pixel set (42); and determining (140) the rendering data based on the scaling rate (50) being applied to the design elements (20), wherein the GUI (10) comprising the rendering data is renderable on a computer display (62) associated with one of a baseline pixel set (40) or a pixel set (42) different from the baseline pixel set (40).

Description

[0001] DETERMINING RENDERING DATA FOR A GRAPHICAL USER

[0002] INTERFACE

[0003] TECHNICAL FIELD

[0004] The present invention relates to a computer-implemented method for determining rendering data for a graphical user interface, GUI. The present invention also relates to an associated computerized system, non-transitory computer-readable storage medium and computer program product.

[0005] BACKGROUND

[0006] Design systems are fundamental tools in the creation of GUIs. The GUIs may enable functionalities of various programs, such as web, mobile, native or hybrid applications. The prior art teaches of various ways of managing creation of design systems, and are typically separated into static or dynamic approaches, or combinations thereof.

[0007] Static design approaches often rely on static grids, predefined proportions, fixed templates, etc., and are not easily adaptable to changes to, for example, screen sizes, contexts or user preferences. Static design approaches may be advantageous for providing a consistent and standardized design language which makes it suitable for projects with well-defined requirements, but struggle to adapt to the diverse range of devices, screen sizes, and platforms in today’s digital age. Therefore, with the use of static design approaches it is challenging to create cohesive and responsive designs.

[0008] Dynamic design approaches typically employ various algorithms, automation techniques or real-time adaptations to adjust design elements based on changing contexts, user preferences and device constraints. While offering adaptability and responsiveness, dynamic design approaches may face implementation challenges due to their inherent complexities and resource-intensive nature. These complexities arise from the need for sophisticated algorithms to dynamically adjust design elements in realtime, which can be computationally demanding and require specialized expertise. Additionally, the resource requirements, such as processing power and memory, can be substantial, potentially leading to increased costs and technical constraints during

[0009] P187270001 implementation. Finding the right balance between dynamic adaptability and efficient resource utilization is a key consideration in the development of dynamic design systems.

[0010] Regardless of whether static or dynamic approaches are being used, there exist numerous problems with prior art design systems. The present inventor has identified these problems and has accordingly developed an innovative approach which seeks to eliminate, or at least mitigate, one or more of the deficiencies of the prior art.

[0011] SUMMARY

[0012] In view of the above, in a first aspect of the disclosure there is provided a computer-implemented method for determining rendering data for a GUI, the method comprising: obtaining a modular scale for a plurality of design elements of the GUI, the modular scale defining respective sizing properties of the design elements in relation to a baseline pixel set; determining a scaling rate for the modular scale, the scaling rate indicating a factor by which the design elements are to be adapted in response to a relation of said sizing properties being established with at least one pixel set different from the baseline pixel set, and wherein the scaling rate determines positional relationships between the design elements; applying the scaling rate to the design elements such that the modular scale is propagated to reflect the sizing properties of the design elements in relation to said at least one pixel set; and determining the rendering data based on the scaling rate being applied to the design elements, wherein the GUI comprising the rendering data is renderable on a computer display associated with one of the baseline pixel set or a pixel set different from the baseline pixel set.

[0013] In some examples, the scaling rate is applied to the design elements by multiplying said factor by which the design elements are to be adapted with the respective sizing properties of the design elements.

[0014] In some examples, the scaling rate is a predetermined value between 0.500 and 1.500, more preferably between 0.800 and 1.200.

[0015] In some examples, the positional relationships between the design elements are defined as one or more of a ratio of change, a direction of change and a magnitude of change.

[0016] P187270001 In some examples, obtaining the modular scale comprises applying an initial scaling rate to a baseline sizing property of a baseline design element from among the plurality of design elements such that modular scale is obtained as a result of a propagation of the baseline sizing property of the baseline design element to the remaining design elements.

[0017] In some examples, the method further comprising determining one or more change factors of the scaling rate, the change factors applied to the scaling rate causing the propagation of the modular scale to occur at a predefined rate.

[0018] In some examples, each change factor includes two or more fixed values, the fixed values being different from one another.

[0019] In some examples, the scaling rate is automatically determined depending on one or more of a type of the GUI, statistical data associated with the GUI, a type of the computer display on which the GUI is to be rendered, personal preferences, and a combination thereof.

[0020] In some examples, the design elements are one or more of typefaces, icons, images, tables, buttons, forms, navigation menus, whitespaces, animations, bars, grids, hover effects, sliders, selectors, and combinations thereof.

[0021] In some examples, the sizing properties are one or more of widths, heights, paddings, margins, borders, box-sizings, line heights, font types, font sizes, font stylings, transforms, scales, aspect ratios, positions, floats, and combinations thereof.

[0022] In some examples, the method further comprising rendering the GUI as a dynamic design system on the computer display using the rendering data.

[0023] In some examples, the method further comprising rendering the GUI as a static design system on the computer display using the rendering data.

[0024] In a second aspect of the disclosure there is provided a computerized system comprising a processor configured to perform the functionality of the method of the first aspect.

[0025] In a third aspect of the disclosure there is provided a non-transitory computer- readable storage medium comprising instructions, which when executed by one or more processors of a computerized system, cause the processor to perform the functionality of the method of the first aspect.

[0026] P187270001 In a fourth aspect of the disclosure there is provided computer program product comprising computer code for performing the functionality of the method of the first aspect.

[0027] It should be emphasized that the term “comprises / comprising” when used in this specification is taken to specify the presence of stated features, integers, steps, or components, but does not preclude the presence or addition of one or more other features, integers, steps, components, or groups thereof. All terms used in the claims are to be interpreted according to their ordinary meaning in the technical field, unless explicitly defined otherwise herein. All references to "a / an / the [element, device, component, means, step, etc.]" are to be interpreted openly as referring to at least one instance of the element, device, component, means, step, etc., unless explicitly stated otherwise. The steps of any method disclosed herein do not have to be performed in the exact order disclosed, unless explicitly stated.

[0028] BRIEF DESCRIPTION OF THE DRAWINGS

[0029] The foregoing will be apparent from the following more particular description of the example embodiments, as illustrated in the accompanying drawings in which like reference characters refer to the same parts throughout the different views. The drawings are not necessarily to scale, emphasis instead being placed upon illustrating the example embodiments.

[0030] FIG. l is a schematic illustration of a computerized system according to one example.

[0031] FIGS. 2A-D are schematic illustrations for determining rendering data for a graphical user interface according to one example.

[0032] FIG. 3 is a schematic illustration further exemplifying the example of FIG. 2D.

[0033] FIG. 4 is a diagrammatical illustration further exemplifying the example of FIG. 2D.

[0034] FIG. 5A is a schematic illustration of a computer-implemented method for determining rendering data according to one example.

[0035] P187270001 FIG. 5B is a diagrammatical exemplary illustration of the rendering data of

[0036] FIG. 5 A.

[0037] FIG. 6A is a schematic illustration of a computer-implemented method for determining rendering data according to one example.

[0038] FIG. 6B is a diagrammatical exemplary illustration of the rendering data of FIG. 6A.

[0039] FIG. 7A is a schematic illustration of a computer-implemented method for determining rendering data according to one example.

[0040] FIG. 7B is a diagrammatical exemplary illustration of the rendering data of FIG. 7A.

[0041] FIG. 8 is a schematic flowchart of a computer-implemented method for determining rendering data for a graphical user interface according to one example.

[0042] FIG. 9 is a schematic illustration of a computerized system according to one example.

[0043] FIG. 10 is a schematic illustration of a computer-readable storage medium according to one example.

[0044] DETAILED DESCRIPTION OF EMBODIMENTS

[0045] Embodiments of the invention will now be described with reference to the accompanying drawings. The invention may, however, be embodied in many different forms and should not be construed as limited to the embodiments set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the invention to those skilled in the art. The terminology used in the detailed description of the particular embodiments illustrated in the accompanying drawings is not intended to be limiting of the invention. In the drawings, like numbers refer to like elements.

[0046] A major concern of today’s display device technology is related to computer displays not having a well-established standard in terms of, for instance, screen sizes, resolutions and aspect ratios. For example, Apple’s iPhone 14 has a 6.1” physical screen size and its resolution is about 1170 x 2532 pixels with approximately 460 PPI (pixels per inch) pixel density, whereas Google’s Pixel Tablet has a 10.95” physical screen size

[0047] P187270001 and its resolution about 2560 x 1600 pixels with approximately 276 PPI pixel density. As of today display manufacturers therefore typically have free rein when it comes to designing devices as they see fit to their particular needs, standards and compatibility properties. This leads to the market having a substantial range of different devices with different characteristics pertaining to sizing properties. Consequently, it becomes particularly challenging to determine rendering data of GUIs that is readily adaptable to a given device. Oftentimes the designing of novel GUIs is a manual labour which involves conducting trial-and-error methodologies. Developers and designers may need to spend a considerable amount of time experimenting with different layouts and configurations to achieve the desired user experience. This extended design phase can increase development costs and time-to-market, posing challenges for businesses seeking efficient product development. Without proper adjustment of GUIs to particular devices with predefined sizing properties, there may arise inconsistencies and suboptimal user experiences on different devices, ultimately limiting the reach and usability of the software and undermines cross-platform compatibility.

[0048] Moreover, because of the lack of universal applicability of design systems in this regard, some computer displays fail to convey the distinctions between different functionalities or elements within the interface effectively. This lack of clarity can result in users finding it challenging to understand the purpose and usage of various GUI components. User errors can thus occur due to confusing or improperly labeled elements, potentially leading to data loss or unexpected behavior which diminishes system robustness.

[0049] In addition to the above, older GUI design methods may not allocate system resources, such as screen space, memory, and processing power, efficiently. This is especially the case for resource-intensive application programs requiring meticulous arrangement and control of a significant number of design element simultaneously and in relation to one another. When the layout of design elements of the GUI lacks proper control, it can detrimentally impact a system's performance, stability, and robustness. Inefficient GUI layouts often result in a wasteful utilization of system resources, causing sluggish performance and reduced responsiveness. This resource misallocation can also lead to slowdowns or system crashes, especially during high-demand

[0050] P187270001 situations. Over time, maintaining GUI layouts becomes cumbersome and costly as updates can introduce unforeseen issues. Inadequate layouts might also conflict with accessibility tools or introduce security vulnerabilities, thereby compromising the system's reliability and security. User dissatisfaction is a common outcome, possibly resulting in a dwindling user base and a tarnished system reputation. Generally, a well- controlled GUI layout is integral to sustaining a system's speed, stability, and overall robustness, ensuring efficient resource use and a positive user experience.

[0051] The present disclosure therefore aims to address the problems described above by providing a solution that establishes a standard for computer displays, streamlines GUI design processes, optimizes resource allocation, and enhances universal applicability. This solution offers technical advantages to ensure efficient resource utilization, consistent performance, and a positive user experience while maintaining system stability and reliability. Although static and dynamic approaches are typically associated with different types of concerns, the subject matter introduced herein may advantageously be applied to practically any type of system having computer displays of some sorts, no matter the design approaches being employed.

[0052] FIG. 1 shows a computerized system 200 where some of the inventive concepts of the present disclosure may be applied. The system 200 comprises various kinds of computing devices 60. The computing devices include typical end-user devices 60, or client devices, such as tablet computers (e.g., surf pads), mobile terminals (e.g., smartphones or personal digital assistants), personal computers (e.g., laptops, personal computers or work stations) or informatics terminals (e.g., electronic billboards, digital signage displays or static information kiosks). Note that the computing devices 60 included in the system 200 may be used for two different purposes. The first purpose is to carry out the computer-implemented method 100 by way of generating the rendering data for a computer display 62. The second purpose is to render the GUI on a computer display 62 using the rendering data. In some examples the computing device 60 generating the rendering data is the same computing device 60 that renders the GUI using the rendering data, although this is not required. The present disclosure is not limited to a particular setup of computing devices 60 for the purposes of generating rendering data or rendering the rendering data.

[0053] P187270001 Each computing device 60 comprises a computer display 62, although this is an optional feature for purposes of generating the rendering data. The computer display 62 may be associated with a particular pixel set. The pixel set is in the context of the present disclosure a group of pixels arranged in a particular configuration or pattern to display information. The pixel set may be defined as a resolution, i.e., as the number of pixels in both the horizontal and vertical directions of the computer display 62. Some common computer display resolutions include Full HD (1920x1080), 2K (2560x1440), 4K (3840x2160), 5K (5120x2880), 8K DCI (8192x4320). However, it is envisaged that the computer display 62 may be associated with any computer display resolution, no matter whether it is standardized in the art or not. For instance, the Nokia 1011, released in 1992, had a simple monochrome LCD display with a resolution of around 48x48 pixels. The present disclosure would, at least conceivably, be applicable also for such type of prior art computer display resolutions, as well as resolutions up to 8K and even greater than that being envisaged in the future of display technology. Although the pixel set is typically defined as a resolution of the computer display 62, the pixel set may alternatively be defined in relation to other properties of the computer display 62, including but not limited to widths, heights, PPI, aspect ratio, screen size, orientation (portrait / landscape mode), subpixel arrangement (one or more portions of the computer display 62), bezel size, viewport, virtual screen or perceived pixel set.

[0054] The computer display 62 is configurable to present visual information through a GUI 10. The GUI 10 may be visualized through rendering of rendering data. The GUI 10 may be rendered as a dynamic design system on the computer display 62. The GUI 10 may be rendered as a static design system on the computer display 62. The GUI 10 may be rendered using the rendering data through one or more rendering technologies known in the art. Such rendering technologies include, for example, CPU / GPU rendering, ray tracing, screen space reflections, baked lighting, parallax mapping, rendering pipelines, vertex processing, rasterization, texturing, shading and frame buffering. The GUI 10 allows for a user to interact with visual information. The user interaction may be purely visual, i.e., by a user viewing the information provided by the GUI 10. Optionally, the user may interact with the GUI 10 through one or more input devices such as a mouse, touch screen, digital pen, trackpad, and the like. It shall

[0055] P187270001 therefore be understood that in the context of the present disclosure, the GUI 10 may be rendered on the computer display 62 statically, and optionally with one or more dynamic elements included.

[0056] The GUI 10 comprises a plurality of design elements 20-1, 20-2, 20-n. Generally, a design element 20 is an element comprising visual information that is presentable and viewable on the computer display 62 through the GUI. A design element 20 may be one or more of typefaces, icons, images, tables, buttons, forms, navigation menus, whitespaces, animations, bars, grids, hover effects, sliders, selectors, and combinations thereof. Other similar design elements 20 being presentable on GUIs may be envisaged by the skilled person.

[0057] The design elements 20 comprise at least one sizing property. A sizing property may define a size, form, shape, etc., of the design elements 20. Additionally or alternatively, a sizing property may define a relationship between a first design element 20-1 and one or more additional design elements 20-2, 20-n. The sizing properties may be one or more of widths, heights, paddings, margins, borders, box-sizings, line heights, font types, font sizes, font stylings, transforms, scales, aspect ratios, positions, floats, and combinations thereof.

[0058] Reference will now be made FIGS. 2A-D which illustrate a computer- implemented method 100 for determining rendering data for a GUI according to various examples. The examples herein consider design elements 20 being typefaces with sizing properties as font sizes. However, as understood given the above explanation, other type of design elements and associated sizing properties are envisaged in other examples. The illustration is in this particular example shown as a table, although it is merely for illustrative purposes. The rendering data may alternatively be provided using some other type of data structure, e.g., charts, plots, maps, diagrams, graphs, and the like. The rows of the tables show a plurality of design elements 20, denoted Base, Negl-n, Posl- n, where n is an arbitrary number which depends on the number of different types of design elements 20 with different sizing properties 32. The columns of the tables show a plurality of pixel sets 40; 42-1, 42-n. In these examples the used pixel sets 40; 42-1, 42- n range from 300 to 1500 and denote pixel widths of different types of computer displays. The baseline pixel set 40 represents a starting point serving as a reference for

[0059] P187270001 future comparisons and evaluations, i.e., a benchmark against which resizing of the design elements 20 is measured. In this particular example the baseline pixel set 40 is the smallest pixel set of the table, although it may in other examples be any arbitrary pixel set, for instance from among additional pixel sets 42-1, 42-n. The additional pixel sets 42-1, 42-n correspond to other pixel sets which the design elements 20 may be adaptable for.

[0060] In FIG. 2A, a modular scale 30 is obtained for the design elements 20. The modular scale 30 defines the respective sizing properties 32 of the design elements 20 in relation to the baseline pixel set 40. What this means is that for computer displays 62 having pixel sets corresponding to the pixel width 300, the modular scale 30 defines sizing properties 32 of the design elements 20 accordingly. In this very example, the design elements 20 and sizing properties 32 of the modular scale 30 for the baseline pixel set 40 are as follows: 7Veg7(14), Neg2(Y2 Base(\6), Posl( &), Pos2 2Q Pos3(23), Pos4(2T), Pos5(31), Pos6(35). In this example the Neg and Pos values are respectively derived from the Base value by an initial scaling rate. The design elements Negn, Posn and related sizing poperties sriri and spn, respectively, illustrate that the modular scale 30 may define sizing properties 32 of any given design element 20 for any given pixel set 42.

[0061] Generally, the modular scale 30 may be seen as an initial sizing chart or settings, defining the respective sizing properties 32 of the design elements 20. The modular scale 30 may be obtained in various different ways, for instance by way of receiving a fixed scale with fixed sizing properties or by way of determining a particular scale. In this exemplary modular scale 30 there is a direct relationship between the respective sizing properties 32. The relationship is determined by an initial scaling rate. Other exemplary initial scaling rates will be explained later on in this disclosure. In other examples, however, the sizing properties 32 of the modular scale are arbitrarily chosen. Hence, there need not necessarily be any fixed relationship between the respective sizing properties 32 of the design elements 20. In some examples, the sizing properties 32 of the modular scale 30 are related to one another by an initial scaling factor. The initial scaling factor may be a fixed value. The initial scaling factor may be a varying value depending on various circumstances, including but not limited to type of

[0062] P187270001 design element 20, type of sizing property 32, type of GUI, type of computer display, and the like. In other examples, the sizing properties 32 of the modular scale 30 are arbitrarily related to one another. In yet other examples, combinations of these examples may be realized, i.e., two or more of the sizing properties 32 of the modular scale 30 are related to one another while at least one of the sizing properties 32 of the modular scale 30 is arbitrarily chosen.

[0063] FIG. 2B determines a scaling rate 50 (denoted 5r(x)) for the modular scale 30. The scaling rate 50 indicates a factor x by which the design elements 20 are to be adapted in response to the sizing properties 32 being related to pixel sets 42-1, 42-n other than the baseline pixel set 40. The scaling rate 50 is therefore applicable to modify the sizing properties 32 of the design elements 20 by a particular rate such that they are adaptable for e.g., computer displays having any given pixel set. The scaling rate 50 may reduce the size of the design elements 20. The scaling rate 50 may increase the size of the design elements 20. For values below 1.000, the scaling rate 50 may modify the sizing properties of the design elements 20 such that they are reduced in size. Correspondingly, for values above 1.000, the scaling rate 50 may modify the sizing properties of the design elements 20 such that they are increased in size. The scaling rate 50 may be a predetermined value between 0.500 and 1.500. More advantageously, the scaling rate 50 is a predetermined value between 0.800 and 1.200. Other suitable predetermined values may alternatively be realized, even smaller or larger than 0.500 and 1.500, respectively.

[0064] The scaling rate 50 may determine positional relationships between the design elements 20. This means that the scaling rate 50 may represent the change or relative movement of a first design element value with respect to a second design element over a certain period of time or under certain conditions. In other words, the scaling rate 50 may provide information about how the values of the design elements 20, typically the sizing properties 32, are situated or arranged relative to each other. The positional relationship may thus be defined as a ratio of change (e.g., a ratio or fraction that describes how a change of a first design element affects a second design element), a direction of change (e.g., a positive rate may imply an increase in a first design element with respect to a second design element, while a negative rate implies a decrease), a

[0065] P187270001 magnitude of change (e.g., a quantifiable degree of the change or steepness of the positional relationship), and the like.

[0066] The scaling rate 50 may be automatically determined based on a plurality of different factors. In some examples, the scaling rate 50 may be automatically determined depending on a type of the GUI, such as desktop GUIs, web-based GUIs, mobile GUIs, kiosk GUIs, embedded GUIs, virtual / augmented reality GUIs, and so forth. In some examples, the scaling rate 50 may be automatically determined depending on statistical data associated with the GUI, such as user analytics, performance metrics, error and bug tracking data, testing data, resource utilization data, security-related data, geospatial data, healthcare and medical data, and so forth. In some examples, the scaling rate 50 may be automatically determined depending on a type of the computer display on which the GUI is to be rendered, such as one or more of the types of computer displays exemplified with reference to FIG. 1. In some examples, the scaling rate 50 may be automatically determined depending on personal preferences, such as color preferences, font and text preferences, accessibility preferences, language preferences, notification preferences, privacy preferences, gesture and input preferences, data display preferences, and so forth. In some examples, one or more of the factors above may be considered in combination for automatically determining the scaling rate 50. In yet other examples, the scaling rate 50 may be defined by manually determined, for instance by a system developer, designer or art director.

[0067] In FIG. 2C, the scaling rate 50 has been applied to the design elements 20. Accordingly, the modular scale 30 has been propagated to reflect the sizing properties 32 of the design elements 20 in relation to the other pixel sets 42-1, 42-n. Propagation of the modular scale 30 generally means that the data of the sizing properties 32 will grow or shrink depending on the scaling rate 50, which is depicted in FIG. 2C where a scaling rate 50 larger than 1.000 has been applied to the design elements 20. Accordingly, the typeface Base with font size 16 for the baseline pixel set 40 will grow according to the rate defined by the scaling rate 50. For the pixel width 400 (42-1), the pixel width change did not result in a change of the corresponding sizing property, as it is still 16 (i.e., the same rounded value). The pixel width change 400 (42-1) to 500 (42- 2) resulted in a change of the sizing property from 16 to 17, the pixel width change 500

[0068] P187270001 (42-2) to 600 (42-3) resulted in no change, the pixel width change 600 (42-3) to 700 (42-4) resulted in a change of the sizing property from 17 to 18, and so forth, up to a font size of 23 for an arbitrary pixel width of resri. In this example, the scaling rate 50 is configured to adapt the design elements 20 by the same rate. However, this is just one exemplary scaling rate 50. As will be understood following some of the additional examples of the present disclosure, possible change factors may be added to the scaling rate 50.

[0069] Proceeding in FIG. 2D, the scaling rate 50 has been applied to all of the design elements Negn to Posn. Accordingly, the modular scale 30 is propagated to reflect sizing properties 32 of all of the design elements 42. This is, however, not a necessity. In other examples it may be envisaged that the scaling rate 50 may be applied to two or more of the design elements 20, for example omitting the propagation of the modular scale 30 for one or more design elements 20. Such examples may involve certain types of design elements 20, e.g., images, tables, or the like, which do not necessarily require a change of sizing properties 32 for one or more pixel sets 42-1, 42-n.

[0070] In the examples of FIGS. 2A-D, the scaling rate 50 is applied to the design elements 20 by way of multiplying the factor by which the design elements are to be adapted with the respective sizing properties 32 of the design elements 20. Other possible applications of the scaling rate 50 may be envisaged, such as by applying a mathematical function based on e.g., addition, exponential growth, logarithm, reciprocal, percentage, square root, geometric progression, matrix operation, function composition, and the like.

[0071] Once the scaling rate 50 has been applied to one or more of the design elements 20, rendering data may be generated. As discussed above, the rendering data is optionally rendered on a computer display of a given pixel set. To this end, the rendering data may be renderable on a computer display having a pixel set corresponding to either the baseline pixel set 40 or any of the pixel sets 42-1, 42-n. The rendering data may advantageously be renderable on a computer display with either one of a static pixel set or a dynamic pixel set, thus making the rendering data applicable for any graphical visualization on computer displays while maintaining a consistent scaling scheme of the design elements 20 thereof. The advantageous technical effects described

[0072] P187270001 above are thereby obtained, including providing a standard for computer displays that streamlines GUI design processes, optimizes resource allocation, and enhances universal applicability. The standard further offers technical advantages to ensure efficient resource utilization, consistent performance, and a positive user experience while maintaining system stability and reliability.

[0073] FIG. 3 corresponds to the example of FIG. 2D, but with the difference that the values of the sizing properties 32 of the design elements 20 have been replaced with a typeface (Rag) having the font sizes as the sizing properties 32. As indicated by the figure, some of the typefaces have very small pixel width, hence being barely visible in this particular illustration.

[0074] FIG. 4 is yet another visualization of FIG. 2D but in a diagrammatical format. The curves indicate, for each design element 20, how they are manipulated when the scaling rate 50 is applied thereto such that the modular scale 30 is propagated to reflect the sizing properties 32 of the design elements 20 in relation to pixel sets 42-1, 42-n other than the baseline pixel set 40. The magnitude of the changes will differ more for larger design elements 20 compared to smaller design elements 20, but the scaling rate will be the same.

[0075] FIGS. 5A-B, 6A-B and 7A-B, respectively, show different examples of scaling rates 50 being applied to modular scales 30. In addition to the scaling factor 50, the examples further show application of initial scaling rates 70 and one or more change factors 80. For each example, three different types of data visualizations 502, 504, 506; 602, 604, 606; 702, 704, 706, are shown, which visualize rendering data that is generated from the respective examples.

[0076] In FIG. 5 A, obtaining the modular scale 30 involves an initial step of applying an initial scaling rate 70 to a baseline sizing property 32-1 of a baseline design element 20-1. The baseline design element 20-1 whose baseline sizing property value 32-1 is used may differ in different examples. In this very example, the baseline design element 20-1 corresponds to the BaseOO design element 20, although any of the other remaining design elements 20 could potentially be used as the baseline design element 20-1. The initial scaling rate 70 is not to be confused with the scaling rate 50, as they are used for different purposes. The initial scaling rate 70 is used to obtain the modular scale 30, and

[0077] P187270001 the scaling rate 50 is applied to the modular scale 30 to obtain the rendering data for various types of pixel sets.

[0078] Applying the initial scaling rate 70 to the baseline design element 20-1 may be carried out similar to how the scaling rate 50 is applied to the modular scale, i.e., by multiplication or other suitable means such as the ones defined with reference thereto. The initial scaling rate 70 used in this example is 1.1414, although this is merely an example. In other examples any of the predetermined values in the same range (and preferred subrange) as defined with respect to the scaling rate 50 may be used. Upon the initial scaling rate 70 being applied to the baseline sizing property 32-1, the modular scale 30 is obtained as a result of a propagation of the baseline sizing property 32-1 of the baseline design element 20-1 to the remaining design elements 20. Compared to the modular scale 30 used in the examples of FIG. 2A-D, the modular scale 30 in this example thus depends on the value used for the initial scaling rate 70 (i.e., 16 x 1.1414 = 18.26; 18.26 x 1.1414 = 20.84; 20.84 x 1.1414 = 23.79, and so forth). A sizing chart of the modular scale 30 obtained in this way is illustrated in the data visualization 502.

[0079] FIG. 5 A further shows a scaling rate 50 of 1.0275, which is depicted in the data visualization 504.

[0080] FIG. 5B shows a data visualization 506 of the example of FIG. 5 A. The scaling rate 50 has been applied to the design elements 20 such that the modular scale 30 obtained by using the initial scaling rate 70 has been propagated to reflect the sizing properties of the design elements 20 in relation to a plurality of different pixel sets (300 through 1600).

[0081] The example of FIG. 6A is similar to that of FIG. 5 A, with the addition of change factors 80 being applied to the scaling rate 50. The change factors 80 applied to the scaling rate 50 causes the propagation of the modular scale 30 to occur at a predefined rate. If the scaling rate 50 is interpreted as a velocity of the propagation, the change factors 80 applied to the scaling rate 50 can be interpreted as a change of the velocity, or in other words, an acceleration of the propagation.

[0082] In this particular example, three separate change factors 80-1, 80-2, 80-3 are explicitly shown. As indicated by the example, the largest change factor 80-1 indicates how the propagation of the design element 20 denoted Pos+07 is to be adapted, the

[0083] P187270001 middle change factor 80-2 indicates how the propagation of the design element 20 denoted BaseOO is to be adapted, and the smallest change factor 80-3 indicates how the propagation of the design element 20 denoted Neg-07 is to be adapted. In between these change factors 80-1, 80-2, 80-3 for each one of the respective design elements 20, a plurality of additional change factors are realized. This is visualized in the data visualization 604.

[0084] FIG. 6B shows a data visualization 606 of the example of FIG. 6A. Compared to the corresponding data visualization 506 of FIG. 5B, different manipulations of the design elements 20 are obtained, as indicative of the respective curves growing at a larger rate, i.e., having larger accelerations.

[0085] The example of FIG. 7A is similar to that of FIG. 6A, with the addition of two or more fixed values for each change factor 80. The fixed values are different from one another, although the number of fixed values may vary from one change factor 80 to another. In this particular example, the change factors 80-1, 80-2, 80-3 include the same number of fixed values, namely three: 80-la, 80-lb, 80-lc; 80-2a, 80-2b, 80-2c; 80-3a, 80-3b, 80-3 c. The fixed values can be interpreted as suffixes added to each change factor, which are in the data visualization 704 denoted Steep, Normal, and Gentle, respectively. Accordingly, three different types of permutations of the rendering data will be generated, one for the Steep suffix, another for the Normal suffix, and a third for the Gentle suffix. As indicated by the data visualization 704, the scaling rate 50 with the Steep change factors 80-la, 80-2a, 80-3 a will generate a first permutation of rendering data that can manipulate the design elements 20 in one way, the scaling rate 50 with the Normal change factors 80-lb, 80-2b, 80-3b will generate a second permutation of rendering data that can manipulate the design elements 20 in another way, and the scaling rate 50 with the Gentle change factors 80-lc, 80-2c, 80-3c will generate a third permutation of rendering data that can manipulate the design elements 20 in a third way. These different permutations may be combined with one another, and be applicable for different types of computer displays, GUIs, and other conditions depending on prevailing circumstances surrounding the rendering of the GUI (e.g., operating conditions, timeliness, delays, static / dynamic approaches, and the like).

[0086] P187270001 FIG. 7B shows a data visualization 706 of the example of FIG. 7A. Compared to the corresponding data visualization 606 of FIG. 6B, the three different permutations as defined with reference to FIG. 7A are shown, one for each design element 20.

[0087] In some examples, similar types of change factors 80 as discussed above may be applied to the initial scaling rate 70 as well. The same principle as the change factors applied to the scaling rate 50 follows in that case, i.e., optionally having two or more fixed values being different from one another, etc.

[0088] Similar to the scaling rate 50, the initial scaling rate 70 and / or the change factors 80 may be automatically determined based on one or more of the factors as discussed with reference to the automatic determination of the scaling rate 50. It is thus possible to provide customization options not only for the scaling rate 50, but also for the initial scaling rate 70 used for obtaining the modular scale 30, and for the change factors 80 applied to the scaling rate 50.

[0089] FIG. 8 shows an exemplary computer-implemented method 100 for determining rendering data for a GUI 10. The dashed boxes are to be understood as optional steps 115, 135, 150, 152, 154 which may or may not be carried out.

[0090] The method 100 involves a step 110 of obtaining a modular scale 30 for a plurality of design elements 20 of the GUI 10, the modular scale 30 defining respective sizing properties 32 of the design elements 20 in relation to a baseline pixel set 40. The method 100 further involves a step 120 of determining a scaling rate 50 for the modular scale 30, the scaling rate 50 indicating a factor by which the design elements 20 are to be adapted in response to a relation of said sizing properties 32 being established with at least one pixel set 42 different from the baseline pixel set 40. The method 100 further involves a step 130 of applying the scaling rate 50 to the design elements 20 such that the modular scale 30 is propagated to reflect the sizing properties 32 of the design elements 20 in relation to said at least one pixel set 42. The method 100 further comprises a step 140 of determining the rendering data based on the scaling rate 50 being applied to the design elements 20, wherein the GUI 10 comprising the rendering data is renderable on a computer display 62 associated with one of the baseline pixel set 40 or a pixel set 42 different from the baseline pixel set 40.

[0091] P187270001 The method 100 involves an optional step 115 which may be a substep of the obtaining step 110. The step 115 involves applying 115 an initial scaling rate 70 to a baseline sizing property 32-1 of a baseline design element 20-1 from among the plurality of design elements 20 such that the modular scale 30 is obtained as a result of a propagation of the baseline sizing property 32-1 of the baseline design element 20-1 to the remaining design elements. The method involves an optional step 135 which may be a step introduced after step 130 but before step 140. Step 135 involves determining one or more change factors of the scaling rate, the change factors applied to the scaling rate causing the propagation of the modular scale to occur at a predefined rate. The method 100 involves an optional step 150 of rendering the GUI on a computer display 62 of a computing device 60. The rendering step 150 may involve one of the optional steps 152, 154 involving rendering the GUI 10 as a dynamic design system on the computer display 62 using the rendering data, or rendering the GUI 10 as a static design system on the computer display 62 using the rendering data.

[0092] FIG. 9 shows an exemplary computerized system 200 which may include computerized units configured to generate rendering data by implementing the computer-implemented method 100 as discussed herein. The system 200 may include a number of units known to the skilled person for implementing the functionalities as described in the present disclosure. The system 200 may comprise one or more computing units capable of including firmware, hardware, and / or executing software instructions to implement the functionality described herein. The system 200 may comprise one or more processor devices (may also be referred to as a control unit) 230, one or more memories 235 and one or more buses 240. The system 200 may include at least one computing device having the processor device 230. A system bus 240 may provide an interface for system components including, but not limited to, the memories 235 and the processor devices 230. The processor device 230 may include any number of hardware components for conducting data or signal processing or for executing computer code stored in the memories. The processor device 230 may, for example, include a general-purpose processor, an application specific processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA), a circuit containing processing components, a

[0093] P187270001 group of distributed processing components, a group of distributed computers configured for processing, or other programmable logic device, discrete gate or transistor logic, discrete hardware components, or any combination thereof designed to perform the functions described herein. The processor device 230 may further include computer executable code that controls operation of the programmable device.

[0094] The system bus 240 may be any of several types of bus structures that may further interconnect to a memory bus (with or without a memory controller), a peripheral bus, and / or a local bus using any of a variety of bus architectures. The memories 235 may be one or more devices for storing data and / or computer code for completing or facilitating methods described herein. The memories 235 may include database components, object code components, script components, or other types of information structure for supporting the various activities herein. Any distributed or local memory device may be utilized with the systems and methods of this description. The memories 235 may be communicably connected to the processor device 230 (e.g., via a circuit or any other wired, wireless, or network connection) and may include computer code for executing one or more processes described herein. The memories may include non-volatile memories (e.g., read-only memory (ROM), erasable programmable read-only memories (EPROM), electrically erasable programmable readonly memories (EEPROM), etc.), and volatile memories (e.g., random-access memory (RAM)), or any other medium which can be used to carry or store desired program code in the form of machine-executable instructions or data structures and which can be accessed by a computer or other machine with a processor device. A basic input / output system (BIOS) may be stored in the non-volatile memories and can include the basic routines that help to transfer information between elements within the computer system.

[0095] A storage 245 may be operably connected to the system 200 via, for example, VO interfaces (e.g., card, device) 250 and I / O ports 255. The storage 245 can include, but is not limited to, devices like a magnetic disk drive, a solid state drive, an optical drive, a flash memory card, a memory stick, etc. The storage 245 may also include a cloud-based server implemented using any commonly known cloud-computing platform, as described above. The storage 245 or memory 235 can store an operating system that controls and allocates resources of the system 200.

[0096] P187270001 The system 200 may interact with network devices 260 via the I / O interfaces 250, or the I / O ports 255. Through the network devices 260, the system 200 may interact with a network. Through the network, the system 200 may be logically connected to remote computers. Through the network, the server-side platform 210 may communicate with the client-side platform 220, as described above. The networks with which the system 200 may interact include, but are not limited to, a local area network (LAN), a wide area network (WAN), and other networks.

[0097] With reference to FIG. 10, a schematic illustration of a (non-transitory) computer-readable (storage) medium 300 is shown according to one exemplary embodiment. The computer-readable medium 300 may be associated with or connected to the system 200 as described herein, and is capable of storing a computer program product 310. The computer-readable medium 300 in the disclosed embodiment is a memory stick, such as a Universal Serial Bus (USB) stick. The USB stick 300 comprises a housing 330 having an interface, such as a connector 340, and a memory chip 320. In the disclosed embodiment, the memory chip 320 is a flash memory, i.e., a non-volatile data storage that can be electrically erased and re-programmed. The memory chip 320 stores the computer program product 310 which is programmed with computer program code (instructions) that when loaded into a processor device, will perform a method, for instance the method 100 explained with reference to FIG. 8. The USB stick 300 is arranged to be connected to and read by a reading device for loading the instructions into the processor device. It should be noted that a computer-readable medium can also be other mediums such as compact discs, digital video discs, hard drives or other memory technologies commonly used. The computer program code (instructions) can also be downloaded from the computer-readable medium via a wireless interface to be loaded into the processing device.

[0098] The invention has mainly been described above with reference to a few embodiments. However, as is readily appreciated by a person skilled in the art, other embodiments than the ones disclosed above are equally possible within the scope of the invention, as defined by the appended patent claims.

[0099] P187270001

Claims

CLAIMS1. A computer-implemented method (100) for determining rendering data for a graphical user interface (10), GUI, the method comprising: obtaining (110) a modular scale (30) for a plurality of design elements (20) of the GUI (10), the modular scale (30) defining respective sizing properties (32) of the design elements (20) in relation to a baseline pixel set (40); determining (120) a scaling rate (50) for the modular scale (30), the scaling rate (50) indicating a factor by which the design elements (20) are to be adapted in response to a relation of said sizing properties (32) being established with at least one pixel set (42) different from the baseline pixel set (40), and wherein the scaling rate (50) determines positional relationships between the design elements (20); applying (130) the scaling rate (50) to the design elements (20) such that the modular scale (30) is propagated to reflect the sizing properties (32) of the design elements (20) in relation to said at least one pixel set (42); and determining (140) the rendering data based on the scaling rate (50) being applied to the design elements (20), wherein the GUI (10) comprising the rendering data is renderable on a computer display (62) associated with one of the baseline pixel set (40) or a pixel set (42) different from the baseline pixel set (40).

2. The method of claim 1, wherein the scaling rate (50) is applied to the design elements (20) by multiplying said factor by which the design elements (20) are to be adapted with the respective sizing properties (32) of the design elements (20).

3. The method of any preceding claim, wherein the scaling rate (50) is a predetermined value between 0.500 and 1.500, more preferably between 0.800 and 1.200.

4. The method of any preceding claim, wherein the positional relationships between the design elements (20) are defined as one or more of a ratio of change, a direction of change and a magnitude of change.P1872700015. The method of any preceding claim, wherein obtaining (110) the modular scale (30) comprises applying (115) an initial scaling rate (70) to a baseline sizing property (32-1) of a baseline design element (20-1) from among the plurality of design elements (20) such that modular scale (30) is obtained as a result of a propagation of the baseline sizing property (32-1) of the baseline design element (20-1) to the remaining design elements (20).

6. The method of any preceding claim, further comprising determining (135) one or more change factors (80) of the scaling rate (50), the change factors (80) applied to the scaling rate (50) causing the propagation of the modular scale (30) to occur at a predefined rate.

7. The method of claim 6, wherein each change factor (80) includes two or more fixed values, the fixed values being different from one another.

8. The method of any preceding claim, wherein the scaling rate (50) is automatically determined depending on one or more of a type of the GUI (10), statistical data associated with the GUI (10), a type of the computer display (62) on which the GUI (10) is to be rendered, personal preferences, and a combination thereof.

9. The method of any preceding claim, wherein the design elements (20) are one or more of typefaces, icons, images, tables, buttons, forms, navigation menus, whitespaces, animations, bars, grids, hover effects, sliders, selectors, and combinations thereof.

10. The method of any preceding claim, wherein the sizing properties (32) are one or more of widths, heights, paddings, margins, borders, box-sizings, line heights, font types, font sizes, font stylings, transforms, scales, aspect ratios, positions, floats, and combinations thereof.P18727000111. The method of any preceding claim, further comprising rendering (152) the GUI (10) as a dynamic design system on the computer display (62) using the rendering data.

12. The method of any one of claims 1-10, further comprising rendering (154) the GUI (10) as a static design system on the computer display (62) using the rendering data.

13. A computerized system (200) comprising a processor (230) configured to perform the functionality of the method (100) of any one of claims 1-12.

14. A non-transitory computer-readable storage medium (300) comprising instructions, which when executed by one or more processors (230) of a computerized system (200), cause the processor (230) to perform the functionality of the method (100) of any one of claims 1-12.

15. A computer program product comprising computer code for performing the functionality of the method (100) of any one of claims 1-12.P187270001

Images