Automatically generate and enforce GUI resizing constraints based on design semantics

Abstract

Embodiments of the present disclosure relate to automatically generating and applying graphical user interface resizing constraints based on design semantics. The present disclosure relates to systems, methods, and non-transitory computer-readable media for resizing a graphical user interface design layout using automatically generated semantically-aware resizing constraints. In particular, the system described herein can analyze the semantics of graphical user interface design elements (e.g., including size, position, type, etc.) and the relative positions of design elements (e.g., hierarchy, offset, nesting, etc.). The disclosed system utilizes a heuristic system for the analyzed semantics to generate a set of automatically defined semantically-aware resizing constraints for each graphical user interface design interface. The disclosed system also presents a design resizing interface that enables a designer to manually select constraints to be applied to design elements. The disclosed system can switch between applying manually selected and automatic semantically-aware resizing constraints to design elements.

Description

[0001] CROSS-REFERENCE TO RELATED APPLICATIONS

[0002] This application claims priority to U.S. Provisional Patent Application No. 62 / 731,965, filed on September 16, 2018, entitled “AUTOMATICALLY GENERATING AND APPLYING GRAPHI-CAL USER INTERFACE RESIZE-CONTRAINTS BASED ON DESIGNSEMANTICS,” which is incorporated herein by reference in its entirety. Technical Field

[0003] The present disclosure relates generally to adjustment of display layouts, and more particularly to systems, methods, and non-transitory computer-readable media for resizing a graphical user interface design layout using automatically generated semantically-aware resizing constraints. Background Art

[0004] With the rapid development of the Internet, people are turning to online viewing of content. Documents such as web pages, native applications, magazines, manuals, or online books are usually designed for display in a specific medium or viewport. However, documents are usually accessed or provided to various display (or target) devices, such as tablet computers, mobile phones, PDAs, laptops, etc. These target devices have different characteristics, such as screen size or resolution, thereby establishing the need for different target display layouts for different target devices. Digital publishing usually involves generating multiple display layout copies for use on different devices.

[0005] Therefore, designers often use traditional systems to create multiple display layouts for multiple screen sizes and resolutions. Although traditional systems can create different display layouts for use on different devices, they suffer from many technical disadvantages related to efficiency, accuracy, and flexibility. In fact, traditional systems require a large amount of processing power, time, storage, and other computer resources. For example, traditional systems often require excessive designer interaction and time to create multiple display layouts. Traditional systems also often require designers to manually resize, move, remove, and / or create individual elements in a display layout.

[0006] Some conventional systems resize some elements based on manually set rules. Even these conventional manual rule resizing systems are inefficient. For example, most conventional manual rule resizing systems require the designer to define resizing rules for each element in a display layout individually. Furthermore, creating multiple display layouts typically requires the developer to navigate through multiple user interfaces and invest excessive time and resources in order to determine and set the rules for resizing the display layouts.

[0007] Conventional systems also often produce inaccurately resized elements in the resized display layout. For example, many conventional systems simply resize the elements to the same dimensions of the new display layout. Such simple resizing often results in distorted final elements because many resized elements have different aspect ratios than the original elements. As mentioned, many conventional resizing systems attempt to overcome this shortcoming by requiring designers to manually resize individual elements. However, because these conventional resizing systems rely on human designers to manually adjust each element, the final display layout often includes misplaced and / or distorted elements, particularly in display layouts that include multiple elements.

[0008] In addition, conventional systems are typically inflexible. In fact, conventional manual rule resizing systems are typically limited to a few use cases. In particular, many conventional manual rule resizing systems require the designer to define a new set of rules or update a set of rules when the design is resized or otherwise updated. In addition, conventional manual rule resizing systems are typically limited to applying edge pinning rules. For example, conventional manual rule resizing systems are typically only able to fix the position of an element with reference to the nearest display layout edge. Therefore, when an element is not located near the edge of the display layout, a conventional manual rule resizing system is typically technically limited to resizing the element. In addition, conventional manual rule resizing systems are typically inflexible because they cannot operate in situations where an element needs to be repositioned, expanded, or diminished.

[0009] These and other issues and challenges exist with respect to generating resized display layouts. Summary of the invention

[0010] Embodiments of the present invention include systems, methods, and computer-readable media that use dynamically generated resizing constraints based on a set of heuristics that take into account the semantics of the design to automatically resize a design. Thus, when a user changes the size of a design, the system, method, and computer-readable medium intelligently and automatically (e.g., without user input) resizes the design elements. In particular, the disclosed system analyzes the properties of the design and the design elements. In addition, the system dynamically generates constraints just before the resizing operation so that any changes in the design will be automatically accommodated. The disclosed system also dynamically applies new constraints when necessary for the resized design and design elements. In addition, the system is flexible and covers a variety of situations.

[0011] To illustrate, in one or more embodiments, the disclosed system may receive a request to resize a graphical user interface design layout from a first size to a second size. The graphical user interface design layout may include a plurality of graphical user interface elements. The disclosed system analyzes the semantics of the graphical user interface design layout. In addition, the disclosed system automatically defines a set of semantic-aware rules or constraints for the plurality of graphical user interface elements based on the analyzed semantics of the graphical user interface design layout. In addition, the disclosed system generates a resized graphical user interface design layout of the second size by resizing the plurality of graphical user interface elements according to the automatically defined set of semantic-aware resizing constraints.

[0012] The following description sets forth additional features and advantages of one or more embodiments of the disclosed systems, computer media, and methods. In some cases, such features and advantages will be apparent to those skilled in the art from the description or by learning from the practice of the disclosed embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] The detailed description provides one or more embodiments with additional specificity and detail through the use of the accompanying drawings, which are briefly described below.

[0014] Figures 1A to 1C Illustrated is a sequence of a digital design at a first size during a resize operation and at a second size after having been resized subject to automatic semantics-aware resize constraints in accordance with one or more embodiments.

[0015] Figure 2 A schematic diagram of a first design element and a second design element with a representative offset is illustrated in accordance with one or more embodiments.

[0016] FIG. 3A to FIG. 3F Various pairs of design elements are illustrated at a first size and at a second size after having been resized subject to automatic semantic-aware resizing constraints in accordance with one or more embodiments.

[0017] FIG. 4A to FIG. 4B Illustrated is a state diagram representing a heuristic for generating appropriate semantics-aware resizing constraints in accordance with one or more embodiments.

[0018] FIG. 5A to FIG. 5B Illustrated is a design layout pair at an initial size and at a second size after having been resized subject to automatic semantically-aware resizing constraints in accordance with one or more embodiments.

[0019] FIG. 6A to FIG. 6DIllustrated are various graphical user interface pairs showing automatic semantically-aware resizing constraints and manually selected constraints in accordance with one or more embodiments.

[0020] FIG. 7A to FIG. 7D Various design layout pairs are illustrated that include a complex design element at an initial size and at a second size after having been resized subject to automatic semantically-aware resizing constraints in accordance with one or more embodiments.

[0021] Figure 8 A schematic diagram of a design resizing constraint system is illustrated in accordance with one or more embodiments.

[0022] Fig. 9 An example environment for implementing a design resizing constraint system in accordance with one or more embodiments is illustrated.

[0023] Fig.10 A flow diagram illustrating a series of actions for automatic semantics-aware constraint enforcement in accordance with one or more embodiments is illustrated.

[0024] Fig.11 A block diagram of an example computing device is illustrated in accordance with one or more embodiments. DETAILED DESCRIPTION

[0025] The present disclosure describes one or more embodiments of a design resizing constraint system that responsively resizes a graphical user interface design layout while keeping the design semantics intact by dynamically generating and using semantically-aware resizing constraints based on the semantics of a detected graphical user interface design layout. For example, the design resizing constraint system may receive a request to resize a graphical user interface design layout. Based on receiving the request to resize the graphical user interface design layout, the design resizing constraint system analyzes the semantics of the graphical user interface design layout, including the layout and hierarchy. Based on the analyzed design semantics, the design resizing constraint system may dynamically generate semantically-aware resizing constraints for graphical user interface elements just before any resizing operation. The design resizing constraint system may use semantically-aware resizing constraints to resize a graphical user interface design layout, including graphical user interface elements within the graphical user interface design layout.

[0026] For illustration, a design resize constraint system can generate a resized graphical user interface design layout with semantically resized graphical user interface elements. In particular, the design resize constraint system can receive a request to resize a graphical user interface design layout from a first size to a second size, the graphical user interface design layout including a plurality of graphical user interface elements. The design resize constraint system can analyze the semantics of the graphical user interface design layout. In particular, the design resize constraint system can identify the hierarchy of elements within the design (e.g., whether the element is a parent design element or a child design element), the type of element (e.g., whether the element is text or a graphic), and the position of element edges relative to each other, etc. Based on the analyzed semantics, the design resize constraint system can define a set of semantically aware resize constraints. The design resize constraint system uses the semantically aware resize constraints to generate a resized graphical user interface design layout of the second size. Therefore, when a designer requests to resize the graphical user interface design layout, the design resize constraint system intelligently and automatically (e.g., without user input) resizes all graphical user interface elements according to the dynamically generated semantically aware resize constraints.

[0027] The design resizing constraint system maintains spatial relationships for design elements at different sizes. In particular, in one or more embodiments, the design resizing constraint system utilizes a heuristic system to define a set of semantically-aware resizing constraints for multiple graphical user interface elements. In particular, the design resizing constraint system can identify spatial relationships of graphical user interface elements of different sizes and positions. The design resizing constraint system uses the heuristic system to analyze the semantics of the graphical user interface design layout to automatically define semantically-aware resizing constraints for the graphical user interface elements. The design resizing constraint system uses the analyzed semantics and the heuristic system to determine semantically correct resizing behavior for the graphical user interface elements, and places corresponding semantically-aware resizing constraints on the elements.

[0028] The design resize constraint system also provides a unique balance and workflow between automatically generated semantic-aware constraints and manual constraints. In particular, the design resize constraint system causes any resize operation to be automatically constrained by automatically generated semantic-aware constraints. Therefore, the design resize constraint system does not need to present complex details about the constraints. If the designer chooses to edit the automatically generated semantic-aware constraints and switch to manual constraints, the design resize constraint system reveals a constraint user interface pre-populated with constraints, which allows the designer to make edits to change the responsive behavior of the element. The design resize constraint system can then use this feedback to optimize and run heuristic algorithms to learn intelligently.

