Environment for responsive graphical designs

• US 9,389,759 B2
• Filed: 05/07/2013
• Issued: 07/12/2016
• Est. Priority Date: 05/07/2013
• Status: Active Grant

• Current Assignee: Axure Software Solutions Incorporated
• Original Assignee: Axure Software Solutions Incorporated
• Inventors: Hsu, Victor, Smith, Martin, Gardner, Ian, Fraser, Ben
• Primary Examiner(s): Nunez, Jordany
• Application Number:
  US13/889,329
• Publication Number:
  US 20140337767A1
• Time in Patent Office: 1,162 Days
• Field of Search: 715/760, 715/234, 707/E17.12
• US Class Current: 1/1
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 16/958 Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/0484 for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 8/34 Graphical or visual programming

Abstract

Embodiments of the present invention provide tools and methods for the development and specification of a responsive graphical design. A graphical user interface allows a user to specify a design. The graphical user interface has a area for displaying a rendering of the design according to a first dimension specification. The system also has a dimension specification interface that allows the user to set a second dimension specification. The system also has a widget interface that allows the user to (i) add a widget to said design, (ii) specify a first state for the widget when the design is rendered according to the first dimension specification, and (iii) specify a second state for the widget when the design is rendered according to the second dimension specification.

Claims

1. A system comprising:

a memory storing instructions; and

at least one processor coupled to the memory and configured to execute the instructions, wherein the instructions, when executed by the at least one processor, cause the at least one processor to provide a tool for designing a responsive graphical design, the tool comprising interfaces comprising;

a graphical user interface having a window for displaying a rendering of a responsive graphical design, said design containing a responsive interactive widget to which a user can apply characterizations;

a dimension specification interface capable of accepting user specification of a first rendering space dimension version of the design comprising a first layout of said widget and one or more other graphical elements and user specification of a second rendering space dimension version of the design comprising a second layout of said widget and one or more other graphical elements that is different from said first layout; and

a dimension version editing option interface that accepts a user selection of a single-dimension editing mode or an all-dimension editing mode;

wherein;

said user can utilize said graphical user interface to specify said widget to have a first state in said first rendering space dimension version of the design and a second state in said second rendering space dimension version of the design, wherein each of said first and second states is associated with a respective set of user-definable property values of the widget;

changes to said first state made while said user is editing said first rendering space dimension version of the design in said single-dimension editing mode only change said first state of said widget in said first rendering space dimension version of the design;

changes to said first state made while said user is editing said first rendering space dimension version of the design in said all-dimension editing mode change both said first state of said widget in said first rendering space dimension version of the design and said second state of said widget in said second rendering space dimension version of the design; and

each of said first and second states of said widget is associated with a respective user-definable absolute position property value specifying where said widget is to be located in the design.

2. The system of claim 1, the tool further comprising:

a gallery displaying said first rendering space dimension version in a first window and said second rendering space dimension version in a second window;

wherein changes made by said user to said widget using said first window are immediately reflected in said second window while in said all-dimension editing mode.

3. The system of claim 1, wherein:

said window displays said first rendering space dimension version when a first dimension display mode is selected; and

said window displays said second rendering space dimension version when a second dimension display mode is selected.

4. The system of claim 1, wherein a subset of properties that define said first and said second states that are available for editing in said all-dimension editing mode are not available for use in said single-dimension editing mode.

5. The system of claim 1, the tool further comprising:

an interface window that is called when said user edits a widget for a first time in a design in which said user has initially specified said first rendering space dimension version and said second rendering space dimension version;

wherein said interface window allows said user to select said single-dimension editing mode or said all-dimension editing mode.

6. The system of claim 1, wherein:

said dimension specification interface allows said user to specify multiple dimension versions; and

said dimension version editing option interface allows said user to specify a subset of said multiple dimension versions to edit in a multi-dimension editing mode.

13. The method of claim 1, wherein the design comprises a web page.

7. A method comprising:

providing a graphical user interface having a window for displaying a rendering of a responsive graphical design that allows a user to design said responsive graphical design and apply characterizations to a responsive interactive design element;

accepting, via a dimension specification interface, user specification of design dimensions for different first and second rendering space dimension versions of the design, wherein said first rendering space dimension version comprises a first layout of said design element and one or more other graphical elements, and wherein said second rendering space dimension version comprises a second layout of said design element and one or more other graphical elements that is different from said first layout; and

