A trendek azt mutatják, hogy azért sokakban felébredt már ez az ösztön. Hogy miért? A látogató (jó esetben) szépen leér az oldal aljára, ahol vége mindennek, nincs több tartalom, és valószínűleg nem is navigál tovább. Elveszítjük. Ezekkel a megkapó, tartalomdús, figyelemfelkeltő láblécekkel ezeket az embereket tudjuk megnyerni: fenntartják a látogató érdeklődését, holott az már azt hitte, már látott mindent (hisz az oldal aljáig leért). De hogy mire figyeljünk, amikor merész footer dizájnba fogunk?

A látogató a végére már nem figyel

Amikor megnyitunk egy weblapot az első dolog, amit meglátunk és figyelünk rá, az a bal felső rész: a header (fejléc), a logo, a menüsor és a tartalom kiemeltebb elemei. Ez a rész kapja a legnagyobb hangsúlyt a legtöbb webdizájnban, hiszen ez kerül először a látogató szeme elé. Ahogy görget lefelé emberünk, veszít figyelméből, és nekünk kell segíteni ezt fenntartani.

Meglátják egy cikk címét, amit el akarnak olvasni. Vagy látnak egy linket, amire rá akarnak kattintani. Vagy csak rájönnek, hogy itt nincs semmi érdekes. Pont ezek miatt a látogatók nagyon ritkán jutnak el a láblécig. Ha van valami az oldaladon, amit szeretnél mindenkinek megmutatni (ilyen például a menü vagy egy-egy figyelemfelhívó rész), akkor azt az oldal tetején kell elhelyezni, hiszen ott mindenki látja.

A footer nem navigációs sáv

Mint az az előző részben kiderült, a footer-t nem kezelhetjük szerves részeként a dizájnnak, mert nagyon kevesen figyelnek rá (kivételt jelentenek azok az oldalak, ahol egyből látszik a footer és nagy hangsúlyt is fektetnek rá). Ne tegyünk kizárólagosan ide szerves elemeket: ha például csak a láblécben jelenik meg a “Kapcsolat” link, akkor szinte biztosak lehetünk benne, hogy azt a látogatók nem találják meg, és igen lecsökken az esélye, hogy felkeresnek minket.

Persze nem azt mondom, hogy ne tegyünk elérhetőséget a láblécbe. Kiírhatjuk szövegesen is, illetve linkelhetünk, de csakis azután tegyük ide, hogy a linket (avagy a szöveget) megjelentettük hangúlyosabb területen, pl. a fejlécben. Ha a tetején és az alján is ott az elérhetőségünk, az szépen keretbe foglalja az oldalt, átláthatóbb és felhasználóbarátabb.

Legyen érdekes a lábléc!

A lábléc talán arra a legjobb, hogy meglepjük a látogatónkat. Valami olyannal, amire nem számít. :) El lehet felejteni, hogy a lábléc csakis a copyright és a kapcsolat információk tárolására szolgál.

Néha ámulva nézelődök a neten és látom, egyes dizájnerek mennyire kreatívan használják ki ezt a területet. Láttam már itt vicces idézeteket, érdekes linkeket, linkfelhőt, flickr galériát, könyvajánlót… és akkor még egy oldal tudnék írni, mennyi mindent lehet ide pakolni. Azért is lehet érdemes ilyen láblécen elgondolkodni, mert lassan “hozzászoknak” az emberek, hogy itt kapnak valami kis pluszt, és ha leértek az oldal aljára, kevésbé fogják a vissza gombot választani valamelyik érdekes linkünk helyett.

DE! Ne a láblécben legyen az oldal fő navigációja!! Tedd érdekessé, de ne alapvető oldalelemmé. Csináld úgy, hogy az oldal tartalma és használhatósága a footer nélkül is megállja a helyét!

Példákat szeretnél?

Találtam egy pár gyűjteményt a legjobb láblécekről… Nagyon jók inspirációnak. Hamarosan azt hiszem én is elgondolkodok valami hasonlón ;)

Itt 25 ütős footer design-t látsz
Itt pedig másik 50-et a legjobbak közül

Drop Shadow – Adjunk a képnek árnyékot

A lényeg, hogy egy nagy, árnyékkal ellátott képet beteszünk háttérképnek. Mivel az IE6 nehezen kezeli az átlátszó png-t, ezért érdemes testreszabott gif-et használni. Minél nagyobb a háttérképünk, annál nagyobb képeknél lehet használni. A példában egy 1000×1000 pixeles kép is árnyékkal jelenne meg.

HTML

<img class="shadow" src="sample.jpg" alt="" />

CSS

img.shadow {
   background: url(shadow-1000x1000.gif) no-repeat right bottom;
   padding: 5px 10px 10px 5px;
}

Dupla keret

Az egyik legegyszerűbb és legelterjedtebb technika. Háttérszínt és bordert, azaz keretet adunk a képnek

HTML

<img class="double-border" src="sample.jpg" alt="" />

CSS

img.double-border {
   border: 5px solid #b4c842;
   padding: 5px; /*Belső keret mérete*/
   background: #fff; /*Belső keret színe*/
}

Vízjelezett kép

Mintha csak photoshoppal raktuk volna rá a vízjelet. Az IE6 hibájának köszönhetően nem átlátszó png-vel oldottam meg, hanem egy jpeg kép css átlátszóságával játszottam. Szerintem üt :)

HTML

<div class="transp-block">
   <img class="transparent" src="sample.jpg" alt="" />
</div>


CSS

.transp-block {
   background: #000 url(watermark.jpg) no-repeat;
   width: 420px;
   height: 177px;
}
img.transparent {
   filter:alpha(opacity=75);
   opacity:.75;
}

Kép felirattal

Áttetsző csík a kép alján, rajta a felirat – akár keresőoptimalizálás szempontból is tökéletes lehet. Egy hátránya van, hogy nem lehet tetszőleges méretű képre alkalmazni, annak előre tudni kell a méretét. De egyébként mutatós :)

Budapest – The dark city

HTML

<div class="img-desc">
   <img src="sample.jpg" alt="" />
   <cite>Budapest - The dark city</cite>
</div>

CSS

.img-desc {
   position: relative;
   display: block;
   height:177px;
   width: 420px;
}
.img-desc cite {
   background: #111;
   filter:alpha(opacity=55);
   opacity:.55;
   color: #fff;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 400px;
   padding: 10px;
   border-top: 1px solid #999;
}

