System and method for creating fluid design keyframes on graphical user interface

A tangible non-transitory computer readable medium having stored thereon computer-executable instructions for a fluid design keyframe, said computer-executable instructions comprising:

• providing a content pane on a graphical user interface (GUI) for receiving contents from a user, said content pane being free from predetermined grid lines;
• providing one or more configurations in a configuration pane, said configuration pane being separate from the content pane, said one or more configurations defining one or more design characteristics of the contents;
• providing a size bar across a width defined by the content pane;
• providing an interactive adjuster along the size bar across the width of the GUI;
• receiving a first configuration value from the user to one of the one or more configurations in the configuration pane;
• identifying a first location of the interactive adjuster on the size bar in response to inputs from the user;
• providing a first marker on the location of the interactive adjuster along the size bar;
• rendering the contents in the content pane according to the first configuration value at the first marker;
• receiving an instruction from the user to adjust the interactive adjuster to a second location along the size bar;
• receiving a second configuration value from the user to the one of the one or more configurations in the configuration pane, said first configuration value being different from the second configuration value;
• rendering the contents in the content pane according to the second configuration value at the second marker;
• and
• transitioning the contents in real-time as a function of the first configuration value and the second configuration value in response to user's dynamic input to move the interactive adjuster between the first marker and the second marker, while maintaining the contents in their entirety within a leftmost margin and a dynamic position of the interactive adjuster corresponding to the dynamic input.

A system for providing a fluid design keyframe comprising:

• a processor configured to execute computer-executable instructions stored in a memory accessible by the processor;
• an input and output device for interact with a user;
• a display, in response to computer-executable instructions executed by the processor, for displaying information thereon;
• wherein the processor is configured to execute computer-executable instructions for:
• providing a content pane on a graphical user interface (GUI) on the display for receiving contents from a user, said content pane being free from predetermined grid lines;
• providing one or more configurations in a configuration pane on the GUI, said configuration pane being separate from the content pane, said one or more configurations defining one or more design characteristics of the contents;
• providing a size bar across a width defined by the content pane;
• providing an interactive adjuster along the size bar across the width of the GUI;
• receiving a first configuration value from the user to one of the one or more configurations in the configuration pane;
• identifying a first location of the interactive adjuster on the GUI;
• providing a first marker on the location of the interactive adjuster along the size bar;
• rendering the contents in the content pane according to the first configuration value at the first marker;
• receiving an instruction from the user to adjust the interactive adjuster to a second location along the size bar;
• receiving a second configuration value from the user to the one of the one or more configurations in the configuration pane, said first configuration value being different from the second configuration value;
• rendering the contents in the content pane according to the second configuration value at the second marker;
• and
• transitioning the contents in real-time as a function of the first configuration value and the second configuration value in response to user's dynamic input to move the interactive adjuster between the first marker and the second marker while maintaining the contents in their entirety within a leftmost margin and a dynamic position of the interactive adjuster corresponding to the dynamic input.