Systems and methods for generating designs based on design templates and other design elements.

Abstract

An apparatus includes a processor configured to receive user input indicating that a first design element has a first content role during editing a first design. The processor is configured to: generate a content signature for the first design, the content signature indicating that the first design element has the first content role; generate a second design based on a design template; and update the second design by applying the content signature to the second design. Generating the second design includes: adding a third design element having the first content role to the second design based on determining that the design template includes a second design element having the first content role. Applying the content signature to the second design includes: transferring content from the first design element to the third design element. The processor is configured to generate a graphical user interface including an image of the second design.

Description

Background Technology

[0001] With the proliferation of design tools, templates are increasingly used to generate designs. Typically, users choose a template from multiple options and add their own content. Template selection is performed before adding content. Users can choose a different template and manually add the same content to the newly selected template to compare the results. Manually adding the same content to multiple templates for comparison can be repetitive, time-consuming, and prone to inconsistencies. Attached Figure Description

[0002] Figure 1 A concrete example of a system that can be operated to generate designs based on design templates and additional designs is shown;

[0003] Figure 2 It shows that it can be made by Figure 1 Specific examples of system-generated design templates and content roles;

[0004] Figure 3 It shows that it can be made by Figure 1 Another specific example of the design templates generated by the system;

[0005] Figure 4 It shows that it can be made by Figure 1 A specific example of the design template generated by the system;

[0006] Figure 5 It shows that it can be made by Figure 1 A specific example of the design template generated by the system;

[0007] Figure 6 This illustrates a specific example of a method for generating designs based on design templates and additional designs;

[0008] Figure 7 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0009] Figure 8 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0010] Figure 9 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0011] Figure 10 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0012] Figure 11 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0013] Figure 12 It shows that it can be made by Figure 1 Another concrete example of a system-generated design;

[0014] Figure 13 It shows that it can be made by Figure 1 Another concrete example of a system-generated design;

[0015] Figure 14 It shows that it can be made by Figure 1 Another concrete example of a system-generated design;

[0016] Figure 15 It shows that it can be made by Figure 1 The system generates design templates and specific design examples;

[0017] Figure 16 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0018] Figure 17 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0019] Figure 18 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0020] Figure 19 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0021] Figure 20 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0022] Figure 21 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0023] Figure 22 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0024] Figure 23 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0025] Figure 24 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0026] Figure 25 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0027] Figure 26 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0028] Figure 27 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0029] Figure 28 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0030] Figure 29 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0031] Figure 30 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0032] Figure 31 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0033] Figure 32 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0034] Figure 33 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0035] Figure 34 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0036] Figure 35 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0037] Figure 36 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0038] Figure 37 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0039] Figure 38 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0040] Figure 39 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0041] Figure 40 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0042] Figure 41 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0043] Figure 42 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0044] Figure 43 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0045] Figure 44 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0046] Figure 45 It shows that it can be made by Figure 1 Specific examples of websites generated by the system;

[0047] Figure 46 It shows that it can be made by Figure 1 A specific example of the design template generated by the system;

[0048] Figure 47 It shows that it can be made by Figure 1 A specific example of the design template generated by the system;

[0049] Figure 48 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0050] Figure 49 It shows that it can be made by Figure 1 A specific example of the design template generated by the system;

[0051] Figure 50 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0052] Figure 51 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0053] Figure 52 It shows that it can be made by Figure 1 A specific example of the design template generated by the system;

[0054] Figure 53 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0055] Figure 54 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0056] Figure 55 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0057] Figure 56 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0058] Figure 57 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0059] Figure 58 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0060] Figure 59 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0061] Figure 60 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0062] Figure 61 It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0063] Figure 62A It shows that it can be made by Figure 1 A specific example of the user interface generated by the system;

[0064] Figure 62B It shows that it can be made by Figure 1 A specific example of the user interface generated by the system;

[0065] Figure 62C It shows that it can be made by Figure 1 A specific example of the user interface generated by the system;

[0066] Figure 63A It shows that it can be made by Figure 1 A specific example of a system-generated design;

[0067] Figure 63B It shows that it can be made by Figure 1A specific example of a system-generated design;

[0068] Figure 64 Further concrete examples of systems operable to generate designs based on additional designs and design templates are shown; and

[0069] Figure 65 A specific example of a method for generating designs based on alternative designs and design templates is shown.

[0070] Figure 66 This illustrates a specific example of a method for generating designs based on user-selected content and design templates.

[0071] Figure 67 It shows that it can be made by Figure 1 A specific example of the user interface generated by the system.

[0072] Figure 68 It shows that it can be made by Figure 1 A specific example of the user interface generated by the system. Detailed Implementation

[0073] Design templates are a popular way to generate graphic designs, such as for websites, brochures, invitations, etc. According to specific embodiments of this disclosure, a first design includes one or more design elements, and a second design can be generated by applying a design template to the first design. In some cases, a design can be updated by applying a design template to the design. For example, a design can be generated using a first design template and updated by applying a second design template. As used herein, "design" includes one or more design elements and formatting information (e.g., color information, font type, font size, etc.). "Design elements" include image content (e.g., vector or pixel format), text content, etc. In a specific aspect, the formatting information includes first formatting information corresponding to a first design element type (e.g., a title text element). For example, the first formatting information (e.g., default formatting information) indicates color information, font type, font size, etc., associated with a design element of the first design element type. In a specific aspect, the first formatting information indicates default formatting information used to format the first design element of the first design element type added to the design. Therefore, the formatting information can cause a "title" design element to have a different font style and size than other types of design elements. Specifically, the design includes design element information associated with the design elements. For example, first design element information of a first design element indicates one or more attributes of the first design element. For instance, first design element information indicates second formatting information associated with the first design element. Specifically, when a user updates the formatting of the first design element, the second formatting information indicates the updated formatting of the first design element.

[0074] Applying design templates to a design includes generating a second design based on the design template, and transferring content from the first design to the second design. For example, a user can edit the design and then apply the design template. It should be understood that automatically transferring user-provided content to a second design, as described herein, enables a faster design process and a more intuitive user experience. For example, a user can efficiently apply various design templates to an edited design without having to repeatedly provide the same edits each time a design template is applied. Illustrative and non-limiting advantages accompanying this disclosure are described herein.

[0075] In the following description, certain aspects of this disclosure are described in conjunction with a graphic design website that enables users to create designs using web applications or other Software-as-a-Service (SaaS) components. Examples of graphic design include, but are not limited to, social media posts or headlines, presentations, letterheads, magazine templates, certificates, resumes, flyers, book / album covers or images, infographics, leaflets, posters, menus, business cards, brochures, logos, greeting cards, postcards, invitations, collages, announcements, blog graphics, internet advertising, videos, animations, etc. In some examples, the graphic design website can be accessed using an internet browser and / or application installed on a mobile device, such as a mobile phone or tablet. Unless otherwise stated, references to "graphic design website" herein include graphic design web applications / SaaS components accessible via the graphic design website. Creating designs using a graphic design website may be faster and / or more convenient than using separately downloaded / purchased software programs. However, it should be understood that the descriptions of website-based aspects herein are for illustrative purposes only and should not be considered restrictive. In alternative implementations, the techniques disclosed herein can be applied in the context of standalone computer applications running on desktop computers, laptop computers, mobile devices, etc. "User" can refer to an internal or external user of the graphic design website. For example, internal users include designers, employees, software engineers, or others who manage or design the graphic design website. External users include persons who are not internal users, such as those who access the graphic design website to generate designs but do not manage or design the website. In a specific aspect, one or more operations described herein with respect to a user can be performed by a first user (e.g., an internal user), and one or more operations described herein with respect to a user can be performed by a second user (e.g., an external user).

[0076] When a user creates a new design (e.g., a first design) on a graphic design website, they can start with a blank design or with a design template that has a pre-applied layout. As used in this article, a "template" includes the default layout of images, text, colors, and / or fonts. For example, a placeholder template includes text elements placed on a white background. Specifically, the layout of the text elements is based on the template type. For example, (A registered trademark of Instagram LLC, Menlo Park, California) Post templates include: a pre-title text element that includes default pre-title text (e.g., “Click to add pre-title (optional)”), a title text element that includes default title text (e.g., “Click to add text”), and a sub-title text element that includes default sub-title text (e.g., “Click to add sub-title (optional)”). As another example, a graphic design website may allow access to several “holiday card” templates, and users can choose one as a starting point to customize their own holiday cards by uploading photos of their family members, entering personalized greetings, changing images / text / fonts / colors, etc., included in the pre-applied template.

[0077] To provide a more comprehensive design experience, graphic design websites allow users to search for templates, designs, design elements, and / or formatting information, including images, templates, fonts, etc., as mentioned above. For example, a user can enter the search term "dog" to search for stock images of dogs that can be inserted into a design, pre-existing templates featuring images and / or text about dogs, previously stored (by the user or other users) dog-featured designs, or any combination thereof. Incorporating search result images (e.g., photos of dogs) into a design is as simple as "drag and drop" the image into the design, at which point the user can freely edit the image in terms of size, color, etc. Some media assets (e.g., images, templates, fonts, etc.) can be incorporated into designs for free, while other media assets may require payment and may have associated licenses (e.g., one-time licenses) enforced by the graphic design website.

[0078] The graphic design website enables another template application to modify the design. In a specific example, the user selects a second template and drags and drops it onto the first design. In an alternative example, the graphic design website selects a second template. A second design is generated based on the second template. At least some of the customizations the user added to the first design are applied to the second design. For example, a personalized greeting, search result image, or both previously added by the user are automatically applied to the second design. In some examples, the personalized greeting and search result image replace the pre-applied (e.g., default) message and pre-applied image of the second template in the second design, respectively.

[0079] A graphic design website generates a graphical user interface (GUI) that includes a first GUI element (e.g., an image) corresponding to a first design, a second GUI element (e.g., a thumbnail image) corresponding to a second design, or both. The graphic design website provides the GUI to a display. Specifically, users can compare the results of applying various templates to a design (e.g., the first and second GUI elements) with user-defined templates. In a specific example, when a user selects a first or second design, the selected design is stored in a database and the remaining designs are discarded (e.g., marked for deletion). In another example, the selected design overwrites the remaining designs in the database (e.g., designs that were not selected).

[0080] Illustrative examples of systems that support the operation of such graphic design websites and can generate designs based on templates and other designs are provided in Figure 1 The system is shown and generally designated 100. System 100 includes a client device 192 that is communicatively coupled to a computing environment (e.g., a network-accessible cloud computing environment) via a content delivery network (CDN) 101. For example, the client device 192 is communicatively coupled to one or more design services 126 of the computing environment. In a specific aspect, the design services 126 correspond to references. Figure 64 The described one or more services or components, one or more additional services or components, or a combination thereof. Although Figure 1 CDN 101 is shown, but it should be understood that, in terms of alternatives, Figure 1 The illustrated device can communicate using one or more networks (or portions thereof), including but not limited to CDNs, private networks, cellular networks, the Internet, etc. Client device 192 is configured to be operated by user 104. As further described herein, even if user 104 is not a trained graphic designer or other visual arts professional, system 100 enables user 104 to quickly and easily create and edit various forms of graphic design and other visual media works. In some examples, the computing environment includes one or more servers and / or one or more databases, data storage devices, and / or data storage equipment. For example, the computing environment includes a document database 184. The computing environment may include additional databases, such as a media database, an export database, or both. The computing environment may include one or more load balancers, such as reference... Figure 64 Further description.

[0081] In a specific context, client device 192 corresponds to a desktop computer, laptop computer, mobile phone, tablet computer, or other computing device configured to access websites via the Internet. Client device 192 may include (or may be connected to) one or more input devices (e.g., keyboard, mouse, touchscreen, etc.) and one or more output devices (e.g., monitor, touchscreen, audio speaker, headphone connection, etc.).

[0082] In specific aspects, client device 192, computing environment, one or more servers, document database 184, media database, export database, load balancer, or combinations thereof may include one or more processors or processing logic, memory, and / or network interfaces. Memory may include instructions executable by the processor to perform the various functions described herein. Network interfaces may include wired and / or wireless interfaces operable to enable communication with a local area network (LAN) and / or a wide area network (WAN) (such as the Internet).

[0083] The first server can be configured to execute a web frontend. The web frontend is configured to provide a graphic design website to a requester. For example, the web frontend can send one or more graphical user interfaces to client device 192 in response to a request received from client device 192. The same or different (e.g., second) servers can be configured to execute multiple design services 126. The multiple design services 126 can implement the core design creation, design updating, and design deletion functions of the graphic design website. The same or different (e.g., third) servers can be configured to execute export services. Export services can support graphic design export tasks (e.g., publishing designs as web output).

[0084] A load balancer can be configured to send messages to servers requesting the instantiation of a specific service. The servers can execute virtual machines that include instances of the specific service. For example, the load balancer can be configured to send a message to a second server to instantiate multiple design services 126. In response to receiving this message, the second server can execute a virtual machine that includes instances of design services 126. In a specific instance, multiple servers can execute instances of the same service. For example, the load balancer can send a second message to a fourth server to instantiate multiple design services 126. In this example, a third server can execute a first virtual machine that executes a first instance of design services 126, and a fourth server can execute a second virtual machine that includes a second instance of design services 126.

[0085] (Multiple) design services 126, export services, or both can be coupled to one or more endpoints. Figure 1In this context, design services 126, export services, or both may be coupled to endpoints 172, 174, one or more additional endpoints, or combinations thereof, via CDN 101. An "endpoint" may also be included in client device 192. For example, client device 192 may include endpoint 172. An endpoint may refer to an application, server, social networking site, web server, device, or a combination thereof.

[0086] During operation, user 104 can operate client device 192 to access the graphic design website via a computing environment. The graphic design website enables users to create and modify design 103 (which can be stored in a document database) using web applications and / or software-as-a-service components presented by the graphic design website. For example, a web front-end can generate a graphical user interface (GUI) 181 for the graphic design website. User 104 can use GUI 181 to create and modify design 103. For example, user 104 selects design template 105 to generate design 103. GUI 181 may include one or more options for editing design 103. GUI 181 may include a display portion showing design 103. In various aspects, GUI 181 can at least implement any graphic design functionality typically found in standalone graphic design applications; however, it should be understood that GUI 181 may also implement other functionalities.

[0087] Specifically, user 104 selects an option to edit design 103. In response to receiving user input 109 instructing editing of design 103, client device 192 sends user input 109 to the computing environment. Multiple design services 126 update design 103 based on user input 109 and store the updated version of design 103 in document database 184. Specifically, multiple design services 126 send an updated version of GUI 181 to client device 192. The updated version of GUI 181 is used to display the updated version of design 103.

[0088] Specifically, the graphic design website enables user 104 (or another user) to create and modify one or more design templates. Specifically, design template 105 belongs to type 157 (e.g., design type). Type 157 can be a post, invitation, card, presentation, flyer, brochure, etc. Design template 105 includes one or more design elements 141 and design element information 151 for design element 141. For example, design template 105 includes design element 143 and corresponding design element information 153. Specifically, design element information 153 indicates the type 171 of design element 143. For example, type 171 indicates whether design element 143 is or includes an image element, text element, or fill element. Specifically, type 171 indicates whether design element 143 is or includes a foreground image element or background image element. Specifically, design element information 153 indicates the fill color of design element 143 (e.g., fill element).

[0089] Turn Figure 2 As shown in the example, design template 105 includes text elements (e.g., design element 143), image elements (e.g., design element 243), one or more additional design elements, or combinations thereof. The text elements include first text (e.g., "title"). For example, the first text may be based on default data or user input. In a specific aspect, the first text of the text element is a placeholder that the user can update in a design generated based on design template 105.

[0090] Text elements are associated with content role 147 (e.g., "heading"). In a specific example, image elements are associated with content role 149 (e.g., Pic-1). Some illustrative examples of content roles include content roles related to style (e.g., heading, preheading, subheading, title, or paragraph) and content roles related to information structure (e.g., name, address, invoice tax details, or purchase invoice). In a specific aspect, the first set of content roles is associated with the first design type of design template 105. For example, with The first set of content roles associated with a post design type includes a pretitle content role, a title content role, and a subtitle content role. A second set of content roles associated with another design type may include more, fewer, or different content roles. Content roles enable the identification of corresponding design elements within a design and design template. For example, a text element (e.g., design element 143) in design template 105 with content role 147 (e.g., "title") corresponds to a text element in another design template (or design) with the same content role (e.g., content role 147). When a design is applied to a design template, content can be transferred between corresponding design elements, as further described herein. In a specific aspect, GUI 181 includes one or more options for creating and modifying content role 145, creating and modifying design templates using content role 145, or combinations thereof.

[0091] exist Figure 3 In the example shown, design template 105 includes text elements (e.g., design element 143), one or more additional design elements, or a combination thereof. GUI 181 enables user 104 (e.g., an internal or external user) to select a content role 147 for design element 143. Multiple design services 126 update the content role 179 of design element information 153 in response to the user's selection to indicate that design element 143 has a content role 147 (e.g., "title").

