Interactive Design : Final Compilation & Reflection
23/4/2024 - 22/7/2024 ( Week 1 - Week 14 )
Lew Guo Ying / 0365721
Interactive Design / Bachelor's of Design Honors In Creative Media
Final Compilation & Reflection
JUMPLINKS
SUBMISSIONS
Purpose and Goals
The purpose of this website is to showcase their work in order to attract talented individuals and brand collaborations. It covers a wide range of fields, including Otio Home in the Internet of Things, Press Play On Tape in the music industry, PrestaShop in e-commerce solutions, as well as Mojo App and Horse by Renault. These encompass designs in branding, websites, apps, motion graphics, user experience (UX), campaigns, and content.Design and Layout
Colour
 |
| Fig1.4 Color Plate using |
The website has a good colour scheme, using colours that are not too sharp
but just right. They strike a balance where the saturation is not too high to be glaring or abrupt, nor too low to be dull and unappealing. Additionally, they use yellow for key projects, which grabs the reader's attention, and correspondingly use yellow icons throughout the site. The well-chosen colours create a comfortable browsing experience.
Typography
 |
| Fig1.5 Typography |
This website primarily utilizes two types of fonts, serif and sans-serif.
Sans-serif, on the other hand, is employed for the remaining content, offering a clean appearance. In terms of titles, underlines are utilized to emphasize expression. Regarding content, neither italics nor bold fonts are used; instead, differences are shown through the grayscale of colours.
However, this approach may lead to readers overlooking the content, particularly if the colour is light or if it blends with the background colour. Finally, alignment is balanced, primarily leaning towards left and centre alignment, which presents a simple, tidy, easily understandable, and uncluttered appearance.
There are some deficiencies in font sizes, especially in titles, where the differences in font sizes are minimal, making it easy to confuse. It would be best to choose bold fonts or alternative fonts. Line spacing and letter spacing do not appear to have been specifically adjusted, but overall, the text remains easy to read.
Imagery
|
| Fig1.6 Imagery |
In terms of imagery, the website includes a plethora of relevant photos and videos that keep viewers engaged without causing confusion. The quality of the images is also good, avoiding pixelation or loading issues.
Videos play smoothly and seamlessly, featuring finished project showcases, sketches, and related content. The blending of colours is well done, avoiding any clashes. Image sizes are consistent, preventing uneven layouts or imbalance.
The formatting is clear, ensuring smooth loading without any buffering issues. However, the abundance of images and videos may pose problems in cases of device lag or poor network connectivity.
Layout
 |
| Fig1.7 layout |
I believe it can be divided into three categories. The first category consists of single images or videos paired with content. Next, the second category features a theme and its corresponding content, segmented into several sections. The final category is for browsing, allowing users to scroll for more content or even jump to other pages for browsing.
The website name and logo are positioned in the top left corner, not overly large or conspicuous. They change colour depending on the background, making them easily noticeable without excessively drawing attention.
In terms of layout, while whitespace can alleviate eye fatigue, in some sections, there's too much whitespace, making it look empty and giving the impression of insufficient content.
Content
Quality and Relevance
 |
| Fig1.8 Quality and Relevance |
In terms of content, it includes details about individual projects, introductions, key performance indicators, attributes, platform content, and even designer slogans, among others. This ample information caters to users' basic needs and provides a certain level of understanding about these contents.
Additionally, the relevant images and videos, with their smoothness and blended colours, can attract attention, with even design sketches included.
Accuracy
The content included is generally highly accurate, as it primarily consists of straightforward presentations showcasing past work without complex descriptions. This makes it easy to understand and avoids the feeling of monotony due to excessive text.The sources of the content are reliable, with corresponding links provided to allow for further understanding of related information.
Clarity
 |
| Fig1.9 Clarity |
The content is simple and clear, with each section having a title. Important parts are highlighted with dark-coloured fonts, emphasizing and strengthening key points. Additionally, in the content sections, important elements are highlighted with special colours to enhance their attractiveness.
There is also no use of overly complex language, allowing viewers to easily and clearly understand the intended message. Furthermore, relevant images and videos contribute to the clarity of the content.
Organization
 |
