Web Analysis Guide

📋 Table of Contents

• Condensed web analysis report
  • 1. Theoretical approaches
  • 2. Technical tools
  • 3. Key indicators
  • 4. Web storytelling
  • 5. 3D on the web
  • 6. Award criteria
  • 7. Web art and semantics
  • 8. Quick guide for students (10 min, ATELIER)
  • 9. Importance of analytics in design
• Web Page Analysis: Methods, Tools, and Criteria (in progress)
  • Theoretical approaches for website analysis
  • Tools to evaluate code, semantics, accessibility and SEO
  • Key indicators of web quality
  • Storytelling in web design (interactive narrative)
    • Common techniques in web storytelling:
  • 3D techniques on the web (and the three-dimensional “wow” factor)
  • Award-winning websites and evaluation criteria in awards
  • Summarizing the key evaluation criteria (guide):
  • Web art in design research and meaning (semantics)
  • Student guide: How to analyze Outstanding Websites (10-min pitch, ATELIER methodology)
  • The importance of analytical skills in design (final reflection)
  • References

Condensed web analysis report

1. Theoretical approaches

(See expanded section: Theoretical approaches for website analysis)

• Hermeneutics: part–whole circle, interpretation of meanings.
• Discourse: tone, narrative, ideology.
• Visual/Semiotics: color, typography, hierarchy, symbols.
• Usability: Nielsen heuristics, ease of use.
• Critical: social context, biases, ethics.
• Integral: combine perspectives.

References

• Truth and Method. Gadamer. https://web.mit.edu/kaclark/www/gadamer_truth_and_method.pdf
• 10 Usability Heuristics. Nielsen Norman Group. https://www.nngroup.com/articles/ten-usability-heuristics/

2. Technical tools

(See expanded section: Tools to evaluate code, semantics, accessibility and SEO)

• W3C Validator: semantics, syntax.
• Google Lighthouse: performance, accessibility, SEO.
• WAVE / axe: WCAG compliance, color contrast, alt text, ARIA roles.
• PageSpeed / GTmetrix: speed, Core Web Vitals.
• Search Console / Semrush: on-page SEO, indexing.
• Others: Link Checker, HTMLHint, Mobile Friendly.

References
W3C Validator. W3C. https://validator.w3.org/
Lighthouse. Google. https://developer.chrome.com/docs/lighthouse/overview/
WAVE Tool. WebAIM. https://wave.webaim.org/
PageSpeed Insights. Google. https://pagespeed.web.dev/
Search Console. Google. https://search.google.com/search-console/

3. Key indicators

(Related to the performance, semantic quality, SEO and accessibility sections in the extended block)

• Responsiveness: adaptability, fluidity, mobile-first.
• Speed: load < 3–5s, Core Web Vitals.
• Semantic quality: correct tags, hierarchical headings, schema.
• SEO: <title>, <meta>, friendly URLs, sitemap.
• Accessibility: alt, contrast, keyboard, WCAG AA.
• Visual impact: coherence, aesthetics, wow factor.

References
Responsive Design. MDN. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Core Web Vitals. Google. https://web.dev/vitals/
WCAG 2.1. W3C. https://www.w3.org/WAI/standards-guidelines/wcag/

4. Web storytelling

(See details in Storytelling in web design (interactive narrative))

• Narrative: visual + interaction + scroll.
• Features: sequences, micro-animations, scroll-telling.
• Techniques: scroll-jacking, SVG animation, audio, microinteractions.
• Goal: engagement, emotion, immersion.

References
Storytelling in design. Awwwards. https://www.awwwards.com/websites/storytelling/

5. 3D on the web

(See details in 3D techniques on the web (and the three-dimensional “wow” factor))

• Technology: WebGL, Three.js, WebXR.
• Authentic 3D: interactive scenes, products, walkthroughs.
• Pseudo-3D: parallax, transform, z-index.
• Indicators: fps, preloader, purpose, controls, fallback.
• Use: immersive experiences, wow factor, awards.

References
3D category. Awwwards. https://www.awwwards.com/websites/3d/

6. Award criteria

(See Award-winning websites and evaluation criteria in awards)

• Awwwards: Design 40%, Usability 30%, Creativity 20%, Content 10%.
• Webby: Content, Structure, Visual Design, Functionality, Interactivity, Overall Experience.
• CSSDA/FWA: creativity, technical innovation, engagement.
• Goal: form + function + innovation + message.

References
Awwwards Evaluation System. Awwwards. https://www.awwwards.com/jury/
Webby Judging Criteria. Webby Awards. https://www.webbyawards.com/judging/

7. Web art and semantics

(See Web art in design research and meaning (semantics))

• Net Art: websites as interactive canvas.
• Symbolic value: glitch, brutalism, critical aesthetics.
• Expanded semantics: cultural meaning + semantic code.
• Design research: design as epistemic space, conceptual reflection.

References
What is Web Art?. Webpunk.dev. https://www.webpunk.dev/
Critical design and critical theory: the challenge of designing for provocation https://dl.acm.org/doi/10.1145/2317956.2318001 (example)

8. Quick guide for students (10 min, ATELIER)

1. Selection: award-winning/storytelling/3D site.
2. Initial impression: first sensations.
3. Structure: architecture, menu, content.
4. Visual: color, typography, identity.
5. Interaction: effects, animations, 3D, scroll.
6. Usability: clarity, quick accessibility.
7. Technical: loading, quick Lighthouse.
8. Excellence criteria: Design, UX, Creativity, Content.
9. Design: outstanding, good, average?
10. Usability: issues or totally intuitive?
11. Creativity: novel ideas or implementations?
12. Content: substantial or weak?
13. Conclusions: takeaways and improvements.

9. Importance of analytics in design

• Complements creativity.
• Allows arguing decisions.
• Enables continuous improvement.
• Develops critical eye.
• Professionalizes discourse and practice.

References
Design as epistemic space. Frayling, Research in Art & Design. https://researchonline.rca.ac.uk/

Web Page Analysis: Methods, Tools, and Criteria (in progress)

Theoretical approaches for website analysis

An in-depth analysis of a web page can be approached from various academic perspectives:

• Hermeneutics (interpretation): oriented toward discovering deep meanings through interpretation. It assumes that understanding is a circular process (part–whole) where meaning emerges from the dialogue between preconceptions and content ¹. In practice, it implies examining concrete elements (text, images, interface) and, at the same time, the whole and its context to understand how each detail contributes to the overall message. (Hans-Georg Gadamer is a key author: hermeneutic circle).

• Discourse analysis: studies the website’s narrative and language (tone, storytelling, implicit values and persuasive structure). It relates to linguistics and the social sciences (e.g., Foucault, Fairclough). It observes whether a site tells a coherent story and what ideology or emotions underlie texts and images.

• Visual analysis (semiotics and design): focuses on the site’s visual communication. It breaks down palette, typography, composition, iconography and images and their symbolic meaning (semiotics; visual grammar of Kress & van Leeuwen). It asks: what connotations does the style convey? how does hierarchy guide the gaze? It includes assessing the aesthetic experience (Norman, Barthes).

• Usability analysis (UX): evaluates ease of use (Nielsen: heuristics of visibility of system status, user control, consistency, error prevention…). Methods: user tests, expert inspections. It seeks intuitive navigation, quick findability of content, and absence of obstacles (broken links, confusing flows, etc.) (Nielsen: 10 heuristics).

• Critical analysis: questions the site’s socio-cultural context. Beyond “what works,” it asks why it is like that and whom it serves. It considers biases, inclusion, assumptions about the user. It looks at whether it empowers (public services) or prioritizes commercial objectives (networks). It integrates critical theory, anthropology and cultural studies; a deep reflection on culture, discourse, aesthetics and technology is expected (Design research).

These approaches are not mutually exclusive. On the contrary, a comprehensive analysis of a website combines several: for example, studying usability (is it easy to use?) together with hermeneutics (what meaning or story does it communicate?), discourse (how does it address the user?), the visual (how does aesthetics affect perception?) and a critical lens (what impact or bias does this website have on society?). This multidisciplinary approach enriches understanding of the website as an object of design, communication, and culture.

Tools to evaluate code, semantics, accessibility and SEO

There are numerous technical tools that assist in analyzing the quality of a web page (code, accessibility, SEO). Some notable ones are:

• HTML/CSS Validator (W3C): validates markup and detects misnested tags, obsolete attributes or other syntactic errors². Semantic code (e.g., using <header>, <nav>, <main>, <article> instead of multiple <div> with no role) promotes accessibility and indexing, offering a logical structure understandable by assistive technologies and search engines³.

• Google Lighthouse: automated audits of performance, accessibility, best practices and SEO (Lighthouse). It provides scores and actionable recommendations (missing alts, mobile-friendly, metadata).

• Accessibility (a11y): WAVE and axe enable visual inspection and automated analysis of barriers (contrast, labels, roles) and facilitate WCAG compliance (WAVE, axe).

• Performance: PageSpeed/GTmetrix measure load times and Core Web Vitals; they detect bottlenecks (uncompressed images, render-blocking resources, cache) (PageSpeed, GTmetrix). Pingdom/WebPageTest analyze the waterfall and test from different locations.

