SVITLO

SVITLO is a concept for a modern beauty studio, where the look of the place, the convenience and the digital services are gathered into one interface. It is not a page mockup: the site runs on its own server, all of its content lives in a database, and the booking form really does create bookings, checking the free hours against the stylists' own schedules.

The task was not a presentational shopfront but a working digital product, one a visitor walks through alone: looking over the directions, comparing the results of a treatment, reading about a stylist, seeing the price and how long it takes — and booking, without reaching for the phone.

The content system was built as a piece of work of its own. Services, prices, stylists, photographs, reviews, questions, contacts, the text of every section and the SEO are all edited in the panel — with no developer and no edit to the code. The site and the panel are one system: a price changed in the panel updates at once in the price list, in the block of popular treatments and in the booking form.

1. 02.01A recognisable visual system for a beauty brand: elegance, restraint and photography that carries feeling.
2. 02.02A clear structure of services along the main directions: hair, nails, brows, lashes, face and make-up.
3. 02.03An online booking that is easy to get through: the service, the stylist, the date and the time.
4. 02.04Full profiles for the stylists, with a way into the booking straight from the card.
5. 02.05An interactive gallery of results, where before and after are compared on the same frame.
6. 02.06An understandable system of prices, popular treatments, consultations and gift certificates.
7. 02.07An administrative panel for the content and for the studio’s own daily work.
8. 02.08Carry the whole experience across desktop, tablet and mobile.

The visual idea is Modern Elegance. A strong serif in the headings, with italic accents that pick up the one word a line turns on; beside it a quiet grotesque for the interface. The palette rests on milk and sand, a dark chocolate black, and a single warm terracotta accent that appears only where something is being asked of the reader.

The beauty photography is shown large and almost uncropped — it carries a mood no icon could. Around it: an airy composition with generous margins, soft corner radii, hairline rules and restrained hover work — a card lifts a little, a stylist’s photograph warms, the arrow inside a button moves a couple of pixels.

Each band’s background is a flat fill plus a fine grain, and the grain sits under the text rather than as a film over the page: a film takes a share of the contrast from every letter. There are no light blooms and no blurs left — gradients remain only where they do work: the scrim under the hero heading, the pad behind the round buttons on a stylist’s photograph, the paper texture of the certificate itself.

All of it works for the function rather than instead of it. The booking button is in the header, in the hero, in every service card and on every stylist — nowhere is the way from interested to booked longer than two steps. The calm, premium ground exists precisely so those steps stay visible: on a busy page the terracotta button stops being the one bright thing, and stops being obvious along with it.

