Labels

INTERACTIVE DESIGN - EXERCISES 1 & 2

INTERACTIVE DESIGN - EXERCISES


21/04/2025 - 04/05/2025 / Week 1 - Week 2

Begimbaeva Aidina / 0380489

Interactive Design  / Bachelor of Design (Honous) in Creative Media 

Exerсises



LECTURES

Week 1

During the first week, we were introduced to the module by Mr. Shamsul, who guide us through the overall objectives and structure. He walked us through each assignment step-by-step, which helped clarify the direction we need to take. This introduction give me a solid understanding of what needs to be done and how to begin my work confidently.

Week 2

Usability: Designing Products for User Satisfaction

Key Principles of Usability:
  • Consistency
  • Simplicity
  • Visibility
  • Feedback
  • Error prevention


EXERCISE 1


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.

What you need to do:

  • Choose 5 websites from the provided list.
  • Carefully review each website: design, structure, content, usability, and technical performance.

Key points to focus on during the analysis:

  1. Purpose of the website:

    • Who is the target audience?

    • Is the purpose of the site clearly communicated?

  2. Design and Layout:

    • Use of colors, fonts, images.

    • Overall visual impression.

    • Is the layout logical and user-friendly?

  3. Functionality and Usability:

    • Is it easy to navigate and find information?

    • Do forms (like registration or contact) work properly?

    • Is the navigation intuitive?

  4. Content:

    • Is the information accurate and clear?

    • Is the text well-organized?

    • Are there any spelling or grammar mistakes?

  5. Technical Performance:

    • Does the site load quickly?

    • Is it mobile-friendly?

    • Does it work across different browsers?

Deliverables:

  • Write a report for each website, with at least 200 words per site.

  • Include screenshots to illustrate your points.

  • Use clear headings and subheadings for better organization.

  • Submit the link to your e-portfolio with all reports.


In this task, we were asked to conduct a website analysis by selecting five websites from the provided links. The options given were:


I explored these platforms and carefully chose five websites based on their design quality, functionality, content organization, and user experience. Each selected website was analyzed in detail according to the given guidelines: purpose, design and layout, usability, content quality, and technical performance.

After selecting the websites, I reviewed each one thoroughly and prepared individual reports summarizing my findings, including strengths, weaknesses, and recommendations for improvement.


3.1 Website Analysis: BMW — Peach Worlds

The first thing I saw on the BMW Peach Worlds website, I was immediately attracted to animations and 3D graphics. On the main page, an image of a car in a futuristic world appears. When scrolling the page, the car starts moving, creating the effect of a real presence. The movement of the car is accompanied by smooth transitions and animations, which makes the site especially exciting and interactive.

Figure 3.1.1  BMW-Peach Worlds Website Home Page / Week 1 (26/04/2025)

1) Purpose and Goals

The primary purpose of the BMW Peach Worlds website is to create an immersive digital experience that combines the BMW brand with an imaginative, futuristic environment. This microsite is designed to engage users emotionally, promote BMW's innovation and design values, and strengthen brand loyalty through a memorable, interactive experience rather than through traditional advertising. The goal is effectively communicated through the site's visual, storytelling, and interactive features.

The BMW Peach Worlds website is designed to present a futuristic vision of the BMW brand, connecting innovation, technology, and creativity. It is not a traditional car website but rather a brand experience platform aimed at offering users an immersive digital journey.

Goals of BMW Peach Worlds:

  1. Strengthen the BMW brand through an immersive online experience.

  2. Showcase the connection between technology, innovation, and creativity.

  3. Create a new way for users to experience BMW values digitally.

Engage a tech-savvy audience with modern visuals and storytelling.

2) Visual Design and Layout

The visual design of the site is stunning and futuristic. It features a surreal, digital 3D world inspired by abstract nature and city landscapes. Bright, neon colors and smooth 3D animations immediately capture the visitor’s attention. Typography is modern and minimal, focusing on clear communication without overwhelming the visuals. The layout encourages exploration, with users navigating through different themed "worlds" in a seamless and flowing journey.