A képeket acs.com-tól loptam.

Persze akinek van Gmail fiókja, az valószínűleg ugyanúgy észrevette, mint én, és bizonyára hasonlóan örül is neki. Akinek nincs, az meg gyorsan regisztráljon magának, mert ezerszer jobb, mint az összes másik netes levelezőprogram. Nagy a tárhely, gyors és egyszerű a kezelés, és nem nyomja tele reklámmal a leveleket. És most már szép is :)

Aki meg kíváncsi, milyen témák vannak, nyomjon tovább!

És akkor most döntsek, hogy melyiket válasszam :)

Kör alakú ikonok

Természetesen nem csak narancs színben érhetőek el, tessék rákattintani az ikonokra, és meg lehet nézni a szélesebb választékot!

Szögletes ikonok

Csilli-villi ikonok

Különleges ikonok

Tessék hát megnézni, ha másért nem, hát inspirációért a saját weboldalhoz. Nézd meg a színeket, a betűtípusokat, a szép logókat, az egyedi layoutokat. És készülj fel a hossssssszzzú görgetésre.

10. Ha netalán tán háttérzene van az oldaladon, akkor azt legalább úgy csináld meg, hogy a látogató kikapcsolhassa azt, de JOBBAN TESZED, ha úgy csinálod meg, hogy a zene ne induljon el automatikusan. Nagyon sokan munkahelyről neteznek, és igen ciki, amikor hirtelen valami langyi zene megszólal, és a főnök bámulja kedves beosztottját, hogy mi lehet a gond. Ne okozzunk senkinek ilyen kellemetlen élményt. 

11. A szöveg alapú navigáció jobb, mint ha képekre írjuk az adott menüpont szövegét. CSS-sel már nagyon szépen meg lehet oldani a szöveg alapú navigációt is, gyorsabb is, mint ha minden menüpontnál meg kell várni, míg betölti az ún. hover képet. Persze használhatunk képeket (háttér, listakép stb.), de okosan tegyük. A dizájn inkább a tartalom jó elhelyezéséről szóljon, mint hogy telepakolgassuk képekkel az oldalt.

12. Inkább legyen egy jól struktúrált oldaltérképed, mint hogy extra bonyolult több szintű lenyíló menüket használj. Azok sosem működnek igazán jól. (Tisztelet a kivéltelnek. Nagyon ritka.) Ezek a több szintű bonyolult menük inkább azt mutatják, hogy aki kidolgozta az oldal felépítését, az nem is dolgozott vele igazán. 

13. Ha az oldaladnak szüksége van kereső funkcióra, akkor nyugodtan előről kezdheted, és visszaolvashatod az előző pontot. Az az oka. A keresők hasznosak, ez tény, és néhány oldalon igen fontos szerepet játszik, de ha egy átlag oldalon a látogató csak ezzel találja meg, amit akart, akkor az azt mutatja, hogy nem jó az oldal struktúrája. Ha logikusan van felépítve a navigáció, akkor (ha ott is van az opció, mint nálam), nem fogják használni a keresőt. Hagyjuk meg azért a lehetőséget azoknak, akik mélyen bele akarnak menni a jó sok tartalom mélyébe.

14. Mennyi idő alatt töltődik be az oldalad? Még ha gyors kábele vagy DSL-e van a látogatónak, akkor is lehet türelmetlen, mert hozzászokott a gyors betöltéshez. A kezdőoldaladat ne bonyolítsd túlságosan, ne pakold tele felesleges elemekkel, alkalmazásokkal. Azok csak növelik a betöltés idejét. 

15. Nyilvánvaló dolog, de sok (köhöm) dizájnernek mégsem: ne rejtsük el a cél felé vezető utat! Mire gondolok? A kezdőoldalon jelenjen meg minden olyan információ, amivel a látogatót el tudjuk oda juttatni, ahol neki is és nekünk is jó. Ha vannak kiemelt funkcióink, mint a hírlevélre feliratkozás, az online rendelés, a szállásfoglalás, akkor azt tegyük a látogató orra elé, hadd lássa, és érje el akár 1-2 másodpercen belül. 

16. Ha van videó is az oldaladon, attól nem kell megkérdezned a felhasználót, hogy milyen sávszélessége van, és hogy milyen formában szeretné azt letölteni/megtekinteni. Real Player, 100K, Windows Media Player, Quicktime, WMV, 300K, AVI, Kábel, DSL, Modemes? NEM KELL, KÖSZI! Adj neki Flash videót. (Igen, flash. Erre pl. tökéletes :)) Számtalan videó megosztó van már a youtubetól kezdve a neten, ahová a legtöbb formátumú fájlt fel lehet tölteni, és azt meg tudja nézni bárki. 

17. Ha kis képeid vannak, amik lényegében linkek, akkor legalább valahová köré írd ki, hogy az hová visz. Ha a látogató csak akkor találja ki, hogy az egy link, ha felé viszi az egeret, akkor nem nagy az esélye, hogy azt gyorsan meg is találja. Csalódik egyet és megnyomja a VISSZA gombot. 

Talán most ennyi. Hirtelen felindulásból. :) Úgy összességében, ami engem legjobban idegesít, ha valaki úgy tervez és épít weboldalt, hogy meg akarja mutatni, mit tud, és beveti az összes létező technikát, amit csak ismer. Kezdve a flash, java, ajax alkalmazásoktól… Nem kell bizonyítanod minden áron. Csak akkor vesd be ezeket az eszközöket, ha az általa létrehozott vagy segített opció üzleti előnyt jelent. NEM MAGAMUTOGATÁS. Üzleti előny. Pont.

Google Képkereső

Google Képkeresője talán a legismertebb és leghasználtabb. Gyorsan keres, és több ezer találatot ad. Engem mondjuk egy kicsit zavar, hogy a képekre kattintva nem azt hozza fel nagyban, hanem a forrás oldalát, a fejlécben pedig a megtalált képet. Keresőjében ugyanakkor van lehetőség különböző szűrésekre, pl. méret szerint, fájltípus szerint (JPG, GIF, BMP, PNG) vagy akár szűkíthetjük színesre és fekete fehérre is. Új funkcióként megjelenik az arckeresés, melyet ha bejelölünk, akkor emberi arcokat fog kihozni találatként. Itt pl. azokra a nagy méretű arcképekre kerestem, melyek JPG formátumúak, fekete-fehérek (szürkeárnyalatúak), keresőszó pedig a Zina volt (én nem vagyok benne :P)

