A design néhány szerencsés ember számára magától értetődő fogalom, ez az útmutató nem nekik szól.

Ha még csak most ismerkedsz a webdesignnal, könnyen érezheted úgy, hogy az első próbálkozásaid kudarcba fulladnak: egyrészt az összes honlapot, mellyel naponta találkozunk, profik készítették - így úgy tűnhet, nem érhetsz fel hozzájuk -, másrészt a designjaidról valószínűleg ordít, hogy „NE NÉZZ IDE!”

A kódolással ellentétben, ahol ha elakadtál, rendszerint találsz olyan hivatkozást, amely megoldja az adott problémát, a webdesign területén sokkal tovább tart iránymutatást találnod arra, miként tedd meg a kezdeti lépéseket. Könnyen azt érezheted, hogy túl sok az ismeretlen az egyenletben.

Íme 5 tanács, amely segítségével elsajátíthatod a honlaptervezés alapjait, könnyedén felülvizsgálhatod a korábbi munkáid és még gyorsabban fejlődhetsz.

1. Keress olyan honlapokat amik tetszenek, és másolj!

Ahogy a tapasztalt designerek mondják, szerezz inspirációt mások munkáiból. Másszóval nézd végig a versenytársak/tiédhez hasonló cégek oldalait, és tervezz akár színekben, vagy még inkább felépítésben azokhoz hasonlót.

Amíg kezdő vagy, nehéz megmondani miért nem működik a design egy-egy új és kreatív megközelítés kipróbáláskor. Órákig tűnődhetsz ezen gondolkozva. Ilyenkor jöhet jól, ha megnézed, hogy csinálják ezt a tapasztaltabb designerek, és azt csinálod Te is.

Például a Behance-n vagy a Dribbble-n biztos megtalálod, amit keresel. Tegyük fel, hogy egy blog oldalt tervezel. Megnézheted mondjuk a blog.hu-t, és annak a designja alapján akár el is készítheted a sajátod. Ez tulajdonképp a felhasználók életét is megkönnyítheti. Amikor valaki első alkalommal jár az oldaladon, már önmagában is elég stresszes kitalálnia, mi hogy működik. Az ismeretlen design elemek tovább nehezíthetik dolgát, kiváltképp ha még kezdő designer vagy.

2. Keresgélj Neked tetsző részleteket, és jegyezd fel őket

Ha mondjuk épp egy bombasztikus színvilágot vagy oldal elrendezést próbálsz összehozni, de nem tudod, miért olyan ronda még mindig, idézz fel egy-egy példa oldalt, ahol ezek a részletek működtek. Menj az oldalra és írd le 3-5 gondolatban, hogy mit szeretsz benne.

Nézzünk egy példát: éppen egy nyitóoldalt tervezel, és nem jössz rá, hogyan mutasd be gyorsan annak fő előnyeit. Vizsgáljuk meg, mit csinál a Lumosity:

• 5 szavas találó magyarázat mindegyik bekezdéshez
• A cím betűinek mind a vastagsága, mind a színe segít egyensúlyt teremteni a bekezdéssel
• Megfelelő térközök a bekezdések között, ezáltal könnyebb olvasni
• Balra rendezettség szintén a könnyebb olvashatóságért
• Ha újra megnézzük a képet, észre vehetjük, hogy elmeséli, miről szól a szöveg. De ha még sem, akkor is egyensúlyt teremt.

Amint kész a listád a pozitívumokkal, térj vissza a saját oldaladra és javítsd ki ezek alapján. (Jobb egér gombbal kattintva, az „Elem vizsgálata” használatával megnézheted a pontos CSS kódot, amit a design használ.)

3. Barátkozz össze egy designerrel és kérd meg, hogy amikor csak lehet véleményezzen

Megnehezíti a fejlődést, ha nem vagy biztos önmagadban. Ha ötleted sincs, mi lehet a baj, hiába agyalsz órákig és várod, hogy megjavuljon. Ellenben ha meg tudod vitatni a problémáid valakivel, akinek van némi dizájner tudása, sokkal gyorsabban fogsz haladni. A legtöbb designer azonnal rá tud mutatni a hibákra, így sokat tanulhatsz tőlük.

Így találhatsz segítőkész designereket:

Ha jól menő vállalatnál dolgozol: Ismerkedj össze a designer csapat egy tagjával. Ezt megteheted akár egy közös ismerős által, vagy egyszerűen csak szólíts le valakit. Mondd el, mit próbálsz tanulni és kérdezd meg, hogy szánna-e rád hetente 1-2 alkalommal 15 percet, hogy a tervezésről beszéljetek. Ha jó tanár, neki is meg fogja ez érni.