1. 04.01UX/UI design. The whole visual system: a type scale, grids, spacing from one rhythm, responsive components and their states — hover, focus, active, disabled, loading.
2. 04.02The home page. Hero, quick booking, directions, popular treatments, the studio’s space, what sets it apart, the team, results, the price list, reviews, questions, certificates and contacts — fourteen sections, assembled from the database.
3. 04.03The service catalogue. Six directions, more than twenty services with a description, a price, a price type (fixed, or from), a duration and a photograph. The order inside a direction is changed by dragging.
4. 04.04Online booking. Five steps — service, stylist, date, time, contacts — and a confirmation with a code. The free hours are worked out on the server: it checks the stylist’s working hours, the breaks, the time off, the bookings already made, and whether the full length of the treatment still fits before the shift ends.
5. 04.05Stylist profiles. A card with the photograph, the speciality, the years, the directions worked in and the approach; from it a visitor books that stylist directly — the form opens with the choice already made.
6. 04.06Before and after. An interactive comparison on a slider: four pieces of work, each with a description and the facts of the treatment. The focal point is shared between the two frames — crop them separately and the faces stop lining up.
7. 04.07Popular treatments. A horizontal rail with photographs, prices and a way into the booking. It is not a separate list but a flag on the service itself — so the price here cannot drift from the price list.
8. 04.08Reviews. A slider with ratings and photographs, a form for the visitor to send one, and moderation in the panel: only a published review reaches the site, and the author’s phone number never reaches the page at all.
9. 04.09The price list. The directions switch in place; each row carries the price, the duration and the way to book. Under the list sits a consultation block, for those who do not yet know what to choose.
10. 04.10Gift certificates. Set amounts and a free amount within limits, a validity period and the conditions; in the panel, the issued certificates carry a readable number that can be read out over the phone. There is no payment system in the project: a member of staff marks a certificate paid, and the system never draws a paid it has not seen.
11. 04.11The CMS and the administrative panel. Sixteen sections: pages and their blocks, services and prices, stylists, bookings, the schedule, reviews, the gallery, certificates, media, contacts, SEO, settings, the legal pages, users and the action log. The roles — super-administrator, administrator and manager — are enforced on the server, not by hiding buttons.
12. 04.12Bookings and the schedule. A list filtered by state, stylist and date, a day calendar in columns by stylist, a booking card with its history, manual creation and rescheduling. The state transitions are fixed by a table rather than free: there is nowhere to go from completed, or the history would start to lie. The schedule — the working week, breaks, time off and blocked intervals — really does govern what a visitor is offered in the form.
13. 04.13The responsive build. Its own logic for the mobile menu, the cards, the rails, the price list, the booking form and the modals. Checked at 1440, 768 and 390 px: no horizontal scrolling anywhere, the panel included — all twenty-three of its pages.
14. 04.14Motion and micro-interaction. Sections arriving on scroll, hover on buttons and cards, the sliders, the questions opening, the modals and the steps of the booking. All of it short and quiet: the motion is there to tell you something, not to entertain, and in reduced-motion it disappears entirely.
15. 04.15SEO and the technical work. For every page: a title, a description, a canonical, Open Graph and robots, all from the panel. Structured data as a BeautySalon — address, phone, hours, social links — with no rating and no review count, because an invented score is punished rather than rewarded. Until the site’s own address is set, the canonical, the og:url and sitemap.xml are not emitted at all: a tag with a made-up domain does more harm than no tag.
16. 04.16The legal pages. A privacy policy, terms of use and a cookie policy — three documents with a visual editor of their own, a draft and a publish: the owner edits them without touching any markup.

SVITLO is not a handsome home page but a connected system. The service catalogue is the source for the price list, for the popular block and for the first step of the booking. The stylists are tied to the services they perform and to schedules of their own. The schedule decides which hours the form offers. A booking creates an event that appears at once in the panel — in the list, in the day calendar and in a card with its history of states.

The same link runs the other way. A changed price shows up in three places on the page at once. A hidden stylist disappears from the team and from the form, while the bookings already made stay whole. A review taken down vanishes from the site rather than being hidden by a style. A section switched off leaves the page entirely. A media file that is in use simply cannot be deleted — the check looks in eight places at once.

Underneath sits the engineering. Double booking is closed off at three levels: the check and the insert inside one transaction, a conditional unique index in the database, and a 409 that returns the visitor to a fresh grid of hours. Eight simultaneous requests for one slot create exactly one booking. The whole project is written with no external dependency at all — the built-in HTTP server, the built-in SQLite, the built-in Argon2id for passwords — and is covered by end-to-end checks, the last run of which passed in full.

The mobile version is not a shrunken desktop but the same product with its scenarios rewritten. The navigation goes under a burger and opens full-screen, with the phone number and the booking button within reach. The directions and the service cards rebuild into a single column. The stylist and review rails become horizontal, carried by the thumb. The price list stays readable with no horizontal scrolling — a row wraps rather than squeezing.

The booking form and the before-and-after comparison took the most work. On a phone the form goes full-screen, step by step, with large touch targets and a keyboard that does not cover the field being filled. The comparison slider moves to touch while staying operable from the keyboard. Modals lock the scroll of the page beneath them and return focus to where they were opened from.