Webdesign inspirációk 2016-ra

Szerző: Csorba Zsanett,
Untitled design (33)

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).

freeformgrid

 

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é.

 

freeformgrid2

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.

freeformgrid3

A Basic website pedig nem csak a színeket, hanem a mintázatokat is keveri.

freeformgrid4

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.

5
6
7
8
9

 

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.

webdesign

11-1-662x1136

 

webdesign2

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.

twocolumns

twocolumns1

twocolumns2

twocolumns3

 

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.

19-662x365

 

20-662x365

 

22-1-662x2069

 

23-1-662x1510

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.

25-1-662x473

26-1-662x339

27-1-662x1493

28-1-662x958

 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.

29-1-662x772

 

30-1-662x602

 

34-1-662x2454

 

Amennyiben hasznosnak találtad ez a bejegyzés és a jövőben is szívesen olvasnál hasonlókat,
csatlakozz a Facebook csoportunkba!

Is your website layout doing more damage than you think?


Ajánlott bejegyzések