Share
Curat. Un termen folosit adesea pentru a descrie un design de site web, dar ce înseamnă? Cum îl definiți? Sunt destul de sigur că nu înseamnă că spațiile albe sunt mai albe decât albul sau că toată praful a fost periat sub subsol ... Să aruncăm o privire mai atentă.
Designerii pretutindeni izbesc cu admirație când văd un design web și exclamă "frumosul său, este atât de curat!". Există un număr nenumărat de rotunde-uri webdesign dedicate designului "curat" și este un termen aruncat în jurul valorii de destul de puțin în comunitatea de design web. Poate fi ușor de observat un exemplu bun de design curat, deoarece promovează un anumit sentiment de profesionalism și calitate. Cu toate acestea, ceea ce nu este discutat adesea sunt principiile și factorii care stau la baza pentru a crea acest aspect "curat" și exact ceea ce intenționează acest articol.
Înainte de a începe, să clarificăm un lucru - designul curat nu este un design minimal.
Unii oameni pot confunda cele două și poate fi ușor să facă acest lucru. Deși există unele asemănări și suprapuneri ale principiilor de proiectare între cele două, cred că există diferențe-cheie.
Designul minimalist tinde să se concentreze pe îndepărtarea elementelor inutile și inutile pentru a permite ca conținutul și mesajul central al site-ului să se îndrepte în centrul atenției. Fiecare element ar trebui să aibă un scop justificat. Designul minimalist prin natura ar trebui să fie extrem de utilizabil și funcțional, deoarece nu ar trebui să existe o distragere a atenției pentru a concura cu informațiile pe care site-ul încearcă să le comunice.
În loc să întrebi ce poate fi eliminat, ar trebui să întrebi cum poate fi rafinat.
Da, designul curat ar trebui să fie utilizabil, și da, scopul site-ului ar trebui să fie evident. Există, totuși, o indemnizație pentru elemente pur estetice și fler creativ atunci când se proiectează un loc "curat". În loc să întrebați ce poate fi eliminat (în cazul designului minimalist), ar trebui să întrebați cum poate fi rafinat.
Dacă ar fi existat un singur cuvânt pe care l-aș folosi pentru a defini designul "curat", este rafinament. Fiecare element individual ar trebui să arate că aparține acestuia și ar trebui să beneficieze și să completeze proiectul în ansamblu. Designul general trebuie să fie echilibrat pentru a permite informațiilor să curgă și să fie ușor de consumat.
Înainte de a ajunge la proiectul final, fiecare element trebuie să fie examinat. Designerul ar trebui să ia o clipă pentru a lua în considerare scopul fiecărui element și pentru a decide dacă acesta este cel mai bun posibil și dacă poate fi mai clar.
O.K, deci acum că avem o înțelegere generală a designului "curat", să aruncăm o privire asupra diferiților factori care contribuie la acest stil.
O atenție la detalii este esențială pentru crearea unui design curat al site-ului. Designul cu adevărat grozav, curat se bazează pe executarea perfectă a pixelilor de multe elemente de design subtile. Se pare că detaliile minore, cum ar fi granițele, culorile, umbrele, texturile și multe altele, trebuie luate în considerare cu atenție.
De exemplu, să examinăm mai atent secțiunea principală a temei Word Stress, proiectată de Orman Clark. Orman este cunoscut pentru (și extrem de reușit la) producerea unor teme Wordpress curate și ușor de utilizat.
În cazul în care unele modele tematice pot pur și simplu să pună în aplicare un glisor de imagine mare, îndrăzneț, zona caracteristică Studeo este un refugiu pentru detalii delicate de design. Observați textura subtilă suprapusă pe imagine, sublinierea unuia dintre pixeli și marginea gri deschis aproape imperceptibilă în partea de jos. Toate aceste detalii pot părea nesemnificative și chiar pot trece neobservate de unii, dar colectiv ele creează sentimentul de calitate și rafinament.
Precizia este esențială atunci când alegeți să proiectați astfel. Un lucru care poate distruge un design curat al site-ului este jumătate de pixel temut. Jumătate de pixeli pot apărea în Photoshop atunci când liniile și marginile formelor nu se aliniază exact pe pixel. Când se întâmplă acest lucru, marginile unei forme devin neclare. Puteți vedea în imaginea de mai jos, pătratele de pe dreapta arătând tot mai puțin încețoșată.
O modalitate prin care puteți preveni acest lucru atunci când proiectați în Photoshop este să selectați opțiunea "Snap to Pixels". Ori de câte ori este selectată această opțiune, toate marginile de formă vor fi minunate și curate.
Este de la sine înțeles că un design curat nu poate părea aglomerat în nici un fel. O mulțime de elemente înghesuite împreună va da însă apariția unui site murdar și aglomerat. Nu ceea ce dorim. Aici intră distanța.
Spațiile albe, margini, căptușeli și înălțimea liniei au un rol crucial în a elimina designul site-ului curat. Furnizarea elementelor unui site web într-un spațiu corespunzător asigură o partajare a acestora și se încadrează în proiectul general. Un spațiu suficient de spațiu generează, de asemenea, un sentiment aerisit și elegant la un site web.
Pe lângă faptul că vă asigurați că elementele dvs. sunt bine distanțate, este necesar, de asemenea, să respectați valorile pe care le decideți. Încercați să repetați marjele și valorile de umplutură atunci când puteți și unde este sensibil să faceți acest lucru. Sistemele de grila, cum ar fi 960.gs, sunt instrumente incredibil de utile atunci când proiectează site-uri web în acest fel (mai multe despre asta într-un moment).
Pentru a vedea efectul complet al distanței adecvate pe design-ul unui site, luați în considerare următoarele două imagini. Prima imagine este o previzualizare pentru un post de blog cu cantități minime și inconsistente de spațiere între elemente.
Acum, aici este aceeași previzualizare post de blog cu cantități generoase de spațiere.
Diferența pe care o poate face este destul de substanțială. Cel de-al doilea design arată mult mai echilibrat și mai curat acum că toate elementele au mult mai mult spațiu de respirație și spațiu pentru a se întinde.
Ca și în cele mai multe lucruri din viață, cu toate acestea, este posibil să aveți prea mult de un lucru bun. Distanțele prea mari pot face ca elementele să pară pierdute și deconectate una de cealaltă. Ca rezultat, coerența și fluxul unui site web pot fi rupte.
Unul dintre cele mai bune instrumente pe care le puteți utiliza pentru a vă ajuta să creați un design site-ul "curat" este un sistem de rețea. Am atins deja modul în care acestea pot fi extrem de utile în ceea ce privește spațierea, dar sunt, de asemenea, neprețuite pentru a vă asigura că alinierea este la fața locului.
La fel ca spațierea, alinierea poate face o diferență semnificativă la apariția unui site web. Alinierea corectă și continuă permite liniilor curate să funcționeze pe toată lungimea și lățimea designului site-ului. Linii netede și neîntrerupte sunt plăcute vizual și pot duce ochiul în jos în jos.
Ochiul este foarte sensibil la schimbările de aliniere și este capabil să detecteze schimbări minore și inconsecvențe. Prin urmare, este important să nu fii doar pixel perfect în crearea machetelor de proiectare, ci și să nu pierdeți această precizie în faza de dezvoltare care urmează.
În mod ideal, corpurile mari de text ar trebui să fie (în majoritatea cazurilor) stânga aliniate. Textul aliniat la stânga produce o linie solidă și creează coloane de informații ușor de distins. Textul aliniat central, pe de altă parte, creează o margine neuniformă pe fiecare parte și poate fi dificil de citit în coloanele mari. Salvați alinierea centrală pentru linii scurte de text.
Ca un excelent exemplu de aliniere, poate doriți să verificați designul fără frontiere. Designerul nu numai că a folosit o excepție de aliniere, ci și-a făcut din ce în ce mai evident intențiile prin simularea liniilor de ghidare Photoshop care rulează pe întregul site.
Odată cu sosirea serviciilor de tip "font-face" și multe servicii de tip, tipografia în designul web nu a fost niciodată mai mare și având în vedere că marea majoritate a informațiilor de pe web este text, nu este de mirare de ce. Nu vrem să intrăm în intricaciile tipografiei aici, deoarece există multe resurse mari, dar vom analiza câteva moduri în care poate juca un rol important.
În primul rând, folosirea tipografiei reprezintă o modalitate eficientă de a stabili o ierarhie vizuală foarte puternică. Dacă ați studiat vreodată fundamentele web design-ului, vă dați seama că ierarhia este o afacere mare. Folosirea tipografiei pentru a stabili ierarhia este o metodă foarte elegantă și curată pentru a face acest lucru. Pur și simplu prin modificarea mărimii sau greutății textului dvs., puteți ghida utilizatorul în jurul site-ului dvs. și puteți comunica importanța diferitelor elemente. Nu este nevoie de săgeți lucioase sau insigne tari pentru a sublinia ceea ce doriți ca utilizatorul să vadă.
În al doilea rând, la fel cum anumite culori funcționează armonios și se completează reciproc, același lucru este valabil și pentru fonturi. Există multe sugestii și linii directoare pentru împerecherea și lucrul cu mai multe fonturi, dar pentru un design curat, este mai bine să-l păstrați simplu.
Selectarea a două tipuri de fonturi este în general o opțiune sigură, deoarece prea multe fonturi diferite pot complica un design. Apelați la o textură mai îndrăzneață sau mai mult decorativă pentru titlurile dvs. și un tip mai sigur și mai lizibil pentru textul corpului dvs. poate fi rareori rău. Combinarea serifului și a fontului sans-serif poate funcționa bine și este practicată în mod obișnuit.
Există multe articole și tutoriale care discută despre teoria culorilor și despre modul în care se aplică în cazul designului web. Există, de asemenea, multe resurse utile pentru a vă ajuta să selectați o paletă de culori adecvată. Când vine vorba de un design curat, există câteva orientări de bază.
Marea majoritate a site-urilor curate aleg o paletă de culori ușoară, neutră și limitată din mai multe motive.
Albul, griul și culorile luminoase sunt simple și subevaluate, permițând oricărui conținut să primească atenția utilizatorului. Acest lucru este ideal din punct de vedere al utilizabilității, iar pentru cei care doresc ca lucrarea lor să se desfășoare în centrul atenției, cum ar fi designeri și fotografi. Stropirile mici de culoare sunt adesea folosite pentru a accentua anumite elemente precum logo-urile, navigația și titlurile pentru a ajuta la stabilirea unei ierarhii vizuale.
Culorile îndrăznețe, mai ales dacă sunt folosite multe, pot complica un design curat și distrag atenția utilizatorului. Culoarea evocă anumite emoții și reacții și prea multe culori pot provoca sentimente multiple și conflictuale. Ultimul lucru pe care îl dorim este ca un utilizator să se simtă confuz atunci când vizionează site-ul nostru.
Acest lucru nu înseamnă că un design curat nu poate fi colorat, ca întotdeauna există excepții de la regulă și există multe exemple de design curat care utilizează culoarea în mod eficient. Există, de asemenea, linii directoare generale dacă doriți sau trebuie să utilizați culoarea în design-urile dvs. curate.
Optați pentru culori unice, solide, mai degrabă decât gradienți în designul dvs. Blocurile puternice de culoare creează linii clare, neîntrerupte și ajută la distingerea diferitelor secțiuni ale unui design. Gradienții, modelele și texturile pot distrage atenția și pot reduce lizibilitatea textului. Dacă vă decideți să utilizați gradienți și texturi, păstrați-l subevaluat și subtil.
Știind ce înseamnă să faci un design curat și cum să implementezi acest stil de design poate fi de neprețuit pentru un designer web. Un design curat comunică un sentiment de rafinament și sofisticare, exact ceea ce mulți clienți și noi înșine dorim să fim asociați. Sperăm că puteți lua ceva de la acest articol și aplicați unele dintre aceste metode într-unul dintre proiectele viitoare.
Există alte caracteristici ale designului curat pe care l-ați observat? Sau cunoașteți o demonstrație deosebit de bună a designului curat? Vă rugăm să ne spuneți în comentarii.
Accentsconagua