interface design

Week 7: UI visual design patterns

Response to week 7 lecture pod

To fully understand UX and UI patterns, they are an essential term in producing interactive products such as website and app. Both of them are crucial to a product and work closely together as one to visualise the presentation, senses and reaction. 

UX (user experience)

It is the first design process for interactive products to enhance the customer’s experience when observing how they react to it. It aims to improve the usability and functionality provided in the interaction between the customer and the product. For example, researchers or designers in the UI/UX field relies on the element of creating:

  • User persona: create your own character related to your product 
  • User Scenario: Analysing how your persona act out when interacting with your product based on personalities, likes, dislikes and hobbies
  • Usability testing: ask questions and feedback on your product from the peer, professor, client or customer
  • Wireframe: A visual guide for your website or app to represent your skeletal framework and to demonstrate your development and plan of the layout 
UI (user interface)

In this stage, it means that your interactive product such as a website or app has been designed in term of look and feel. It also showcases the final presentation of the product and focuses on interactivity, responsiveness and efficient experience. Therefore, It allows for the user to gain an understanding of how your interactive product benefits daily lives and to help them seek content to complete their goals.

Example of my UI design 

These are my final UI screen designs are for showcasing my intention of creating an informative website about ocean plastic pollution and how it tied to the arising event of climate change. I have also created my own branding in order to value the marine life in the ocean and the aims to deal with plastic pollution as an environmental community. 

Home page
About page

Week 6: Studio activities

Task: Create 1 UI screen design with 3 alternative layouts

Down below are my three layouts for my interactive website that addresses the cause and effect of marine plastic pollution toward the world and tied to the future event of climate change.

AI Layout 1
AI layout 2
AI layout 3

User Personas

Responds to week 5 lecture pod

Definition

User personas is the representative of your users that is vital to developing a interactive product. They will help you to describe the audiences who use your product and enable you to efficiently identify and communicate their needs.

The most important aspect of user personas

Before creating your own personas for your interactive products, it is crucial that you fully understand your target audience. The essential of creating your own personas is to identify:

  • Goals
  • Behaviour patterns (How they reacts using the product)
  • Attitude, skills and enivronment
  • What platform they prefer to use and interact it on? (Desktop, tablet or mobile)

To further expand the understanding and insight of your interactive products, it is useful to question the users based on:

  • Personalities/attitudes (what type of a person is or how they reacts)
  • Likes
  • Dislikes
  • Interest/hobbies

Further questioning your users will give you more insight into how they approach your products so you can design a better experience to give them what they need.

My example of user persona for my project

My 1st user persona created from Zumio
2nd user persona created from Zumio

Week 5: Studio Activities

Dave Smith persona & moodboard

Firstly before getting started on the user persona for my project, completing this mini exercise has helped me to give me the quick insight of what is user persona and how/why is it important in the design process of developing an interactive product for the target audience.

Dave Smith User persona


Dave Smith mood board based on his interest/lifestyle

Design Patterns

Responds to Week 3 lecture pod

Definition

Design patterns are the differentiation of form for design solutions in interactive/interaction design. It was mainly introduced by an architect Christopher Alexander, who argued that pattern language allows the arrangement of the physical environment in relation to effectively solve the problem presented (C.Alexander et al, A Pattern Language, p.xv). His perspective of solving design solutions are defined with questioning: 

  • Does it occur and felt in the way we have described it and the solution? 
  • Does the arrangement we propose in fact resolve the problem? 
  • Depend on what type of problems to be solved? 

Examples

The examples down below are the design patterns which I thought is very important and essential to interactive/interaction design.

The hamburger menu:


Apptimize. (2018, May 4). The Ultimate Guide to the Hamburger Menu and Its Alternatives. Retrieved from https://uxplanet.org/the-ultimate-guide-to-the-hamburger-menu-and-its-alternatives-e2da8dc7f1db
  • It is a interactive button that organises your categories such as menus, pages or options in desktop, tablet and mobile version
  • It usually is displayed on the top left for functionality, save space for eye comforting and is user friendly

Account registration

How to register for an account at beckman.com. (n.d.). Retrieved from https://www.beckman.com/support/my-account/register
  • It is a form to fill out your detail of your name, sign up for newsletter, gain benefit (sales, voucher, point) etc
  • Help you guide through the process quicker and smoothly

Hero images

7 CSS tips to add some WOW to your hero image. (2016, October 11). Retrieved from https://www.csshero.org/7-css-tips-add-wow-hero-image/
  • A effective and fastest way to grab the user’s attention
  • It can be in animated videos to showcase the storytelling further and the emphasis on the theme and the environment
  • It is important that under consideration whether if it is suitable for the particular topic and the target audience
  • It can have a strong impact on the users in term of effect and parallel to caught their attention

To conclude, it is suggested and clear that these design patterns follow the design trend yearly to support people’s abilities to interact with technologies and interactive products.