Interactive Design: Exercise 1: Website Analysis
In today’s session, the instructor outlined the semester’s roadmap, with a strong emphasis on web design as our primary focus. We also reviewed the software toolkit we’ll need to have ready. To conclude, Exercise 1 was assigned: using the examples provided by the instructor, select five websites from different categories and produce a detailed, in-depth analysis of each.
Exercise 1: Website Analysis
1.Choose Your Sites
From the provided link, pick five distinct websites to work with.
2.Evaluate Each Selection
Purpose and objectives: assess what the site is trying to achieve and whether that message is clearly conveyed to users.
Visual and layout: examine color choices, typography, imagery, and overall page composition.
Functionality and usability: review navigation flow, forms, and any interactive components for ease of use.
Content quality and relevance: check accuracy, clarity, and how well the information is organized.
Performance: note load speed, responsiveness, and compatibility across devices and browsers.
Summarize key strengths and shortcomings, and explain how each affects the overall user experience.
3.Write Your Reports
Create a concise write-up for each website (minimum 200 words per site).
Structure your analysis with clear headings and subheadings.
You may include screenshots of relevant pages or sections to illustrate your points.
4.Submit Your Work
Share the link to your e-portfolio as your official submission.
WEBSITE 1:https://www.co-al.xyz/
A polymorphous and peripheral practice designing tools for the future of architecture
The core aim is straightforward: present the studio’s positioning (forward-looking, experimental), projects, team, and contact entry points in a minimal yet characterful way.
The long statement on the homepage works like a “first-impression calling card,” setting the tone; the top navigation points to the essentials: project / about / team / contact.
Overall, it doesn’t feel like “selling,” but “displaying an attitude.” It’s more like a white-box gallery inviting you to wander in slowly.
2. Visual Design and Layout
The primary palette is essentially black, white, and gray, with generous whitespace. The black–white balance is crisp and decisive, making the page feel like a noise-free art book.
A few images serve as “accents.” Because the base is so restrained, images have presence the moment they appear.
（2) Typography
Headlines are large and prominent but not showy, with a modern sans-serif feel—crisp lines and an “architectural” temperament.
Line spacing and letter spacing are relatively loose, giving a breathing rhythm—neither oppressive nor scattered. Overall, it feels like viewing a carefully composed poster.
（3) Imagery & Layout
There aren’t many images, but they’re clean—mostly high-quality stills or layout captures—paired with minimalist text to tell a “whitespace narrative.”
The layout favors linear sections: top navigation, a central large heading/paragraph, followed by projects or information areas. It’s like walking a straight line through space—clear and unhurried.
（4) Motion & Transitions
Page changes use fade-ins/outs like gently turning lights off and on—no showy tricks, just smoothness.
On scroll, text and images appear with a soft cadence, as if slowly floating up through the air, conveying a professional sense of calm, precision, and poise.
Hover interactions are restrained—subtle emphasis or opacity shifts—that say “you can click” without breaking the rhythm.
3. Functionality and Usability
Navigation is minimal; the top bar takes you to project / about / team / contact with zero learning curve.
The information structure is flat: few layers and little folding—like a corridor connecting rooms; straightforward in and out.
English dominates, but the wording is plain and not weighed down by academic jargon.
4. Content Quality
Copy is short, precise, and opinionated—more “slogan + footnote” than encyclopedia-length; it first establishes tone and attitude.
Project pages read like a gallery display: emphasizing presentation and finish rather than data dumps—suited to “absorb the feel first, then dig deeper.”
5. Performance (Speed & Responsiveness)
The overall minimalism keeps loading light. Large images may take a beat on first entry, but the overall flow remains smooth.
Both desktop and mobile preserve the clear “white + text + a few images” feel, with responsiveness showing no obvious breaks.
6. Strengths & Weaknesses
Strengths
Unified visual character: black-and-white whitespace + sturdy typography—like a design yearbook—professional and enduring.
Smooth transitions: measured fades and scroll rhythms make browsing feel like an unhurried walk through space.
Effortless navigation: flat structure and clear pointers; anyone can grasp the path instantly.
Areas for Improvement
Low information density: to quickly grasp “what was done and its impact,” more project highlights and process details would help.
More exploratory entry points: a project index with filters or a thumbnail wall would better serve “image-first” explorers.
Multilingual and localization: currently English-forward; to reach broader audiences, consider a CN/EN toggle.
WEBSITE 2:https://s-2k.webflow.io/#legacy
A mechanical and emotional narrative that goes “beneath the surface,” using dynamic imagery and oversized typography to express a car’s spirit.
1. Purpose and Goal (Site Purpose)
Core aim: Use immersive visual storytelling to convey the S2000’s mechanical aesthetics and sense of “legend,” emphasizing the soul of the chassis, engine, and driving experience.
Clear entry points; primarily a single long-scrolling page with anchors jumping to key sections like “Legacy,” reading like a long-format picture book.
Feels more like a tribute/special feature page: mood first, details and specs second; it sells “feeling” and “belief.”
2. Visual Design and Layout
（1) Color
Predominantly black/dark gray base contrasted with white/light gray text; selectively accented with high-saturation images or metallic cool tones to create a “mechanically austere” atmosphere.
The dark background makes lighting and body highlights stand out; the page feels like a “nighttime gallery” with a touch of cinematic immersion.
（2) Typography
Headlines are oversized sans-serifs—sturdy, geometric—evoking speed and power; weights for subheads and body text are clearly tiered.
Line and letter spacing are relatively loose, letting text breathe on dark backgrounds; when large type dominates, it lands like a “poster-grade” visual hammer with direct emotional impact.
English lines are concise and punchy—repeating slogan-like short phrases whose cadence feels like an engine firing.
（3) Imagery & Layout
Wide, full-bleed images, close-up mechanical details, and silhouette lines of the body take center stage; strong contrast and crisp detail.
The layout follows a rhythm of “full-bleed panels + widescreen sections”: one theme per screen, image first to anchor, then text to complete the meaning.
Primarily vertical linear sections; scrolling feels like moving past display cases. Occasional image–text juxtapositions and subtitle-style notes keep information density controlled.
（4) Motion & Transitions
Page changes lean on fades; scroll-triggered entrances are gentle yet weighty (subtle pushes, lifts, and dissolves).
Text and images often pair slight movement with opacity shifts, as if surfacing from the dark; the unhurried tempo lets emotion build.
Hover states favor restrained feedback—slight scale-up, brightness lift, or underlines—signaling “clickable” without interrupting viewing.
Subtle parallax or layered scrolling may appear to create depth; overall it avoids showiness, prioritizing smooth continuity.
3. Functionality and Usability
Simple single-page anchor navigation; returning to top or jumping to “Legacy” requires no learning curve.
Clickable areas are recognizable (contrast, underlines, brightness shifts); the path is linear—browsing feels like a corridor tour.
Copy leans on short sentences; technical details are embedded in paragraphs, easy to read—more “emotion + popular science” for general audiences.
4. Content Quality
Tone is assertive, concise, and slogan-like, building force against the dark background and big type; keywords spotlight “chassis architecture,” “double wishbone,” and “hand-built F20C/F22C.”
Content structure follows “emotion first, knowledge second”: present “legend/spirit” before mechanical structure and driving feel.
Image quality is strong; close-up details support the persuasion of “mechanical aesthetics.”
5. Performance (Speed & Responsiveness)
Large images and possible short videos add first-screen load, but transitions are well-tuned and scrolling stays smooth.
Responsive behavior is solid: on mobile, content typically stacks into a single column with increased whitespace; big type and close-ups still land with impact on small screens.
Overall text contrast on dark backgrounds is readable, but over-image areas need local contrast care (some spots may be a bit strained).
6. Strengths & Weaknesses
Strengths
Visual storytelling grips: big type + dark base + high-contrast imagery deliver “mechanical romance” and “speed emotion” straight to the senses.
Smooth transitions: the rhythm of scroll reveals carries “weight,” like a camera push-in, with a unified atmosphere.
Clear memory hooks: a few keywords communicate selling points like “chassis/double wishbone/high-rev NA,” making them stick.
Areas for Improvement
Data/detail depth: for users seeking specs, model-year differences, or mod lineage, the current layer is shallow—add “read more/spec sheet.”
Exploratory entry points: adding a “chapter index/floating anchors/thumbnail preview” would aid skimming and revisiting.
Readability tweaks: where text overlays images, consider steadier contrast strategies (translucent scrims/letter outlines) to balance aesthetics and accessibility.
WEBSITE 3:https://terminal-industries.com/home
A system built from the ground up for “uninterrupted operations”: easy to deploy, low maintenance, and intuitive to use.
1. Purpose and Goal (Site Purpose)
- Core aim: through clear product storytelling, convey Terminal YOS’s stability, high compatibility, and ease of use; emphasize seamless integration with TMS/WMS, plus the practical advantage of “low IT lift and no third‑party hardware.”
- Navigation is a streamlined, centered pill bar: Home / System / About / Resources / Contact.
- The tone feels like a hybrid of a product white paper and a live demo: establish value and scenarios first, then guide users to get in touch.
2. Visual Design and Layout
（1) Color
The hero uses a dusk/night dark photograph (silhouette of a tractor and trailer) to create an industrial, on‑site mood; scrolling down shifts to light/white content sections with high-contrast black text for readability.
The brand accent color is a bright green (e.g., active state in the nav), providing status feedback while minimizing distraction; CTAs are restrained, more often using outline/contrast to emphasize “Contact.”
（2) Typography
A modern sans-serif system with heavier weights for headings and medium for body text; generous letter and line spacing keeps reading crisp and orderly, matching an “industrial software” character.
Large headings remain legible on both dark and light backgrounds, serving as strong visual anchors.
（3) Imagery & Layout
Imagery centers on real/photorealistic shots of vehicles and yards, UI screenshots, and diagrams—balancing “real-world scenes + system UI.”
Modular sections present one topic per screen (value, integrations, UI fragments), advancing the story like “information building blocks”; icon matrices, partner logos, and simplified data-flow arrows underscore “integrable/configurable.”
（4) Motion & Transitions
Scroll-triggered reveals use fades and gentle lifts—smooth, not showy; page transitions remain continuous, aligning with the “no disruption” promise.
Hover feedback is restrained: subtle brightness/outline/underline changes on buttons and links—clear without being distracting.
The top navigation is a sticky pill bar that remains visible while scrolling, keeping orientation clear.
3. Functionality and Usability
Navigation maps directly to key questions: “What does the system do” (System), “Company and team” (About), “Materials and case studies” (Resources), and “How to contact/partner” (Contact).
A flat structure supports sectional browsing/anchor jumps; key info (compatibility, deployment, support) is reachable within the first few screens.
Copy uses a practical tone, with minimal jargon, helping non-technical roles grasp the essentials quickly.
4. Content Quality
Key messages stand out: low IT lift, no third‑party hardware dependency, modern UI/UX, compatibility with mainstream TMS/WMS, and yard‑level configurability.
Organized as “pain points → solution → benefits”: uninterrupted operations and easy deployment first, then integrations and on‑site usability; customer quotes/data inserts serve as evidence blocks.
Concise writing and short sentences pair with large headings to build steady persuasive force.
5. Performance (Speed & Responsiveness)
Predominantly static images and vector diagrams keep loading light; the large hero image may add a brief wait, but scrolling remains smooth.
On mobile, content stacks into a single column with more whitespace; large type and UI screenshots remain legible; responsiveness shows no obvious breaks.
Contrast and target sizes are generally accessible; text over images typically retains sufficient overlays and contrast.
6. Strengths & Weaknesses
Strengths
“Industrial restraint” in visuals and information: clear, standardized, easy to scan—like an operator’s quick-start manual.
Smooth transitions and steady rhythm: avoids flashiness, reinforcing a “reliable/uninterrupted” product mindset.
Focused value props: light deployment, strong compatibility, intuitive UI; the “Contact” path is clear for next steps.
Areas for Improvement
Technical depth entry points: add a more detailed integration matrix, API documentation previews, and explicit security/compliance sections for technical audiences.
Scenario-based cases: include comparative cases across yard sizes/industries and KPI improvement curves to aid cross-evaluation.
CTA conversion funnel: if scheduling demos is a goal, place prominent “Book a demo/Request a demo” buttons in key sections, not only via Contact.
WEBSITE 4:https://grit.pictures/
A collage aesthetic of torn paper edges + tactile textures + a black‑and‑white base, creating a distinctive, characterful moving‑image portfolio
1. Purpose and Goal (Site Purpose)
Core aim: use a strong visual language and curated project sequencing to quickly communicate the team’s creative personality and commercial filmmaking capability, building both a “memorable brand tone” and a “selectable production competence” .
Navigation and structure center on showcasing work and introducing the brand, first immersing users in project visuals and copy that match the tone, lowering the “comprehension threshold” and boosting memorability.
Overall positioning is “creative calling card + work showcase”: grab attention with style first, then follow with project and service info to support business conversations.
2. Visual Design and Layout
（1) Color
A monochrome black‑and‑white foundation, paired with high‑contrast imagery and distressed textures, creates a “gritty yet restrained” feel that underscores the brand meaning and attitude of “GRIT”.
Accent colors are used sparingly; hierarchy relies more on materiality and typographic contrast so the visuals don’t overpower the work itself.
（2) Typography
Large, direct headlines with magazine‑style collage layout; clear hierarchy for body text. Whitespace and block relationships generate “cut‑and‑paste poster” tension, yielding a rhythmic reading experience.
The combination of type and material textures emphasizes a “handmade/experimental” visual context, avoiding an overly corporate feel.
（3) Imagery & Layout
Large stills, behind‑the‑scenes fragments, and texture assets interleave—like a “mad creative’s sketchbook”—creating an intimate, up‑close sense of process.
Layout alternates full‑width sections with collage grids, one emotional beat per screen, delivering both work display and instant brand personality.
（4) Motion & Transitions
Subtly punchy fades/push‑ins, paired with torn edges and paper‑layer entrances/exits, reinforce the feeling of “flipping through a journal” without flashy distractions.
Hover feedback leans on contrast/texture intensification and slight element shifts, signaling clickability while preserving the collage unity.
3. Functionality and Usability
Clear navigation, with a core path of “view work → learn about the team → get in touch,” matching a commercial studio’s lead‑gen goals and decision flow .
A flat information hierarchy delivers “style, capability, and cases” within the first few screens for first‑time visitors, reducing comprehension cost and bounce risk.
Copy is straightforward; meaning is carried more by visual intensity, enabling quick scanning and emotional entry .
4. Content Quality
An evidence‑first strategy centered on the work itself: let images speak, with concise labels and a brand voice to state attitude—well suited to commercial and advertising showcases .
Brand narrative focuses on “experimentation, texture, execution,” achieving differentiated positioning with minimal text .
5. Performance (Speed & Responsiveness)
A visual stack of large imagery and high‑quality textures requires balancing initial load with scroll smoothness; with a modern stack and proper asset slicing, the work‑first strategy remains viable.
Responsive design tightens the collage on smaller screens, shifting to single‑column/sequenced presentation to preserve readability and rhythm.
6. Strengths & Weaknesses
Strengths
Highly recognizable collage aesthetic: torn edges, paper textures, and a black‑and‑white base create brand mnemonics visible from afar .
Work‑first information architecture: “feel first, info second,” aligned with how creative buyers browse .
Unified tone and material system: a consistent visual language across the site reduces fragmentation and noise .
Areas for Improvement
Efficiency layer for information retrieval: within a strong collage style, more explicit “services list/process + contact entry” would better serve producers/brand clients .
Performance trade‑offs: continue optimizing hero textures and imagery (compression/lazy loading) for weak mobile networks.
Accessibility: when high black‑and‑white contrast overlaps distressed textures, ensure stable text legibility strategies (overlays/outline/contrast tuning) to balance aesthetics with readability.
WEBSITE 5:https://electrafilmworks.com/
A card grid of poster‑grade stills plus project titles/client names that quickly routes to individual case pages and video playback
1. Purpose and Goal (Site Purpose)
Core aim: use high‑quality poster images to quickly display commercial projects, highlight client and title, reduce browsing friction, prompt clicks into project detail/video playback, and ultimately guide users to make contact.
Page positioning as a “work index (Work > Commercials)”: cards show the project cover, title, and client name (e.g., “Just One Chapter — U.S. Air Force,” “Memories — Experience Scottsdale”) as the primary entry points to detail pages.
Tone and structure prioritize “see the work,” with minimal supporting text to meet producers’/brand stakeholders’ need for rapid screening and initial evaluation.
2. Visual Design and Layout
（1) Color
Neutral backgrounds support high‑contrast stills/key visuals; overall restraint keeps attention on imagery and project names.
Accent colors are used sparingly (mostly on hover or small UI cues) to avoid visual distraction.
（2) Typography
Primarily modern sans‑serif; heavier weights for titles. Project names and client names form a clear hierarchy for quick scanning.
Generous line spacing and whitespace maintain breathing room and a consistent reading cadence across different covers in the list.
（3) Imagery & Layout
Presented as a grid/list; each card comprises a cover image + project title + client name, with consistent aspect ratios and layout.
Typical examples: Just One Chapter — U.S. Air Force; Memories — Experience Scottsdale (image assets come from Prismic, see URL parameters).
（4) Motion & Transitions
Hover interactions typically include subtle zoom/darken/outline or title reveal—clear feedback without flashiness.
Transitions to detail pages are lightweight, prioritizing smooth scrolling and responsive clicks.
3. Functionality and Usability
Clear information architecture: this is the “Commercials” category index. The core user path is “browse cards → open project page → watch/learn more → contact.”
Clicking a card opens a detail page (typically with video playback, synopsis, and production info); the list avoids lengthy copy that would disrupt browsing.
Friendly for first‑time visitors: displaying title and client together helps quickly judge project scale and industry relevance.
4. Content Quality
“Work as evidence” presentation: high‑quality covers plus title/client name quickly establish professionalism.
Clear project naming with visible client labels balances brand credibility with search efficiency; detail pages (as expected) can expand to director/production credits, BTS images, etc.
5. Performance (Speed & Responsiveness)
Image delivery uses Prismic transcoding and compression parameters (e.g., `auto=format,compress&q=70`), benefiting initial load and scroll performance.
Responsive grids collapse to single/double columns on small screens while keeping covers and titles legible; continue to leverage lazy loading/multi‑resolution slicing for weak network scenarios.
6. Strengths & Weaknesses
Strengths
Work‑first, minimal distraction: the card grid goes straight to the core content, reducing unnecessary UI and copy noise.
Clear client endorsements: client names alongside titles help build trust quickly.
Strong visual consistency: unified cover ratios and typographic hierarchy enable efficient scanning.
Areas for Improvement
Discovery and filtering: consider filters/tags by industry/year/director/client to enhance deep‑dive browsing.
Accessibility: add alt text for covers and ensure sufficient title/background contrast to improve readability and accessibility.
Conversion path: surface a “Contact/Inquiry” entry prominently on project detail or list pages to shorten the path from viewing to outreach.
Comments
Post a Comment