Yahoo! Image Search

A Yahoo képkeresője a Google-éhoz hasonlóan szintén a frame-es megoldást használja, mikor a találatként megjelenített képre kattintunk. Lehetőséget ad arra, hogy egy ismerősünknek elküldjük a képet emailben (Mail to Friend). Itt is van lehetőség méret, ill. szín szerinti keresésre. Kedves funkció, hogy méretből ki lehet választani a Wallpaper-t is, mellyek akkora méretű képeket hoz találatnak, mint a legtöbb monitor (bár nem tudom mikor láttam utoljára 640*480 felbontásút :)

Ask Images

Az Ask képkeresője kedvesen segít a keresésben, ahogy a szót írjuk be, különböző ajánlatokat ad nekünk. Ha megvannak a találatok, akkor javasol még néhány hasonló témakört is, ha inkább szélesebb vagy szűkebb skálán szeretnénk keresni. Egyes kereséseket kiegészít Wikipedia idézetekkel, Youtube videókkal is.

MSN Live Image Search

Szép felülettel mutatkozik be, a találatokat stílusosan jeleníti meg. Van ún. Scratchpad funkciója, ahová a kedvenc találatainkat be tudjuk húzni. Szem előtt vannak a keresési opciók finomítására alkalmas lehetőségek, mint a méret (itt a desktop a legjobb, a saját képernyőnk felbontásához keres , a tájolás, a szín. Kereshetünk a fotók és az illusztrációk között külön is. Itt is van beépített arckereső, ha híres emberre keresünk, akkor megjeleníti a lehetőséget, hogy hasonló emberek képeit is megnézhessük. Talán a legjobban témába illő képeket találja meg. És fontos, nem rejti el a találatokat, ha rákattintok egy képre, ott maradnak bal oldalon.

Picsearch

A PicSearch ezt mondja magáról, hogy több, mint 2 milliárd képet indexál. A találtatokat a Google keresőjéhez hasonlatosan frame-ként mutatja meg az eredeti forrás oldallal együtt. Néha igen érdekes találatokat ad ki. Beállításai közt van egy opció az animációk keresésére, maximum ezzel tűnik ki az oldal.

Exalead Image Search Engine

Az oldalon módosíthatjuk a hátteret fehérre vagy feketére. Kereshetünk kicsi és közepes méterű képeket, szintén van arcszűrő, egész jól vizsgázott egy kutyafajta nevére keresve. Itt is van lehetőség a fekete-fehér képek keresésére. Itt van link közvetlenül a képre, nem csak a weboldalra, ahonnan jön.

Flickr

Nem klasszikus képkereső, hanem drága embertársaink által feltöltött képeket találhatjuk itt. Mivel sokan szeretnék megmutatni magukat és tehetségüket a világnak, ezért találhatunk itt jó képeket. Fontos tudni, hogy sok kép copyright-os. A keresési találatokat nézhetjük részletezve vagy kis indexképeken. A keresést rendezhetjük a keresőszóhot legjobban illeszkedő sorrendben, a legújabbak és a legérdekesebbek szerint rendezve.

Photobucket

A Flickr mintájára készült magánképeket tartalmazó közösségi oldal, itt is sok szép képet találhatunk. Akár mi is feltölthetjük ide képeinket, amit a weblapunkon használni szeretnénk, és innen belinkelhetjük az oldalunkra, így a nagy képeknél sok tárhelyet megspórolhatunk.

Getty Images

Igen jó minőségű képeket találhatunk itt, amelyeket más kereső nem indexál. Magazinokban, újságokban látott szép képeket szedhetünk le innen. Regisztráció után ingyenesen lementhetőek egyes képek, de ha kell nagyobban, van lehetőség őket megvenni. Kereshetünk itt is fekvő és álló képeket.

Figyelem!
A képkeresők ugyan segítenek megtalálni az általunk áhított képet, de figyeljünk arra, mire használhatjuk fel. Ha copyrighttal védett, vagy magán felhasználású képről van szó, akkor nem kezelhetjük sajátként.

A következetes felépítés profizmusra vall. A következetlenség hasonló, mint a helyesírási hibák egy esszében. A minőség rovására mennek. Teljesen mindegy, hogy melyik stílust, milyen dizájnt választottunk, ha szem előtt tartjuk ezt az elvet, ott leszünk a szeren. Még ha nem is olyan jó a dizájn. Legalább legyen következetes :)

Az elv betartásának legegyszerűbb módja, ha a tervezés korai szakaszában kitalálunk valamit, és ahhoz végig tartjuk magunkat. Egy nagyobb oldal összerakása közben persze változhat néhány elem, de ilyenkor is érdemes visszamenni az elejére, és azokat hozzáigazítani az időközben megváltoztatott oldalakhoz, hogy a lehető legtökéletesebben egyezzenek.

Sokat segíthet ebben a folyamatban, ha a CSS stíluslapunkban már az elején rögzítünk néhány alap elemet, pl. a

vagy

tagokat. Mivel ezeknek nincs külön neve, így a hosszú folyamat során sem lesz nehéz előkeresni őket és hozzá igazítani a többit.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-9/feed/ 3 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-8/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-8/#comments Tue, 26 Aug 2008 06:30:38 +0000 Zina http://lemmikki.hu/?p=216 Az élesség igen fontos kelléke a szép webdizájnnak. És hogy mik teszik élessé a képet? A pixelek.

A CSS-ben minden pixel a helyén lesz, tökéletes helyen. Ami miatt aggódni kell, az már inkább a Photoshop és az abból kijövő képelemek. Hogy a lehető legélesebb maradjon a dizájn, az alábbi szempontok a legfontosabbak:

• Az alakzatok széleit nézd meg közelről, így látod, mennyire illeszkednek a pixelek széléhez. Ha kicsit el vannak mosódva, akkor azt kézileg kell javítani. Értendő ez az alakzatok mellett még a vonalakra és dobozokra is.
• Figyelj arra, hogy a szöveg, amit a Photoshoppal készítesz, az a megfelelő “simító” eljárással készült-e. Értem ez alatt a szöveg beállítások alatt kiválasztható “None“, “Sharp“, “Crisp“, “Strong” és “Smooth” opciókat. Ezek különböző mértékben simítják a szöveget a háttérhez. Kicsi ill. halványabb betűknél pl. a legoptimálisabb a “Sharp”, azaz éles eljárás.
• Figyelj a kontrasztra, főleg az éleknél, ott a lehető legmagasabb legyen.
• Jól jöhet, ha a szegélyeknél egy kicsit feljebb nyomod a kontrasztot.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-8/feed/ 0 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-7/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-7/#comments Mon, 25 Aug 2008 06:00:44 +0000 Zina http://lemmikki.hu/?p=199 Csakúgy, mint a nyomtatott formában, a webes megjelenésben is igen fontos, hogy a dolgok szépen rendezettek legyenek. Persze nem azt mondom, hogy legyen minden egy vonalban, de igenis legyenek a dolgok következetesen elhelyezve az oldalon. A szépen beigazított dizájn rendezettséget és kezelhetőséget tükröz.

Ha lehet, akkor készíts egy rácsos hálót (Photoshopban igen egyszerűen ezek behúzgálhatók), és építsd ahhoz a többi elemet. Angolul tudóknak találtam néhány jó forrást a témában.

• Designing With Grid-Based Approach – itt nagyon jó példák vannak, illetve a folyamat is szemléltetve.
• Design By Grid – ők pedig egy egész weboldalt szántak a rácshoz épített dizájnnak.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-7/feed/ 0 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-6/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-6/#comments Fri, 22 Aug 2008 11:35:42 +0000 Zina http://lemmikki.hu/?p=166 A webdizájn nem csak a szép képekről szól. Annyi információ van, és annyi kommunikáció zajlik egy-egy weboldalon (jobb esetben), amire figyelni kell. Dizájnerként ezt kell elősegíteni.

Kövessük a sztenderdeket

Az emberek elvárnak dolgokat, és jó, ha nem mondunk nekik ellen. Legjobb példa: az aláhúzott szövegről mit gondolunk? Hogy az egy link. Ha nem link, akkor zavart okozhat. Nem követendő példa. Persze itt is vannak szabályok, amiket áthághatunk, de az oldal legnagyobb része csinálja azt, amit várnak tőle a látogatók!

Gondoljunk bele, mit fog csinálni a látogató

Mikor elkészítjük a dizájnt, készítsünk egy teszt oldalt, mielőtt belefognánk a nagy munkába. A kipróbálás során előjönnek azok az apróságok, amik egyébként igen sokat számítanak. Példa: ha olyan funkciónk van, ami nem azt csinálja, amit általában a hasonlóak szoktak, az akár a visszájára is fordulhat. Biztos nem kevesünknél fordult elő az is, hogy rutinszerűen rányomtunk az OK gombra, és csak utána fogtuk fel, hogy a kérdés az volt: “Biztosan ki akar lépni?”

A felhasználói funkciók fontossága

Mit fog csinálni a felhasználó, amikor az oldalunkra jön? Csináljunk erről egy listát, hogy mik lehetnek a lehetséges utak, amit végigjár, vagy éppen mi az, ami miatt ezen végigmegy. Ez a lista igen sokat fog segíteni nekünk, mert megadja a kezdőoldalunkra leginkább illő felhívásokat, pl. Vásárolj most!, Nézd meg hogyan készül! stb. És most itt legyen ott a fejekben: a webdizájn eszköz. A felhasználónak is. És ők nem szeretik, ha nem megy valami azonnal.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-6/feed/ 0 http://lemmikki.hu/design/hasznos-photoshop-brushok/ http://lemmikki.hu/design/hasznos-photoshop-brushok/#comments Fri, 15 Aug 2008 20:09:29 +0000 Zina http://lemmikki.hu/?p=184 Találtam a neten egy must-have forrást: Obsidian Dawn. Ami elsőre megfogott, hogy nagyszerű szempilla brushok vannak (ami nem elhanyagolható a retusálásnál, bár nem feltétlenül weblap témába vág). Össze is dobtam egy mintaképet, hogy lássátok, miről van szó (az alsó kép van a brush-sal). Kb. 4 kattintás, egy kis Edit » Transform és kész is van:

És hogy tegyük be a Photoshopba?

Metódus 1. Mentsd el valahová a gépen, majd bent a Photoshopban válaszd ki a brush eszközt. Fent, ahol mutatja annak alakját és méretét, van egy kis nyilacska. Lenyitva megmutatja a használható brushokat. Ennek a panelnek a jobb felső sarkán van egy kis nyilacska, az ott megnyíló menüben válaszd a Load Brushes menüt, keresd meg a lementett fájt, és kész.

Metódus 2. A letöltött .abr kiterjesztésű fájlt mentsd le a Photoshop program könyvtárában (általában C:/Program Files/Adobe/Adobe Photoshop/ mappa az) a Presets/Brushes mappába. Ha itt van, akkor a Photoshop (újra)indítása után már bent marad a többi válaszható brush közt.

]]> http://lemmikki.hu/design/hasznos-photoshop-brushok/feed/ 6 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-5/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-5/#comments Thu, 14 Aug 2008 19:00:36 +0000 Zina http://lemmikki.hu/?p=149 A szöveg a dizájn egyik legáltalánosabb eleme, feltűnik mindenhol, így nagy gondot kell rá fordítani. Az alábbi jótanácsokat érdemes megfontolni ezzel kapcsolatban:

Betűtípus

A különböző betűtípusok más és más dizájnhoz illenek. Egyesek modernek, míg mások retrósak. Fontos, hogy a legodaillőbb fontot találjuk meg a dizájnhoz. Ami furcsának tűnhet a webes világban: általában a talpas (serif) betűket jobb és kényelmesebb olvasni. A weben pedig pont a talpatlan, azaz sans-serif betűk a jobbak. A képernyő tulajdonságai miatt.

Betűméret

Nem is olyan régen trendi volt a pici betűkkel írt szöveg. Manapság azért már egyre többen ismerik fel, hogy a szöveget nem nézni kellene a látogatónak, hanem olvasni. Az ún. web 2.0 egyik legnagyobb divatja a nagy betű. Ami fontos: olvasható nagyságú legyen a szöveg, de maradjon meg a címsorok kiemelése nagyobb betűvel.