[0092] for Figures 2 to 3 In the example shown, design element information 153 includes text information 173 indicating that a text element (e.g., design element 143) includes first text (e.g., "heading"). Specifically, design template 105 includes formatting information 155 for design element types (e.g., font type, font size, color, italics, bold, etc.). For example, in response to determining that a text element belongs to a first design element type (e.g., style type) and that the text element is associated with first formatting information (e.g., font type, font size, color, italics, bold, underline, etc.), design services 126 update formatting information 155 to indicate that the first design element type is associated with the first formatting information. Design element information 153 indicates the position 175 of a text element in design template 105 (e.g., coordinates, page number, or both).

[0093] In a specific aspect, document database 184 stores one or more design templates 111. A subset of design templates 111 is associated with type 157. For example, design template 111 includes design template 113. Design template 113 includes one or more design elements 161 (e.g., image elements, text elements, fill elements, or combinations thereof). Design template 113 includes design element information 165 for design elements 161. For example, design template 113 includes design element 163 and design element information 167 for design element 163. For example, design element information 167 indicates the type 171, content role 179 (e.g., preheading, heading, subheading, Pic-1), or both of the design element 163. In a specific aspect, type 171 indicates the element type (e.g., image element, text element, or fill element), style type, or both of the design element 163.

[0094] Design template 113 includes formatting information 159 for design element types. Specifically, formatting information 159 is identical to formatting information 155 of design template 105. Alternatively, formatting information 159 differs from formatting information 155. For example, formatting information 155 indicates that a first text color (e.g., blue) is assigned to a first design element type (e.g., a "heading" style), and formatting information 159 indicates that a second text color is assigned to the first design element type. The second text color may be the same as the first text color (e.g., blue), or it may be different from the first text color (e.g., green).

[0095] exist Figure 4 In the example shown, multiple design templates include design elements corresponding to the same content role. For example, each of design templates 405, 407, and 409 includes design elements corresponding to each of content roles 471, 147, and 475. For instance, design templates 405, 407, and 409 include a first heading placeholder (e.g., design element 441), a second heading placeholder (e.g., design element 443), and a third heading placeholder (e.g., design element 445), respectively. Each of design elements 441, 443, and 445 has a content role 147 (e.g., "heading"). Design templates with design elements corresponding to the same content role enable content transfer between corresponding design elements.

[0096] exist Figure 5In the example shown, design template 105 includes a first image element (e.g., design element 143), a second image element (e.g., design element 543), a third image element (e.g., design element 545), a fourth image element (e.g., design element 547), one or more additional design elements, or combinations thereof. It should be understood that the provided design template 105, including four image elements, is an illustrative example. In other examples, design template 105 may include fewer than four or more image elements. Figure 5 In the example shown, design element 143 is associated with content role 149 (e.g., "1"). Design element information 153 indicates the type 171 (e.g., image element), content role 179 (e.g., content role 149), media identifier 189 (e.g., "MABLihgWTjE"), or a combination thereof, of the image included in the first image element of design element 143.

[0097] In a specific manner, as described herein, design services 126 apply design template 113 to design 103. Design services 126 extract a content signature from design 103 before applying design template 113. In a specific example, the content signature of design 103 includes design element information 131. For example, the content signature (e.g., design element information 131) indicates: included text elements, the position of the text elements, whether the text elements have been edited by the user relative to design template 105 (e.g., added, modified, or both), included fill elements, the content role of the fill elements, the position of the fill elements, the filters of the fill elements, whether the fill elements have been edited by the user relative to design template 105 (e.g., added, modified, or both), or a combination thereof.

[0098] Multiple design services 126 generate design 115 by copying design template 113. As described herein, multiple design services 126 update design 115 based on content signatures (e.g., design element information 131). For example, in response to determining that a first text element of design 103 has the same content role (e.g., "heading") as a second text element of design 115, multiple design services 126 transfer the content (e.g., text) of the first text element (e.g., as indicated by the content signature) to the second text element. In a specific aspect, multiple design services 126 suppress content transfer of design elements of design 103 that have not been edited relative to design template 105.

[0099] Specifically, design service 126 maintains a list of a first unmapped element of design 103 and a second unmapped element of design 115, wherein the first and second unmapped elements are not identified as corresponding design elements in other designs (e.g., design 115 or design 103), have not had content transferred, or both. For example, design service 126 initiates this "unmapped list" by including design elements of design 103 and design template 105. In response to determining that a first design element of design 103 corresponds to a second design element of design 115 (e.g., having the same content role as the second design element), design service 126 removes both the first and second design elements from the unmapped list. For example, in response to determining that a first design element is edited relative to design template 105, design service 126 transfers content from the first design element to the second design element.

[0100] In a specific manner, in response to determining that no first unmapped element (e.g., the remainder of the unmapped list of first unmapped elements) corresponds to any second unmapped element (e.g., the remainder of the unmapped list of second unmapped elements), the design services 126 use a heuristic approach to map at least some first unmapped elements to at least some second unmapped elements. For example, the design services 126 sorts the first text elements of the first unmapped elements based on character counts, and sorts the second text elements of the second unmapped elements based on character counts. In response to determining that the first text elements in the first text elements have the same sorting order (e.g., first) as the second text elements in the second text elements, the design services 126 mark the first text elements as corresponding to the second text elements. The design services 126 remove the first and second text elements from the unmapped list. For example, in response to determining that the first text element is edited relative to the design template 105, the design services 126 transfer the content (e.g., text) from the first text element to the second text element. In a specific example, the first text element, the second text element, or both are not associated with a content role or are associated with a default content role. Specifically, design service 126 uses heuristics to determine if one, more, or all text elements in one design have a matching sorting order in another design.

[0101] In response to determining that the unmapped list includes at least one first unmapped element (e.g., at least one remaining first unmapped element in the unmapped list), design services 126 copy the first unmapped element into design 115. For example, design services 126 add a second element to design 115 and transfer content (e.g., text) from the first unmapped element to the second element. Specifically, the second element is included in a second position in design 115 that is the same as the first position of the first unmapped element in design 103. Specifically, the second element is formatted based on formatting information associated with design 115, design template 113, or both. In a specific example, the second element is formatted to have the font type used in design template 113, the most frequently used text color in design template 113, or both.

[0102] Specifically, after performing the content transfer, the design services 126 perform a "reflow" of the first text element in design 115. Reflow refers to updating the bounding boxes of at least some text elements and moving adjacent elements to reduce or prevent overlap after the content transfer. For example, in response to determining that design template 113 has an implemented font size adjustment pattern, the design services 126 update the font size of the first text element such that the font size of each of the first text elements is the largest font size, thereby making the first bounding box of the first text element in design 115 smaller than or equal to the second bounding box of the second text element in design template 113. The second text element corresponds to the first text element (having the same content role as the first text element, or being indicated as corresponding to the first text element). Specifically, the design services 126 use a binary search to update the font size. Specifically, after updating the font size of the first text element, the design services 126 update the bounding box of the first text element.

[0103] In a specific aspect, design service 126 performs group rearrangement on the design elements of design 115 included in the group. For example, design service 126 identifies a first design element included in a first group in a first design page of design 115. Design service 126 determines that the first design element (e.g., a first text element) corresponds to a second design element (e.g., a second text element) included in a second group in a second design page of design template 113. Design service 126 uses an algorithm to maintain the distance between the first design elements. For example, based on the distance between the second design elements in the second design page, design service 126 uses an algorithm to set the distance between the first design elements in the first design page. In a specific aspect, design service 126 identifies a first foreground element and a first background element of the first design element. Design service 126 maintains the distance between the first foreground elements based on the distance between the second foreground elements in the second design page.

[0104] Specifically, in response to determining that the bounding box of the first design element is equal in size to the bounding box of the first group, the design service(s) 126 marks the first design element as a background design element. Alternatively, in response to determining that the bounding box of the first design element is not equal to the bounding box of the first group, the design service(s) 126 marks the first design element as a foreground design element. In response to determining that the first foreground element corresponds to a second design element of the design template 113, the design service(s) 126 updates the first width of the first foreground element to be the same as the second width of the second design element. Specifically, the first group vertically grows / shrinks as the width of the foreground element is updated. In a specific example, the first width is reduced without changing the font size of the first text of the first foreground element. In this example, the first foreground element vertically grows as the first width decreases to accommodate the first text. In another example, the first width is increased without changing the font size of the first text. In this example, the first foreground element vertically shortens as the first width increases to continue accommodating the first text. Specifically, the direction, magnitude, or both of the size change of the first foreground element are based on its vertical alignment attribute. The first group grows / shrinks vertically as the design elements in the first group grow / shrink. Specifically, the first group, the second group, or both are created by user 104 (e.g., the designer). After the foreground design elements are rearranged, the design service(s) 126 updates the background design elements to continue "containing" the foreground design elements. For example, the design service(s) 126 updates the bounding boxes of the background design elements to have a minimum size, such that each foreground design element is included within the bounding box. Reference Figure 61 Additional examples describing rearrangement operations.

[0105] exist Figure 6 A method is illustrated and is generally denoted by 600. Specifically, method 600 is defined by... Figure 1 The system 100 is executed by components (such as design services 126). In a specific aspect, one or more operations of method 600 are described as being performed by a user. It should be understood that operations described as being performed by user 104 can be detected by design services 126, such as those performed by user 104 based on communication between design services 126 and client device 192. Figure 6 An instance is provided whereby user 104 performs one or more modifications 620 on design template 105 to generate design 103. Multiple design services 126 detect one or more conditions 640 based on comparing design template 113 with design 103. Multiple design services 126 perform one or more actions 660 based on the detected conditions 640.

[0106] In a specific aspect, method 600 includes: at 602, a user opens a blank single-page design from the homepage using a “Create Design” menu. For example, user 104 selects a menu option from the “Create Design” menu of GUI 181. The menu option corresponds to a single-page design type (e.g., invitation, announcement, card, post, poster, flyer, business card, advertisement, or other type of single-page design). In response to receiving a selection of a menu option associated with type 157 (e.g., a specific design type) and determining that design template 105 is identified as the default (e.g., blank) design template associated with type 157, design services(s) 126 generate design 103 (e.g., a blank design) based on design template 105.

[0107] exist Figure 7In Example 702 shown, design services 126 generate design 103 by copying design template 105. Design template 105 includes a first text element (e.g., “Invitation to…”), a second text element (e.g., “Event Name”), a third text element (e.g., “123 Street, City, State, Country 12345”), and a fourth text element (e.g., “Please reply (123) 456-7890”). The first, second, third, and fourth text elements are associated with a first content role (e.g., “Preface”), a content role 147 (e.g., “Title”), a third content role (e.g., “Body”), and a fourth content role (e.g., “Subtitle”), respectively. Copying design template 105 includes copying design element 141 to generate design element 121 of design 103. Copying design element 141 includes copying at least a portion of design element information 151 of design template 105 to generate design element information 131 of design 103. For example, design service 126 generates design element 703, design element 123, design element 705, and design element 707 by copying the first, second, third, and fourth text elements of design template 105, respectively. In a specific aspect, design element information 133 of design element 123 is a copy of design element information 153 of design element 143.

[0108] Each of design elements 123, 703, 705, and 707 includes text indicated by the corresponding text information 173. For example, design element information 133 indicates the text information 173 of design element 123. Design element 123 is initialized to include text indicated by the text information 173 of design element 123 (e.g., "Event Name"). In example 702, design element 141 of design template 105 does not include any image elements.

[0109] In a specific aspect, generating design 103 includes updating design element information 131 to indicate that all design elements 121 have not been edited (e.g., have not been changed relative to design template 105). For example, design service(s) 126 updates (or initializes) the edit indicator 177 of design element information 133 to a first value (e.g., 0) to indicate that design element 123 has not been edited in design 103. In a specific aspect, design service(s) 126 copies type 157, format information 155, or both from design template 105 to design 103.

[0110] Return to Figure 6Method 600 includes: at 604, displaying a "text placeholder template" in a blank page. For example, design service 126 updates the display portion of GUI 181 to display design 103. A first text element (e.g., design element 703), a second text element (e.g., design element 123), a third text element (e.g., design element 705), and a fourth text element (e.g., design element 707) are displayed.

[0111] Method 600 includes: at 622, the user adds text to all text boxes in the placeholder template. Figure 7 In Example 704, user 104 provides user input 109, which instructs an update to the text of each of design elements 123, 703, 705, and 707. Multiple design services 126 update design element information 131 in response to receiving user input 109 to instruct an update. For example, in response to determining that user input 109 instructs design element 123 (e.g., a title text element) to be updated to include second text with second formatting information (e.g., “Chloe’s Coming of Age”), multiple design services 126 update design element information 133 to instruct that the text information 173 of design element 123 includes the second text, the second formatting information, or both. In response to determining that user input 109 instructs an update to the text, formatting information, or both of design element 123, multiple design services 126 update design element information 133 such that the edit indicator 177 of design element 123 has a second value (e.g., 1) indicating that design element 123 has been edited.

[0112] Return to Figure 6Method 600 includes: at 642, detecting all matching text fields and determining that all content will be transferred. For example, based on a comparison of a first comparison subset of design elements 121 of design 103 and a second comparison subset of design elements 161 of design template 113, (multiple) design services 126 determine whether design template 113 matches design 103. In a specific implementation, in response to determining that design 103 does not include any image elements, (multiple) design services 126 determine whether design 103 matches design template 113 independently of any image elements of design template 113. In a specific implementation, in response to determining that design 103 does not include any edited image elements, (multiple) design services 126 determine whether design 103 matches design template 113 independently of any image elements of design template 113. The first comparison subset includes the text elements of design element 121, and the second comparison subset includes the text elements of design element 161 (and excludes its image elements, if any). In response to determining that the first comparison subset includes the same number of design elements as the design elements included in the second comparison subset, and that the content role 179 of each design element in the first comparison subset matches the content role 179 of the corresponding design element in the second comparison subset, the design service 126 determines that the design template 113 matches the design 103.

[0113] In response to determining that design template 113 matches design 103 and that each design element of the first comparison subset has been edited, design service(s)126 determines that applying design template 113 to design 103 will include transferring all content from the first comparison subset.

[0114] Method 600 includes: at 654, the user clicks to apply the template to the design. For example, design service 126 receives user input 109, which instructs user 104 to... Figure 1 The selection of design template 113. In a specific example, user 104 drags and drops design template 113 onto design 103 to apply design template 113 to design 103. In another example, design service(s) 126 selects design template 113 based on determining that design template 113 is associated with the same design type as design 103 (e.g., type 157), design template 113 includes the same number of image elements as design 103, design template 113 includes the same number of text elements as design 103, design template 113 includes the same number of design elements as design 103, design template 113 includes design elements of the same type as design 103 (e.g., having the same content role) or a combination thereof.

[0115] In a specific implementation, design services 126 select design template 113 based on the usage history associated with it. For example, design services 126 select design template 113 based on the following: usage history indicates that design template 113 is associated with a design recently (e.g., within the past hour or month) selected by a second user or stored in document database 184; design template 113 is associated with search terms used by user 104 in an active (e.g., current) session; the second user is the same as user 104; the second user is associated with the same demographic information as user 104 (e.g., age, gender, location, occupation, or interests) or a combination thereof. For instance, design services 126 select a party invitation template (e.g., design template 113) in response to the following: the party invitation template is popular among users in the same city as user 104 within the past 24 hours; user 104 has recently been testing different party invitation templates; or both.

[0116] Method 600 includes: at 662, transferring all text to a new template in the corresponding text field. For example, design service 126 applies design template 113 to design 103. Applying design template 113 to design 103 includes: generating design 115 by copying design template 113, updating design 115 to indicate that no design elements have been edited relative to design template 113, and applying a content signature of design 103 to design 115. For example, generating design 115 by copying design template 113 includes: generating design element 191 and design element information 193 of design 115 by copying design element 161 and design element information 165 of design template 113, respectively. Applying a content signature of design 103 (e.g., design element information 131) to design 115 includes: updating design element 191 based on the edited design elements of design 103.

[0117] In a specific example, user 104 edits the text of design 103 and drags and drops design template 113 onto design 103. Design template 113 includes certain images and certain text. Instead of replacing the user-inputted content with this "default content," at least some of the user-inputted content is transferred based on content roles. Therefore, the default image of design template 113 (e.g., an image of a pineapple) is included in the updated design (e.g., design 115), but the title text is changed to the user-inputted text (e.g., "Chloe's Coming of Age").

[0118] exist Figure 8In Example 802, Design 115 includes a preheading element (e.g., design element 803), a title element (e.g., design element 124), a subheading element (e.g., design element 805), a body element (e.g., design element 807), and an image element (e.g., design element 809) corresponding to the preheading element, title element, subheading element, body element, and image element of Design Template 113, respectively. For example, Design Element 809 includes an image copied from the image element of Design Template 113 (e.g., an image of a pineapple).

[0119] The content roles of design elements 124, 803, 805, 807, and 809 are copies of the content role of design element 161 in design template 113. For example, design element 124 has a content role 147 (e.g., "heading"). Copying design template 113 also includes copying type 157 and formatting information 159 from design template 113 to design 115. Multiple design services 126 initialize the edit indicator 177 of each design element 191 to a first value (e.g., 0) to indicate that the corresponding design element has not been edited relative to design template 113.

[0120] In a specific respect, at least some design elements of design 115 correspond to design elements of design 103 (e.g., have the same content role). For example, design element 124 of design 115 corresponds to design element 123 of design 103 (e.g., have the same content role).

