### Led interface design and UI kit for a canvas-based interface for modelling and simulating brain models, in collaboration with neurosciencists and technical teams to transform a complex idea into a smooth user experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSrqttw5e9CS48d6YzCf2u1tJk1z2%2Fw2x7GdnTHVLzI73KBvQP%2Fd25de1ce-1654-4ad0-aed7-d4b3004ac9fd.jpg?alt=media&token=ef8e178d-a313-4d57-9a06-876c8bea1f91","id":"d25de1ce-1654-4ad0-aed7-d4b3004ac9fd","width":3000,"height":1925,"filename":"1-mockup.jpg","type":"image/jpeg","caption":"","border":true}]}
```

The model is built of nodes, projections and compositions. Each element has their own properties accessible from the Components Hierarchy.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSrqttw5e9CS48d6YzCf2u1tJk1z2%2Fw2x7GdnTHVLzI73KBvQP%2Fa57bd0db-725d-4fe5-9e8b-bf6ec3e85979.jpg?alt=media&token=7b733c94-e997-4e84-bcc9-3d8c6e37688f","id":"a57bd0db-725d-4fe5-9e8b-bf6ec3e85979","width":3000,"height":1925,"filename":"2-mockup.jpg","type":"image/jpeg","caption":"","border":false}]}
```

When the user opens a composition, the Components Hierarchy panel automatically show which components are out of the view. This allows the user to drag components in this sidebar to include or exclude from a composition. This sidebar gives extra visibility and control to the user.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSrqttw5e9CS48d6YzCf2u1tJk1z2%2Fw2x7GdnTHVLzI73KBvQP%2F5d39da18-fe91-402d-ba9d-25be4af6fccd.jpg?alt=media&token=e164da7f-57c8-4dda-903d-46c6e82d1818","id":"5d39da18-fe91-402d-ba9d-25be4af6fccd","width":3000,"height":1925,"filename":"4-mockup.jpg","type":"image/jpeg","caption":"","border":false}]}
```

To build a node, the user can either drag-and-drop the placeholder node from the toolbar or select the tool by clicking on it and clicking on the canvas to add a node. A submenu to display and switch the type of node they're building also appears.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSrqttw5e9CS48d6YzCf2u1tJk1z2%2Fw2x7GdnTHVLzI73KBvQP%2Fdca413ee-f2e0-436f-a78d-2d8da8c424b4.jpg?alt=media&token=d0516492-b8be-4594-81a4-46541bb324ca","id":"dca413ee-f2e0-436f-a78d-2d8da8c424b4","width":3000,"height":1925,"filename":"3-mockup.jpg","type":"image/jpeg","caption":"","border":false}]}
```

To create a composition, the user activates the tool in the toolbar and click-and-drag on the canvas to create the composition. This solution allows the user to keep control over their workspace and workflow since some users may prefer to start building their compositions before building their nodes, or vice-versa.

### The project is currently under development and will be available online soon.

Psyneulink View

Designing Arro.

Product Designer at V7

Led interface design and UI kit for a canvas-based interface for modelling and simulating brain models, in collaboration with neurosciencists and technical teams to transform a complex idea into a smooth user experience.

Paul Faivret

2024

2023