Ha egy közösségi irodában (coworking space)/inkubátorházban dolgozol: és még nincs külön designeretek, keress egy másik cégnél dolgozó designert, ott az irodaházon belül . Szívesen segítenek majd, ameddig hozzád hasonlóan, a cégük elindításán ügyködnek. Mondd el Nekik, hogy a designerség tanulása mennyire fontos neked, és elengedhetetlen a csapatod sikerésségéhezz. Még egyszer: 15 perc heti 1-2 alkalommal mindkettőtöknek bele kell férjen.

Ha otthon dolgozol, vagy nem találkozol designerekkel: Használd kapcsolatépítésre a meetupokat! (csatlakozz meetup csoportunkhoz) Járj utána az olyan közeledben lévő rendezvényeknek, melyeken designerek is részt vehetnek. Például ilyen lehet egy web design témájú vagy egy front-end fejlesztő meetup. Vagy akár nézz körül a freeCodeCamp campsite list-en (freeCodeCamp Budapest fb csoport), itt is találhatsz kezdő web fejlesztőknek szóló csoportot. Jelentkezz, és amikor elmész egy ilyen eseményre, bátran mondd el, hogy mit szeretnél elérni, és kérj tőlük segítséget.

Természetesen a fent taglalt 3 lehetőség csak akkor jön szóba, ha nincs designer ismerősöd. Ha van, ő a legmegfelelőbb ember.

4. Készíts mock-upokat (képernyőterveket) már kipróbált programokkal (pl. PowerPoint vagy Keynote)

Csábító megtanulni egy igazi web designer program (mint például az Adobe Illustrator) kezelését. Ez hosszú távon akár hasznos is lehet, de legyünk azzal tisztában, hogy egy-egy új eszköz (tool) használatának elsajátítása akár 20 óránál is több időt vehet igénybe. Ha viszont mock-up vagy látványtervek nélkül állsz neki az oldalnak, órákat foglalkozhatsz a CSS kóddal úgy, hogy fogalmad sincs valójában hogyan is fog kinézni.

A mock-upok segítségével órákig tartó kódolás nélkül eltervezheted, hogy milyen lesz az oldal. Kiváló választás lehet a Powerpoint és a Keynote is.

A gombok nyomkodhatóvá tételével interaktív mock-upokat is készíthetsz, vagy akár négyzetrácsot is beállíthatsz, csak úgy, mint az Illustratornál. A legfontosabb, hogy jól ismert rendszeren tanulj tervezni.

Kódolás előtt addig javítgasd a designt, amíg nem vagy vele teljesen elégedett. Igaz, hogy kicsit másképp fog kinézni mint a böngésződben, de gyorsan kipróbálhatsz pár különböző lehetőséget és korrigálhatod a visszajelzések alapján.

Ez segíteni fog megérteni, hogy a tervezés különböző döntései mit eredményeznek a megjelenésben. Ne spórolj a színeken, betűtípusokon vagy bármi máson, készítsd olyan jóra amennyire csak lehet. Inspirációra van szükséged, hogy minden tökéletes legyen? Látogass el az Adobe Color vagy Google Fonts oldalaira.

5. Olvass el egy könyvet a design alapjairól

Azért ezt hagytuk a végére, mert ez már a valódi munkán kívül esik. Viszont érdemes gyakorlatiasabb könyvet választani, mint a száraz elméletet lapozgatni.

Egy kevésbé kreatív személynek egy elméleti könyvben leírtak nehezebben megvalósíthatók. Olvasás közben még úgy tűnik van értelme, de amikor alkalmazni kéne, teljes lesz a káosz. Mintha felesleges lett volna bármit is olvasni.

Ajánlunk egy könyvet, ami valós, sikeres web designok alapján tanít: free e-book on design basics with website examples.

Engedd szabadjára a benned lakozó designert

A kódolással ellentétben, itt nincs tankönyvi példa, amiből megtanulhatod a pontos megoldást arra, hogy működő designt készíts.

Azt hogy a design, amit készítettél nem sikerült, csak a felhasználók visszajelzései alapján fog kiderülni.

Ne várj el pontos visszajelzést tőlük.

Tanulj és meríts ihletet a körülötted lévő kiváló szakemberekből. A nagynevű designerek munkáinak másolása -vagy csak órákig együtt lógni velük - sokkal hasznosabb lehet, mintha egyedül találnád ki a megoldásokat.

És ne feledd: minden híres designer ugyanolyan reménytelen zöldfülűként kezdte, mint te.

(Forrás)

***
Ha Te is kreatív, kihívásokkal teli mérnök állást keresel minőségi munkáltatónál, jó helyen jársz, mert a Schönherz Bázis épp azért jött létre, hogy Neked segítsen.

Gyere, nézz szét aktuális állásaink között!