Define Interactive Design
Interactive Design is media adapted through research that aims to connect people and technology with sincere and purposeful experiences, communicating a specific message, concept or idea. Interactive screen interface elements allow users to explore content, technology and space in a creative and immersive way through intuitive and guided interface.
Precedents
DAESK: A time management app for flexible and productive teamwork, offering analytical tools to ensure teams maximise their focus and skills.
The website Daesk is a great interactive that demonstrates the power and resources of the websites aims. The header has interactive statistics that changes with pop ups and animation that capture audiences attention to pay attention to otherwise, disregarded facts. The facts flow and change together with geometric shapes and bursts of colour.
When clicking on the menu of the website, interactivity is incorporated through hover selection, that engages audiences through providing a sneak peak of content on each page. As you hover over each menu item, background images scroll past, representing a snippet of each page with vibrant colours, aesthetic images and animation.
The website tends to build upon interactivity in any aspect they can, the websites layout provides a long scroll, where instruction to interact is put in place, capturing audiences attention and engagement. There is an element on the home page where it instructs to ‘drag’. Using icons and alluring imagery to persuade viewers to participate.
After dragging down upon the icon, even the loading screen transcends beautiful interactive animation to keep the view engaged and intrigued with the content of the website. The loading screens animation is a simulation of submitting forward into the stars and space; this interactivity makes audiences want to move forward into exploring the websites content.
There are trial videos that explain aims, resources and content of the website. The videos are represented in a interactive simulation that makes learning interesting, as well as serving great purpose in representing content the websites business can create for users. Vibrant neon aesthetics of retro and alternative funk create an interactive of cyber exploration and engagement with technology, rather than typical play through videos that may not provide full engagement from viewers.
ONO: A personalised diet and deliverable meal plan company, that believes in overall well being through nutritious recipes and sustainability.
https://onomeals.zeusjones.com/
The website Ono represents interactivity in a more delicate and pictorial composition and layout. Creating a natural, organic and earthy feel in presentation, tone, imagery and content. The home page engages interactivity through gif animations, describing what ‘Ono is’, the reasons change after a few seconds, whilst the gorgeous imagery changes the ingredients and props to accompany the reason represented. This is engaging to read about the product and company in an interactive and interesting way that stimulates visually and emotionally. Rather than using still words and imagery.
The website layout uses a long scroll, where each component of the website is represented in a different coloured box to differentiate content, which is engaging to explore. The aesthetic imagery accompanies the contents relevance with their products. The imagery maintains the aesthetic look and feel of the website through simplicity and vibrant, natural tones.
The website also engages activity through response and humour. As you progress through the website, conversation will appear on the screen in running order, this creates interactivity through the website’s features projecting personality and aims.
The graphic visual imagery, icons and symbols are simplistic and unique, that matches to the aesthetic style of the pictures, typography and colours. The icons and symbols are animated that create intrigue and engagement with the buttons and content modules, as it stimulates users to click through the whole website to discover other interactivity concepts.
The menu page, which is the main aspect of the websites product, is represented in a carousel, that is consistently moving, until you hover over a dish. This interactive element creates a feel of choosing food at a buffet. This aesthetic feel projects the objectives of the website further psychologically and physically, which intrigues users to click and read through content in an interesting way that invites users back.
SALT & PEPPER: A digital production company that offers guidance and resources for startup digital agencies. Offering consulting, development and technical support.
The website Salt & Pepper approaches their layout in a more simplistic and professional manner, keeping interactivity the major aspects of each page. The header has animation that floats around, forming different shapes. The animated graphic creates intrigue to explore other projects and content the website has to offer, whilst still maintaining a minimalist style.
The simplistic approach for a digital production company is ironic, but a purposeful and professional approach to grasp the attention of viewers. Highlighting the main aims and benefits of the website in a flat design, with minimal colours, directly projects what the website has to offer. The simplistic approach creates interactivity to search for more graphic content.
The websites simplicity provides easy navigation and exploration of content. The website provides a hamburger menu that directs you to content on the long scroll website, providing minor interactivity to suit the minimalist content aesthetic and flow.
The website provides exploration and examples of projects and testimonials. You can search through content the company has created with other companies and creators. The simplistic layout of the main body of content, allows the companies products to flourish visually. The products project the professionalism of the company, without overdoing the website graphically just because they can. This really engages users, especially when interactivity is finally represented a quick response from users is present.
The aesthetic imagery and products in contrast with the minimal content and colours, strongly outlines the dynamic and professionalism of the Salt & Pepper company. Interactivity is heightened from the lack of content, to find the bursts of graphics and products.
Define Information/Instructional Design
Information and Instructional Design is created to teach and inform audiences of a particular topic or activity. Information and Instructional Design is specifically catered to engage users with specific sequences and strategies based on how individuals or groups learn. These specifications in Information and Instructional Design are aimed to provide learning outcomes through guided design.
Precedents
HUNGRY BOOK: A instructional website that teaches users how to cook recipes using specific methods and ingredients.
The website Hungry Book is bold and striking, the visual appeal helps aid in remembering large amounts of information and the organisation of step by step guidelines.
The website design uses simplistic layouts of information, allowing easy to follow steps and navigation. The simplistic hierarchy design makes content less overwhelming and straightforward, this is effective when learning new information.
Hungry Book uses stunningly striking illustrations, using bold colours and dynamic imagery, creates layers amongst content. These layers help aid in visual memory, helping users learn more productively and engagingly.
The aesthetic use on the website, helps create order amongst content and make users feel practical and organised. The blueprint sketch like background and colourful illustrations allow balance, that helps users direct their concentration on the important aspects. The contrast design also helps users create distinction between steps, and help guide in memorising.
Hungry Book provides interactive guides that follow through instructions and animation that depict the process of the recipes. Representing one instruction at a time and allowing users to follow along at their own pace ensures comfortability for the user to learn in their own way. Animation demonstrates visual steps, helping ensure deeper understanding of the information users read.
ZWIFT: A instructional and information website that trains, guides and connects cyclists from all around the world.
The Zwift website uses aesthetically creative photography to engage viewers in learning and exploring content. The look and feel of the website is dynamic and rich in typography, colour, images and content; the bold options of design serve great purpose in making it easy to consume and interpret content, creating a lasting visual imprint and memory of information.
The layout of Zwift is neat and engaging. The content is direct which makes it easy for viewers to follow along to and guide finding specific information. The organised layout also helps users flow through content with being bombarded with information.
The use of animated videos positively contributes to interactivity with content, which develops a higher understanding of information, and making lasting impression within memory and the users comprehension in learning.
The instructional and informational website provides flexible training that advocates for each individual who may want to use the useful platform. Having access to multiple options when learning, encourages users to continue their education, whilst maintaining their specific lifestyle
There are many resources, guides, links and professionals that can be reached on the Zwift website, this allows confidence of users- knowing they can trust the website and its sources. The abundance of resources also allows users to adequately learn and provide them with help in all aspects of their learning journey.
ETHICS FOR DESIGN: A informational website about designers and the impact of design on the world.
The website Ethics For Design is coloured coded, differentiating large amounts of information. This design element helps users concentrate on one concept at a time, whilst keeping organised and underwhelmed- this encourages focus.
The largest element of the website is a documentary video, that provides the bulk information of the website. The video is displayed in a alternative and unique way, where you can choose to adjust the screen size. This feature allows users to accommodate the content to how they are comfortable and will interpret the information best. Although the feature aids in learning, it also aids in representing the visual language and concept of the website.
The categorised information is accompanied by photographs, nothing overly graphic or animated. This simplistic approach directly highlights the main points of the content, and allows attention to detail when comparing the interactive and non interactive elements. This engages users and keeps them alert.
The layout and structure of the content uses design principles that represent the theme of the website. When representing statistics and facts, the website design uses minimalist and innovative design. This design intrigues users to interpret information in a new way, grasping the content information.
There is a range of resources, interviewees, videos and images that further assist in understanding the information expressed throughout the website. The sources are sophisticated and fitting to the concepts of the website. The bold and eccentric designs push further interest to explore and comprehend the information, allowing new perspectives to form with guided visual encouragement.
Interactive Digital Media Links
http://www.cyclemon.com/index.html
http://species-in-pieces.com/#
natashakelly.home.blog 