Mind tudjuk, hogy egy honlap felépítése néha idegtépő lehet. A kivitelezés mellett van egy valami, ami mindennél fontosabb: a webhely látványterve (layout). A elrendezés azért olyan fontos, mert egy keretet alkot, amely strukturálja a webhelyet és így könnyebb navigálni, plusz a tartalom is jobban érvényesül. Ha sok időt töltesz online, akkor észreveheted hogy az oldalak többsége hasonlít egymáshoz (főleg az elrendezésük szempontjából).
Ez nem feltétlenül rossz dolog. Ezek a maroknyi webhelyek, amelyeknek elrendezésük szabványos, és funkcionális, a felhasználó automatikusan megérti, hogyan működnek.
Csak azért, mert a keretük hasonló, ez nem jelenti azt, hogy minden webhely ugyanúgy néz ki. A következőkben hét elrendezést fogunk megvizsgálni, amelyek hasznosak, és sokoldalúak, ahhoz, hogy alkalmazkodjanak a különböző igényekhez és vizuális stílusokhoz. A későbbiekben jó kiindulási pontok, ha új weblapot szeretnél vagy csak feldobnád a régit.
1, Freeform Grid
A legtöbb honlap tervezésnél rácsot használnak, erre utal a névben található grid elnevezés, ami rácsot jelent. Segít a távolság és irány kérdésében. A rácsok javítja a terveket, de néha túl korlátozóak.
Ez az a rész, ahol egy szabálytalan alakú rács jól jöhet. Ezeket általában nem határolja semmilyen vonal vagy konténer, és az egyik fő jellemzője, hogy a sok fehér hely helyett egy tiszta modern megjelenést kapunk. Ez egy laza, rugalmas szerkezet, amelyet lehet igazítani, hogy illeszkedjen a webhely tartalmába.
Ahelyett, hogy csak az egyik típusú rács egységet használod, próbáld ki, hogy a többi elrendezéssel kevered, így különböző méretű és formájú puzzle darabokat kapsz.
Az első példa erre a honlap koncepcióra Jonas Emmertsen és Henrik Ellersgaardtól, egy már lefektetett rács (lásd a bal oldali képen).
Andrei Hancu által létrehozott online bútorbolt a geometriai formákon alapul, és a célja, hogy az elrendezés ne legyen tökéletes. Különösen az oldal felső felében, mintha a termékek lebegnének, ezeket az élénk színekkel teszi még gyönyörködtetőbbé.
Az alkotóelemek és a változó rácsok, amelyek különböző alakúak és méretűek, igazán érdekes vizuális elrendezések.
A Basic website pedig nem csak a színeket, hanem a mintázatokat is keveri.
2, Fixed Sidebar
A navigáció fontos része minden websitenak. A menü az első dolog, amit a legtöbb felhasználó keres. Az egyik leggyakoribb módja, hogy a menü látványa megmaradjon az a fix sidebar. Ez azt jelenti, hogy miközben te görgeted a weboldal tartalmát, a menüsor mozdulatlan marad és mindig látható. Az oldalsáv is tartalmazhat tartalmat, főleg a social mediás elérhetőségekre gondolunk, vagy egyéb információkat, amelyekről úgy gondolod, hogy elengedhetetlenek.
3, Text based
Az egyszerű, letisztult weboldalakhoz, néhány tervező főként a szöveges alapú tervezést választja. Ezt a fajta kialakítást, tipikusan színes háttérrel világítják ki. Az általános hatás: a tiszta és minimális keveredése. A tipográfia jellemzően a nagyobb részeken látható, de a szövegek elhelyezésével mégis akadályozzák azt a látszatot, hogy lapos és érdektelen legyen.
4, Two-columns
Azaz két oszlopos elnevezés, ahol jobban oda kell figyelni a részletekre. Fontos, hogy előre megtervezd a tartalom hogyan fog megjelenni. A sokoldalú keretnek hála, bármit kihozhatsz belőle. Lehetővé teszi, hogy kihasználd a vízszintes és függőleges elhelyezések adta lehetőségeket, mely rétegezéssel és átfedéssel egy jól szervezett kollázst alkothat.
5, Arranged Around Focal Point(s)
A legtöbb tervezésben van egy fókuszpont, ami alapján kialakítanak egy honlapot a tervezők. Ez lehet egy kép, egy tipográfia vagy bármi, amiből kiindulhatnak. Számunkra trükkös lehet, azonban akik wedesignal foglalkoznak tudják, hogyan használják hatékonyan a nézőpontokat és hogyan érdemes elhelyezni őket. A következőkben láthatunk néhány igen kreatív és hatékony ötletet.
Vegyük figyelembe, hogy egy honlap célja az, hogy bemutassa a terméket és a figyelem középpontjába helyezze.
6, Headline + képgaléria
Ez a layout a szöveg alapú és rácsos elrendezés kombinációja. Népszerű a portfóliók és az e-kereskedelmek körében, általában valamilyen címsort tartalmaz a lap tetején, vagy egy rólunk típusú üzleti leírást. Úgy nézhet ki mint egy galéria a képek miatt, általában válogatott vagy kiemelt munkák szerepelnek.
7, Moduláris
Az utolsó elrendezési kategória az, amely az egyik legnépszerűbb hála a Google-nak. A moduláris elrendezés (kártyák vagy blokkok elrendezése)más, mint a tipikus rácsok elhelyezése, itt minden terület vagy hely, ha úgy tetszik kitöltésre kerül. Kreatív elrendezés az átláthatóságért, a pasztell színek letisztult használatától át, az élénk erősebb színek alkalmazásáig, minden előfordulhat.
Andrei Hancu által létrehozott online bútorbolt a geometriai formákon alapul, és a célja, hogy az elrendezés ne legyen tökéletes. Különösen az oldal felső felében, mintha a termékek lebegnének, ezeket az élénk színekkel teszi még gyönyörködtetőbbé.
Az alkotóelemek és a változó rácsok, amelyek különböző alakúak és méretűek, igazán érdekes vizuális elrendezések.
A Basic website pedig nem csak a színeket, hanem a mintázatokat is keveri.