Figure 3.2 BMW-Peach Worlds Information Website / Week 1 (26/04/2025)



Figure 3.1.2  BMW-Peach Worlds Information Website / Week 1 (26/04/2025)


Layout: Clean, modern, focuses attention on the car. All the elements are arranged logically, with a clear structure.Full-screen experience with strong focus on visuals.Interactive navigation guiding users through the digital environment. Minimalist text placement, emphasizing imagery and motion.
The color scheme is dominated by black, white and blue colors — branded for BMW, they create a sense of premium.High contrast between background and important elements.
Typography: Modern, clear fonts are used to emphasize the brand's technology.Sleek and modern font fitting the futuristic style. Clear hierarchy: bold for headlines, regular for body text. Typography supports the clean and high-tech atmosphere.

Animations: Light animations, such as the smooth movement of the car as the page scrolls, make the site more dynamic and attractive.

Design Advantages:
  • Easy access to the main sections.
  • A minimum of distracting elements, focus on the content.
  • Clean and easy navigation.
  • Disadvantages
3) Functionality and Usability

Navigation
The menu is intuitive and located at the top of the page. This allows you to quickly navigate to important sections such as vehicle specifications, image gallery, and contact information.
  • Interactivity: Smooth animations and transitions make the user experience more enjoyable.
  • Navigation: All sections of the site are accessible through a well-structured menu, as well as through scrolling the page.
Advantages: Quickly switch between sections. Easy access to the main characteristics of the car.
Disadvantages:For users with limited navigation skills, the lack of additional buttons can create difficulties.

Figure 3.1.3  BMW-Peach Worlds Layout Website / Week 1 (26/04/2025)

4) Quality and Relevance

Website Content The site's content includes images and descriptions of the car's characteristics, as well as animations that help to better represent the car in action. However, some pages have limited information, and there may also be no sections with user reviews or additional information, as is often the case on automotive websites. Advantages The information on the website is up-to-date, there is no outdated data. Clear, concise, and direct text blocks. Disadvantages: Some sections do not contain detailed data or links to additional sources.

Figure 3.1.4  BMW-Peach Worlds Information Website / Week 1 (26/04/2025)

Accuracy All the information on the website is presented clearly and corresponds to the topic — this is a project about the BMW E30 M3 model. The description of the car, as well as the visual elements (photos, animations) are carefully selected and correspond to the theme of the website. However, there is no contact information or additional links to sources, which may complicate communication with the authors of the site or obtaining additional data.
Organization The structure of the site is logical: users gradually "immerse themselves" in the content, scrolling down from the general to the details. A clear separation between sections and a good visual hierarchy ensure easy reading. Navigation is simple: the main elements are arranged sequentially, without the need to navigate to new pages — the entire experience takes place on one long page.
Clarity The history of the project and the idea of the website are expressed through a visual narrative — it is clearly visible that the website is dedicated to the demonstration of the BMW E30 M3 car. It is easy for the user to understand what the emphasis is on — each section is accompanied by minimalistic captions and images. All information is presented briefly and without unnecessary distractions, which simplifies perception.
5) Website's Performance

Download speed The site loads quickly, and animations do not affect the overall speed. However, on older devices or browsers, there may be a slight delay when playing animations. Device compatibility The site works well on mobile devices, tablets, and desktops, but animations are not always displayed correctly on mobile devices. Advantages:
  • High performance, minimal loading time.
  • Good compatibility with modern browsers and devices.
Disadvantages Problems with displaying animations on older devices and in some browsers.

Figure 3.1.5  BMW-Peach Worlds Website on the Phone  / Week 1 (26/04/2025)



Figure 3.1.6  BMW-Peach Worlds Information Website / Week 1 (26/04/2025)

Recommendations for improvement
The introduction of additional navigation buttons to simplify navigation on the site. Adding more product information (such as user reviews, detailed specifications, etc.). Improving compatibility with older devices and browsers to maximize user reach.


3.2  Сaptured - Website Analysis 

