Definition
Interactive Design can be classified as the designing of a product with the specific purpose of being used by a wide range of audiences. Products with interactivity focus on the experience and knowledge of the audiences and aim to create an immersive experience through many different mediums. These mediums can be as complex as international social media platforms (such as Instagram or Twitter), or as simple as books and magazines.
Interactive design supports people in their everyday lives, making processes simpler, easier and more engaging. it gives its users control over the products they have access to and generally allows for greater understanding of the world.
Examples
- An interactive adventure by Pierre Herme & Nicholas Buffe ( http://pierrehermenicolasbuffe.com/en)
An interactive adventure by Pierre Herme & Nicholas Buffe is an interactive website featuring a digital story told through animation, drag and drop elements and illustration. It is branded as an “exclusive interactive experience” combining “ancestral myths, manga culture, Renaissance and Baroque art”, and tells the story of ‘The Kingdoms of the Moon and the Sun.’
Almost every element on the site is animated, creating a dynamism which enhances the audiences experience. The story also features small mini games and quests to maximise its interactivity.
The site is an excellent example of complex Interactive Design. The process in making the site and its artwork was likely long and difficult – on the site’s ‘about’ page, it states that the project began in 2016, and two of the three chapters of the story are not yet available.
The screengrabs below are examples of the site’s artistic design, and of the main interactive feature of the site (drag and drop).
Information/Image credits: Herme, P., & Buffe, N. An interactive adventure by Pierre Herme & Nicholas Buffe. Retrieved from http://pierrehermenicolasbuffe.com/en/about , http://pierrehermenicolasbuffe.com/en/chapter-1#
- Hi Fly (https://hifly.aero/)
Hi Fly is a website dedicated on the HiFly Airline and is an informational website designed to teach potential customers about the airline’s services. It provides specifics about the various models of planes offered by the airline and uses a clean, minimalist design style to make the information cohesive and easy to digest.
The site features animated vectors of aeroplanes, animated text and drop-down menus. It also features animated diagrams of planes which provide the seating plans of the vehicle when hovered over. The colour palette of the site is also very clean and simple, using sky blues and greys to create the illusion of the sky throughout the site.
The site’s structure is very interactive as well, featuring scrolls and hover mechanics to guide the viewer through all the information the site has to offer.
The screengrabs below are examples of the site’s design and overall aesthetic.
Information/Image credits: HiFly Airlines (n.d.). Hi Fly. Retrieved from https://hifly.aero/
- Ocean School (https://oceanschool.nfb.ca/)
Ocean School is an educational website dedicated to information on the world’s oceans. It has a design concept based on the depths of the ocean, and the interactive features of the site support this. The information on the site is presented through a scroll system, and the imagery on the site is also aquatic, with photos of underwater animals such as whales and fish.
The site also features animated loading screens, animated hover-over images and wave effects on various site elements. These features all combine to create an immersive experience for the site’s viewer and make the site as a whole more cohesive and engaging.
The screengrabs below are examples of the clean structure and rich palette of the site:
Information/Image credits: Ocean School (n.d.). OceanSchool. Retrieved from https://oceanschool.nfb.ca/
Design me a Design Blog 