[0121] Multiple design services 126 apply a content signature (e.g., design element information 131) of design 103 to design 115. Applying the content signature of design 103 to design 115 includes: identifying the edited design elements of design 103, identifying the corresponding design elements of design 115, and updating the identified design elements of design 115 (e.g., design element information of the identified design elements) based on the edited design elements of design 103. For example, in response to determining that each of design elements 123 and 124 corresponds to a content role 147 (e.g., "title"), multiple design services 126 determine that design element 124 corresponds to design element 123. In response to determining that design element 124 corresponds to design element 123 and that design element 123 has been edited, multiple design services 126 copy the text information 173 of design element information 133 to the text information 173 of design element information 128. Updating the text information 173 of design element 124 enables the title text element of design 103 (e.g., "Chloe's Coming of Age" or design element 123) to effectively replace the title text element of design template 113 in design 115 (e.g., "Hawaii Party" or design element 163).

[0122] In a specific aspect, design service 126 copies the text (e.g., “Chloe’s Coming-of-Age Ceremony”) and formatting information (e.g., text color, font size, etc.) of the edited design elements (e.g., indicated by text information 173) of design 103 to the corresponding design element (e.g., text information 173) of design 115. Alternatively, design service 126 copies the text (e.g., “Chloe’s Coming-of-Age Ceremony”) of the edited design elements of design 103 to the corresponding design element of design 115, and suppresses the copying of the formatting information of the edited design elements of design 103 to the corresponding design element of design element 115. In this aspect, the copied text (e.g., “Chloe’s Coming-of-Age Ceremony”) is formatted based on the default formatting information of design 115 corresponding to the design element type of the design element (e.g., copied from design template 113). For example, formatting information 159 indicates first formatting information associated with the type 171 (e.g., title style) of design element 124, and the text of design element 124 is formatted based on the first formatting information.

[0123] Specifically, design service 126 sets the edit indicator 177 of design element 124 to a second value (e.g., 1) to indicate that design element 124 has been edited relative to design template 113. Specifically, the remaining fields of design element information 128 of design element 124 (e.g., besides text information 173 and edit indicator 177) are not updated based on design element information 133 of design element 123. For example, the title text element of design 115 (e.g., design element 124) is located in the same position as the title text element of design template 113 (e.g., position 175 indicated by design element information 128 and design element information 167). Design service 126 updates GUI 181 to display design 115. Specifically, GUI 181 includes GUI elements indicating design 103 (e.g., images), GUI elements indicating design 115 (e.g., thumbnail images), or both.

[0124] therefore, Figures 7 to 8 An example is shown in which a design is automatically generated as a combination of user input content transferred from another design and certain design elements from a template selected by the user, where content transfer is achieved in an intuitive way by using content personas.

[0125] Return to Figure 6 Method 600 includes: at 674, the user adjusts text that is too long / too short for the new template. Figure 8 In Example 804, User 104 updates the font size of the heading text element (e.g., design element 124). In alternative examples, such as [reference]... Figure 61Further described, design services 126 perform a rearrangement operation. Design services 126 update the text information 173 of the title text element (e.g., design element 124) to indicate the updated font size. Specifically, the formatting information indicated by text information 173 overrides the first formatting information (associated with the design element type) indicated by formatting information 159. For example, formatting information 159 indicates default formatting information associated with the design element type, and the formatting information indicated by text information 173 allows user 104 to override the default formatting information of a specific design element of the design element type. For example, formatting information 159 includes first formatting information associated with a type 171 (e.g., a "heading" style) indicating a first font size, first font, and first color. The text information 173 of the title text element (indicated by design element information 128) indicates a second font size. The style of the title text element is designed in GUI 181 based on the second font size, first font, and first color. For example, the second font size overrides the first font size. (Multiple) design services 126 set the edit indicator 177 of the updated design element to a second value (e.g., 1) to indicate that the design element has been edited relative to the design template 113.

[0126] Specifically, user 104 selects the save option in GUI 181. In response to receiving user input 109 indicating the selection of the save option, multiple design services 126 store design 115 in document database 184, remove design 103 from document database 184, mark design 103 as deleted from document database 184, or a combination thereof. Specifically, multiple design services 126 first update the usage history to indicate that design 115 was first stored or saved by user 104, and to indicate one or more search terms used by user 104 in an active session, or a combination thereof.

[0127] Figures 7 to 8 Thus, user story 701 is shown, in which user 104 edits all text elements of design 103, and design service(s) 126 generates design 115 by applying design template 113 to the updated design 103. For example, design service(s) 126 applies a content signature (e.g., design element information 131) of the updated design 103 to design 115.

[0128] Return to Figure 6 Method 600 includes: at 624, the user adds text to some text boxes in the placeholder template. Figure 9In Example 904, user 104 provides user input 109, which indicates an update to the title text element (e.g., design element 123) (e.g., “Chloe’s Coming of Age”) and an update to the preceding title element (e.g., design element 703) (e.g., “The Princess Is Here”). The remaining text elements (e.g., design elements 705 and 707) remain unchanged. Multiple design services 126 update design elements 123 and 703 based on the user input, and update design element information 131 to indicate that design elements 123 and 703 have been updated. For example, multiple design services 126 update the text information 173 of design element 123 to indicate an update to the title text element, and update the edit indicator 177 of design element 123 to indicate that design element 123 has been edited relative to design template 105. The edit indicator 177 of design elements 705 and 707 indicates that no editing has been performed relative to design template 105.

[0129] Method 600 further includes, at 644, detecting all matching text fields and determining some content to be transferred. For example, in response to determining that design template 113 matches design 103 and that some design elements of design element 121 have been edited (e.g., a first comparison subset), design service 126 determines that applying design template 113 to design 103 will include transferring content from the edited design elements. Method 600 proceeds to 654.

[0130] Method 600 further includes: at 664, transferring only the user's text to the new template in the corresponding text field. Otherwise, the text is entered from a copy of the template. For example, design service 126 generates design 115 by copying design template 113 and applies a content signature (e.g., design element information 131) of design 103 to design 115.

[0131] exist Figure 10 In Example 1002, Design 115 includes Design Elements 124, 803, 805, 807, and 809. Specifically, Design Element 124 indicates text copied from Design Element 123 of Design 103 (e.g., an edited design element) (e.g., "Chloe's Coming-of-Age Ceremony"), and Design Element 803 includes text copied from Design Element 703 of Design 103 (e.g., "The Princess is There"). Design Elements 805 and 807, corresponding to the unedited text elements of Design 103, retain the text information indicated in Design Template 113 and are not updated based on Design 103. Similarly, Design Element 809, corresponding to the unedited image elements of Design 103, retains the image indicated in Design Template 113 and is not updated based on Design 103. Method 600 proceeds to 674.

[0132] Figures 9 to 10Therefore, user story 901 is shown, in which user 104 edits some text elements of design 103, and design service(s) 126 generates design 115 by applying design template 113 to the updated design 103. For example, design service(s) 126 applies a content signature of the updated design 103 to design 115. Design elements 124 and 803 of design 115, corresponding to the edited text elements of design 103 (e.g., design elements 123 and 703), include text copied from the edited text elements. Design elements 805 and 807 of design 115, corresponding to the unedited text elements of design 103 (e.g., design elements 705 and 707), include text copied from the corresponding text elements of design template 113. Design element 809 of design 115, corresponding to the unedited image elements of design 103, includes an image copied from the corresponding image element of design template 113.

[0133] Return to Figure 6 Method 600 includes: at 626, the user does not add text to any text boxes in the placeholder template. Figure 11 In Example 1102, user 104 suppresses the updating of design elements 123, 703, 705 and 707 of design 103.

[0134] Method 600 further includes, at 646, detecting all matching text fields and determining that no content transfer will occur. For example, in response to determining that design template 113 matches design 103 and that no design element 121 (e.g., a first subset of comparisons) has been edited, design services(s)126 determine that applying design template 113 to design 103 does not include any content transfer from design 103. Method 600 proceeds from 644 to 654.

[0135] Method 600 also includes: at 665, no content transfer occurs and the template is applied as is. For example, in response to determining that applying design template 113 to design 103 does not include any content transfer from design 103, design services(multiple) generate design 115 by copying design template 113 and suppress the application of the content signature of design 103 to design 115.

[0136] exist Figure 11 In Example 1104, Design 115 includes Design Elements 124, 803, 805, 807, and 809. Design Elements 124, 803, 805, 807, and 809 correspond to Design Element 161 of Design Template 113. For example, Design Elements 124, 803, 805, 807, and 809 are generated by copying Design Element 161 and are not updated based on Design 103. Method 600 proceeds to 674.

[0137] Figure 11 Therefore, user story 1101 is shown, in which user 104 does not edit any text elements of design 103. Design service (multiple) generates design 115 by copying design template 113 without applying the content signature of design 103 to design 115.

[0138] Method 600 includes: at 628, the user adds a new textbox with a default content role to their design. Figure 12 In Example 1202, user 104 uses GUI 181 to add a text element (e.g., design element 1211) to design 103. User 104 provides user input 109 indicating a selection of the default content role 1279 (e.g., "None") for design element 1211. Multiple design services 126 add design element 1211 to design 103. Multiple design services 126 update design element information 131 to indicate the design element information of design element 1211. For example, multiple design services 126 set the type 171 and content role 179 of design element 1211 to indicate a text element and the default content role 1279 (e.g., "None"), respectively. Multiple design services 126 update the text information 173 of design element 1211 to indicate the text of the text element (e.g., design element 1211). In a specific aspect, the text (e.g., "Add a little body text") is based on user input, default text associated with the default content role 1279, or both. Specifically, design service 126 updates the text information 173 of design element 1211 to indicate the format information of the text element (e.g., design element 1211). Specifically, design service 126 updates the editing indicator 177 of design element 1211 to indicate that design element 1211 has been edited (e.g., added) relative to design template 105.

[0139] Method 600 further includes, at 648, detecting some matching text fields and determining new content to be transferred. For example, design service 126 determines that at least some design elements 161 of design template 113 match at least some design elements 121 of design 103. In response to determining that at least one design element 121 of design 103 does not match any design element 161 of design template 113 and editing the unmatched design element relative to design template 105, design service 126 determines that applying design template 113 to design 103 will include transferring the content of the unmatched design element. For example, if the unmatched design element is included in design template 105 and has not been edited, the unmatched design element will not be transferred when design template 113 is applied to design 103. If the unmatched design element (e.g., added by user 104 or included in design template 105) has been edited, both the unmatched and edited design elements will be transferred when design template 113 is applied to design 103. Method 600 continues to 654.

[0140] Method 600 further includes, at 668, transferring all matching text fields to a new template and styling the new default text boxes within the same theme as the new template. For example, design service 126 applies a content signature of design 103 to design 115. Applying the content signature includes: identifying design elements in design 115 that correspond to the edited design elements of design 103; updating the identified design elements in design 115 based on the corresponding edited design elements of design 103; identifying edited, mismatched design elements of design 103; and adding design elements to design 115 based on the identified, mismatched, and edited design elements of design 103.

[0141] exist Figure 13In Example 1302, Design 115 includes Design element 1303 and Design elements 124, 803, 805, 807, and 809. Design elements 124, 803, 805, 807, and 809 correspond to Design element 161 of Design template 113. Design element 1303 corresponds to Design element 1211 of Design 103. In a specific aspect, Design element 1303 is formatted based on format information 159 of Design 115 (and Design template 113). For example, format information 159 indicates first format information corresponding to type 171 (e.g., default style) of Design element 1303, and Design element 1303 is formatted based on the first format information. Alternatively, the style of Design element 1303 is designed based on second format information indicated by text information 173 of Design element 1303 (e.g., copied from text information 173 of Design element 1211). In a specific example, the style (e.g., formatting) of design element 1303 is designed based on first format information, second format information, or a combination thereof. Method 600 proceeds to 674.

[0142] Figures 12 to 13 Therefore, user story 1201 is shown, in which a user adds a text element with a default content role to design 103, and design services(s)126 add a copy of the text element to design 115. The copy of the text element is formatted based on the formatting information of design template 113.

[0143] Return to Figure 6 Method 600 includes: at 630, the user adds a new text box with a content role to their design. Figure 14 Example 1402 and Figure 12 The difference in Example 1202 is that user 104 provides user input 109, which indicates the selection of content role 147 (e.g., “heading”) for an added text element (e.g., design element 1411). Design service (multiple) 126 updates the content role 179 of the design element information of design element 1411 to indicate content role 147 (e.g., “heading”).

[0144] Method 600 further includes, at 648, detecting some matching text fields and determining new content to be transferred. For example, in response to determining that at least one design element 121 of design 103 does not match any design element 161 of design template 113 and editing the mismatched design element relative to design template 105, design service(s) 126 determines that applying design template 113 to design 103 will include transferring the content of both the mismatched and edited design elements. Method 600 continues to 654.

[0145] Method 600 also includes, at 640, transferring all matching text fields to a new template, and styling the new text boxes within the same theme as the new template. For example, design service 126 identifies design elements in design 115 that correspond to the edited design elements of design 103, updates the identified design elements in design 115 based on the corresponding edited design elements of design 103, and adds design elements to design 115 based on the mismatched and edited design elements of design 103.

[0146] exist Figure 15 In Example 1502, Design 115 includes Design element 1503 and Design elements 124, 803, 805, 807, and 809. Design elements 124, 803, 805, 807, and 809 correspond to Design element 161 of Design template 113. Design element 1503 corresponds to Design element 1411 of Design 103. For example, Design element 1503 includes the text included in Design element 1411.

[0147] Specifically, design element 1503 is formatted based on format information 159 of design 115 (and design template 113). For example, format information 159 indicates first format information corresponding to type 171 (e.g., a "heading" style), and the style of design element 1503 is designed based on the first format information. Alternatively, design element 1503 is formatted based on second format information of added text elements (e.g., design element 1411). For example, design element 1503 is formatted based on second format information indicated by text information 173 of design element 1503 (e.g., copied from text information 173 of design element 1411).

[0148] In a specific example, design element 1503 is formatted based on first format information and second format information. For example, design element 1503 is formatted based on the text color indicated by the second format information (e.g., corresponding to an added text element) and the font type and font size indicated by the first format information (e.g., specified by design template 113). Method 600 proceeds to 674.

[0149] Figures 14 to 15 Therefore, user story 1401 is shown, in which a user adds a text element with a specific content role to design 103, and design services(s)126 add a copy of the text element to design 115. The copy of the text element is formatted based on the formatting information of design template 113, the formatting information of the text element, or both.

[0150] Return to Figure 6 Method 600 includes: at 632, the user deletes the text box from the placeholder template. Figure 16 In Example 1602, user 104 provides user input 109, which instructs that design element 703 be removed from design 103. Multiple design services 126 remove design element 703 from design 103 in response to receiving user input 109. Figure 16 In Example 1604, Design 103 includes Design Elements 123, 705, and 707, but does not include Design Element 703.

[0151] Method 600 further includes, at 652, detecting some matching text fields and determining some content to be transferred. For example, in response to determining that at least some design elements 121 of design 103 have been edited relative to design template 105, design service(s) 126 determines that applying design template 113 to design 103 will include transferring the content of the edited design elements. If an edited design element of design 103 matches a corresponding design element of design 115, the corresponding design element is updated based on the edited design element. If an edited design element of design 103 does not match any corresponding design element of design 115, the corresponding design element is added to design 115 based on the edited design element. If no design element 121 of design 103 has been edited, no content transfer occurs. In a specific aspect, deleted design elements of design element 121 are considered edited design elements. For example, in response to determining that a deleted design element of design 103 corresponds to a design element of design 115, design service(s) 126 removes the corresponding design element from design 115. In terms of alternatives, the deleted design element of design element 121 is not considered an edited design element. For example, design service 126 suppresses the removal of design elements in design 115 that correspond to the deleted design element of design 103. Method 600 continues to 654.

[0152] Method 600 further includes, at 672, transferring all matching text fields to a new template. When the new template is applied, missing text boxes are still added to the page. For example, design services 126 identify design elements in design 115 corresponding to edited design elements in design 103, update the identified design elements in design 115 based on the corresponding edited design elements in design 103, and add design elements to design 115 based on both mismatched and edited design elements in design 103. In a specific example, design services 126 generate design 115 by copying design template 113. In response to determining that design 103 does not include any edited design elements, design services 126 suppress updates to design 115 based on design 103. In a specific aspect, design element 703 deleted from design 103 is not considered an edited design element, design template 113 includes a first design element corresponding to design element 703, and design services 126 add design element 803 to design 115 by copying the first design element. In a specific sense, design service 126 suppresses the removal of design element 803 corresponding to the design element (e.g., design element 703) deleted from design 103.

[0153] exist Figure 17 In Example 1702, Design 115 includes Design Elements 124, 803, 805, 807, and 809. Design Elements 124, 803, 805, 807, and 809 correspond to Design Elements 161 in Design Template 113. For example, Design 115 includes Design Element 803, even though the corresponding Design Element 703 has been removed from Design 103.

[0154] exist Figure 17 In Example 1704, user 104 provides user input 109, which indicates that design element 803 will be removed from design 115. Multiple design services 126 remove design element 803 from design element 191 of design 115 in response to receiving user input 109.