1) Purpose and Goals
Captured is a minimalistic portfolio website designed to demonstrate the capabilities of the Framer framework in creating simple and elegant web pages. Its main goal is to show how clean, lightweight, and animated design can be used to present the work of photographers, designers, and creative professionals.
Figure 3.2.1   Сaptured Home page Website / Week 1 (26/04/2025)


When I first visited the Captured website, I was immediately impressed by how beautifully and smoothly it opens.The site doesn't just load — it "comes to life" through animation: images and text gently appear on the screen as you scroll.These transitions look very modern and create a sense of high quality and a professional approach to design. I particularly liked that:
  • The transitions between the sections are very smooth and do not interrupt the perception.
  • The whole animation is balanced — there is no feeling of overload or unnecessary effects.
  • Opening a website makes a pleasant first impression, which is very important for portfolio projects.
  • Thanks to this clever use of animation, the site looks dynamic, but it remains easy and fast to load.
  • This is a very important moment for UX design, as the user's first reaction determines whether they want to stay on the site.
The main goals of the website:
  • Demonstrate a minimalistic and clean design.
  • To show the adaptability and flexibility of the Framer framework.
  • Focus on visual content without unnecessary distracting elements.
  • Create a pleasant browsing experience for users on both desktops and mobile devices.

Figure 3.2.2  Сaptured  Information Website / Week 1 (26/04/2025)


2) Visual Design and Layout Layout:
  • A clean and open structure.
  • The main focus on photos is that they take up most of the screen.
  • Navigation is hidden in a small menu button so as not to distract from the main content.
  • The content is divided into blocks with animation of appearance during scrolling.
Colour:
  • The main color is a white background, which gives the site a fresh and modern look.
  • The accents are made in black text color and small gray elements.
The website is designed in calm and modern tones: neutral shades prevail with accents on important elements.The color palette helps to focus attention on the main content without unnecessary visual load.The fonts are minimalistic and easy to read, which adds a professional look to the site.

Typography:
  • It uses a single sans-serif font, minimalistic and easy to read.
  • The font size varies: large headings and reduced descriptions, which helps to create a clear hierarchy.
  • The font gives the site a modern, professional character.
Added screenshots:
  • Screenshot of the main page with a minimalistic title and a large image.
  • Screenshot of the open navigation menu.
3) Functionality and Usability Navigation:
  • Simple and intuitive navigation through a compact drop-down menu.
  • All sections are accessible with one click, without overloading the interface.
  • Interactive Elements:
The scrolling animation when loading each section makes viewing enjoyable. Clickable images, smooth transitions without delays. Forms:
  • There is no feedback form on the site, just viewing the content.
  • This is logical for a portfolio website focused on visual perception.
Figure 3.2.3  Сaptured  Information Website / Week 1 (26/04/2025)


4) Quality and Relevance
Accuracy:
  • All the content is relevant because the site is a demonstration project for demonstration purposes.
  • The pages load correctly without 404 errors or broken links.
Clarity:
  • The purpose of the site is clear from the very first seconds — to demonstrate the visual work and capabilities of the framework.
  • There is no extra information, just a gallery and short texts.
Organisation:
  • The entire structure of the site is logical and consistent.
  • The user can easily find the necessary information without unnecessary clicks.
The website is displayed correctly on various devices: mobile phones, tablets and desktop computers.The page loading time is minimal, despite the animation, which has a positive effect on the user experience. The responsive design takes into account the features of different screens: the buttons are enlarged on the mobile version, the text is readable, and the elements do not overlap each other. Additionally: High performance without loss of animation quality demonstrates excellent site optimization.

Figure 3.2.4  Сaptured  Information Website / Week 1 (26/04/2025)


5) Website's Performance
Load Times and Responsiveness:
  • The website loads quickly thanks to optimized images.
  • Animations run smoothly on all devices.
Compatibility with Different Devices and Browsers: Tested on MacBooks, iPhones, and iPads — adaptive layout works fine. Tested in Safari, Chrome and Edge — no bugs were found in the display.
Additionally:
  • The site looks a little more compact on mobile devices, but all the functionality remains.
  • The smoothness of scrolling and responses to user actions is preserved.
