Interactive Design: Final Compilation & Reflection
2024.04.23 - 2024.07.23 Week 1 - Week 14
Teh Ming En/0364908
Interactive Design-Bachelor of Design (Honours) in Creative Media--Taylors University
Final Compilation & Reflection
Instructions
Task 1:
Exercises
Project 1:
Prototype Design
Project 2:
Working Web Page
Submissions
Task 1: Exercise / Web Analysis
(2024.04.23-2024.05.14 Week 1 - Week 4)
The website link that I chose: https://www.csswinner.com/winners
Website 01: La Formosa
1. Purpose and Goals
|
| Fig 1.1 Homepage Of The Website |
The purpose of the website is to showcase the brand's beer. It promotes
its brewing process and ingredients to engage with consumers. The goal of
it is to create a memorable online experience for visitors and a
connection with consumers.
2. Visual Design and Layout
|
| Fig 1.2 Page Of Showcase The Beer |
The website is consistent with the color scheme of the beer packaging, which deepens customer memories of the product. The use of images is appropriate for the overall website.
|
|
Fig 1.3 The Word 'BOUTIQUE' Obscured By Image |
|
| Fig 1.4 Page Introduce The Beer |
|
| Fig 1.5 Text And Button Appear Crowded |
In terms of layout, the titles were displayed clearly on the pages. Some
text is obscured by images, this causes the text appear incomplete. On the
page introducing the beer, the content is lengthy, but the entire text is
used in uppercase, this reduces the readability of the content.
Additionally, the layout of a page appears crowded between the text and
'Oder Now' button. It needs to use more white space. The design of
the website is great but needs to improve the layout.
3. Functionality and Usability
|
| Fig 1.6 Clearly Labels On Homepage |
The homepage clearly labels the main sections such as Home, About, and Order Now, and they are easy to find. However, when clicking the Explore button, the page does not respond. When I click the Contact button, it redirects to the order page instead of the contact page.
|
| Fig 1.7 Transition Screens |
The website uses 3D models to decorate parts of pages, which adds to
the visual appeal. The transition screens are creative and cool, which
enhances the visitor's experience. The functionality is good, but it
lacks usability.
4. Quality and Relevance of the Content
The website's content is clear but lacks some information and
details. The words used are easy to understand. It is also relevant
to its purpose and aligns with its goals.
5. Website's Performance
|
| Fig 1.8 Test Website On Mobile Device |
The website loads quickly, and the transition screens are smooth
without any lag. I tested the website on two browsers, Google Chrome
and Microsoft Edge, and it functions properly on both browsers. On
laptops, its responsiveness is normal. However, browsing the website
on a mobile phone differs significantly from the laptop experience.
Many contents and designs are missing, it is unfriendly for mobile
users.
Words: 331
Website 02: Optimist India
1. Purpose and Goals
|
| Fig 1.9 Homepage Of The Website |
This website is an online presence for a creative agency and
design studio. Its purpose is to introduce the studio and showcase
its portfolio of work. The goal of the website is to promote the
studio and increase its visibility among a wider audience.
2. Visual Design and Layout
|
| Fig 1.10 Showing The Effect |
The website used a color scheme of black, white, and gray for its
background and text. There is a special design that is the
watercolor collision effect that appears in the background as users
scroll down on most pages, which adds visual interest.
|
| Fig 1.11 Titles |
However, on some pages, the titles quickly disappear when I scroll
down, making it difficult to catch titles such as 'Portfolio' and
'Our Story.' The images are relevant to the titles and content. The
overall design of the website is great.
3. Functionality and Usability
|
| Fig 1.12 Clearly Labels On Homepage |
The website's navigation is clear, and the buttons are easily
accessible for browsing different sections. The 'Optimist' and 'O'
icons on the top also function as home buttons. This setup ensures
usability, even if one of the buttons doesn't work, users can still
navigate back to the homepage using the remaining
buttons.
|
| Fig 1.13 Interactive Elements |
The website effectively utilizes interactive elements to showcase
the studio's portfolio, favourite projects, studio goals, etc.
Engaging users and enhancing their experience. Furthermore, the
scrolling of the website is smooth without any lags. The
functionality and usability of the website are good.
4. Quality and Relevance of the Content
The website provides accurate and authentic information, and users
can easily find the studio's social media by clicking on the
buttons. The content on the website is clear and easy to understand,
using simple and straightforward language.
5. Website's Performance
|
|
Fig 1.14 Test Website On Mobile Device |
I also used two browsers and devices to test its load times,
responsiveness, and compatibility. The website has a fast loading
speed in both browsers and can be responsive on different
devices. The website has a really creative design.
Words: 298
Total Words: 629
Task 1: Exercise / Web Replication
(2024.04.23-2024.05.14 Week 1 - Week 4)
|
||
Fig 2.1 Final Web Replication 01
|
Task 1: Exercise / Creating Recipe Card
(2024.04.23-2024.05.14 Week 1 - Week 4)
Project 1: Prototype Design
(2024.05.14-2024.06.11 Week 4 - Week 8)
Fig 4.1 Project 1: Prototype Design-Digital Resume
Project 2: Working Web Page
(2024.06.19-2024.06.29 Week 9 - Week 10)
Final Project: Design, Exploration & Application
(2024.06.11-2024.07.23 Week 8 - Week 14)
Netlify Link: https://welcome-sky-page.netlify.app/
|
|
Fig 6.1 Full-sized screen capture of the website |
Reflection
This is my first time touching coding through the Interactive Design module. Everything to me is new and interesting. At the beginning of the module, Mr. Shamsul make an introduction to the fundamental concepts of interactive design. I realize how each project has significantly contributed to my understanding of interactive design and skill development in the field. The first project was challenged me to apply the foundational knowledge I had learned. This project was a turning point as it required me to navigate the problems and find solutions. I began to realize the importance of user experience design and learning how to create interfaces that are not only functional but also engaging for users.
The final project was a comprehensive combination of everything I had learned throughout the module. It required me to use all the skills and knowledge I had gained. This project is a great opportunity for me to challenge my own abilities and knowledge. This project was a experience that demonstrated my ability to balance aesthetics with functionality. I can create a design that was both visually appealing and highly usable through the project. It also highlighted the progress I had made in my ability to think critically and creatively about design problems.
Comments
Post a Comment