| Fig1.10 Organization |
This section excels because each content segment fills the entire page, avoiding distractions and making it easy for readers to focus on the theme and understand the material. Most of the content is well-presented through images and videos, providing relevant examples and facilitating comprehension.
The paragraphs are clearly delineated, preventing large amounts of content from being mixed together. The only shortfall is that the titles are not particularly prominent in size, which might make them seem less integral to the content. However, using dark-coloured fonts to emphasize key points within the content helps compensate for this drawback.
Functionality
Usability
 |
| Fig1.11 usability |
Additionally, simplicity and visibility are well-executed, with prominently displayed yet unobtrusive buttons. Feedback is very responsive, providing quick responses to button presses. Error prevention is effectively implemented since all buttons are simple and concise, reducing the likelihood of errors due to overly complex displays.
Navigation
|
| Fig1.12 Navigation |
The navigation structure clearly and simply displays the themes of the pages, letting the viewer know what the current content is. Regardless of where the page is, the navigation keys remain at the top of the screen. When the mouse hovers over them, they change colour, indicating they can be pressed, and they also exhibit colour changes.
The navigation content is not overly cluttered or filled with too much information, avoiding unnecessary confusion for the viewer.
Interactive Element
 |
| Fig1.13 Interactive Element |
There are quite a few interactive elements on the website. Whether it's the navigation buttons, which change colour when hovered over, or clickable text that flashes to indicate clickability. Additionally, in the image display section, there are five contents, and the location of the screen interface will display among them.
Furthermore, when scrolling to the end, it automatically returns to the first page, creating a sense of endless scrolling. Text underlines or arrow movements also serve as interactive elements. Among them, my favourite is the rotating circle in the videos, which creates a sense of space and is very smooth. The appearance of the two figures' photos is also very textured.
Performance
Load TimesThe loading time of this page is still very fast, without any lag or issues with images failing to load. Transitions between text, images, and videos are all very smooth. Although there are many images and videos, it doesn't affect the speed.
The only issue that might arise is if the webpage is left open for a long time, which could lead to gradually increasing lag due to high cache usage.
Responsiveness
 |
| Fig1.15 Device Different |
The first issue is with the navigation buttons on tablets; although they change colour when hovered over, the original text remains visible, causing overlap. The second issue, also on tablets, is that images do not fully display as the page scrolls down. However, the layout becomes more compact, which I personally prefer for a content-rich feel. Nevertheless, there is still plenty of whitespace.
Compatibility with different devices and browsers
 |
| Fig1.16 Mistakes |
In terms of compatibility, the website is supported on smartphones, tablets, and computers. Different browsers have virtually no impact on the webpage; its performance remains consistent across all of them. There are no instances of offsetting, lagging, crashing, or failing to load.
Strength
For the strengths of this website, I believe it successfully showcases its work with content that is simple and easy to understand. The concise content and straightforward descriptions prevent any confusion.
The integration of colours and fonts effectively emphasizes key points, with colours blending seamlessly without any jarring contrasts. The content quality is high, without any exaggeration or false information.
The abundance of images and videos keeps the experience engaging and avoids dullness. The navigation is clear and user-friendly, with no actions that defy common sense.
It is also compatible across devices, with no need for lengthy loading times, ensuring a smooth overall experience that is comfortable for viewers.
Weakness
The drawbacks include excessive whitespace, which creates a sense of lacking content. The whitespace is too large, contributing to this feeling.
The titles could be more prominent to avoid blending in with the content. Additionally, on tablets, there may be issues with the overlapping of navigation button content, as well as images not displaying fully and being obscured.
Solution
These drawbacks are actually minor and may go unnoticed by the average user. However, addressing them would enhance the user experience, making it more comfortable and easier to differentiate content.
Decreasing whitespace, adjusting the layout, and modifying titles using bold, italics, or different fonts to enhance differentiation can be beneficial. As for the issues on tablets, improvements in interface display are necessary.
These issues do not impact the website's goals and purpose, as they are not related to content or major issues.
 |