Figure 3.2.5  Сaptured  on the Mobile Phone  / Week 1 (26/04/2025)

Final Pros and Cons
Pros:
  • Clean and professional design.
  • Excellent adaptability for different devices.
  • Smooth animations that create a modern feel.
  • User-friendly minimalistic navigation.
Cons: - No feedback form or contact information. - Limited amount of information (view only, no additional engagement).



3.3 OMEGA: Space Sustainability- Website Analysis 

1) Purpose and Goals

The OMEGA: Space Sustainability site showcases OMEGA’s collaboration with Privateer to support sustainable space exploration. The site aims to inform the public about the growing issue of space debris and the need for responsible tracking of satellites and orbital objects.

Website is owned by the Swiss watch brand OMEGA. It is dedicated to their involvement in space missions and space sustainability initiatives, but also promotes the brand itself - including their famous watches that have been to space, such as the OMEGA Speedmaster. Goals of the website:
  1. Raise awareness about the dangers of space debris.
  2. Introduce OMEGA’s partnership with Privateer and their joint mission.
  3. Emphasize OMEGA’s commitment to sustainability and innovation.
  4. Educate users about the importance of transparency and responsibility in space missions.
Figure 3.3.1 OMEGA: Space Sustainability Home page Website / Week 1 (26/04/2025)

One of the elements I particularly liked was how the Earth is visually presented on the website. The 3D animation of the planet is highly detailed and beautifully rendered, which immediately captures attention and adds a sense of realism. It also reinforces the theme of space and sustainability in a visually compelling way.

Figure 3.3.2 OMEGA: Space Sustainability Information Website / Week 1 (26/04/2025)

  1. Promote the brand’s involvement in space science and sustainability
  2. Build an emotional connection with users through storytelling
  3. Subtly tie in brand identity with environmental initiatives
  4. Encourage exploration of the full product range (watches)

2) Visual Design and Layout
Layout:
  • The site features a vertical scroll structure that tells a story through sections.
  • Alternating text and visuals create a balanced visual flow.
  • Animations and smooth transitions enhance the storytelling experience.
Color Scheme:
  • Dominant use of dark backgrounds with accents of white and blue evokes the feel of deep space.
  • Key elements like buttons and links use highlight colors for emphasis and clarity.
Typography:
  • Clean, modern sans-serif fonts are used throughout.
  • Font size and weight are well-structured for hierarchy (Headings, Subheadings, Body text).
  • The typography supports a professional and serious tone fitting the theme.
Figure 3.3.3 OMEGA: Space Sustainability Website / Week 1 (26/04/2025)

3) Functionality and Usability

Navigation:

  • The site has a simple scrolling interface, making it user-friendly and intuitive.
  • Links to external resources (like Privateer’s platform) are clearly highlighted.
  • No menu is needed due to the one-page scroll format.

Interactive Elements:

  • Scroll-triggered animations provide a dynamic browsing experience.
  • Infographics and visuals appear as the user scrolls, keeping engagement high.
  • An embedded tool (Wayfinder) allows users to see real-time space data interactively.

Forms:

  • No contact forms or user inputs are present, which fits the site's informative purpose.
  • A link to Privateer includes a call to action for further exploration.

Figure 3.3.4 OMEGA: Space Sustainability Website / Week 1 (26/04/2025)

Figure 3.3.5 OMEGA: Space Sustainability Website / Week 1 (26/04/2025)


4) Content Accuracy and Relevance

Accuracy:
  • The site provides scientifically backed data on space debris and orbital tracking.
  • Information is relevant and up to date, showcasing real partnerships and missions.
  • There are no broken links or misinformation found during review.

Clarity:

  • All content is clearly written for general understanding, without jargon.
  • The goals and story are easy to follow, even for users unfamiliar with the topic.
  • Infographics help simplify complex data.

Organization:

  • Content is logically structured from problem introduction to solution explanation.
  • Consistent sectioning and spacing guide the user's reading flow.
  • The layout supports a linear narrative experience.

5) Website Performance

Loading and Responsiveness:

  • The site loads smoothly, even with large animated visuals.

  • Transitions and scroll effects do not delay performance or cause lag.

