A cég arculata adta az első lökést, a megrendelő pozitív hozzáállása pedig a másikat. Wordpress alapon működik ez a weboldal is, bár a blog funkcióját most nem használtam ki, a benne látható vállalati marketinggel foglalkozó blogbejegyzések egy másik (szintén általam készített) weboldal rss-éből szippantódnak be egy általam írt alkalmazás segítségével.

Akinek közép- vagy nagyvállalata van, javaslom azonnal kattanjon rá, a többiek pedig gyönyörködjenek! :)

http://taktikon.hu/

Négy különböző stílusban jelenik meg az oldal, és annyira szép, hogy muszáj megnézni!

http://cegleditermal.hu

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.

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-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-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/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/kezdoknek/a-dizajn-felepitese-az-atfutas-elmelete/ http://lemmikki.hu/kezdoknek/a-dizajn-felepitese-az-atfutas-elmelete/#comments Fri, 23 Nov 2007 20:04:09 +0000 Zina http://lemmikki.hu/uncategorized/a-dizajn-felepitese-az-atfutas-elmelete/ A látogatók nem nézik huzamosabb ideig a monitort. Egyszerűen nem esik jól. A kis felbontás miatt nem elég élesek a képek, feliratok, ráadásul a legtöbb monitor 75 Hz-en működik, ami szintén irritálja a szemet. Ennek megfelelően senki nem szeret hosszabb szövegeket olvasni a számítógépén. Fárasztó. Aki azonban már egy ideje használ számítógépet, hozzászoktatja a szemét:

• csak átfutják a szöveget ahelyett, hogy elolvasnák,
• gyors döntéseket hoznak,
• türelmetlenek,

és ezekkel a technikákkal tökéletesen kímélik a szemüket.

Na így kell nekünk is gondolkodni, mikor elkészíthük a weboldalunkat! Kicsi rá az esély, hogy el fogják olvasni, amit oda írtunk. Főleg ha szép nagy, hosszú szövegről van szó. Na akkor elvesztünk. És elveszítettük az érdeklődőket is.

Arra kell építenünk, hogy átláthatóan szerkesszünk. Arra gondolok, hogy a kezdőlapon ne egy hosszú köszöntővel kezdjük, mert az egyébként sem érdekel senkit. Legy ez a figyelemfelhívás helye. Tegyünk ki sok linket, hogy továbbmehessen arra, ami érdekli. Emeljük ki vastag, nagy, esetleg színes betűvel azt, ami a lényeg (pl. címsorok, linkek, a szövegek esszenciája). És legyenek képek. Jól tagolják a szöveget, szépek, és ha jól választjuk ki a képeket, azok is adnak arculatot az oldalunknak.

Ha már fel kell tennünk egy hosszabb írást, azt mindenképpen tagoljuk. Legyenek a bekezdések között nagy terek, legalább 10px-esek. Az sem árt, ha a sorok magasságát is megnöveljük, ezzel szellősebbnek is tűnik. Szintén szúrjunk képeket sok betű közé, hogy ezzel még egy kicsit megtörjük a monotonitást, és fenntartsuk az érdeklődést.

Ha nagyon hosszúra írást helyezünk fel, akkor még egy pár cselre szükségünk lesz. Miért? Nem tudom ki nem ijed meg attól, ha a jobb oldalon a böngésző csúszkája hirtelen összezsugorodik fél centire… :) Én biztos. Maximum akkora a csúszka, mint a hüvelykujjunk (kb az oldal harmada). Így nem is kell 10 oldalra tennünk a tartalmat, de még kényelmesen görgethető fáradság nélkül.

Szóval:

• Csel #1. Bontsuk szét aloldalakra. A szöveg alatt (esetleg felett is) legyenek a további oldalak linkjei, a navigációs linkek.
• Csel #2. Nyomtatási lehetőség! Ha érdekli emberünket a tanulmány, vagy novella (vagy bármi), akkor azt el akarja olvasni tényleg, nem csak átfutni. Hadd nyomtassa ki, vigye haza, vagy be az ágyba. Tudjuk, a papír annyira nem utálja a szemet, mint a monitor.

Mik tehát a legfontosabb tényezők?

1. Könnyen megtalálja, amit keres. Hogy mit keres? Az igencsak függ attól, hogy milyen weblapról beszélünk, de az oldal céljának egyértelmű meghatározásával ez már könnyen megy.
2. Ezt legkönnyebben kiemeléssel tudjuk megtenni.
3. NEM KELL MINDENT kiemelni, mert az ugyanolyan rossz, mintha nem használnánk a kielelést, legyen egyensúlyban: “a kevesebb több”.
4. Figyeljünk a kontrasztra – hangsúlyos, de nem maximális kontraszt kell: kb 70-80%-os legyen színektől függően.
5. Tagoljuk a hosszabb szövegeket.

Kérdés valaki? :)

Forrás: Webdesign from Scratch

]]> http://lemmikki.hu/kezdoknek/a-dizajn-felepitese-az-atfutas-elmelete/feed/ 2 http://lemmikki.hu/technikai/weblapkeszites-rejtelmei/ http://lemmikki.hu/technikai/weblapkeszites-rejtelmei/#comments Wed, 10 Oct 2007 14:18:23 +0000 Zina http://lemmikki.hu/uncategorized/weblapkeszites-rejtelmei/ Miután egy hosszabb ideig nem működött a zina.hu, újra beindul, ám most teljesen más struktúrával. Hétköznapi nyelven, továbbra is a megszokott zinás stílusban szeretném megosztani az olvasókkal a weblapkészítés rejtelmeit, tanácsokat adni, segíteni, mindemellett megosztani a saját munkáimat.

Szándékaim szerint olvashattok majd (előre is elnézést mindenkitől a tegezésért, de imádom a bizonyos svéd bútoráruházat…) trendekről, hogy mi fontos egy-egy oldal megalkotásakor, mi az, amire feltétlenül figyelni kell. Ezt mind majd szeretném hasznos példákkal alátámasztani, összeszedni sok hasznos forrás oldalt, melynek segítségével még könnyebben is dolgozhatunk. Szándékozom a dotkommentar.hu példája alapján tanácsadást is indítani, melyet remélek, majd sikerül gyakrabban megvalósítani, mint Pécsi Ferenc kollégának.

Röviden: ha bárkinek szüksége van tanácsra, ötletre, tippekre, forrásokra ahhoz, hogy egy kicsit jobban el tudjon igazodni a weblapkészítés rejtelmeiben – nyugodtan jöjjön ide. Zina.hu.

]]> http://lemmikki.hu/technikai/weblapkeszites-rejtelmei/feed/ 6