Interactive Design | Final Compilation & Reflection
22.4.2024 - 3.8.2024 || Week 1 - Week 15
Yong Zhen Xing || 0359473
Interactive Design || Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Compilation & Reflection
Task Progression
Exercises
Project 1 : Prototype Design
Project 2 : Working Web Page
Final Project : Design, Exploration and Application
Exercises
22.4.2024 - 16.6.2024 | Week 1 - Week 8
Exercise 1 : Web Analysis
Website 1 : Sculpting Harmony (link here)
fig 1.1, Sculpting Harmony : Main Page (On Computer)
fig 1.2, Sculpting Harmony : Introduction to Chapter 1 Transition (On Computer)
Sculpting
Harmony is a website about how the Walt Disney Concert Hall (WDCH) was
designed. In terms of what the purpose of the site is, I think it is
communicated well as the information of the site is immediately stated
upon entering the site (fig 1.1). As for the layout, it is very
simple but I feel like the spacing for the text and image could be
improved and less far from each other on computer while on mobile they
could have made it so the image and text fit better in a single screen (fig 1.3).
When it comes to visual design, I think the site nailed that aspect. It
only uses a combination of 2 colours most of the time in each section
which makes it very pleasant to the eyes. Typography in heading
definitely looks strange with its distortion but it makes up for it with
its animation as you scroll (fig 1.2). For longer texts, the font choice is fine but I find the big first letter (as in fig 1.3)
with it's continuation being the small text below, very uncomfortable
to read. The imagery choice is good with some close-up shots for the
modeling process and paired really well with the background colour
choice.
fig 1.4, Sculpting Harmony : Chapters / Menu (On Computer & Mobile)
Moving
on to functionality and usability of the website, in this category I
think the navigation of the website is pretty straightforward and direct
to any users. It uses a one page scroll system with a single menu
button (fig 1.4) for
navigating the each different sections which I think works pretty well
but the scrolling is way too long for what is it trying to show. Upon
entering the site, users will also be given the option to enable sound (fig 1.5) which is a neat touch if they want a background music to play, however the video's sound (fig 1.7)
doesn't play because of this. They could have improved this by adding a
specific button to play sound specifically for the videos portion. The
models being viewable in 3D was also really unique as it had
interactables view points on it. This would bring up a completed part of
the WDCH from that view which makes the website more fun to explore (fig 1.5).
Other interactables such as hovering over or clicking a button always
played an animation which makes it very direct in terms of communication
to the users. Next, is the quality and relevance of the website's
content. In that aspect, it would be pretty accurate as it is taken from
the Frank Gehry archive. Getty (The Research Institute) also got Frank
Gehry to appear and talk about the WDCH (fig 1.6). Not only is
the website insightful, but the website is well organized and planned
with its story telling in each different sections.
As for the performance of the website, I think it is really quick and responsive, some of the animation that plays goes by fast yet still very noticeable to the user is what makes interfaces like this feel smooth and elegant. The load time when entering the website for the first time is fairly quick and acceptable even when switching to my mobile data. For compatibility, the interface is well optimized with any devices whether it be a smartphone or a computer. Finally we reach the strength and weaknesses for the website. When it comes to strength of the website, pleasant user interface with it's strong eye-catching aesthetics comes to mind. However the layout of the site and font choice could be improved along with the very long page scroll. With that being said, it is definitely still a well-made and generally a good website.
Website 2 : Loket Design (link here)
fig 1.8, Loket Design : Main Page (On Computer)
Loket
Design is a website to showcase their design studio specializing in
designing consumer products and brands. This is stated when you enter
the main page of the website allowing users to know what the website is
about immediately (fig 1.7). Another thing to note is the visual
design for the page, it uses a bold red colour as their main colour with
a simple but functional font. This makes it so that the website has its
own distinguished identity. The layout of the site also utilizes a lot
of white space so it is very easy on the user's eyes (fig 1.8). However when it comes to their product page (fig 1.9),
they definitely made the size of the images/link too big on computer
compared to on mobile. This makes browsing the products way more
troublesome that it should be. Unfortunately, this same layout is also
used in the packaging page. This could have been improved upon by
displaying the products in a landscape orientation and making the images
smaller so that it could reduce the amount of scroll for the page. As
for the images, I think they done a great job trying to showcase their
products and with its simple layout, it looks clean. However, when
browsing on phone, I have noticed that they kept the banner images the
same resolution so it looks off when viewing on mobile (fig 1.10). A simple improvement is by resizing it for phone specifically.
fig 1.12, Loket Design : Interactive Elements (On Computer)
Next, we move on to the functionality and usability on the website. The website has only 3 navigation button which makes it easy for users to filter by category. The website is also relatively easy to browse through for any users as it only has a few pages. There were only a few interactive elements in the website, most of them being hovering over a product/section for it to communicate with the user which is generally acceptable (fig 1.11). I have noticed compared to my the first selected website, that the navigation button in this site didn't show any form of interaction when hovering over it which is kind of a missed opportunity/oversight in my opinion. In terms of content, I think it is straightforward enough for a design studio. It doesn't need to show technical content and knowing it's coming from the design studio that made each product, its content is accurate. The content of the website is also well organized and tells its own story.
While
browsing around the website, I found that the responsiveness and load
time to be up to standard which is generally pretty fast, even on mobile
data. For compatibility, on both computer and mobile phones, the
website is optimized well which is generally a good practice for any
website design. Lastly, the strength and weaknesses for the website. As
for the strength, it is a easy and user-friendly to navigate the
website. I find that the theme/branding of the website also does a good
job on trying to sell you the product (which is obviously their goal!).
For the weaknesses however, the layout of the product and packaging page
is pretty bad causing for a longer than needed scroll just to browse
products. Interactive elements also feels lacking in my opinion and could be better.
I also feel as if there should be a consistency on the banner images
especially for different devices too. With that being said, it is still a
fairly good website especially when it's trying to promote products! It
is simple but sometimes simplicity is all you need for a good website.
Exercise 2 : Replicate a Website
Exercise 2 : Replicate a Website
Website 1 :
fig 2.1, Final Website Replication 1 [PDF] (13/5/2024)
Website 2 :
fig 2.2, Final Website Replication 2 [PDF] (13/5/2024)
Exercise 3 : CSS Layout
Click here to view the website! : Zucchini Bread Recipe
Project 1 | Prototype Design
13.5.2024 - 28.5.2024 | Week 1 - Week 4
13.5.2024 - 28.5.2024 | Week 1 - Week 4
Link : View the Prototype Here!
fig 4.1, Final Digital Resume Prototype Design (27/5/2024)
Project 2 | Working Web Page
17.6.2024 - 30.6.2024 | Week 9 - Week 10
fig 5.2, Final Working Webpage [Phone View] (28/6/2024)
Final Project | Design, Exploration and Application
24.6.2024 - 3.8.2024 | Week 10 - Week 15
17.6.2024 - 30.6.2024 | Week 9 - Week 10
Link : View my Web Page here!
fig 5.1, Final Working Webpage [Desktop View] (28/6/2024)
Final Project | Design, Exploration and Application
24.6.2024 - 3.8.2024 | Week 10 - Week 15
Link to Final Website : Risk Of Rain 2 Fansite
fig 6.1, Final Project Website [Desktop View] [PDF] (1/8/2024)
fig 6.2, Final Project Website [Mobile View] [PDF] (1/8/2024)
Reflection
Experience
Throughout my adventure of 14 weeks in Interactive Design, I must say it has been a mixed bag. Since the module is all about coding, it really comes down to if I enjoy coding or not. As a person who has learned a bit of HTML and Python back in high school, I was not really good at it. And revisiting it again after a couple of years makes me finally understand something. I finally understand that coding is not for me and I'm really glad I didn't end up taking computer science when I entered college. While I understand how to do HTML and CSS properly now, I certainly don't wanna be doing it on a daily basis. Through the 14 weeks, I have gained a lot of knowledge on website and also coding which was fairly interesting. While coding, the most joy I got was when I finally got the code to do what I wanted to. And unfortunately that's the only joy I ever gotten through this module. In summary, although I didn't really enjoy the module much, this module was still very beneficial as I get to explore more into website design.
Observation
Throughout each task, I could see the how helpful each task was for the upcoming task since the module is essentially just understanding about web fundamentals. I have also noticed that there are so many elements to consider when designing a website. Elements as simple as colour schemes can affect how a user could feel about the website which was interesting to me. I observed classmates' work to see to gain inspiration for my website as well. Some of their work were neatly presented which gave me some ideas for mine as well.
Findings
Findings
Through the 14 weeks of Interactive Design, I have learned that website design is quite complex and there are many things to consider when web designing. Understanding the user interface and user experience is key in making a good websites. I have learned that in coding, you should have basic understanding of a certain code that you want to use for an element before only implementing in your own. This is so you can easily fix it and save a lot of time. I have also learned that coding is essentially just finding a way to overcome a problem or to reach that solution.
Comments
Post a Comment