1.1 Web architecture: servers, CDN and HTTPS
Understanding web architecture is essential for any UX/UI designer who wants to create high-performing and technically sound interfaces. From entering a URL to displaying a page, let's explore the fascinating journey of a web request and the technologies that make the user experience we design possible.
Educational objectives
- Understanding how the client-server model works and analyzing the path of an HTTP request
- Identify and differentiate the roles of web servers, application servers, and databases.
- Explain the importance of CDNs for optimizing interface performance and availability.
- Mastering web security concepts with HTTPS and SSL/TLS certificates
- To place this technical knowledge within a professional UX/UI context in order to create optimized experiences.
Understanding the fundamental architecture of the web
The client-server model forms the basis of modern web architecture. When a user types a URL into their browser, it triggers communication between two distinct entities: the client (browser), which makes a request, and the server, which provides the response. This asymmetric architecture allows for a separation of responsibilities: the client focuses on display and user interaction, while the server manages the data, calculations, and resources.
The path of an HTTP request
When you click a link or type an address, here's what happens: the browser first resolves the domain name via DNS, establishes a TCP connection with the server, sends an HTTP request, and then receives a response containing the HTML, CSS, JavaScript, and multimedia resources. This seemingly instantaneous sequence involves numerous network exchanges that directly impact the performance perceived by the user.
Key point Each element of a web page (images, fonts, scripts) generates a separate HTTP request, hence the importance of optimizing the number of resources to improve performance.
Key points to remember
The client-server model structures all web communication: the browser requests, the server responds, and this sequence directly influences the user experience you design.
The web server: the gateway
The web server (Apache, Nginx, IIS) is the first point of contact for user requests. It serves static files (HTML, CSS, images) and forwards dynamic requests to the application server. Its configuration directly impacts response times: gzip compression, header caching, and optimization of persistent connections. For a UX/UI designer, understanding these mechanisms allows them to adapt their designs to technical constraints and optimize the user experience from the initial design stage.
Application server: the business brain
The application server executes the business logic of your website or application. It processes forms, authenticates users, and generates dynamic content based on data. Technologies such as Node.js, PHP, Python, and Java run at this level. Processing times at this stage directly influence the responsiveness perceived by the user, especially for complex interactions like search filters or multi-step forms.
Database: the system's memory
The database stores and organizes all persistent information. MySQL, PostgreSQL, and MongoDB manage user data, content, and configurations. Poorly optimized queries can create bottlenecks that result in slow loading times, negatively impacting the user experience you're designing.
Key point : This layered architecture allows scalability: each server can be optimized, replicated or scaled independently as needed.
Key points to remember
The three types of servers (web, application, database) form a chain where each link influences the overall performance of the user interface.
Principles and operation of CDNs
A Content Delivery Network (CDN) is a geographically distributed network of servers that store copies of your static content. When a user in Paris visits your site hosted in New York, the CDN serves them the resources from a closer European server, drastically reducing latency. This technology improves performance by an average of 30 to 501 TP3T, which is particularly crucial for the images, videos, and other large resources that make up your interfaces.
Impact on user experience
CDNs transform the user experience by reducing load times, improving availability (if one server fails, another takes over), and handling traffic spikes. For a UX/UI designer, this means being able to use richer resources (high-definition images, complex animations, diverse web fonts) without compromising performance. Users perceive a more responsive website, which improves engagement and reduces bounce rates.
Optimization strategies with CDNs
Modern CDNs offer advanced features: automatic image compression, format optimization (WebP, AVIF), CSS/JS minification, and intelligent caching. They also enable native lazy loading and adaptive bitrate for videos. These technical optimizations allow you to design rich experiences while maintaining high performance across all devices and connections.
Key point CDNs no longer simply distribute content; they automatically optimize resources based on the user's device and connection.
Key points to remember
CDNs bring content closer to users and automatically optimize resources, enabling richer interfaces without sacrificing performance.
Security issues on the web
HTTPS (HTTP Secure) encrypts all communications between the browser and the server, protecting against eavesdropping, modification, and data theft. For users, this guarantees that their personal information, passwords, and banking details remain confidential. Modern browsers display prominent warnings on unsecured websites, negatively impacting trust perception and conversion rates.
SSL/TLS Certificates: The Technology Behind HTTPS
SSL/TLS certificates authenticate a website's identity and establish an encrypted connection. There are several types: Domain Validated (DV) for basic validation, Organization Validated (OV) for businesses, and Extended Validation (EV) for the highest level of trust. The validation process, validity period, and certificate authority influence the trust level displayed in the browser.
Impact of HTTPS on UX/UI
HTTPS is no longer optional: Google favors HTTPS sites in its search results, browsers block certain APIs (geolocation, notifications) over HTTP, and users associate the green padlock with security. In terms of performance, HTTP/2 requires HTTPS and brings significant improvements (multiplexing, server push). For a designer, this means that HTTPS has become a technical prerequisite for any modern interface.
Key point HTTPS is now a mandatory standard that influences SEO, user trust, and the features available in browsers.
Key points to remember
HTTPS secures exchanges, improves user trust and unlocks advanced features of modern browsers, becoming indispensable for any web interface.
Optimizing your designs for web architecture
Understanding web architecture directly influences your design decisions. Anticipate load states for server requests, optimize the number of external resources, and design progressive interfaces that build as the page loads. Knowing that an external font generates an additional HTTP request helps you choose between system fonts and web fonts. Understanding bandwidth limitations guides your choice of image formats and lazy loading strategy.
Effective collaboration with technical teams
This technical knowledge facilitates communication with developers and infrastructure teams. You can anticipate the technical implications of your proposals, estimate the performance impact of your design choices, and suggest alternatives tailored to server constraints. Understanding CDNs helps you optimize resources from the design stage, and mastering HTTPS allows you to integrate secure features into your wireframes.
Measuring and improving performance
Tools like Google PageSpeed Insights, GTmetrix, or WebPageTest become much more understandable when you grasp the underlying architecture. You can identify whether a slowdown originates from the server, the network, or client-side rendering, and tailor your design recommendations accordingly. This technical understanding allows you to propose concrete solutions rather than simply reporting a performance issue.
Key point Mastering web architecture transforms a designer into a technical partner capable of making informed decisions about performance and feasibility.
Key points to remember
This technical knowledge makes it possible to design high-performance interfaces from the design stage and facilitates collaboration with development teams.
Summary
Key points to remember
- Client-server architecture The browser makes a request, the server responds; this sequence directly influences the user experience.
- Server types Web, application, and database form a chain where each link impacts overall performance.
- CDN and performance Distribution networks bring content closer to users and automatically optimize resources
- HTTPS Security It has become mandatory for trust, search engine optimization, and access to modern browser features.
- UX/UI Application This knowledge enables the design of high-performance interfaces and effective collaboration with technical teams.
Sources
To deepen your knowledge:
Validate your knowledge
Test your understanding with this 10-question quiz:
