Tracking and comparing changes in design interface

Abstract

The invention relates to tracking and comparing changes in a design interface. A network computer provides interactive graphics design system instructions for execution at a user computing device. The user computing device determines a first set of differences between the design interface of the first version and the design interface of the second version based on a comparison of the first set of workspace data of the design interface of the first version and the second set of workspace data of the design interface of the second version, and rendering the first version of the design interface on the canvas for display to a user at the user computing device. The user interface also renders, within the canvas, one or more visual representations of a first set of differences between the first version of the design interface and the second version of the design interface.

Description

[0001] Cross Reference to Related Applications This application claims the benefit of priority to: (i) U.S. Patent Application No. 18 / 737,843, filed June 7, 2024, and (ii) U.S. Provisional Patent Application No. 63 / 472,199, filed June 9, 2023; the priority applications are hereby incorporated by reference in their entirety. TECHNICAL FIELD

[0002] Examples described herein relate to networked computer systems, and more specifically, to tracking and comparing design changes in an interactive graphical design system. BACKGROUND

[0003] Software design tools come in many forms and applications. For example, in the field of application user interface design, software design tools require a designer to combine functional aspects of a program with aesthetics and even legal requirements to ultimately produce a series of pages that form the application user interface. For a given application, a designer often has many goals and requirements that are difficult to track. BRIEF DESCRIPTION OF DRAWINGS

[0004] Figure 1A An interactive graphical design system for a user’s computing device is shown in accordance with one or more examples.

[0005] Figure 1B A networked computing system for implementing an interactive graphical design system on a user computing device is shown in accordance with one or more examples.

[0006] Figure 1C A networked computing system for implementing an interactive graphical design system for multiple users in a collaborative networked platform is shown in accordance with one or more examples.

[0007] Figures 2A-2D An example user interface containing a visual representation of differences between two versions of a design interface is shown in accordance with one or more examples.

[0008] Figure 3 A process for tracking and comparing changes in a design interface is shown in accordance with one or more examples.

[0009] Figure 4A A process for generating an entry point to a compare changes interface is shown in accordance with one or more examples.

[0010] Figure 4B A process for generating an entry point to a compare changes interface is shown in accordance with one or more examples.

[0011] Figure 5 A computer system on which one or more embodiments can be implemented is shown.

[0012] Figure 6 A user computing device that can be used with one or more of the described examples is shown. DETAILED DESCRIPTION

[0013] Examples include computer systems that are capable of running to implement an interactive graphical design system that enables users to track and compare changes to a design interface. In examples, the computer systems are configured to implement an interactive graphical design system that is oriented toward design personnel, such as user interface designers (“UI designers”), web page designers, and web page developers. Among other advantages, the described examples enable such users to compare changes to a design interface over time caused by updates to the design interface by the same user or different users between different versions of the design interface. The different versions of the design interface can be accessed and / or modified independently of one another and can have separate data, files, addresses, and / or other attributes. Moreover, the examples also enable such users to view the design changes by highlighting and / or otherwise indicating the design changes in a visual manner “in context” in a canvas that is a background to the design interface.

[0014] Examples can be deployed in a collaborative environment and can simplify the management of large design systems and improve the efficient operation of computers in generating, updating versions of a design interface, and navigating between versions. For example, conventional design tools can provide a version history that includes a timeline and / or a list of different design versions. To attempt to determine changes made between an old version of a design and a new version of a design, a user can repeatedly switch between viewing the old version and viewing the new version in the conventional design tool. In performing this switching operation, the conventional design tool can consume resources in retrieving a given design version from storage, displaying the design version, and / or processing interactions between the user and the displayed design (e.g., zooming, scrolling, searching, editing, etc.). However, the user can not be able to detect subtle changes (e.g., minor changes in style, size, etc.) between versions through this switching because the changes are not highlighted or otherwise visually indicated. In contrast, the disclosed embodiments efficiently determine differences between two or more versions of a design interface by comparing hierarchies related to the versions of the design interface and displaying visual representations of the differences in a canvas that is populated with the design interface. These visual representations can be used to quickly detect, view, comment on, accept, reject, and / or otherwise handle changes made to the design interface between the two versions without the additional time and resource overhead of switching between the two versions views.

[0015] According to some examples, a computing device operates to receive interactive graphical design system instructions and workspace data describing one or more design interfaces. The computing device determines a first set of differences between a first version of a design interface and a second version of the design interface based on a comparison of a first set of workspace data for the first version of the design interface and a second set of workspace data for the second version of the design interface. The computing device renders the first version of the design interface on a canvas for display to a user at a user computing device. The computing device renders one or more visual representations of the first set of differences between the first version of the design interface and the second version of the design interface on the canvas.

[0016] Further, in some examples, a networked computer system includes a memory resource storing a set of instructions and one or more processors operable to communicate the set of instructions to a plurality of user devices. The set of instructions can be communicated to a user computing device and executed at the user computing device to render a version of a design interface on a canvas. A user can edit the version of the design interface by user input indicating any of a plurality of different input actions. The set of instructions can be executed on the computing device to cause each computing device to determine one or more input actions to perform based on the user input. The instructions can also cause the user computing device to modify the version of the design interface, create a new version of the design interface, generate a visual representation of a difference between the version of the design interface and another version of the design interface, and / or generate other output based on the one or more input actions.

[0017] In some examples, at least for a first computing device, the instructions can be executed to cause the computing device to determine a first set of differences between a first version of a design interface and a second version of the design interface based on a comparison of a first set of workspace data for the first version of the design interface and a second set of workspace data for the second version of the design interface. The computing device renders the first version of the design interface on a canvas for display to a user at a user computing device. The computing device renders one or more visual representations of the first set of differences between the first version of the design interface and the second version of the design interface within the canvas.

[0018] One or more embodiments described herein provide methods, techniques, and actions for execution by a computing device, performed programmatically or as computer-implemented methods. As used in this paper, “programmatically” refers to a manner by which code or computer-executable instructions are used. These instructions can be stored in one or more memory resources of the computing device. Steps performed programmatically can or can not be automatic.

[0019] One or more embodiments described herein can be implemented using program modules, engines, or components. Program modules, engines, or components can include a portion of a program, a program, a subroutine, or a software or hardware component that can perform one or more of the tasks or functions described. As used herein, a module or component can exist on the hardware component independently of other modules or components. Alternatively, a module or component can be a shared entity or process of other modules, programs, or machines.

[0020] Some embodiments described herein generally require the use of computing devices, including processing resources and memory resources. For example, one or more embodiments described herein can be implemented in whole or in part on a computing device such as a server, a desktop computer, a cellular phone or smart phone, a tablet, a wearable electronic device, a laptop computer, a printer, a digital picture frame, a network device (e.g., a router), and a tablet. Memory, processing, and network resources can be used in conjunction with the establishment, use, or performance of any embodiment described herein, including in conjunction with the execution of any method or the implementation of any system.

