Introducing Bret Victor- Interactive

5 min readMar 4, 2022

Communications Studio | 2022 Spring

Interaction Design Principles

focuses on behavior not form
imagines what might be
user-centered

Guides to help build interactions

visibility
feedback
constraints
mapping
consistency
affordances

UI Patterns

a recurring method of interaction with a system of object
solve common design problems, and can be applied to those problems repeatedly
they become a go-to standard for UI designers
example: hamburger menus, autosave, module tabs, alternating row colors, auto-complete, image zoom, walkthrough, coach marks, a blank state, reactions

Initial WireFraming

In Figma, I created a simple mock-up of the user flow for a mobile experience.

Initial Exploration

Reusing assets from my poster and magazine spreads, I started to think about how these shapes could be utilized in motion to indicate UI elements such as menus and buttons. I do realize that the elements are hard to be interpreted as their function, so I intend to work on this after having a solid idea of the content.

Home Page

This series is animated within Figma as the user initially enters the application

The drop-down menu comes down from the side as the crescent shape turns. This page is where the user returns to after pressing on the hamburger menu, or in this case, the top left crescent shape.

About Page

Here, we have a section that explains Victor’s ideologies as a designer and personality. At the end of the page, there is an arrow that leads to the quote section, where the user is able to access a library of quotes that have impacted Victor’s own life based on category tags and keywords.

Quote Page

In this section, the user can click on the given tags, and a list of quotes will automatically appear for the user to scroll through. After clicking on the chosen tag, the user should be brought back to the middle page and able to choose again.

Graph Page

In this section, we are able to see Victor’s career in his early years up until his hobo period. Here the user is able to click at certain points of his life and understand what projects he did and what happened. (Note that the current black text is not accurate and only acts as placeholder text)

Lectures & Demos Page

This section gives a direct link to some of Victor’s most famous lectures and demo videos talking about interaction design.

After clicking on each thumbnail, the user is taken to the according video player screens with captions available for people with trouble of hearing.

Bookshelf Section

I always wanted to include this section somewhere in this project, and it made the most sense to have it in a digital manner. The goal is to mimic a bookshelf or library collection for people to browse through based on the subject. I also hope to have a feature that allows users to “collect” the books they are interested in and find a way to purchase these books on their own.

Here is the screen the user initially sees. Each section has a list of sub-categories that are included for guidence. The top right also includes a book list button that is always accessible for the user to check, similar to a shopping cart for online shopping.

These screens will then slide from the chosen category, and another level of shelves will be shown. Here, books, comics, games, and more are shown as a carousel menu sorted by sub-category. It provides the book title, author, an “add to list” button, and a footnote from Bret Victor himself on his opinions about the book. These sections scroll horizontally and close when the chosen category is pressed on again. Note that the book covers are gray square placeholders as I did not have time to put all of them in.

Once a user chooses a book and presses the green “add to list” button, the button then changes into a grey “added” button with a checkmark that indicates a change in state. Lastly, the right image is the screen that loads when clicking on the “book list” button. Here we can see all the chosen books and enter an email. The email button then triggers after being pressed and the word “send” changes to “sent”