Webdesign a gyakorlatban (18:52)
Weboldal készítési folyamat lehetséges irányai:
- csak WordPress-ben épül fel a weboldal: kisebb projekteknél teljesen jól tud működni és tapasztalt weboldalépítő esetén
- előre elkészül egy design például Figmában: ha a design tetszik az ügyfélnek, akkor épül fel WordPressben. Ez több lépés, de mivel Figmában sokkal gyorsabban megy a design, mint az éles építésben WordPress-ben, így könnyebb is változtatni rajta
Miért érdemes az UI Drótvázcsomagban építeni?
- a szakaszok megfelelőit WordPressben is megépítettük neked
- a szövegírás, stratégia kitalálása is sokkal könnyebben megy a Figmában, mert egyszerűbben lehet pakolászni a szakaszokat és beírni a szövegeket
Ha megvannak az arculati elemeid, jöhet az építkezés!
Az építkezés fázisai
- Fejléc és lábléc elkészítése
- Lehetséges szakaszok kigyűjtése
- Szövegek, információk megjelenítésének próbálgatása
- Sorrendbe rendezés
- Színek kalibrálása
- Képek és háttérképek elkészítése és helyretétele
Fejléc és Lábléc
- kezdj azzal, ami első ránézésre jó ötletnek tűnik, és később majd simán változtathatsz rajta
- ha versenytársak oldalát nézed, a neked tetsző fejlécről és láblécről rakjál be képet, ami a segítségedre lesz
- később alakíthatsz rajta, de legyen egy első verziód
Lehetséges szakaszok kigyűjtése
- be kell húzogatni azokat a szakaszokat, amelyekre lehet, hogy szükséged lesz az adott oldalnál
- ha másik aloldalhoz találsz jó szakaszt, húzd be oda
- berakhatod a kifotózott versenytársakról gyűjtött szakaszokat is
- Milyen infókra van szükséged, azokat hogyan lehet megjeleníteni, mi az az elrendezés, ami tetszik? Ezeket a kérdéseket próbáld megválaszolni
Szövegek, információk megjelenítésének próbálgatása
- elkezdheted beírni a címsorokat, szövegeket a megfelelő helyekre
- próbálgasd a különböző megoldásokat
- húzd ki oldalra a régi megoldásokat, mert számtalanszor előfordul, hogy visszatérsz hozzájuk később
- ha picit torzul a szöveghossz miatt a design, ne törődj vele ennél a résznél még
Sorrendbe rendezés
- a valóságban ez inkább együtt történik az előzővel
- itt készíted el a logikai felépítését a szakaszoknak, itt teszed őket a megfelelő helyre
- szöveg szempontjából fontos, hogy az adott oldalon mit akarsz átadni, mi a célod, és hogy vezeted a látogatót
- design szempontból érdemes az egymást követő elrendezésekre figyelni, bizonyos időközönként megtörni a mintázatot
- egy adott szakaszt (pl. CTA) több aloldalon is felhasználhatsz
Színek kalibrálása
- a blokkokon belül a különböző layerekre kattintva ki tudod választani, hogy melyik szín jelenjen meg
- figyelj a színek kontrasztjára, főleg, ha színes háttérre megy sötét, világos, fekete vagy fehér szöveg
- elsőre kerüld a nagyon élénk színeket nagy felületen, inkább CTA-kban, keskenyebb szakaszokban használd
- vizsgálj meg jól működő weboldalakat, hogy ott hogyan oldják meg a színek használatát
- legtöbbször új szakasz, új logikai egység új háttérszínt is jelent
Képek és háttérképek elkészítése és helyretétele
- a fotók, grafikák, logók, háttértextúrák, háttérképek adják meg a végső formáját a designnak
- ha minőségi fotóid vannak, akkor azokkal egy kezdő is profi hatású honlapot képes készíteni
- képek típusai: igazi fotók, grafikák, ezek kombinációja, stock képek, textúrák
- szinte biztosan szükség lesz képszerkesztő programra is
- amikor tervezed a szakaszokat és valahova képet szeretnél, akkor mielőtt megvan a kép, próbáld ki a szakaszt egy olyan színnel, amilyen érzést közvetíteni szeretnél vele
Most már rengeteg eszköz a kezedben van, hogy nekiállj tervezni, és szeretném, ha ezt meg is tennéd. A sok-sok tanulás mit sem ér, ha nem gyakorolsz és valósítod meg az elképzeléseidet.
Ne add fel, haladj szép sorban, inspirálódj, próbálkozz és biztos vagyok benne, hogy ügyes design tervet fogsz készíteni, amit később meg is tanulsz majd felépíteni.