[0029] As mentioned above, the design resizing constraint system does not need to present complex details about the constraints, nor does it require the user to understand or be given instructions about the constraints. That is, the design resizing constraint system can optionally show overlay lines that identify semantically-aware resizing constraints applied to graphical user interface elements. For example, the design resizing constraint system can present overlay lines to illustrate the fixed behavior of the graphical user interface element. The design resizing constraint system can provide these overlays during the resizing operation to provide the designer with an understanding of the semantically-aware resizing constraints applied during the resizing without any visual noise during the design phase.

[0030] One or more embodiments described herein provide benefits and solve one or more of the above-mentioned problems or other problems in the art with a design resize constraint system that generates semantically-aware resize constraints based on a set of heuristics that consider the semantics of design, layout, and hierarchy. For example, the design resize constraint system can improve the efficiency of resizing a graphical user interface design layout. In particular, the design resize constraint system allows users to come from a system in which they must create all resize rules to a system that automatically generates and applies constraints. In addition, in one or more embodiments, the design resize constraint system provides options to allow users to modify or fine-tune a design or constraint if the desired result is not achieved through semantically-aware resize constraints. More particularly, the design resize constraint system improves the efficiency of resizing a design layout by presenting a constraint user interface that allows designers to edit and change constraints.

[0031] In addition, the design resize constraint system improves accuracy relative to conventional systems. For example, the design resize constraint system maintains spatial relationships for graphical user interface elements at different sizes. In particular, the design resize constraint system uses a heuristic system to identify semantically correct resize behaviors for graphical user interface elements, and places semantically aware resize constraints on the graphical user interface elements based on design semantics. Therefore, the design resize constraint system can generate a resized design that includes correctly scaled and positioned graphical user interface elements.

[0032] The design resize constraint system also provides increased flexibility relative to traditional systems. For example, the design resize constraint system accounts for and automatically adapts to a variety of situations. In particular, the design resize constraint system can analyze the design semantics for any design. Based on the design semantics, the design resize constraint system uses a heuristic system that identifies appropriate semantically-aware resize constraints. In addition, the design resize constraint system can generate one or more semantically-aware resize constraints for each element in the design. In particular, the resize constraint system is not limited to applying edge fixing rules. Instead, the resize constraint system can generate rules that indicate the shape of an element and the position of an element relative to other graphical user interface elements.

[0033] As the foregoing discussion illustrates, the present disclosure utilizes various terms to describe the features and advantages of a design resizing constraint system. More details are now provided regarding the meaning of these terms. As used herein, the term "graphical user interface design layout" (or "design layout") refers to a visual design that includes an arrangement of visual elements. In particular, the term "graphical user interface design layout" refers to a user interface that includes graphical user interface elements. For example, a graphical user interface design layout may refer to a web page, a digital message, or a program interface.

[0034] As used herein, the term "GUI element" (or "design element") refers to a visual element of a GUI design layout. In particular, the term "GUI element" refers to a design unit that is part of a GUI design layout. For example, a GUI element may include text, images, controls, overlays, boxes, interactive elements, and other GUI components.

[0035] As used herein, the term "design semantics" (or simply "semantics") refers to the characteristics or traits of a design. In particular, the term "design semantics" refers to the characteristics of a GUI design layout. For example, "design semantics" may refer to the design, layout, and hierarchy of GUI elements in a design layout. Specifically, semantics may refer to the hierarchical relationships between parent and child design elements, the positional relationships between design elements, and any other relationships between design elements in a design layout. Additionally, semantics may refer to the types of GUI elements and the relative positioning of GUI elements.

[0036] As used herein, the term "semantic-aware constraint" refers to a restriction imposed on a design layout during resizing. In particular, "semantic-aware constraint" refers to a rule imposed on a graphical user interface element based on the semantics of the design layout. A semantic-aware constraint may refer to a rule that binds the edge of a graphical user interface element to the edge of a design layout or another graphical user interface element. For example, a design resizing constraint system may generate a left, right, top, or bottom constraint for a design element. The left constraint fixes the distance from the left edge of a design element to the corresponding edge of a parent design element or a design layout. Therefore, throughout the resizing operation, the left offset (i.e., the distance between the left edge of a design element and the corresponding parent edge) remains fixed. In addition, the term "semantic-aware constraint" may refer to a rule that fixes the size of a design element. For example, a design resizing constraint system may set a height or width constraint on a design element that fixes the height or width of the design element.

[0037] As discussed above, the design resize constraint system can intelligently resize design elements according to semantically-aware resize constraints. Figures 1A to 1C An example resized graphical user interface design is illustrated. Figures 1A to 1C Resizing of a design element, more particularly resizing of a parent design element including a plurality of child design elements, is illustrated, but the design resizing constraint system may resize an entire graphical user interface design layout including a plurality of design elements.

[0038] Figure 1A A graphical user interface design layout 102 ("design layout 102") of a first size 112 is illustrated. In particular, design elements 102 of the first size 112 include a title design element 104, a text design element 106, and interactive design elements 108a and 108b. As illustrated, a design resizing constraint system may receive as input the graphical user interface design layout 102 of the first size 112. The design resizing constraint system may allow the design layout 102 to be resized, and then automatically resize the included design elements using automatically generated semantically-aware resizing constraints.

[0039] The design resizing constraint system analyzes the semantics of the graphical user interface design layout 102 and defines a set of semantically-aware resizing constraints for the design layout 102. Figure 1B As illustrated, the design resizing constraint system presents fixed overlays 110a-d representing a set of semantically-aware resizing constraints in the design layout 102. In particular, Figure 1BIllustrated is a design layout 102 of intermediate size 114 in the process of being resized. Design layout 102 of intermediate size 114 includes top fixed overlay 110a, right fixed overlay 110b, left fixed overlay 110c, and bottom fixed overlay 110d (collectively "fixed overlays 110a-d").

[0040] As discussed above, the design resize constraint system can receive a request to resize the design layout 102. For example, the designer can manually select and drag an edge of the design layout 102 to resize the design layout 102. Alternatively, the designer can specify the dimensions of the desired resized design layout 102. In addition, the designer can request to resize the parent design element by submitting a request to resize the entire graphical user interface design layout 102. Based on the request to resize the design layout 102, the design resize constraint system analyzes the design semantics of the design layout 102 of the first size 112. In particular, the design resize constraint system analyzes the properties of the design elements of the design layout 102 of the first size 112 individually or relative to each other.

[0041] Using the detected semantics of design layout 102, the design resize constraint system defines a set of semantics-aware resize constraints for each design element in design layout 102. For example, the design resize constraint system defines semantics-aware resize constraints for each of title design element 104, text design element 106, and interactive design elements 108a and 108b.

[0042] The design resize constraint system generates fixed overlays 110a-d to represent semantically aware resize constraints. In particular, fixed overlays 110a-d illustrate the fixed behavior of sub-design elements. Fixed overlays 110a-d give designers an understanding of the resize operation without excessive visual noise during the design phase. For example, top fixed overlay 110a represents the top constraint applied (i.e., the top edge of the sub-design element is fixed to the edge of design layout 102). Figure 1B 104, the design resize constraint system applies a top constraint and a left constraint to the title design element 104. As illustrated, the design resize constraint system provides a left fixed overlay 110c and a right fixed overlay 110b for the text design element 106. In addition, the design resize constraint system provides a left fixed overlay 110c and a bottom fixed overlay 110d for the interactive design element 108a. The design resize constraint system provides a right fixed overlay 110b and a bottom fixed overlay 110d for the interactive design element 108b.

[0043] After the resizing operation, the design resizing constraint system generates a resized design layout. Figure 1C As illustrated, the design resizing constraint system generates the design layout 102 of the second size 116. In particular, the design resizing constraint system resizes the sub-design elements in the design layout 102 according to the set of semantically-aware resizing constraints. For example, when expanding the design layout 102, the design resizing constraint system also appropriately binds the edges of the sub-design elements to the edges of the design layout 102. As illustrated, the design resizing constraint system applies the top constraint and the left constraint to the title design element 104. Thus, the design resizing constraint system resizes the design layout by constraining the title design element 104 of the design layout 102 of the second size 116 to be the same distance from the top edge and the left edge of the design layout 102 of the first size 112. Similarly, the design resizing constraint system constrains the text design elements 106 in the design layout 102 of the second size 116 to be the same distance from the left edge and the right edge of the design layout 102 of the first size 112. Additionally, the design resizing constraint system constrains the interactive design element 108a of the design layout 102 of the second size 116 to be the same distance from the left edge and the bottom edge of the design layout 102 of the first size 112. Finally, the design resizing constraint system constrains the interactive design element 108b of the design layout 102 of the second size 116 to be the same distance from the right edge and the bottom edge of the design layout 102 of the first size 112.

[0044] Figure 1A-Figure 1C A brief overview of an example of resizing a design layout using automatic (without user input) and dynamic (on the fly in response to a resize request) semantics-aware resizing constraints is provided. Additional details on the process of analyzing the semantics of a design layout and generating semantics-aware resizing constraints are provided below.

[0045] As part of analyzing the semantics of the design layout, the design resizing constraint system can measure offset values ​​between design elements and / or between design elements and boundaries of the design layout to generate semantically-aware resizing constraints. Figure 2 An offset between a first design element and a second design element is illustrated. Figure 2A schematic diagram of a first design element 202 and a second design element 204 is illustrated. The second design element 204 is nested within the first design element 202. In one or more embodiments, the first design element 202 is a parent design element and the second design element 204 is a child design element. In one or more embodiments, the design resize constraint system can be based on one or more automatically generated semantically aware constraints based on an offset of a child design element relative to a parent design element. As used herein, the term "offset" refers to the distance between an edge of a design element and an edge of another design element. In particular, the offset refers to the distance between an edge of a design element and a corresponding edge of another design element or a design layout. For example, the left offset can be the distance between the left edge of a child design element and the left edge of a parent design element.

[0046] For example, Figure 2 A left offset 206 is illustrated that defines the distance of the left side of the second design element 204 from the left side of the first design element 202. Similarly, Figure 2 An upper offset 208 is shown that defines the distance of the upper side of the second design element 204 from the upper side of the first design element 202 . Figure 2 A right offset 210 is shown that defines the distance of the right side of the second design element 204 from the right side of the first design element 202. Finally, Figure 2 A bottom offset 212 is shown that defines the distance of the bottom side of second design element 204 to the bottom side of first design element 202 .

