Interactive Design - Project 2

23/05/19 - 06/06/19 (Week 8 - 10)
Azmina Fathima Haris (0337113)
Interactive Design
Project 2

LECTURES 

Lecture 8: Bootstrap
Week 8 (23/05/19)

We were given an introduction to Bootstrap. In class, we also tried out a tutorial to understand how it works.

Lecture 9
Week 9 (30/05/19)

Lecture 10
Week 10 (30/05/19)

No class due to public holiday so we continued working on our project.

INSTRUCTIONS



Project 2 

Our second project is to create a microsite for an event, The Troublemakers Manifesto, for which we also created a poster and collateral. Our microsite has to be an interactive invite for the same, so I decided to use the same theme (and artwork) as my poster and collateral. I planned out the colour scheme, typography and other elements using a style tile, as shown below, and also found some references.

Progress 

Over e-learning week, I started working on the code. Before that I found a template that would fit my layout - this was rather difficult but I finally decided to use Ziggy, as shown below. I felt it was pretty similar, the only major change would be to add a navigation bar at the top and to fix the diagonal backgrounds to my liking.

HTML file

Stylesheet

Final outcome at https://thetroublemakersmanifesto.000webhostapp.com

FEEDBACK 

Week 9: Mr. Shamsul approved of my layout wireframe for the website and said the moodboard was nice as well. He suggested ways I could do the diagonal layout.

REFLECTION 

EXPERIENCES

Week 9: Bootstrap turned out to be going well in class, but trying to do it on my own for the project was a nightmare. I really struggled to understand how things worked.

Week 10: This theme was not the most user friendly and I had a struggle making changes to it.

OBSERVATION

Week 9: I still didn't understand how the sizes worked in bootstrap and how it was supposed to work for all of screen sizes.

Week 10: What worked for my screen resolution might not be the same when previewed in a smaller screen size and this can cause major changes to the layout.

FINDINGS

Week 9: I felt like the layout I had come up with was going to be rather complex for Bootstrap.

Week 10: I should test my website in different screen sizes before uploading it to make sure its responsive.

FURTHER READING 

How Visual Design Makes For Great UX by Marli Mesibov



Visual design differs from interaction design. Visual design engages users by drawing the eye to the correct function, prioritising content through size, colour and use of whitespace, while interactive design simply focuses on the functionality needed to accomplish a task. In certain ways, visual design can be thought of as a combination of graphic design and UX design and it can make a huge difference in the way users interact with a screen.

Visual design has three main roles in UX - it helps us to communicate messages, illuminate actions and organise information. However, designers should not completely rely on visual design to offer users a good experience - functionality and accessibility still remains a priority and a visually attractive site would not compensate for poor construction. So, there are basic rules that UX designers should stick to reach a balance. First, is to stay consistent - a user should not be confused by the site and this could only make the site appear unattractive in their eyes. Next is to test visual concepts as well as paper prototypes and then, to not get distracted by trends and to stick to what is known to be functional, clean and simple. Despite the fact that design can look rather outdated and common, it is known to be effective and has been accepted.