11 greșeli de design pe care le fac cumpărătorii de teme WordPress de obicei

Te-ai trezit vreodată să faci un site web cu tema WordPress, dar rezultatul final nu semăna deloc cu demonstrația temei? Am enumerat 11 greșeli comune de design care sunt adesea trecute cu vederea de către creatorii de site-uri web.

Ai găsit tema WordPress perfectă. Demo-ul temei arăta impecabil. Clientului tău i-a plăcut foarte mult și a fost de acord cu tine să faci o achiziție. L-ați cumpărat, l-ați instalat și ați început să editați tema după nevoile clientului.

Ai schimbat logo-ul, ai schimbat culorile temei, ai introdus imaginile slider și conținutul, dar în cele din urmă, site-ul pe care l-ai creat pur și simplu nu arată deloc ca demo. Știi că ceva nu este în regulă, dar pur și simplu nu poți detecta ce. Sună cunoscut?

În ultimii 5 ani, lucrând ca designer în afacerea cu teme WordPress, am văzut nenumărate exemple de site-uri web frumoase create cu temele noastre WordPress.

Dar din când în când, văd un site web cu o bază solidă, dar cu câteva mici greșeli de design, care strică experiența generală. Vorbesc despre mici lucruri mici care pot fi ușor de reparat de oricine.

Știu că este greu de descoperit aceste defecte, mai ales dacă nu ești designer. Din acest motiv, am decis să scriu o postare pe blog despre cum să îmbunătățești site-ul clientului tău pentru a arăta și mai bine.

Marcați această postare pe blog și parcurgeți lista de mai jos data viitoare când veți construi un site web cu tema WordPress. Îți va lua doar o oră sau două pentru a elimina toate imperfecțiunile, dar rezultatul va arăta cu 100% mai bun.

1. Contrast slab al textului pe glisor

Am vorbit despre ce se poate face și ce nu despre imaginile slider, așa că acum voi fi scurt. Principiile sunt simple:

• Dacă culoarea textului de pe glisor este albă, alegeți un fundal întunecat. Dacă textul cursorului este întunecat, alegeți un fundal deschis.
• Asigurați-vă că zona în care apare textul nu are prea mult zgomot vizual în fundal. Fundalul aglomerat reduce lizibilitatea textului de pe față și o propunere de valoare principală scrisă pe glisor ar putea fi ratată.

Din fericire pentru tine, majoritatea temelor noastre includ o opțiune de fundal solid semi-transparent în spatele textului. Temele noastre WordPress mai noi au, de asemenea, o umbră aplicată întregului text de pe glisor, astfel încât contrastul este și mai bun.

2. Imagini slider prea mari

Când mă uit la site-urile web realizate cu temele noastre WordPress, observ destul de des că utilizatorii folosesc imagini slider prea mari. A avea o imagine cu glisare care ocupă 100% din înălțimea ecranului este acceptabilă numai dacă ești fotograf și fotografiile sunt produsul tău final. În alte cazuri, rămâneți pe partea sigură și rămâneți cu recomandările temei. Acesta va păstra echilibrul vizual perfect al site-ului dvs.

3. Slab spatiu alb (negativ).

Spațiul alb sau negativ în web design este un spațiu gol între widget-uri, blocuri de text, imagini sau orice altă parte a site-ului web, care ajută la organizarea tuturor și la furnizarea unui flux clar și logic pentru utilizatorul final.

Indiferent cât de mult ne-am strădui, cât de mult am protejat toate aspectele posibile ale temei WordPress, utilizatorii găsesc întotdeauna o modalitate de a distruge spațiul alb.

Din fericire pentru dvs., folosim un puternic Page Builder în temele noastre, ceea ce înseamnă că vă puteți ajusta cu ușurință spațiile pe site. Page Builder vă permite să schimbați umpluturile widget-ului, umpluturile rândului și vă permite să modificați dimensiunea jgheabului dintre coloane.

Nu am de gând să vorbesc despre detalii și aș prefera să vă dau câteva exemple practice.

• În cele mai multe cazuri, creatorii de site-uri web folosesc prea puțin spațiu alb, ceea ce nu permite conținutului să respire, așa că de obicei, cu cât spațiul alb îl aplicați, cu atât obțineți un rezultat mai bun.
• Arată relația dintre elemente cu spațiere. Elementele care merg împreună, de exemplu, titlul postării de blog și data postării, ar trebui să fie mai apropiate decât elementele, care au un scop diferit, cum ar fi data postării pe blog și antetul paginii.
• Fiți în concordanță cu spațierea. Aceasta înseamnă că fiecare rând de pe site-ul dvs. ar trebui să aibă aceeași cantitate de spațiu alb în partea de sus, de jos, din stânga și din dreapta.