[0021] Furthermore, one or more embodiments described herein can be implemented by use of instructions that are executable by one or more processors. These instructions can be carried by a computer-readable medium. The machines shown in, or described by, the following figures provide examples of processing resources and computer-readable media on which instructions of embodiments of the application can be carried and / or executed. Specifically, numerous machines shown by embodiments of the application include one or more processors and various forms of memory used to store data and instructions. Examples of computer-readable media include persistent memory storage devices, such as hard drives on personal computers or servers. Examples of other computer storage media include portable storage units, such as CD or DVD units, flash memory (such as carried on smartphones, multi-function devices, and / or tablet computers), and magnetic memory. Computers, terminals, network-enabled devices (e.g., mobile devices such as cell phones) are all examples of machines and devices that utilize processors, memory, and instructions stored on computer-readable media. Furthermore, embodiments can be implemented in the form of computer programs or in the form of computer-usable carrier media capable of carrying such programs.

[0022] System Description Figure 1AAn interactive graphical design system (IGDS) 100 for a user's computing device is shown in accordance with one or more examples. The IGDS 100 can be implemented in any of a variety of different computing environments. For example, in some variations, the IGDS 100 can be implemented as a client-side application running on a user computing device 10 to provide functionality as described in the various examples. In another example, the IGDS 100 can be implemented as a web application running in a browser application 80 as described below. In addition or as an alternative, the IGDS 100 can also be implemented as a native application developed for use on a particular platform such as, but not limited to, LINUX, ANDROID, WINDOWS, or other platforms. In addition or as an alternative, the IGDS 100 can also be implemented as a distributed system such that the processes described in the various examples can be executed on network computers (e.g., servers) and user devices 10.

[0023] In accordance with examples, the IGDS 100 can be implemented on a user computing device 10 to enable a respective user to create, view, and / or modify various types of interface designs using graphical elements. The interface designs can include any content layout and / or interactive elements such as, but not limited to, web pages. The IGDS 100 can include processes that are executed as a browser application 80 installed on the computing device 10 or that are executed through the browser application 80.

[0024] As used herein, the term "browser application" refers to any program that accesses web content over a network such as information resources over the Internet using the hypertext transfer protocol (HTTP). In some examples, the browser application 80 is a commercially available browser application such as, but not limited to, GOOGLE CHROME (developed by GOOGLE, INC.), SAFARI (developed by APPLE, INC.), and EDGE / INTERNET EXPLORER (developed by MICROSOFT CORPORATION). As described in the various examples, the browser application 80 can execute scripts, code, and / or other logic ("program components") to implement functionality of the IGDS 100. Further, in some variations, the IGDS 100 can be implemented as part of a web service in which the browser application 80 communicates with one or more remote computers (e.g., servers for the web service) to execute processes of the IGDS 100.

[0025] The browser application 80 can retrieve program resources from a network site to implement some or all of the IGDS 100. Additionally or alternatively, the browser application 80 can also retrieve some or all of the program resources from a local source (e.g., local memory located on the computing device 10). The browser application 80 can also access various types of data sets to provide the IGDS 100. These data sets can correspond to files and / or libraries that can be stored remotely (e.g., on a server, in association with an account, etc.) or can be stored locally.

[0026] The IGDS 100 can be implemented as web code that executes in the browser application 80. The web code can include, but is not limited to, hypertext markup language (HTML), JAVASCRIPT, cascading style sheets (CSS), other scripts, and / or other embedded code that is downloaded by the browser application 80 from a network site. For example, the browser application 80 can execute web code embedded in a web page, causing the IGDS 100 to execute in the browser application 80 on the user computer device 10. The web code can also cause the browser application 80 to execute and / or retrieve other scripts and program resources (e.g., libraries) from a network site and / or other local or remote locations. To illustrate, the browser application 80 can include JAVASCRIPT embedded in an HTML resource (e.g., a web page constructed according to a standard published by the W3C or WHATWG consortium, such as HTML 5.0 or other version) that is executed by the browser application 80. In some examples, the rendering engine 120 and / or other components can utilize graphics processing unit (GPU) acceleration logic, such as that provided by web graphics library (WebGL) programs that execute graphics library shader language (GLSL) programs running on a GPU.

[0027] A user of the computing device 10 can access a network site by operating the browser application 80 from which program resources are retrieved and executed to implement the IGDS 100. In this way, the user can initialize a session to implement the IGDS 100 to create, view, and / or modify a design interface. In some embodiments, the IGDS 100 includes a program interface 102, an input interface 118, and a rendering engine 120. The program interface 102 can contain one or more processes that are executed to access and retrieve program resources from local and / or remote sources.

[0028] In some embodiments, the program interface 102 can generate a canvas 122 (e.g., an HTML 5.0 canvas) using program resources associated with the browser application 80. In addition or in the alternative, the program interface 102 can trigger or cause the generation of a canvas 122 using program resources and data sets (e.g., canvas parameters) retrieved from a local (e.g., memory) or remote source (e.g., a web service).

[0029] The program interface 102 can also retrieve program resources including an application framework for use with the canvas 122. The application framework can include data sets that define or configure a set of interactive graphical tools integrated with the canvas 122. For example, the interactive graphical tools can include an input interface 118 that enables a user to provide input for creating and / or editing a design interface.

[0030] According to some examples, the input interface 118 can be implemented as a functional layer integrated with the canvas 122 to detect and interpret user input, such as the input interface 118. In one or more embodiments, the input interface 118 includes a user interface that, for example, can use a reference to the canvas 122 to identify a screen location of a user input (e.g., a “click”). In addition, the input interface 118 can interpret a user’s input action according to a location of the detected input (e.g., whether the location of the input indicates a selection of a tool, an object rendered on the canvas, or a region of the canvas), a frequency of detected inputs within a given time period (e.g., a double-click), and / or a start and end location of an input or series of inputs (e.g., a start and end location of a click-and-drag), as well as various other input types that a user can specify through one or more input devices (e.g., a right-click, a screen click, etc.). In this way, the input interface 118 can, for example, interpret a series of inputs as a selection of a design tool (e.g., based on the shape of the location(s) of the inputs) and inputs to define properties (e.g., dimensions) of the selected shape.

[0031] In addition, the program interface 102 can be used to retrieve program resources and data sets containing the active workspace data 110 from a local source or a remote source. As used herein, the term “workspace data” refers to data that describes a design interface that can be loaded by the IGDS 100; the term “design interface under edit” refers to a design interface that has been loaded into the IGDS 100; and the term “active workspace data” refers to workspace data that describes a design interface under edit (DIUE) that has been loaded into the IGDS 100.

[0032] The retrieved dataset can include one or more pages that include design elements that collectively make up a design interface, or that include a design interface being edited. For example, the program interface 102 can be used to retrieve one or more files that store the active workspace data 110. This active workspace data 110 can also include one or more data structure representations that collectively define the DIUE 125. For example, the active workspace data can include multiple versions of a design interface (e.g., versions 126 and 128). When a certain design interface version is selected as the DIUE 125, the program interface 102 can retrieve and load the corresponding version of the workspace data as the active workspace data 110.

