Aplicația funcționa bine. Arăta decent. Dar „decent" nu era suficient. Am decis să refac tot, fiecare ecran, fiecare card, fiecare pixel.

De ce un redesign complet

Rolog a crescut organic. Am adăugat funcționalități una câte una, alimentări, FAZ, alerte, service, GPS și fiecare a venit cu propriul ecran, propriile componente, propriul stil vizual. Rezultatul? O aplicație funcțională dar vizual fragmentată. Unele ecrane arătau a 2024, altele a 2026. Culorile nu vorbeau aceeași limbă. Cardurile aveau forme diferite fără un motiv clar. Navigația funcționa, dar nu simțeai nimic când o foloseai.

Am realizat că nu pot corecta problema cu ajustări cosmetice. O culoare nouă pe un buton nu rezolvă lipsa de identitate vizuală. Un font schimbat nu dă coerență. Trebuia să pornesc de la zero.

Prima încercare: eșec complet

Am încercat prima dată să fac redesign-ul eficient adică să iau view-urile existente, să le reorganizez, să le dau culori noi. Am mutat tab-uri, am schimbat font-uri, am aplicat un dark theme peste ce exista deja.

Rezultatul a fost dezamăgitor. Arăta ca o aplicație veche usor schimbată. Structura era aceeași, flow-ul era același, doar culorile se schimbaseră. Nu era un redesign, era un reskin. Și un reskin prost.

Am șters tot și am luat-o de la capăt. De data asta cu o regulă: niciun view vechi reutilizat. Fiecare ecran se rescrie complet. Design thinking mai întâi, cod după.

Identitatea vizuală: MeshGradient și glassmorphism

Am început cu fundalul. Un dark theme serios, nu negru plat, un MeshGradient SwiftUI cu tonuri de roz-portocaliu în stânga sus, mov-roz spre dreapta, și violet în partea de jos. Culorile se amestecă organic, ca un cer de seară. Fiecare ecran din Rolog trăiește pe acest fundal.

Peste fundal, componentele folosesc glassmorphism, carduri semi-transparente cu blur, care lasă culorile din spate să se vadă prin ele. Efectul e subtil dar face o diferență enormă: aplicația pare vie, nu statică. Fiecare card "respiră" cu fundalul din spatele lui.

Am definit un sistem de culori centralizat, ThemeColors, cu primară, secundară, terțiară, accent, divider, error. Fiecare componentă din aplicație foloseste același set de culori, fara hardcodari si o lipsa totala de variații accidentale.

Cardurile: forme cu personalitate

Aici am petrecut cel mai mult timp de design. Într-o aplicație de fleet management, cardurile sunt tot ce vezi. Lista de mașini, lista de alimentări, lista de service-uri, totul e carduri. Dacă cardurile sunt generice, aplicația e generică.

Am decis ca fiecare tip de card să aibă propria formă, legată conceptual de conținutul lui.

Bonul de alimentare

Alimentările arată ca un bon de casă. Am construit un ReceiptShape custom, dreptunghi cu colțuri rotunjite sus și o margine zimțată (zigzag) jos, exact ca un bon rupt din casă. Înăuntru: data sus, stația, cantitatea, prețul per litru, o linie punctată ca separator, și totalul mare, centrat, albastru.

Fiecare card e un mic bon fiscal. Când ai 8-10 alimentări pe ecran în grid de două coloane, efectul e imediat recognoscibil. Nu trebuie să citești textul ca să știi ce ești deoarece forma îți spune.

Eticheta de service

Service-urile arată ca o etichetă, ServiceTagShape, cu un decupaj semicircular centrat sus. Iconița mare a tipului de service (ulei, anvelope, frâne) e în centru, semi-transparentă, urmată de numele intervenției, data, locația, și costul.

Mașina din flotă

Cardul de mașină are propria identitate, am vrut ceva simplu și util. Fiecare mașină se prezintă cu numărul de înmatriculare prominent, marca și modelul și tipul de combustibil.

Layout-ul: grid de două coloane

Alimentările și service-urile folosesc un LazyVGrid cu două coloane. Am ales grid în loc de listă verticală pentru densitate. Vezi mai mult conținut fără scroll, iar formele custom ale cardurilor ies în evidență când sunt așezate câte două.

Deasupra grid-ului stă un sumar al lunii curente ce contine total litri, total cost, într-un card glassmorphism cu fundal semi-transparent. E un dashboard minimal care răspunde la întrebarea "cât am cheltuit luna asta?" fără să deschizi nimic.

Interacțiuni: selecție multipla

O provocare interesantă a fost ștergerea. Într-un LazyVGrid cu două coloane, swipe-to-delete nativ nu funcționează, e o funcționalitate de List, nu de grid. Am încercat mai multe soluții custom de swipe. Toate au eșuat, fie arătau prost, fie stricau layout-ul, fie nu aveau feel-ul nativ pe care îl căutam.

Soluția finală: selection mode. Apeși pe butonul de selectie și checkmark-uri roșii apar pe fiecare card. Selectezi ce vrei să ștergi, apeși trash din toolbar. Cardurile selectate se micșorează și dispar cu animație, apoi se șterg din baza de date.

Butonul plus din toolbar se transformă în două butoane separate: trash (roșu când ai selecție, gri când nu) și X pentru anulare. Când ieși din selection mode, checkmark-urile dispar și butonul plus revine.

Componente reutilizabile

Am construit un set de componente pe care le folosesc peste tot:

PrimaryActionButton - butonul principal de acțiune, capsulă albă cu text negru, full-width, curat și vizibil pe fundalul întunecat. Fiecare formular din aplicație folosește același buton de confirmare.

InputFieldCard și NumberInputFieldCard - câmpuri de input cu fundal glassmorphism, consistent vizual peste tot.

PickerCard - selectoare inline care se integrează în stilul dark theme.

SubscriptionBannerForFeaturesView - banner care apare când utilizatorul fără abonament încearcă o funcționalitate premium.

Și multe altele.

Rezultatul: adaug un ecran nou și are automat look-ul corect. Zero decizii vizuale aleatorii.

Landing page-ul: aceleași culori, altă platformă

Odată definită identitatea vizuală în aplicație, am actualizat și landing page-ul să vorbească aceeași limbă. Același gradient roz-portocaliu și violet, aceleași tonuri calde, carduri cu shadow-uri violet, separatoare colorate, glow-uri ambientale. Când cineva vine de pe site și deschide aplicația, nu simte o ruptură vizuală.

Ce am învățat

Un reskin nu e un redesign.

Dacă iei un view existent și îi schimbi culorile, ai un view vechi în haine noi. Un redesign real înseamnă să regândești ce informație apare, în ce ordine, în ce formă. Am pierdut timp prețios cu prima încercare tocmai pentru că am luat scurtătura. Nu există scurtătură.

Formele custom au impact disproporționat.

ReceiptShape și ServiceTagShape sunt câteva zeci de linii de cod fiecare. Dar efectul vizual al unui card în formă de bon versus un dreptunghi generic e enorm. Creierul recunoaște forma înainte să citească textul. Investiția în forme custom a fost cea mai bună decizie de design din tot proiectul.

Un sistem de design centralizat nu e un lux.

ThemeColors, PrimaryActionButton, InputFieldCard au fost construite devreme și au economisit ore de muncă pe parcurs. Fiecare ecran nou moștenea automat identitatea vizuală. Fără ele, fiecare ecran ar fi fost o negociere separată cu culorile și spațierile.

Dark theme-ul bine făcut nu e negru. 

Negrul plat (#000000) e agresiv. Violet-ul închis cu roz subtil e cald, primitor, și diferențiază aplicația instant de orice alt dark mode generic. MeshGradient-ul face ca fundalul să nu fie un simplu fundal, e parte din identitate.

Rolog cu noul design este disponibil în App Store. Dacă ai o firmă cu mașini de serviciu, cele 30 de zile gratuite îți arată totul, inclusiv noul look. Și dacă vrei să discutăm despre MeshGradient, custom shapes, sau de ce formele de bon și etichetă sunt o idee mai bună decât dreptunghiuri - scrie-mi la contact@lorinbute.com.