Keresés

Menü

A honlapok látványterve természetesen tükrözze a tulajdonos ízlésvilágát, de nagy hibát követ el az, aki laikusként úgy érzi, ő mondja meg a honlapkészítő cég munkatársainak, milyen legyen a weboldala. A kérdés ugyanis, nem ilyen egyszerű


A jó webdesign 9 titka – 2. rész

2014.08.21.

A jó webdesign 9 titka – 2. rész

A honlapok látványterve természetesen tükrözze a tulajdonos ízlésvilágát, de nagy hibát követ el az, aki laikusként úgy érzi, ő mondja meg a honlapkészítő cég munkatársainak, milyen legyen a weboldala. A kérdés ugyanis, nem ilyen egyszerű. Tudom, láttál már sok jó honlapot, kialakult a fejedben, milyen lesz a tied. De nem eszik ilyen forrón a kását, nem véletlenül tanítják egyetemen a weboldalkészítést és a marketinget. Ha valóban igényes, és üzlethozó honlapot szeretnél, rengeteg dolgot tudnod kell. A jó webdesign 9 titka sorozatunkban azt próbáljuk bemutatni, mennyi mindenre kell figyelni akkor, ha az ember elkészítteti honlapja grafikai tervét. 


 
 
Ez a cikk a sorozat második része, kattints ide, és mielőtt ezt a részt elolvasod, olvasd el az első részt, melyben leírtuk az alapokat! Ha szeretnéd, hogy a honlapkészítő cégeddel szemben szakértő marketinges csapat képviselje a te érdekeidet, keress meg bennünket ide attintva! 
 

4 – Design to build

Amióta a webdesignerek áttértek a CSS layoutokra, sokkal könnyebbé tették saját helyzetüket, de néha még mindig nehéz belegondolni a weboldal felépítésébe, ha az ember még mindig a Photoshoppolásnál tart. A következő dolgokat célszerű észben tartani ilyenkor:
 

Meg lehet-e valósítani?

Sokszor előfordul, hogy találunk egy nekünk tetsző betűtípust a Photoshop kínálatában, de meg kell bizonyosodnunk róla, hogy az valóban egy standard HTML betűtípus-e valójában. Azon is érdemes elgondolkodni, hogy a fixen 1100px széles design hogy fog viselkedni, ha átméretezik a böngészőt. És nem csak ezeket érdemes megfontolni:
 
  • Mi történik átméretezéskor?
  • Ismétlődő háttérre van-e szükség? Hogyan fognak azok működni? Maga a design középre vagy balra van-e igazítva? 
  • Gondoltál-e  a responzív nézetre, a mobil eszközökre? 
  • Meg tudod-e valósítani az elképzelésedet?
  • Nem túl bonyolult az, amit létre akarsz hozni?
 
Még a CSS pozícionálásnál is előfordulhat, hogy a vertikális elrendezés létrehozása néha nehézkes, ezért érdemes elkerülni. Az is megeshet, hogy apróbb módosításokkal sokkal egyszerűbben létre tudod hozni a design, csak előtte gondold végig a folyamatot.
 
Ha van egy bizonyos objektum oldaladon, legyen az egy doboz vagy egy kép, próbáld meg különböző helyeken elhelyezni a designban, lehet, hogy sokkal jobb helyet találsz neki, amit aztán CSS-ben könnyebb lesz megoldani. Ha van három egység, amelyek fedik egymást, lehet, hogy nehéz lesz őket leprogramozni, azonban, ha ezt a három elemet elkülöníted egymástól, lehet hogy sokkal egyszerűbb dolgod lesz. Neked kell megtalálnod, hogy mi néz ki jól és mi az, amit egyszerű összerakni, majd mérlegelned kell, hogy mennyire szeretnéd megnehezíteni saját dolgod.
 

Egy nagyobb terjedelmű oldalon vajon le tudod egyszerűsíteni az egyes elemeket?

Régebben az oldalról történő letöltés gombjaként egy .jpeg képet használtunk, de egyszer azt CSS-szel helyettesítettük, és azóta nem is tértünk vissza a .jpeghez, és már minden gombot így oldunk meg. Persze ez azt jelenti, hogy nem lehet olyan rugalmas kezelni a gombokat, mint a kép alapúakat, de rengeteg időt spórolunk meg azzal, hogy nem hozunk létre több tucat képecskét.
 

5 – Tipográfia

A szöveg a design egyik legalapvetőbb eleme, ezért mindig nagyon fontos jó betűink stílusát megválasztani. Hogy miért?
 