[0155] Specifically, in response to determining that a corresponding design element (e.g., design element 703) has been deleted from design 103, multiple design services 126 remove design element 803 from design 115. For example, in this aspect, multiple design services 126 track in design element information 133 that design element 703 was generated from design template 105 (e.g., by copying design elements from design template 105). In response to receiving user input 109 indicating that design element 703 should be removed from design 103, multiple design services 126 update design element information 133 to indicate that design element 703 generated from design template 105 has been deleted. In response to determining that design element 703 generated from design template 105 has been deleted, multiple design services 126 prevent adding or removing design element 803 from design 115.

[0156] Figures 16 to 17 Therefore, user story 1601 is shown, in which a user removes a text element from design 103, and design services(s)126 apply a design template 113 including the corresponding text element. In user story 1601, design services(s)126 retain the corresponding text element in design 115. In other implementations, design services(s)126 remove the corresponding text element from design 115.

[0157] Return to Figure 6 Method 600 includes: at 606, the user clicks to open an existing single-page design. For example, user 104 selects an option in GUI 181 to open design 103.

[0158] Method 600 also includes, at 608, loading an existing design onto the page. For example, design services 126 update GUI 181 to display design 103. As described herein, in response to detecting one or more conditions 640, design services 126 perform content transfer based on one or more actions 660 to apply design template 113 to design 103.

[0159] Method 600 includes: at 610, the user clicks "Use this template" from the / template page. For example, user 104 selects the option of GUI 181 to open design template 105.

[0160] Method 600 further includes, at 612, loading a remix of the template. For example, design services 126 update GUI 181 to display design template 105. In a specific aspect, design services 126 generate design 103 based on design template 105 and update GUI 181 to display design 103. As described herein, in response to detecting one or more conditions 640, design services 126 perform content transfer based on one or more actions 660 to apply design template 113 to design 103.

[0161] Method 600 thus enables the automatic transfer of user-provided content to design templates. This automatic transfer allows for a faster design process and a more intuitive user experience. For example, users can efficiently apply various design templates to an edited design without having to repeatedly provide the same edits each time a design template is applied. Users can compare the results of applying various design templates and select a specific design template based on this comparison.

[0162] Figures 18 to 20 User story 1801 is shown, in which the user removes all design elements from design 103 and adds a design element with a default content role 1279 to design 103. Multiple design services 126 apply design template 113 to design 103. Figure 18 In Example 1802, design 103 includes design elements 123, 703, 705, and 707 corresponding to design element 141 of design template 105. Figure 18 In Example 1804, user 104 deletes design elements 123, 703, 705, and 707 from design 103. It should be understood that the user-performed operation includes: (multiple) design services 126 performing the operation in response to receiving user input 109.

[0163] exist Figure 19In Example 1902, User 104 adds an image element (e.g., design element 1909), a first text element (e.g., design element 1903), a second text element (e.g., design element 1905), a third text element (e.g., design element 1911), and a fourth text element (e.g., design element 1924) to Design 103. User 104 assigns a default content role 1279 (e.g., "None") to each of Design elements 1903, 1905, 1911, and 1924. In a specific aspect, in response to determining that the default content role 1279 has been assigned to multiple design elements of Design 103, Design Services 126 updates GUI 181 to provide User 104 with information related to the benefits of assigning content roles to design elements. (Multiple) design services 126 update the text information 173 of each of the design elements 1903, 1905, 1911 and 1924 to indicate the text and font information of the design elements (e.g., text elements).

[0164] (Multiple) design services 126 generate design 115 by applying design template 113 to design 103. Figure 20 In Example 2002, design 115 includes design elements 124, 803, 805, 807, and 809. For example, design service 126 generates design 115 by copying design element 161 of design template 113 to include design elements 124, 803, 805, 807, and 809.

[0165] Multiple design services 126 apply the content signature of design 103 to design 115. Specifically, multiple design services 126 determine that design element 805 has the same content role (e.g., default content role 1279) as each of design elements 1903, 1905, 1911, and 1924 in design 103. In response to determining that design element 1911 has the highest vertical position among design elements 1903, 1905, 1911, and 1924 in design 103, multiple design services 126 select design element 1911. Multiple design services 126 mark design element 1911 as corresponding to design element 805. Multiple design services 126 update design element 805 based on design element 1911.

[0166] Specifically, in response to determining that design element 1909 includes an image element, the design services(s) 126 suppress the updating of design element 809 based on design element 1909. Alternatively, in response to determining that design element 1909 matches design element 809 and has been edited relative to design template 105, the design services(s) 126 update design element 809 based on design element 1909. For example, the design services(s) 126 update design element 809 to include the image included in design element 1909 (e.g., a background image with a sun and palm trees).

[0167] Multiple design services 126 add design elements 2003, 2005, and 2007 to design 115. For example, in response to determining that the remaining design elements of design 115 do not match design elements 1903, 1905, and 1924, multiple design services 126 generate design elements 2003, 2005, and 2007 corresponding to design elements 1903, 1905, and 1924, respectively. Multiple design services 126 generate design element information for design elements 2003, 2005, and 2007 based on the design element information of design elements 1903, 1905, and 1924. Each of design elements 2003, 2005, and 2007 is formatted based on: first format information of the corresponding text element added to design 103, second format information associated with the default style in design template 113, or both. For example, design element 2003 is formatted to have a first text color indicated by first format information and a first font size indicated by second format information. If a content role is not assigned to a design element added to design 103, applying a design template can generate a design with both a default design element and the added design element, both of which have the design template. For example, content transfer may not occur between the added design element and the default design element.

[0168] In a specific implementation, design service 126 predicts content roles by analyzing design elements that do not have an assigned content role (or are assigned a default content role 1279). Design service 126 generates or makes accessible content role models 195. Content role models 195 include trained machine learning models, such as artificial neural networks. For example, design service 126 trains content role models 195 based on a test design template 197 using machine learning techniques. Content role models 195 are trained to identify (e.g., predict) the content roles of design elements in the test design template 197. For instance, design service 126 extracts features from design elements of the test design template, content role models 195 use these features to predict the content role corresponding to those features, and compares the predicted content roles with the actual content roles of the design elements. If the predicted content role differs from the actual content role, content role models 195 are updated (trained) to increase the likelihood that content role models 195 predict the actual content role for that feature. In a specific implementation, content role models 195 are trained by updating the weights assigned to one or more features. In specific terms, (multiple) design services 126 offline generate and train content character models 195, for example, during the setup or configuration phase.

[0169] Specifically, in response to determining that a design element has not been assigned a content role (or has been assigned a default content role 1279), multiple design services 126 perform analysis of the design element to determine its content role. For example, multiple design services 126 extract features from design element 1924 and determine a predicted content role by applying a content role model 195 to those features. The multiple design services then assign the predicted content role (e.g., content role 147) to design element 1924.

[0170] Design element 1924 features include at least one of the following: ranking 183, position 175, width, height, text transformation attribute, text word count, text line count, count of common element words and template description, count of page elements with the same font size, count of page elements with the same font type (e.g., font style), count of page elements (e.g., element count), or element group membership indicator.

[0171] The ranking 183 of design element 1924 includes the relative position (e.g., position ranking), relative font size, relative width, relative height, or a combination thereof. For example, relative position indicates the position 175 of design element 1924 within the page of design 103 relative to the positions of design elements 1903, 1905, and 1911 (e.g., middle, third, or both). In a specific aspect, relative position indicates the position 175 relative to design elements having a particular format (e.g., maximum font size).

[0172] The relative font size of design element 1924 indicates its font size relative to the font sizes of other design elements on the page of design 103. The relative width of design element 1924 indicates its width relative to the widths of other design elements on the page of design 103. The relative height of design element 1924 indicates its height relative to the heights of other design elements on the page of design 103. Specifically, the width of design element 1924 includes the width of its bounding box. Specifically, the height of design element 1924 includes the height of its bounding box.

[0173] The bounding box information 185 of design element 1924 indicates the width of design element 1924, the height of design element 1924, the width of the bounding box, the height of the bounding box, or a combination thereof. When the design element (e.g., design element 1924) includes a text element, the "bounding box" of the design element refers to the rectangle representing the complete area of ​​the text of the text element. When the design element includes an image element, the "bounding box" of the design element refers to the rectangle representing the complete area of ​​the image of the image element.

[0174] The text information 173 of design element 1924 indicates: the text transformation attributes of design element 1924 (e.g., underline, bold, italic, lowercase, all uppercase, bold, or a combination thereof), the number of words in the text of design element 1924, the number of lines in the text of design element 1924, or a combination thereof.

[0175] The count of common element words and template descriptions indicates the number of words included in each of the text of design element 1924 and the description of design template 105. The count of page elements with the same font size as design element 1924 indicates the count of other design elements on the design page that have the same font size as design element 1924 (e.g., 0). The count of page elements with the same font type as design element 1924 indicates the count of other design elements on the design page that have the same font type as design element 1924. The count of page elements indicates the count of design elements (or text elements) on the design page.

[0176] The element group membership indicator indicates whether design element 1924 is included in a group of design elements on the design page. If design element 1924 is not grouped with other design elements in design 103, the group identifier 169 of design element 1924 has a first value (e.g., -1) indicating that design element 1924 is not a group member. If design element 1924 is included in a specific group of design elements 121 in design 103, the group identifier 169 of design element 1924 indicates the identifier of that specific group.

[0177] Figures 21 to 23 User story 2101 is shown, in which the user removes all design elements from design 103 and adds design elements with various content roles to design 103 (instead of the default content role, such as...). Figures 18 to 20 (As shown). (Multiple) design services 126 apply design template 113 to design 103. In Figure 21 In Example 1802, design 103 includes design elements 123, 703, 705, and 707 corresponding to design element 141 of design template 105. Figure 21 In Example 1804, User 104 removes design elements 123, 703, 705, and 707 from Design 103.

[0178] Figure 22 Example 2202 and Figure 19 The difference in Example 1902 is that user 104 assigns various content roles to the added text elements (e.g., design element 2203, design element 2205, design element 2211, and design element 2224). For example, user 104 labels design element 2211 as "preface" (e.g., first content role), design element 2203 as "title 1" (e.g., content role 2247), design element 2204 as "heading" (e.g., content role 147), and design element 2205 as "body" (e.g., fourth content role). The design service 126 updates the text information 173 of each of design elements 2203, 2205, 2211, and 2224 to indicate the text and font information of the design element (e.g., text element). Specifically, design service 126 updates the format information 155 of design 103 to indicate that the styles of the preface design element, title design element, heading design element, and body text design element are associated with the formats of design element 2211, design element 2203, design element 2204, and design element 2205, respectively.

[0179] (Multiple) design services 126 generate design 115 by applying design template 113 to design 103. Figure 23 In Example 2302, multiple design services 126 generate design 115 by copying design elements 161 from design template 113 to include design elements 124, 803, 805, 807, and 809. Specifically, in response to determining that design element 163 is included in the first group of design elements in design template 113, multiple design services 126 add design element 124 to the second group of design elements in design 115. The second group of design elements corresponds to the first group of design elements. Specifically, in response to determining that design element 163 is included as a foreground element in the first group of design elements, multiple design services 126 add design element 124 as a foreground element in the second group of design elements. Specifically, in response to determining that the design element 161 (corresponding to design element 809) is added as a background element in the first group of design elements, multiple design services 126 add design element 809 as a background element in the second group of design elements. In a specific sense, the first size of the bounding box of design element 809 is based on the size of the bounding box of the foreground element of the second group of design elements.

[0180] Multiple design services 126 apply a content signature of design 103 to design 115. Specifically, multiple design services 126 identify edited design elements of design 103 that match design elements of design 115. For example, multiple design services 126 determine that design elements 124, 803, and 805 have been edited relative to design template 105 and that design elements 124, 803, and 805 match design elements 2224, 2211, and 2205, respectively. Multiple design services 126 use the matched edited design elements to update the corresponding design elements of design 115. For example, multiple design services 126 update the title text element (e.g., design element 124) of design 115 based on the title text element (e.g., design element 2224) of design 103. For instance, the title text element (e.g., design element 124) of design 115 includes a copy of the text indicated by the title text element (e.g., design element 2224) of design 103 (e.g., “Birthday Party”).

[0181] Specifically, in response to determining that design 103 does not include a "subtitle" element, design services(s) 126 suppress updating the "subtitle" element (e.g., design element 807) of design 115 based on design 103. Alternatively, in response to determining that design 103 does not include a "subtitle" element, design services(s) 126 remove the "subtitle" element (e.g., design element 807) from design 115.

[0182] In response to determining that design 115 does not include a "Topic 1" element corresponding to the "Topic 1" element (e.g., design element 2203) of design 103, design service(s) 126 generates a design element 2303 corresponding to the "Topic 1" element (e.g., design element 2203). Design element 2303 has a content role 2247 and a topic design element style. Design element 2303 is formatted based on first format information of the "Topic 1" element (e.g., design element 2203) added to design 103, second format information associated with the topic design element style in design template 113, or both.

[0183] Figures 24 to 25 User story 2401 is shown, in which the user removes all design elements from design 103, updates design 103, and selects design template 113 to apply to design 103. Multiple design services 126 apply design template 113 to design 103. User 104 selects an option to reset design template 113. Figure 24 In Example 2202, as referenced Figure 22 As described, Design 103 was updated by User 104. Figure 24 In Example 2302, as referenced Figure 23 As described, (multiple) design services 126 generate design 115 by applying design template 113 to design 103. Figure 25 In Example 2502, user 104 selects the reset option 2503 from GUI 181 to reset design template 113. In response to receiving the selection of reset option 2503, multiple design services 126 reset design 115 based on design template 113. For example, multiple design services 126 remove design element 191 and design element information 193 from design 115. Multiple design services 126 generate a second version of design element 191 and a second version of design element information 193 by copying design template 113, and add the second versions of design element 191 and design element information 193 to design 115. User story 2401 thus shows multiple design services 126 enabling user 104 to undo the transferred content and instead restore the default content of the applied template.

[0184] Figure 26User story 2601 is shown, in which user 104 uses content roles to specify the order (or position) of design elements associated with the same formatting information. For example, design template 105 includes first, second, third, and fourth text elements, respectively assigned a first, second, third, and fourth content role. Each of the first, second, third, and fourth content roles indicates a content role (e.g., “Title-1”) and a sequence label (e.g., A, B, C, or D). Each of the first, second, third, and fourth text elements is assigned a design element type (e.g., title design element style). In a specific aspect, formatting information 155 includes first formatting information for the design element type (e.g., title design element style). In a specific example, each of the first, second, third, and fourth text elements is formatted based on the first formatting information. Multiple design services 126 generate design 103 by copying the first, second, third, and fourth text elements.

[0185] In Example 2602, multiple design services 126 generate design 115 by applying design template 113 to design 103. For example, design template 113 includes a first text element having a first content role, a second content role, a third content role, and a fourth content role. Multiple design services 126 generate design 115 (by copying design template 113) to include a second text element having the first content role, the second content role, the third content role, and the fourth content role. Multiple design services 126 apply a content signature of design 103 to design 115. For example, the second text element of design 115 with a first content role (e.g., "Topic-1A") is updated based on the first text element of design 103 with a first content role (e.g., "Topic-1A"). Example 2604 differs from Example 2602 in that design template 113 includes one or more image elements.

[0186] exist Figure 27In Example 2702, each of design templates 105 and 113 includes multiple design pages, in this case, two sides of a business card. Design elements for a particular design page include page tags 186, which indicate a specific page number, a specific page type, or both (e.g., front, back, 1, 2). Multiple design services 126 identify matching design elements based at least in part on page tags 186. For example, in response to determining that the content role 179 of design element 123 matches the content role 179 of design element 124 and that the page tag 186 of design element 123 (e.g., page number, page type, or both) matches the page tag 186 of design element 124, multiple design services 126 determine that design element 123 corresponds to design element 124.

[0187] Figures 28 to 31 User story 2801 is shown, in which design 103 includes multiple design pages and user 104 edits design 103. Multiple design services 126 apply design template 113 to an updated version of design 103. Figure 28 In Example 2802, Design 103 is based on Design Template 105. For example, Design Template 105 includes a first design page and a second design page. Multiple design services 126 generate Design 103 by copying Design Template 105. For example, Design 103 includes Design Page 2830 corresponding to the first design page and Design Page 2832 corresponding to the second design page. Design 103 includes Design Elements 123 on Design Page 2830. Design Elements 123 include default text (e.g., “Company Name”) that can be copied from Design Elements 143 of Design Template 105. Page Labels 186 (e.g., front) of Design Elements 123 indicate Page Labels 186 (e.g., page type, page number, or both) of Design Page 2830. Figure 28 In Example 2804, user 104 edits design 103. For example, user 104 updates the text of design element 123 (e.g., "Orange Company").

[0188] exist Figure 29In the example shown, user 104 uses GUI 181 to search for and select design template 113. In response to receiving user input 109 instructing the selection of design template 113, design services(s) 126 update GUI 181 to include GUI elements corresponding to the design pages of design template 113. For example, GUI 181 includes GUI element 2922 (e.g., a first thumbnail image) and GUI element 2924 (e.g., a second thumbnail image) corresponding to design pages 2930 and 2932 of design template 113, respectively. Specifically, in response to determining that design page 2830 is the first design page of design 103 displayed in GUI 181, design services(s) 126 mark design page 2830 as the active page of design 103.

