Week 3 Interactive Design Notes

Design Patterns

In order to start working with displaying designs, suggestions such as starting with smaller screens such as mobile provides an effective use of structure. From as small as a mobile screen, to a tablet, then a laptop and a desktop, Waterson suggests that doing this method for interactive design allows us to prioritise and order our mental structure. Using desktop screens as a general point of departure, there may be minor errors that smaller screens such as the iPhone can have, eliminating this presents an effective overview.  Most projects on desktop provide a wide variety of different appealing designs and patterns. Interactive designs can go beyond style, having a constructive and appealing design is crucial to attract the audience to the interactive projects.

Furthermore, to consider these interactive patterns, Alexander suggests questions for graphic designers to ask themselves “Does it occur and it felt in the way we have describe it and the solution, does the arrangement we propose in fact resolve the problem of design patterns. “

In the end, patterns are just patterns, it depends on the type of site you are working with and the problem, design patterns are not only a solution and sometimes not appropriate, as designers should consider other factors first before resorting to design patterns.

Portfolio sites online are currently free to use, its simplified and minimal range of sites for the public to use have common patterns and layouts. Sites such as WordPress.com or Wix.com accustom to these layouts, these design patterns appear as appealing and attractive and guide users through a smooth experience. The more the consumers use these design pattern sites, the more it changes the way the audience consumes the web and explore interface patterns.

Types of Design Patterns

Another design pattern that is seen throughout websites is the “Hamburger” menu, it is recognisable for users as a simplified way to open a menu. These three horizontal lines can be used to navigate specific webpages, this also saves space on the design and is very effective with consistency. It is best described as a drawer men as a click or drag, it is a contemporary access for all users and makes interactivity easy to understand and guide though.

A design pattern such as an account registration button, also helps aid users to be interactive with their sites to sign up or to type a form out. This presents a manageable way to enable subscription and registration to all users.

Long scrolls are present in any form of screen,having long scrolls provides users with the ability to manipulate and understand multipage information or for storytelling. This simplifies navigation systems as the continuation of scrolling creates interactivity to be fun.

The purpose of card layouts are for scanning and concepts, these cards are the guidelines to placing specific information in which area that the designer wants. These are also referred to as content containers as they are easy to re-arrange depending on the blog spread, and comes in various shapes and sizes. Hero images are high definition images that presents the purpose of gaining the users attention, throughout blogs and portfolios, hero images play a massive role in providing interest to the users.

Animation presents effective storytelling, from advertisements to simple descriptions of animations can create many stories. Animation is also very interactive towards the users, it can be broken down into two categories, a lifestyle is represented as a primarily tool and can be seen as a pop up, parallax scrolling, or a small scale animation that presents loading bars or hover tools.

An example of loading animation entertains users when they are waiting, the more interactive it is the more entertaining users will experience. To consider these loading screens should match personality and palette to the according site.

Galleries and slideshows demonstrates a way to showcase multiple pictures without overwhelming users, this gives the users the chance to look through and depict these images and have the choice to view them or not. This is super effective for portfolios.

Motion animation unlike small scale and lifestyle, presents an interesting way to get the users engaging as a motion, this also intrigues the user to be entertained as well. The users can determine the pace of their motion animation and are in control of how interactive they want motion animations to be. Hero images can also be used within motion animation.

Material design uses a shadow effect to present depth of a textbox or a picture box, to make it realistic and creates a clean design to focus on the users experience. This interface can be experienced across all devices. Responsive design is a universal design that all inteface experiences with, the representation of responsive designs are simple and cheap for businesses to build a mobile friendly site, and to engage users to use mobile more. The responsive design experience provides performance as a key aspect to the users.

Flat designs are also very universal and provide a flat version of the site, it also provides a simple and minimal way of presenting the sites.