Interactive Design - Exercises

4/04/19 - 23/05/19 (Week 1 - 8)
Azmina Fathima Haris
Interactive Design
Exercises

LECTURES

Lecture 1: Module Introduction 
Week 1 (4/04/19)

We began with an introduction to interactive design and Mr. Shamsul briefly explained what we would be covering this semester along with the softwares we would be using, primarily Dreamweaver CC.

Lecture 2: UI vs UX
Week 2 (11/04/19)

Today we went though the difference between UX & UI design. UX design focuses on the structure, layout & navigation of the website. The visual appearance has little impact on the outcome, which would be prototypes and wireframes. UI design, on the other hand, focuses on the way functionality is displayed and involves elements like - 

- input control (buttons, text fields, radio buttons, dropdown menus, toggles, etc)

- navigation components (slider, search field, tags, icons)

- informational components (progress bar, notifications, message boxes, etc)

- containers 

Lecture 6: CSS
Week 6 (9/05/19)

This week we started with CSS, different style styles, linking style sheets, precedence and more.

Lecture 7: Layout Design
Week 7 (16/05/19)

This week we continued with the previous presentation on layout design.

INSTRUCTIONS



EXERCISES

Web Evaluation (Week 1)

For this class exercise, we were divided into groups and asked to find 6 good websites and 6 poorly designed websites from Webby Awards and The Best Designs. We had to consider its purpose, target audience, layout, navigation and and overall effectiveness. These are the websites that our group found, along with the pros and cons of each - 

Basic Interface Design (Week 2)

In this exercise, we were asked to create an interface for an information kiosk using one scenario, for example a visitor hoping to find an event hall at Taylor's. We had to do this A3 sheets of paper as a prototype. Our group chose to do it on a new student trying to find the their way to class, E1.08. We had to design each of the pages that the user would have to go through to see the final result, which is the location of the class.

Landing page

Chose user option

Option categories for students

Under "classrooms"

Final result - details of the classroom shown, along with the map showing user how to get there

HTML Document Development (Week 5)

This week we started working on basic HTML pages using Notepad or TextEdit. We were asked to create basic page write about two paragraphs of content. We were also told to experiment with different tags such as lists, images and also add different styles for each. This was my process:

CSS Document Development (Week 6)

This week we started working with CSS and for this we were asked to create a similar HTML file as before but to experiment with various styles. This time we were asked to create four sections, add some navigation and work with different tags like lists. I chose to create an about me section, contact, interests and skills. I also added suitable images and list items to each section. Once we were done, Mr. SHmsul suggested adding a back to top button to navigate to the top of the page. This is the process in TextEdit:

Layout Design (Week 7)

We started working on designing layouts in CSS with an in-class exercise.

 

This was the stylesheet added to achieve the layout and colours - 

Layout Design (Week 8)

This week, we started working on a webpage based on given content to create a layout.

Final outcome - 

The page can viewed at https://photoshopworkspace.000webhostapp.com

FEEDBACK

Week 1: Mr. Shamsul said our evaluation was good but we should make the purpose of the website clear and state the target audience. 

Week 2

General feedback: Mr. Shamsul reminded us to stick to one specific scenario for the interface and to keep the number of steps for the user to navigate through to be kept at a maximum of 3.

Specific feedback: For the paper prototype of the user interface was simple and straightforward. He also pointed out that we had fewer steps to get the final outcome/result.

Week 3

General feedback: Mr. Shamsul told us to find out about most common screen resolutions before creating the website and to make sure that our call to action/ purpose of the landing page is clear. 

Specific feedback: I was told to start working on designing the page on Illustrator as my layout and structure was fine. 

REFLECTIONS 

EXPERIENCES

Week 1: Evaluating good & bad websites gave us a clearer idea of what could be the ideal, in terms of its purpose and target audience is clear

Week 2: Paper prototyping turned out to be a fun process despite the planning being rather difficult. It was hard to agree on the various options that would be presented and how the final result would be displayed.

OBSERVATIONS 

Week 1: I felt like some websites featured in the web design awards sites were one that did not deserve recognition at all. Their purpose was often very vague, and the call to action unclear to us. At the same time, different groups had found our poorly designed websites to be good ones and vice versa.

Week 2: Our group had a hard time imagining how it would be for a new student and what options would be presented in the main page under the student option. We were unsure of how to narrow down the options in the menu and what we could put under one.

FINDINGS

Week 1: Designing a website is a difficult to task with many things to consider that would help make the user's experience easier - right from scrolling to how long the page takes to load.

Week 2: I realised how important it is to be able to put yourself in the user's place and create an interface that is easy to navigate. An interface that is hard to navigate with several pages to go through when you need to find a place; especially if you cannot find anyone to ask around, would not be very reliable. 

FURTHER READING

The Difference between UX and UI design


UI design stands for user interface design and user interface designers deal with the visual appearance of the application and decide what its going to look like. The interface may comprise of buttons users click on, the text, images, sliders, text entry fields and forms, and all other items that a user could interact with. This also includes the overall screen layout, transitions and interface animations. All these minor interactions must all be carefully designed. The colour schemes, button shapes and fonts should also be considered. The interface must be designed so that it's visually stimulating and themed to match the purpose and personality of the app. In short, UI designers create the look and feel of an application's interface.

On the other hand, UX design, which stands for her experience design, deals with how the user interface actually operates. A user's experience of the app is determined by how they interact with it - how smooth navigation is or how efficient it is to interact with it. UX designers determine the structure of the interface and the functionality, how it is organised and how all the parts connect with one another. Their success is determined by how seamless and smooth the interface feels to the user, but if navigation is complicated and unintuitive, users will have a poor experience.