[0189] exist Figure 29 In this implementation, GUI element 2922, corresponding to design page 2930 of design template 113, allows user 104 to preview design page 2930 before determining whether to apply design template 113 to design 103. In an alternative implementation, GUI element 2922 is based on a first design page of design 115. The first design page of design 115 is the result of applying the content signature of design page 2830 to design page 2930. In this implementation, GUI element 2922 allows user 104 to preview the result of applying design template 113 to design 103 and compare that result with design page 2830 of design 103, which is also displayed in GUI 181.

[0190] exist Figure 30 In Example 3002, user 104 selects GUI element 2922 corresponding to design page 2930 of design template 113. Specifically, in response to determining that GUI element 2922 has been selected, design services(s) 126 mark design page 2930 as the active page of design template 113. Figure 30 In Example 3004, the user selects a GUI element 2924 corresponding to a design page 2932 of design template 113. Specifically, in response to determining that GUI element 2922 has been selected, design services(s)126 mark design page 2932 as the active page of design template 113.

[0191] In each of Examples 3002 and 3004, option 3026 is selected, which indicates that each design page of design template 113 will be applied to design 103. In response to receiving a selection of GUI element 2922 or GUI element 2924 and determining that option 3026 is selected, multiple design services 126 apply design template 113 to design 103. Multiple design services 126 generate design 115 by copying design template 113. For example, design 115 includes design pages 3030 and 3032, respectively, corresponding to design pages 2930 and 2932. Multiple design services 126 update design 115 by applying content signatures of the design pages of design 103 to the corresponding design pages of design 115 (e.g., having the same page number, page type, or both for page label 186). For example, multiple design services 126 update the content of design page 3030 by applying the content signature of design page 2830 to design page 3030. For example, the content of an edited design element from design page 2830 is copied to the corresponding design element on design page 3030. As another example, design service(s) 126 updates the content of design page 3032 by applying a content signature from design page 2832 to design page 3032.

[0192] exist Figure 31 In Example 3104, option 2926 is not selected, which indicates that the active page of design template 113 (e.g., design page 2930) will be applied to the active page of design 103 (e.g., design page 2830). In response to determining that option 2926 is not selected, design page 2830 is identified as the active page of design 103 and design page 2930 of design template 113, multiple design services 126 identify design page 3030 as the active page of design 115. Multiple design services 126 update the active page of design 115 (e.g., design page 3030) by copying the active page of design template 113 (e.g., design page 2930). Multiple design services 126 apply the content signature of the active page of design 103 (e.g., design page 2830) to the updated version of the active page (e.g., design page 3030). By deselecting option 2926, user 104 can apply different templates to different pages of a multi-page design.

[0193] Figures 32 to 35 User story 3201 is shown, in which user 104 uses the user story to generate design 115 with more design pages than the design template used to generate design 115. Figure 32In the example, GUI 181 includes GUI elements 3222 and 3224, respectively, corresponding to design pages 3230 and 3232 of design template 105. Multiple design services 126 generate design 103 by copying design template 105. For example, design pages 3240 and 3242 of design 103 correspond to design pages 3230 and 3232 of design template 105, respectively. User 104 selects option 3236 of GUI 181, which indicates that a new page will be added to design 103. Multiple design services 126 add design page 3244 to design 103. User 104 adds text elements (e.g., design element 3254) to design page 3244. Formatting information 155 of design 103 indicates the design element type of design element 3254, the page label of design page 3244, or both, associated with first formatting information. Text elements (e.g., design element 3254) are formatted based on the first formatting information.

[0194] exist Figure 33 In the example, page tags 3310, 3312, and 3314 are assigned to design pages 3240, 3242, and 3244, respectively. Specifically, when design 103 is generated by copying design template 105, the design service(s) 126 assigns page tag 3310 to design page 3240 by copying page tag 3310 of design page 3230. The design service(s) 126 also assigns page tag 3312 to design page 3242 by copying page tag 3312 of design page 3232. In response to receiving a selection of option 3236, the design service(s) 126 assigns page tag 3314 (e.g., the default page tag) to design page 3244. User 104 edits design page 3244. In a specific aspect, design service 126 initializes design page 3244 to include background color, background image, or both included in previous design pages of design 103 (e.g., design page 3242).

[0195] User 104 enters a search term (e.g., "designer's business card"). Multiple design services 126 select a document template 113 corresponding to the search term. Figure 34 In the example shown, design template 113 includes design page 3430 and design page 3432. Multiple design services 126 update GUI 181 to include GUI elements 3422 and GUI element 3424, which correspond to design page 3430 and design page 3432, respectively.

[0196] exist Figure 35In the example, GUI 181 includes option 3526. Selecting option 3526 indicates that the design pages of design template 113 will be applied to design 103. User 104 selects GUI element 3422. In response to receiving a selection of GUI element 3422 and confirming that option 3526 has been selected, multiple design services 126 apply design template 113 to design 103. For example, multiple design services 126 generate design 115 by copying design template 113. Design 115 includes design pages 3540 and 3542, respectively, corresponding to design pages 3430 and 3432. Multiple design services 126 apply content signatures of design page 3540 and 3542 to design pages 3540 and 3542, respectively.

[0197] In response to determining that design 103 includes design page 3244 that does not correspond to any design page of design 115, multiple design services 126 add design page 3544 to design 115, apply a content signature of design page 3244 to design 115, and assign page tag 3314 (e.g., default page tag) to design page 3244. Design page 3544 is formatted based on format information 159 of design 115. For example, design page 3244 includes design element 124. Format information 159 includes first format information associated with page tag 3314 (e.g., default page tag), design element type of design element 124, or both. Design element 124 is formatted based on the first format information. In a specific example, format information 159 indicates a background color, background image, or both associated with page tag 3314. Multiple design services 126 update design page 3544 to include the background color, background image, or both.

[0198] Figures 36 to 39 User story 3601 is shown, in which user 104 adds a copy of the design page of design 103 to design 103 and applies design template 113 to the updated design 103. Figure 36 In the example shown, GUI 181 includes option 3636 (e.g., copy page option) associated with design page 3240. Figure 37As shown, in response to receiving a selection of option 3636 associated with design page 3240, design services 126 add design page 3740 to design 103 by copying design page 3240. Specifically, page number 3710 of design page 3240 has a first value. Adding design page 3740 to design 103 includes: setting page number 3712 of design page 3740 based on the first value (e.g., first value + 1), and updating (e.g., incrementing by 1) the page numbers of design pages following design page 3740 in design 103. For example, design services 126 update (e.g., incrementing by 1) the page number 3714 of design page 3242. Generating design page 3740 by copying design page 3240 includes assigning page label 3310 to design page 3740. Figure 37 In Example 3702, the content of Design Page 3240 (e.g., text elements, image elements, fill elements, design element information, or a combination thereof) is copied to Design Page 3740. Figure 37 In Example 3704, User 104 edits each of Design Pages 3240, 3242, and 3740. In a specific example, User 104 uses Design 103 to print a first business card with a front based on Design Page 3240 and a second business card with a front based on Design Page 3740. The back of each business card is based on Design Page 3242. In another example, User 104 generates Design 103 to include multiple design pages corresponding to the same page label, thereby comparing the different design pages, selecting one of the design pages, and removing the remaining design pages associated with the page label. Figure 38 In the example, GUI 181 includes GUI elements 3422 and 3424, which correspond to design pages 3430 and 3432 of design template 113, respectively.

[0199] exist Figure 39 In the example, in response to receiving a selection of GUI element 3424 and determining that option 3526 has been selected, multiple design services 126 generate design 115 by applying design template 113 to design 103. For example, design 115 includes design page 3940 and design page 3944. Multiple design services 126 generate design page 3940 of design 115 by copying design page 3430 of design template 113. Multiple design services 126 generate design page 3944 of design 115 by copying design page 3432 of design template 113.

[0200] In response to determining that design page 3240 of design 103 has the same first page label (e.g., page label 3310) as the second page label of design page 3940, (multiple) design services 126 mark (e.g., identify) design page 3940 as corresponding to design page 3240. In response to determining that design page 3740 of design 103 is associated with a first page label (e.g., page label 3310) that does not match any other (e.g., unmarked) design page of design 115, (multiple) design services 126 add design page 3942 to design 115, assign the first page label (e.g., page label 3310) to design page 3942, and mark design page 3942 as corresponding to design page 3740. In response to the design page 3430 of the design template 113 being assigned the same page tag (e.g., page tag 3310) as the design page 3942, the design service(s) 126 updates the design page 3942 by copying the design page 3430.

[0201] In response to determining that design page 3940 is identified as corresponding to design page 3240, (multiple) design services 126 apply a content signature from design page 3240 to design page 3940. For example, the content of an edited design element from design page 3240 is copied to the corresponding design element on design page 3940.

[0202] Figures 40 to 43 Examples of applying different design templates to different design pages are shown. Figure 40 In the example, design 103 includes design page 4040, design page 4042, and design page 4044. Figure 41 In Example 4102, GUI 181 includes GUI element 3422 of design page 3430 of design template 113 and GUI element 3424 of design page 3432.

[0203] exist Figure 41 In example 4104, GUI 181 includes option 4126, which instructs that the design page of design template 113 be applied to design 103. Figure 40In Example 4104, in response to receiving a selection of GUI element 3424 and determining that option 4126 has been selected, multiple design services 126 generate design 115 by applying design template 113 to design 103. For example, design 115 includes design pages 4140, 4142, and 4144, respectively, corresponding to design pages 4040, 4042, and 4044. In response to receiving a selection of GUI element 3424, multiple design services 126 designate design page 3432 as the active page of design template 113. In response to determining that design page 4042 is the first design page fully displayed by GUI 181 upon receiving a selection of GUI element 3424, multiple design services 126 designate design page 4042 as the active page of design 103. In response to determining that design page 4142 is design page 3432 based on design template 113, design page 4042 based on design 103, or both, design service(s)126 identifies design page 4142 as the active page of design 115.

[0204] exist Figure 42 In Example 4202, user 104 does not select option 4126. In response to detecting that option 4126 is not selected, (multiple) design services 126 update the inactive page of design 115 by copying the corresponding page of design 103. For example, in response to determining that design page 4240 is marked as the inactive page of design 115 and that design page 4040 of design 103 corresponds to design page 4240, (multiple) design services 126 update design page 4240 by copying design page 4040. As another example, in response to determining that design page 4242 is marked as the active page of design 115, (multiple) design services 126 suppress updates to design page 4242.

[0205] exist Figure 42 In example 4204, GUI 181 includes GUI element 4222 of design page 4230 and GUI element 4224 of design page 4232 of a specific design template in design template 111. Figure 43In Example 4302, GUI 181 includes option 4326. In response to receiving a selection of GUI element 4224 and determining that option 4326 is selected, (multiple) design services 126 generate design 4315 by applying a specific design template to design 115. In response to receiving a selection of GUI element 4224 and determining that design page 4244 is the first design page of design 115 fully displayed in GUI 181, (multiple) design services 126 mark design page 4244 as the active page of design 115. In response to determining that design page 4344 corresponds to the active page of design 115 (e.g., design page 4244), (multiple) design services 126 mark design page 4344 as the active page of design 4315.

[0206] exist Figure 43 In example 4304, user 104 does not select option 4326. In response to detecting that option 4326 is not selected, (multiple) design services 126 update the inactive page of design 4315 by copying the corresponding page of design 115. For example, in response to determining that design page 4342 is marked as the inactive page of design 4315 and that design page 4242 of design 115 corresponds to design page 4342, (multiple) design services 126 update design page 4342 by copying design page 4242. As another example, in response to determining that design page 4344 is marked as the active page of design 4315, (multiple) design services 126 suppress updates to design page 4344. Design 4315 therefore includes design pages based on different design templates.

[0207] Figure 44 Examples of designs 4420, 4422, and 4424 are provided. Each of designs 4420, 4422, and 4424 is based on design template 105. Design template 105 belongs to the presentation design type (e.g., type 157). Design template 105 includes a first design page, a second design page, and a third design page, respectively assigned page labels 4410 (e.g., cover page), 4412 (e.g., large quotation page), and 4414 (e.g., large number page). Specifically, page labels associated with the presentation design type include title pages, pie chart pages, line graph pages, summary pages, large quotation pages, large number pages, content detail pages, or combinations thereof. Specifically, page labels associated with the yearbook design type include covers, tables of contents, class photo pages, individual portrait pages, autograph pages, or combinations thereof. Specifically, page labels associated with the magazine design type include covers, tables of contents, publisher lists, letters from editors, article pages, or combinations thereof.

[0208] exist Figure 45 In the example shown, GUI 181 enables a template designer (e.g., user 104 or another user) to generate design templates that can be used by team members (e.g., users) of a specific team. Figure 46 In Example 4602, GUI 181 includes a tutorial (e.g., a pop-up tutorial). This tutorial provides information related to assigning content roles to design elements. In a specific example, the tutorial is displayed in response to determining that the template designer has first specified a team template. Figure 46 In Example 4604, in response to determining that the template designer has added design elements to the design template, GUI 181 displays suggestions for content roles.

[0209] exist Figure 46 Example 4606 illustrates a design template 105 for a single-page design. Specifically, design template 105 includes a team template. For example, design template 105 is indicated to be available for use by one or more teams. Design template 105 includes one or more text elements. Specifically, the text elements are assigned content roles. Specifically, type 157 of design template 105 indicates that design template 105 is the default single-page design template. Specifically, GUI 181 displays suggested design templates. Figure 47 Example 4702 illustrates a two-page design template 105. For example, the type 157 of design template 105 indicates that design template 105 is a default two-page design template. In specific terms, the design pages of design template 105 are assigned page tags.

[0210] exist Figure 47 Example 4704 illustrates a multi-page design template 105. For example, type 157 of design template 105 indicates that design template 105 is a default multi-page design template. In practice, GUI 181 includes option 4726, which adds a new page to design template 105. In response to receiving a selection of option 4726, design services(s) 126 add a default design page to design template 105. The default design page is associated with a default page label (e.g., "Default Page"). In practice, the default design page includes one or more design elements (e.g., pre-filled text elements). In practice, a first default design page added to a design template of a first type (e.g., presentation type) differs from a second default design page added to a design template of a second type (e.g., business card type). For example, the first design template includes text elements with a first content role (e.g., "Presentation Title"), and the second design template includes text elements with a second content role (e.g., "Contact Information").

[0211] Figures 48 to 50User story 4801 is shown, in which the design is based on design template 105, the design is resized, and design template 113 is applied to the resized design. Figure 48 In the example shown, design 4803 is based on design template 105. Design template 105 belongs to the poster design type. The poster design type is associated with a first width and a first height. For example, design template 105 includes a design page with a first width and a first height.

[0212] User 104 selects an option to change the type of design 4803. For example, user 104 selects an option to change the type to a social media graphic type. The social media graphic type is associated with a second width and a second height. In response to receiving the selection of the option, design services 126 generate design 103 based on design 4803. For example, design 103 includes design elements 4832 and 4834, which correspond to design elements 4802 and 4804 of design 4803, respectively.

[0213] Specifically, the design elements of design 103 are resized relative to the corresponding design elements of design 4803. Specifically, design service 126 sets text elements (e.g., design element 4834) to have a specific width and a specific height. The specific width is based on a first width and a second width. The specific height is based on a first height and a second height. Specifically, design service 126 updates the font size of the text elements based on the first height, the second height, the first width, the second width, or a combination thereof.

[0214] In a specific example, design service 126 sets the background image element (e.g., design element 4832) of design 103 to have a second width and a second height. Specifically, a first image is included in the background image element (e.g., design element 4802) of design 4803. Design service 126 generates a second image by performing a cropping operation, a resizing operation, or both on the first image. The background image element (e.g., design element 4832) of design 103 includes the second image.

[0215] exist Figure 49 In the example shown, design template 113 includes a first design element associated with the pretitle content role, a second design element (e.g., design element 163) associated with the title content role (e.g., content role 147), and a third design element associated with the subtitle content role. Design template 113 indicates formatting information 159.

[0216] exist Figure 50In Example 5002, multiple design services 126 generate design 115 by applying design template 113 to design 103. In Example 5004, multiple design services 126 generate design 5015 by applying design template 5013 to design 103. Therefore, content transfer from a first type of design (e.g., poster design) to a second type of design template (e.g., social media graphic design template) can be performed to generate a second type of design (e.g., social media graphic design).

[0217] Figures 51 to 52 User story 5101 illustrates user 104 resizing a custom design and applying a design template to the resized design. Figure 51 In the example shown, user 104 generates design 5103 by adding design elements to design 5103. For example, design 5103 includes image elements (e.g., design element 5102) and text elements (e.g., design element 5104). Design 5103 has a first width and a first height based on user input. For example, user 104 provides user input to update the default poster size. As another example, user 104 generates design 5103 by editing a blank design with a first width and a first height, and user 104 updates the type to indicate that design 5103 is a poster.

[0218] User 104 selects an option to resize design 5103 to a size associated with a poster design type. For example, the poster design type is associated with a second width and a second height. In response to receiving the selection of the option, design services 126 generate design 103 based on design 5103. Design 103 includes design elements 5132 and 5134, respectively corresponding to design elements 5102 and 5104. Design 103 has a second width and a second height. Specifically, design element 5134 is resized relative to design element 5104. Specifically, design element 5132 is resized relative to design element 5102. Specifically, design element 5132 includes a second image, which is a cropped version of the first image included in design element 5102.