[0047] As mentioned above, the design resize constraint system may use semantically-aware resize constraints to automatically size and move design elements within a design layout. Figure 3A-Figure 3F Various pairs of design elements are illustrated at initial sizes and at updated sizes after being resized subject to automatic semantically aware resizing constraints in accordance with one or more embodiments. In particular, Figure 3A-Figure 3F A pair of a first design element 302 and a second design element 304 is illustrated, wherein the second design element 304 is nested within the first design element 302. More particularly, Figure 3A-Figure 3F 304. The pairs illustrated in FIG. 30 are a first pair of initially sized first design element 302 and initially sized second design element 304, and a second pair of resized first design element 302a and resized second design element 304a. In at least one embodiment, first design element 302 represents a parent design element and second design element 304 represents a child design element. In at least one other embodiment, first design element 302 represents a design layout that includes second design element 304.

[0048] As discussed above, the design resizing constraint system measures the deviation of the design element from the initial size. Figure 3A A first design element 302 and a second design element 304 are illustrated at an initial size. The design resize constraint system measures a left offset 314, a top offset 316, a right offset 318, and a bottom offset 320 of the initial-sized first design element 302. Additionally, the design resize constraint system measures a width 310 and a height 312 of the initial-sized first design element 302.

[0049] The design resize constraint system can apply semantic-aware resize constraints based on the offset length relative to the design element. For example, based on determining that the offset of a child design element is less than a threshold ratio of the size of the parent design element, the design resize constraint system can apply the corresponding semantic-aware resize constraint. Figure 3A As illustrated, the design resize constraint system determines that the left offset 314 is less than a threshold ratio of the width 310 of the first design element 302. Based on this determination, the design resize constraint system applies the left constraint. Similarly, based on determining that the top offset 316 is less than a threshold ratio of the height 312, the design resize constraint system applies the top constraint.

[0050] The design resize constraint system resizes the second design element 304 based on the applied semantically-aware resize constraint. For example, Figure 3B A fixed overlay representing the semantically aware resize constraints imposed during a resize operation is illustrated. In particular, Figure 3B A top fixed cover 308a and a left fixed cover 308b are shown. Figure 3B Included are a resized first design element 302a, a resized second design element 304a, a maintained top offset 316, a maintained left offset 314, an updated bottom offset 320a, and an updated right offset 318a.

[0051] Figure 3B A design element during a resizing operation is illustrated. As used herein, the term "resizing operation" refers to an intermediate period between the time when the design layout is a first size and the time when the design layout is a second size. The design resizing constraint system presents a fixed overlay for the design element during the resizing operation. Figure 3BThe design resize constraint system is illustrated to automatically resize the second design element 304 based on the resized first design element 302. In particular, the design resize constraint system applies a top constraint and a left constraint as shown by a top fixed overlay 308a and a left fixed overlay 308b. Based on the top constraint, the design resize constraint system fixes the top edge of the second design element 304 to the top edge of the first design element 302. In particular, the updated top offset 316 will remain constant as the design resize constraint system resizes the updated first design element 302a. Similarly, based on the left constraint, the design resize constraint system fixes the left edge of the second design element 304 to the left edge of the first design element 302. Thus, as illustrated, the updated left offset 314 remains constant as the design resize constraint system expands the size of the first design element 302.

[0052] Offsets for unpinned design element edges expand and shrink during resize operations. For example, Figure 3B As illustrated, the design resize constraint system does not impose constraints on the bottom edge or the right edge of the second design element 304. As illustrated, the updated right offset 318a and the bottom offset 320a do not remain constant. Instead, as the design resize constraint system expands the first design element 302 to generate the resized first design element 302a, the design resize constraint system extends the right offset 318 to the updated right offset 318a and extends the bottom offset 320 to the updated bottom offset 320a.

[0053] FIG. 3A to FIG. 3B One example of resizing behavior of the second design element 304 based on the top and left constraints applied is illustrated. FIG. 3C to FIG. 3F Additional examples of resizing behaviors for the second design element 304 based on additional combinations of semantically-aware resizing constraints are illustrated.

[0054] The design resize constraint system can dynamically analyze the design semantics for the design layout just before the resize operation. In particular, the design resize constraint system does not require the designer to apply or update constraints when the design layout changes. Instead, the design resize constraint system automatically adapts to any changes in the design and applies new rules as needed. For example, the designer can change the size of the second design element 304 by lengthening it. Figure 3A The design semantics of the first design element 302 is generated Figure 3C The design resize constraint system analyzes the semantics of the first design element 302 and the second design element 304b based on the changes to generate appropriate semantically-aware resize constraints for the elongated second design element 304b. Figure 3CThe first design element 302, including any resizing adjustments made to the elongated second design element 304b, is performed using the constraints imposed by the dynamically analyzed design semantics.

[0055] Figure 3C The first design element 302 and the second design element 304b are shown in their initial sizes. Figure 3C As illustrated, the right edge of the second design element 304b is located close to the right edge of the first design element 302. The design resizing constraint system determines that the left, top, and right offsets are less than a ratio threshold of the size of the first design element 302. Based on this consideration, the design resizing constraint system applies a left constraint, a top constraint, and a right constraint to the second design element 304b.

[0056] Figure 3D Illustration of the Figure 3C 304a and 304b. In particular, the design resizing constraint system presents a top fixed overlay 308a, a left fixed overlay 308b, and a right fixed overlay 308c to correspond to the applied top, left, and right constraints. Therefore, when the design resizing constraint system generates the resized first design element 302c, the top offset, left offset, and right offset remain constant, while the bottom offset changes based on the resized first design element 302c. Therefore, the design resizing constraint system generates a resized first design element 304c that is further elongated to maintain the top offset, left offset, and right offset. Therefore, Figure 3A-3B and Figure 3C-Figure 3D The comparison illustrates how the design resize constraint system can change the semantic-aware resize constraints based on the semantics of the design layout.

[0057] Figure 3E and Figure 3F The designer has changed the second design element 304 by enlarging it. Figure 3A The design semantics of the first design element 302 is generated Figure 3E The design resize constraint system analyzes the semantics of the first design element 302 and the second design element 304d based on the changes to generate appropriate semantic-aware resize constraints for the enlarged second design element 304d. In particular, the design resize constraint system applies top, left, right, and bottom semantic-aware resize constraints to the second design element 304d. In particular, Figure 3EA first design element 302 and a second design element 304d are illustrated at an initial size. As illustrated, the design constraint system determines that all offsets (i.e., top, left, right, and bottom) of the second design element 304d are less than a threshold proportion of the first design element 302. For example, the design constraint system determines that each of the top offset and the bottom offset are less than a threshold proportion of the height of the first design element 302. Additionally, the design constraint system determines that each of the left offset and the right offset are less than a threshold proportion of the width of the first design element 302. The design constraint system therefore determines that top, left, right, and bottom constraints are applied to the second design element 304d.

[0058] Figure 3F The diagram illustrates a resized first design element 302d and a resized second design element 304e during or after a resizing operation. Figure 3F As illustrated, the design resize constraint system represents each of the applied semantically-aware resize constraints using fixed overlays. Specifically, the design constraint system displays a top fixed overlay 308a, a left fixed overlay 308b, a right fixed overlay 308c, and a bottom fixed overlay 308d. As illustrated, because the design resize constraint system applies all offsets to the second design element 304, all offset values ​​of the second design element 304 remain fixed / constant during the resize operation. More specifically, because all edges of the second design element 304d are fixed to corresponding edges of the first design element 302, the second design element 304d expands with the first design element 302.

[0059] As discussed and illustrated above, the design resize constraint system can impose semantically-aware resize constraints based on analyzed semantics of a graphical user interface design layout. FIG. 4A to FIG. 4B A state diagram showing how a design resizing system applies a set of heuristics to design elements to generate semantically-aware resizing constraints is illustrated. In particular, as discussed above, the design resizing constraint system analyzes the characteristics of the design elements (e.g., size, position, type, etc.) and the relative positions of the design elements (e.g., hierarchy, offset, nesting, etc.). The design resizing constraint system utilizes a heuristic system including a set of heuristics to the analyzed characteristics to generate semantically-aware resizing constraints.

[0060] In at least one embodiment, the design resizing constraint system applies the following constraint rules (i.e., heuristics) to each design element in the design layout in the following order:

[0061] 1. If the left offset of the child design element is less than 15% of its parent width, set the left constraint for the child design element.

[0062] 2. If the right offset of the child design element is less than 15% of its parent width, set the right constraint for the child design element.

[0063] 3. If the top offset of a child design element is less than 15% of its parent width, set a top constraint for the child design element.

[0064] 4. If the bottom offset of a child design element is less than 15% of its parent width, set a bottom constraint for the child design element.

[0065] Rules 5-6 apply to child design elements that are not nested containers and are not single-line text elements.

[0066] 5. If the left and right offsets are almost equal (only differ by 1) and they are less than 25% of the parent width, then set the left and right constraints for the child design element. This will make the child design element width resize with the parent design element width.

[0067] 6. If the top and bottom offsets are almost equal (only differ by 1) and they are less than 25% of the parent height, then set the top and bottom constraints for the child design element. This will make the child design element height resize with the parent design element height.

[0068] Rules 7-8 apply to the text area sub-design element.

[0069] 7. If the width of the text area child design element is 66% of its parent's width, then set the left and right constraints for the child design element. This will make the child design element width resize with the parent design element width.

[0070] 8. If the height of the text area child design element is 66% of its parent's height, set top and bottom constraints for the child design element. This will make the child design element height resize with the parent design element height.

[0071] Rule 9 applies to all sub-design elements except single lines of text.

[0072] 9. If three edges of the child design element are within 5% margins of the parent edge and the fourth edge is within 33% margins of the parent, set top, bottom, left and right constraints for the child design element. This will make the child design element width and height resize with the parent design element width and height. Rules 10-13 apply to all types of child design elements.

[0073] 10. If the child design element width bounds are contained within 20% of the left margin, set the left constraint.

[0074] 11. If the sub-design element height limit is contained within 20% of the top margin, set the top constraint.

[0075] 12. If the child design element width bounds are contained within 20% of the right margin, set the right constraint.

[0076] 13. If the sub-design element height limit is contained within 20% of the bottom margin, set the bottom constraint.

[0077] Rules 14 to 15 apply to all rules.

[0078] 14. If after applying all the above rules, neither the left constraint nor the right constraint is set, then set the width constraint.

[0079] 15. If after applying all the above rules, neither the top constraint nor the bottom constraint is set, then set the height constraint.

[0080] Each of these constraints will be described below. Figure 4A and Figure 4B is discussed in additional detail in the description of Figure 4A and 4B The process of analyzing the semantics of child design elements in relation to parent design elements is described, but the design adjustment system can analyze the semantics of any design element relative to a parent design element or a design layout.

