Cherry Universe.
home resources tutorials about themes order
BrielleBrielle
2018 / 09 / 04

Hosszú ideje tervezgettem, hogy készítek egy átfogó bejegyzést a webdesign készítési folyamatomról, mely egy nagyobbacska betekintést nyújthat abba, hogyan is jut el nálam egy design az ötletelés fázisából egy weboldalra a tervezésen, alakítgatáson, és természetesen a kódoláson keresztül. Ha érdekel, hogyan készítem a Cherry Universe designjait, a rendeléseimet vagy csak szimplán a letölthető témáimat, akkor nyugodtan olvass tovább, hiszen biztosan fogok mutatni olyan dolgot, amit az oldalon még eddig nem osztottam meg veletek.

Még most az elején leszögezem, hogy ez nem egy Photoshop vagy kódolás tutorial lesz, csak egy bejegyzés, melyben igyekszem a nem látható részletekbe belemélyedni (ötletelés, és ilyesmik).



Úgy érzem, túl hosszú ideig voltam inaktív az oldalon, és ez idő alatt rengeteget változott a design készítéshez való hozzáállásom. Sok új módszert fejlesztettem ki magamnak az egyszerűbb munkavégzésre, bár néha még most is előfordul, hogy nehezen talál meg az ihlet, az a szikra, ami elindíthatja a folyamatot.

Kezdésképpen szeretem átlátni, hogy milyen képek is állnak rendelkezésemre a design elkészítéséhez. A cikkhez egy WordPress design tervezésének fogtam neki, mely természetesen egy rajongói oldalra kerülne az elképzelés szerint. Ehhez mindig fontos részlet a megfelelő fotósorozat kiválasztása, aminek a képeivel aztán dolgozhatok, és megjelenhetnek a fejlécen, vagy a design egyéb részein.

Szeretek olyan képeket választani a designjaimhoz, amik rendelkeznek valami extrával, némi fantáziával, és nem csak egyszerű portréfotók egy fehér háttér előtt. Így esett most a választásom Ariana Grande fotósorozatára, mely a Sweetener albumához készült. A fényhatások különösen azt kívánták tőlem, hogy dolgozzak ezekkel a képekkel (igen, tudom, hogy ez mennyire furán hangzik, de gyakran megesik velem, hogy meglátok egy fotósorozatot, és rögtön érzem a késztetést, hogy alkossak belőlük valamit.)

Rögtön éreztem, hogy ezekhez a képekhez olyasféle elrendezést szeretnék társítani, ami kiemeli őket, és erősíti az általuk megjelenített hangulatot. Szerettem volna, ha egy fotó gyűjteményre hasonlítana, amelyek esetében általában a hangulatukat megragadva helyezik a képeket egymás mellé. (Ehhez példát is hoztam, egyfajta segítségként, hogyan is képzeltem el.)

Ezen kiindulópontok alapján kezdhettem neki a tervezésnek a Photoshopban. Itt már létrehoztam az alapot, melyen a program segítségével rakom össze a designt. Először mindig Photoshopban szerkesztem meg az elrendezést, és csak akkor kezdek neki a kódolásnak, ha mindent megfelelőnek érzek ez alapján. Ha a terv megfelelő, akkor gyorsabb a kivitelezés.

A munkalapot mindig 1920 pixel szélességre készítem, hiszen ez az egyik legkedveltebb képernyőszélesség a monitoroknál, de ez lehet tetszőleges, mivel a kódolt változatban nem fog számítani a reszponzivitás miatt. (A mobil változat terveit külön készítem el, de ezt már a kész desktop verzió után.)

Annak érdekében, hogy a design minden képernyőméreten megfelelően jelenjen meg, a fejléc fő részeit 1000 pixel szélességben helyezem el. Ennek a kijelölésére függőleges segédvonalakat használok, így tudom, hogy ezen a területen belül dolgozzak.

Mielőtt elkezdeném a fejlécet, fontos átgondolnom azt is, mit szeretnék megjeleníteni rajta. A navigáció elengedhetetlen, emellett az oldalcímet és érdemes feltüntetni, valamint szeretek ráhelyezni egy rövid bevezető szöveget, ami az oldalra tévedőt segíti az eligazodásban. Ezek a legfontosabb részletek, amelyek helyet kaphatnak a megjelenítendő képek mellett. Ezeket szoktam felhelyezni a fejlécre, és akkor el is kezdhetek játszani az elrendezéssel.