Sorköz

Korábban megtárgyaltuk már, de legyen itt még egyszer: a sorok közötti távolság erősen befolyásolja annak olvashatóságát, és figyelni kell, hogy a szöveg és a körülötte lévő objektumok között is legyen elegendő hely. A betűk közötti távolság webes szempontból kevésbé fontos, persze annak ritkításával helyes címsorokat generálhatunk.

Sorok hossza

Erre nincs szabály, de köztudott, hogy minél rövidebbek a sorok, annál gyorsabban olvasható. A hosszú sorokon elveszhet a szem, fárasztóbb. Érdemes keskenyebb oszlopokban gondolkodni (mint pl. a napilapokban is van).

Szín

Én szeretem, ha a szöveg nem fehér alapon fekete, kicsit lejjebb veszem a kontrasztot. Túlzásba természetesen itt sem szabad esni.

Bekezdések

Én szeretem nagyon a sorkizárt szöveget, szép egységet alkot. Persze ott a hátrány, hogy a szóközöket esetenként csúnyán elnyújtja. Okosabbaknak (és kevésbé elvetemülteknek) inkább a balra zárt szöveget javaslom a kellemesebb olvashatóság végett.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-5/feed/ 0 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-4/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-4/#comments Thu, 14 Aug 2008 06:30:31 +0000 Zina http://lemmikki.hu/?p=58 Mióta a a dizájnerek áttértek a CSS-sel való építkezésre, hála égnek, kicsit könnyebb lett az élet. Ennek ellenére vannak dolgok, amit figyelembe kell venni még akkor, amikor az oldalt a Photoshopban építgetjük.

Például:

Meg lehet-e csinálni?

Kiválasztottunk egy nagyon szép betűtípust, de vajon közte van-e a HTML-ben használtak közt? Mindenki látni fogja-e azt a típust? Még a leggyakoribbaknál is az alábbi módon érdemes a betűtípust megadni:

 
body {font-family: Verdana, Arial, Sans-Serif;}
 


Ha van Verdana betű a gépén, azzal fog látszani. Ha nem, akkor Arial-lal. Ha netalántán az sincsen, akkor az alapértelmezett Sans-Serif típussal fog megjelenni.

Figyelni kell arra is, hogy bár gyönyörűnek tűnhet az 1100px széles dizájn, az viszonylag sok látogatóknál kilóg a képből, és vízszintesen is görgetniük kell majd a képernyőt. Fontos tudni, mit tudunk megcsinálni és mit nem.

Mi történik, ha a böngésző ablakot átméretezik?

Ismétlődő hátterünk lesz? Hogyan fognak azok működni? Középre van igazítva vagy balra?

Vágjunk-e bele technikailag bonyolult dolgokba?

Még a CSS-ben is adódnak nehézségek, pl. a pozícionálás, ott is leginkább a függőleges igazítás. Nehézkes, bonyolult, így jobb azt kihagyni.

Az apró változtatások megkönnyíthetik az építő munkánkat?

Ha egy objektumot különböző helyekre téve próbálkozunk annak elhelyezésével, gondoljunk arra is, hogy azt később hogy kell majd lekódolnunk a CSS-ben. Pl.: Ha egyes elemek keresztezik egymást, már egy fokkal nehezebb dolgunk lesz. Meg kell találni az egyensúlyt a szép dizájn és a kódolás között. Erre is gondoljunk, amikor elhelyezzünk a Photoshopban az elemeket.

Hogyan egyszerűsítsük meg a dolgunkat, különösen a nagy oldalaknál?

Régebben az oldalaimhoz még én is csináltam kép alapú gombokat. Ha például volt egy letöltés gomb, akkor csináltam neki egy kis ikont, és azt szúrtam be a megfelelő helyekre. Mostanában, ha már ilyesmiről van szó, akkor CSS-ben elkészítem a gombot, aztán onnantól kezdve nem is foglalkozom vele. Lehet, nem olyan rugalmas így csinálni, de nem kis időt meg lehet vele spórolni.


.letoltes {
   background: url(images/download.png) no-repeat left;
   width:50px;
   height:50px;
   display:block;
}
 
<a class="letoltes" href="trapt.mp3"></a>
 


]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-4/feed/ 1 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-3/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-3/#comments Tue, 12 Aug 2008 22:00:21 +0000 Zina http://lemmikki.hu/?p=43 Szerintem az egyik legrosszabb élmény, ha épp netezek, ha nem tudom, merre menjek tovább, avagy azt sem tudom, merre járok. Ez a téma pedig az egyik legelemibb: minden dizájnernek tisztában kell lennie vele. Néha sajnos még mindig megjelennek olyan lapok, amelyet fel lehet hozni rossz példának. Nem bonyolult pedig: csupán két szempontot kellene szem előtt tartani:

Navigáció – Hogyan menjünk tovább?

Néhány köztudott szabály: a gombok úgy legyenek elhelyezve, hogy azt akkor is egyszerűen megtalálja a látogató, ha éppen az oldal alján nézelődik – tegyük az oldal teteje környékére, mert ott könnyű megtalálni. Ha már gombokról beszélünk: nézzenek is ki gombnak, a szövegek legyenek egyértelműek. Ha elolvasom a gomb szövegét, tudjam egyből, hová fogok jutni.
Másik nagyon fontos: HASZNÁLHATÓ legyen! A kedvenceim a legördülő menük, ahol még ráadásul van hat almenü… mire eljutok a cél linkig, lehet hatszor újra kell próbálnom, mert ha leszaladok véletlenül a menüről, az visszazáródik… Ha már ilyen menünk van, akkor úgy kell megcsinálni, hogy ne tűnjön el, és megváltoztatni a színét annak, amelyik felett vagyok.

Eligazítás – Hol vagyok?