| Fig1.17 TRIONN |
The second website I chose is called TRIONN, which is a design agency based in India. With extensive experience and a professional team, they are committed to crafting design vision into a legacy that endures.
Purpose
|
| Fig1.18 Light and Dark Mode |
They say, "We roar with creativity, staying updated with the latest tech to make your brand a formidable force in the digital wilderness and deliver exceptional website and app experiences." These objectives are clearly displayed on their website and reflected in the services they offer.
Goals
Their goal is dedicated to providing their partners with excellent websites and platforms to showcase and promote their products and fields, achieving a win-win situation through successful promotion.
In terms of design, improvements in UI and UX by skilled professionals can allow users to be attracted to the content clearly and simply, while smooth and seamless apps or websites will make users feel comfortable, thus willing to use and promote them.
Each project they collaborate on includes an introduction, clearly displaying their mission, and ends with a brief slogan to summarize.
Design and Layout
Colour
 |
| Fig1.19 Color Plate |
The colours used on this website are not overly complex or vibrant. It features both light mode and dark mode for viewers to switch between, which is excellent. They don't have to figure out how to enable dark mode themselves, as it could affect the display of content and their user experience.
The careful attention to colour selection by the designers is evident. They haven't simply copied and pasted colours but have made subtle adjustments in saturation and grayscale based on the main colour scheme, as reflected in the colour palette mentioned above.
In the light mode, pure white isn't used, and in the dark mode, pure black isn't used, preventing white from being glaring and black from being dull. The overall integration is harmonious. Red and yellow are used to emphasize important messages, and strong colour contrasts attract attention.
In terms of headings, colours are gradually filled in the fonts, and the colour coordination with movement makes it easier for people to notice the headings. The colour contrast in the content is sufficient, making it very easy to understand and read.
Typography
 |
| Fig1.20 typography |
On this website, only one font is used throughout, both in headings and content, which is a sans-serif font, giving it a clean look. It aligns with the website's style, presenting content in a clean and efficient manner with high readability.
Additionally, it appears to be a custom font, with modifications such as the 'K' resembling a lightning bolt shape and slight alterations to letters like 'g' and 'j', adding uniqueness and creativity compared to standard fonts.
There is a noticeable difference in font sizes between headings and content, creating a visual hierarchy. Line spacing and letter spacing have also been adjusted to create a slightly compact appearance without sacrificing readability; this balance is well-maintained.
Regarding font layout, left alignment and centre alignment are frequently used, with the bold use of right alignment being quite rare. However, since the content is concise, it does not pose a challenge to viewers.
Imagery
 |
| Fig1.21 Imagery |
Additionally, the sizes of the images are just right, balancing well with the content. The website displays perfectly across different devices, with modifications and fine-tuning made specifically for various screen sizes. Even pages with numerous images are well-organized, with evenly spaced intervals and harmonious colour combinations.
The final touch that impressed me was the integration of images with questions, where an arrow serves as a flashlight, illuminating the area around it to reveal the image, creating a sense of mystery and intrigue that entices viewers to explore further.
Layout
|
| Fig1.22 layout |
The website layout is minimalist, with content and images complementing each other, striking a balance while clearly displaying the content. Each individual page focuses on a single major theme, preventing confusion for viewers, and the content is balanced across multiple pages, revealing a pattern.
The overall layout is comfortable and devoid of clutter, and the hierarchy allows for a sequential understanding, with larger to smaller page elements indicating a decreasing level of importance. It displays well across different device sizes, with the overall layout remaining largely consistent.
Content
Quality and Relevance
 |
