Throughout Lecture Pod 3: Design Patterns, it states the different types of basic design patterns for screen and how and where they are used within a website plus what each of them mean. In terms of the conventions that have developed; user interface and page composition.

According to Christopher Alexander, he refers to it as design patterns in interactive design go above and beyond style plus visual repetition. Having similar and reusable solutions that have a working function often seen in screen design. Whilst User Interface Design Pattern Library states that, design patterns can be defined a recurring solution that solve common design problem.

Using responsive design has some side effects, due to other sites being similar also the increase of WordPress sites and theme provided. Because of the way the we’ve altered and consumed the web, resulting a large of common user interface design patterns and therefore have little way for innovation for user interface patterns.

Patterns used within a website:

  • The Hamburger Menu – has three parallel horizontal line; saves space
  • Account Registration – e.g. found whenever users register for a site.
  • Long Scroll – works well for sites, wanting to lure users through storytelling and mimic multipage site.
  • Card Layouts – presents information invite and perfect for scanning; easy to rearrange.
  • Hero Images – one of the fastest ways as it grabs the user’s attention
  • Animation – used to enhance the sites storytelling, more interactive/entertaining for user’s experience.
  • Material Design – uses shadow effects, movements and depth, showing a realistic design to the user.
  • Responsive Design –relatively simple and cheap way for businesses to build a fully functional mobile friendly website.
  • Flat Design – compatible with other trend.

Animation include:

  • Loading animations
  • Navigation and menus (non scrolling) Animation
  • Hover Animations
  • Gallery and Slideshow Animation
  • Motion Animations
  • Scrolling and Background animations/videos


Therefore, from this lecture I absorbed the patterns mentioned within symbolising its various uses however, not all of them should be used and therefore, should be only incorporated to suit your website. Also, the context within should enable the audience to understand what your project is about and whether or not the audience is satisfied with the design.




Screen Shot 2017-03-08 at 9.32.14 am

What is the interactive about?

It is an interactive that is about a simple way to capture and share the world’s moments. Being able to follow friends and family to see what they’re up to. Alongside discovering accounts from all over the world that are sharing things you love and basically enjoy.

Who is it designed for?

I believe that this mobile photo sharing application and service is aimed at an audience for young adults (16+) and above. It is designed for this particular demographic as majority of the users are divided equally to use at least some form of Android and Apple device/s.

What knowledge does it assume of the target audience?

It assumes the knowledge of the target audience in setting up a Instagram account is quite an easy procedure. In terms of activating the account, the user will be guided directly through the process of adding personal details through to posting pictures, writing comments and sending direct messages. From there, the user is then expected to explore and facilitate themselves around the application. Within the ‘Options’ section through the application, it hosts various settings, account and support based options. Examples include linked accounts, changing your password and reporting problems. Including clearing search history, adding multiple accounts and logging out.

Screen Shot 2017-03-08 at 9.33.30 am

Describe the type of user interactions, and the user interface.

As for the types of user interactions and user interface that Instagram offers, are the following. Being able to:

  • Post photos and videos you want to keep on your profile grid. Edit them with filters and creative tools, and combine multiple clips into one video.
  • Share multiple photos and videos to your story. Bring them to life with text and drawing tools. They disappear after 24 hours and won’t appear on your profile grid or in feed.
  • Discover photos, videos and hashtags that you might like and follow new accounts in the ‘Explore’ tab.
  • Send private messages, photos, videos and posts from your feed directly to friends with Instagram Direct.

What can you say about the visual design- layout, colour, and typography? How would you describe the style?

In terms of the visual design for Instagram, the predominant colours that are used within Instagram (currently) is both black and white, the white being incorporated for the background and black for the typeface within. In saying so, using black and white gives the illusion as though there is quite a bit of negative space compared to there being high amounts of various colours. As for the layout, being very straightforward and creating a simple template for users to navigate using interactive. Also the typography, being quite easy to read, whether its the site title or headlines. The best way to describe the style of Instagram is vey effortless and contemporary.

What improvements would you suggest?

As for the improvement/s, I would suggest (being a current user of Instagram) would possibly be changing up the colour palette/scheme. Possibly taking the black and white approach away and adding more of a subtle choice of colour. Either making it a public vote, via Instagram each week so that it is involving the world of Instagram fanatics. It then, would be implicating that it wouldn’t look so boring and mundane.




Throughout Lecture Pod 2: Process and Context, it covers the fundamental briefing introduction to the concept of context being an important components consider as interactive designers when designing interactives. Alongside this, there are 2 parts into the process; one being the design process overview.

The procedure can be best described, Bill Verplank identifies up to 8 distinct phases that can be seen in the interactive design process below which including the following.

  • process

Therefore, based on this theory, it indicates that being interactive designers, we can use many tools and techniques to assist our minds to generate vital and potential solutions. Most processes are very low-tech based processes that started with pencil and paper to help us understand, define and frame the problem. In saying so, it shows that direction and steps in facilitating the missing information about the problem, being solved and achieved. Alongside this process, personas are created to better understand people and conduct task analysis to know what is being done.

As designs progress we need detail, as mentioned above from pen to paper to pixels on screens but the majority of time should be spent with multiple sketches and solving the issues as is. Learning from people with real situations, such a ethnography, surviving and focus groups. To facilitate design ideas  and generate decisions, including  precedent resource, which is studying existing products, observe  people and test prototypes.

Furthermore, as for the context, there are two parts, contexts for or of use. All surrounding questions as to what, how and where the uses are made. Various context of use and for use are due to the different devices and urgencies. Also, personal behaviour based on type of context scenario.

The following questions are to be asked based understanding the needs and wants and the circumstances can we then successful interactions:

  • What is the situation?
  • Who will be using the device or interface?
  • How long will the interface be used?
  • Does the experience need to be extremely simple?
  • What are the person’s needs and goals?


Therefore, from Lecture 2, I learned the essentials in the fundamental to the concept of context being an important component to consider as interactive designers when designing interactive. Whether its regarding ideas and thoughts, alongside the context towards the project, being a good or bad design.