INTERACTIVE DESIGN - Exercise 1 Web Analysis

2025-2025(week - week)

FANN WONG JING EN｜0382237

Design Principles | Bachelor of Design (Honours) in Creative Media

GCD60904 Interactive design

---

TABLE OF CONTENT

MIB      Lecture Note      Exercises      Feedback      Reflection

---

MODULE INFORMATION BRIEF (MIB)

---

LECTURE NOTE

Week 2 |  Exercise 1

Write your report in e-portfolio

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 summarizing your findings and recommendations.

What To Have in The Analysis:

Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.

Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, load times, responsiveness, and compatibility with different devices and browsers.

Deliverables:

Write a brief report summarizing each Web Analysis in not less than 200 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (headings/subheadings)

---

EXERCISE 1

Website - 1: Boyd created by The First The Last

fig1.1 Boyd introductory page

PURPOSE / GOALS OF THE WEBSITE

BOYD describes itself as UAE-based online gallery of "global artworks" that acts as broker between art purchasers, gallery owners, and artists.

· Showcase well-curated, upscale art pieces (paintings, installations) and sell them to the world 

· Play middle man between artists and users/consumers/interior designers 

· Gain reputation and recognition among art/interior design circles

These are ambitious aims that are well-suited to an online gallery.  They must be reinforced by the design, navigation, and functionality of the site, which must display artworks, facilitate browsing, and build confidence.

VISUAL DESIGN

fig1.2 Home Gallery

Colour

White, black, and subdued colors dominate the color scheme, which is one of refinement and calmness.  This subdued color scheme puts the focus on the photographs and gives the website a classic, high-end appearance.  Attention is kept on the projects being revealed through the minimalist use of accent colors.

Layout

The design adheres to a minimalist grid system with a lot of white space.  Clarity is heightened and each visual element has space to breathe.  The viewer's eye is naturally guided through the page by the visual hierarchy and the exact alignment.  General harmony between structure and transparency preserves the brand image of minimalism and luxury.

fig 1.3 Catalogue

Imagery

The BOYD website's most notable aspect is its photography.  Each page is full of large, excellent photographs of interior spaces that do a great job of conveying the studio's sophistication and artistry.  Users are emotionally connected to the design style by the way the photos are framed and lit, conveying texture and depth.

FUNCTIONALITY / USABILITY

It has easy-to-use top menu and navigation.  The smooth scrolling and transitions provide an enhanced browsing experience.  Being responsive, the website looks and functions the same on both desktop and mobile devices.

QUALITY/RELEVANCE OF CONTENT

fig 1.4 Catalogue details

fig 1.5 FAQ

Listings & Descriptions of Artwork:

· When I clicked on the listing for each piece, I saw a name, a price (or "inquiry"), and probably a complete description.

· The "About Us" page provides background information on BOYD and why it exists;

· The FAQ is complete in describing process (shipping, return, payment);

The photographs look high quality and well displayed, which is significant because art is a visual medium.

fig1.6 Contact

Indications of Relevance and Trust:

· Phone and email contact details are easily seen on the website, and the terms of use and privacy policy are mentioned, which adds authenticity.

PERFORMANCE

fig 1.7 Performance, load times & responsiveness for Boyd

· The homepage loads multiple image assets in addition to the hero images on their first load.  There may be noticeable latency, depending on the network.

· Image optimization (compression, lazy loading) is important since large image files, particularly high-resolution artwork images, might cause the site to load slowly.

·  There were no glaring issues, but additional testing (on slow networks, mobile 3G, etc.) might surface any faults.

OVERVIEWS

Strengths:

· Clean, aesthetically pleasing design that maintains the primacy of the art 

·  Simple to distinguish objectives and positioning as an online gallery facilitating buyer-artist connections ·  Strong core functionalities (catalogue, contact/inquiry, FAQ) 

·  Payment, shipping, and return policy clearly outlined

Weaknesses and Areas of Possible Improvement:

·  No advanced filtering or search bar on the homepage.  Some user frustration with "price by inquiry" items

---

Website - 2: Working Stiff Films created by Buzzworthy Studio

fig1.8 Working Stiff Films introductory page

PURPOSE / GOALS OF THE WEBSITE

A funny ad and content agency production business uses the STIFF website as an imaginative showcase.  Its prime purpose is to show its commercial work portfolio and to convey a bold, humorous, and contemporary creative voice.  The strong brand tone, excellent graphics, and ease of navigation all help in effectively engaging visitors.

VISUAL DESIGN

The contact page's distinctive typographic personality, whimsical layout features, and hand-drawn style icons make it visually eccentric and expressive.

fig 1.9 work

Colour