Több módja is van, hogy tudassuk a látogatóval, hol is van éppen. Látszódjon esetleg a fejlécből, hová érkeztem, vagy az összetettebb oldalaknál érdemes “breadcrumb”-ot csinálni, alcímeket létrehozni, avagy hasznos lehet egy oldaltérkép is, ha emberünk mégis csak eltévedne.

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-3/feed/ 0 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-2/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-2/#comments Tue, 12 Aug 2008 08:20:50 +0000 Zina http://lemmikki.hu/?p=41 Amikor az első oldalaimat csináltam, minden kis apró helyet be akartam tölteni, mert azok elvesztegetettnek tűntek. Na azt nem szabad. Pont az ellentettje az igaz. A térközök letisztultabbá teszik a dolgokat. A webdizájnban három nézőpont van, amit érdemes figyelembe venni.

Sorközök

Egy nagyobb szövegben a sorok közötti hely igen meghatározza a szöveg olvashatóságát. Ha túl kicsi a köz, akkor a szemünk a sorugrásoknál véletlenül nem a következőre ugrik, hanem kihagy egy-egy sort. Ha túl nagy a köz, akkor a két sor között elveszhet a tekintet. Természetesen itt is az arany középutat kell megtalálni. A CSS-ben a “line-height” opcióval tudjuk szabályozni a sorok közötti távolságot. Az én oldalamon eu 16px, a betűk pedig 11px nagyságúak. Én egy kicsit kevésnek találom az alap sorközt, így megemelem azt egy kicsit.

Példák:

Szűk sorköz, line-height:10px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.

Default sorköz, line-height:14px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.

Tág sorköz, line-height:26px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.

Padding, azaz távolságadás

Ezt a távolságadás dolgot most én találtam ki, ugorjunk is tovább róla. Nem olyan szép szó, aki tud jobbat, szóljon. De hogy mi is ez? A szöveget nem szabad más elemhez hozzáérinteni. Pl.: ne érjen hozzá a képekhez, a táblázat keretéhez, vagy bármi máshoz. A padding erre használatos, térközöket teremtünk vele elemek között. A padding használata szinte kötelező (igen, lehetnek kivételek, de ezt inkább hagyjuk most). A szöveg és többi elem közé mindig tegyünk közt, mert így szépen, egyszerűen lesz olvasható az írás.

Példák:

Padding nélkül

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.

Padding térközzel, kicist kellemesebben

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi elementum nibh fermentum lacus. Morbi odio. Phasellus nec purus. Fusce a massa. Etiam non felis molestie tortor consequat euismod. Curabitur quis nisi ac sem lacinia dignissim. Pellentesque eleifend. Duis quis enim. Ut vel risus. Ut suscipit ipsum quis purus. Cras id arcu. In commodo rutrum massa. Suspendisse a nisl a justo tempus tempus. Phasellus orci. Mauris tristique volutpat justo.

White space, azaz fehér tér

Első és legfontosabb: a white space nem feltétlenül kell, hogy fehér legyen. A kifejezést az üres helyek megnevezésére használják az informatikában, így a szövegszerkesztésben és a programozásban is. A white space-t használjuk, hogy egyensúlyt adjon, arányos és kontrasztos legyen az oldalunk. Ha sokat használunk belőle, akkor az eleganciát sugall.

A white space egyik legjobb tanulásának módja, ha megfogunk egy magazint. Van benne egy pár reklám. Figyeljük meg ezeket. A drága órák és autók gyártóinak reklámjaiban igen sok a fehér tér…

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-2/feed/ 3 http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-1/ http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-1/#comments Mon, 11 Aug 2008 18:08:25 +0000 Zina http://lemmikki.hu/9-alapelv-a-jo-webdizajnhoz-part-1/ Vezessük a szemet…

A webdizájn az információról szól. Egyszerű navigáció kell, ami végigvezeti a látogató szemét az oldalon.

Ha megnézzük a legtöbb weboldalt, az első dolog, amit meglátunk, az a logo. Általában a bal felső sarokba teszik, mert tanulmányok szerint az az első hely, amit megnéznek a látogatók. Szép példa, kövessük, mert így egyből tudni lehet, hová is látogatott az emberünk.

Menjünk tovább. Lépésről lépésre vezessük a szemet. Pl.: A logóról menjen a szeme a jelmondatra, ami pedig egy szép kép mellett van (ami megadja az oldalunk személyigését is akár), majd térjen át a tartalomra, a megjelenített szövegre, és legyen ott helyben, de kevesebb hangsúllyal a navigáció (oldalsávban, vízszintes navbar-ban).

Hogy mit lát a felhasználó, az már a dizájner dolga.

És mik az eszközök mindehhez?

• Pozicionálás – Hogy hová tesszük a tartalmat, nagyban befolyásolja, hogy a látogató azt milyen sorrendben nézi meg.
• Szín – Erősebb (feltűnőbb) színekkel írt félkövér betűkkel nagyban befolyásolhatjuk, hogy látogatónk hová nézzen.
• Kontraszt - Ha valami elüt a többitől, egyértelmű, hogy arra előbb irányul emberünk figyelme
• Méret – Nagyobb dolgokat egyszerűbb észrevenni (természetesen addig, amíg nem minden nagy)
• Dizájn elemek – képzelj csak el egy jó nagy nyilat, ami valahová mutat. Szerinted milyen hamar irányul oda a figyelem?

]]> http://lemmikki.hu/design/9-alapelv-a-jo-webdizajnhoz-part-1/feed/ 0 http://lemmikki.hu/design/szinkavalkad/ http://lemmikki.hu/design/szinkavalkad/#comments Thu, 10 Jul 2008 10:49:09 +0000 Zina http://lemmikki.hu/szinkavalkad/ Igen, volt egy nagy szünet. Remélem, ezennel ennek vége. Épp lakásvásárlás, lakberendezés, költözködés közepén vagyok, és ezeddig minden gondolatomat az foglalta le, hogy és mint fogom kicsinosítani a lakást. Tervezgetem a színeket, a formákat… épp ebből jött az ötlet, hogy ezt kivetítsük a webtervezésre is.

Maradjunk a színeknél. Első lépésben.

Color by COLOURlovers

