Cum să creați o machetă pentru următorul dvs. proiect web utilizând Adobe XD

Una dintre cele mai interesante părți ale creării unui nou site web este faza de creare a designului. În multe cazuri, oamenii pur și simplu rotesc WordPress și încep să încerce design-uri. Cu toate acestea, această abordare nu este cea mai bună dacă doriți ca site-ul dvs. să funcționeze cât mai curând posibil.

Mașinile de design web vă permit să schițați cum va arăta site-ul dvs. web. Odată ce aveți o machetă în loc, tot ce trebuie să faceți este să o traduceți pe ecran și sunteți bine să mergeți. În acest articol, vom vorbi despre de ce este logic să folosiți machete pentru următorul dvs. proiect web. Apoi vă vom prezenta Adobe XD, un instrument gratuit pe care îl puteți utiliza pentru a crea machete și vă vom învăța cum să îl utilizați.

Hai să ne batem joc!

De ce ar trebui să creați machete pentru paginile dvs. web

Multora dintre noi le place să schițeze modele aspre pentru site-uri web noi înainte de a începe să lucrăm la ele. Nu trebuie să fie nimic elegant - imaginați-vă tipul de schiță pe care l-ați face pe spatele unui șervețel și veți avea ideea.

Așa numim un design „wireframe”. Este o reprezentare cu fidelitate redusă a ceea ce ar arăta produsul final. Ideea este ca tu să poți pune ideile pe hârtie, să vezi dacă au sens și să le împărtășești cu alții.

Mașinile, pe de altă parte, sunt mult mai de înaltă fidelitate. În loc de șervețel, probabil că ați dori să utilizați un instrument de proiectare dedicat. Scopul, în acest caz, este de a proiecta ceva care seamănă cât mai mult cu produsul final.

Există o mulțime de avantaje în crearea de machete pentru proiectele dvs. web, cum ar fi:

• Planificarea întregului design al site-ului dvs. web fără a fi nevoie să atingeți o linie de cod sau un constructor de pagini.
• Puteți vizualiza destinația de plasare pentru fiecare element, cum ar trebui să arate și modul în care se potrivesc.
• Puteți trece peste machete cu alți membri ai echipei dvs. pentru a obține mai multe feedback-uri.
• Este mult mai ușor să arăți unui client o machetă decât să creezi un întreg site web și apoi să-i ceri părerea.

Există o mulțime de avantaje în crearea de machete pentru paginile site-ului dvs. Cu toate acestea, ele implică și o mulțime de muncă suplimentară, deoarece nu se vor pune împreună. Pentru a crea o machetă de înaltă fidelitate, veți avea nevoie de experiență cu aplicații de proiectare specializate. Având în vedere acest lucru, să trecem la secțiunea următoare.

Introducere în Adobe XD

Adobe XD este o aplicație ușoară creată pentru a ajuta designerii UX / UI să creeze cadre de înaltă fidelitate, planșe de artă, prototipuri interactive și machete. Spre deosebire de alte aplicații Adobe, nu aveți nevoie de un abonament pentru a utiliza Adobe XD. Pur și simplu înscrieți-vă pentru un cont Adobe gratuit, descărcați și instalați aplicația și sunteți bine.

În timp ce aplicația include caracteristici similare cu alte programe, cum ar fi Photoshop, Adobe XD este mai orientat către designul UX / UI. De exemplu, vă permite să adăugați cu ușurință elemente, cum ar fi butoane și formulare la desenele dvs. Poate chiar să actualizeze elemente pe mai multe planșe de artă, cum ar fi siglele, dacă toate fac parte din același site web. Combinate, toate aceste caracteristici fac ca crearea de machete să fie foarte simplă.

Caracteristici cheie:

• Creați planșe de lucru pentru wireframe și machete.
• Proiectați machete pentru web și dispozitive mobile.
• Adăugați cu ușurință aproape orice tip de element pe care îl puteți imagina la desenele dvs.
• Actualizați elemente legate (cum ar fi sigle) pe mai multe modele simultan.

Preț: gratuit | Mai multe informatii

Cum se creează machete web utilizând Adobe XD

Pentru a începe, accesați pagina de pornire Adobe XD și faceți clic pe butonul Obțineți gratuit XD . O nouă pagină se va deschide acum, iar descărcarea dvs. ar trebui să înceapă automat. Când ați terminat, lansați fișierul de instalare, care vă va solicita acreditările contului Adobe înainte de a putea continua:

Amintiți-vă că nu aveți nevoie de un abonament plătit pentru a finaliza acest pas, deci trebuie doar să vă înscrieți pentru un cont Adobe gratuit dacă nu aveți unul. După ce ați terminat, introduceți acreditările în programul de instalare și va începe descărcarea aplicației Adobe XD. Procesul ar trebui să dureze doar câteva minute, dar rețineți că Adobe își va instala și Creative Cloud în același timp.

Odată ce Adobe XD este gata, puteți lansa programul și vă va întreba ce tip de proiect doriți să abordați mai întâi:

Pentru acest tutorial, am mers cu opțiunea Web 1920 pe care o vedeți în imaginea de mai sus. Odată ce ați introdus Adobe XD, veți vedea un pătrat gol în mijlocul ecranului, reprezentând noua dvs. placă de artă:

Puteți adăuga mai multe planșe de artă - fiecare reprezentând o pagină unică - făcând clic pe butonul Straturi din partea stângă jos a ecranului. Acum selectați planșa inițială, alegeți opțiunea Duplicare , iar o nouă planșă va apărea pe tabloul de bord:

Puteți sări între planșe după bunul plac, dar, deocamdată, să ne concentrăm asupra modului de editare a unuia, care va fi macheta paginii noastre de pornire. Să mergem mai departe și să selectăm una dintre planșele de artă și să formăm un pic zoomul, utilizând meniul din partea dreaptă a ecranului:

Același meniu include opțiuni de ajustare a dimensiunii planșei de lucru, umplerea acesteia cu o culoare și afișarea unei grile, astfel încât să aveți un control mai bun asupra elementelor pe care le plasați. Pentru moment, trebuie doar să setați o culoare pentru fundal:

Acum, să adăugăm primul element al machetei noastre, o bară de navigare secundară în partea de sus a ecranului. Putem face acest lucru folosind instrumentul dreptunghiular din meniul din stânga:

Am continuat și am adăugat o culoare de fundal la bara de navigare, precum și text, folosind instrumentul Text din meniul Adobe XD:

Acum, să mergem mai departe și să vedem cum se ocupă Adobe XD de un îndemn (CTA). Pentru a adăuga unul, să folosim din nou instrumentul Rectangle . De asemenea, am rotunjit colțurile butonului folosind meniul din dreapta, precum și am setat o culoare de fundal și i-am adăugat text:

În captura de ecran de mai sus, puteți vedea opțiunea de a utiliza colțuri rotunjite în loc de cele obișnuite și știți deja cum să adăugați text și să schimbați culoarea de fundal. În continuare, să lucrăm la meniul obișnuit folosind din nou instrumentele Text și dreptunghi . Iată cum arată macheta noastră după câteva pase:

În acest moment, suntem pregătiți să adăugăm sigla Elegant Themes trăgând fișierul imagine de pe computerul nostru în planșa noastră de lucru:

În cazul în care nu ați observat, creăm o machetă a indexului blogului Teme elegante. Proporțiile nu sunt perfecte, desigur, și câteva detalii sunt dezactivate. Cu toate acestea, obiectivul nostru a fost să vă arătăm ce puteți face cu Adobe XD chiar și fără nicio practică.

În continuare, să adăugăm titlul principal și o bară de căutare folosind (ați ghicit-o), instrumentele Rectangle și Text :

Acum, pentru lovitura de grație , să adăugăm câteva extrase de postări pe blog în macheta noastră. Pentru început, să adăugăm încă două dreptunghiuri la tablă. Puteți crea unul și duplica-l pentru a vă ușura lucrurile. Când le trageți, veți observa că Adobe XD vă arată măsurători pentru a le menține în linie:

Acum avem cele două dreptunghiuri goale. Să le adăugăm titluri folosind instrumentul Text :

În cele din urmă, să mergem mai departe și să adăugăm imaginile recomandate ale fiecărei postări. La fel ca înainte, trebuie să trageți fișierele imagine în Adobe XD de pe computer.

Acum să facem un pas înapoi și să ne uităm la macheta noastră completă:

Nu este o recreație perfectă pentru pixeli, dar arată suficient de bine pentru o încercare incipientă. Cu alte cuvinte, utilizarea Adobe XD ar trebui să fie o plimbare în parc, chiar dacă nu sunteți nou în utilizarea instrumentelor de proiectare - și puteți crea niște machete foarte interesante cu el.

În cele din urmă, fiecare machetă pe care o creați cu Adobe XD implică adăugarea elementelor dorite, folosirea culorilor potrivite și plasarea imaginilor acolo unde este necesar. Fiecare dintre aceste acțiuni este destul de simplă, deci nu există niciun motiv să vă speriați procesul.

Concluzie

Mockup-urile sunt o modalitate excelentă de a vă pune toate ideile pe hârtie (sau ecran). Apoi, le puteți rafina până când ajungeți la designul perfect pentru site-ul dvs. web. Este mult mai ușor să creați mai multe machete, apoi să încercați să le reproduceți pe site-ul dvs. mai târziu, deci este o tehnică pe care ar trebui să o îmbrățișați.

Folosind Adobe XD, crearea de machete de înaltă fidelitate devine foarte simplă. Nu are un pachet la fel de mare ca și Photoshop, dar poate face o treabă excelentă atunci când vine vorba de wireframe și mașini (în plus, este gratuit!).

Aveți întrebări despre cum să utilizați Adobe XD pentru a crea machete pentru site-urile dvs. web? Să vorbim despre ele în secțiunea de comentarii de mai jos!

Imagine în miniatură a articolului de la Darko 1981 / shutterstock.com