The color scheme creates high contrast and energized mood by contrasting bright accent colors, for example, white or yellow, with dark backgrounds.  The color scheme reinforces the confident, creative personality of the brand and contributes to visual drama.  The minimal use of color maintains the viewer's focus on the images and content and retains the coherence and professionalism of the design.

Layout

 Most of the site is occupied with visuals.  The agency's projects are presented in high-res stills and video thumbs, highlighting its creativity and production values.  The imagery effectively conveys the brand's tagline—creative work that "looks damn good"—they're colorful, dramatic, and frequently humorous.

Imagery

The website uses a simple yet dynamic grid system that weds playful asymmetry to ordered elements.  In spite of bold type and photos, there's visual balance because of generous margins and lots of whitespace.  Hover effects and scrolling transitions augment the design without detracting from content.  Refined, professional appearance is provided by consistent alignment, spacing, and rhythm.

FUNCTIONALITY / USABILITY

fig 2.0 "Reach Out"

· The contact page is simple: telephone numbers and address are clearly spelled out with no complex forms or input fields displayed.

· There is a "Reach out" call to action, with an email or phone number invitation.

· Some users may find it simpler to fill out a form without a linear form, but they also lose the chance to harvest structured data (name, topic, message, etc.).  

QUALITY/RELEVANCE OF CONTENT

fig2.1 about

The studio's own confident and humorous tone is reflected in the copy, which is carefully chosen and brief.  The copy is brief but powerful, enhancing and not dominating the photographs.  The agency's ethic and creative methodology are also explained on the "About" page, giving prospective clients insight into the agency's professionalism and persona.

PERFORMANCE

fig 2.2 Performance, load times & responsiveness for Working Stiff Films

· The website loads smoothly with responsive scaling and optimized transitions.

· Large images load reasonably well, maintaining quality.

· Performance is acceptable on mobile and desktop, with minimal lag.

· Further image compression could enhance loading speed on slower networks.

OVERVIEWS

The vibrant, playful, and engaging STIFF website is a perfect example of contemporary innovative web design.  Its provocative, unconventional nature is conveyed by its sensational lettering, dark color scheme, and film-like graphics.  Although some slight performance enhancement is needed, overall design is professional, consistent, and memorable. Navigation and responsiveness are good as well.

---

Website - 3: No Laughing Matter created by Nika Terekhova

fig2.3 No Laughing Matter introductory page

PURPOSE / GOALS OF THE WEBSITE

The name "Animal Free Circus" implies that it is an advocacy, information, and mission website that promotes animal-free circuses, or humane entertainment.  Public education, promotion of animal-free circus alternatives, and maybe lobbying for legislative action or sponsorship of animal-free performances are the implied objectives.  Also, the site needs to defend and justify human-only circuses as morally right and feasible.

VISUAL DESIGN

· The homepage leads with bold statements like “People don’t see the suffering behind the circus magic and glitter.” 

· Large images (or background visuals) present animals, historical imagery, cage motifs. 

· The page is structured as a storytelling scroll: sections of text plus imagery interleaved. 

· Visual style is serious and emotive, with high contrast images and dark tone.

FUNCTIONALITY / USABILITY

fig 2.5 video

· The site allows a user to click through topics / categories to deepen understanding

· Some images are clickable or expandable (to “learn more”)

· A video is embedded (YouTube) to provide documentary evidence.

QUALITY/RELEVANCE OF CONTENT

fig2.7 Sources

· The content is rich, well-researched, and organized by thematic categories (history, abuse, smuggling, etc.) 

· The language is persuasive, moral, and factual; references to reports, documentation, and case studies are cited. 

· There is a section “Project Author: Nika Terekhova” and “Sources” listing references, which increases credibility 

· The site demonstrates depth (e.g. the Clyde the Lion story, the Mary Chipperfield case, smuggling)

PERFORMANCE

fig 2.8 Performance, load times & responsiveness for No Laughing Matter

Generally, the site is functional on all devices and loads quickly.The responsive design adapts in kind without compromising visual organization.

Weakness: Large uncompressed images or videos can affect the load time.

OVERVIEWS

The Animal Free Circus site achieves the middle ground between moral storytelling and simple, contemporary design.  Its intent is assisted by its visual rhetoric, which is simple but emotive.  The text, color, and artwork used convey professionalism and compassion.  The design overall is logical, pertinent, and effective at its message delivery, although some technical refining would enhance load time and engagement.

---

Website - 4: Avision created by Valmax

fig2.9 Avision introductory page

PURPOSE / GOALS OF THE WEBSITE

AVISION presents itself as a creative platform and agency catering to artists such as web designers, illustrators, stylists, photographers, and videographers. Its objectives are:

· Displaying talent portfolios;