• On-page SEO: Search Console, WooRank, Semrush, Nibbler review title/meta, heading hierarchy, sitemap, friendly URLs, structured data, broken links. Search Console corroborates readability for Google; the auditors list improvements (keyword density, alts, etc.)⁴⁵.

• Others: W3C Link Checker (broken links)⁶; HTMLHint/CSS Lint (code quality); Mobile Friendly Test (responsive)⁷; integrated platforms (Siteimprove, Silktide). In summary, these tools act as our “technical assistants” to detect weaknesses of a website in objective terms. A good analyst will combine the results of these tools with their judgment to prioritize findings: for example, Lighthouse may show a low performance score, WAVE may detect 5 accessibility errors and the W3C validator may flag 10 HTML warnings – you will need to discern which issues are most critical to solve depending on the site’s objectives and audience.

Key indicators of web quality

When analyzing web pages, it is advisable to look at a series of key indicators that reflect the quality of the experience and technical robustness. The main ones are described below:

1. Responsiveness (Responsive Design) Adaptability to different devices is essential. A site with good responsive design is displayed and functions correctly across multiple screen sizes (from mobile to desktop monitors). Indicators of responsiveness include: absence of horizontal scroll on small screens, menus that transform appropriately (for example, into a hamburger menu on mobile), fluid images that scale without distortion, and content readable without zoom. Tools such as Google’s Mobile Friendly test help verify these aspects, since Google now indexes primarily the mobile versions of websites (Mobile-First Index)⁷. A site not adapted to mobile will lose ranking and users. “Fluidity” also refers to how well the layout reacts when resizing the window: smooth transitions between breakpoints and effective use of media queries. In short, responsiveness ensures universal accessibility and a consistent experience regardless of device.

2. Load speed and performance Response speed (performance) is critical. Users tend to abandon slow sites; even a delay of 1 or 2 seconds can impact bounce rates. Metrics such as Time To First Byte (TTFB), Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) are measured, known collectively as Core Web Vitals (indicators that Google uses as a ranking factor). A simple indicator is total load time: generally, a page is expected to take < 3–5 seconds to fully load on typical connections⁸. To evaluate it, use the mentioned tests (PageSpeed, GTmetrix). Resource efficiency is also valued: images are optimized (modern formats like WebP/AVIF, lazy loading for images outside the viewport), JavaScript and CSS are minified and combined when possible, CDN usage, etc. Good performance not only improves the experience (snappy site, smooth transitions) but contributes to SEO, since search engines reward fast websites⁹.

3. Semantic quality (Semanticity) By semantic quality we mean how well structured and meaningful the page’s HTML code is. Semantic HTML uses appropriate tags that describe the function of the content – for example, using <header> for the header, <nav> for the navigation menu, <main> for the main content, <article> or <section> for content sections, <aside> for side content, <footer> for footer, and marks like <h1>…<h6> for title hierarchy. This makes it easier for both search engines and assistive technologies to understand the logical structure of information. Indicators of good semantic quality: a single clear <h1> per page, coherent nested heading structure (H1, then H2, etc.), lists defined with <ul>/<ol> instead of multiple <br> to separate items, tables used only for tabular data (not layout), forms with correctly labeled fields (<label>). Validating HTML with the W3C is one step to ensure syntactic correctness², but semantic quality goes beyond “no errors”: it is about the code describing the content. It even includes adding structured data (microdata, JSON-LD from Schema.org) that semantically enrich the page indicating, for example, that a certain block is a “Recipe” with properties such as “ingredients” and “cooking time,” or that the page contains a “Company” profile with its “address” and “phone.” A semantic web improves interoperability and usually aligns with accessibility and SEO. As one popular resource says, the Semantic Web aspires to information that is not only linked but whose meanings are processed¹⁰ – in the context of a page, the clearer we make to the code what the meaning of each section is, the better.

4. SEO (Search Engine Optimization) SEO indicators cover a broad spectrum. In on-page SEO, standouts include: the page’s <title> tag (should be descriptive and unique per page), the meta description (an attractive summary that will appear on Google), appropriate use of keywords in content (without keyword stuffing), the presence of friendly URLs (e.g., mysite.com/blog/web-analysis instead of mysite.com/p?id=123), and the structured data markup mentioned earlier (which can enable enriched results in Google, rich snippets). The internal link structure also matters (navigation should allow the crawler to access all content within few clicks, with relevant anchor text) and the absence of 404 errors or chained redirects. Technically, an SEO-friendly site will have a correct robots.txt file, an updated XML sitemap, and will not block important resources. Speed and mobile compatibility, already discussed, are SEO factors (Google prioritizes fast, mobile-friendly sites). A concrete indicator: that the page passes Google’s tests without critical issues in Search Console. From the perspective of awards or excellence standards, content quality also counts: original, relevant and well-written content. For analysis, you can measure SEO with audit tools that assign a score and list improvements (for example, Semrush or Ahrefs analyze keyword density, backlinks, etc.). In short, good SEO is reflected in a site that is technically optimized, easily indexable, and whose content satisfies the search intent of target users.

5. Accessibility Web accessibility evaluates how usable the site is for people with disabilities or limitations. Key indicators: presence of alternative descriptions (alt) on images (for blind users using screen readers), captions or transcripts in multimedia content (video/audio) for deaf users, sufficient color contrast between text and background for people with low vision or color blindness (follow WCAG contrast ratios), fully operable keyboard navigation (you should be able to access all interactive elements by tabbing, important for people with reduced mobility or who do not use a mouse), visible focus (the active element highlighted), and not using only sensory attributes (like “click the green button” – because blind or color-blind users may not identify it). A summary indicator is compliance with WCAG 2.1 level AA, the recommended standard. Tools like WAVE or Lighthouse Accessibility flag elements such as: correct use of ARIA roles when necessary, that the page language is declared (<html lang="en">), that forms have clear instructions and understandable validation (and that errors are announced). From a quantitative standpoint, Lighthouse gives a score from 0 to 100 in accessibility; however, many issues require manual review (for example, checking that an image’s alt actually reflects its purpose). Accessibility is closely linked to semantic quality: respecting HTML standards and inclusive design often results in a more accessible page. In addition, accessibility benefits all users (e.g., a well-contrasted interface looks better on screens in sunlight). Note that the W3C emphasizes that a well-ranked web should respect accessibility standards³, which reinforces how SEO and accessibility sometimes go hand in hand (accessible content is also more understandable to Google).

6. Visual impact and UI experience Visual impact is a more subjective indicator but equally important, especially on branding, marketing or creative portfolio sites. It includes the perceived aesthetic quality in the user interface (UI) design and how it supports the user experience (UX). Some criteria: coherence in visual identity (colors, typography and graphic style aligned with the brand or theme), clean and balanced design (adequate whitespace, consistent alignment, absence of clutter or visual saturation), appropriate use of high-quality images or illustrations, and that “wow factor” or level of polish that makes the site look professional and attractive. The initial visual impact occurs in milliseconds – studies indicate that users form an impression in the first 50ms of seeing a site. Therefore, elements like a good header with a clear message and striking visuals, and a color scheme that sets the right mood, can either captivate the user or drive them away. Consistency is also relevant: for example, that all buttons follow the same style, that icons belong to the same visual family, etc., since inconsistency can generate dissonance and a perception of low quality. From the perspective of design awards, visual design is often heavily weighted (as we will see in Awwwards/Webby criteria). Moreover, visual impact must go hand in hand with usability: a beautiful but confusing site fails in UX. Objective indicators of the visual section can include compliance with classic design principles (contrast, repetition, alignment, proximity), but ultimately it is also evaluated qualitatively: for example, does the page generate emotional engagement? does it adequately communicate the brand personality or project message? In analysis, you can cite comparative references: whether the website follows modern trends (minimalism, flat design, neumorphism, etc.), whether it innovates with graphics or animations, or whether it looks outdated. In summary, visual impact is the first hook for the user and a reflection of the care put into the design.

Storytelling in web design (interactive narrative)

An especially interesting field of front-end/UI is storytelling: the art of telling stories through the web experience. In recent years many award-winning sites stand out for weaving a narrative that engages the user from beginning to end. Effective storytelling fuses visual design and interaction design to immerse the user in a meaningful journey¹¹. Instead of presenting static information, these sites usually develop a narrative, whether literal (for example, a brand story or a virtual journey) or implicit (an atmosphere that evolves as the user scrolls).

Typical features of storytelling websites include: abundant use of sequential visual elements (for example, illustrations or videos that progress as you navigate), micro-animations that reinforce milestones in the story, texts written in a narrative tone (perhaps in first person, or creating suspense), and scroll telling (where the user’s scroll position triggers events – background changes, chapter appearances, etc.). A case cited by Awwwards is “successful storytelling design combines the visual and the user interface to foster interaction and engagement”¹¹. That is, it is not only about good text: the medium is the message, and the way the user interacts (scrolling, discovering hidden content, choosing paths like choose-your-own-adventure) makes them live the story.

Notable examples of web storytelling might be multimedia news feature pages (that combine text, video, interactive graphics in a narrative thread) or creative promotional sites: for example, “Heart of the Mountain” (award-winning site at Awwwards) immerses the visitor in a fictitious mining expedition through animations and narration as you scroll; another, “Life in Vogue,” presented the Vogue Italia issue as an interactive virtual visit by rooms, with a story in each section. These experiences are often highly customized and one-page (the entire narrative on a long page divided into scenes).

The goal of storytelling is to generate a deeper connection with the user: appeal to their emotions and curiosity, keeping their attention longer. From a hermeneutic point of view, we could say it turns the user into a co-author of meaning, since the story is revealed according to their interaction. Implementing effective web storytelling requires balance: if the narrative is too rigid it can frustrate someone seeking specific info; if it is too subtle, it may go unnoticed.

Common techniques in web storytelling:

• Controlled scroll-jacking: capture scroll to move the page between scenes, synchronizing content (typical resource in visual narratives).
• Sequential animation: SVG/canvas/CSS in phases to illustrate stages of the story.
• Ambient audio or narration: with prudence; it should be activated by user interaction.
• Playful microinteractions: revealing hovers, embedded mini-games, subtle feedback.

• Thematic continuity: coherence between visuals, text and interaction (e.g., “space journey”: rocket cursor, stars in background, logbook tone).

  From a UI/UX perspective, storytelling is a powerful engagement tool. A site with well-executed storytelling can stand out in awards and brand impact because it leaves a memorable impression. In evaluation, you can judge: Is there narrative clarity (is the message or story understood)? Does the user’s interaction contribute to the story rather than interrupt it? Is immersion achieved? A design centered on successful storytelling, as Awwwards describes, manages to motivate the user to explore and feel the experience, rather than merely consume information¹¹.

3D techniques on the web (and the three-dimensional “wow” factor)

The use of 3D graphics on websites has grown thanks to technologies like WebGL (Web Graphics Library), Three.js and the greater power of modern browsers. Integrating 3D content gives the site an extra dimension of immersiveness. A good 3D site is visually impressive, creating in the user the sensation of being inside the experience, which in turn fosters interaction and engagement¹².

There are two strands in which “3D” appears in web design: 1) Real-time authentic 3D: three-dimensional scenes rendered in the browser, where the user can move or the content rotates in 3D. This is achieved with WebGL. For example, 3D product configurators (view the object from all angles), experimental sites with lightweight 3D games, architectural virtual tours, interactive three-dimensional maps, etc. Here the technical analysis evaluates fluidity (is the frame rate constant?), optimization (texture loading, level of detail according to device) and usability (are the 3D controls intuitive, like drag to rotate, scroll to zoom, etc.?). 2) Depth and layering effects (pseudo-3D): intensive use of parallax, translation animations on the X/Y/Z axes, and layers with different z-index to simulate depth. Even without WebGL, with CSS3 we can transform elements in 3D (rotateY, translateZ, etc.) to create stacked interfaces or 3D-style carousels. Many sites use this resource to add dynamism – for example, making elements move slightly in 3D as you move the mouse (simulating a camera), or overlaying sections in a cinematic way as you scroll. This adds visual “flavor” without being a full 3D environment.

Award-winning 3D websites often combine both: they may have a WebGL intro (a spectacular interactive animation) followed by sections with parallax scrolling. A notable case: luxury fashion sites sometimes use 3D – e.g., CHANEL - Les 4 Ombres (Site of the Day on Awwwards) presented a makeup product with an artistic 3D walkthrough. Another example, museum-like experiences or artists’ portfolios in 3D.

Interactivity in 3D is crucial. A 3D model by itself is passive; the key is how the user can interact: can they rotate the view, click on parts of the model to get information, navigate a 3D space? Hence the saying that the best 3D websites “show the power and potential of 3D web development, with captivating interactive experiences”¹². Good design will integrate the 3D part without sacrificing performance or accessibility (there should always be alternative text or alternate content if the 3D canvas does not load).

Indicators to evaluate in 3D content:

• Performance: does it maintain a decent frame rate? (ideally > 30 fps on average hardware).
• Progressive loading: preloader or occlusion to avoid empty canvases. Optimize (Draco, glTF…).
• Added value: does 3D contribute to the experience or is it ornament? Clear purpose (product, ambience…).
• Controls: discoverable (indications of “drag to explore,” gyroscope icons on mobile…).

• Fallback: alternative if there is no WebGL (image/video instead of the canvas).

  It is also relevant to mention VR/AR web techniques: with WebXR, some sites allow you to view 3D content in virtual or augmented reality (e.g., immersive experiences with VR headsets, or placing 3D models in your environment with AR). These are cutting edge, though still niche. In conclusion, the use of 3D on the web has become a sign of avant-garde design. When executed well, it surprises the user and shows a high level of technical and creative skill by the developers. No wonder many websites that win awards in “Experimental” or “Innovation” categories include 3D components. The trend is to keep a balance: eye-catching yet functional 3D experiences, fitting with storytelling and the site’s brand, to create that “WOW effect” without sacrificing the communicative essence.

