Amióta részt veszek a webdesignban, tele vagyok a fejemmel, hogyan lehet minden weboldalt rendhagyóbbá tenni, mint elődje. Ebben a cikkben adok néhány tippet, amelyek inspirálhatnak téged is.

webdesignt

Teljes képernyő

A FarFaar kliens megbízása nemrég került az asztalomra. A téma mellett az ügyfél sok szép fotóval is rendelkezésünkre bocsátott, amelyeket kár lenne nem használni.

Mivel egy bemutató egyetlen oldalról volt szó, nem volt sok szöveges tartalom. Ezért úgy döntöttem, hogy a weboldalt elsősorban fényképeknek szentelem, amelyek közelebb hozzák az embereket ahhoz az élményhez, amelyet az ügyfél kínál az ügyfeleknek.

Egy pillanatig sem haboztam, hogy ez a helyes döntés. Amint megterveztem a weboldalt, felmerült a kérdés: Mi következik? Hogyan adhatok többet?

Parallaxis

Világos választás volt a népszerű parallaxis tekercs effektus, amelyet hosszú ideig szerettem volna megpróbálni megtervezni.

A Parallax effektust úgy hozzuk létre, hogy a web előterében lévő objektumok görgetés közben gyorsabban mozogjanak, mint a háttér.

Agyunk tehát a tartalmat olyan objektumként érzékeli, amely közelebb áll a szemünkhöz, mint a háttér, ami egy 3D hatás benyomását kelti. Bár tudjuk, hogy a képernyő lapos.

Két dologra van szükség a parallaxis létrehozásához. Az első egy olyan fotó, amelyet rétegezni lehet úgy, hogy a végeredmény értelme legyen, és olyan szöveges tartalom, amelynek illeszkednie kell a fotó kompozíciójába.

Egy fotó rétegzése, a szöveg illesztése és maga a hatás létrehozása időbe telik, de a végeredmény megéri.

Rendben, tehát a webhelyet átalakítják, parallaxist hoznak létre. Ismét felmerül a kérdés: Van ennek némi hozzáadott értéke?

Ezúttal böngészem az internetet, és azon gondolkodom, mi hiányzik még neki. Szünetet tartok a Galéria rész felett. ahol egy gyönyörű bemutatkozó fotót látok egy fiúval a tűz mellett. De nem hallok tüzet.

Abban a pillanatban eszembe jut, hogy egy recsegő tábortűz hangját adom a galériához, ami elmélyíti a fotók lapozgatásának élményét. Természetesen bármikor "kiolthatja".

Tipográfia

Nagy betűtípusok, üres területek, egyszerű vektor elemek, képek csak szükség esetén (és esetleg egyáltalán nem). Ha az ügyfél tartalma és kommunikációja megengedi, miért ne?

Az ilyen webes koncepciókban azonban nagyon fontos a kompozíció. Ez, a színpalettát is beleértve, eldönti, hogy fog kinézni a végleges kimenet.

És ha már a színekről beszélek, akkor nagyon ízléses vagyok a kissé sötét weboldalakkal kapcsolatban.

Nem unalmas fehér háló és sötét betűtípus, hanem fordítva. Természetesen nagy hangsúlyt kell fektetni arra, hogy a háttér és a szöveg kontrasztja elegendő legyen.

Dobozok

Néha, amikor meghallottam a szómezőket, elképzeltem egy sablont. Čaky csapattárs meggyőzött arról, hogy a webes projektek szerint másképp is lehet.

Amikor a Lalala Kidscafé webhelyet veszem példának, a szokásos dobozos részeket látom, de nem szabványosan feldolgozva.

Amikor megszabadulunk a tipikus sablonkompozíciótól, hangsúlyozzuk a hátteret és egy grafikai elem, például egy minta beépítését, használhatjuk a dobozokat a webes sablon nélkül.

Végül, de nem utolsósorban olyan weboldalakat is felvennék, mint e-boltok, utazási irodák, ingatlanügynökségek, és minden olyan webhelyet, amely sok tartalmat tartalmaz, és a felhasználó számára könnyen érthetőnek kell lennie.

Ez azonban egy külön cikk témája, ezért valamikor legközelebb.

Egy kis inspiráció a vége előtt

Összetétel, színek, betűtípusok, képek, grafikai elemek, effektusok. Mindezek az elemek alkotják a web nevű készletünket.

Kreatív webes projektek

Az egyes elemek kiválasztásakor néhány webhely segíthet nekünk, ami megkönnyíti számunkra, hogy melyik irányba haladjunk.

Az elsők között említeném az Awwwards oldalt, ahol számos kreatív webprojektet talál a világ minden tájáról.

Előnye, hogy az ott talált összes webhely már kódolt és fut. Tehát nincsenek miniatűrök a Pinterestről vagy az Instagramról, ahol rengeteg ihletet találhatunk, de senki sem tudja, hogy melyik állítható elő valóban fejlesztői szempontból.

Színpaletták

Nagyon szeretem a color.adobe.com webhelyet használni a színek kiválasztásakor. Az Adobe elvtársai hozták létre ezt a tökéletes oldalt, amely segít nekünk létrehozni egy kiegészítő színű álom színpalettát, vagy kiválasztani a több ezer színpaletta egyikét kollégáinktól a világ minden tájáról.

Betűkép

Ugrás a betűkészletre. A megfelelő betűtípus kiválasztása az egyik legfontosabb döntés a weboldalak létrehozásakor. Nem engedhetjük meg azonban, hogy a webhely látogatója ne olvashasson szöveget rosszul megválasztott vagy túl kicsi betűtípus alapján.

Ne feledje, hogy az internet nem tartalmazhat rengeteg különböző betűméretet vagy kivágást. Mindent mértékkel.

A minőségi ingyenes betűtípusokhoz és ékezetekhez inspirációt lelhet Lukáš volt kollégánk cikkéből.

Fényképezés

Fotókkal és grafikákkal segítjük a látogatókat a webes tartalmak könnyebb és gyorsabb megértésében.

Tetszik, amikor nem kell banki fotókat használnom egy weboldal létrehozásakor, mert. de néha nincs más választásunk. Ezért dobok néhány forrást ide az oldalra, ahol ingyenes fotókat, vektorokat vagy ikonokat találhat a világ találmányából:

Mit ne felejts el

Végül írok még néhány sort arról, mire kell figyelni a koncepció kiválasztásakor és a weboldal tervezésénél.

Nekünk, tervezőknek szem előtt kell tartanunk, hogy manapság az emberek jórészt mobiltelefonról érkeznek a webhelyekre. Tehát először a mobil tervezését? Személy szerint ez megkönnyíti a mobil verziót az asztali verzió után.

Bár a tervezés nagyon fontos, és néha jó repülni benne, mindennek meg kell felelnie a szabályainak. A tervezésben rendnek kell lennie, és mindennek értelme van. Mi, tervezők és fejlesztők egyaránt.

Nem akarjuk azonban, hogy fejlesztőtársaink ferdén nézzenek ránk, mert olyan szakaszokat terveztünk, amelyeken keresztül hosszú órákat kell töltenie.

Természetesen az export is fontos, amely mindent eljuttat a fejlesztőhöz. Sok sikert a következő projekthez.:)