[0081] like Figure 4A As illustrated and as mentioned above, the design resize constraint system begins by determining whether the offset of a child design element is less than 15% of its parent width or height. As part of step 402, the design resize constraint calculates 15% of the parent height and calculates 15% of the parent width. The design resize constraint system accesses the offset values ​​(e.g., top, left, right, and bottom) for the child design element and determines whether the offset is less than 15% of the corresponding parent height or width.

[0082] like Figure 4A As illustrated, based on determining that the offset is less than 15% of the corresponding parent height or width, the design resize constraint system performs step 404 of setting the corresponding side constraint. For example, based on determining that the left offset is less than 15% of the parent height, the design resize constraint system sets the left constraint. The design resize constraint system repeats this analysis for each of the right, top, and bottom offsets of the child design element.

[0083] The design resize constraint system next considers the hierarchy of design elements within the design layout. In particular, as Figure 4A As part of step 406, the design resizing constraint system determines whether the child design element is a nested container or a single-line text element. In particular, the design resizing constraint system determines whether the design element is nested within another larger design element. Additionally, the design resizing constraint system determines whether the design element includes a single-line text.

[0084] If the design resize constraint system determines that the child design element is not a nested container or a single-line text element, the design resize constraint system performs step 408, which determines whether the relative offsets are almost equal and less than 25% of the parent width and height. For example, the design resize constraint system measures the left and right offsets of the design element to the corresponding edges of the parent design element or design layout. The design resize constraint system also measures the width of the parent design element or design layout. If the left and right offsets are almost equal and less than 25% of the parent width, the design resize constraint system proceeds to step 410 and sets the left and right constraints. Similarly, the design resize constraint system measures the top and bottom offsets of the design element to the corresponding edges of the parent design element or design layout. The design resize constraint system measures the height of the parent design element or design layout. If the top and bottom offsets are almost equal and less than 25% of the parent height, the design resize constraint system proceeds to step 410 and sets the top and bottom constraints.

[0085] The design resizing constraint system proceeds to step 412 to determine whether the child design element is a text element. If the design resizing constraint system determines that the child design element is a text element, the design resizing constraint system proceeds to step 414, which determines whether the width or height of the text area is 66% of the width or height of its parent. More specifically, the design resizing constraint system determines whether the width of the text area is 66% or more of the width of its parent. Based on determining that the width of the child design element is 66% or more of the width of its parent, the design constraint system proceeds to step 416 and sets a left constraint and a right constraint on the child design element. Similarly, based on determining that the height of the child design element is 66% or more of the height of the parent, the design resizing constraint system sets a top constraint and a bottom constraint as part of step 416.

[0086] For non-text elements, the design resize constraint system further evaluates whether the child design element is a single line of text 422. For a child design element that is not a single line of text, the design resize constraint system proceeds to step 424 to determine whether three edges of the child design element are within a 5% margin of the parent edge and whether the fourth edge is within a 33% margin of the parent. In particular, the design resize constraint system identifies the 5% margins of the right and left parent edges of the design element by calculating 5% of the width of the parent design element. The design resize constraint system identifies the 5% margins of the top and bottom parent edges by calculating 5% of the height of the parent design element. The design resize constraint system performs a similar analysis to identify whether the fourth edge is within a 33% margin of the parent design element. Based on determining that three edges of the child design element are within a 5% margin of the parent edge and the fourth edge is within a 33% margin, the design resize constraint system proceeds to step 426 and sets the top constraint, left constraint, right constraint, and bottom constraint for the child design element.

[0087] Next, the design resize constraint system evaluates whether the child design element width is contained within 20% of the left or right margin of the parent design element 428. Based on determining that the entire width of the child design element is contained within 20% of the left margin, the design resize constraint system sets the left constraint in step 430. Similarly, based on determining that the entire width of the child design element is contained within 20% of the right margin, the design resize constraint system sets the right constraint in step 430.

[0088] As part of step 432, the design resize constraint system evaluates whether the child design element height is contained within 20% of the top and bottom margins of the parent design element. Based on determining that the entire height of the child design element is contained within 20% of the top margin, the design resize constraint system sets the top constraint in step 434. Similarly, if the design resize constraint system determines that the entire height of the child design element is contained within 20% of the bottom margin, the design resize constraint system sets the bottom constraint in step 434.

[0089] After the design resize constraint system has applied all of the discussed heuristics, the design resize constraint system evaluates the design elements using the heuristics that apply to all of them. In particular, the design resize constraint system determines whether the left constraint or the right constraint is set in step 436. If the design resize constraint system determines that neither the left constraint nor the right constraint is set, the design resize constraint system sets the width constraint in step 440. On the other hand, based on determining whether the right constraint or the left constraint is set, the design resize constraint system does not set the width constraint in step 438.

[0090] In addition, the design resizing constraint system determines whether a top constraint or a bottom constraint is set in step 442. In particular, based on determining that a top constraint or a bottom constraint has been imposed on the design element, the design resizing constraint system does not set a height constraint according to step 446. Alternatively, if the design resizing constraint system determines that neither a top constraint nor a bottom constraint is set, the design resizing constraint system sets a height constraint in step 444.

[0091] Figure 5A and Figure 5B The figure shows the above relative to Figure 4A and Figure 4B An example of the heuristics described applies. Figure 5A and Figure 5B Example parent and child design elements are illustrated. In particular, Figure 5A A parent design element 502 having child design elements 504, 506, 508, 510, and 512 is illustrated. Figure 5B Illustrated is the updated parent design element 502a during a resize operation.

[0092] The design resize constraint system accesses semantic information about the parent design element 502 and the child design elements 504, 506, 508, 510, and 512. The design resize constraint system then uses a heuristic system to identify the semantically-aware resize constraints that can be applied to the parent design element 502. In particular, the design resize constraint system applies the heuristics mentioned above. For example, the design resize constraint system first applies rules 1-4 to the child design elements 504, 506, 508, 510, and 512. Focusing specifically on the child design element 504, the design resize constraint system determines that the top offset of the child design element 504 is less than 15% of the height of the parent design element 502. Therefore, the design resize constraint system sets a top constraint on the child design element 504, which binds the top edge of the child design element 504 to the top edge of the parent design element 502. The design resize constraint system also determines that the bottom offset of the child design element 504 is less than 15% of the height of the parent design element 502. Therefore, the design resize constraint system also sets a bottom constraint on the child design element 504. The design resize constraint system determines that both the right offset and the left offset of the child design element are not less than 15% of the width of the parent design element 502. Therefore, the design resize constraint system does not set a left constraint or a right constraint at this time.

[0093] The design resize constraint system does not apply rules 5-6 because sub-design elements 504, 506, 508, 510, and 512 are nested containers. In addition, the design resize constraint system does not apply rules 7-8 because sub-design elements 504, 506, 508, 510, and 512 are not text area sub-design elements. The design resize constraint system applies rule 9 to sub-design elements 504, 506, 508, 510, and 512. However, since no 3 edges of the sub-design elements are within the 5% margin of the parent edge, the design resize constraint system does not apply additional constraints. Finally, based on rules 14 and 15, the design resize constraint system sets width constraints on all sub-design elements 504, 506, 508, 510, and 512 because the design resize constraint system sets neither left constraints nor right constraints on the sub-design elements. Thus, based on the applied heuristic system, the design resizing constraint system applies a top semantically-aware constraint, a bottom semantically-aware resizing constraint, and a width semantically-aware resizing constraint to each of the sub-design elements 504 , 506 , 508 , 510 , and 512 .

[0094] Figure 5B The resized parent design element 502a is illustrated during a resizing operation. Figure 5B As illustrated, the resized parent design element 502a is shorter in width than the original parent design element 502. In particular, the parent design element 502a includes a top fixed overlay 514 and a bottom fixed overlay 516, which correspond to the top semantic-aware constraint and the bottom semantic-aware resize constraint. In at least one embodiment, the design resize constraint system introduces a width fixed overlay to represent the width constraints applied to the child design elements 504, 506, 508, 510, and 512.

[0095] As mentioned above, the design resizing constraint system can automatically apply semantically-aware resizing constraints to design elements of a design layout. In addition, the design resizing constraint system enables applying manually selected constraints to the same design elements of a design layout. Figure 6A-6D A series of graphical user interfaces are illustrated that show the resizing behavior for a design using automatically applied semantically aware resizing constraints and manually selected constraints. In particular, FIG. 6A to FIG. 6B A graphical user interface showing automatically applied semantically-aware resizing constraints is illustrated. FIG. 6C to FIG. 6D A graphical user interface showing manually selected constraints is illustrated.

[0096] Fig. 6AA resize constraint graphical user interface 602 presented by a design resize constraint system when the design resize constraint system automatically applies semantically aware resize constraints is illustrated. In particular, the resize constraint graphical user interface 602 includes a first design element 604 having a nested second design element 608. In addition, the resize constraint graphical user interface 602 includes a custom panel 614 that includes an automatic selection element 610, a manual selection element 612, an edge constraint element 616, a width constraint element 618, and a height constraint element 620. As discussed, the first design element 604 can represent a parent design element that includes the nested child second design element 608. In addition, the first design element 604 can represent a display layout that includes the second design element 608.

[0097] The design resize constraint system can highlight the selected design element and display information related to the selected design element. Fig. 6A As illustrated, the design resize constraint system presents an initial size of a first design element 604 and a second design element 608 via a resize constraint graphical user interface 602. Based on detecting a designer selection of the second design element 608, the design resize constraint system highlights the second design element 608. For example, the design resize constraint system highlights the second design element 608 using a resize point. In at least one or more other embodiments, the design resize constraint system highlights more than one design element based on detecting a designer interaction with the plurality of design elements. For example, based on the designer selection of the plurality of design elements, the design resize constraint system may present fixed overlays for all of the selected plurality of design elements and constraints for all of the selected plurality of design elements.

[0098] The design resize constraint system presents customization options for the highlighted design element. Fig. 6A As illustrated, the design resize constraint system presents responsive resize data associated with the selected design element using a customization panel 614. Based on designer interactions with the customization panel 614, the design resize constraint system customizes the size of the selected design element, the resize behavior of the selected design element, and the appearance (e.g., color, border, opacity, blur, etc.) of the selected design element.

[0099] The design resize constraint system presents a visual representation for the automatically applied semantically-aware resize constraints using a custom panel 614. In particular, the design resize constraint system highlights the automatically selected element 610 to indicate that the constraints applied to the highlighted second design element 608 are automatically applied semantically-aware resize constraints. In addition, the design resize constraint system highlights the left constraint and the top constraint of the edge constraint element 616 to indicate that the design resize constraint system has applied the left constraint and the top constraint to the second design element 608 based on design semantics. As illustrated, the design resize constraint system also highlights the width constraint element 618 and the height constraint element 620 to indicate the applied width and height constraints.