Award-winning websites and evaluation criteria in awards

To understand what makes a site excellent, it is useful to review criteria from recognized awards:

• Awwwards: Design (40%), Usability/UX (30%), Creativity (20%), Content (10%)¹³. “Design” includes composition, typography, color, images; “Usability” is navigability; “Creativity” values original ideas and interactions; “Content” evaluates substance. They also grant Developer Awards (code: performance, semantics, best practices).

• Webby Awards: six criteria: Content, Structure & Navigation, Visual Design, Functionality, Interactivity and Overall Experience¹⁴. They emphasize IA (architecture), fast and error-free functionality, and user participation. They seek overall balance.

• Others: CSSDA, FWA, Muse; they weigh creativity, technical innovation and engagement. Example: CSSDA scores Creativity, Code and UX equally; FWA prioritizes cutting-edge experiences.

In general, what does a jury look for in a “perfect website”? According to jurors in interviews: a perfect balance between form and function. It must have aesthetic excellence (form), excellence in UX (function), and contribute something different or outstanding. Trendsetting sites typically introduce either a groundbreaking visual style, a novel technique (e.g., ingenious use of WebGL, interactive real-time data integration) or a captivating narrative (high-level storytelling). Of course, all of this must serve a purpose: awards value when design is not gratuitous, but aligned with the project’s message and objectives.

Summarizing the key evaluation criteria (guide):

• Visual design: appeal, coherence, aesthetic originality.
• Usability / UX: ease of use, clarity, information architecture.
• Creativity / Innovation: unique solutions, technique, ingenuity.
• Content / Message: quality and relevance of text and multimedia.
• Technical functionality: performance, absence of errors, compatibility.
• Interactivity / Engagement: user participation, invitation to explore.
• Overall experience: holistic impression, memorability, satisfaction. These criteria are not only for competing in awards, but a good checklist for any critical analysis of a website. In fact, they largely coincide with what we have covered earlier regarding quality indicators.

Web art in design research and meaning (semantics)

We cannot overlook the dimension of the web as an artistic and cultural medium. There is the concept of Web Art or Net Art, which refers to artistic works conceived specifically for the Internet. In this context, web pages are used as interactive canvases with which to tell stories¹⁵. Pioneers of Net Art in the 90s explored web pages as a form of expression, creating experimental sites that were sometimes more like experiences than utilitarian sites – for example, aesthetic games with hyperlinks, sites that “break” on purpose to make us reflect on technology, etc. This web art broadens the notion of semantics: the meaning of a web work is given not only by its literal content, but by how the user interprets it, the symbolic experience it conveys.

Incorporating art into design research implies recognizing that a website can be analyzed not only as a communication product or tool, but also as a work with meaning. Here hermeneutics and semiotics converge with design practice: the analyst asks what this design means in the cultural context, what it provokes in the public, what visual or interactive language it uses. For example, an artistic website may use glitch aesthetics (visual errors) to convey the fragility of the digital – interpreting that would require a hermeneutic sensibility (what message underlies that style? possibly a critique of our dependence on technology, etc.).

In the status of design research, there is talk of “design as epistemic space” – that is, design as a place where we understand and create worlds¹⁶. Web art falls here as a laboratory of meaning. Many times experimental trends in web art end up influencing commercial design years later. Think of web brutalist aesthetics (sites that look like old HTML, raw typefaces, etc.): it arose in artistic circles as a rejection of polished corporate design, and later became a fashion trend on certain niche sites. Or the use of ASCII art and retro graphics in net art has permeated visual identities of nostalgic brands.

 CCC  RRRR  III TTTTT III  CCC    A   L            CCC   OOO  DDDD  EEEEE
C   C R   R  I    T    I  C   C  A A  L           C   C O   O D   D E
C     RRRR   I    T    I  C     AAAAA L           C     O   O D   D EEEE
C   C R  R   I    T    I  C   C A   A L           C   C O   O D   D E
 CCC  R   R III   T   III  CCC  A   A LLLLL        CCC   OOO  DDDD  EEEEE

Some scholars point out that cultural and semiotic perspectives should be integrated into design education. In a reflection from Mexican academia, the need is mentioned to recognize “the shaping influence that digital technology has had on reality, as well as the triggering role of critical theories about culture, semiotics, media analysis… from cultural theory, discourse analysis, literature, anthropology and aesthetics… Design and arts students must develop deep conceptual reflection work in those fields”¹⁷. This includes web art and other phenomena of digital culture as an object of study to understand the present.

