Interactive Design - Final Project

-

Week 8 - 14
SUNG J XIN/ 0370139/ Bachelor of Design (Hons) in Creative Media
GCD60904 Interactive Design
Final Project

Instructions


Final Project




Homepage


Markets

Services

About

Contact


Reflection

I think this was a very interesting module and I got to learn how to create an interactive website. This is useful knowledge in the future even if I don't pursue UI/UX Design, since these skills can be used for working in a small business as well. Website design looks easy when you understand how everything works. However there will also be a lot of problems that you will encounter on this journey, especially with technical issues that were a very usual occurrence in my experience.

When I was making the prototype, I wanted to go for something that looks minimal and also stylist, with bold colour choices that suit the brand's identity. I took some inspiration from websites with a similar colour scheme to use as a reference. I liked how clean and simple those designs looked so I wanted to do that with my redesign of Mimarch.net.

I chose this website because while it doesn't look bad for a typical website, some of the UI/UX design choices bothered me, such as the unnecessary animations on the buttons , which could be disorienting to look at  especially for people who are prone to be dizzy or sensitive to bright lights and sudden movements.  The typefaces used in this website were nice, but inconsistent with the overall design, so I wanted to use a uniform typeface for most of the redesign, and saving a unique typeface for certain texts. Some of the layout looked awkward and is not functional for mobile devices at all due to its weird website wireframe. So after I had created a prototype with all these considerations in mind, I began working on the html and css files. 

I looked at the class notes along with some searches from the internet for some useful codes I can use in my website. There were a lot of interesting codes and I had a hard time choosing which ones I wanted to use. I focused on putting the basic elements such as the navigation bar and footer before adding in the more difficult elements, such as hovered boxes or a scrolling box. I was starting to struggle during this time because the program would occasionally lag and crash and I would have to wait a while before being able to continue my work. Thankfully I save every few moments so no progress was lost, but even then it was frustrating having to deal with this issue with such a minimal design that I went with. 

I looked for various sources for the CSS stylesheet online, from UI/UX designated websites for website design to UI/UX designers on YouTube. I had to keep checking with the HTML file to see what went wrong in the code for certain parts of the stylesheet to not be applied properly. Even after submission, I still think there were some technical issues that I was not able to resolve on time. I did the best that I could to ensure that the design was still there.

I think I enjoyed doing the homepage the most for this final project, especially since it is the heart of a lot of websites, which shows the user a first impression of what kind of website or corporation they will experience. I was also quite satisfied with the navigation bar and footer especially since they should be present in most if not all of the web pages. I even changed up the appearance of the logo to look more visually appealing with a pop of colour in this mostly desaturated website.

There were definitely some struggles that I had with this project because of technical issues. At some times I could barely move my cursor and interact with the coding because of how slow my laptop would be. I needed to force quit after a quick save and wait for a bit to be able to continue with the project. This would happen a lot in my experience. I have yet to figure out the source of the issue but it had definitely affected the overall quality of my project.

The CSS stylesheet was a struggle to go through as well due to how it would not cooperate with the HTML code even if I had followed a coding that was proven to be effective. There were times when the style would be applied properly and times when the style did not change a thing at all, so it was daunting to go through what went wrong with the code when it happens.

Overall, I think this module is fun and interesting for those who are pursuing a UI/UX degree or to work in the industry, since there's so much potential for interactive website design that could bring a positive impact to the creative industry. While I may not be the one for this specialisation in design, I would recommend it to those who are willing to learn more about it.

Comments

Post a Comment

Popular posts from this blog

Interactive Design - Project 1

-
Image
Week 1 - 6 SUNG J XIN/ 0370139/ Bachelor of Design (Hons) in Creative Media GCD60904 Interactive Design Project 1 Instructions Submission Presentation Design Evaluation From the homepag e, it can be determined that the website’s representative colours are red, black and white. These colours contrast with each other nicely and makes the important information stand out clearly. The colours could be applied differently to make the website look more visually pleasing to the eye. The fonts used in this website are Arial and Helvetica. These fonts make the contents of the pages look easy to read without looking too cluttered. However, In some pages, the font used is Cormorant Garamond, which looks very different from Arial and Helvetica , so there is a dip in consistentency in its font choices. The same can be said about the branding or logo, which has 3 different fonts that don’t match with each other at all. User Experience (UX) When a user wants to go to any of the tabs such as ...
Read more

Design Research Methodology : E-Portfolio

-
Image
  Week 1 - 14 SUNG J XIN/ 0370139/ Bachelor of Design (Hons) in Creative Media RES 60603 Design Research Methodology Final Report Instructions Final Report Video Presentation Presentation Slides Feedback Reflection Experience Task 1 At the beginning of the module, we are required to search for a topic that interests us, with various sources that are related to it, whether it is directly related or mentioned somewhere else. A topic came to mind about minimal illustrations because I had been looking at some minimal designs prior to the start of the semester, so I decided to base my topic around it. It was a bit difficult to think of the research questions and research objectives that aren’t too basic and easy to answer. I came up with some and received feedback from Miss Jinchi to improve the research questions and research objectives to make them more interesting. I wrote down the problem statement using paraphrased sentences from existing sources and shortened it more to make it mo...
Read more

Information Design - Exercises

-
Image
Week 1 - 7 SUNG J XIN/ 0370139/ Bachelor of Design (Hons) in Creative Media GCD 60504 Information Design Exercises Instructions Exercises Exercise 1 - Quantifiable Information I have a packet of colorful cotton balls that I could use for this exercise. There were too many so I picked out a usable amount that still has some variety in colors.  Fig. 1, unsorted cotton balls Then I arranged them by color in a swirly pattern and counted how many of each colored cotton ball there is. Final Composition Fig. 2, final composition with cotton balls Exercise 2 - L.A.T.C.H Infographic Poster For this exercise, we needed to organise a group of information that combines and utilised at least 4 of the L.A.T.C.H principles. I have decided to choose sharks as my topic and listed out the L.A.T.C.H principles I will be using, which will be; L (Location) = The Mediterranean Sea A (Alphabet) = Shark Names by Alphabet C (Category) = Species of Sharks H (Hierarchy) = Apex Predators, Mid-Level Predators,...
Read more