[0100] Based on the designer request to resize first design element 604 , the design resize constraint system updates resize constraint graphical user interface 602 to demonstrate the resize behavior for second design element 608 . Figure 6B An updated first design element 604a is illustrated with a nested updated second design element 608a. In addition, the design resize constraint system presents a top fixed overlay 622 and a left fixed overlay 624.

[0101] A design resize constraint system can detect a designer request to resize a graphical user interface design layout. Figure 6B The resize constraint graphical user interface 602 is illustrated during a resize operation on a first design element 604 and a second design element 608. Figure 6B As illustrated, the design resize constraint system identifies a designer selection of a corner of a first design element 604. Based on the drag motion of the corner of the first design element 604, the design resize constraint system generates an updated first design element 604a and an updated second design element 608a. As the design resize constraint system updates the first design element 604a based on the designer interaction with the first design element 604a, the design resize constraint system resizes the updated second design element 608a based on the automatically applied semantically-aware resize constraints.

[0102] although Figure 6BThe design resize constraint system is illustrated as identifying a selection and drag gesture as a request to resize the graphical user interface design layout, but the design resize constraint system can receive additional requests for resize of the design layout. In particular, the designer can interact with the elements in the custom panel 614 to specify the desired dimensions of the design layout. For example, based on the designer selection of the first design element 604, the design resize constraint system can update the custom panel 614 to display data related to the first design element 604. The designer can then enter the desired resize dimensions for the first design element 604.

[0103] The design resize constraint system presents a fixed overlay to show the fixed behavior of sub-design elements during resize operations without excessive visual noise. Figure 6B As illustrated, the design resize constraint system presents a top fixed overlay 622 and a left fixed overlay 624 to show that the updated second design element 608a has been fixed to the left and top edges of the updated first design element 604a based on the top and left constraints. In at least one other embodiment, the design resize constraint system includes width and height fixed overlays to show that the design resize constraint system also applies a width constraint and a height constraint to the updated second design element 608a.

[0104] As discussed above, the design resize constraint system can switch between imposing automatic semantically-aware resize constraints and manually selected constraints on design elements. FIG. 6C to FIG. 6D An example resize constraint graphical user interface 602 is illustrated that presents controls and layout for manually selected constraints. In particular, Figure 6C A first design element 604 and a second design element 608 are illustrated at initial sizes. Fig.6D An updated first design element 604a and an updated second design element 608a are illustrated during a resizing operation.

[0105] As discussed above, the design resizing constraint system may present the designer with options for manually selected constraints to be applied to digital elements. Figure 6C Resize constraint GUI 602 is illustrated including first design element 604 and second design element 608. Resize constraint GUI 602 includes customization panel 614 having auto-select element 610, manual-select element 612, edge constraint element 616, width constraint element 618, and height constraint element 620.

[0106] The design resize constraint system can remove automatically applied semantically-aware resize constraints from selected design elements and apply manually selected constraints. Figure 6CAs illustrated, although the design resize constraint system automatically defines the top constraint, left constraint, width constraint, and height constraint for the second design element 608, the design resize constraint system can remove those automatically applied semantically-aware resize constraints. For example, based on the user interaction with the manually selected element 612, the design resize constraint system determines to apply the manually selected constraints to the second design element 608. In particular, the designer can select the top constraint and the left constraint of the edge constraint element 616 to remove the automatically applied left constraint and top constraint. In addition, the designer can select the right constraint and the bottom constraint of the edge constraint element 616. Based on the designer interaction with the edge constraint element 616, the design resize constraint system can determine the constraints to be applied to the second design element 608. Although not illustrated, the design resize constraint system can also detect the designer interaction with the width constraint element 618 and the height constraint element 620 to add or remove the width constraint and the height constraint.

[0107] The resize constraint system is designed to enforce the manually selected constraints and update the resize constraint graphical user interface 602 to include a fixed overlay during the resize operation. Fig.6D The resize constraint graphical user interface 602 is illustrated with an updated first design element 604a and an updated second design element 608a. In addition, the design resize constraint system presents a right fixed overlay 626 and a bottom fixed overlay 628. Note that in addition to the manually applied right and bottom constraints, the automatically applied width and height constraints are also applied during resizing.

[0108] As the design resize constraint system receives a designer request to resize the first design element 604, the design resize constraint system illustrates the fixed behavior of the second design element 608. In particular, the design resize constraint system presents the updated first design element 604a to provide real-time feedback for the request to resize the first design element 604. In addition, the updated second design element 608a illustrates the real-time resize behavior of the second design element 604 based on the manually selected constraints. For example, the design resize constraint system generates a right fixed overlay 626 and a bottom fixed overlay 628 to showcase the fixed behavior of the updated second design element 608a.

[0109] like FIG. 6A to FIG. 6DAs shown, the design resize constraint system also provides a unique balance and workflow between automatically generated semantic-aware resize constraints and manual constraints. In particular, the design resize constraint system causes any resize operation to be automatically constrained by the automatically generated semantic-aware resize constraints. Therefore, the design resize constraint system does not need to present complex details about the constraints. If the user chooses to edit the automatically generated semantic-aware constraints and switch one or more to manual constraints, the design resize constraint system reveals a constraint UI pre-populated with constraints, which allows the user to make edits to change the responsive behavior of the element. The design resize constraint system can then use this feedback to optimize and run heuristic algorithms to learn intelligently.

[0110] FIG. 7A to FIG. 7D A pair of example graphical user interface design layouts are illustrated at an initial size and during a resize operation. In particular, FIG. 7A to FIG. 7D It illustrates that the design resizing constraint system can accurately resize a graphical user interface design layout even when the design layout contains complex design elements.

[0111] FIG. 7A to FIG. 7B A design resizing constraint system for resizing a design layout including a plurality of design elements is illustrated. In particular, Fig. 7A An initial-sized design layout 702 is illustrated. Figure 7B An updated design layout 702a is illustrated.

[0112] Fig. 7A Illustrated is a design layout 702 that includes a title element 704, a text graphic element 706, and an image element 708. The design resizing constraint system applies semantically-aware resizing constraints to each design element in the design layout 702 based on the analyzed design semantics of the design layout.

[0113] Figure 7B The diagram illustrates the different constraints imposed on the design elements of the design layout. In particular, Figure 7BAn updated design layout 702a is illustrated, which includes an updated title design element 704a, an updated text graphic element 706a, and an updated image element 708. The design resize constraint system applies a left constraint and a right constraint to the text graphic element 706 to generate an updated text graphic element 706a that spans the width of the updated design layout 702a. Instead of applying a left constraint and a right constraint to the image element 708, the design resize constraint system applies a width constraint to the image element 708 to generate a resized image element 708a. Since the width of the resized image element 708a is fixed, the design resize constraint system includes the additional resized image element 708a in the updated design layout 702a that was not included in the initial design layout 702.

[0114] FIG. 7C to FIG. 7D Additional examples of design layouts including various types of design elements are provided. In particular, Figure 7C Design layout 710 is illustrated, including a title design element 712 , an interactive media element 714 , and a text design element 718 at initial sizes.

[0115] Fig.7D An updated design layout 710a is illustrated during a resizing operation. In particular, the updated design layout 710a includes a top fixed overlay 716a, a left fixed overlay 716b, and a right fixed overlay 716c for an updated title design element 712a. In addition, the updated design layout 710a includes an updated interactive media element 714a and an updated text design element 718a.

[0116] The design resize constraint system can adapt to individual design elements as they are resized. In particular, the design resize constraint system can expand or minimize images and reconfigure text to fit the text container. For example, Figure 7B As shown, the design resizing constraint system expands interactive media element 714 to the size of updated interactive media element 714a. The design resizing constraint system maximizes the dimensions of updated interactive media element 714a (i.e., enlarges the media element). In at least one other embodiment, the design resizing constraint system expands the border of updated interactive media element 714a while maintaining the same dimensions of the media presented within updated interactive media element 714a. For example, the design resizing constraint system may display a cropped snapshot of interactive media element 714 at the initial size. Thus, when the design resizing constraint system expands the border of interactive media element 714, the design resizing constraint system may remove the cropping to present updated interactive media element 714a at the same dimensions. Additionally, as shown Figure 7BAs illustrated, the design resize constraint system reformats the text in the updated title design element 712a and the updated text design element 718a to fit the boundaries of the respective elements. In additional embodiments, the design resize constraint system changes the font, font size, spacing, and formatting of the text design elements.

[0117] Reference now Figure 8 , provides additional details about the capabilities and components of a design resizing constraint system according to one or more embodiments. In particular, Figure 8 A schematic diagram of an example architecture of a design resizing constraint system 804 of a content design system 802 implemented on a computing device 800 is shown. The design resizing constraint system 804 can represent one or more embodiments of the design resizing constraint system described previously. In one or more embodiments, some or all components of the design resizing constraint system 804 can be implemented separately from the content design system 802. In addition, the computing device 800 can include a variety of different devices. For example, in some embodiments, some or all components of the design resizing constraint system 804 are implemented on a client device and / or a server device.

[0118] In one or more embodiments, the content design system 802 generally facilitates the creation, modification, sharing, and / or deletion of graphical content. In one or more embodiments, the content design system 802 is a system such as In other embodiments, the content design system 802 includes a variety of applications, functions, and operations related to graphical content, such as packaged applications, web-based applications, and / or system operations on the computing device 800.

[0119] like Figure 8 As illustrated, design resizing constraint system 804 includes various components for performing the processes and features described herein. For example, design resizing constraint system 804 includes design element analyzer 806, constraint manager 808, resized design generator 810, user feedback manager 812, and database 820. Each of these components is described in turn below.

[0120] As mentioned above, the design resize constraint system 804 includes a design element analyzer 806. For example, in one or more embodiments, the design element analyzer 806 detects or identifies design elements in a design. For example, the design element analyzer 806 can detect design elements and determine a type for each design element (e.g., whether the design element is a container, text). The design element analyzer 806 detects relationships between design elements (e.g., parent-child). In addition, the design element analyzer 806 detects design element offsets, sizes, relative positions, etc. Additional descriptions of tasks performed by the design element analyzer 806 are provided above.

[0121] As shown, the design resizing constraint system 804 includes a constraint manager 808. Typically, the constraint manager 808 can impose constraints on design elements based on the analysis of the design element analyzer 806 described above. In particular, the constraint manager 808 accesses the semantic information extracted by the design element analyzer 806. The constraint manager 808 uses the heuristic rules discussed above to identify a set of semantically-aware resizing constraints for each design element. In addition, the constraint manager 808 dynamically analyzes the semantics of the design elements and generates a new set of semantically-aware resizing constraints as required. The constraint manager 808 also manages manually selected constraints. In particular, the constraint manager 808 identifies whether the imposed constraints are automatically imposed semantically-aware resizing constraints or manually selected constraints.

[0122] like Figure 8 As illustrated, the design resize constraint system 804 includes a resized design generator 810. In general, the resized design generator 810 receives user input to change the size of a design layout (e.g., receives user input to change the design layout or viewport from a smartphone size to a tablet size). The resized design generator 810 applies semantically-aware resize constraints defined by the constraint manager 808 to each design element of the design layout. Based on the applied constraints (e.g., manually selected or automatically applied) and the received resize request, the resized design generator 810 generates a resized design layout with resized design elements.

[0123] The design resize constraint system 804 also includes a user feedback manager 812. In general, the user feedback manager 812 manages: presenting a resize constraint graphical user interface, detecting interactions with the resize constraint graphical user interface, and adapting the design layout based on detected designer interactions with the resize constraint graphical user interface. The user feedback manager 812 can allow a user to modify, shape, deform, and / or manipulate the shape / size of a design (or design element). In particular, the user feedback manager 812 presents a fixed overlay that shows the resize behavior of the design element based on the constraints. In addition, the user feedback manager 812 presents the designer with an option to switch between applying automatic semantically aware resize constraints and manually selected constraints.

