UI Layout Update

[joshuajames-smith]

Is your feature request related to a problem? Please describe. The interface design requires updating to reflect gliff'ai's new visual identity but also to improve the UI and UX for users.

Describe the solution you'd like I have applied my previous iteration style to the interface as the features currently stand. [All the screenshots can be accessed through the Adobe XD prototype link at the end].

I've added the new logo and changed the image upload icon. The toolbar continues to be a floating element that should hug the bottom left corner with about 17/18px space. The minimap sits flush to the screen corner in the bottom right.

These next three images show the icon states: no interactive, hover, and click.

This next image shows how the interaction with once the user has clicked the brush tool can appear. Vertical slider bar with pixel brush size. Thinking this brush tool bar should be hover once the user click the main icon?

Below is some images of how I anticipate the minimap to be used. State styles remain the same. Expect on the hover state, it is above (not to the side) of the main feature. Kept the zoom in and out hover states to the left and fit to the page on the right to provide some visual belonging.

Describe alternatives you've considered I tried to have a think and re-shuffle how the annotation label tool could work/look. I found the one currently available to be clunky and not make sense how to access each annotation to then view and add/remove labels attached. I also added a pin icon so that users could click the icon, have this menu open and be able to pin it open on their workspace instead of constantly having to hover on the toolbar?

Additional context https://xd.adobe.com/view/18c9ae6f-9af2-4b55-81c2-992e947ea620-4d9a/

This is a developer hand-off feature built into Adobe XD which can be accessed through the above link. It is an interactive wireframe which allows code to be copied straight from the prototype or properties such as pixel locations are displayed by click on the desired UI component.

[SVG files of plain icons are in UI/UX Google Drive folder]

[joshuajames-smith]

Updated the tool bar's hover state design so the shortcut keys now live in a circle than a rounded square.

[ChrisBaidoo]

Updated the tool bar's hover state design so the shortcut keys now liv in a circle than a rounded square.

Hey Josh, for the Contrast and the Brightness, are we using letters or the "/" "\" ? There is a disparity between the adobe xd design and this one here.

Thanks

[joshuajames-smith]

Hey Chris! Sorry for the confusion, I did not realise I had assigned two tools to "B" shortcut so in the updated design I changed it to "/" and "\" but I'm open to any suggestions or changes made with the shortcuts and how we assign them!

Here is the updated adobe xd link as well: https://xd.adobe.com/view/1930084c-3665-4a3a-908b-fd0c3cfc4192-4c63/

[ChrisBaidoo]

Thanks for clarifying Josh

[joshuajames-smith]

Updated the tool hint pop-up for the image so now longer shortcuts are made up of a circle attached to each key. Giving us more flexibility in shortcuts assigning.

https://xd.adobe.com/view/680e6dbf-3d7b-4315-979b-aaa30f66bf94-3d5d/

[ChrisBaidoo]

Hi Josh,

We have a plus (+) button and a delete button that sits inside the Annotation Label popover at the moment. The plus button adds a new object for annotation, and the delete button clears any annotation on the canvas. We want to move these two buttons out into the main app, because they will be used a lot especially the plus button.

Would you be able to update your design to take this into consideration?

Thanks

[joshuajames-smith]

Hey Chris,

So, I have pulled out the tools from the pop-up (let's call them "New Annotation" and "Delete Annotation) and placed them in a small toolbar above the toolset (this reflects some of the currate UI layout that I've created thus far). The icons are named as above within our google drive in UI / UX folder.

I also worked on the minimap as we discussed earlier. I have shifted the locations to add a minimise on the left and keep zoom tools to the right. There is screenshots below of the mini-map in its minimised and maximised state.

We also spoke about the channels tool, which I have kept simple to that of my thinking following our chat earlier. Just simple tick boxes next to each of the 3 colour channels. Click once to turn on or off.

Revamped the paintbrush icon as well. Created the magic spline tool icon also. All tool icons are kept in our google drive and I have renamed them and organised them into interface folders to help you better understand what is what and where is what!

https://xd.adobe.com/view/a2b2e7ce-cd58-4521-8646-ac3938a509d7-f7e1/