Understanding how to create effective Design Patterns is an important factor when designing for interactivity as Design Patterns influence how a user engages and navigates through an interactive. Poor and inappropriate use of design patterns for an interactive can result in the failure of the users navigation through an interactive, it can be unappealing and fail to engage the users and make the process a struggle. The most important factor in creating the right design patterns for the interactive is to know the context and purpose of the interactive which was explained in the previous post. Design patterns can in many forms and it is essential to use the right pattern for your interactive in order for it to be a success.

The first thing that needs to be considered is if you are designing a website and if you want it to be mobile responsive. Mobile responsive design has become a very popular form of design recently due to the introduction and overwhelming use of smartphones. Websites are now being designed to not only work functionally on a desktop and laptop but also on a mobile phone and tablet with a format that works effectively for each screen size. The most common way to design in a responsive format is to design mobile first. To design mobile first is to design and interface that works best for the smaller screens then work the way up to the larger screens. Designing mobile first allows the designer to prioritise the features they include in the design that will be effective on all screens.

Architect Christopher Alexander discusses design patterns in his book Design Pattern Language which focuses on patterns of design in all areas from cities, gardens, buildings, interiors, furniture, fixtures etc. His book focuses on how words describe patters supported by drawings and infographics instructing methods on how to develop safe, practical and aesthetic designs. His book emphasises how design patterns go beyond style and aesthetics and more towards function and individual engagement with the environment.

User interface (UI) patterns

Websites have a lot of similar user UI design patterns as design has matured over time to develop a very effective form of UI that works across many types of websites. UI patterns today have little in terms of innovation but there is no real need to reinvent patterns if these common UI patterns function well in engaging and guiding the user through an effective, functional and successful experience.

Types of User interface patterns

Hamburger menus: A Hamburger consists of a button with the icon with three lines stacked on top of each other to resemble a hamburger. The symbolic meaning behind this is a Hamburger is what holds everything together. A Hamburger menu acts as a button to reveal a menu with links to different pages for the user to navigate as this way the menu saves space on the webpage. The Hamburger menu is usually positioned in the top left or right hand corner of a page visible but out of the way of the content on the page. The hamburger menu can be used to reveal hidden information by tapping or dragging the button and tapping back on the button to close the menu.

• 

• 

• 

Account Registration: Account registration is a form out or a button to allow the user to link a social account or to sign up. Multi – step forms are used to break up information into multiple steps and complete one step at a time to make the form process less overwhelming and easy for the user to follow through the process.

• 

• 

Long Scroll: A long scroll is used to lure users through storytelling and keeps the number of pages as small as possible.

Cards: Cards are a form of multiple squares on a webpage which consist of a title, icon, an image and a small amount of text as a description. Cards act as small webpages providing a link to the page with the full article/information.

Hero Images: Hero images are positioned above the scroll with text over the top of the Hero Image. Hero images allow for the rest of the webpages content to be loaded and act as landing image when the user enters the website.

Animation: There are Two types of animation used for interactivity which is large scale animation and small scale animation. Large scale animation consists of animation as an interaction tool for example hovering over an icon and the icon changes shape/colour, size etc. Hover animations are used to inform the user of the function if the users are unsure what the function is. Navigation menus consist of animation to reveal menus for the user. Galleries and slideshows use animation to present a portfolio or reveal products etc. Small scale animation doesn’t require user engagement for example loading icons which are used to entertain the user as they wait for a webpage to load.

• 

• 

Motion Animation: Motion animation is used to draw users attention, assist in visual hierarchy, call for an action and reveal menu items. Scrolling is a common form of motion animation as smooth scrolling provides ease to the user exploring the webpage.

Material Design: A form of clean design focusing on the user experience.

Responsive Design: A simple and a cheap way for businesses to build a fully functional mobile responsive website that works on all formats. Responsive design consists of collapsing of content as screen sizes become smaller. For example a set of panels are presented horizontally on a desktop has all of the panels stacked on a mobile device. The issues with responsive design is the performance of the website and the restriction on visual features that can be used on a large screen as it is designed mobile first.

From all of these examples of Design patterns you should now be informed of the different ways you can approach the design of an interactive project. Be aware to only use the features that are relevant to the what you are designing for as not all features will work well for what you are doing. Do research and take care when applying specific design patterns to an interactive.

Tutorial Activity: Plan/Pitch for Interactive Design Project

Workshop Activity: Wireframing the interactive website for how to make toast

After developing the site map in the last activity I then went ahead to wireframe the website. Taking in consideration the different design patterns I learned about this week it was important to work out the best user patterns to use for my website prototype. These design patterns are applied through my wireframes for the activity.

Workshop activity continued: Screen designs

After the development of the wireframes I then used the wireframes to create the final screen designed which would then be used to be prototyped and created as an interactive website.