Deci, este vorba de widget-uri. Ar trebui să aibă o cantitate egală de umplutură și margini aplicate, indiferent de locul în care apar în pagină. Consecvența va aduce un echilibru site-ului dvs. și va atrage atenția pe lucrul care contează - conținutul.

4. Proastă compatibilitate cu dispozitivele mobile

Procedura și regulile sunt aceleași ca pe desktopul de mai sus. Încă trebuie să acordați atenție spațiului alb, dar pentru mobil, există câteva reguli suplimentare:

• Unul dintre ele este un design prietenos cu degetele. Deoarece degetele sunt instrumentele noastre pentru a vă deplasa pe site în timpul navigării pe mobil, trebuie să adaptăm pagina la acestea. Când proiectăm o temă WordPress, ne asigurăm că butoanele și elementele pe care se poate face clic nu sunt mai mici de 50 px. Dacă adăugați elemente de la terțe părți la tema WordPress, asigurați-vă că sunt suficient de mari. De asemenea, asigurați-vă că acele componente acționabile nu se lipesc prea mult pentru a preveni clicurile greșite.
• Optimizați imaginile pentru viteză. Mulți oameni accesează site-uri web din mers, ceea ce înseamnă conexiune nesigură, uneori slabă. Încercați să eliminați încărcarea lentă a site-ului (pe mobil) și să vă optimizați imaginile.
• Testează-ți site-ul pe un dispozitiv mobil real. Puteți redimensiona fereastra browserului pentru a vedea vizualizarea mobilă, dar când ați terminat cu toate ajustările, aruncați o privire la modul în care arată site-ul web pe dispozitivul mobil real.

Sistemele de operare, browserele și experiența generală a utilizatorului fac diferența între desktop și mobil și ar putea duce la unele inegalități.

Google a dezvoltat un test de compatibilitate cu dispozitivele mobile, un instrument pentru a verifica dacă site-ul dvs. este prietenos cu dispozitivele mobile.

Ne asigurăm că fiecare dintre temele noastre WordPress trece cu ușurință.

5. Folosind culori care pur și simplu nu merg mână în mână.

Alegerea combinației potrivite de culori este un lucru dificil. Dacă ești talentat, poți să-ți urmezi instinctul. În caz contrar, folosește instrumentele create special pentru asta.

Am să vă arăt un exemplu:

Majoritatea temelor noastre WordPress sunt realizate din culori primare și secundare. Dacă logo-ul tău arată ca cel al lui Shell, decizia de a alege culoarea principală și cea secundară este simplă. Roșu va fi folosit ca culoare primară pentru îndemnuri. Cea galbenă va fi o culoare secundară, folosită pentru fundaluri și elemente de susținere.

Dacă logo-ul tău arată ca logo-ul Starbucks și este format dintr-o singură culoare, va trebui să o găsești pe cea secundară.

O opțiune este să alegeți aceeași culoare verde atât pentru culoarea primară, cât și pentru cea secundară, dar aș descuraja acest lucru.

Dacă nu ai curaj de designer și îți este greu să alegi combinațiile de culori, am o soluție pentru tine, numită Coolors. Este un instrument simplu de utilizat pentru a crea combinații frumoase de culori.

