Web elements are beginning to flex as they change position and size. What are their stretching rules? Here is a basic sketch beginning to explore the ideas behind giving interaction designers the ability to control how elements affect other elements around them. Be it stretching, squeezing or pushing. Concept B, begins to explore the idea of gluing where a relationship is set between two sides of any element.
In the traditional sense, form elements are building blocks for web based interactions. FluidIA will need to support the ability to draw up such form elements as radio buttons, input boxes, textareas, checkboxes, and selectors. Here are a number of ideas for how it could work.
During the last evaluation cycle, users were having trouble to understand that elements or objects are drawn in a nested fashion within objects. In other words, while drawing, parent-child relationships are developed. To help users understand this behaviour, the following cue sketches have been developed.
Just updated stage with a working version of an instance viewer. When an object is now selected it displays all of its instances in the footer as little orange thumbnails. More so, when an object with multiple instances is edited as a master, the little orange instance thumbnails also change their opacity to 100% from 50% in order to indicate that they have been changed as well. Upon clicking on an instance thumbnail, the opacity returns to 50%, to indicate that the instance has been viewed. The instance viewer can also be seen in the first layout screenshot (with the title “Updated Instances”).
To have a go at what I mean, do the following: 1: draw an object; 2: copy it (CTRL+C); 3. create a new page and switch to the new page; 4: paste it (CTRL+V). The footer should display the instance viewer with two instances.
Any thoughts, more than welcome.
Cheers,
Jakub
Just updated the stage with some additional code. Here is what’s been updated:
Comments, thought, welcome :)
Another quick update on the latest and greatest. The working interface has just been updated with the new footer design. Hopefully this layout will be now a bit easier to use as it more clearly separates the three core functions (ideas, inheritance, and edit modes). The “hold” (Z / X) interactions have also been given some extra attention. The checkboxes in the inheritance box have gained increased cues that they are clickable. Finally, elements are now also resizable on single click.
A few bugs were also fixed. These now include: the ability to finally delete elements from the workspace; single pixels elements no longer get created; and text/labels are easier to edit.
Have a look and let me know what you think (or if you’d like to get involved):
Cheers,
Jakub