Ugye amikor elkezdünk tervezgetni, igen fontos tényező, hogy milyen színekből építsük fel. Lehet, hogy van már egy konkrét kiválasztott, de mellé nem mindig elég a fehér (#ffffff) vagy a fekete (#000000). Úgyhogy ilyenkor inspiráció kell. Én innen szerzem: http://www.colourlovers.com/palettes/top

Miért jó? Mert sok emberke helyetted megalkotott szép színharmóniákat, különböző hangulatokban. Elegendő csak szétnézned, és biztos megtalálod, amelyik hozzád illik, avagy a tervezendő weblaphoz.

A Hue Options lenyíló menüben kiválaszhatsz pl. egy-egy fő színt, mely aztán százával hozza az eredményeket. Javaslom, hogy a rikító színeket kerüld, a szemnek jobbat tesz, ha a lágyabb árnyalatok jelennek meg a képernyőn. Ez a keresés itt az optimális, hexadecimális kódra nem érdemes keresni, mert nem túl sok az esélye, hogy pont az szerepel egy-egy palettán…

Hány színt használj a palettákról? Ahogy jól esik. Én általában szeretem 3 színre korlátozni, mert nem okoz zsúfoltságot. Jelen oldalamon is van szürke, és két féle zöld.

Egyre figyelj: használhatsz nem csak harmonizáló, hanem ún. komplementer színeket is, de ezeket soha ne tedd egymásra! Gondolj csak arra, hogy zöld hátteren milyen piros betűt olvasni… Ha ez elütő színeid közül egy erős, akkor a másik legyen halványabb, ne keverd pl. az élenk lilát élénk sárgával. De ezt nagyjából érezni lehet. Ha nem fáj a szemed, mikor ránézel, az már jónak számít. :)

]]> http://lemmikki.hu/design/szinkavalkad/feed/ 6 http://lemmikki.hu/design/wordpress-nem-csak-blogra-jo/ http://lemmikki.hu/design/wordpress-nem-csak-blogra-jo/#comments Wed, 06 Feb 2008 14:29:26 +0000 Zina http://lemmikki.hu/?p=37 Valamelyik korábbi hozzászólásban felmerült, hogy a Wordpress bloggép, nem ajánlatos vele komplex weblapokat összerakni. Én cáfolom. Igen széleskörű webmotorról van itt szó, sokan használják, feljesztgetik, és manapság igen sokan készítenek hozzá olyan kinézeteket, melyek nem blogszerűek.

Példa:

http://www.wpelements.com/introducing-the-massive-news-wordpress-theme/

Ha megnézzük akár a képet, akár rákattintunk a linkre, inkább jut eszünkbe egy hirportál, mint egy blog. Fenti sablon ingyenes, és igen sok lehetőséget ad arra, hogy személyre szabjuk. Kezhetjük ezt a logók cseréjével (sajátra), a színek kicserélésvel, ill. tehetünk a menübe egyedi elemeket és a szolgáltatásokat is könnyedén egyedire szabhatjuk pluginok segítségével.

A Massive News két oszlopból álló sablon, letisztult, egyszerűen testreszabható, mindezt egyszerűen. A fő cikk megjelenése is teljesen automatizálva van, nem kell foglalkoznunk annak külön szerkesztgetésével sem. És ez csak az egyik extra! Van opció a főoldalon megjelenő cikkekhez képet rendelni, a linkeket és a leírásokat is egyszerűen admin felületből szabályozhatjuk.

Hamarosan e téma alapján készítek egy minta blogot, a lépéseit pedig itt fogom részletesen leírni, mit hogyan alakítottam át.

]]> http://lemmikki.hu/design/wordpress-nem-csak-blogra-jo/feed/ 5 http://lemmikki.hu/design/a-dizajn-aranyszabalya/ http://lemmikki.hu/design/a-dizajn-aranyszabalya/#comments Sat, 26 Jan 2008 12:10:52 +0000 Zina http://lemmikki.hu/?p=33

Mindennek, ami felkerült a honlapra kell, hogy legyen célja.
Minden egyes részletnek segítenie kell a látogatót, hogy elérje célját, és ezzel együtt az oldal is elérje a sajátját.

Alapvetően a dizájnerek nem elsődleges célja az oldal sikere, hanem az alkotás. Ezt bárki könnyen megtanulhatja, sok helyen utána lehet járni annak, mik szükségesek az új divat szerinti dizájnhoz. Elég ez? Tudjuk jól a választ.

Egy weblapot összerakni nem csak arról szól, hogy készítünk egy szép layoutot (bár nem haszontalan :)). Közben gondolkodnunk kell. Eredményként mindig azt tartsuk szem előtt (akár a struktúrát, layoutot, hibakezelést stb. tervezzük), hogy tudatosan dolgozunk.

Nézzük csak meg az alábbi oldalakat:
http://www.csselite.com/category/showcase/corporate/ A fentiek szerint elemezzük és tanuljunk.

Példa: http://www.bigfilebox.com/

Miről szól? Szoftvert árul.
Mire jó? Gyors és biztonságos fájlkezelésre a böngészőn keresztül.
Kipróbálható? Igen.
Megrendelhető? Igen.
Tiszta a navigációja? Igen.

A rendelési lehetőség egyértelmű anyagi hasznot hoz az oldal gazdájának, a felhasználó pedig egyszerűen sokat megtudhat a kínált termékről, és ha tetszik neki, meg is rendelheti.

Ennyire egyszerű.

Forrás: Webdesign from Scratch

]]> http://lemmikki.hu/design/a-dizajn-aranyszabalya/feed/ 1 http://lemmikki.hu/design/egyszeru-dizajn/ http://lemmikki.hu/design/egyszeru-dizajn/#comments Mon, 10 Dec 2007 11:56:39 +0000 Zina http://lemmikki.hu/design/egyszeru-dizajn/ Egy egyszerű, letisztult weblap nem csak a dizájnernek, de a megrendelőnek és a látogatónak is hasznot hoz. Ha úgy érzed, hogy valami nem működik az oldal dizájnjával, inkább azon gondolkozz el, mit vehetnél el, mielőtt arra gondolnál, mi hiányzik.

Az egyszerű dizájn előnyei

• Gyorsabb betöltés – kevesebb várakozás
• Sebesebb működés – gyorsabb reakció
• Egyszerűsége miatt könnyebben átlátható
• Egyszerűbb a navigáció
• Gyorsabb a dizájn megtervezése
• Gyorsabb a dizájn felépítése
• Könnyebb a dizájn újratervezése
• Kevesebb tárhelyre és sávszélességre van hozzá szükség
• Egyszerűbb a fenttartása

És ezekkel nem csak pénzt, hanem időt is megtakaríthatunk, így több időnk marad a kreatívkodásra.