Accesați aplicația lor și introduceți codul de culoare hexadecimal (în cazul meu # 006241) al culorii primare în partea de jos a coloanei. Apoi blocați-l, făcând clic pe pictograma de blocare și apăsând bara de spațiu.

Sfat: nu știți cum să obțineți codul hexadecimal al siglei dvs.? Verificați dacă există o extensie Chrome utilă pentru asta.

Rezultatul meu arată așa.

După cum puteți vedea, toate culorile s-au schimbat, dar culoarea primară rămâne aceeași. Dacă nu ați obținut culoarea care vă place, continuați să apăsați pe bara de spațiu.

Dacă singurul motiv pentru care alegeți culoarea secundară este să o utilizați pe site și acea culoare nu va apărea nicăieri altundeva, nu alegeți o culoare prea puternică. În cazul nostru, portocaliul strălucitor este scos.

Trebuie să alegeți o culoare mai subtilă, care să nu vă distrugă marca și să vă susțină fără probleme culoarea principală, în cazul nostru, verde.

Alegerea mea personală ar fi cea de-a doua bej (#d8c99b) pentru că ar merge perfect cu verdele și cu siguranță nu o va depăși.

Poate că această culoare bej nu este culoarea perfectă, dar este o opțiune suficient de bună. Iata de ce. Când alegeți o culoare, încercați să vă gândiți cum va arăta textul întunecat sau alb pe ea.

În exemplul meu, textul întunecat ar arăta bine, dar dacă adăugați un pic mai mult contrast și alegeți o culoare bej mai deschisă, l-ar face și mai bun.

Din fericire pentru tine, aplicația Coolors are o altă caracteristică grozavă. Puteți selecta diferite nuanțe pentru fiecare culoare. Treceți cu mouse-ul peste o coloană colorată și faceți clic pe prima pictogramă, numită „Nuanțe alternative”. Apoi selectați nuanțele mai luminoase sau mai închise și aveți întotdeauna în vedere contrastul.

Am făcut o demonstrație rapidă despre modul în care aceste două culori ar funcționa împreună. În acest scop, am luat tema noastră Adrenaline WordPress și am convertit-o în site-ul Starbucks.

Am fost impresionat de cât de repede am schimbat tema Adrenaline WordPress în cu totul altceva, în literalmente 2 minute. Tot ce trebuia să fac, era să schimb două culori, să încarc imaginea eroului personalizată și să încarc un logo personalizat. Incearca-l tu insuti.

6. Nu aglomerați navigarea pe site

Structurați-vă navigarea pe site într-un mod lizibil, digestiv. Grupați lucrurile mai puțin importante în meniurile derulante sau includeți-le în bara de sus sau în subsol. Faceți ierarhia de navigare logică și asigurați-vă că toate aceleași niveluri ale meniului vor avea aceeași prioritate.

De exemplu, termenii și acordurile sunt de obicei mai puțin importante decât îndemnul principal la acțiune, prin urmare nu pot apărea ambele la același nivel. Puneți Termenii într-un subsol și îndemnul principal la acțiune în antet.

Păstrați-vă navigația principală curată, cu maximum 5 sau 6 opțiuni.

7. Logo-ul este prea mare

Există o propoziție faimoasă, pe care toți o primim de la clientul nostru la un moment dat - „faceți logo-ul mai mare”. Treaba ta, ca creator de site-uri web, este să-ți educi clientul, că nu este nevoie să ai un logo de 400 px, deoarece vizitatorii site-ului nu vin pe site-ul tău pentru a vedea cât de frumos este logo-ul tău.

Încărcați logo-ul în dimensiune, recomandat de autorul temei WordPress. Probabil că ei știu cel mai bine ce dimensiune a logo-ului funcționează cel mai bine cu o anumită temă.

Sigla este doar unul dintre multele lucruri de pe site și trebuie să se joace armonios cu alt conținut.

Dacă nu mă credeți, uitați-vă la orice marcă importantă de pe world wide web și veți vedea că 98% dintre ele au un logo, suficient de mare pentru a susține tot conținutul. Utilizatorul trebuie să știe ce marcă se află în spatele site-ului, dar trebuie să se concentreze și pe servicii, oferte și principalul apel la acțiuni.

8. Calitate slabă a logo-ului

Mi s-a întâmplat o dată să am sigla în format Microsoft Word (.doc). Ceea ce vreau să spun este că clienții vor găsi întotdeauna o modalitate de a vă surprinde.

În ceea ce privește logo-ul, este important să îl aveți în cea mai bună stare posibilă, perfectă a pixelilor. În acest scop, veți avea nevoie de un format vectorial (.pdf, .ai, .svg, .eps). Apoi, trebuie să accesați aplicația vectorială preferată (de exemplu, Adobe Illustrator) și să exportați acel logo la dimensiunea recomandată de creatorul temei. Aceasta este cea mai bună posibilitate pentru a obține cel mai clar logo.

Dacă obțineți sigla într-un format .png, ar putea funcționa bine, dar poate pierde o anumită claritate la redimensionare. Dacă redimensionarea distruge sigla, accesați fiverr.com și investiți 5 USD pentru a-l redesena într-un format vectorial. O altă investiție mică pentru un rezultat mare.

9. Calitate slabă a imaginii

Situația se îmbunătățește de la an la an, dar încă găsesc afaceri care nu pun suficientă atenție sau resurse în fotografii de calitate.

Dacă aveți un site care vinde un anumit produs, imaginile de calitate au probabil cel mai mare impact asupra prospectului și joacă un rol crucial, atunci când un potențial client decide dacă să cumpere sau nu un produs.

Dacă clientul tău nu ți-a oferit fotografii de înaltă calitate sau dacă nu le are, este treaba ta să-l convingi să investească 100 de dolari și să le cumpere online.

Sursă excelentă de fotografii de înaltă calitate este Shutterstock, unde puteți obține 50 de imagini pentru 99 USD pe lună. Este suficient pentru un site mic și va avea un impact extraordinar asupra utilizatorilor site-ului dvs. și va avea încredere generală în marca clientului dvs.

Sfat: atunci când alegeți o fotografie, încercați să evitați fotografiile generice, lustruite și nerealiste. Un exemplu în acest sens este un tip caucazian, cu dinți super albi și piele fără cusur.

Poate avea un efect contrar, dar cu siguranță nu va avea niciun impact asupra vizitatorilor. Încercați să găsiți imagini cu o oarecare autenticitate. Pentru a simplifica, utilizați imagini care au un aspect realist.

10. Nu stilizarea pluginurilor terță parte

În procesul de creare a unei noi teme WordPress, facem întotdeauna o cercetare a nișei pentru care facem o temă. Suntem întotdeauna dornici să includem toate funcționalitățile necesare în temă, dar uneori clientul dvs. își dorește altceva. Acesta este momentul în care pluginurile WordPress vin să joace.

Nimic în neregulă cu asta. După ce instalați și includeți pluginul în tema WordPress, aruncați o privire la modul în care arată pe front-end.

Observ adesea că clienții noștri uită să modeleze butoanele, formele și culorile în același stil ca și restul temei.

Aplicarea claselor CSS deja scrise la pluginul dvs. de trei părți vă va dura doar 10 minute, dar va avea un impact semnificativ în cele din urmă.

Dacă nu aveți cunoștințele necesare pentru a face asta, o putem face pentru dvs.

11. Lizibilitate proastă

Există o afirmație faimoasă, că tipografia reprezintă 95% din designul web – așa că fă-o corect.

Dacă utilizați widget-uri în același mod în care am făcut demo-ul temei, nu vor fi probleme, deoarece depunem mult efort pentru o bună lizibilitate, dar dacă modificați aspectul și stilul fonturilor, faceți asigurați-vă că urmați regulile de mai jos:

• Fiecare rând trebuie să aibă 60-80 de caractere , inclusiv spațiile.
• Dacă configurați o înălțime de linie personalizată, multiplicați dimensiunea fontului cu 1,4 până la 1,6. Dacă aveți o dimensiune de font de 16 px, înălțimea liniei dvs. ar trebui să fie între 22,4 și 25,6.
• Lăsați suficient spațiu în jurul textului.
• Nu utilizați culoarea textului prea deschisă. Totul mai luminos decât #777777 are un impact negativ asupra lizibilității.
• Nu utilizați fonturi mai mici decât cele recomandate. Cel mai mic pe care îl puteți merge este de 14px, dar v-aș recomanda să alegeți 16px sau 18px .
• Aveți grijă când instalați fonturi personalizate în temă. Unele fonturi sunt create numai pentru titluri și nu funcționează bine pe dimensiuni mai mici. Unele fonturi sunt făcute pentru tipărire și nu funcționează bine pe ecrane, iar unele fonturi sunt pur și simplu realizate prost. Gândiți-vă de două ori când doriți să înlocuiți fontul implicit al temei WordPress în altceva. Dacă tot doriți să-l schimbați, rămâneți pe partea sigură și alegeți-le pe cele populare.

• Utilizați alinierea corectă. În 95% din cazuri, alinierea textului la stânga este calea de urmat. În alte 5%, vă permit să utilizați alinierea centrată, dar vă rugăm să asigurați-vă că o utilizați numai pentru text de susținere scurt.

Alinierea la dreapta (cu excepția limbilor de la dreapta la stânga) și alinierea justificată sunt excluse. Perioadă.

Concluzie:

Data viitoare când veți face un site web pentru clientul dvs., parcurgeți lista de mai sus și încercați să remediați toate acele mici imperfecțiuni. Va dura doar o oră sau două, dar în final, veți obține un rezultat mult mai bun, ceea ce înseamnă un client mai fericit și o referință mai bună. Pe lângă asta, ne vei face o favoare pentru că vom primi un exemplu live fantastic de care să-l arătăm.

Dacă aveți întrebări, nu ezitați să comentați mai jos.

EDITARE: Acest articol a fost tradus în olandeză – anunțați-mi în comentariile de mai jos dacă doriți să îl traduceți în limba dvs.