| Fig1.23 Quality and Relevance |
Additionally, the website's outsourcing firm has 20 years of experience and has received numerous awards, demonstrating their professionalism, and the displayed content is of high quality. The information provided is straightforward, making it easy for visitors to find and understand. Both headings and content are direct, avoiding confusion.
The smooth user experience, clear content, exquisite images, and videos all serve to capture the attention of visitors.
Accuracy
|
| Fig1.24 Accuracy |
Additionally, there are numerous navigation buttons provided for visitors to click on, facilitating access to relevant pages for a deeper understanding.
Clarity
|
| Fig1.25 Clarity |
Each section has distinct content, making it easy for people to browse and understand the expressions within. Additionally, highly important information is highlighted using high-contrast colours.
Organization
|
| Fig1.26 Organization |
Pages are uncluttered, so clear segmentation is essential. Each page focuses on a single topic, allowing visitors to understand exactly what the headings and content are expressed.
Headings are prominently displayed with large fonts, ensuring clarity and important sections are highlighted with colours to draw the viewer's attention.
Functionality
Usability
|
| Fig1.27 Usability |
Its simplicity makes it easy to navigate, even for first-time users. Visibility is ensured as no content is obscured or too small to see, and feedback is prompt when hovering the mouse cursor, with no delays.
In clickable buttons, the cursor even enlarges to form a gradient circle area to attract attention, indicating to users that they can click. Error prevention is minimal, typically only occurring due to lag.
Navigation
|
| Fig1.28 Navigation |
Hovering over arrows triggers distinct colour changes, and other areas may be slightly transparently masked to clearly indicate their purpose. In sections featuring videos and related content, phrases like "view project" are displayed, along with elongated area borders, enlarged fonts, and various effects to showcase navigation buttons.
Interactive Element
This website boasts a plethora of interactive elements, each seamlessly integrated on the homepage. They blend together seamlessly, offering a smooth and visually appealing experience that enhances user engagement and captures their attention.
Even the arrows have unique cursor designs, with a captivating smoke-like dispersion effect that follows our mouse movements, urging us to explore further. What struck me most was how this smoke animation interacts with changes in sound; increasing the volume even triggers fullscreen smoke effects.
While the background sound can be a bit noisy, there's a handy sound control button to toggle the audio on or off. These interactive elements guide users through various actions, including font enlargement, button border expansion, gradient effects, and more.
Additionally, hovering over a project reveals the option to "view the project," allowing users to learn more and interact with the content.
Performance
Load Times
The website responds quickly without any lag, and since it doesn't contain an excessive amount of images and videos, there are no lengthy loading times. However, there may be concerns about prolonged caching if the website is left open for extended periods, potentially leading to lagging issues.Responsiveness
|
| Fig1.29 Different Devices |
This website maintains high compatibility, displaying well on devices of different sizes with little to no changes or errors in layout, and no issues with image display. However, some advanced animations, such as the flashlight effect when hovering over arrows, are not implemented on smartphones and tablets.
For instance, the comparison between the two images above shows the difference between tablet and computer displays. The flashlight effect disappears on tablets, and the semi-transparent display of images around the flashlight also disappears.
However, this is normal as most people browse websites using computers, so it's not a significant issue. It just lacks a special experience on smaller devices, but the smoothness and responsiveness remain intact.
Compatibility with different devices and browsers
 |
| Fig1.30 Different Devices |
The current mainstream browsers are Microsoft Edge and Google Chrome, which actually share the same underlying engine. As for Firefox, Opera, and others, while they are used by some, compatibility shouldn't be an issue.
After all, a well-designed website should perform well not only across different browsers but even on different devices.
Strength
This website has the advantage of having clear and specific purposes and goals, effectively showcasing their vision and basic information to help visitors understand them and potentially collaborate with them.The website overall is clean and concise, with harmonious and comfortable colour schemes that don't alienate or discomfort users. The layout is orderly and systematic, making it easy for visitors to find information, with distinct and clear titles for each section to avoid confusion.
The content is streamlined and directly conveys the information and messages, facilitating quick comprehension, and the hierarchy is evident, highlighting key points and the decreasing importance thereafter.
The overall layout is comfortable with clear focus points, and the colour scheme complements the fonts well. Additionally, options like sound control and light and dark mode are provided for user preference. Navigation buttons are clear and simple, without overly complicated options, and there are engaging interactive elements for visitors.
The website is compatible and responsive across various browsers and devices, ensuring fast loading times and smooth performance without issues displaying images or videos due to content overload.
Weakness
There aren't many drawbacks to this website, but if we're being nitpicky, the sound button isn't very intuitive. At first glance, it may not be clear what the difference is, and the sound can be a bit noisy. Perhaps a softer audio option could be considered.Solution
These issues don't really have a significant impact on the user experience. After all, this website is already quite perfect, so you wouldn't notice any drawbacks for the most part. Few people might even pay attention to the sound, especially considering it's just background audio on a webpage.
As for solving these problems, as mentioned earlier, one solution could be to replace the sound with softer music and add a tooltip for the sound button.
 |
| Fig2.20 Web Replication(left) and Web Screenshot(Right) |
 |
| Fig2.22 Web replication(left) and Webpage screenshot(right) Website Outline view(buttom) |
.png) |
| Fig7.5 Final Recipes Card |
 |
| Fig1.17 Screen size view |
 |
| Fig1.18 Responsive phone screen size view |
Reflection :
Comments
Post a Comment