Device and Browser Compatibility:

  • Tested on desktop (MacBook), tablet (iPad), and mobile (iPhone) — all worked well.

  • Compatible with Chrome, Safari, Firefox, and Edge without any rendering issues.

    Figure 3.3.6 OMEGA: Space Sustainability Website on the mobile phone / Week 1 (26/04/2025)

Pros and Cons (as a UI/UX Designer)

Pros:

  • Strong storytelling structure through scrolling.

  • High-quality visuals and immersive animations.

  • Minimal, modern design matching the futuristic theme.

  • Informative and emotionally engaging content.

  • Interactive Wayfinder tool adds technical depth and interest.

Cons: – No user engagement features (such as feedback, newsletter, or forms). – One-directional interaction: users receive info but can’t respond. – All information is placed on a single page, which may limit depth.


3.4 Elementis — Luxury Health & Wellness Resorts - Website Analysis 

1) Purpose and Goals

Elementis is a premium brand offering wellness resorts and luxury residences in unique natural locations around the world. The main purpose of the website is to convey an atmosphere of tranquility, privacy and exclusivity, as well as to form a first impression of the high level of quality and philosophy of the brand.
Goals of the website:
  • Immerse the user in the world of luxury and well-being through visual experience.
  • Attract potential clients and investors.
  • Communicate the idea of combining nature, architecture and personal wellness.
  • Showcase the unique destinations and design of residences.
Figure 3.4.1 Elementis — Luxury Health & Wellness Resorts  Home page Website / Week 1 (26/04/2025)

2) Visual Design and Layout

The site features a clean, minimalist aesthetic with high-quality visuals and smooth transitions. It feels like a luxury magazine or a designer brand.

Layout:

The landing page starts with a beautiful animated opening, setting the tone.

Content is organized in full-screen sections with short headlines and large visuals.

Vertical scroll leads through a fluid journey across different themes.


Color Scheme:

Neutral tones dominate: beige, soft white, cream, and light earth tones.

The palette gives a sense of calm, harmony, and connection to nature.


Typography:

Elegant serif and sans-serif fonts.

Headings are large and airy; body text is clear and well-spaced.

Overall, the typography supports a feeling of sophistication and trust.


What I liked:

The way the site opens with a smooth, luxurious animation immediately sets a premium tone.

The background visuals, especially of natural landscapes, are captivating and high-resolution.

Figure 3.4.2 Elementis — Luxury Health & Wellness Resorts  Home page Website / Week 1 (26/04/2025)

Figure 3.4.3 Elementis — Luxury Health & Wellness Resorts  Website / Week 1 (26/04/2025)


3) Functionality and Usability

Navigation:

  • The main navigation is tucked inside a “Menu” button, opening a full-page overlay menu.

  • Sections like “About,” “Residences,” “Wellness,” and “Locations” are easy to access.

  • Navigation is intuitive and simplified for a premium experience.

Interactive Elements:

  • Hovering on images causes subtle animations like zoom or color overlay.

  • Scroll animations reveal content piece by piece, making the browsing engaging.

  • Videos are integrated smoothly and don’t interfere with usability.

Forms:

4) Content Quality and Clarity

Accuracy:

  • The content is well written and aligns with the branding message.

  • All information is up-to-date and well-presented.

  • No major broken links or outdated data found.

Clarity:

  • Text is minimal but meaningful; written in simple, emotional language.

  • The messaging clearly communicates the brand values.

  • Each section has a direct purpose, avoiding unnecessary clutter.

Organization:

  • The website structure flows logically — from emotional impact (visuals) to deeper information (residences, investment, wellness).

  • Excellent hierarchy in headings and content blocks.

    Figure 3.4.5 Elementis — Luxury Health & Wellness Resorts  Website / Week 1 (26/04/2025)








5) Performance and Compatibility

Load Time:

  • Despite large images and animations, the site loads quite efficiently.

  • The opening animation may take an extra second, but it doesn’t affect usability.