accepting, via a dimension version editing option interface, user selection of a single-dimension editing mode option or an all-dimension editing mode option;

wherein;

said user can utilize said graphical user interface to specify said design element to have a first state in said first rendering space dimension version of the design and a second state in said second rendering space dimension version of the design, wherein each of said first and second states is associated with a respective set of user-definable property values of the design element;

modifications to said first state of said design element while said user is editing said first rendering space dimension version in said single-dimension editing mode apply to said first state of said design element in said first rendering space dimension version of said design;

modifications to said first state of said design element while said user is editing said first rendering space dimension version in said all-dimension editing mode apply to both said first state of said design element in said first rendering space dimension version of said design and said second state of said design element in said second rendering space dimension version of said design; and

each of said first and second states of said design element is associated with a respective user-definable absolute position property value specifying where said design element is to be located in the design.

8. The method of claim 7, further comprising providing multiple design viewer windows, each of said design viewer windows for displaying said design at different design dimensions simultaneously to said user.

9. The method of claim 8, further comprising modifying said design element in one of said multiple design viewer windows in response to a modification to said design element implemented by a user in a different one of said multiple design viewer windows as that modification is made.

10. The method of claim 7, further comprising providing an adjustable design viewer window for displaying said design at different design dimensions as said user adjusts a dimension of said design viewer window.

11. The method of claim 7, further comprising:

accepting a design element characterization command from said user specifying a characterization for said design element via a design element characterization interface;

wherein said design element characterization interface allows a user to specify a set of characteristics for said design element; and

wherein a sub-set of said characteristics are not available for specification during said single-dimension editing mode.

12. The method of claim 11, wherein one of said characteristics in said sub-set of said characteristics is a link address of said design element.

14. A non-transitory computer readable medium storing instructions to execute a method in combination with a processor, the method comprising:

providing a graphical user interface having a window for displaying a rendering of a responsive graphical design that allows a user to design said responsive graphical design and apply characterizations to a responsive interactive design element;

accepting, via a dimension specification interface, user specification of design dimensions for different first and second rendering space dimension versions of the design, wherein said first rendering space dimension version comprises a first layout of said design element and one or more other graphical elements, and wherein said second rendering space dimension version comprises a second layout of said design element and one or more other graphical elements that is different from said first layout; and

accepting, via a dimension version editing option interface, user selection of a single-dimension editing mode option or an all-dimension editing mode option;

wherein;

said user can utilize said graphical user interface to specify said design element to have a first state in said first rendering space dimension version of the design and a second state in said second rendering space dimension version of the design, wherein each of said first and second states is associated with a respective set of user-definable property values of the design element;

modifications to said first state of said design element while said user is editing said first rendering space dimension version in said single-dimension editing mode apply to said first state of said design element in said first rendering space dimension version of said design;

modifications to said first state of said design element while said user is editing said first rendering space dimension version in said all-dimension editing mode apply to both said first state of said design element in said first rendering space dimension version of said design and said second state of said design element in said second rendering space dimension version of said design; and

each of said first and second states of said design element is associated with a respective user-definable absolute position property value specifying where said design element is to be located in the design.

15. The non-transitory computer readable medium of claim 14, wherein the method further comprises providing multiple design viewer windows, each of said design viewer windows for displaying said design at different design dimensions simultaneously to said user.

16. The non-transitory computer readable medium of claim 14, wherein the method further comprises modifying said design element in one of said multiple design viewer windows in response to a modification to said design element implemented by a user in a different one of said multiple design viewer windows as that modification is made.

17. The non-transitory computer readable medium of claim 14, wherein the method further comprises providing an adjustable design viewer window for displaying said design at different design dimensions as said user adjusts a dimension of said design viewer window.

18. The non-transitory computer readable medium of claim 14, wherein the method further comprises:

accepting a design element characterization command from said user specifying a characterization for said design element via a design element characterization interface;

wherein said design element characterization interface allows a user to specify a set of characteristics for said design element; and

wherein a sub-set of said characteristics are not available for specification during said single-dimension editing mode.

19. The non-transitory computer readable medium of claim 18, wherein one of said characteristics in said sub-set of said characteristics is a link address of said design element.