Creative tools, guides and snapping

[J. Ryan Stinnett]

Posting a internal thread, let's continue it here!

On Fri, Feb 27, 2015 at 8:45 AM, Jeff Griffiths <jgrif...@mozilla.com>
wrote:

> I think the tool palette could be useful for all kinds of things. I am
> also wondering if responsive design view shouldn't be in this mix.
>
> Matteo brought up the issue yesterday that we would need 2 implementations
> of the rulers - one in RSD and one without. I'm not sure if that's correct
> - maybe what we need instead is a 'design' mode that incorporates RSD,
> rulers, the tool panel you're referring to and various other utilities.
>
> The use case is - if I'm doing pixel-accurate design work, I am probably
> using media queries linked to the size of the viewport and therefore I
> really care what size the window is.
>
> Basically I think this is a case where chrome's take on it - combining
> rulers, viewport and media query support in a single mode - is mostly
> correct, although they 'hide' it a little from most developers by calling
> it a mobile feature. It's not, it's a design feature. If we frame it as
> 'design mode' instead of just 'responsive mode' or 'mobile mode', i think
> it's a better mapping to the combinaed capabilities this mode could
> encapsulate:
>
> * resizable viewports from RSD
> * rulers
> * media query selection of some sort
> * guides
> * measurement tool
> * other lighter-weight tools and visual hooks from the toolbox, for
> example a red badge indicating the number of errors, maybe geolocation, etc.
>
> Jeff
>
> On Fri, Feb 27, 2015 at 1:16 AM, Patrick Brosset <pbro...@mozilla.com>
> wrote:
>
>> That sounds like a pretty interesting feature indeed. Being able to add
>> guides to the page and have them used as snap coordinates when using other
>> tools are definitely in the pipe. Being able to save those guides location
>> sounds great, and with the new async storage thing, that should be easy too.
>>
>> When it comes to precisely editing dimensions, as you said, we need a
>> piece of UI. I've proposed recently that we add a new toolbar to group
>> designer tools together, without necessarily needing the toolbox to be
>> opened. What about we add a "Designer Toolbar" in the tools menu, just like
>> we have the "Developer Toolbar" (a.k.a gcli).
>> This could be an horizontal toolbar, either at the top or bottom of the
>> window, just like gcli, grouping designer-related tools like the ability to
>> toggle the rulers, the measurement tool, the resize/move element tool,
>> maybe the eye dropper, something to create a color palette, a way to add
>> "layers" with images (like pixel perfect), etc...
>> The advantage of this is that it can double as a place for tool options.
>> So everytime a tool is selected from the toolbar, an area of the toolbar
>> could be dedicated to showing options relative to this particular tool.
>> These could be text fields for the measurement tool, to enter precise
>> values for instance.
>>
>> Patrick
>>
>> On Thu, Feb 26, 2015 at 9:33 PM, Jeff Griffiths <jgrif...@mozilla.com>
>> wrote:
>>
>>> This morning's meeting got me to thinking about some key interaction
>>> issues / opportunities we were discussing.
>>>
>>> We're working on ( or have discussed ) some key components that will all
>>> work together to help developers with layout:
>>>
>>> * rulers
>>> * measurement tool
>>> * resizing elements
>>> * ( proposed ) guides
>>>
>>> A real-world task that would utilize these elements together would look
>>> something like this:
>>>
>>> Say I have some un-styled content being produced by a back-end - the
>>> markup and templates are ok, but it isn't pixel-perfect. The client doesn't
>>> have a formal design yet but has instead referenced another site's design
>>> as being desirable. Using Firefox Ddevtools, I then:
>>>
>>> * go to the referenced site, engage the ruler mode then drag a set of
>>> guides to create a wireframe of the existing design. I save the wireframe.
>>>
>>> * go to my dev site and apply the wireframe
>>>
>>> * using the wireframe as a guide, I engage 're-size' mode and use the
>>> mouse to quickly resize the key elements of my site to match the wireframe.
>>> Note - i may need to change the markup at this point, refresh, keep going
>>>
>>> * use the measurement tool to measure a key region in the source page.
>>> Due to the mouse drag operation being imprecise, we may need to view and
>>> manually edit the dimensions of the measurement tool to get it to be just
>>> the right size. copy the measurement tool
>>>
>>> * 'paste' the copied measurement tool to use it with the new layout, and
>>> drag it around to use it to measure the relevant bits of the layout.
>>>
>>> One of the key things about this interaction is that we need to help
>>> users make changes with some level of precision. There are two common
>>> features built into visual tools like this that we talked about:
>>>
>>> * some ui that allows me to manually enter precise numbers
>>> * assuming we implement guides, 'snapping' the mouse pointer to guides
>>>
>>> I think both are common enough features that we should consider them.
>>> I'd like to hear more on the technical feasibility of mouse snapping - it
>>> feels currently like optional manual input of dimensions might be easier to
>>> start with.
>>>
>>> WRT manual input, I also think manual entry of the dimensions & position
>>> pf the measurement tool is a strong idea as a followup - not necessary to
>>> ship though as long as we have the gcli command.