Adding “web art” to a site’s semantic analysis, in practical terms, means considering whether the site has an aesthetic or expressive value of its own beyond its function. Could it be exhibited in a gallery? Does it pose questions or provoke emotions similar to a work of art? Sometimes, the answer is yes – especially with the most experimental or creative sites (some award-winning sites on Awwwards could well be considered interactive digital art). Even commercial sites can contain artistic moments: a particularly poetic animation, a visual narrative that goes beyond selling a product to speak about the human condition, etc.

In short, recognizing art on the web broadens our appreciation of design: it allows us to analyze sites also from their cultural and symbolic contribution. And, on the other hand, semantics in design does not only refer to code (technical semanticity), but to the meaning that design communicates. As researchers or design students, exercising this gaze – blending interpretation (hermeneutics), cultural critique and artistic sensibility – greatly enriches the analysis of any web project.

Student guide: How to analyze Outstanding Websites (10-min pitch, ATELIER methodology)

Finally, we present a practical guide so that students (in the context of a design atelier, that is, a practical workshop) can analyze outstanding websites and prepare a presentation of approximately 10 minutes. The method proposed here synthesizes all of the above into concrete steps:

1. Selection of the website to analyze: Choose a standout site that is worth it (it can be an award winner such as Awwwards SOTD, Webby, FWA, or simply one you consider excellent in its niche). Ideally one that demonstrates strong aspects of storytelling, use of 3D or innovations, since they are of special interest. Make sure you know the context – for example, whether it is a promotional brand site, an experiment by a digital studio, an art project, etc., and its year (to understand the trends of the moment).

2. Initial navigation and first impression: Go through the site from beginning to end as a common user, without taking extensive notes yet, just to capture the overall impression. Observe how it makes you feel, what draws your attention at first (the visual design? some animation? the header message?). This impression will serve to later contrast it with the objective analysis. Also identify the site’s main proposition: what does it want to achieve? (sell a product, tell a story, present a portfolio, inform news, etc.).

3. Structure and content (architecture analysis): Break down the site structure. Is it one-page or does it have multiple sections/pages? If it has a menu, how is it organized? Make a simple scheme of the information architecture. Evaluate navigation: do you easily find the sections? is there coherence in how you navigate (e.g., is the menu always visible or does it hide)? Note whether special techniques were used (continuous scrolling, horizontal navigation, etc.). Also review the textual content: is it well written, clear and concise, or does it use storytelling? Identify the tone of voice (formal, close, technical, humorous). This covers content and structure, aligned with criteria such as Webby’s (Content, Structure & Navigation)¹⁴.

4. Visual and identity analysis: Now focus on the UI. Identify the main color palette, the typefaces used, image style (photography vs illustration, flat design vs skeuomorphism, etc.). Does the visual design support the message? For example, if it is a storytelling site of an emotional story, does it use custom illustrations to immerse you in the atmosphere? If it is a corporate website, does it convey trust through a clean, professional design? Comment on visual quality: are there animations? Transitions? Is screen space used optimally (neither too empty nor too saturated)? This section assesses visual impact and how it integrates with the experience.

5. Interaction and innovative elements: Explore the interactive parts in more detail. Are there forms, configurators, draggable sections, maps, 3D content? Try interacting in various ways: scroll slowly and quickly to see whether there are scroll-dependent effects, move the cursor over elements to see whether they respond (hover effects), if possible, test on mobile and desktop to notice differences. If the site uses 3D, briefly describe what it does: for example, “it includes a WebGL scene where moving the mouse rotates a product 360°.” Or if it uses sound, note how it influences the experience (is it optional? does it enrich or distract?). Identify any notable microinteractions (e.g., small animations on button click that give the user feedback). All these details point to the site’s creativity and differentiating factor – they are usually the things that make you say “wow, I hadn’t seen this before!” (creativity/innovation criteria in awards)¹³.

6. Usability and accessibility: Put on your critical hat and evaluate the user experience in a practical way. Is the site understandable without special instructions? Did any interaction confuse you? For example, very creative sites sometimes sacrifice conventions (perhaps an unconventional menu that was hard to figure out how to use). Points to check: load times (did it have a loading screen? was it fast?), mobile adaptability (open on your phone or simulate with developer tools the mobile viewport: does it look good?), any frustrating element (intrusive pop-ups, autoplay video without permission, etc.)? Also consider accessibility: you can do a quick mental test – do key images have alternative text? (hover over images; sometimes you can see it in a tooltip or by inspecting code), do color contrasts seem sufficient? If you find deficiencies, mention them (no need for exhaustive technical analysis, just the obvious). On the other hand, highlight good UX practices: for example, “the site provides clear feedback when loading content, avoiding user uncertainty” (applying Nielsen’s principle of visibility of system status)¹⁸, or “navigation is consistent throughout the experience, you always know where you are thanks to X element.” This section allows you to assess usability (30% at Awwwards) and functionality and interactivity (Webby criteria) with concrete examples experienced during your test.