Device Compatibility:

  • The website is responsive and works perfectly on mobile, tablet, and desktop.
  • Tested across browsers: Chrome, Safari, Edge – all worked smoothly.
  • Menu and visuals adapt properly to different screen sizes                                                              

Figure 3.4.6 Elementis — Luxury Health & Wellness Resorts Website on mobile phone / Week 1 (26/04/2025)

Pros (as a UX/UI Designer)
  1. Strong, consistent visual identity
  2. Beautiful typography and layout
  3. Engaging scroll experience and smooth animations
  4. Fully responsive across devices
  5. Navigation is clean and minimal, allowing the design to shine
Cons
  1. Not all information is easily accessible on the homepage — requires extra clicks
  2. Could use more interactive features, like a dynamic map or virtual tour
  3. Less text might make it harder for some users to understand the full offering at a glance

3.5 Pebble Life- Website Analysis 

1) Purpose and Goals рр

Pebble Life is a wellness and lifestyle brand that offers products focused on improving sleep, reducing stress, and enhancing well-being through non-invasive technology and natural methods. The main goal of the website is to inform users about Pebble’s product line, educate them about wellness benefits, and ultimately drive purchases through a clean, minimal e-commerce experience.

Goals of the Website:

  • Promote wellness products centered around mental and physical well-being.
  • Drive product sales via a clean and trust-building e-commerce platform.
  • Educate visitors about how Pebble technology works.
  • Build community trust and transparency through testimonials and science-backed content.
Figure 3.5.1 Pebble Life Home page Website / Week 1 (26/04/2025)

2) Visual Design and Layout

The overall aesthetic of the Pebble Life website is designed to invoke a sense of calm, wellness, and simplicity. The choice of soft neutral tones (white, beige, light greys) creates a serene atmosphere that aligns with the brand's focus on health and well-being. The design employs ample white space, which makes the content easy to digest and ensures the visual experience does not overwhelm the user. This approach is an essential part of UX design because it contributes to the feeling of relaxation and simplicity.

When entering the site, the smooth scrolling animation, large product visuals, and gentle color palette immediately give a calm and peaceful feeling — perfectly aligned with the brand’s wellness theme.

Layout:

Clean, modular layout with large white space that enhances readability.
Hero section features product in lifestyle context, followed by informative sections.
Sticky navigation and clearly defined product sections make browsing easy.
One-page scroll experience, but with links to deeper product and FAQ pages.

The layout of the site is clean, minimal, and modern, with a clear hierarchy. The design flows naturally, allowing users to move easily from one section to the next without feeling confused or overwhelmed. Large product images and minimal text on the homepage help focus the user’s attention on the key actions: purchasing or learning more about the products.

The website uses a single-page scroll design, where users can view all essential information without navigating away from the page. This is a clever approach to keeping users engaged and simplifying the journey. The navigation bar is sticky, ensuring the user can quickly access other parts of the site without needing to scroll back to the top.

Color:

The choice of colors is key to evoking the brand’s wellness message. The soft, neutral color palette promotes a sense of peace and tranquility, which is important for a wellness-focused brand. The accent colors like light blue and pastel green are used sparingly for calls to action (CTAs), which makes them stand out without being jarring. This is a smart use of color, as it draws attention to important actions without overwhelming the user.
Soft neutral palette (whites, beiges, muted greys) contributes to a calming effect.
Accent colors like light blue or pastel green used subtly for CTA buttons.

Typography:

Clean, modern sans-serif font.
Balanced hierarchy: large titles, medium subheadings, small body text.
Excellent contrast and spacing — easy on the eyes.

Figure 3.5.2 Pebble Life Home page Website / Week 1 (26/04/2025)

Figure 3.5.3 Pebble Life Home page Website / Week 1 (26/04/2025)

3) Functionality and Usability

Interactive Elements:
  • Smooth scrolling and product hover states that highlight buttons or enlarge visuals.
  • Clear and consistent CTA buttons: “Shop Now”, “Learn More”, “Join Waitlist”.
  • Well-designed mobile menu with hamburger icon that transitions into full-screen navigation.
