interaction design for Art Institute website
Editorial interactions design
Exhibition subpage for the imagery Art Institute museum designed as a part of the final project within the Interaction Designer course organised by Design Practice. Interactions included:
Layout behaviour during scrolling.
Carousel of the latest exhibitions.
The page behaviour after clicking the "View all exhibitions" button – it switches to the next subpage.
Switching the navigation on "All exhibitions" subpage between the two categories and visualizing the behaviour of the elements.
How the interaction transition improves UX
Moving the navbar away helps the user focus on the content.
The behaviour of the page layout during scrolling gives the organization an impression of elegance and nonchalance. The animation contributes to a better user focus on the content, while teasing the current exhibitions.
The mid-scroll slowdown gives a natural feel to the offset that usually accompanies this action. Thus, the user feels familiar security.
The impression of a revealing curtain opens the brand world to the user, breaks the website rhythm and encourages them to scroll further.
The appearing inscriptions build the brand image, shorten the distance and show the human side of the organization.
The impression of putting a dot before the words "by passion" emphasizes dedication to art, thus grounds the brand world in the recipient mind.
The CTA "Buy tickets" behaves the same way as previously appearing subtitles. It ensures a consistent experience so that the user is not overwhelmed by too many effects on the page, and at the same time knows what to expect.
The carousel sliding in from the right gives character and sets the inheritance style, which in the recipient eyes helps to orientate and navigate the carousel.
Descriptions inherit the basic effect of the sliding carousel on the right. The excessive monotony of the carousel got broken by the artists names sliding in from the bottom – the rhythm has been broken, which increases the visual attractiveness of the website. An additional flavor in the form of a line changing length, plays not only a reference role and a bridge between the image and text, but is also one of the basic elements building the page style.
The button directing the user to the subpage with all exhibitions appears in two states: onHover and onClick. During onHover, the arrow rotates, suggesting interaction. When pressed, it enlarges to indicate that the action has been performed.
The transition to the "All exhibitions" subpage is achieved through the background color spreading to full screen. Thus, the user is informed that they are currently viewing a different subpage.
The user has the opportunity to get acquainted with the artists based on their specialization. By clicking between the categories, the line (reference) is extended again and the content is pushed in and out, which helps the user navigate through the categories.