· Bringing customers together with creative professionals;

· Using an automated system for simplifying bookings, quotes, and studio use; and

· Creating a collaborative creative community.

VISUAL DESIGN

fig 3.0 menu

 Color

The website has lighter-colored text on darker or neutral color (or deeper) backgrounds, creating a modern, clean, upscale look.Alternate or highlight text and links (such as "Explore," "Join Us," etc.) are rendered readable by contrast, encouraging the viewing of calls to action. A muted color scheme maintains the attention on the images and typography.

Layout

· The website heavily utilizes images to reflect the talent and beauty of the creatives, e.g., studio images, talent portraits, and gallery photographs.

· For the visual enrichment of the website, images are utilized into the team, studio, and gallery pages.

· The look of the website is made simpler by the consistent light, tone, and composition of images.

FUNCTIONALITY / USABILITY

fig3.1 "join us"&"contact"

· The main menu items (Studio, Book, Talents, Services, Gallery) correspond to key site actions, and navigation is simple. 

· The "Contact," "Join Us," and "Explore" call-to-action buttons are prominent and invite user interaction. 

· In employing a classic design concept, the site is most likely responsive, in the sense that it resizes for different screen sizes. 

QUALITY/RELEVANCE OF CONTENT

fig3.2 about

· Aspiring, professional, and succinct, the copy reads, "Where creativity meets opportunity." 

· The names and roles of the talent lend credibility to the platform and raise awareness of its creators. 

· The categories of creative services are listed in a clear service breakdown. 

· Avision's aim and methodology are explained in the "About" section (or its equivalent).

PERFORMANCE

fig3.3 

Performance, load times & responsiveness for Avision

No Error Delay can be detected in the page items which are visible while the site is loading in desktop mode.

· Because web standards are commonly employed, one would expect the site to be compatible with contemporary browsers (Chrome, Safari, Edge).

· Image scaling and adaptive layout seem to be parts of responsive design.

OVERVIEWS

The AVISION website has a sense of confidence, elegance, and visual flair.  It successfully positions itself as more than an agency, but as a creative talent hub.  The blending of the design qualities of color, typography, layout, and photography convey professionalism, modernity, and creative sense.  Navigation is easy, and the message is clear.

---

Website - 5: Selected created by Undesigner

fig 3.4 Selected introductory page

PURPOSE / GOALS OF THE WEBSITE

Selected. is a label, music brand, media brand, and brand.  Its "About" page identifies its missions as to assist up-and-coming and seasoned artists, develop a brand within the electronic, house, and EDM music scenes, and influence cultural music tastes.  It aims to be a liaison between the audience, brand identity, and musical content.

VISUAL DESIGN

fig3.5 Releases 

Color

White, gray, and black make up the site's color scheme, which is minimalist and clean, making it modern and sleek. The detail-orientation of the studio is reinforced by the monochromatic color scheme, enabling visual emphasis on lettering and graphics.

Imagery

To pull out design projects and brand imagery, high-quality images are carefully strewn across the page.  The aesthetic of each photograph is enhanced by employing a great deal of white space, which contrastingly creates visual tension to the artistry and accuracy.

Layout

The grid system utilized in the design is precise and systematic. It displays information in a sophisticated and systematic manner, and the observer's eye follows the various sections naturally. The feeling of visual harmony is reinforced through the repeated use of alignment and spacing.

FUNCTIONALITY / USABILITY

fig 3.5 Demo Drop

· Navigation is standard and accessible from all pages

· The About page is primarily informational, not transactional

· Users can click into other sections: Artists, Releases, Playlists, etc.

· There is a “Demo Drop” link (likely for artists submitting music)

· Social links are prominently linked for audience to explore

QUALITY/RELEVANCE OF CONTENT

fig 3.6 About

· The narrative is compelling: explains origin, growth, vision

· Team bios personalize the brand, showing who’s behind it

· Credibility is supported by mention of streaming milestones (e.g. “crossed the 5 Billion stream milestone early 2025”) 

· The alignment of content (brand history + team + vision) is consistent

PERFORMANCE

fig 3.7

Performance, load times & responsiveness for Selected

The website functions best on a variety of devices and browsers and loads fast.  Irrespective of looking at a desktop, tablet, or phone, the responsive layout ensures similar visual appearance and usability.

OVERVIEWS

Selected. offers a well-written, visually cohesive “About” page that succeeds in telling the brand’s story, introducing key figures, and positioning the brand within the music / cultural space. For further enhancement, adding multimedia (videos, interactive timelines), more visuals (behind the scenes, studio shots), and optimized performance will further enrich the visitor experience.

---

FEEDBACK

Record your instructor’s or peer feedback here. Use it to identify strengths and areas for improvement.