Betűtípus – Minden betűtípus hordoz magában valamilyen jelentést, benyomást kelt. Persze ez függ az oldal képeitől, a hozzá választott színektől, de önmagában már a betűtípus is sokat árul el, hiszen valamelyik modern, valamelyik retro. Válaszd ki az oldaladhoz illőt.
 
Betű méret – Évekkel ezelőtt a kis betűméret volt a trend, de ma már szerencsére sokan rájöttek, hogy a betűket nem csak látni, hanem olvasni is kell. Bizonyosodj meg róla, hogy betűid jól olvashatók, nem túl kicsik, ugyanakkor nem is túlságosan nagyok. Használj fő- és alcímeket, amelyeknek különböző méreteket adsz.
 
Sorköz – Ahogyan azt már fentebb is említettük, a sorköz nagyon fontos az olvashatóság szempontjából. Nem csak a sorközre, de a betűközre is érdemes odafigyelni, ami ugyan kevésbé fontos, de itt sem szerencsés, ha összefolynak betűid.
 
Sorhosszúság – Erre nincs konkrét előírás, de a sorokat sosem érdemes túl hosszúra engedni, ugyanis így nehezebb lesz őket elolvasni, márpedig ha leírsz valamit, akkor biztosan szeretnéd, hogy minél többen olvassák. A rövidebb bekezdések mindig jobban működnek, mint a hosszú bekezdés nélküli szövegek (gondolj csak az újságokban látható tördelésre, aminek célja az olvasás megkönnyítése).
 
Szín – Ismételten az egyik legfontosabb dolog. A szöveg színét érdemes úgy megválasztani, hogy ne olvadjon a háttér színébe, jól olvasható legyen és mégse golyózzanak a szemeid pár sor után. Jártál már fekete hátterű oldalon, ahol végig fehér a szöveg? Pár sor után megfájdul az ember szeme az ilyenektől és minden pislogás után csak a szövege látja majd mindenhol. Ezt érdemes elkerülni.
 

Felhasználói élmény

A webdesign sajnos nem csak a szép képekről, tökéletesen megtervezett menükről, jó grafikai megoldásokról, hanem a használhatóságról is szól. Már írtunk a használhatóságról például a navigáció és a szöveg részben, de jöjjön még három fontos szabály:
 

Ragaszkodj ahhoz, ami bevált

Vannak dolgok, amik úgy működnek, ahogy azt az emberek elvárják, úgyhogy nem érdeme összezavarni őket. Például, ha egy szöveg alá van húzva, az egy linket takar, de ha te valamilyen más funkcióval látod el, az zavaró lehet. Persze vannak konvenciók, amelyeket néha a szőnyeg alá söpörhetsz, de egy weboldal akkor jó, ha olyan, amilyennek az emberek várják azt.
 

Vajon hogyan viselkednek majd a felhasználók?

A prototyping egy általánosan használt eszköz a webdesignerek körében, hogy azok valójában ki is tudják azt próbálni. Erre azért van szükség, mert rengetegszer csak akkor jövünk rá egy design hibájára, amikor ki is próbáljuk. Hiba no, teszt a lelke mindennek.
 

Felhasználói folyamatok

Ezt akár az előző ponttal egybe is írhattuk volna, de végül is nem ugyanarról van szó. Gondolod végig azokat a tevékenységeket, amiket egy felhasználó az oldaladon végezhet. Hogyan jut el A-ból B-be, mennyire akarod megkönnyíteni feladatukat. Ez a teljesen egyszerű feladatok elérése is (Webshop, Impresszum), vagy hasznos funkciók, mint a Kereső könnyű megtalálása is lehet. 
 
A sorozat harmadik részét ide kattintva olvashatod, de előtte ne felejtsd el +1-ezni ezt a részt is! :) 
 

Szerző: Máté Balázs, online marketing tanácsadó

címkék: Honlapkészítés
Minden posztnál feltűnik a lila madár

Miért van ott mindenhol ez az idegbajos lila madár?

2017-02-20

Ez az idegbajosnak tűnő lila madár szinte minden Facebook poszt alatti kommentnél feltűnik. Olvasóink is kérdezték, hogy mégis mit keres ott ez a madár. A most következő cikkben elmondjuk nektek! 

Hogyan tervezzünk sikeres email marketing stratégiát?

A sikeres email marketing stratégia alapjai

2017-02-20

Ejtsünk néhány szót az igényes email hirdetésekről, mint a sikeres marketing stratégiák egyik alapvető eszközéről.

Hírlevél feliratkozás

Tudományos marketing tippek, gyakorlati tapasztalatokon próbálva. Iratkozz fel most!



Tanfolyamok