Interactive Design - Project 2

-

30.05.19 - 06.06.19 (Week 9 - Week 10)
Tamara Audrey Saputra (0335846)
Interactive Design
Project 2

Lectures

Lecture 7:
23.05.19 (Week 8)

No lecture due to public holiday.

Lecture 8:
30.05.19 (Week 9)

 We were introduced to Bootstrap that will eventually help us create a responsive and neat website. Mr. Shamsul encouraged us to play around with the template and modify it a lot instead of directly copying the template.

Instruction


Microsite | Week 9-Week 10
30.05.19-06.05.19


In continuation of our Advance Typography collateral project, in this second project of Interactive Design, we are asked to create a microsite of the Troublemakers Manifesto event. We can use an existing framework called Bootstrap to aid us when making this project.

As it is a microsite, the information should all be in 1 page. We also have to incorporate our collaterals that we've made previously in the other class.

Before we proceed to create the site using the codes, we must first create a mockup of it as well as the mood board, wireframe, and have several visual references. Below is the slides containing all of these:



Below is the closer look of the microsite mockup, if the one on the slide is too small:


Process

After finishing all the things above, I proceed to do the coding in Dreamweaver. 

Final Result

Netlify Link:

Further Readings



This article discusses the importance of visual design in creating a much more positive user experience. By implementing images, colors, fonts, and other elements strategically help to enhance the design of the site and can improve the engagement of it. As it is said that humans tend to have more trust and higher expectations to things that are visually more appealing and great visual design also guides the user's eyes to correct functionality within the site.

There are 2 main takeaways for UX designers:

  1. Don’t rely on visual design alone to save a bad experience. The most attractive visuals won’t fix features or functionality that is wrong for the user or poorly constructed.
  2. Don’t ignore visual design! We all have competition, and visual design can be the strategic differentiator that encourages users to value one application over another equally usable one.
Rules of visual design were also given to guide UX designers who are just starting out.

  • Stay consistent.
  • Test visual concepts as well as paper prototypes.
  • Keep it simple, clean and classic.

Comments

Post a Comment

Popular posts from this blog

Advance Typography - Final Compilation & Reflection

-
Image
Tamara Audrey Saputra (0335846) Advanced Typography Final Compilation & Reflection Instruction Exercises Project 1 - Troublemakers Manifesto Colloquium Project 2 - Troublemakers Manifesto Colloquium (Collateral) Final Project - Design Exploration Submissions Typographic System fig 1.1: Axial #1 fig 1.2: Axial #2 fig 1.3: Modular #1 fig 1.4: Modular #2 fig 1.5: Grid #1 fig 1.6: Grid #2 fig 1.7: Bilateral #1 fig 1.8: Bilateral #2 fig 1.9: Random #1 fig 1.10: Random #2 fig 1.11: Radial #1 fig 1.12: Radial #2 fig 1.13: Dilatational #1 fig 1.14: Dilatational #2 fig 1.15: Transitional #1 fig 1.16: Transitional #2 Type & Play (Part 1) fig 2.1: "L" - Final fig 2.2: "Y" - Final fig 2.3: "E" - Final fig 2.4: "C" - Final fig 2.5: "F" - Final Type & Play (Part 2) fi
Read more

Advanced Typography - Exercises

-
Image
02.04.19 - 02.07.19 (Week 1 - Week 14) Tamara Audrey Saputra (0335846) Advanced Typography Exercises Lectures Lecture 1: Introduction to Advanced Typography 02.04.19 (Week 1) The class started with a brief introduction to the module outline and what to expect in the coming 13 weeks. We're then assigned into groups to do a short presentation regarding our given topic - Axial. Moreover, we were also shown several good examples of our seniors' projects to give us a rough idea of what's good and bad. Lecture 2: Typographic System 09.04.19 (Week 2) This week, we were introduced to the 7 Typographic System. Our group presented the Axial System. The following is the compilation of the whole class presentation. Lecture 3: - 09.04.19 (Week 3) No lecture is held this week. We focused on refining our work and were briefed about the next exercise. Lecture 4: Compressed History of Roman Alphabet 23.04.19 (Week 4) In today's class, some of our c
Read more

Advance Typography - Project 1

-
Image
14.05.19 - 21.05.19 (Week 7 - Week 8) Tamara Audrey Saputra (0335846) Advanced Typography Project 1 - The Troublemakers Manifesto (Key Artwork) Lectures Lecture 7: Designing Type 14.05.19 (Week 7) In today's class, several of our classmates presented a presentation regarding Designing Type. We then continued with our first project, Troublemakers Manifesto key artwork. Lecture 8: - 21.05.19 (Week 8) No lecture today. We continued with our key artwork and started developing our collateral. Instruction Project 1 - The Troublemakers Manifesto (Key Artwork) In this project, we were expected to create a key artwork of an upcoming conference called The Troublemakers Manifesto: A Design Colloquium . The key artwork will later be used across the collaterals. The collaterals range from: Poster (Statistic and Animated) Invite (Interactive) T-shirt, Sticker, Pin Badge, etc We were also provided the meaning behind  The Troublemakers Manifesto
Read more