Navigation:
  • Top navigation includes: Shop, Technology, Science, FAQ, and About.
  • All links work and scroll smoothly to respective content sections or pages.
  • Menu is accessible and works across different screen sizes.
Forms:
  • Embedded newsletter sign-up form.
  • Waitlist form for products that are out of stock.
  • Clean and minimal; very easy to fill in, with clear confirmation messages.

Content Structure:
The content is well-organized, with a clear flow from the hero image and product features to the more detailed explanation of the technology behind the product. The minimal text per section makes the content digestible, which is key in keeping users engaged.

One downside, however, is the lack of detailed product information and customer reviews. While the clean design works well for the overall experience, providing more information such as testimonials, reviews, and detailed product specifications would help build trust and push the user closer to a purchase decision.

Figure 3.5.4 Pebble Life Home page Website / Week 1 (26/04/2025)

4) Content Quality and Relevance

Accuracy

As a UI/UX designer, I value not only how content looks but also whether it builds trust with users. Pebble Life delivers accurate and credible content. All information on the product and its technology is clearly explained, and most importantly, it’s backed by scientific references — this adds professionalism and reassures users. The FAQ and Science sections are especially well-executed. They use plain language, supported by visual aids and good hierarchy, to explain technical concepts without overwhelming the user. There are no outdated links or broken pages, which indicates good content management and quality assurance.

Clarity

The tone of voice is aligned perfectly with the visual brand — calm, helpful, and trustworthy. The copy is simple, concise, and avoids jargon, which is ideal for a wellness-oriented product. Each section has a clear headline, followed by short paragraphs that are easy to scan. The website avoids "information overload" by chunking content into smaller blocks and reinforcing it with icons, graphics, and micro-interactions, improving the reading experience and comprehension.

Organisation

The content structure reflects excellent UX thinking. The flow is logical — it starts with the product introduction, transitions to explaining how it works, and then guides the user toward a decision (purchase or learning more). 

Figure 3.5.5 Pebble Life Home page Website / Week 1 (26/04/2025)


5) Website Performance

Load Time & Responsiveness

From a performance design standpoint, Pebble Life is very well-optimized. The site loads quickly, even on slower internet connections. The animations — such as scrolling transitions, image fades, and button hovers — are smooth and do not cause lag. As designers, we understand how animations can slow down a site if not optimized, but here, everything feels lightweight and responsive. This shows careful front-end development and performance-conscious design.

Device & Browser Compatibility

Responsive design is a must in today’s multi-device world. I tested the site on mobile, tablet, and desktop, and across major browsers (Chrome, Safari, Edge, Firefox). The layout adapts beautifully to different screen sizes, with reflowed grids, mobile-first typography, and touch-friendly buttons. There’s no need to zoom or struggle with misaligned elements. This responsiveness not only enhances usability but reinforces a premium, polished brand perception. Touch gestures work flawlessly on mobile, and every tap or swipe is acknowledged with fast, clear feedback.

Personal UX/UI Notes (Pros & Cons)

Pros:
  1. Beautiful, minimalistic design that fits the calming, wellness-focused brand.
  2. High usability: intuitive interface and easy-to-follow layout.
  3. Excellent mobile experience with seamless transitions and clean navigation.
Cons:
  1. Product options could be more visually detailed (e.g., more lifestyle images).
  2. Limited variety of interactive features or personalization (e.g., product recommendations).
  3. Testimonials and customer reviews could be more prominently featured to build trust.


Exercise 2- Web Replication 


We need to copy the 2 existing main pages of the listed websites. Follow the dimensions of the existing website in width and height. This exercise will help you develop your design skills using software such as Photoshop, Adobe Illustrator or Figma, and gain an understanding of the best web design practices.

4.1 Captured


At the beginning of the process, I had trouble capturing a full screenshot of the website. Some elements weren’t visible all at once due to the scrolling layout. As a result, I took multiple partial screenshots and manually combined them to recreate the entire site view.

I selected two websites that stood out to me during my analysis. I chose the Captured photography portfolio site and the Elements wellness resort website. Both had distinct layouts and typographic styles that I wanted to explore and replicate.