[0033] The IGDS 100 can also load and / or request additional datasets associated with the active workspace. As an example, the program interface 102 can retrieve one or more types of profile information (e.g., profile information 109 in Figure 1B from local storage or other sources (e.g., the web service 152 in Figure 1B user profile information that identifies past activities of a user of the computing device 10 when using the IGDS 100. The profile information can identify, for example, the type of input (or action) of the user on the active workspace pages, or more generally, the input actions of the user over a previous time interval. In some variations, the profile information can also identify history or context information for individual design interfaces associated with the profile.

[0034] The rendering engine 120 renders the DIUE 125 on the canvas 122 as described by the active workspace data 110. For example, when a given version of the design interface is selected as the DIUE 125, the rendering engine 120 renders the design interface as described by the corresponding workspace data version that was loaded as the active workspace data 110. The DIUE 125 includes the graphical elements and their respective attributes as described by the active workspace data 110. The user can edit the DIUE 125 using the input interface 118. Additionally or alternatively, the rendering engine 120 can also generate a blank page for the canvas 122, from which the user can generate the DIUE 125 using the input interface 118. After rendering, the DIUE 125 can include graphical elements such as a background and / or a set of objects (e.g., shapes, text, images, program elements), and attributes of the individual graphical elements. Each attribute of a graphical element can include an attribute type and an attribute value. For objects, the attribute types include shape, size (or dimensions), layer, type, color, line thickness, font color, font family, font size, font style, and / or other visual characteristics. Depending on implementation details, these attributes reflect attributes of two-dimensional or three-dimensional designs. In this way, the attribute values of individual objects can define visual characteristics such as size, color, positioning, layering, and content of elements that are rendered as part of the DIUE 125. The workspace data (e.g., the active workspace data 110 corresponding to the DIUE 125) can describe one or more objects that belong to the design interface.

[0035] Individual design elements can also be defined according to desired runtime behavior. For example, some objects can be defined to have static or dynamic runtime behavior. Attributes of dynamic objects can change in response to predefined runtime events generated by the underlying application that will integrate the DIUE 125. Further, some objects can be associated with logic that defines the object as a trigger for rendering or altering other objects, such as by implementing a sequence or workflow. Still further, other objects can be associated with logic that enables the design element to conditionally behave according to when it is rendered and / or the corresponding configuration or appearance at the time of rendering. Further still, objects can also be defined to be interactive, where one or more attributes of the object can change based on user input during application runtime.

[0036] Input interface 118 can process at least some user input to determine input information 127, which indicates (i) an input action type (e.g., shape selection, object selection, size input, color selection), (ii) an object affected by the input action (e.g., an object being resized), (iii) a desired property to be changed by the input action, and / or (iv) a desired value for the property to be changed. Program interface 102 can receive input information 127, and program interface 102 can implement the changes indicated by input information 127 to update active workspace data 110. Rendering engine 120 can update canvas 122 to reflect the changes to the affected objects in DIUE 125. For example, when a given version of the design interface is selected as DIUE 125, program interface 102 updates the active workspace data 110 for the corresponding version, and rendering engine 120 updates canvas 122 to reflect changes to the design interface indicated by input information 127.

[0037] Tracking changes to the design interface As the design interface is updated over time, different versions of the design interface can be used to depict, track, and / or revert changes to the design interface. For example, IGDS 100 can automatically generate new versions of the design interface (e.g., “checkpoints”) after a period of activity in which the design interface is not edited. In another example, a user can manually create a new version of the design interface after making a series of changes to the design interface. In a third example, a user can view and / or restore an older version of the design interface in order to edit a layer, export an asset, and / or perform other actions. Actions taken with respect to a given version of the design interface can be performed safely (e.g., to implement a proposed design change) without affecting other versions of the design interface.

[0038] In some embodiments, a version history of the design interface orders different versions of the design interface by creation time, creator, name, and / or other properties. The version history can be displayed in a sidebar next to canvas 122 provided by IGDS 100, and / or in another portion of the user interface provided by IGDS 100. A user can use input interface 118 in conjunction with the displayed version history to view versions of the design interface, restore a previous version of the design interface, copy a version, share a version link with other users, create a new version of the design interface, add or modify a name and / or description of a version, delete a version and / or metadata associated with the version, and / or perform other actions related to the version history. For example, input interface 118 can provide menus, buttons, toggle switches, and / or other user interface elements that allow a user to perform actions related to the version history of the design interface.

[0039] When a new version of a design interface is created, IGDS 100 obtains the corresponding version of workspace data for that new version as active workspace data 110. IGDS 100 can generate active workspace data 110 based on previously retrieved version of active workspace data 110 and changes made to that previous version of active workspace data 110 on user computing device 10. As an alternative or in addition, IGDS 100 can obtain active workspace data 110 from a network computer system (e.g., network computer system 150, 50) that generates active workspace data 110 from a corresponding set of workspace data 163 at that network computer system. For example, IGDS 100 can request active workspace data 163 from service component 160 of network computer system 150 and maintain a user-side copy of active workspace data 163.

[0040] In some examples, IGDS 100 is configured to determine a set of differences 130 between two versions 126 and 128 of a design interface. As will be described in further detail below, these differences 130 can be determined by comparing the hierarchies defined by the respective workspace data sets of versions 126 and 128. Differences 130 can also be associated with“chunks” that represent logical groupings under a hierarchy node. Visual representations of these chunked differences 130 can also be rendered in canvas 122 so that a user can easily locate, track, and / or compare changes made between versions 126 and 128 of a design interface.

[0041] Network computing system for implementing IGDS Figure 1B A network computer system for implementing IGDS 100 on a user computing device is shown in accordance with one or more examples. Network computer system 150 can be implemented using one or more servers that communicate with user computing devices over one or more networks. In some examples, network computer system 150 performs operations to enable IGDS 100 to be implemented on user computing device 10.

[0042] In some variations, the network computer system 150 provides a network service 152 to support one or more user computing devices, including the user computing device 10 using the browser application 80, using the IGDS 100. The network computer system 150 can include a site manager 158 that manages a website at which a set of Web resources 155 (e.g., web pages, Web code, and / or other Web resources) can be accessed by site visitors. The Web resources 155 can include instructions, such as scripts or other logic, that are executable by a browser or Web component of a user computing device. In some variations, once the browser application 80 accesses and downloads the Web resources 155, the browser application 80 executes IGDS instructions 157 to implement functionality as described with respect to some examples of Figure 1A

[0043] In some examples, when the IGDS instructions 157 are executed in the browser application 80, the IGDS instructions 157 initialize one or more processes of the program interface 102, causing the IGDS 100 to retrieve additional program resources and datasets to implement functionality described herein through one or more examples. The Web resources 155 can embed logic (e.g., JAVASCRIPT code) including, for example, GPU-accelerated logic into HTML pages for download by a user’s computing device. The program interface 102 can be triggered to retrieve additional program resources and datasets from, for example, the network service 152 and / or from local resources of the computing device 10. For example, some components of the IGDS 100 can be implemented through web pages that can be downloaded to the user computing device 10 upon completion of authentication and / or after the user performs additional actions (e.g., downloads one or more pages of a workspace associated with an account identifier). Thus, in the described one or more examples, the network computer system 150 can communicate IGDS instructions 157 to the user computing device 10 through a combination of network communications, where the IGDS instructions 157 are received and executed by the browser application 80.

[0044] ​Upon accessing a website, the browser application 80 can pass the account identifier to the service component 160 either automatically (e.g., through saved credentials) or through manual entry. In some examples, the browser application 80 can also pass one or more additional identifiers associated with the user identifier. Additionally, in some examples, the service component 160 can retrieve profile information 109 from the user profile store 166 using the user or account identifier of the user identifier. As an addition or variation, the profile information 109 of the user can be determined and stored locally on the user computing device 10. The service component 160 can also determine the permission settings or role of the user associated with the account identifier based on the user credentials. The permission settings or role of the user can determine, for example, workspace data that the user can access. In some examples, the implementation of the rendering engine 120 on the user computing device 10 can be configured based at least in part on the role or settings of the user and / or the user's affiliation with a particular organization.

[0045] The service component 160 can also retrieve and provide workspace data describing a workspace associated with a user account or identifier from the workspace data store 164. For example, when a user selects a particular design interface to load into the IGDS 100, the program interface 102 can submit a request to the service component 160. The service component 160 can access the workspace data store 164 to retrieve the corresponding active workspace data 163 and provide the active workspace data 163 to the IGDS 100.

[0046] The active workspace data 163 can be associated with one or more versions 136 and 138 of a design interface. When a user selects a version of a design interface, the program interface 102 can submit a request to the service component 160, which retrieves the corresponding workspace data set from the workspace data store 164 and provides the workspace data set as active workspace data 163 to the IGDS 100. The IGDS 100 can maintain a user-side copy of the version of active workspace data 163 received (e.g., as active workspace data 110).

[0047] When a new version of a design interface is created, the user computing device 10 can create a corresponding set of user-side activity workspace data 110 and provide the set of user-side activity workspace data 110 to the network computer system 150 so that the network computer system 150 can process, store, update, and serve the activity workspace data 110. Alternatively or additionally, the program interface 102 can send a request to the service component 160 so that the service component 160 generates a corresponding set of activity workspace data 163 at the network computer system 150. The service component 160 can provide the generated activity workspace data 163 to the program interface 102 in response to the request. The IGDS 100 can maintain a user-side copy of the received activity workspace data 163 (e.g., as activity workspace data 110). The network computer system 150 can store the activity workspace data 163 in the workspace data store 164 and enable other users to access the activity workspace data 163.

[0048] In some examples, the input interface 118 includes a file explorer that allows users with corresponding permissions to access a design interface and / or a particular version of a design interface. Access control for a particular user to view, edit, or perform other operations on a given version of a design interface can be the same as or different from access control for other versions of a design interface.

[0049] In some examples, the IGDS 100 maintains user-side activity workspace data 110 corresponding to the activity workspace data 163 received from the network computer system 150. For example, the user-side activity workspace data 110 can initially be a copy of the received activity workspace data 163 stored in memory at the user computing device 10. In some examples, the IGDS 100 initializes the canvas 122 based on the activity workspace data 110 and renders a corresponding design interface under edit (DIUE) 125 onto the canvas 122. For example, the IGDS 100 can initialize an HTML5.0 canvas as a component of the browser application 80 and the rendering engine 120 can render a corresponding DIUE 125 onto the canvas 122.

[0050] In some examples, any changes made to the DIUE 125 using the IGDS 100 can also be updated in the user-side activity workspace data 110 stored on the computing device 10. In some embodiments, the program interface 102 sends change data 121 to the network computer system 150. The change data 121 reflects one or more changes made to the DIUE 125 in the IGDS 100 and to the user-side activity workspace data 110. For example, the program interface 102 can stream the change data 121 to the service component 160 periodically and / or in real-time as changes occur at the user computing device 10.

[0051] At the network computer system 150, the service component 160 can receive the change data 121 and in turn implement changes to the server-side activity workspace data 163 using the change data. In this way, the server-side activity workspace data 163 at the network computer system 150 can mirror (or be synchronized with) the user-side activity workspace data 110 on the user computing device. For example, the program interface 102 can stream changes as change data 121 to the service component 160 to synchronize the user-side activity workspace data 110 corresponding to the DIUE 125 and the server-side activity workspace data 163. This process can be repeated or performed continuously to keep the user-side activity workspace data 110 and the server-side activity workspace data 163 describing the DIUE 125 synchronized.

[0052] Collaborative network platform Figure 1C A network computer system for implementing an interactive graphic design system for multiple users on a collaborative network platform is shown in accordance with one or more examples. In Figure 1C one example, the collaborative network platform is implemented by a network computer system 50 that communicates with multiple user computing devices 11-12 over one or more networks (e.g., the World Wide Web) to implement interactive graphic design system (IGDS) instances 21-22 on the user computing devices 11-12. While Figure 1C two users are shown using the collaborative network platform, the examples described above allow the network computer system 50 to enable users using a larger number of user computing devices to collaborate on a design interface. Among other advantages, the collaborative network platform allows users to access a design interface more concurrently and to conveniently manipulate objects based on shared attribute values, while the network computer system 50 manages synchronization and access issues.

[0053] Referring to Figure 1CIt can be assumed that the user computing devices 11-12 are operated by users associated with a common account or an account associated with the same design interface. Each user computing device 11-12 implements an IGDS instance 21-22 to access the same design interface (e.g., DIUE 25) during respective sessions that overlap with each other. Thus, each of the user computing devices 11-12 can simultaneously access the same set of active workspace data 90, the respective program interfaces 41-42 of the IGDS instances 21-22 operate to establish respective communication channels (e.g., Web Socket connections) with the service component 60. For example, the service component 60 can load the active workspace data 90 corresponding to the DIUE 25 from the workspace data store 64 and transmit a copy of the active workspace data 90 to each user computing device 11-12 so that the respective rendering engines 31-32 can render the DIUE 25 corresponding to the active workspace data 90 simultaneously, such as during overlapping sessions.

[0054] In some examples, the IDGS instance 21 maintains user-side active workspace data 91 at the user computing device 11 upon receiving the active workspace data 90, and the IDGS instance 22 maintains user-side active workspace data 92 at the user computing device 12. The service component 60 can also maintain network-side active workspace data 90 of the DIUE 25 loaded by the IGDS instances 21-22.

[0055] In some examples, the network computer system 50 can continuously synchronize the active workspace data 90-92 corresponding to the DIUE 25 loaded in one or more IGDS instances 21-22 on the user computing devices 11-12. Thus, changes made by a user to the DIUE 25 on one user computing device 11 can be reflected in real-time on the DIUE 25 rendered on another user computing device 12. To illustrate, when a change is made to the DIUE 25 at one user computing device 11, the corresponding rendering engine 31 updates the corresponding canvas 71 and the corresponding program interface 41 updates the corresponding user-side active workspace data 91. The corresponding program interface 41 of the IGDS instance 21 sends change data 94 reflecting the change to the DIUE 25 to the service component 60. The service component 60 processes the change data 94 from the user computing device 11 and makes corresponding changes to the server-side active workspace data 90 using the change data 94. The service component 60 can also send remotely generated change data 95 (in the example provided, this data corresponds to or reflects the change data 94 received from the user computing device 11) to another user computing device 12 that has loaded the same DIUE 25, causing the corresponding IGDS instance 22 to update the DIUE 25, such as by causing the program interface 42 to update the corresponding user-side active workspace data 92 and causing the corresponding rendering engine 32 to update the corresponding canvas 72. In this way, the active workspace data 91-92 can be synchronized across any user computing devices 11-12 that are using the corresponding workspace data.

[0056] To facilitate synchronization of the active workspace data 90-92 on the user computing devices 11-12 and the network computer system 50, the network computer system 50 can implement a stream connector to merge data streams between the network computer system 50 and the user computing devices 11-12 that have loaded the same DIUE 25. For example, the stream connector can merge a first data stream between the user computing device 11 and the network computer system 50 with a second data stream between the user computing device 12 and the network computer system 50. In some embodiments, the stream connector can be implemented to enable each computing device 11-12 to make changes to the server-side active workspace data 90 without having to additionally replicate data that can otherwise be needed to process the data stream from each user computing device 11-12, respectively.

[0057] In addition, one or more sets of user-side active workspace data 91-92 can become out of sync with server-side active workspace data 90 over time. In such cases, the respective computing devices 11-12 can re-download some or all of the server-side active workspace data 90 to reinitiate their maintenance of the respective user-side active workspace data 91-92 and the rendering of the DIUE 25 on the respective canvases 71-72.

[0058] Comparing changes between different versions of a design interface Upon creating a new version of a design interface, the active workspace data 110 or 163 of the new version can be accessed and / or modified without affecting the workspace data of other versions (e.g., older versions) of the design interface. For example, the active workspace data 110 or 163 of the new version of the design interface can include a new set of data, files, addresses, version history, access permissions, and / or other independent attributes. Changes input by one or more users in the IGDS 100 to the new version of the design interface are reflected in the active workspace data 110 or 163.

[0059] In some embodiments, the IGDS 100 includes functionality for determining a set of differences 130 or 140 between different versions of a design interface. For example, the IGDS 100 can identify a set of differences 130 between the versions 126 and 128 of the design interface associated with the active workspace data 110 on the user computing device 10. As an alternative or in addition, the IGDS 100 can obtain the set of differences over a network, such as by sending a request to a network computer system (e.g., network computer system 150, 50) that supports the IGDS 100 on one or more user computing devices over the Internet. In such cases, the network computer system generates a set of differences 140 between the versions 136 and 138 of the design interface associated with the active workspace data 163 maintained by the network computer system.

[0060] Differences can be identified between any two versions of a design interface. For example, a set of differences can be determined between a current (e.g., most recent) version of a design interface and an older version of the design interface. As an alternative or in addition, a set of differences can be determined between two versions of a design interface that are both older than a current version of the design interface.

[0061] In some examples, a design interface is represented as a graph that contains a set of nodes arranged in a graph or other hierarchy. Workspace data for a design interface can include data describing the set of nodes and data describing the hierarchy. A set of differences between two versions of a design interface can include (but is not limited to) changes within a particular node, addition of a particular node (e.g., in a newer version of a design interface), removal of a particular node (e.g., from an older version of a design interface), and / or movement of a particular node in the hierarchy. A particular node that contains a difference can affect child nodes and / or parent nodes. These differences are described in more detail below.

[0062] A set of identified differences can be used to perform operations such as visually rendering or capturing differences between two versions of a design interface for review, tracking differences between members of a collaboration team, and / or selecting a version of a design interface for further development and / or implementation.

[0063] In some examples, the set of differences can be displayed to a developer so that the developer can quickly detect changes made to a design interface. By examining the differences, a developer can easily detect changes and facilitate the developer updating a code set to implement the design interface in a production environment. In some examples, a design interface can be integrated with an interface that can automatically generate or display code for implementing a particular portion of a design interface. When differences are displayed to a user, a developer can use the design interface to automatically navigate to a portion of code affected by changes to a design interface.

[0064] Example - Difference Visualization IGDS 100 is also configured to render a "compare changes" interface for display to a user. The compare changes interface includes a visual representation of at least one difference between two versions of a design interface. The visual representation can include a rendered image, a thumbnail rendered image, an abstract representation (e.g., a color palette, a font), and / or other visual representation of a design element and / or other portion of a design interface. In a given version of a design interface, one or more visual representations can be displayed in a "context" within canvas 122.

[0065] IGDS 100 can present the comparison change interface based on and / or using various modes of interaction between the user and input interface 118. For example, IGDS 100 can determine that one or more new versions of the design interface have been created since the last time the user accessed the design interface and / or interacted with IGDS 100 based on the time the user last accessed the design interface. When the user subsequently interacts with IGDS 100, IGDS 100 can generate an alert or notification indicating that the design interface has changed since the user's last access. The user can click on the alert or notification to navigate to the comparison change interface. In another example, program interface 102 can display a version history that contains a list of versions of the design interface ordered by time (or other attribute). The user can provide input through input interface 118 that hovers over a given version in the design history to access the comparison change interface. The user can also use or alternatively use the version history and / or comparison change interface to select one or both versions 126 and / or 128 of the design interface from which to determine differences 130 and represent in a visual manner.

[0066] In the comparison change interface, differences 130 between the two versions 126 and 128 of the design interface are indicated using various types of visual representations that are displayed on a canvas 122 that renders one of the versions. These visual representations include "on-canvas" labels that identify particular portions of the rendered version of the design interface that are affected by one or more differences 130. Each on-canvas label can represent a chunk of one or more differences 130 between the two versions 126 and 128 of the design interface. Each on-canvas label can also or alternatively indicate a type of change related to the one or more differences, such as (but not limited to) adding a design element, editing a design element, deleting a design element, and / or changing an external library. These visual representations can also or alternatively include listing and / or highlighting frames, layers, pages, and / or other portions of one of the versions of the design interface that are affected by differences 130.

[0067] Figures 2A-2D An example user interface is presented in which only examples of visual representations of differences between versions of the design interface are shown, not limiting examples. Figure 2A An example user interface is shown that includes visual representations of a set of differences identified between two versions of a design interface, in accordance with one or more examples. The example comparison change interface includes a canvas 202 in which a first version of the design interface is rendered. For example, canvas 202 can include a rendering of the current version of the design interface, and / or a rendering of a version of the design interface that is newer than the other version from which the set of differences was generated.

[0068] Figure 2A The example user interface also includes a sidebar 204 that displays the version history of the design interface. The version history includes a list of versions of the design interface. This list indicates that the design interface includes a current version, 14 autosave versions, and a user-generated version whose name begins with "Checkout this thing".

[0069] The version history also includes a user interface element 206 to represent the differences between the latest version of the design interface and older versions of the design interface (e.g., versions whose names begin with "View this content"). User interface element 206 may correspond to a notification generated when it is determined that a user accessing the version history has not accessed the design interface since that older version. User interface element 206 may also be generated in response to a user clicking, hovering, and / or otherwise interacting with an older version of the design interface in the version history. User interface element 206 may also be generated in response to different user requests for design interface collaborators to review recent changes made to the design interface since older versions. Users can click on user interface element 206 to navigate to different user interfaces containing a visual representation of the differences between the two versions of the design interface.

[0070] Figure 2B This illustrates a sample user interface based on one or more examples, which includes a visual representation of a set of differences identified between two versions of the design interface. Users can, for example, click... Figure 2A Access the user interface through the sidebar 204 displayed by user interface element 206. Figure 2B User interface.

[0071] like Figure 2B As shown, the example user interface includes canvas 212 and sidebar 214. The top of sidebar 214 identifies two versions of the design interface used to determine their differences (e.g., an older version whose name begins with "View this content" and the current version). The top of sidebar 214 also displays the avatars of users who have edited the design interface between the older and current versions, as well as the total number of users who have edited the design interface between the older and current versions (e.g., 8).

[0072] Next, sidebar 214 displays the total number of differences between older and current versions (e.g., 493). Sidebar 214 also contains a list of pages affected by these differences (described as follows). Figure 2B“Explorations 09.22.22” page. The first element in the list is accompanied by a checkmark (e.g., “Explorations 09.22.22”) to indicate that the corresponding page is currently selected.

[0073] Canvas 212 includes a rendering of a version of the design interface (such as the current version of the design interface). In canvas 212, a set of 216 design elements are highlighted and labeled as “affected.” This highlighting and labeling can be generated in response to the selection of the first element in the list of pages in sidebar 214 (e.g., to enable the user to readily identify portions of the design interface that correspond to and / or are affected by the changes made to the “Explorations 09.22.22” page between the older version and the newer version).

[0074] In some embodiments, the user can navigate between the locations and / or visual representations of the differences in the design interface by interacting with the up and down arrows to the right of “493 changes” shown in sidebar 214. More specifically, the set of 493 differences between the older version of the design interface and the newer version can be ordered and / or associated with one another according to the locations of the respective design elements affected by the differences. The user can click the up and down arrows to the right of “493 changes” in sidebar 214 to traverse the differences according to these annotations. For example, when the user interface of FIG. 2A is displayed to the user, the difference closest to the center (or other location) of the viewport associated with canvas 212 (e.g., the portion of canvas 212 that is currently observable in the user interface) can be selected as the “most relevant” difference. The spatial relationship, ordering, and / or other annotations associated with the most relevant difference and other differences can also be used to determine the “previous” difference and / or the “next” difference that the user can navigate to. The user can click the up arrow to navigate to the previous difference and the down arrow to navigate to the next difference. In response to the user clicking a particular arrow, the user interface can generate an animation that moves the center of the viewport (or other location associated with the most relevant difference) to the design element affected by the corresponding difference. If that design element is located in a different page of the design interface, the user interface can also update sidebar 214 to move the checkmark next to the page name and generate a highlight and “affected” label around the set of design elements within the page. Figure 2B

[0075] ​Further, the ordering and / or spatial relationships associated with the locations of the design elements affected by the differences can be utilized to minimize the instances of the user "jumping around" on the canvas 212 when using the up and down arrows to navigate the differences. For example, the canvas 212 can be divided into a grid of vertical columns and horizontal rows. The ordering of the changes made between the two versions of the design interface at 493 can be generated such that the ordering starts with the design element in the top left corner of the grid and proceeds to the design elements in the top row that are increasingly to the right until the end of the row is reached. Then, the ordering can proceed to the design elements in the next row in a given horizontal direction (e.g., from left to right or from right to left) until all of the design elements in the row that are affected by a difference are added to the ordering. The ordering of the changes continues in this manner until the design element in the bottom left (or right) corner of the grid is reached. When the user moves forward and backward within the ordering (e.g., clicks on the up and / or down arrows), the viewport associated with the canvas 212 can be updated to focus on and / or display the design elements affected by the differences. Since the ordering is generated with the goal of reducing and / or minimizing the distance between successive elements, the viewport can make relatively small jumps between design elements when the user navigates to different design elements related to the differences in the ordering.

[0076] Figure 2C An example user interface is shown in which a visual representation of a set of differences identified between two versions of a design interface is included, in accordance with one or more examples. More specifically, Figure 2C A set of tabs 222, 224, and 226 on a canvas are shown that represent differences between an older version of a design interface and a newer version of a design interface. Each of the tabs 222, 224, and 226 is associated with a different portion of the design interface, such as a different page and / or frame in the design interface.

[0077] The tab 222 includes an "edited" indicator to indicate that the corresponding portion of the design interface has been edited between the older version and the newer version. The tab 224 includes a "removed" indicator to indicate that the corresponding portion of the design interface has been removed between the older version and the newer version. In addition, the tab 224 also displays a "ghost box" to further indicate that the content of the corresponding portion of the design interface has been deleted. The tab 226 includes an "added" indicator to indicate that the corresponding portion of the design interface has been added between the older version and the newer version.

[0078] In some embodiments, the tabs on the canvas can include another indicator (e.g., a "modified" indicator) to indicate that the corresponding portion of the design interface has been modified between the older version and the newer version. Figure 2C"Updated" to indicate that an external library has changed and that the change affects a corresponding portion of the design interface. For example, one or more portions of the design interface can be defined in one or more external libraries that are imported for use in the design interface. A given external library can be added, removed, or changed between two versions of the design interface. Accordingly, the "Updated" indicator informs the user that a given portion of the design interface has changed as a result of a change to an external library component that defines or generates that portion of the design interface.

[0079] Figure 2D An example user interface is shown that includes a visual representation of a set of differences identified between two versions of a design interface, in accordance with one or more examples. As shown, the example user interface contains a side-by-side view of differences between an older version (e.g., "Previous") and an updated version (e.g., "Current") of a design interface. In some examples, this side-by-side view is presented when a particular difference is selected in another user interface, such as a user interface of a design interface review tool (e.g., IGDS 100). Figure 2D Figure 2A 、 Figure 2B and / or Figure 2C The side-by-side view is presented when a particular difference is selected in another user interface, such as a user interface of a design interface review tool (e.g., IGDS 100).

[0080] The side-by-side view includes a first side 242 that displays a portion of the older version of the design interface and a second side 244 that displays the same portion of the updated version of the design interface. For example, each side 242 and 244 can include a rendered view of a page represented by a node and / or a chunk in the respective version of the design interface.

[0081] Figure 2D The example user interface also includes a table 246 that provides a summary of differences between the rendered versions in the first side 242 and the second side 244. A first column of the table 246 includes elements that are affected by the differences. A second column of the table 246 includes properties in the elements that are affected by the differences. A third column of the table 246 includes current values of the properties (e.g., values of the properties in the new version), and a fourth column of the table 246 includes previous values of the properties (e.g., values of the properties in the old version).

[0082] Example - Chunk (Related Differences) A related differences chunk (simply "chunk") is a logical grouping of one or more related differences. For example, if the set of differences between two versions of a design interface includes an edited color property and an edited font property of a particular button component, a chunk can include both of these differences for the particular button component. An IGDS (e.g., IGDS 100) can render a review interface that includes a visual representation of a related differences chunk.

[0083] ​In some examples, one or more chunks are determined based on a hierarchy of workspace data. For example, each version of a design interface can be represented with a set of workspace data that describes a graph of nodes and edges. To determine differences between two versions of a design interface, the respective graphs can be compared node-by-node. One or more differences associated with a particular node in one or both graphs can also be logically grouped into a chunk. The chunk can also be associated with a label that indicates whether the differences relate to adding a node, removing a node, editing a node, and / or updating an external library associated with the node.

[0084] In another example, a chunk can include differences identified in one node and one or more child nodes thereof. In this example, the parent node can include a display node, and changes in the display node and one or more child nodes thereof can be rendered as a single visual representation of the chunk. Since the visual representation groups relevant differences identified in a subgraph of the hierarchy into a chunk, the visual representation can provide sufficient context for a user to understand one or more changes made to one or more respective portions of a design interface.

[0085] In one or more embodiments, a chunk can be defined to represent different levels of a hierarchy and / or different portions of a design interface. For example, a chunk can correspond to a top-level node, page, style, and / or component in a hierarchy and / or design interface.

[0086] Methodology Figure 3 A process 300 for tracking and comparing changes in a design interface is shown in accordance with one or more examples. The process 300 can be performed by one or more computing devices and / or processes thereof. For example, one or more modules of the process 300 can be performed by a user computing device (e.g., user computing devices 10-12, 600). In some examples, the user computing device executes IGDS instructions provided by a network computer system (e.g., network computer system 150, 50) and / or a network computer system to perform one or more blocks of the process 300.

[0087] In block 302, a computing device (including, but not limited to, a user computing device and / or a network computer system) generates one or more user interface elements for accessing a compare changes interface, as described below in connection with FIG. 4. Figures 4A-4B Further description. In block 304, the user computing device receives user input via the one or more user interface elements requesting to compare different versions of a design interface. For example, the user input can include clicking, hovering, and / or otherwise interacting with one or more user interface elements generated in block 302.

[0088] In block 306, the computing device determines a first set of differences between the first version of the design interface and the second version of the design interface based on the first set of workspace data for the first version of the design interface and the second set of workspace data for the second version of the design interface. For example, the user computing device can compare the nodes and / or other elements of the hierarchy represented by the first set of workspace data and the second set of workspace data to determine differences between the respective versions of the design interface. The user computing device can also generate logical groupings of the differences under "chunks" that represent components, styles, top-level nodes, pages, and / or other entities associated with the nodes and / or other elements of the hierarchy.

[0089] In block 308, the computing device renders the first version of the design interface on the canvas for display to the user. For example, the user computing device can render the older version or the newer version of the design interface in relation to the differences.

[0090] In block 310, the computing device renders one or more visual representations of the first set of differences between the first version of the design interface and the second version of the design interface within the canvas. For example, the user computing device can display: highlighted portions of the design interface affected by the differences; a list of design elements affected by the differences; labels on the canvas indicating newly added design elements, removed design elements, edits to design elements, updates to external libraries associated with design elements, and / or other types of changes made to particular design elements; side-by-side comparisons of different versions of design elements; and / or other visual representations of the differences. The user computing device can also provide user interface elements that enable the user to navigate between design elements affected by the differences and / or logical groupings of the differences. In this navigation, the user computing device can "jump" from a design element currently displayed within the viewport of the canvas to another user interface element that is spatially adjacent to the design element, thereby minimizing the phenomenon of the user "jumping around" on the canvas as the user iterates through the differences and / or logical groupings.

[0091] Figure 4A A process 400 for generating entry points for a comparison change interface is shown in accordance with one or more examples. The process 400 can be performed by one or more computing devices and / or processes thereof. For example, one or more modules of the process 300 can be performed by a user computing device (e.g., user computing devices 10-12, 600). In some examples, one or more blocks of the process 300 are performed by a user computing device executing IGDS instructions provided by a network computer system (e.g., network computer system 150, 50) and / or by the network computer system.

[0092] In block 402, a computing device (including but not limited to a user computing device and / or a network computer system) determines a time of a user's most recent access to a design interface. For example, the computing device can retrieve the most recent access time as a timestamp from a database that records users' access to IGDS.

[0093] In block 404, the computing device matches the most recent access time to a version of the design interface. For example, the computing device can use a version history of the design interface to determine a current version of the design interface available at the time of the most recent access.

[0094] In block 406, the computing device determines whether one or more updated versions of the design interface have been created since the version associated with the most recent access time. For example, the computing device can use the version history to identify one or more updated versions as one or more versions of the design interface created after the version associated with the most recent access time.

[0095] In block 408, the computing device generates an alert prompting for changes to the design interface between the version associated with the most recent access time and one or more updated versions of the design interface. For example, the computing device can send the alert to the user and / or other users (e.g., collaborators on the same design interface) in the form of a notification within the computing device, via email, and / or via other communication channels.

[0096] Figure 4B A process 420 for generating entry points for a comparison change interface is shown in accordance with one or more examples. The process 420 can be performed by one or more computing devices and / or processes thereof. For example, one or more blocks of the process 300 can be performed by a user computing device (e.g., user computing devices 10-12, 600). In some examples, one or more blocks of the process 300 are performed by a user computing device executing IGDS instructions provided by a network computer system (e.g., network computer system 150, 50) and / or by the network computer system.

[0097] In block 422, a computing device (including but not limited to a user computing device and / or a network computer system) displays a version history for a design interface to a user. For example, the computing device can display the version history in a sidebar and / or another portion of a user interface. The version history can include a list of versions of the design interface, names and / or descriptions associated with the versions, version creation times, and / or other metadata related to the versions. The versions in the list can be sorted and / or grouped in ascending or descending order by creation time, name, creator, and / or other properties in the metadata.

[0098] In block 424, the computing device receives, through the version history, a user input requesting access to a compare changes interface. For example, the computing device can detect that a user hovers a cursor over a given version of a design interface in the version history, and subsequently the user selects a user interface element that indicates that the user wishes to compare that version to another version of the design interface (e.g., a current version of the design interface, another version selected by the user, etc.).

[0099] In block 426, the computing device determines the two versions of the design interface to compare based on the user input. Continuing the example above, the computing device can obtain one or both versions from the user input. The computing device can also or instead determine that the versions should include a current version of the design interface, a version last accessed by the user, a version marked for comparison by a different user, and / or a version not otherwise specified in the user input.

[0100] In block 428, the computing device generates one or more user interface elements for accessing the compare changes interface based on the determined versions. For example, the computing device can add a user interface element to a user interface portion displaying the version history. The user interface element can indicate the versions of the design interface being compared, and / or other metadata associated with one or both versions. The user can click on and / or otherwise interact with the user interface element to navigate to the compare changes interface. The user can then use the compare changes interface to review, comment on, and / or perform other actions related to the differences between the two versions, as described above.

[0101] Network computer system Figure 5 A computer system in which one or more embodiments can be implemented is shown. The computer system 500 can be implemented on, for example, a server or a combination of multiple servers. For example, the computer system 500 can be implemented as Figures 1A-1C the network computer system 150 in FIG. 1.

[0102] In one embodiment, the computer system 500 includes a processing resource 510, a memory resource 520 (e.g., read-only memory (ROM) or random access memory (RAM)), one or more instruction memory resources 540, and a communication interface 550. The computer system 500 includes at least one processor 510 for processing information stored in the memory resource 520, such as information provided by a random access memory (RAM) or other dynamic storage device for storing information and instructions that are executable by the processor 510. The memory resource 520 can also be used for storing temporary variables or other intermediate information during execution of instructions by the processor 510.

[0103] The communication interface 550 enables the computer system 500 to communicate with one or more user computing devices over one or more networks, such as a cellular network, using a network link 580 (wireless or wired). With the network link 580, the computer system 500 can communicate with one or more computing devices, specialized devices and modules, and / or one or more servers.

[0104] In examples, the processor 510 can execute service instructions 522 stored in the memory resource 520 to enable the network computing system to implement the network service 152 and operate as the network computer system 150, such as in the examples described in Figures 1A-1C

[0105] The computer system 500 can also include additional memory resources (“instruction memory 540”) for storing sets of executable instructions (“IGDS instructions 545”) embedded in web pages and other web resources to enable user computing devices to implement functionality such as described with respect to the IGDS 100.

[0106] Accordingly, the examples described herein are all related to the use of the computer system 500 to implement the technology described herein. According to one aspect, the technology is performed by the computer system 500 in response to the processor 510 executing one or more sequences of instructions contained in the memory 520. These instructions can be read into the memory 520 from other machine-readable media. Execution of the sequences of instructions contained in the memory 520 causes the processor 510 to perform the process steps described herein. In alternative embodiments, hard-wired circuitry can be used in place of or in combination with software instructions to implement the examples described herein. Thus, the described examples are not limited to any specific combination of hardware circuitry and software.

[0107] User Computing Device Figure 6 A user computing device is shown for one or more examples, as described above. In examples, the user computing device 600 can correspond to, for example, a workstation, a desktop computer, a notebook computer, or other computer system having graphics processing capabilities suitable for rendering design interfaces and performing graphic design work. In some variations, the user computing device 600 can correspond to a mobile computing device, such as a smartphone, a tablet computer, a notebook computer, a VR or AR headset, and the like.

[0108] ​For example, the computing device 600 includes a central processor or main processor 610, a graphics processing unit (GPU) 612, memory resources 620, and one or more communication ports 630. The computing device 600 can use the main processor 610 and memory resources 620 to store and launch a browser 625 or other web-based application. A user can operate the browser 625 using the communication ports 630 to access a network site of the network service 152 from which one or more web pages or other resources 605 of the network service 152 can be downloaded (see Figures 1A-1C ). These web resources 605 can be stored in an active memory 624 (cache).

[0109] As described in various examples, the processor 610 can detect and execute scripts and other logic embedded in the web resources 605 to implement the IGDS 100 (see Figures 1A-1C ). In some examples, some scripts 615 embedded with the web resources 605 can include GPU-accelerated logic that is executed directly by the GPU 612. The main processor 610 and GPU can work in tandem to render a design interface under edit (“DIUE 611”) on a display component 640. The rendered design interface can include web content from the browser 625, as well as design interface content and functional elements generated by scripts and other logic embedded with the web resources 605. By including scripts 615 that can be executed directly on the GPU 612, the logic embedded in the web resources 605 can better perform the IGDS 100, as described in various examples.

[0110] CONCLUSION While examples are described in detail herein, it should be understood that the concepts are not limited to the specific examples. It will be appreciated that the scope of the concepts is defined by the following claims and their equivalents. Furthermore, a specific feature described in one example can be combined with other specific features described in other examples, even though that feature is not expressly described in combination with those other features. Thus, the scope of the concepts is not intended to be limited to the specific examples described herein.

Claims

1. A network computer system, comprising: The memory subsystem is used to store a set of instructions; as well as One or more memory resources are provided for storing interactive graphical design system instructions, which, when executed by one or more processors, cause the processors to perform operations including: providing a user computing device with workspace data describing one or more design interfaces and the interactive graphical design system instructions, wherein, when executed at the user computing device, the interactive graphical design system instructions cause the user computing device to perform operations including the following steps: Based on the comparison of the first set of workspace data of the first version of the design interface and the second set of workspace data of the second version of the design interface, the first set of differences between the first version of the design interface and the second version of the design interface is determined; Render the first version of the design interface on the canvas for display to the user at the user's computing device; and Render one or more visual representations of the first set of differences between the first version of the design interface and the second version of the design interface within the canvas.

2. The network computer system according to claim 1, wherein, Determining the first group of differences includes: Match one or more portions of a hierarchy associated with at least one of the first set of workspace data or the second set of workspace data with a second set of differences, the second set of differences being a subset of the first set of differences; and Generate logical groupings of the second group of differences within the first group of differences.

3. The network computer system according to claim 2, wherein, Matching one or more parts of the hierarchy with the second set of differences includes: determining that the second set of differences is associated with nodes in the hierarchy.

4. The network computer system according to claim 2, wherein, The one or more visual representations include a summary of the second set of differences in a portion of the design interface.

5. The network computer system according to claim 2, wherein, The logical grouping corresponds to at least one of the components, styles, top-level nodes, or pages.

6. The network computer system according to claim 1, wherein, The one or more visual representations include labels on a canvas that indicate portions of the design interface affected by one or more of the first set of differences.

7. The network computer system according to claim 6, wherein, The labels on the canvas also indicate at least one of the following: a newly added design element, an edited design element, a removed design element, or a change to an external library used to define the design element.

8. The network computer system according to claim 1, wherein, The one or more visual representations include at least one of the following: a deleting shadow box representing a removed design element, or highlighting a design element affected by one or more of the differences in the first set of differences.

9. The network computer system according to claim 1, wherein, The operation also includes: The second version of the design interface is determined based on the time the user accesses the design interface; and Generate alerts regarding changes to the design interface between the second and first versions.

10. The network computer system according to claim 1, wherein, The operation also includes: Display a list of versions of the design interface; and Before rendering the one or more visual representations of the first set of differences within the canvas, a selection of a second version of the design interface is received via the version list of the displayed design interface.

11. The network computer system according to claim 1, wherein, The first version of the design interface includes the latest version of the design interface, and the second version of the design interface includes the older version of the design interface.

12. The network computer system according to claim 1, wherein, Rendering the one or more visual representations includes: Render a first visual representation of the first difference in the first set of differences within the viewport associated with the canvas; Receive user input to navigate to the second difference in the first set of differences; The second difference is determined based on proximity to the viewport; and A second visual representation of the second difference is rendered within the viewport.

13. A non-transitory computer-readable medium storing instructions executable by one or more processors to cause the one or more processors to perform operations, the operations comprising: Based on the comparison of the first set of workspace data of the first version of the design interface and the second set of workspace data of the second version of the design interface, the first set of differences between the first version of the design interface and the second version of the design interface is determined; Render the first version of the design interface on the canvas to display it to the user; as well as Render one or more visual representations of the first set of differences between the first version of the design interface and the second version of the design interface within the canvas.

14. The non-transitory computer-readable medium according to claim 13, wherein, Determining the first group of differences includes: Based on a comparison of the first hierarchical structure represented by the first set of workspace data and the second hierarchical structure represented by the second set of workspace data, the differences in the first set are determined; and Generate one or more logical groups of the first group of differences under one or more nodes of the first hierarchy.

15. The non-transitory computer-readable medium according to claim 14, wherein, The one or more visual representations include a summary of one or more differences within the logical groups of the one or more logical groups.

16. The non-transitory computer-readable medium according to claim 14, wherein, The one or more nodes represent at least one of the following: a component, a style, a top-level node, or a page.

17. The non-transitory computer-readable medium according to claim 13, wherein, The one or more visual representations include labels on a canvas indicating: (i) a portion of the design interface affected by one or more of the first set of differences; and (ii) a type of change associated with the one or more differences, wherein the type of change includes at least one of the following: a newly added design element, an edited design element, a removed design element, or a change to an external library associated with a design element.

18. The non-transitory computer-readable medium according to claim 13, wherein, The one or more visual representations include at least one of the following: a deleting shadow box representing a removed design element, or highlighting a design element affected by one or more of the differences in the first set of differences.

19. A method for operating a computing device including one or more processors, the method comprising: Based on the comparison of the first set of workspace data of the first version of the design interface and the second set of workspace data of the second version of the design interface, the first set of differences between the first version of the design interface and the second version of the design interface is determined; Render the first version of the design interface onto the canvas for display to the user; as well as Render one or more visual representations of the first set of differences between the first version of the design interface and the second version of the design interface within the canvas.

20. The method according to claim 19, wherein, Rendering the one or more visual representations includes: Render a first visual representation of the first difference in the first set of differences within the viewport associated with the canvas; Receive user input to navigate to the second difference in the first set of differences; The second difference is determined based on proximity to the viewport; and A second visual representation of the second difference is rendered within the viewport.

Images