[0219] exist Figure 52In Example 5202, multiple design services 126 apply design template 113 to design 103. For example, multiple design services 126 generate design 115 by copying design template 113. Design 115 includes a title text element, a title text element, a subtitle text element, and an image element that correspond to the title text element (e.g., “Any Store”), the title text element (e.g., “Sibling Day Sale”), the subtitle text element (“Get 50% off with code 'Sibling Day'”), and the image element (e.g., an image with a guitar) of design template 113, respectively.

[0220] Multiple design services 126 update design 115 by applying a content signature of design 103 to design 115. In response to determining that design 103 includes a title text element (e.g., “Rethink Your Drinks”) and an image element (e.g., an image with a glass), multiple design services 126 copy the text (e.g., “Rethink Your Drinks”) and the image (e.g., an image with a glass) to the title text element and image element of design 115, respectively. In response to determining that design 103 does not include a pretitle text element and a subtitle text element, multiple design services 126 suppress the updating of the pretitle text element and subtitle text element of design 115. Specifically, in response to determining that design 103 includes an edited background image element, multiple design services 126 update...

[0221] (Multiple) design services 126 determine that design 103 includes one or more mismatched elements that do not correspond to any of the remaining elements of design 115, such as title 1 text elements (e.g., “Know Your Limits”), first paragraph text elements (e.g., “By drinking in moderation, you can reduce… and stay sober”), second paragraph elements (e.g., “Learn more about…”), and title 2 text elements (e.g., “National Anti-Drunk Driving Organization”). (Multiple) design services 126 add design elements corresponding to the mismatched design elements of design 103 to design 115.

[0222] exist Figure 52 In Example 5204, design service(s)126 apply design template 5213 to design 103. For example, design service(s)126 generate design 5215 by copying design template 5213 and update design 5215 by applying the content signature of design 103 to design 5215.

[0223] Figures 53 to 54 User story 5301 is shown, in which user 104 selects a design template, and design services(s) 126 update the design theme and the layout of the design's activity page based on that design template. Figure 53In the example, user 104 selects design page 5330 of design template 113. In response to receiving the selection of design page 5330, design services(s) 126 identify the active page of design 103. For example, in response to determining that design page 5340 of design 103 is the first (or top) fully displayed design page in the display portion of GUI 181, design services(s) 126 mark design page 5340 as the active page of design 103. The remaining design pages (e.g., design page 5342, design page 5344, one or more additional design pages, or combinations thereof) are marked as inactive design pages of design 103.

[0224] In response to receiving a selection for design page 5330, multiple design services 126 generate design 115 with format information 159 copied from design template 113. For each first design page of design 103, multiple design services 126 add a corresponding second design page to design 115. For example, multiple design services 126 add design pages 5350, 5352, and 5354, respectively, corresponding to design pages 5340, 5342, and 5344. Each design page of design 115 has a copy of the page tags of the corresponding design page of design 103. For example, each of design pages 5344 and 5354 has a first page tag (e.g., title page), each of design pages 5340 and 5350 has a second page tag (e.g., large reference page), and each of design pages 5342 and 5352 has a third page tag (e.g., pie page). In response to determining that design page 5340 is the active page of design 103, the (multiple) design services 126 mark the corresponding design page of design 115 (e.g., design page 5350) as the active page of design 115. The (multiple) design services 126 mark the remaining pages (e.g., design pages 5354 and 5352) as inactive pages.

[0225] For each inactive page of design 115 corresponding to a design page of design template 113, multiple design services 126 update the inactive page of design 115 by copying the corresponding design page of design template 113. For example, in response to determining that design page 5354 corresponds to design page 5334 of design template 113 (e.g., having the same page label), multiple design services 126 update design page 5354 by copying design page 5334 (e.g., design elements and design element information). For example, design page 5354 includes a first title text element and a second subtitle text element corresponding to the title text element and subtitle text element of design page 5334. Multiple design services 126 identify a design page of design 103 corresponding to an inactive page of design 115 and apply a content signature of the design page of design 103 to the inactive page of design 115. For example, multiple design services 126 apply a content signature of design page 5344 to design page 5354. For example, update the text of the first title text element and the first subtitle text element of design page 5354 based on the text of the title text element and the text of the subtitle text element of design page 5344, respectively.

[0226] For each inactive page of design 115 that does not correspond to any design page of design template 113, design services(s)126 update the inactive page of design 115 by copying the corresponding design page of design 103. For example, in response to determining that design page 5352 does not correspond to any design page of design template 113 (e.g., does not have the same page label), design services(s)126 copy design page 5342 (e.g., design elements and design element information) to design page 5352. Design page 5352 is formatted based on format information 159 (copied from design template 113).

[0227] Multiple design services 126 update the layout of the active page of design 115. For example, multiple design services 126 update the active page of design 115 (e.g., design page 5350) by copying the active page of design template 113 (e.g., design page 5330). Copying the active page includes copying the page tabs of the active page of design template 113 to the active page of design 115. In particular, in response to receiving a selection of design page 5330, GUI 181 generates a warning indicating that content transfer will not occur. In particular, design 115 corresponds to an updated version of design 103.

[0228] exist Figure 54In the example, user 104 selects design page 5430 of design template 5413. In response to receiving the selection of design page 5430, multiple design services 126 mark design page 5430 as the active page of design template 5413, mark design page 5350 as the active page of design 115, generate design 5415 with formatting information copied from design template 5413, and mark design page 5450 as the active page of design 5415. Multiple design services 126 update the theme of design 5415 based on design template 5413, and update the layout of design page 5450 based on the layout of design page 5430. For example, multiple design services 126 apply the content signature of the inactive design page of design 103 to the corresponding design page of design 5415, and suppress the application of the content signature of design page 5350 to design page 5450.

[0229] Figures 55 to 57 User story 5501 is shown, in which user 104 selects a design template, and design service(s)126 applies the theme of the design template to the design without updating the layout of the design.

[0230] Figure 55 The example shown is the same as Figure 53 The difference in the example shown is that each design page of design 115 is treated as an inactive page. For example, in response to determining that design page 5550 of design 115 corresponds to design page 5330 of design template 113 (e.g., having the same page tags), design service(s) 126 updates design page 5550 by copying design page 5330 (e.g., design elements and design element information). Design service(s) 126 applies the content signature of design page 5340 to design page 5550.

[0231] exist Figure 56 In example 5602, user 104 selects option 5611 (e.g., the option to add a new page). Figure 56 In example 5604, in response to receiving a selection of option 5611, (multiple) design services 126 add design page 5654 to design 115. Specifically, (multiple) design services 126 assign a default page label to design page 5654. Design page 5654 is formatted based on format information 159 of design 115.

[0232] exist Figure 57In the example shown, user 104 selects design page 5330 of design template 113. In response to receiving the selection of design page 5330, multiple design services 126 mark design page 5654 as the active page of design 115 and design page 5330 as the active page of design template 113. In response to determining that the active page of design 115 corresponds to an unedited default page (e.g., with default page labels), multiple design services 126 update the layout of the active page of design 115 based on the active page of design template 113. For example, multiple design services 126 update design page 5654 by copying design page 5330 (e.g., design elements and design element information). In a specific aspect, multiple design services 126 update the page labels of design page 5654 by copying the page labels of design page 5330.

[0233] Figures 58 to 60 User story 5801 is shown, in which the theme of the design is updated based on the design template when a design template is selected in the theme menu, and the layout (and possibly the theme) of the activity page is updated based on the design template when a design template is selected in the layout menu.

[0234] Figure 58 The example shown is the same as Figure 55 The difference in the example shown is that, in response to receiving a selection of design template 113 from menu 5880 (e.g., a theme menu or theme tab), design service(s) 126 generates design 115. In response to receiving a selection from menu 5880, design service(s) 126 generates design 115 by applying the theme of design template 113 to design 103 (without updating the layout).

[0235] exist Figure 59 In the example shown, user 104 selects design page 5330 in menu 5980 (e.g., layout menu or layout tab). In response to receiving the selection of design page 5330 from menu 5980, design services 126 mark design page 5330 as the active page of design template 113 and design page 5550 as the active page of design 115.

[0236] exist Figure 59In Example 5902, in response to receiving a selection of design page 5330 from menu 5980 (e.g., layout menu), multiple design services 126 update the layout of the active page based on design template 113 without updating the theme of design 115. For example, multiple design services may remove design elements and design element information from design page 5550, update design page 5550 by copying design page 5330 (e.g., design elements and design element information), update the page labels of design page 5550 to include a copy of the page labels of design page 5330, or a combination thereof. Specifically, in response to a selection from menu 5980, GUI 181 generates a warning indicating that content transfer will not occur. Specifically, user 104 selects design page 5330 by selecting a thumbnail image.

[0237] Figure 59 The difference between Example 5904 and Example 5902 is that (multiple) design services 126 design 5915 instead of updating design 115. For example, (multiple) design services 126 generate design 5915 with format information 159 of design template 113. For each inactive page of design 5915 corresponding to a design page of design template 113, (multiple) design services 126 updates the inactive page by copying the corresponding design page of design template 113 and applying a content signature of the corresponding design page of design 115 to the inactive page. For each inactive page of design 5915 that does not correspond to a design page of design template 113, (multiple) design services 126 updates the inactive page by copying the corresponding page of design 115. (Multiple) design services 126 updates the active page (e.g., design page 5940) of design 5915 by copying the active page (e.g., design page 5330) of design template 113.

[0238] exist Figure 60 In the example shown, in response to receiving a selection of design template 6013 from menu 5880 (e.g., theme menu), design service(s) 126 generates design 6017 by applying the theme of design template 6013 to design 115 (or design 5915).

[0239] Figures 53 to 60 This demonstrates various methods for applying the theme, layout, or both of a design template to a design. For example, Figures 53 to 54 The first method is shown, in which the theme and layout of the design template are applied to each design page of the design. Figures 55 to 57The second method is shown, in which the theme of the design template is applied to each page of the design, and if the active page is a default (e.g., blank) page, the layout of the design template is applied to the active page of the design. Figures 58 to 59 A third method is shown, in which the theme of the design template is applied to each page of the design when a design template is selected from the theme menu, and the layout of the design template is applied to the active page of the design when a design template is selected from the layout menu. Various other methods can be used to apply the theme, layout, or both of a design template to a design. In a specific example, user 104 uses GUI 181 to edit design 103. Design 103 is based on a default template (e.g., design template 105). In a specific example, design 103 includes a first design page and a second design page. User 104 selects the option to add a new page. Multiple design services 126 select a subset of design template 111 and update GUI 181 to display GUI elements (e.g., thumbnails) corresponding to that subset. In a specific aspect, GUI 181 includes a first set of thumbnails corresponding to a first subset of design template 111 (e.g., a large reference design), a second set of thumbnails corresponding to a second subset of design template 111 (e.g., a pie chart design), or a combination thereof. In a specific sense, GUI 181 includes the option to view thumbnails corresponding to specific types of additional design templates (e.g., large reference designs).

[0240] User 104 selects a first thumbnail associated with the first design template. In response to receiving the selection of the first thumbnail, design services(s)126 add a third design page to design 103. For example, the first design template is a single-page design (e.g., a large reference design), and design services(s)126 generate the third design page by copying design elements, design element information, page tags (e.g., a large reference page), or a combination thereof from the first design template. User 104 may add one or more additional pages to design 103.

[0241] User 104 selects design template 113 from menu 5880 (e.g., theme menu). In response to receiving the selection of design template 113 from menu 5880 (e.g., theme menu), multiple design services 126 apply the theme of design template 113 to design 103. For example, multiple design services 126 generate design 115 with format information 159 of design template 113. Multiple design services 126 add a second design page to design 115 corresponding to the first design page of design 103. In response to determining that the first design page of design 103 corresponds to a third design page of design template 113 (e.g., having the same page label), multiple design services 126 update the second design page of design 115 by copying the third design page of design template 113 (e.g., design elements and design element information). Multiple design services 126 apply the content signature of the first design page of design 103 to the second design page of design 115. Alternatively, in response to the determination that the first design page of design 103 does not correspond to any design page of design template 113, design service(s)126 updates the second design page of design 115 by copying the first design page of design 103.

[0242] In a specific manner, after the application content is signed, (multiple) design services 126 "rearrange" the design elements of design 115. For example, (multiple) design services 126 update the font size of design element 124 based on the bounding box of design element 163. For instance, (multiple) design services 126 update the font size to the maximum font size, such that the bounding box of design element 124 is less than or equal to the bounding box of design element 163.

[0243] Multiple design services 126 perform group rearrangement on design elements that are group members in the design page of design 115. Group rearrangement preserves the distance between group members (e.g., foreground design elements). For example, design element 163 (e.g., a first foreground element) is a certain distance away from a second specific design element (e.g., a second foreground element) of design element 161. Multiple design services 126 position design element 124 at a certain distance from a first specific design element of design element 191. The first specific design element corresponds to the second specific design element. Design element 163 has a second width and a second height in design template 113. In a specific aspect, multiple design services 126 update design element 124 to have a first width and a first height. Group rearrangement preserves the width of design elements (e.g., foreground design elements) and updates (e.g., increases or decreases) the height of design elements to preserve the distance between design elements. For example, the first width is the same as the second width, and the first height is different from the second height. In a specific instance, in response to the determination that the size of the foreground element has changed, design service 126 updates the size of the background design element based on the size of the foreground design element. For example, the size of the background design element is updated so that it continues to contain the group.

[0244] Figure 61 Two examples of the "reflow" operation are shown, which preserves (or approximately preserves) the spacing between design elements when the number of design elements changes during content transition. Figure 61 In the example at the top, element A2 is not shifted, but the spacing between elements A1 and B1, as well as the horizontal separation image between A1 and B1, is maintained. Figure 61 In the example at the bottom, element A3 has been added. The spacing between elements adjacent to the horizontally separated image is maintained, and element A3 is added to give it the same orientation angle as elements A1 and A2. Specifically, the rearrangement operation is performed based on the grouping of design elements.

