Labels

Interactive Design | Exercise 1

|| 23/04/25 – 30/04/25  

|| Tee Zi Tong, 0366165

|| Interactive Design

|| Exercises 1

LECTURER NOTES

Lecture 1: Introduction & Setup

Mr. Shamsul introduced the module by going through the information booklet, explaining our upcoming projects and assignments. He asked us to download Dreamweaver, sign up for Netlify, and complete a task called Web Analysis.


Lecture 2: Design Thinking & Usability

We learned the Design Thinking steps: Observation, Empathy, Ideate, Prototype, Testing. The focus was on understanding user needs and solving problems creatively.

Usability is how easily and effectively users can interact with a website—it's part of UX Design. Good usability means users can navigate and achieve their goals without confusion.

Key principles of usability:

  • Consistency – unified layout and design

  • Simplicity – easy to use and understand

  • Visibility – clear elements for user interaction

  • Feedback – shows success or failure of actions

  • Error Prevention – avoids mistakes and alerts users

We should avoid complicated layouts, unclear navigation, and poor feedback systems.


INSTRUCTIONS

   

EXERCISE 1: WEB ANALYSIS

Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website and consider how they impact the user experience. Write a brief report summarising your findings and recommendations.

1. Animation (AMANATION | クリエイターマネジメントカンパニー)



PURPOSE & GOAL:
Amanation presents itself as a theatrical metal band creating immersive musical experiences. Their website aims to showcase their dark fantasy aesthetic while providing fans easy access to music, videos and tour information. They use gothic visuals and dramatic lighting to reinforce their unique brand identity.

VISUAL DESIGN & LAYOUT:
The website features a striking color scheme with vibrant purple and red accents that perfectly match their album artwork style. High-contrast typography using bold sans-serif fonts creates strong visual hierarchy. Full-screen concert videos and custom monster mascot graphics enhance the band's dark fantasy theme.

FUNCTIONALITY & USABILITY:
The navigation is straightforward with clear sections for Music, Videos, Gallery and Tour. The embedded music player allows instant streaming. While the site works well on mobile, some interactive elements like the tour map could be more intuitive.

QUALITY & RELEVANCE:
Content is well-organized with professional photos and videos that showcase the band's performances. Product pages for merch include detailed descriptions but could benefit from customer reviews. The overall presentation strongly aligns with their musical style.

WEBSITE PERFORMANCE:
The site loads reasonably fast and maintains consistent performance across devices. Video content plays smoothly, though some image-heavy sections could be optimized for faster loading.


2. In Cognita Corp’s French (In Cognita — Home)

PURPOSE & GOAL:
In Cognita Corp positions itself as an innovative AI and blockchain solutions provider. Their French website aims to present complex technical services in a clean, professional manner while maintaining an air of mystery suggested by their "incognito" branding.

VISUAL DESIGN & LAYOUT:
The site uses a sophisticated dark blue color palette with electric blue accents that convey technology and trust. Abstract data visualizations and particle effects create a futuristic feel. Clear typography with geometric fonts ensures readability of technical content.

FUNCTIONALITY & USABILITY:
Navigation is logical with well-defined service categories. Interactive elements like hover effects on tech stacks work smoothly. The contact form is simple but lacks confirmation messages. Language switching between French and English could be more prominent.

QUALITY & RELEVANCE:
Service descriptions are detailed yet concise, effectively explaining complex technologies. The minimalist approach prevents information overload. Adding client case studies would strengthen credibility.

WEBSITE PERFORMANCE:
The site performs well overall, though some WebGL animations may cause slight delays on older devices. Mobile responsiveness is good, maintaining all key functionality across screen sizes.


3. Eshikoto-store. shop (TOP | 石田屋ESHIKOTO店)

PURPOSE & GOAL:
Eshikoto Store offers a selection of lifestyle and home goods with a focus on Japanese craftsmanship and minimalist design. The website aims to create a serene and inviting shopping experience, emphasizing high-quality materials and traditional aesthetics. The brand positions its products as both functional and artistic, appealing to customers who appreciate simplicity and elegance.

