Aspecte de grilă în site-urile de portofoliu WordPress: sfaturi și exemple de proiectare

Publicat: 2018-03-19

Cea mai comună structură a oricărui site de portofoliu WordPress este grila. Afișează o mână de lucru dintr-o dată, astfel încât privitorul să poată scana rapid și să aleagă orice îi atrage atenția.

Dar ce face un aspect puternic al grilei pentru un portofoliu? Și ce ar trebui să luați în considerare atunci când vă lansați propriul site de portofoliu?

În această postare, voi împărtăși câteva sfaturi și sfaturi cu privire la cele mai bune modele de aspect al grilei pentru portofoliile WordPress.

Modele de grilă strânsă

Când utilizați o grilă, este înțelept să păstrați designul strâns. În acest fel, articolele sunt apropiate în apropiere pentru a naviga rapid și pentru a încuraja utilizatorii să interacționeze cu conținutul.

Structura grilei diferă de obicei în funcție de tipul de conținut al portofoliului. Este posibil să fie necesar să măriți sau să micșorați umplutura, în funcție de fotografiile dvs. și de aspect. De exemplu, lucrările de artă pot fi neclare atunci când sunt apropiate, astfel încât portofoliile de artă digitală beneficiază de spațiu suplimentar.

Dar un designer ar putea să-și păstreze munca strânsă, deoarece capturile de ecran sunt încă ușor de realizat, chiar și de la distanță. Puteți vedea un exemplu frumos în tema Ink pentru WordPress.

temă wordpress cu cerneală

Acest lucru nu utilizează absolut nicio umplutură între niciunul dintre elementele grilei. Aceste blocuri pătrate se aliniază strâns împreună, astfel încât utilizatorul să vadă totul deodată.

De asemenea, folosește miniaturi mai mici, astfel încât acestea tind să atragă atenția rapid. Îmi place foarte mult acest stil și este un favorit personal pentru că lasă o impresie atât de puternică. Observați cum fiecare fotografie este clar vizibilă în contrast cu toate celelalte.

Dacă aveți lucrări care pot beneficia de acest stil, atunci priviți tema Ink. Este o modalitate ușoară de a crea aceste tipuri de grile de portofoliu fără a codifica una de la zero.

Dar o alternativă frumoasă este Bramble, care are puțin mai mult spațiu între fiecare piesă.

tema portofoliului bramble

Această temă WordPress vine cu mai multe machete de portofoliu, astfel încât să puteți alege cu adevărat ce stil(e) vă place(e) cel mai mult. Unele machete de portofoliu au miniaturi mai apropiate, altele au o mulțime de umplutură între elementele dintr-o grilă.

Dar primul lucru de luat în considerare este paralizia analizei. Acest lucru se întâmplă atunci când sunt prezentate prea multe opțiuni care pot face pe cineva să se simtă incapabil să aleagă una dintre ele.

Atâta timp cât intrările dvs. din portofoliu par unice și au suficient spațiu (sau lipsă de spațiu) pentru a sta singure, veți obține o mulțime de clicuri. Și nu acesta este scopul unui portofoliu?

Grile de zidărie

Nu mulți oameni știu despre grilele de zidărie, dar există de mult timp.

Acestea folosesc de obicei JavaScript pentru a aranja elementele într-o grilă pe baza diferitelor înălțimi verticale. Deci, în loc să adăugați miniaturi perfecte pentru pixeli, toate la aceeași dimensiune, puteți adăuga diferite elemente de portofoliu la diferite dimensiuni și totodată să le faceți să se potrivească.

temă Weston wordpress

Tema WordPress Weston are această caracteristică în pagina sa de portofoliu de fotografie minimalistă. Acest lucru vizează în mod natural fotografi care doresc să-și obțină munca online, iar grila de zidărie este o opțiune potrivită pentru fotografia de înălțime variabilă.

Fiecare fotografie își găsește drumul în mod natural în grilă, ocupând exact spațiul potrivit. De obicei, puteți personaliza numărul exact de coloane și înălțimea coloanei, dar rețineți că acesta va diferi în funcție de dimensiunea dispozitivului.

Dacă vă plac aspectele pe ecran complet, aruncați o privire la tema Notio. Utilizează un design de grilă de zidărie cu miniaturi strânse și efecte de animație personalizate.

tema notio wp

Observați că grilele din aceste două teme variază și ca etanșeitate. Unul are spațiu alb suplimentar între imagini, în timp ce celălalt are miniaturile aliniate strâns una față de cealaltă.

Aspectele grilei urmează o mână de tendințe și este alegerea dvs. să le urmați pe cele care vă plac cel mai mult.

Hover Detalii: Da sau nu?