[0245] Figures 62A to 63B This shows an example of transferring content from the user interface to a template. (Reference) Figures 62A to 63B One or more operations described may be referred to as mobile rapid process design or content-first design. User 104 uses a mobile phone to select a design type from the user interface (e.g., GUI 181), such as... Figure 62A The user interface shown. For example, user 104 selects with The image corresponding to the post. Figure 62B In the example shown, design service 126 updates GUI 181 to display one or more photos stored on the mobile phone (e.g., sorted by recent). User 104 selects one or more photos. Figure 62CIn the example shown, design service 126 updates GUI 181 to enable user 104 to select a predetermined number of photos. For example, this predetermined number is related to the selected design type (e.g., (Related to the post).

[0246] (Multiple) Design Services 126 selects multiple design templates for the chosen design type. Each selected design template includes the same number of image elements as the number of selected photos (e.g., the count of image elements equals the count of selected photos). The image elements correspond to a set of content roles. For example, each selected design template includes a first image element and a second image element corresponding to a first content role (e.g., "Photo-1") and a second content role (e.g., "Photo-2"), respectively.

[0247] Multiple design services 126 generate designs by applying selected design templates to selected photos. For example, multiple design services 126 generate content signatures for selected photos based on a set of content roles. For instance, the content signature indicates that a first selected photo is assigned a first content role (e.g., "Photo-1"), and a second selected photo is assigned a second content role (e.g., Photo-2). Multiple design services generate design 103 by copying design template 105 and update design 103 by adding the selected photos to the corresponding image elements of design 103. Similarly, multiple design services 126 generate design 115 by copying design template 113 and update design 115 by adding the selected photos to the corresponding image elements of design 115.

[0248] exist Figure 63A In the example shown, design services 126 update the GUI to display thumbnails associated with the generated designs. Specifically, in response to receiving a selection of a design, design services 126 store the design in a document database 184. Figure 63B In the example shown, (multiple) design services 126 update the GUI to enable editing of the selected design, display of export options associated with the design type (e.g., "Share to") "), or both. In response to receiving a selection of export options, (multiple) design services 126 generate output based on the selected design (e.g., (post), and send the output to the endpoint associated with the export option (e.g., post). server).

[0249] although Figure 1 This demonstrates the operability based on design templates and additional designs (reference). Figures 2 to 63BExamples of the system 100 of the design are shown and described, but it should be understood that the operation of such a system may include Figure 1 Various local and / or cloud-based components are not shown. For example, Figure 64 A more detailed logical diagram of system 6400 operable to support various aspects of this disclosure is provided. Although shown in the logical diagram, it should be understood that various components of system 6400 may include or correspond to computer hardware, computer software, or combinations thereof. Furthermore, the components of system 6400 may be configured to communicate with each other, for example, via wired and / or wireless networks. Therefore, in various implementations, this document describes a system... Figure 64 The operations performed by a specific component can be performed by dedicated hardware, software, or a combination thereof corresponding to that specific component.

[0250] In specific terms, System 6400 supports browser-based and mobile application-based access to graphic design websites. For example, a graphic design website can correspond to... Figure 1 The GUI 181, and some or all of the components in the system 6400 can be provided by a computing environment, one or more servers, a document database 184, a media database 6485, Figure 1 This is achieved through client devices 192, one or more message queues 6442, load balancers 6406, and / or export databases 6488. For example, a user can log in to a graphic design website and create, edit, and save graphic designs. Operations supported by the graphic design website include, but are not limited to: creating new designs, applying templates to designs, searching for images and adding images to designs, saving designs, generating designs based on another design and template (as described in the preceding figures), and publishing designs.

[0251] System 6400 includes a web frontend 6402 executing at a Platform as a Service (PaaS) provider 6404. The PaaS provider 6404 can implement large-scale deployments of Software as a Service (SaaS) applications, such as web applications. For example, the web frontend 6402 may represent one, five, ten, or some other number of instances of a SaaS application executing on hardware owned and / or rented by the PaaS provider 6404. Each such instance of the frontend SaaS application can be accessed via the Internet. In some examples, a browser or mobile application executed by a user's computing device can access the web frontend 6402 via CDN 101. CDN 101 can also be configured to cache static content (e.g., thumbnails, still images, static web content, etc.). For example, when a user requests a specific content item (such as a specific image), if CDN 101 (e.g., its servers) stores a copy of the image, the CDN can respond to the request without further forwarding the request to other servers. Figure 64 The service infrastructure shown includes CDN 101, which can therefore include multiple geographically distributed "edge" servers for caching content.

[0252] Web frontend 6402 can be configured to serve a graphic design website to a requester, such as by responding to Hypertext Transfer Protocol (HTTP) GET requests, HTTP POST requests, etc. Web frontend 6402 can also be configured to respond to Application Programming Interface (API) calls originating from web browsers and / or mobile apps. In some examples, web frontend 6402 can utilize a memory cache 6403 that stores session data. For example, when a user logs into a graphic design website served by web frontend 6402, user-related information (e.g., display name, photo, subscription level, email address, etc.) can be stored in memory cache 6403 for rapid retrieval, processing, and / or rendering on some or all pages of the graphic design website. The use of memory cache 6403 thus enables rapid page serving without accessing the backend system to determine user information.

[0253] System 6400 includes a load balancer 6406 configured to support communication and workload distribution from a network frontend 6402 to multiple backend services or microservices running on one or more virtual machines, for example, in a cloud computing environment. Each such virtual machine can be implemented using physical hardware owned and / or leased by a cloud service provider. System 6400 can support scalable dynamic deployment of services based on tiered grouping in a multi-tiered configuration. Specifically, services can be grouped into certain virtual machines based on expected load patterns. The architecture of System 6400 can easily reorganize these groups based on observed changes in load patterns or the introduction of new services. Separating services across multiple virtual machines can also scale up specific service groups in response to increases in certain types of load. This scaling up can occur automatically based on load monitoring or can be manually triggered when an increase in load is anticipated. For example, if an increasing number of export tasks (e.g., publishing tasks) are observed (e.g., based on the percentage of busy time to idle time), more virtual machines, including instances of export service 6410 and / or export worker 6448, can be dynamically instantiated to serve the demand. Conversely, if the administrator of system 6400 anticipates an increase in export capacity (e.g., release capacity), the administrator can manually initialize additional virtual machines, including instances of export service 6410 and / or export worker 6448. When export capacity decreases, the virtual machines can be scaled down automatically (e.g., based on a percentage of busy time versus idle time) or manually.

[0254] exist Figure 64 In the example, the first layer of services includes a synchronous "request-response" remote procedure call (RPC) service, and the second layer includes an asynchronous "worker" service. The synchronous RPC service can receive first data from the requester, perform one or more processing functions, and return second data to the requester. This synchronous request-response service can be used for tasks that can be completed relatively quickly (e.g., in three seconds or less), because in some examples, the requester (e.g., a web browser or mobile app) may be blocked while waiting for a response. Conversely, the second-layer asynchronous worker service can be used for background tasks and other tasks that cannot or cannot be completed relatively quickly.

[0255] exist Figure 64In this framework, the first layer includes a first scale group 6422 (labeled "A"), a second scale group 6440 (labeled "G"), and a third scale group 6441 (labeled "E"). The first scale group 6422 includes a billing RPC service 6408, an export service 6410, an import RPC service 6412, a license RPC service 6414, a media service 6416, a review RPC service 6418, and a share RPC service 6420. For example, a virtual machine corresponding to the first scale group 6422 can execute the RPC services shown. The billing RPC service 6408 can be configured to perform synchronous billing tasks (e.g., checking account balances). The export service 6410 can be used to perform synchronous graphic design export tasks (e.g., publishing designs). The import RPC service 6412 can be configured to enable users to import media assets for graphic design creation / editing. The license RPC service 6414 can be configured to enforce image licenses (e.g., one-time licenses). Media service 6416 can be configured to track and catalog media assets available through system 6400, including but not limited to user-uploaded and / or stocked images, templates, fonts, etc. Review RPC service 6418 can be configured to facilitate the acceptance of contributor media (e.g., media assets uploaded by authorized contributors to a graphic design website). Sharing RPC service 6420 enables the sharing of graphic designs with other users, such as via social media accounts.

[0256] The second group 6440 includes a comment RPC service 6424, a document service 6426, a folder RPC service 6428, a notification RPC service 6430, a print RPC service 6432, a profile RPC service 6434, a search RPC service 6436, and a social RPC service 6438. The comment RPC service 6424 allows users to comment on graphic designs in a comment thread. The document service 6426 implements the core design creation, update, and deletion functions of the graphic design website. The folder RPC service 6428 enables navigation into and out of different folders associated with a user's account. The notification RPC service 6430 enables the generation and delivery of notifications to users via the graphic design website (e.g., when a user's design receives a "like" or comment). In some aspects, multiple such notifications can be combined into an email sent to the user's email address or displayed in a pop-up window when the user visits the graphic design website. The print RPC service 6432 can be a formatting service that sends the graphic design to a third-party printer, such as printing it out, and then delivering it to the user's physical mailing address. Configuration RPC service 6434 allows users to manage their graphic design website accounts. Search RPC service 6436 enables searching for images, templates, designs, etc. Social RPC service 6438 allows users to engage in social networking activities on the graphic design website (e.g., "following" another user, "liking" another user's design, etc.) and can generate "push notifications" of designs created by followed users. The third scale group 6441 includes computational RPC service 6443, which can be dedicated to performing certain fast, high CPU utilization operations, such as hashing and solving passwords.

[0257] Figure 64 The second-tier services include the fourth scale group 6458 (labeled "D"), the fifth scale group 6464 (labeled "F"), the sixth scale group 6468 (labeled "C"), the seventh scale group 6476 (labeled "H"), and the eighth scale group 6472 (labeled "B"). The fourth scale group 6458 includes billing workers 6444, document workers 6446, export workers 6448, folder workers 6450, search workers 6452, sharing workers 6454, and social workers 6456. The fifth scale group 6464 includes low-priority import workers 6460 and review workers 6462. The sixth scale group 6468 includes high-priority import workers 6466. The seventh scale group 6476 includes low-priority export workers 6474. The eighth scale group 6472 includes medium / high-priority export workers 6470. For illustrative purposes, Figure 64 The asynchronous worker service in the middle can execute by Figure 64The corresponding RPC service performs a longer and / or more complex version of the operation. In the specific implementation scheme, Figure 64 The priority labels shown (e.g., "low", "medium", and "high") correspond to the amount of dedicated processing resources. "High" priority can be used for jobs triggered by user actions, while "medium" or "low" priority can be used for jobs not triggered by user actions (e.g., background jobs).

[0258] It should be understood that Figure 64 The various services and their groupings shown are for illustrative purposes only and should not be considered limiting. In terms of alternatives, more, fewer, and / or different services may exist in the system. Furthermore, services can be used with… Figure 64 The services shown are grouped into different size groups. In some respects, Figure 64 Each scale group shown corresponds to a virtual hardware instance, i.e., a virtual machine running at a cloud service provider. Therefore, at any given time, each scale group may have one or more active / execution instances, and the number of active / execution virtual machine instances can be dynamically changed based on the overall workload managed by the load balancer 6406. The coordination and configuration of the various instances (including communication between instances and / or services running therein) can be managed by the coordination tool 6405, which itself can be a cloud-based system.

[0259] During operation, the first-layer synchronous RPC service can be configured to communicate with the second-layer asynchronous worker service via message queue 6442, and the asynchronous worker can be used to perform time-consuming tasks. For example, export service 6410 can receive a user's request to export a graphic design. Export service 6410 can push the corresponding job request to message queue 6442. The export worker (e.g., medium / high priority export worker 6470) can respond to the job request by rendering the graphic design to network output. The network output can then be sent back to the user who made the request. As another example, folder RPC service 6428 can receive a request indicating that a user wants to share a graphic design folder with another user. Folder RPC service 6428 can use message queue 6442 to request folder worker 6450 to set corresponding permissions for the folder and each item in that folder. As yet another example, asynchronous workers can be used to perform regular background tasks in system 6400, such as subscription-level daily verification.

[0260] During certain operations at system 6400, the illustrated service may access one or more databases or data storage devices. For example, document database 184 may store files corresponding to graphic designs created by the user, and media database 6485 may store image uploads, fonts, and templates accessible via a graphic design website. In an illustrative aspect, document database 184 may be accessed by document worker 6446 when a user opens or saves a graphic design. In another illustrative aspect, media database 6485 may be accessed by media service 6416 when a user uploads or retrieves images, templates, or fonts.

[0261] System 6400 may also include one or more of the following: a license database 6486, a sharing database 6487, an export database 6488, a profile database 6489, or a social database 6490. The license RPC service 6414 can use the license database 6486 to track licenses acquired by users (e.g., one-time use licenses for images). The sharing RPC service 6420 or the sharing worker 6454 can use the sharing database 6487 to manage the sharing of graphic designs with other users (e.g., via social networks). The export service 6410, the export worker 6448, the low-priority export worker 6474, or the medium / high-priority export worker 6470 can use the export database 6488 to track users exporting their graphic designs to different output formats. The profile database 6489 can support searching user profiles based on different criteria. The social database 6490 can support the social media aspects of graphic design websites.

[0262] System 6400 may also include a database or data storage device that supports search functionality. For example, when a user searches for an image, template, or font, search RPC service 6436 or search worker 6452 can access media search database 6491. As another example, when a user edits profile information associated with their account, profile RPC service 6434 can access profile search database 6492. As yet another example, when a user searches for a previously saved graphic design, document worker 6446 can access document search database 6493.

[0263] Some operations at system 6400 may involve accessing “external” services that are not part of the core service-oriented platform of the graphic design website. Examples of such external services may include, but are not limited to, analytics service 6478, metrics service 6479, billing service 6480, email service 6481, open authorization (OAuth) service 6482, or logging service 6483. Each time a user performs an action on the graphic design website, analytics service 6478 can receive analytics events (e.g., messages) and can perform per-user and macro-level analytics on the graphic design website’s workflows, operations, and performance. Metrics service 6479 can collect and provide performance information related to various components of system 6400. Billing service 6480 can interface with one or more external payment providers, such as for credit card processing, mobile payment processing, etc. Email service 6481 can generate and / or send emails to users (e.g., for notifications, password resets, etc.). OAuth service 6482 can enable federated login to the graphic design website using social network credentials and can also support authentication using certain publishing endpoints. The logging service 6483 can index events / messages generated by components of system 6400 for later diagnostic searches.

[0264] An example of an operation that system 6400 can support is logging into a graphic design website via an internet browser or mobile app. Web front-end 6402 can receive login requests from the internet browser or mobile app. The login request can be routed by load balancer 6406 to an instance of profile RPC service 6434, which can "look up" the user in profile database 6489 and authenticate the user (federated social network login may involve OAuth service 6482). Once the user is authenticated, the graphic design website can load a custom homepage for the user, which may include operations performed by instances of folder RPC service 6428, document worker 6446, etc. The custom homepage can then be redirected to the user's internet browser or mobile app.

[0265] Another example of an operation that can be supported by system 6400 is starting a new design or opening an existing design. When a user clicks on a new design template, web front-end 6402 can provide a graphical design interface (e.g., HTML code) to the user's internet browser or mobile application, which can be executed to edit the new or existing design. In the case of loading an existing design, document service 6426 and / or document worker 6446 can access document database 184 to retrieve the existing design, and media service 6416 can load media assets included in the design from media database 6485.

[0266] Another example of an operation that can be supported by system 6400 is a scenario where a user updates a design using a graphic design interface provided by a graphic design website. When a user updates a design, the update can be handled by document service 6426 and / or document worker 6446. For example, the service can handle image or text movement, insertion, deletion, resizing, recoloring, etc.

[0267] Another example of an operation that can be supported by system 6400 is the case of a user importing an image. In this case, one of the import RPC service 6412 and / or import workers 6460, 6466 can receive the image uploaded by the user, process the image, and integrate the image into the media database 6485 for subsequent retrieval by media service 6416.

[0268] Another example of an operation that can be supported by system 6400 is when a user applies a template to a design. In this case, the media search database 6491 can provide media assets corresponding to the template via media service 6416. The insertion of media assets into the design can then be processed by document service 6426 and / or document worker 6446 as an update to the user's design.

[0269] Another example of an operation that can be supported by system 6400 is a scenario where a user searches for a media asset and then drags and drops that media asset into a design. For example, when a user enters the search term "dog," the search RPC service 6436 and / or the search worker 6452 can access the media search database 6491 to retrieve search results for "dog." The search results can be presented by the user's internet browser or mobile app. When a user adds a specific search result (e.g., a specific image of a dog) to their design, the document service 6426 or the document worker 6446 can handle the corresponding update to the design.

[0270] In specific terms, System 6400 can support design generation based on other designs and templates. For example, users can generate designs by copying templates and update designs by transferring content from other designs, as described in the preceding figures. In some aspects, components of System 6400 (and / or System 100) can perform... Figure 65 Method 6500 generates designs based on alternative designs and templates.

[0271] Method 6500 includes: at 6502, during editing of a first design, receiving user input indicating that a first design element of the first design has a first content role. For example, during editing of design 103, design service(s) 126 receives user input 109 indicating that design element 123 of design 103 has a content role 147. Design service(s) 126 sets the content role 179 of design element 123 to indicate content role 147.

[0272] Method 6500 includes: at 6504, generating a content signature for a first design. For example, design service 126 generates a content signature for design 103 (e.g., design element information 131). Design element information 131 includes design element information 133 for design element 123. Design element information 133 indicates a content role 179 for design element 123. For example, design element information 133 indicates that design element 123 has a content role 147 (e.g., indicated by content role 179).

[0273] Method 6500 further includes: at 6506, generating a second design based on a design template. For example, design service 126 generates design 115 based on design template 113. Generating design 115 includes: adding design element 124 with content role 147 to design 115 based on determining that design template 113 includes design element 163 with content role 147.

[0274] Method 6500 also includes, at 6508, updating the second design by applying a content signature to the second design. For example, as referenced... Figure 1 and Figures 6 to 63B As described, design service 126 updates design 115 by applying a content signature (e.g., design element information 131) of design 103 to design 115. Applying the content signature of design 103 to design 115 includes transferring content (e.g., text) from design element 123 to design element 124.

[0275] Method 6500 further includes, at 6510, generating a graphical user interface (GUI) that includes an image of the second design. For example, design service 126 generates GUI 181 that includes GUI elements (e.g., thumbnail images) of design 115.

[0276] Method 6500 further includes, at 6512, sending the GUI to the client device. For example, design services 126, network front-end 6402, or both send the GUI 181 to the client device 192 via CDN 101.

[0277] Therefore, method 6500 generates a design (e.g., design 115) based on another design (e.g., design 103) and a template (e.g., design template 113). Design 115 is generated by copying design template 113 and updated by automatically transferring content from design 103 to design 115. This automatic content transfer enables a faster design process and a more intuitive user experience. For example, users can efficiently apply various design templates to an edited design without repeatedly providing the same edits each time a different design template is applied. Users can compare the results of applying various design templates and select a specific design template based on this comparison.

[0278] In some respects, components of System 6400 (and / or System 100) can perform Figure 66 Method 6600 generates a content-prioritized design based on user-selected content and templates. Method 6600 can also implement reference... Figures 62A to 63B Example of the description.

[0279] The method includes: at 6602, presenting a user interface with multiple selectable design types. For example, one design type could be a post on a social sharing platform. Each selectable design type is associated with a set of one or more templates, or a set of two or more templates. At 6604, the method includes receiving a user's selection of a design type.

[0280] The method further includes, at 6606, presenting a user interface with multiple selectable content items. These multiple selectable content items include content used as design elements in a design. Presenting the selectable content items to the user interface may include, for example, providing an option to access content stored locally or remotely on a device operated by the user. Examples of content include images or videos stored on the device, which may be, for example, a mobile device with an integrated camera for forming images. At 6608, the method includes receiving a user's selection of one or more design elements from the selectable content. The selection may be limited to a certain number of design elements. The selection may be based on the number of corresponding design elements in an associated set of templates. For example, if all templates associated with the selected design type include a single design element with an image content role, the user may be offered the option to select only one image. Conversely, if one or more templates have one design element with an image content role, and one or more templates have two design elements with image content roles, the user interface may allow the user to select one or two images.

[0281] Based on the user selection received at 6604 and 6608, the method includes, at 6610, identifying and rendering one or more templates from a plurality of sets of templates. Identifying a template may include: a compatible template from a set of templates that matches the selected design type. In a specific embodiment, a compatible template is a template that has been, or can be, modified by the system to have the same number of design elements having content roles that match the selected content. In a specific embodiment, the compatible template is populated with the selected content for rendering.

[0282] In embodiments where two or more templates are presented at 6610, the method includes: at 6612, receiving a selection of one of the templates. If the template selected at 6610 is not populated with the selected content, the template is populated and presented. In response to the selection, the method may include: at 6614, providing a user interface for further processing of the design. This further processing may include processes for editing the design, exporting (e.g., posting) the design, and / or saving the design. This further processing may include processes for transferring content from the selected template to another template, for example by following... Figure 6 branches or Figure 65 One of the processes.

[0283] Figure 67 and Figure 68 User story 6701 is shown, in which the system provides a user interface to help assign content roles. For example, a web front-end can generate a graphical user interface (GUI) for a graphic design website as described above to... Figures 67 to 68 The GUI is included. GUI 6702 includes a design display area 6704 in which design 6706 can be displayed. Design 6706 can be generated using any suitable method, including those described herein. In this example, design 6706 includes three design elements 6708, 6710, and 6712, which in this case are all text elements. In other examples, images or other design elements may be included. GUI 6702 includes an optional icon 6714. In this example, optional icon 6714 is "Publish to Marketplace". User story 6701 is a user story in which the design has previously been instructed to be designed to form Posts. In other embodiments, users can select a template type for the design after entering one or more design elements.

[0284] In response to or following the selection of optional icon 6714, the implementation system (e.g. Figure 1The system determines that a content role can be added. This determination may be based on, for example, determining that one or more of design elements 6708, 6710, and 6712 do not define a content role, and that the design template includes at least one content role that is not currently assigned to a design element in design 6706.

[0285] In response to determining that a content role needs to be added, GUI 6714 is displayed. GUI 6714 includes user interface elements configured to be operated by the user to add content roles to one or more of design elements 6708, 6710, and 6712. In the example shown, the design template type includes content types for a preface, title, and subtitle. The content types in the template can be displayed in the template display area 6716. In some embodiments, the system suggests content roles for one or more, up to all, of design elements 6708, 6710, and 6712. The system's determination of which content roles to suggest can be based on a heuristic approach to map possible correspondences. The heuristic approach may have already determined the suggestions for the preface and subtitle based on the relative size and positioning of design elements 6708, 6710, and 6712. Specifically, design element 6708 is suggested as the preface content type by icon 6718, and design element 6712 is suggested as the subtitle content type by icon 6720. Design elements with assigned content roles can be indicated by other indicators, in this example by a first color shading. No suggestion is made for design element 6710, and this is indicated by indicators in GUI 6714, in this example by icon 6722 and a second color shading of design element 6710 different from the first color shading. It should be understood that design element 6710 may have already been suggested as a title content type, but it has been omitted for illustrative purposes. Design elements in GUI 6714 can be selected to add or modify the content types assigned to them.

[0286] Now for reference Figure 68The user has selected design element 6710 from GUI 6714. The system displays GUI 6802 with one or more indicators to indicate that design element 6710 has been selected. In the example shown, the indicators are resizing circles at the corners of design element 6710 and color changes at the border of design element 6710. Selector 6804 in GUI 6802 is configured to receive user input to identify or select a content role for a design element. In the example shown, selector 6804 is a drop-down menu that provides content role options. Content role options can include those displayed in the template display area 6716, such as including a title content role. Other content role options can also be included, such as title 1 shown in GUI 6802. GUI 6802 shows an updated screen display after the title content role of design element 6710 has been selected. At this point, all design elements are assigned content roles, as indicated by (previously displayed) icons 6718 and 6720 and (new) icon 6806. The instruction also includes displaying all design elements in an indicated color to show their assigned content roles. Users can select the next icon 6808 or a similar icon to continue the publishing process. In some embodiments, a progress indicator 6810 indicates progress toward publishing.

[0287] Methods and apparatuses that can implement one or more aspects of various features of this disclosure have been described with reference to the accompanying drawings. The drawings and related descriptions are provided to illustrate aspects and not to limit the scope of this disclosure. References to any particular aspect, aspect, or implementation are intended to indicate that a particular feature, structure, or characteristic described therein is included in at least one aspect, aspect, or implementation of this disclosure. However, various uses of the terms "aspect," "aspect," or "implementation" do not necessarily refer to the same single aspect, aspect, or implementation.

[0288] In a specific aspect, an apparatus includes a processor and a transmitter. The processor is configured to: receive user input during editing of a first design, indicating that a first design element of the first design has a first content role. The processor is also configured to generate a content signature of the first design. The content signature indicates that the first design element has the first content role. The processor is further configured to generate a second design based on a design template. Generating the second design includes: adding a third design element having the first content role to the second design based on determining that the design template includes a second design element having the first content role. The processor is further configured to update the second design by applying the content signature to the second design. Applying the content signature to the second design includes: transferring content from the first design element to the third design element. The processor is also configured to generate a graphical user interface (GUI) including an image of the second design. The transmitter is configured to send the GUI to a client device.

[0289] In another specific aspect, a method includes: during the editing of a first design at a device, receiving user input indicating that a first design element of the first design has a first content role. The method also includes generating a content signature for the first design at the device. The content signature indicates that the first design element has the first content role. The method further includes generating a second design at the device based on a design template. Generating the second design includes: adding a third design element having the first content role to the second design based on a determined design template that includes a second design element having the first content role. The method also includes updating the second design by applying the content signature to the second design. Applying the content signature to the second design includes: transferring content from the first design element to the third design element. The method also includes generating a graphical user interface (GUI) at the design site that includes an image of the second design. The method further includes sending the GUI from the device to a client device.

[0290] In another specific aspect, a computer-readable storage device stores instructions that, when executed by a processor, cause the processor to perform operations including: receiving user input indicating that a first design element of the first design has a first content role during the editing of a first design at the device. The operations also include generating a content signature of the first design. The content signature indicates that the first design element has the first content role. The operations further include generating a second design based on a design template. The operations also include updating the second design by applying the content signature to the second design. Applying the content signature to the second design includes transferring content from the first design element to a third design element. The operations also include generating a graphical user interface (GUI) including an image of the second design. The operations also include sending the GUI to a client device.

[0291] In another specific aspect, a method includes: generating a graphical user interface (GUI) for creating or editing a design, the GUI including a first design template, the first design template including a first plurality of design elements for creating the design, the first design template having a set of associated content roles. The GUI also includes a content role selector configured to: receive selections from the set of content roles, and associate a first design element of the design template, or a first design created based on the design template, with the selected content role. The method further includes: maintaining a second design template different from the first design template, the second design template having at least one design element associated with the selected content role, and / or maintaining a second design, the second design having at least one design element associated with the selected content role. The method further includes: identifying corresponding design elements within two or more of the first template, the second template, the first design, and the second design based on the association between the selected content role and the design element.

[0292] In another specific aspect, a processing system is provided, configured to perform the method in the preceding paragraph. In yet another specific aspect, a computer-readable storage device is provided that stores instructions, which, when executed by a processor, cause the processor to perform operations including performing the method in the preceding paragraph.

[0293] In the foregoing description, specific details have been set forth in order to provide a thorough understanding of this disclosure. However, those skilled in the art will understand that this disclosure can be practiced without these specific details. Well-known structures and techniques may not be shown in detail to avoid obscuring the aspects described. For example, algorithms may be shown in block diagrams.

[0294] It should be noted that aspects can be described as processes depicted as flowcharts, schematic diagrams, structural diagrams, or block diagrams. Although a flowchart can describe operations as a sequential process, many of these operations can be performed in parallel or at least partially simultaneously. Furthermore, the order of operations can be rearranged. A process terminates when its operations are completed. A process can correspond to a method, function, program, subroutine, subroutines, etc. When a process corresponds to a function, its termination corresponds to the function returning to the calling function or the main function.

[0295] Furthermore, a storage device can represent one or more devices for storing data, including but not limited to random access memory (RAM), flash memory, read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), registers, hard disks, removable disks, disk-based memories (e.g., optical disc read-only memory (CD-ROM)), flash memory devices, and / or other computer-readable or processor-readable media for storing information. As used herein, a computer-readable or processor-readable storage medium / device is not a signal.

[0296] Furthermore, aspects can be implemented through hardware, software, firmware, middleware, microcode, or any combination thereof. When implemented in software, firmware, middleware, or microcode, the program code or code segment that performs the task can be stored in memory or other storage devices. One or more processors can execute the task serially, distributedly, simultaneously, or in parallel. In some examples, virtual computer systems can be constructed to implement one or more methods or functions as described herein. A code segment can represent a program, function, subroutine, routine, subroutine, module, software package, class, or combination of instructions, data structures, or program statements. A code segment can be coupled to another code segment or hardware circuit by passing and / or receiving information, data, arguments, parameters, or memory contents. Information, parameters, data, etc., can be passed, forwarded, or transmitted in appropriate ways, including memory sharing, message passing, token passing, network transmission, etc.

[0297] Although this disclosure has been described with a degree of specificity, it should be understood that this disclosure is made by way of example and other versions are possible. Since various changes can be made to the above description without departing from the scope of this disclosure, everything contained in the above description or shown in the accompanying drawings should be illustrative and not intended to be limiting.

[0298] All features disclosed in the specification (including the claims, abstract, and drawings) and all steps in any disclosed method or process may be combined in any combination, unless at least some of these features and / or steps are mutually exclusive combinations. Unless otherwise expressly stated, each feature disclosed in the specification (including the claims, abstract, and drawings) may be replaced by an alternative feature for the same, equivalent, or similar purpose.

[0299] Therefore, unless otherwise expressly stated, each disclosed feature is merely one example of a general series of equivalent or similar features. The subject matter disclosed above is to be regarded as illustrative rather than restrictive, and the appended claims are intended to cover all such modifications, alterations, and other aspects falling within the true scope of this disclosure. Therefore, to the maximum extent permitted by law, the scope of this disclosure shall be determined by the broadest permissible interpretation of the following claims and their equivalents, and shall not be bound or limited by the foregoing description.

Claims

1. An apparatus for generating designs based on a design template and other designs, comprising: The processor is configured as follows: During the editing of a first design generated using a first design template, user input is received. The first design includes a first design element of type one of image element, text element, or fill element and which has not been assigned a content role. The user input assigns a first content role to the first design element of the first design. The assignment is performed by the user and is not part of the first design template. The first content role includes a content role related to style or a content role related to information structure. Maintain the design element information of the first design element in the document database, the design element information including both type and assigned content role; Generate a content signature for the first design, the content signature including design element information, the design element information including information indicating that the first design element has the first content role; Generate a second design based on a second design template that is different from the first design template and includes a second design element having the first content role, wherein generating the second design includes: in response to determining based on the content signature that the second design template needs additional design elements having the first content role, adding a third design element having the first content role to the second design; The second design is updated by applying the content signature to the second design, wherein applying the content signature to the second design includes: transferring content from the first design element to the third design element; and Generate a graphical user interface (GUI) including the image of the second design; and A transmitter configured to send the GUI to a client device.

2. The apparatus of claim 1, wherein the design element information indicates whether the first design element includes a text element, a foreground image, or a background image.

3. The apparatus of claim 1 or 2, wherein the processor is further configured to: transfer content from the first design element to the third design element by updating the third design element based on first text indicated by the first design element or based on a first image indicated by the first design element.

4. The apparatus of claim 1, wherein the processor is further configured to: determine the first content role of the second design element based on at least one of the following: width, height, text conversion attribute, number of text characters, number of text lines, relative position, relative font size, relative width, number of common element characters and template description, position ranking, element group members, and element count.

5. The apparatus of claim 1, wherein the processor is further configured to: Training machine learning models to identify the content roles of design elements across multiple test templates; and The first content role of the second design element is determined by applying the machine learning model to the second design template.

6. The apparatus of claim 1, wherein the processor is further configured to: Determining that the content signature indicates that a first specific design element having a second content role is included in the first design; and The first specific design element is added to the second design, at least in part, based on the determination that the second design does not include any design element having the second content role.

7. The apparatus of claim 1, wherein the processor is further configured to: add the first specific design element to the second design in response to determining that the content signature indicates that the first specific design element is included in the first design and that the first specific design element is not associated with a content role.

8. The apparatus of claim 1, wherein the processor is further configured to: The content signature indicates that a first specific design element is included in the first design; Determine the first ranking of the first specific design element in the first design; Determine whether a second specific design element is included in the second design; as well as Determine the second ranking of the second specific design element. Applying the content signature to the second design includes: at least in part based on determining that the first ranking matches the second ranking, transferring the content of the first specific design element to the second specific design element.

9. The apparatus of claim 1, wherein the first design element comprises a first text element, wherein the second design element comprises a second text element, and wherein the processor is further configured to: The second delimiting box of the second text element is determined to have a second size, and Determine the font size such that the third bounding box of the third design element has a first size that is less than or equal to the second size, and The third design element is updated to have the determined font size.

10. The apparatus of claim 1, wherein the processor is further configured to: add the third design element to a second set of design elements of the second design based on determining that the second design element is included in a first set of design elements of the second design template.

11. The apparatus of claim 1, wherein the processor is further configured to: add the third design element as a foreground element to a second group of design elements of the second design as a foreground element based on determining that the second design element is included as a foreground element in a first group of design elements of the second design template.

12. The apparatus of claim 11, wherein the processor is further configured to: Based on the determination that the second design element has a second width, the third design element is set to have the second width; and Based on the determination that the second design element is at a second distance from the second specific design element of the second design template, the third design element is positioned at a second distance from the first specific design element of the second design. The first specific design element is associated with the second specific design element.

13. The apparatus of claim 1, wherein the processor is further configured to: add the third design element as a background element to a second group of design elements of the second design based on determining that the second design element is included as a background element in a first group of design elements of the second design template.

14. The apparatus of claim 13, wherein the second set of design elements comprises a plurality of foreground elements, and wherein the first size of the bounding box of the third design element is based on the size of the bounding box of the foreground elements.

15. The apparatus of claim 1, wherein the processor is configured to, in response to determining a second design element having the first content role based on the content signature, add the third design element having the first content role to the second design to include in the second design a design element having the first content role that was not mapped in the first design.

16. A method for generating designs based on a design template and other designs, comprising: During the editing of a first design generated using a first design template at the device, user input is received. The first design includes a first design element of type one of image element, text element, or fill element and which has not been assigned a content role. The user input assigns a first content role to the first design element of the first design. The assignment is performed by the user and is not part of the first design template. The first content role includes a content role related to style or a content role related to information structure. Maintain the design element information of the first design element in the document database, the design element information including both type and assigned content role; A content signature of the first design is generated at the device, the content signature including design element information, the design element information including information indicating that the first design element has the first content role; At the device, a second design is generated based on a second design template that is different from the first design template and includes a second design element having the first content role, wherein generating the second design includes: in response to determining based on the content signature that the second design template requires additional design elements having the first content role, adding a third design element having the first content role to the second design; The second design is updated by applying the content signature to the second design, wherein applying the content signature to the second design includes: transferring content from the first design element to the third design element; A graphical user interface (GUI) including an image of the second design is generated at the device; and The GUI is sent from the device to the client device.

17. The method of claim 16, wherein transferring content from the first design element to the third design element comprises: The third design element is updated based on the first image indicated by the first design element.

18. The method of claim 17, further comprising: The device receives user input from the client device indicating the selection of the image. as well as In response to receiving the user input indicating a selection of the image, the first design is replaced with the second design in the data storage device.

19. The method of claim 17, further comprising: The device receives user input from the client device indicating the selection of the image. as well as In response to receiving the user input indicating a selection of the image, a second GUI including one or more fields is generated to edit the second design; as well as The second GUI is provided from the client device.

20. The method of claim 16, wherein in response to determining the second design element having the first content role based on the content signature, the third design element having the first content role is added to the second design to include in the second design the design element having the first content role that was not mapped in the first design.

21. A computer-readable storage device for storing instructions, which, when executed by one or more processors, cause the one or more processors to perform operations including: During the editing of a first design generated using a first design template at the device, user input is received. The first design includes a first design element of type one of image element, text element, or fill element and which has not been assigned a content role. The user input assigns a first content role to the first design element of the first design. The assignment is performed by the user and is not part of the first design template. The first content role includes a content role related to style or a content role related to information structure. Maintain the design element information of the first design element in the document database, the design element information including both type and assigned content role; Generate a content signature for the first design, the content signature including design element information, the design element information including information indicating that the first design element has the first content role; Generate a second design based on a second design template that is different from the first design template and includes a second design element having the first content role, wherein generating the second design includes: in response to determining based on the content signature that the second design template needs additional design elements having the first content role, adding a third design element having the first content role to the second design; The second design is updated by applying the content signature to the second design, wherein applying the content signature to the second design includes: transferring content from the first design element to the third design element; Generate a graphical user interface (GUI) including the image of the second design; and The GUI is sent to the client device.

22. The computer-readable storage device of claim 21, wherein content from the first design element is transferred to the third design element based at least in part on determining that the content signature indicates that the first design element has been edited in the first design.

23. The computer-readable storage device of claim 21, wherein in response to determining the second design element having the first content role based on the content signature, the third design element having the first content role is added to the second design to include in the second design the design element having the first content role that was not mapped in the first design.

Images