Figure 4.1.1 Screen Capture from Original Website / Week 2 (04/05/2025)

After that, I imported the screenshot into Adobe Illustrator, created an artboard, and adjusted it to the size of the original website layout.

As part of the Interactive Design exercise, I was tasked with replicating two main pages of the websites I previously analyzed. The purpose of this task was to better understand website structure, layout, and design principles by recreating the pages as closely as possible.


Figure 4.1.2 Screen Capture from Original Website / Week 2 (04/05/2025)

During the replication process, Mr. Shamsul advised that it is acceptable to use alternative images as long as they are visually similar to the original ones. While I was able to download some images directly from the websites, others could not be saved due to site restrictions.

For those, I searched for visually similar stock images to maintain the overall look and feel of the original design. This allowed me to stay true to the layout and atmosphere of the websites while also improving my skills in image sourcing and replacement.

Figure 4.1.3 Colour Palette / Week 2 (04/05/2025)

I also carefully selected fonts and colors that closely match those used on the original websites. I used Google Fonts to find suitable typefaces and used the Eyedropper tool to extract accurate color values from the original designs.

Figure 4.1.4 Process 1 / Week 2 (04/05/2025)

Here I recreated the homepage of the original website as part of an interactive design exercise. The goal was to replicate the layout, typography, and overall structure as closely as possible. I paid attention to details such as alignment, spacing, and font styling to match the original design.

Figure 4.1.5 Process 2 / Week 2 (04/05/2025)

Figure 4.1.6 Process 3 / Week 2 (04/05/2025)

After completing the main structure, I made small refinements in font spacing, image scaling, and alignment. I compared the original and the replica side-by-side to check for any inconsistencies.

Final Outcome

Figure 4.1.7 Final Outcome / Week 2 (04/05/2025)

4.2 ELEMENTIS


For the second part of the exercise, I replicated the main page of another website that I previously analyzed. As with the first one, the goal was to understand the layout structure, type style, spacing, and color palette.

Figure 4.2.1 Screen Elementis from Original Website / Week 2 (04/05/2025)


Figure 4.2.2 Screen Elementis from Original Website / Week 2 (04/05/2025)


Figure 4.2.2 Colour Palette / Week 2 (04/05/2025)


Figure 4.2.3 Process 1 / Week 2 (04/05/2025)

This time I encountered some difficulties with image assets. Some images could not be downloaded directly from the website. As advised by Mr. Shamsul, I looked for alternative images that had a similar mood and composition. I used free stock image websites to find appropriate replacements.

Figure 4.2.4 Process 2 / Week 2 (04/05/2025)

One thing I paid special attention to was spacing and alignment, as these are crucial elements in good web design. I followed the original proportions and layout grids as closely as possible.

Figure 4.2.5 Process 3 / Week 2 (04/05/2025)

Final Outcome




Figure 4.2.6 Final Outcome / Week 2 (04/05/2025)


REFLECTIONS

Experience

Working on the replication of two existing website pages was a very insightful experience. It helped me understand how visual elements such as layout, typography, and spacing work together to create a strong user interface. At first, it was a bit challenging to recreate the exact structure, especially when dealing with images or fonts that were not easily available. However, by using design tools like Adobe Illustrator and Photoshop, I learned how to overcome these limitations and still stay visually close to the original design.

Observations

While replicating the websites, I noticed that good web design is not just about pretty visuals — it’s about consistency, alignment, and balance. Even the smallest spacing and font weight made a big difference in the overall look. I also observed how much impact typography and color choices have on the mood of the website. Many websites rely on simple but well-structured layouts to guide the user smoothly through the content.

Findings

I discovered that:

  • Using grids and guides is essential for maintaining alignment.

  • Free font libraries like Google Fonts are helpful to find similar typefaces.

  • If certain images can't be downloaded, substituting them with similar free stock photos works well and doesn't break the design.

  • Taking full-page screenshots and assembling them manually can be useful when certain parts of a site are hidden or load differently.

This project strengthened my technical skills and deepened my understanding of interactive and visual design principles.

BACK TO TOP
Labels:

Comments

Post a Comment

Popular Posts