Multe portofolii includ detalii de trecere cu mouse-ul care apar peste miniatură în timp ce trece cu mouse-ul. Acest efect nu se transmite de obicei pe mobil, dar este cu siguranță o tendință comună pentru site-urile de portofoliu desktop cu miniaturi mari.

Fiecare miniatură ar trebui să trimită către pagina internă a articolului din portofoliu sau cel puțin să deschidă o galerie de imagini legate de piesa respectivă. Miniaturile nu ar trebui să alcătuiască întregul portofoliu.

Dar adăugarea de detalii poate încuraja clicuri mai mari și îi poate determina pe oameni să sape mai departe pe site. Tema Creare WordPress folosește un efect de animație personalizat în timp ce trece cu mouse-ul pentru a atrage atenția asupra detaliilor plasate.

creați tema wp

Când cursorul trece pe orice articol din portofoliu, veți găsi două informații importante:

  • Numele/titlul articolului din portofoliu
  • Categoria articolului

Uneori, aceste mici detalii pot îmbunătăți radical experiența utilizatorului. Dacă cineva caută anumite lucrări de design grafic, acesta poate naviga pe categorii și poate verifica titlurile înainte de a face clic.

Dar alteori aceste detalii pot fi inutil de verbose și pot ocupa prea mult spațiu. De aceea, unii designeri omit aceste detalii, cum ar fi ceea ce veți găsi în tema WordPress Gather.

aduna tema wp

Doar miniaturi simple cu efecte simple de hover. Ușor pentru ochi și toate detaliile se găsesc sub miniaturi, astfel încât să nu obstrucționeze imaginea.

Această tendință nu are un răspuns clar „corect”. Detaliile de trecere cu mouse-ul funcționează excelent pentru unii, dar pentru alții această caracteristică poate fi o sursă de supărare minoră.

Găsiți ceea ce arată cel mai bine pe site-ul dvs. și evaluați în funcție de gusturile dvs. Dar dacă detaliile apar la trecerea cu mouse-ul pe miniatură sau sub miniatură, încercați să le adăugați undeva pe pagină.

Atrageți ochii cu fotografii convingătoare

Fiecare aspect al grilei folosește miniaturi pentru a capta atenția. Aceste miniaturi vând de obicei o parte din munca ta, încurajând oamenii să facă clic și să citească mai multe.

Lucrarea dvs. poate fi artă digitală, design web, design de pictograme, arhitectură UX sau orice altceva cu atractivitate vizuală. Dar ideea este că aveți absolut nevoie de atracție vizuală pentru a vinde. Și asta vine din fotografii convingătoare.

Tema minimalistă Mellow WordPress folosește o varietate de fotografii, fiecare cu stiluri diferite. Acestea nu sunt fotografii de proiect „adevărate”, deoarece sunt în mare parte substituenți. Dar oferă un exemplu clar de vânzare a vizitatorului chiar de la prima încărcare a paginii.

temă WP blândă

Vă sugerez să răsfoiți alte site-uri de portofoliu pentru a vedea ce folosesc alți designeri pentru fotografiile lor din galerie.

Vezi ce poți folosi pentru propriul tău site și ce fel de lucru ar putea atrage atenția. Ce vă prezintă cel mai bine aptitudinile? Ce parte a fiecărui proiect este cea mai atrăgătoare din punct de vedere vizual sau vă ajută să vă vindeți munca altora?

Din nou, aceasta este o întrebare foarte deschisă, dar veți dori să încercați multe strategii diferite. De obicei, găsesc că fotografiile de aproape atrag multă atenție, mai ales sub formă de miniaturi. Puteți vedea un amestec al acestor exemple cu tema Beckett pe pagina portofoliu.

tema Beckett

Într-un aspect al grilei, aveți doar atât de mult spațiu pentru fiecare proiect. Fă ca acel spațiu să conteze!

Dacă știi exact cât de mari ar trebui să fie miniaturile tale, atunci ai deja un avantaj enorm. Acest lucru vă permite să decupați multe miniaturi diferite în Photoshop pentru a vedea ce compoziții vă plac cel mai mult pentru articolele din portofoliu.

Inainta

Modelele de grilă sunt destul de simple și multe teme de portofoliu WordPress vin cu ele în mod implicit. Dar un aspect al grilei nu va oferi prea multe fără lucrări de design spectaculoase de prezentat.

Sper că această postare oferă sfaturi valoroase pentru designeri și creativi care își lansează propriile portofolii. Modelele de grilă sunt cele mai comune în portofolii, astfel încât vizitatorii le vor aștepta. Aplicând aceste tendințe (sau utilizând aceste teme) puteți capta mai multă atenție și, în mod ideal, puteți aduce mai multă muncă client în timp.