[0124] The design resizing constraint system 804 also includes a database 820. The database includes constraint rules 822 (e.g., Figure 4A and Figure 4B The constraint rules 822 may include a set of constraint rules for identifying appropriate semantically-aware resizing constraints on design elements based on design semantics. More specifically, the constraint rules 822 include the above with respect to FIG. 4A to FIG. 4B The rules in question.

[0125] Each of the components 806-820 of the design resizing constraint system 804 can include software, hardware, or both. For example, the components 806-820 can include one or more instructions stored on a computer-readable storage medium and executable by a processor of one or more computing devices, such as a client device (e.g., a mobile client device) or a server device. When executed by one or more processors, the computer-executable instructions of the design resizing constraint system 804 can cause the computing device to perform the resized graphical user interface generation as described herein. Alternatively, the components 806-820 can include hardware, such as a dedicated processing device for performing a particular function or group of functions. In addition, the components 806-820 of the design resizing constraint system 804 can include a combination of computer-executable instructions and hardware.

[0126] In addition, the components 806-820 of the design resizing constraint system 804 can be implemented as one or more operating systems, one or more stand-alone applications, one or more modules of an application, one or more plug-ins, one or more library functions or functions that can be called by other applications, and / or a cloud computing model. Therefore, the components 806-820 can be implemented as stand-alone applications, such as desktop or mobile applications. In addition, the components 806-820 can be implemented as one or more web-based applications hosted on a remote server. The components 806-820 can also be implemented in a set of mobile device applications or "apps". For illustration, the components 806-820 can be implemented in an application, which includes but is not limited to Adobe Adobe CREATIVE "ADOBE", "INDESIGN", "ACROBAT", "ILLUSTRATOR", "PHOTOSHOP" and "CREATIVE CLOUD" are registered trademarks or trademarks of Adobe Systems Incorporated in the United States and / or other countries.

[0127] Fig. 9 A schematic diagram of an environment 900 is illustrated in which the design resizing constraint system 804 can be implemented according to one or more embodiments. Fig. 9 As shown, environment 900 includes various computing devices, including (multiple) server devices 904 and one or more client devices 902. In addition, environment 900 includes network 912. Network 912 can be any suitable network with which computing devices can communicate. Fig.11 The example network is discussed in more detail.

[0128] As shown, environment 900 includes client device 902. Client device 902 may include various types of client devices. For example, in some embodiments, client device 902 includes a mobile device, such as a laptop computer, a tablet computer, a mobile phone, a smart phone, etc. In other embodiments, client device 902 includes a non-mobile device, such as a desktop computer or a server or other type of client device. Fig.11 Additional details regarding client device 902 are discussed.

[0129] like Fig. 9As shown, environment 900 includes (multiple) server devices 904. (Multiple) server devices 904 can receive, store, generate and / or transmit any type of data, including design layouts. For example, (multiple) server devices 904 can receive, store and resize design layouts from client devices 902, and transmit the resized design layouts to client devices 902. In one or more embodiments, (multiple) server devices 904 include data servers. (Multiple) server devices 904 can also include communication servers or web hosting servers. Fig.11 Additional details are provided regarding server device(s) 904 .

[0130] Although not illustrated, in one or more embodiments, the server device(s) 904 may also include all or a portion of the design resizing constraint system 804, such as within the content design server system 906. For example, when located in the server device(s) 904, the design resizing constraint system 804 may include a design resizing constraint application running on the server device(s) 904 or a portion of a software application that may be downloaded to the client device 902. For example, the design resizing constraint system 804 includes a web-hosted application that allows the client device 902 to interact with content from the content design server system 906 hosted on the server device(s) 904. In this manner, the server device(s) 904 may perform design layout resizing based on input from the client device 902.

[0131] like Fig. 9 As illustrated, the client device 902 includes a content design application 908 and a design resizing constraint application 910. In particular, the design resizing constraint application 910 may include all or a portion of the design resizing constraint system 804. In addition, the design resizing constraint application 910 also allows the client device 902 to interact with content from the content design server system 906 hosted on the server device(s) 904. Thus, the design resizing constraint application 910 allows the client device 902 to perform design layout resizing.

[0132] although Fig. 9 A particular arrangement of server device(s) 904, client device 902, and network 912 is illustrated, but various additional arrangements are possible. Fig. 9 One or more client devices 902 are illustrated as communicating with server device(s) 904 via network 912 , but in one or more embodiments, a single client device may communicate directly with server device(s) 904 bypassing network 912 .

[0133] Similarly, although Fig. 9 The environment 900 of is described as having various components, but the environment 900 can have additional or alternative components. For example, the design resizing constraint system 804 can be implemented on multiple computing devices. In particular, the design resizing constraint system 804 can be implemented in its entirety by (multiple) server devices 904, or the design resizing constraint system 804 can be implemented in its entirety by the client device 902. Alternatively, the design resizing constraint system 804 can be implemented across multiple devices or components (e.g., using (multiple) server devices 904 and one or more client devices 902).

[0134] Figures 1A to 9 , corresponding text and examples provide many different methods, systems, devices, and non-transitory computer-readable media for designing resizing constraint system 804. In addition to the foregoing, a flowchart (such as Fig. 9 One or more embodiments may be described using flowcharts of actions shown in the drawings. In addition, the actions described herein may be repeated or performed in parallel with each other or with different instances of the same or similar actions. For example, Fig.10 1000 is a flow diagram illustrating a series of actions 1000 for generating a resized graphical user interface design layout in accordance with one or more embodiments. Fig.10 The actions according to one embodiment are illustrated, but alternative embodiments may omit, add, reorder and / or modify Fig.10 Any action shown. Fig.10 The actions of may be performed as part of a method. Alternatively, the non-transitory computer readable medium may include a program that, when executed by one or more processors, causes a computing device to perform Fig.10 In some other embodiments, the system may execute Fig.10 action.

[0135] like Fig.10 As illustrated, a series of acts 1000 may include an act 1010 of receiving a request to resize a graphical user interface design layout. For example, act 1010 may include receiving a request to resize a graphical user interface design layout from a first size to a second size, the graphical user interface design layout including a plurality of graphical user interface elements. The second size may be larger or smaller than the first size and have the same shape or a different shape than the first size.

[0136] A series of actions 1000 may also include an action 1020 of analyzing the semantics of a graphical user interface design layout. For example, action 1020 may include: identifying the hierarchy of graphical user interface elements, determining the type of graphical user interface elements, and / or identifying the relative positions between graphical user interface elements. More particularly, action 1020 may involve identifying the parent-child relationship between the graphical user interface elements of the graphical user interface design layout. Action 1020 may also involve identifying the offset between the edge of a child graphical user interface element and the corresponding edge of a parent graphical user interface element. In addition, action 1020 may include identifying the type of graphical user interface element. For example, action 1020 may involve determining whether a graphical user interface element is text, single line, nested, etc.

[0137] Additionally, act 1020 may involve identifying a set of element edges of a graphical user interface element of the plurality of graphical user interface elements; and identifying a set of design layout edges of the graphical user interface design layout. Additionally, act 1020 may involve measuring an offset length, wherein the offset length comprises a distance between an element edge in the set of element edges and a corresponding design layout edge in the set of design layout edges. Act 1020 may also include determining a length of the graphical user interface element between opposing element edges in the set of element edges, and determining a corresponding length of the graphical user interface design layout between corresponding opposing design layout edges in the set of design layout edges.

[0138] A series of actions 1000 may include an action 1030 of automatically defining a set of semantically-aware resizing constraints. In particular, action 1030 includes: automatically defining a set of semantically-aware resizing constraints for multiple graphical user interface elements based on the analyzed semantics of the graphical user interface design layout. Specifically, action 1030 may involve: applying a heuristic system to the analyzed semantics of the graphical user interface design layout. For example, action 1030 may involve: determining that the offset length is less than a threshold ratio of the graphical user interface design layout; and based on the determination that the offset length is less than the threshold ratio of the design layout, defining edge semantically-aware constraints by fixing element edges to corresponding design layout edges. Action 1030 may also involve: determining that the length of the graphical user interface element meets the threshold ratio of the corresponding length of the graphical user interface design layout; and based on the determination that the length of the graphical user interface element meets the threshold ratio, defining relative edge semantically-aware constraints by fixing each relative element edge in the relative element edge pair to the corresponding relative design layout edge in the relative design layout edge. Action 1030 may involve: determining that any relative edge of a relative element edge pair is not fixed to a corresponding set of relative design layout edges; and based on the determination that any relative edge of the relative element edge pair is not fixed to a corresponding set of relative design layout edges, setting a length semantic-aware constraint on the graphical user interface element. In addition, action 1030 may involve: determining that an offset length for a child graphical user interface element is less than a threshold ratio of a corresponding parent graphical user interface element; and based on the determination that the offset length is less than the threshold ratio, defining an edge semantic-aware constraint by fixing an edge of the child graphical user interface element to a corresponding edge of the parent graphical user interface element. Action 1030 may also involve: detecting a user change to one or more graphical user interface elements of the graphical user interface design layout before resizing the graphical user interface design layout; and dynamically updating the set of semantic-aware resizing constraints based on the user change to the one or more graphical user interface elements.

[0139] The series of acts 1000 also includes an act of generating a resized graphical user interface design layout 1040. In particular, act 1040 may include generating a resized graphical user interface design layout of a second size by resizing the plurality of graphical user interface elements according to the set of automatically defined semantically-aware resizing constraints.

[0140] A series of actions 1000 may also include an action of generating a design resizing interface for display at a designer device, the design resizing interface including a graphical user interface design layout, a plurality of graphical user interface elements, a fixed overlay representing a set of semantically-aware resizing constraints, an automatic constraint element, and a manual constraint element. The action may also include presenting a set of automatic fixed overlays representing a set of semantically-aware resizing constraints via the design resizing interface. In addition, the action may include: detecting a user interaction with the manual constraint element; and presenting the set of manual constraints via the graphical user interface element based on the user interaction with the manual constraint element. The action may also include: detecting a designer selection of at least one manual constraint in the set of manual constraints; updating the design resizing interface to present a set of manual fixed overlays representing at least one manual constraint in the set of manual constraints; and generating a manually resized graphical user interface design layout of a second size by resizing the plurality of graphical user interface elements according to at least one manual constraint in the set of manual constraints based on the detected designer interaction.

[0141] The sequence of actions may also involve: presenting an automatic pinning overlay representing edge semantics-aware constraints during resizing; and after generating the resized graphical user interface design layout, removing the automatic pinning overlay representing edge semantics-aware constraints.

[0142] In addition (or alternatively) to the above actions, in some embodiments, action 1000 includes performing steps for analyzing the semantics of the graphical user interface design layout, and performing steps for automatically defining a set of semantically-aware resizing constraints for a plurality of graphical user interface elements based on the analyzed semantics of the graphical user interface design layout. Figure 2 , Figure 3A-Figure 3F The described actions may include corresponding actions for performing steps for analyzing the semantics of the graphical user interface design layout. Figure 4A-4B and associated descriptions include corresponding acts for performing steps for automatically defining a set of semantics-aware resizing constraints for a plurality of graphical user interface elements based on analyzed semantics of a graphical user interface design layout.

[0143] As discussed in more detail below, embodiments of the present disclosure may include or utilize a special-purpose or general-purpose computer, including computer hardware, such as, for example, one or more processors and system memory. Embodiments within the scope of the present disclosure also include physical and other computer-readable media for carrying or storing computer-executable instructions and / or data structures. In particular, one or more processes described herein may be implemented at least in part as instructions embodied in a non-transitory computer-readable medium and executable by one or more computing devices (e.g., any media content access device described herein). Typically, a processor (e.g., a microprocessor) receives instructions from a non-transitory computer-readable medium (e.g., a memory, etc.) and executes those instructions, thereby performing one or more processes, including one or more processes described herein.

[0144] Computer-readable media can be any available media that can be accessed by a general or special purpose computer system. A computer-readable medium that stores computer-executable instructions is a non-transitory computer-readable storage medium (device). A computer-readable medium that carries computer-executable instructions is a transmission medium. Therefore, by way of example and not limitation, embodiments of the present disclosure may include at least two distinct types of computer-readable media: a non-transitory computer-readable storage medium (device) and a transmission medium.

[0145] Non-transitory computer-readable storage media (devices) include RAM, ROM, EEPROM, CD-ROM, solid-state drives (“SSD”) (e.g., RAM-based), flash memory, phase-change memory (“PCM”), other types of memory, other optical disk storage devices, magnetic disk storage devices or other magnetic storage devices, or any other medium that can be used to store desired program code means in the form of computer-executable instructions or data structures and that can be accessed by a general or special purpose computer.

[0146] A "network" is defined as one or more data links that enable the transmission of electronic data between computer systems and / or modules and / or other electronic devices. When information is transmitted or provided to a computer via a network or other communication connection (hardwired, wireless, or a combination of hardwired or wireless), the computer correctly views the connection as a transmission medium. Transmission media may include networks and / or data links that can be used to carry desired program code means in the form of computer executable instructions or data structures and can be accessed by general or special computers. Combinations of the above should also be included within the scope of computer-readable media.

[0147] In addition, after reaching various computer system components, program code means in the form of computer executable instructions or data structures can be automatically transferred from the transmission medium to the non-transitory computer readable storage medium (device) (or vice versa). For example, computer executable instructions or data structures received over a network or data link can be buffered in RAM within a network interface module (e.g., "NIC"), and then ultimately transferred to the computer system RAM and / or non-volatile computer storage medium (device) at the computer system. Therefore, it should be understood that non-transitory computer readable storage media (devices) can be included in computer system components that also (or even primarily) utilize transmission media.

[0148] For example, computer executable instructions include instructions and data, which, when executed at a processor, cause a general-purpose computer, a special-purpose computer, or a special-purpose processing device to perform a specific function or function group. In some embodiments, computer executable instructions are executed on a general-purpose computer to convert a general-purpose computer into a special-purpose computer that implements an element of the present disclosure. For example, computer executable instructions can be binary, intermediate format instructions (such as assembly language), or even source code. Although the subject matter has been described in a language specific to structural features and / or method actions, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the above-mentioned features or the above-mentioned actions. On the contrary, the features and actions are disclosed as example forms of implementing the claims.

[0149] Those skilled in the art will appreciate that the present disclosure can be practiced in a network computing environment with many types of computer system configurations, including personal computers, desktop computers, laptop computers, message processors, handheld devices, multiprocessor systems, microprocessor-based or programmable consumer electronics, network PCs, minicomputers, mainframe computers, mobile phones, PDAs, tablet computers, pagers, routers, switches, etc. The present disclosure can also be practiced in a distributed system environment, where local and remote computer systems linked by a network (by a combination of hardwired data links, wireless data links, or hardwired and wireless data links) all perform tasks. In a distributed system environment, program modules can be located in both local and remote memory storage devices.

[0150] Embodiments of the present disclosure may also be implemented in a cloud computing environment. In this specification, "cloud computing" is defined as a model for implementing on-demand network access to a shared pool of configurable computing resources. For example, cloud computing may be employed in the marketplace to provide ubiquitous and convenient on-demand access to a shared pool of configurable computing resources. A shared pool of configurable computing resources may be rapidly provisioned via virtualization and released with low management effort or service provider interaction and then scaled accordingly.

[0151] The cloud computing model may consist of various features, such as, for example, on-demand self-service, broad network access, resource pools, rapid elasticity, measured services, etc. The cloud computing model may also expose various service models, such as software as a service ("SaaS"), platform as a service ("PaaS"), and infrastructure as a service ("IaaS"). The cloud computing model may also be deployed using different deployment models, such as private cloud, community cloud, public cloud, hybrid cloud, etc. In this specification and claims, a "cloud computing environment" is an environment that employs cloud computing.

[0152] Fig.11 An example computing device 1100 (e.g., computing device 800, client device 902, and / or server device(s) 904) that may be configured to perform one or more of the processes described above is illustrated in block diagram form. It will be appreciated that the design resizing constraint system 804 may include an implementation of the computing device 1100. Fig.11 As shown, the computing device may include a processor 1102, a memory 1104, a storage device 1106, an I / O interface 1108, and a communication interface 1110. In addition, the computing device 1100 may include an input device, such as a touch screen, a mouse, a keyboard, etc. In some embodiments, the computing device 1100 may include a processor 1102, a memory 1104, a storage device 1106, an I / O interface 1108, and a communication interface 1110. Fig.11 Fewer or more components are shown. Fig.11 Components of computing device 1100 are shown.

[0153] In certain embodiments, processor(s) 1102 include hardware for executing instructions, such as those that make up a computer program. By way of example and not limitation, to execute instructions, processor(s) 1102 may retrieve (or fetch) instructions from internal registers, internal cache, memory 1104, or storage device 1106, and decode and execute them.

[0154] The computing device 1100 includes a memory 1104 coupled to the processor(s) 1102. The memory 1104 may be used to store data, metadata, and programs for execution by the processor(s). The memory 1104 may include one or more volatile and non-volatile memories, such as random access memory ("RAM"), read-only memory ("ROM"), solid-state disk ("SSD"), flash memory, phase change memory ("PCM"), or other types of data storage devices. The memory 1404 may be an internal memory or a distributed memory.

[0155] The computing device 1100 includes a storage device 1106, which includes a storage device for storing data or instructions. As an example and not by way of limitation, the storage device 1106 may include the non-transitory storage medium described above. The storage device 1106 may include a hard disk drive (HDD), a flash memory, a universal serial bus (USB) drive, or a combination of these or other storage devices.

[0156] The computing device 1100 also includes one or more input or output ("I / O") devices / interfaces 1108, which are provided to allow a user to provide input (such as user strokes) to the computing device 1100, receive output from the computing device 1100, and otherwise transfer data to / from the computing device 1100. These I / O devices / interfaces 1108 may include a mouse, keyboard, touch screen, camera, optical scanner, network interface, modem, other known I / O devices, or combinations of such I / O devices / interfaces 1108. The touch screen may be activated by a writing device or a finger.

[0157] I / O devices / interfaces 1108 may include one or more devices for presenting output to a user, including, but not limited to, a graphics engine, a display (e.g., a display screen), one or more output drivers (e.g., a display driver), one or more audio speakers, and one or more audio drivers. In some embodiments, devices / interfaces 1108 are configured to provide graphics data to the display for presentation to the user. The graphics data may represent one or more graphical user interfaces and / or any other graphical content that may serve a particular implementation.

[0158] The computing device 1100 may also include a communication interface 1110. The communication interface 1110 may include hardware, software, or both. The communication interface 1110 may provide one or more interfaces for communication (such as, for example, packet-based communication) between the computing device and one or more other computing devices 1100 or one or more networks. As an example and not a limitation, the communication interface 1110 may include a network interface controller (NIC) or network adapter for communicating with an Ethernet or other wire-based network, or a wireless NIC (WNIC) or wireless adapter for communicating with a wireless network (such as Wi-Fi). The computing device 1100 may also include a bus 1112. The bus 1112 may include hardware, software, or both, which couples the components of the computing device 1100 to each other.

[0159] In the foregoing description, the present invention has been described with reference to specific example embodiments thereof. Various embodiments and aspects of the present invention are described with reference to the details discussed herein, and the accompanying drawings illustrate the various embodiments. The above description and drawings are illustrative of the present invention and are not to be construed as limiting the present invention. Many specific details are described to provide a thorough understanding of the various embodiments of the present invention.

[0160] The present invention may be embodied in other specific forms without departing from its spirit or essential characteristics. The embodiments described are considered to be illustrative and non-restrictive in all respects. For example, the methods described herein may be performed with fewer or more steps / actions, or the steps / actions may be performed in different orders. In addition, the steps / actions described herein may be repeated, or performed in parallel with each other, or performed in parallel with different examples of the same or similar steps / actions. Therefore, the scope of the present invention is indicated by the appended claims rather than by the preceding description. All changes in the equivalent meanings and scopes of the claims should be included within their scope.

Claims

1. A non-transitory computer-readable medium having stored thereon instructions that, when executed by at least one processor, cause a computing device to: providing a graphical user interface design layout of a first size for display via a designer device; receiving a request to resize a graphical user interface design layout from a first size to a second size, the graphical user interface design layout comprising a plurality of graphical user interface elements; analyzing semantics of the graphical user interface design layout; automatically defining a set of edge semantics-aware constraints for the plurality of graphical user interface elements based on the analyzed semantics of the graphical user interface design layout, wherein the set of edge semantics-aware constraints comprises at least one of a top constraint, a bottom constraint, a left constraint, or a right constraint, and wherein each edge semantics-aware constraint defines a fixed distance between an edge of an associated graphical user interface element and an adjacent edge; generating a resized graphical user interface design layout of the second size by resizing the plurality of graphical user interface elements according to the automatically defined set of edge semantics-aware constraints; providing, to the designer device, during resizing of the plurality of graphical user interface elements from the first size to the second size, an intermediate-sized layout of the graphical user interface design layout, the intermediate-sized layout selectively revealing an edge pinning overlay indicating the set of edge semantics-aware constraints for the plurality of graphical user interface elements; as well as In response to the generation of the resized graphical user interface design layout, the resized graphical user interface design layout of the second size is provided to the designer device without providing the edge pinning overlay.

2. The non-transitory computer-readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to perform the following operations: generate a resizing constraint graphical user interface for display at the designer device, the resizing constraint graphical user interface comprising the graphical user interface design layout and the plurality of graphical user interface elements, the graphical user interface design layout having manual constraint elements, the plurality of graphical user interface elements being automatically constrained by the set of edge semantics-aware constraints.

3. The non-transitory computer-readable medium of claim 2, further comprising instructions that, when executed by the at least one processor, cause the computing device to perform the following operations: based on detecting user input from the designer device selecting and dragging an edge of the graphical user interface design layout, provide the graphical user interface design layout of the intermediate size for display via the resizing constrained graphical user interface.

4. The non-transitory computer-readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to: selectively reveal the edge pinning overlay in addition to displaying other layout constraint overlays, the edge pinning overlay indicating the set of edge semantic-aware constraints for the plurality of graphical user interface elements within the intermediate-sized layout for the graphical user interface design layout.

5. The non-transitory computer-readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to: selectively reveal the edge pinning overlay without user input to individual elements of the plurality of graphical user interface elements, the edge pinning overlay indicating the set of edge semantic-aware constraints for the plurality of graphical user interface elements within the intermediate-sized layout of the graphical user interface design layout.

6. The non-transitory computer-readable medium of claim 1 , further comprising instructions that, when executed by the at least one processor, cause the computing device to analyze the semantics of the graphical user interface design layout by: identifying a set of element edges of the graphical user interface element of the plurality of graphical user interface elements; and A set of design layout edges of the graphical user interface design layout is identified.

7. The non-transitory computer-readable medium of claim 6, further comprising instructions that, when executed by the at least one processor, cause the computing device to define the set of edge semantics-aware constraints by: measuring an offset length, wherein the offset length comprises a distance between an element edge in the set of element edges and a corresponding design layout edge in the set of design layout edges; determining that the offset length is less than a threshold ratio of the GUI design layout; and Based on a determination that the offset length is less than the threshold proportion of the graphical user interface design layout, an edge semantics-aware constraint is defined by pinning the element edge to a corresponding edge of the design layout.

8. The non-transitory computer-readable medium of claim 6, further comprising instructions that, when executed by the at least one processor, cause the computing device to define the set of edge semantics-aware constraints by: determining a length of the graphical user interface element between opposing pairs of element edges in the set of element edges; determining corresponding lengths of the graphical user interface design layout between corresponding opposing design layout edges in the set of design layout edges; determining that the length of the graphical user interface element satisfies a threshold ratio of the corresponding length of the graphical user interface design layout; as well as Based on determining that the length of the graphical user interface element satisfies the threshold ratio, defining an opposing edge semantic-aware constraint by pinning each opposing element edge of the pair of opposing element edges to a corresponding opposing design layout edge of the opposing design layout edges.

9. The non-transitory computer-readable medium of claim 6, further comprising instructions that, when executed by the at least one processor, cause the computing device to define a set of size semantics-aware constraints by: determining that any opposing edges of an opposing pair of element edges of the graphical user interface element are not anchored to a corresponding set of opposing design layout edges; and Based on a determination that any opposing edges of the pair of opposing element edges of the graphical user interface element are not pinned to the corresponding set of opposing design layout edges, a length semantics-aware constraint is set on the graphical user interface element.

10. The non-transitory computer-readable medium of claim 1, further comprising instructions that, when executed by the at least one processor, cause the computing device to perform the following operations: analyzing the semantics of the graphical user interface design layout by determining a type of a graphical user interface element among the plurality of graphical user interface elements.

11. A system for semantically aware constraint selection, comprising: at least one processor; a heuristics system, including rules for generating constraints; as well as A computer readable storage medium storing instructions that, when executed by the at least one processor, cause the system to: providing a graphical user interface design layout of a first size for display via a designer device; receiving a request to resize a graphical user interface design layout from a first size to a second size, the graphical user interface design layout comprising a plurality of graphical user interface elements; The semantics of the graphical user interface design layout is analyzed as follows: Identify the hierarchy of graphical user interface elements; determining a type of the graphical user interface element; as well as identifying relative positioning between said graphical user interface elements within said hierarchy of graphical user interface elements; automatically defining a set of edge semantics-aware constraints for each of the plurality of graphical user interface elements based on the analyzed semantics of the graphical user interface design layout, wherein the set of edge semantics-aware constraints comprises at least one of a top edge constraint, a bottom edge constraint, a left edge constraint, or a right edge constraint, and wherein each edge semantics-aware constraint defines a fixed distance between an edge of each of the plurality of graphical user interface elements and an adjacent edge; generating a resized graphical user interface design layout of the second size by resizing the plurality of graphical user interface elements by maintaining the fixed distance between the edge of each element of the plurality of graphical user interface elements and the adjacent edge indicated in the automatically defined set of edge semantics-aware constraints; providing, to the designer device, during resizing of the plurality of graphical user interface elements from the first size to the second size, an intermediate-sized layout of the graphical user interface design layout, the intermediate-sized layout temporarily revealing an edge pinning overlay indicating the set of edge semantics-aware constraints for the plurality of graphical user interface elements; and In response to the generation of the resized graphical user interface design layout, the resized graphical user interface design layout of the second size is provided to the designer device without providing a layout overlay including the margin pinning overlay.

12. The system of claim 11, wherein the instructions, when executed by the at least one processor, cause the system to: identify the hierarchy of graphical user interface elements by identifying parent and child relationships between the graphical user interface elements of the graphical user interface design layout.

13. The system of claim 11, wherein the instructions, when executed by the at least one processor, cause the system to: identify relative positioning between the graphical user interface elements by identifying offsets between edges of child graphical user interface elements and corresponding edges of parent graphical user interface elements.

14. The system of claim 13, wherein the instructions, when executed by the at least one processor, cause the system to define the set of edge semantics-aware constraints by: Determining that the offset length for the child GUI element is less than a threshold ratio of the corresponding parent GUI element; and Based on a determination that the offset length is less than the threshold ratio, an edge semantics-aware constraint is defined by pinning an edge of the child graphical user interface element to a corresponding edge of the parent graphical user interface element.

15. The system of claim 14, further comprising instructions that, when executed by the at least one processor, cause the system to: based on detecting user input requesting display of the automatic fixed overlay of the first size of the graphical user interface design layout, reveal the automatic fixed overlay.

16. The system of claim 15, further comprising instructions that, when executed by the at least one processor, cause the system to perform the following operations: after generation of the resized graphical user interface design layout to the second size, remove the automatic fixed overlay representing the edge semantics-aware constraint.

17. The system of claim 11, further comprising instructions that, when executed by the at least one processor, cause the system to: Prior to resizing the graphical user interface design layout, detecting a user change to one or more graphical user interface elements of the graphical user interface design layout; and Based on the user changes to the one or more graphical user interface elements, dynamically updating a set of semantically-aware resizing constraints without displaying the edge-fixed overlay of the first size of the graphical user interface design layout, the set of semantically-aware resizing constraints comprising the set of edge semantically-aware constraints and the set of size semantically-aware constraints.

18. A method of semantically aware constraint selection in a digital media environment for analyzing and resizing a graphic display, the method comprising: receiving a request to resize a graphical user interface design layout from a first size to a second size, the graphical user interface design layout comprising a plurality of graphical user interface elements; A step for analyzing the semantics of said graphical user interface design layout; a step for automatically defining a set of semantically-aware resizing constraints for said plurality of graphical user interface elements based on said analyzed semantics of said graphical user interface design layout; generating a resized graphical user interface design layout of the second size by resizing the plurality of graphical user interface elements according to the automatically defined set of semantically-aware resizing constraints; providing, during resizing of the plurality of graphical user interface elements from the first size to the second size, an intermediate-sized layout of the graphical user interface design layout, the intermediate-sized layout selectively revealing an edge pinning overlay indicating a set of edge semantics-aware constraints for the plurality of graphical user interface elements; as well as In response to the generation of the resized graphical user interface design layout, providing the resized graphical user interface design layout of the second size without providing a layout overlay including the margin pinning overlay.

19. The method according to claim 18, further comprising: A design resizing interface is generated for display at a designer device, the design resizing interface comprising the graphical user interface design layout having manual constraint elements and the plurality of graphical user interface elements automatically constrained by the set of edge semantics-aware constraints.

20. The method of claim 18, further comprising: Based on a user selection of a manual constraint element, one or more automatic constraints in the automatically defined set of semantically-aware resizing constraints are changed.

Images