Először az elemek még nem kapják meg a végleges helyüket, hiszen számos kombinációt próbálok végig, mire minden a helyére kerülhet. Ehhez azt kell átérezni, hogy mi milyen forma vagy szín mellett mutat a legjobban. A fenti példa egy első verziója volt a fejlécemnek, viszont mint láthatjuk, a navigációs sáv nem mutatott jól jobb oldalon, nagyon megosztotta az egységet, túl kívülre esett a fő részegységtől, ahol a dolgok történnek (a képeknél és a címnél, hiszen ez vonzza a tekintetet.)

Ezért áthelyeztem a teljes navigációs sávot a fejléc bal oldalára, mely így elnyerte a végleges helyét. Ezzel megszületett a fejléc “lelke”, így a többi részlet elhelyezése már adta magát.

A fejlécen felhasználandó színeket általában a fotósorozat adja magától. Mivel ebben az esetben sötétebb hangulatot árasztó képeket használtam fel, így szerettem volna ezek mellé valami hasonló színt választani, ami kiemeli ezt a hatást. Ezért lett fekete a navigációs sáv, valamint a cím téglalapja is. Szöveg színként pedig a feketével a fehéret párosítottam, a szürke háttérhez pedig egy sötétebb szürkét. Figyelni kell rá, hogy ezek után az oldal többi részének a megtervezésekor is ezeket a színeket használjam fel, és akkor az oldal egy teljes egység részévé válhat.

A fejlécen felhasznált képekhez mindig készítek külön hatást is, melyeket korrekciós rétegekként adok hozzájuk. Például különösen szeretem a szelektív szín korrekciós réteget, mert ezzel lehet a legkülönlegesebb változtatásokat végrehajtani a rétegen. Ha kialakítottam a megfelelő hatást, akkor a designhoz felhasznált összes képhez hozzáadom az egységesség érdekében.

Photoshopban a fejléchez megszerkesztem a modulokat is, a bejegyzések moduljait, valamint a sidebart. Célom az, hogy minden részlet összhangban legyen a tervezett fejléccel. A következőkben pedig mutatok is két képet, melyek közül a bal oldali a Photoshopban összerakott designt ábrázolja, a jobb oldali pedig a bekódolt változatát. Kattintással megnézhetitek őket teljes méretben is, és akkor jobban látszódnak a különbségek.

Ezzel még nem értünk a bejegyzésem végére, ugyanis bár bemutattam a végleges bekódolt változatot, mégsem ejtettem még magáról a kódolásról semmit.

A kódot egy code editor programmal szoktam elkészíteni, mely tetszőleges. Én Notepad++ -t vagy Sublime Textet ajánlanék hozzá (én az utóbbit használom). Fontos részlet, hogy WordPress designt sose szerkesszünk a WordPress kódszerkesztőjében, mert eléggé instabil. A legviccesebb az, hogy most már maga a WordPress is figyelmeztet rá, hogy ne ott szerkeszd a sablont, szóval van benne valami.

Egyébként a design bekódolását ugyanolyan sorrendben teszem meg, mint ahogy Photoshopban is összerakom. Fontos részlet, hogy tudjam, mi az, amit meg tudok valósítani kóddal, így amikor megtervezem a designt, akkor ezt is mindig figyelembe veszem. A fejlécet hosszú évekig teljes mértékben háttérként töltöttem fel, és csak a linkeket helyeztem rá kóddal, most viszont már a teljesen kóddal valósítom meg. Szövegeket egyébként sem érdemes grafikaként feltölteni. Ezeket mindig kóddal helyezzük rá a fejlécre. Sokkal igényesebb is, ráadásul így ténylegesen az oldal része, nem csak egy díszítő elem. Nem is beszélve arról, hogy a kereső robotok a bekódolt szöveget veszik be a keresési eredményeikbe.