7. Technical performance (brief): If time allows, run a lightweight automated tool or inspect with DevTools for quick data: for example, in Chrome DevTools, the Network tab, check total page size and number of requests – is it a heavy site (e.g., > 10 MB) or moderate? In Lighthouse (Audits tab or using Chrome > Audits/Lighthouse) get the Performance and Accessibility scores. Mention any notable finding: “Lighthouse returned performance 45/100, mainly due to unoptimized images – surprising for an award-winning site; perhaps visuals prevailed over optimization,” or, “Despite its heavy graphics content, the site achieves a decent performance ~85/100, a sign of polished technical work.” It is not essential to give numbers in a 10-minute pitch, but one or two quantitative data points impress (they show you looked under the hood). For example: “Loads in ~4s on a fast 3G connection according to WebPageTest, not bad given the complexity of the page.”

8. Excellence criteria: After the detailed analysis, assess the site globally according to the award criteria mentioned. You can structure this part as mini scores (no need to give an exact number, but do give your appraisal).

9. Design (visual): Outstanding, good, average? Why? (e.g., outstanding for the use of original illustration and elegant typography).

10. Usability: Any problem or totally intuitive?

11. Creativity: Does it present novel ideas or implementations?

12. Content: Is the content (text/story) substantial or weak? This shows your ability to judge by industry standards. For example: “In visual design I would give it 9/10 – lovely palette and animations. In usability perhaps 7/10 – it was hard to find the menu at first. Creativity 10 – I had never seen such a fluid 3D integration with narrative. Content 8 – the story is interesting though somewhat brief.” This kind of argued appraisal closes the analysis focused on what stands out about the site.

13. Conclusions and learning: To finish the pitch, summarize what makes this site special and what can be learned from it. You can formulate 2–3 takeaways for your audience (workshop peers): for example, “The lesson from this site is how good storytelling can keep the user exploring much longer than usual on a commercial website,” or “It demonstrates that accessibility is not at odds with creativity: despite the animations, the site maintained alt text and functional keyboard navigation.” It is also valid to mention a possible improvement for the site (“no design is perfect – in this one perhaps adding a visual cue for navigation would have helped, but even so the experience was very positive”).

During your ~10-minute presentation, support your findings with screenshots or brief demos (if live, browse 30 seconds showing the most impressive part; otherwise, paste screenshots on your slides). Briefly reference theories or principles if it fits – for example “this reflects Nielsen’s aesthetic and minimalist design principle, avoiding unnecessary elements”¹⁹. This will show theoretical command applied to a real case.

Remember to maintain a narrative thread in your own analysis: do not turn it only into a list of pros/cons; instead tell how you experienced the site, what surprised you, how it relates to what you have learned in class. Thus, your pitch will not be a simple technical report, but a story of discovery (“At first the site seemed chaotic to me, but then I understood its logic and was amazed by X aspect…”).

The importance of analytical skills in design (final reflection)

In the field of web design and user experience, analytical skills are as important as creative skills. A designer with an analytical mindset will be able to deeply understand problems and contexts before proposing solutions. Analyzing a website – your own or someone else’s – implies breaking it down into components, evaluating what works and what does not, and inferring causes and effects. This results in better designs: through constructive critique and iteration based on findings, digital products reach higher levels of quality.

Analytical ability is also fundamental for professional communication. A good designer must be able to argue their decisions – why they chose a certain palette, why they placed a button in a given location – and this is supported by usability analysis, understanding of content semantics, and technical considerations. Likewise, when receiving feedback or user tests, an analytical designer will know how to interpret data (quantitative or qualitative) to refine their work.

In academic and research contexts, analytical skills allow design to be elevated to the reflective realm: as we mentioned, to see design as an epistemic space¹⁶. A student who develops these skills will be able to connect their work with theories (hermeneutics, semiotics, cognitive psychology), innovate in a more informed and conscious way, and contribute to advancing the design field with arguments and knowledge, not only visual artifacts.

Finally, analytics in design fosters continuous improvement. The web is a dynamic environment: new technologies, new interaction patterns, new user profiles. A professional with an analytical eye will be constantly evaluating trends, testing and learning from other sites (which is why exercises such as analyzing standout websites are so valuable). That attitude of “there is always something to learn by examining in detail” is what distinguishes an excellent and award-winning designer/educator.

In synthesis, dreaming of being an award-winning designer or a standout educator in this field requires not only creativity and vision, but also analytical rigor and research curiosity. By combining both aspects – dreaming big but grounding with analysis – we will be on the path to creating web experiences that are truly meaningful, usable and beautiful.

References