Hogyan dizájnoljunk egyszerűre?

Sajnos nem olyan könnyű, mint ahogyan az az elnevezése sugallja. Egyszerű dizájnok megalkotásához bátorság kell, tisztán látás és jártasság. Minél többet gyakorlunk, annál könnyebben fog menni. És hogyan gyakorolhatjuk?

Tartsd szem előtt a célokat

Hogy ne feledd a célokat (az oldal és a látogatók céljait), írd le, és nézd meg minden egyes dizájnolási szakasz előtt. Ha elfáradnál, vagy egyszerűen nem tudod valamilyen okból követni ezeket a célokat, akkor pihenj egyet, tarts szünetet, és akkor kezdd újra, ha újra teljesen átlátod a célokat.

• Először gondolkozz, aztán cselekedj
• Mindig kipihent szemmel dolgozz.
• Mondd ki: “Most azt fogom csinálni, hogy…”
• Aztán tedd meg.
• Bízz magadban.

Ha egy problémára két megoldás van, akkor az egyszerűbb a jobb. Ha ezt az elméletet használjuk a webdesign során, akkor könnyebben találunk elegáns megoldást a problémákra.

• Nekünk is egyszerűbb a letisztult, megszokott, felismerhető felületekkel dolgozni, és az oldal látogatóinak sem kell majd belebonyolódnia az extra újításokkal teletűzdelt dizájnba.
• Egy egyszerű üzenetet sokkal könnyebb megérteni, mint a bonyolultat.
• Ha a kommunikációs folyamat egyszerű, néhány lépésből áll, adunk mellé néhány könnyen érthető instrukciót, sokkal több látogató megy végig rajta, mintha agyonbonyolítanánk (itt akár gondolhatunk arra a folyamatra is, mely az oldal megnyitása és az áru megrendelése között van)

Sok esetben a az egyszerű design megalkotásával időt és pénzt takaríthatunk meg. Időt arra, hogy kibontakoztassuk kreativitásunk az igazi design problémákra, amelyek megoldásával valóban előnyre tehetünk szert.

]]> http://lemmikki.hu/design/egyszeru-dizajn/feed/ 0 http://lemmikki.hu/design/honlap-hatter/ http://lemmikki.hu/design/honlap-hatter/#comments Sat, 24 Nov 2007 07:40:34 +0000 Zina http://lemmikki.hu/uncategorized/honlap-hatter/ Épp most néztem a statisztikában, hogy ez volt az első guglis kifejezés, amivel rátaláltak az új zina.hu-ra, de gondolom meglepődhetett emberünk, hogy túl sok infót nem talált, így elhatároztam, hogy összegyűjtögetem, milyen háttereket hogyan érdemes használni.

Gradient (átmenetes):

Igen divatos és vonzó, választunk két egymáshoz illő színt, fentről lefelé készítünk belőle egy átmenetet (pl: http://mint.com vagy http://www.ronpaul2008.com), és kész. Egyébként itt az egész háttér ennyi: body-background.png. A css fájlunkba ezt valahogy így kell aplikálnunk.

body {background: #fff url(/images/body-background.png) repeat-x top;}

A háttér színeként azt a színt határozzuk meg, ami alul van, így hosszabb oldal esetén is szép egybefüggő hátteret kapunk.

Egyszínű:

Manapság a letisztult hátterek a használatosak, így bátran használhatunk egyetelen egy színt háttérként. Természetesen fontos, hogy egyébként illeszkedjen az oldal hangulatához. Amennyiben ilyen egyszínű a háttér, akkor figyelnünk kell arra, hogy amit rá rakunk, az szólaljon meg. Mint a vörös szőnyegen egy egyszerű estélyi ruhához gyönyörű gyémánt nyakék illik. Legyen benne különlegesség, legyen figyelemfelkeltő. Néhány példa erre:

• http://keasone.de
• http://www.intervisual.de
• http://www.ftofani.com
• http://alexsancho.name
• http://mstefan.com

Mintás:

A mintához bátorság és ügyesség kell, az biztos. Egyrészt azért, mert a mintás hátterek nagyon erős karaktert adnak az oldalunknak, így csak olyat szabad választanunk, mely valóban illik a weblap hangulatához. Példaként az egyik alkotásomat, a cegleditermal.hu-t hoznám fel: fürdőről van szó, így próbáltam olyasmi mintát keresni, mely hasonlít egy medence aljához. Megpróbáltam a lehető legvisszafogottabbá tenni amellett, hogy egy adott hangulatot szerettem volna vele tükrözni. Érzésem szerint jól sikerült.

A minták igen népszerű csoportja a csíkos. Pl. http://www.vitastil.se/ Úgymond tipikus web 2.0-s háttér. Van egy weboldal (http://www.stripegenerator.com/), ahol az igényeinknek megfelelő csíkos háttért csinálhatunk, aztán el is menthetjük a képet png formátumban, melyet az alábbi formátumban tudunk css fájlunkba betenni:

body {background: #fff url(/images/stripes.png) }

Ide nem kell külön attribútumot írni a háttérkép mellé, mint pl az átmenetesnél, mert itt vízszintesen és függőlegesen is ismétlődni fog a kép, és ezt automatikusan beállítja a css.

Legyen itt még egy jó pár oldal, ahol böngészhetünk a kedvenc mintánk után:

• http://www.dinpattern.com – kb 50 különböző háttérminta, többféle stílusból
• http://squidfingers.com/patterns – több, mint 150 különböző minta, a legtöbb a jó fajtából való
• http://www.k10k.net/pixelpatterns – itt közel ezer minta van, a legtöbbet a látogatók töltötték fel
• http://peachinparis.livejournal.com – kifinomult háttérgyűjtemény
• http://www.kollermedia.at/pattern4u – jelenleg 260 egyedi háttérminta kap itt helyet. Mindenképp érdemes átnézni őket!
• http://bgmaker.ventdaval.com – igazi móka, próbáld ki te is, milyen a háttérminta tervezés :)
• http://www.tartanmaker.com – a csíkgenerátor terítőmintás párja

Azért arra figyeljünk, hogy a mintáknak is van határa. Felejtsük el tehát ezeket: http://www.crazyeddy.com/plp Már nem 1998-ban vagyunk!

]]> http://lemmikki.hu/design/honlap-hatter/feed/ 0