VISUAL DESIGN & LAYOUT:
The website features a clean, neutral color palette with soft beige and white tones, creating a calm and sophisticated atmosphere. High-quality product images are displayed prominently, often against natural backdrops to highlight their texture and craftsmanship. Typography is simple yet elegant, with a mix of Japanese and sans-serif fonts that enhance readability while maintaining a modern aesthetic. The layout is uncluttered, allowing products to take center stage.

FUNCTIONALITY & USABILITY:
The navigation is intuitive, with clear categories for different product types (e.g., tableware, textiles, accessories). A search function and filter options make it easy to browse items. The site is available in Japanese, catering primarily to local customers, but lacks an English option, which could limit international appeal. The checkout process is straightforward, though some users might prefer more payment options.

QUALITY & RELEVANCE:
Product pages are well-organized, with detailed descriptions, material information, and pricing. The emphasis on handmade quality and artisan techniques adds value and builds trust. However, the site could benefit from customer reviews or a blog section to deepen engagement and storytelling around the brand’s philosophy.

WEBSITE PERFORMANCE:
The site loads quickly and runs smoothly on both desktop and mobile devices. Transitions between pages are seamless, and images are optimized for fast viewing. The responsive design ensures a consistent experience across screen sizes.


4. Lucky Done Gone (Lucky Done Gone)

PURPOSE & GOAL:
Lucky Done Gone presents itself as a playful, nostalgia-inspired brand offering quirky and colorful lifestyle products. The website aims to create a fun, retro-themed shopping experience, targeting customers who appreciate bold designs and unique statement pieces. Their product range appears focused on accessories and home goods with a vibrant, carefree aesthetic.

VISUAL DESIGN & LAYOUT:
The site bursts with energetic colors (pinks, yellows, blues) against a white background, creating a cheerful, youthful vibe. Oversized product photography dominates the layout, emphasizing the brand's bold patterns and graphics. Playful illustrated elements and a hand-drawn logo reinforce the whimsical personality. Typography mixes chunky sans-serifs with occasional script fonts for emphasis.

FUNCTIONALITY & USABILITY:
Navigation is simple with clear categories (Shop, About, Contact) in a sticky header menu. Product filtering works well by type (e.g., "Bags", "Accessories"). The shopping cart is always visible, and checkout appears streamlined. However, the mobile menu could be more intuitive, and some product pages lack zoom functionality for closer inspection.

QUALITY & RELEVANCE:
Each product features multiple high-quality images showing details and variations. Descriptions are concise but effective, focusing on materials and dimensions. The "About" page successfully communicates the brand's quirky ethos through playful copy and founder photos. Missing size guides/charts for certain items could improve usability.

WEBSITE PERFORMANCE:
Page load times are decent, though some image-heavy sections could optimize further. The site maintains its vibrant aesthetic across mobile devices without sacrificing functionality. No noticeable lag during navigation or checkout processes.

PURPOSE & GOAL:

Bloom Paris TV positions itself as an avant-garde digital platform showcasing cutting-edge Parisian culture through experimental video content. The website aims to immerse visitors in a futuristic visual experience, targeting creative audiences interested in fashion, art, and digital subcultures. Their goal is to redefine digital storytelling through innovative media formats.

VISUAL DESIGN & LAYOUT:

The website features a bold dark theme with vibrant neon pink and blue accents that create a cyberpunk aesthetic. Full-screen video backgrounds dominate the layout, immediately drawing visitors into their visual world. Glitch effects and digital distortion elements reinforce the experimental vibe. The typography combines bold display fonts with animated text treatments for maximum impact.


FUNCTIONALITY & USABILITY:

  • Unique "timeline" navigation system (drag-to-explore interface)

  • Clear content categories: Films, Series, and Originals
  • Seamless transitions between video sections
  • No traditional main menu may confuse first-time visitors
  • Mobile experience less intuitive than desktop version

QUALITY & RELEVANCE:

  • High-production video content showcases their best work

  • "Behind the Scenes" sections add depth to projects
  • Strong visual consistency across all sections
  • Missing text alternatives for video content (accessibility concern)

WEBSITE PERFORMANCE:

  • Fast loading times despite video-heavy content

  • Smooth 4K video playback performance
  • Occasional animation lag during complex interactions
  • Perfectly responsive across devices
Labels:

Comments

Post a Comment