WordPressben érdemes kihasználni a widgetek nyújtotta lehetőséget is, hiszen sokkal egyszerűbb szerkeszteni az oldalsávot, ha nem kell folyton megnyitni hozzá az oldal teljes kódját. Így ha például hozzá akarsz adni egy új csere partnert, akkor azt a Megjelenés / Widgetek részleg alatt tudod megtenni, ahol egyszerűen lehet szerkeszteni az Csere partnerek modul kódját. A saját letölthető témáimba ezért mindig teszek widgetes sávot. Egyedül a projekt dobozok nem kerülnek bele a widgetek közé.

Mobil változat

Végül eljutottunk a webdesignunk mobil változatához is. Ezt mindig azután tervezem meg, hogy elkészült a desktop verzió Photoshopban, így kódolásnál már a mobil elrendezést is figyelembe tudom venni. Erről nem szeretnék olyan sokat írni ebben a bejegyzésben, mivel szerintem a mobilos külső megérdemel egy külön bejegyzést.

A legfontosabb, hogy a mobilos változatnál a bejegyzések és a sidebar egymás alá kerüljenek, és kitöltsék a rendelkezésre álló szélességet az olvashatóság érdekében. Emellett a fejléc is mindig egy leegyszerűsítettebb külsőt kap. Minden sallang lekerül róla, és csak egy navigáció, kép és az oldal címe marad meg. Ide nem lesz szükség többre, mivel helyből is jelentősen kevesebb áll rendelkezésünkre.

A mobilos változat nálam a tabletes változatot is jelenti, igyekszem minden eszközre 1000 pixel szélesség alatt egységes designt készíteni. Természetesen sok esetben ajánlott külön tabletes kódolást is készíteni, hiszen azért jelentős a méretkülönbség egy telefon és egy tablet mérete között, a legtöbb esetben mégis megfelel ugyanaz a kód is. Az egyetlen lényeg az, hogy ugyanaz a kód mindkettőn megfelelően mutasson.

Tulajdonképpen ennyi lenne a bejegyzés, hiszen a design elkészítésének a végére értünk. Fontos ugyanakkor még megemlítenem azt is, hogy ha úgy érezzük, elkészültünk a weboldal designnal, akkor ellenőrizzünk le mindent. Nincsenek-e elcsúszások egyetlen egy felbontásban sem, illetve hogy minden részlet a helyére került-e. A hibákat javítsuk, aztán pedig aktiváljuk oldalunkon a designt.

Végezetül még egy fontos dolgot szeretnék megemlíteni, mely az lenne, hogy amikor már aktívan használjuk oldalunkon a designt, akkor mindig a designnak megfelelően írjuk a bejegyzéseket. Ez vonatkozik saját készítésű, és letöltött designra egyaránt. Tehát ha bizonyos bejegyzések megkövetelik, hogy legyen jelen egy bizonyos szöveg hossz, mert csak úgy néz ki megfelelően a designnal, akkor írjunk annyi szöveget, hogy teljesítse ezt a kívánságot.

Erre példát is mutatok. Az alábbi képen például ha a bejegyzés van kiemelt kép, akkor a szöveg a mellette levő üres helyre ugrik. Ilyen esetben legyen minimum annyi szöveg a bejegyzésben, hogy körül tudja zárni a képet. Így biztosan nem lesz semmiféle elcsúszás, és megmarad az elrendezés tervezett megjelenése.

Tudom, hogy sokat szövegeltem ebben a bejegyzésben, de ha végig olvastad, és hasznosnak találtad, akkor köszönöm a figyelmedet. Remélem, valamit el tudtál tenni magadnak belőle, amit te magad is fogsz tudni hasznosítani a további munkád során.

A bejegyzésben elkészített design letölthető a Sellfy oldalamról.  Bármiféle kérdést vagy megjegyzést szívesen fogadok hozzászólásban.


x Hozzászólás részleg x
2018 / 09 / 04 •

Szia Brielle!
Nagyon tetszett ez a bejegyzés, számomra igazán hasznos volt.
Köszönöm, hogy megírtad, illetve különösen tetszik ez a kinézet, amit elkészítettél! :)

2018 / 09 / 04 •

Szia mona! Én is köszönöm, és örülök neki, hogy hasznosnak vélted. :)

x Írj hozzászólást a bejegyzéshez x




Hozzászólásod csak spam ellenőrzés után fog megjelenni.

Ellenőrző kód *