Az e-Arc.hu megújulása, 2. rész: Arculat, EAS

2008. dec. 18. (csütörtök), 12:36, D. keze nyomán
Webfejlesztés, e-Arc.hu
Az előző részben az e-Arc.hu megújulásának általános hátteréről volt szó, ezúttal pedig az arculat kerül górcső alá. A cikksorozat részei:
  1. Bevezető
  2. Arculat, EAS
Az arculatot általában a fejlesztések vége felé illik létrehozni, mivel addigra többé-kevésbé átláthatóak az elvárások. A felülettervezés ráadásul nem pusztán látványról szól, hanem a használhatóságról is, így értelemszerűen a célközönséghez is igazítani kell (esetünkben a célközönség annyira heterogén, hogy ilyen jellegű "piacra fejlesztés" nem jött szóba).

e-Arc.hu: a néhai Firka arculat A gyűrött papírt idéző Firka arculatot nagyon szerettem. Eredetileg már akkor is sötét árnyalatokban gondolkodtam, aztán hirtelen beugrott az a fiatalos, világos alapon narancssárgával és feketével operáló megjelenés, és győzött a szerelem.
A sötét kisördög azonban nem hagyott nyugodni. Sokat töprengtem a lehetséges megoldásokon (általában utazás közben), de legtöbbször a finom részletek hiányoztak. Ilyenkor érdemes körbenézni az interneten, meg elkezdeni próbálgatni, és egyszercsak meglesz az üdvösség. Így ment ez itt is.

Az arculat elkészítése során alig néhány elképzeléshez ragaszkodtam. Egyrészt úgy akartam megvalósítani, hogy megragadja a figyelmet, de ne legyen feltűnő, ne uralja a képet, hanem az elején húzódjon a háttérbe, majd hosszabb távon bontakozzon ki. Másrészt minimalizmusra törekedtem. Kevés grafika, letisztult vonalak, már-már corporate jelleggel (hűvös, praktikus, elegáns hangulat - pont, mint egy finoman öltözött úriember). A klasszikus céges vonásokat ugyanakkor mindenképp melegebb színekkel akartam megbontani. Tudtam, hogy szűk fejléc lesz: a blogokban a tartalom a hangsúlyos rész, kár egyébbel nyújtani a görgetési időt. (Megjegyzem, a praktikus, ismételten minimalista felületgazdálkodás is corporate tulajdonság.) Abban is biztos voltam, hogy sötétszürkével, vagy feketével fogok dolgozni, előbbi mellett végül a megfelelő kontraszt döntött.

A kényelmesen olvasható honlap ugyanis se nem túl kontrasztos (fényességben sem, színben sem ütnek el egymástól nagyon a részei, mivel ekkor fárasztja a szemet), se nem túl "lapos", mert akkor a silabizálás megerőltető. Ennek nyomán azt is tudtam, hogy világosszürke betűvel fogok dolgozni, típusában várhatóan a sans-serif családba tartozóakkal.

A karbonszálas háttérA sötétszürke háttér már önmagában is súlyt ad, nem akartam tovább "nehezíteni" mintás háttérképpel. A laposságot ugyanakkor mindenképp bontani akartam, tehát egy, a fejlécből a háttérszínbe vesző mintát kerestem. A szénszálas anyagot idéző megoldás elég sok fordulóban született meg, végül azon kettősség miatt szerettem bele, hogy számomra a sportautók karbonkönnyítését és az igazán designos műszaki tárgyak eleganciáját ötvözötten idézte.

A fejlécben a logo betűtípusa egy art deco-art novo átmenet, és bár nem vagyok vele igazán elégedett, egyelőre marad. A menüpontok árnyékolásáról külön is szót fogok ejteni.

Az oldalkiosztás alapvetően a szimmetriára épül. Utólag jöttem rá, hogy a széles margók, a középre rendezettség a klasszikus napilapokra hajaz. Előbbiek amúgy a rövidebb sorokat, vagyis a jó olvashatóságot is segítik.

Az oldalon főként a sans-serif betűcsaládot használom (ezen belül a látogató böngészőjére bíztam, mit választ), mivel a nem talpas betűk képernyőn jobban olvashatóak. Ettől a linkek, illetve a menüelemek térnek csak el: a serif család (nagyon leegyszerűsítve a talpas betűk) elegánsabbak, ráadásul mivel a linkek megjelenítése small-caps (az összes betűjük nagy, de az első még nagyobb), ezért az olvashatóságukon ez nem ront, a jó elkülönülésüket viszont tovább javítja. Olvashatóság szempontjából a megnövelt sorköz (én általában 130-140%-ot használok), a relatívan megadott betűméret (vagyis mindenki szabadon akkorára állítja, amekkorára szeretné), illetve a megfelelően tagolt oldal (egyes tartalmi és navigációs elemek elkülönülése) is lényeges.

A szimmetriát ugyanakkor apró "egyenetlenségek" bontják: a két oldalon különböző ikonokról, finoman erre-arra tolt oldalelemekről van szó. Az ördög tényleg a részletekben lakozik.

A masszívan használt lábléc elemeiről még szót fogok ejteni.

Csinálhattam volna szokásos "felül kép, alatta menü, utána szöveg, jobb oldalon linkek sávja" típusú arculatot is. De minek? Nyilván az elterjedt módszerek nem véletlenül "esnek kézre", de hollywoodi trükknek éreztem volna az ismertségi hatásra alapozni.

A felületgazdálkodással kapcsolatban érdemes még megemlíteni a lenyíló oldalelemeket. Ilyen a fejlécben a bejelentkezés/felhasználói linkek megjelenítése (jobbra felül ajtó/emberke ikon), a kategóriák listája, vagy a helyzetérzékeny súgók az űrlapoknál (pl. regisztráció, adatmódosítás). A megfontolás mindegyiknél közös: nem zavaró módon úgy nyújtani szolgáltatást, hogy csak akkor legyen kéznél, ha tényleg szükség van rá, akkor viszont gyorsan és lehetőleg esztétikusan lehessen elérni mindent.

Furcsa mód sosem érzem késznek az arculataimat. Mindig csiszolgatnék, javítgatnék rajtuk, de úgy érzem, most eléggé közel kerültem a vágyott elképzeléshez. Ítéljetek, kedves olvasóim, az építő kritikát is örömmel fogadom!

EAS tartalomkezelő rendszer


A legszembeötlőbb természetesen a megjelenés, de ejtsünk azért néhány szót a honlap szívét-lelkét jelentő kódbázisról is.
Az e-Arc.hu alatt a saját fejlesztésű EAS tartalomkezelő rendszer (content management system, CMS) dolgozik. E moduláris, erőforrás-takarékos program első változata sok hónap fejlesztéssel kelt életre. Meglehetősen büszke vagyok rá: a tervezésétől kezdve olyan jól sikerült, hogy számtalan alkalommal előre nem látható problémákra is szinte módosítás nélkül megoldást nyújtott, illetve például a novomove.com alatt is ez dolgozik.

A változásokat bemutató írásaim harmadik részében az igazi csemegék kerülnek terítékre, tartsatok velem akkor is! (Rövidesen...)