A ‘Design’ kategória arhívuma

WebDevelog design

Írta: | 2008. szeptember 27. | kategóriák: Blogolok, Design, Interface, Web | 15 megjegyzés

WebDevelog frontpage design

Ismét a véleményetek kérem. Ezúttal a jövőbeli angol blogom designjáról van szó. Pár szóban leírom, mi miért van úgy, ahogy. A kép a kezdőlapot ábrázolja, a cikk megjelenítés, a kommentárok, az oldalak másként lesznek felosztva. Az oldal 1024×768 képpontos felbontásra van optimalizálva. Amikor megnyitod az oldal, akkor a fejléc a menü és a felső zöld doboz látszik egy hasonló felbontású képernyőn. A zöld doboz tartalmazza az utolsó három írást, szigorúan képek nélkül! Ezt követi a három további navigálás szolgáló elem, majd a lábléc. Az oldalt próbáltam nem túlzsúfolni, de eléggé betölteni ahoz, hogy minden fontos helyre elérjen a főoldalra visszatérő látogató.

Inspiráció: online és offline

Írta: | 2008. szeptember 26. | kategóriák: Design, Photoshop, Web | 4 megjegyzés

Hiszem, hogy nem egyedül vagyok az, akinek inspirációs gondjai vannak. Épp ezért úgy döntöttem, hogy a WebPillangó keretén belül indítok egy inspiráció kereséssel foglalkozó írássorozatot. Amikor ezt olvasod, akkor már minden bejegyzés meg van írva és bizony minden nap megfog jelenni egy újabb és egy újabb ötlettár az oldalon. Természetesen csak “amíg a készlet tart”.

Jacek Yerka inspirál

Forrás: http://www.yerkaland.com/

Néhány ötletet Anne Van Wagener egyik írásából merítettem, másokat a MűhelyTitkok oldallécébol lestem el. Vannak amelyek csupán agyszülemények, de vagy nekem használtak vagy valahol hallotam róluk. A lényeg, hogy legyen eredménye annak, hogy időt szánunk a kreatívitásunk fejlesztésére és gondozására.

Az első inspirációval foglalkozó leírás hétfőn látja meg a napvilágot! Ne felejtsd el megnézni, iratkozz fel a WebPillangó RSS csatornájára.

WebPillangó 2, övtől fel!

Írta: | 2008. június 25. | kategóriák: Blogolok, Design, Hírek | 43 megjegyzés

A kommenteket figyelembe véve elkészítettem az oldal felső részének a javított változatát. A betűtípusokat kicseréltem Verdanára, a színekkel is eljátszodtam, illetve a fejléc szövegét és zsúfoltságát is próbáltam korrigálni. A tartalmi résznél megváltozott a fejléc háttere (narancssárgáról kékre) és a fejléc szövegének színe (erdész zöldről mély kékre). Ez nem tudom mennyire jó így, de van akinek így tetszik. Az oldallécben is van változás. A partnerek gombjai kerültek alaposabb kidolgozásra, illetve a Photoshop szótár kapott új reklámfelületet.

WebPillangó 2 fejléc design

Elolvasom a teljes bejegyzést »

WebPillangó 2, az első publikus design

Írta: | 2008. június 12. | kategóriák: Blogolok, Design, Hírek, Web | 38 megjegyzés

Lassan elérkezett a várva várt pillanat, elkészült a WebPillangó2 designja. A terv még nem végleges csupán egy beta változat. Azért tettem fel az oldalra, hogy mond meg, hogy mi tetszik és mi nem tetszik. A véleményeden túl az ötleteidet is várom, hogy még mit látnál szivesen az oldalon.

WebPillangó 2 - beta design - mini

Előre is köszönöm a kritikákat és ötleteket!

Online betütípus összehasonlítás

Írta: | 2008. május 22. | kategóriák: Blogolok, CSS, Design, Web | 8 megjegyzés

A Typetester egy nagyon hasznosnak bizonyuló web 2.0 alkalmazás, ami nagyban felgyorsíthatja a weboldalkészítés művészetét. Dióhéjban, a Typetesterben három oszlopban, valós időben, grafikus felhasználói felületen kereszűl, változtathatjuk a szöveg kinézetét: betütípus, méretek, elő és háttér színek, stb. A formázások eredményét egy CSSként kaphatod vissza, mindössze egy kattintásba kerül.

A Typetester

Elolvasom a teljes bejegyzést »

Darabolás mentes hivatkozás képeken

Írta: | 2008. május 03. | kategóriák: (X)HTML, Alapok, CSS, Design | 2 megjegyzés

Ez egy rövid példa arra, hogy miként lehet egy háttérképre, például a fejléc hátterére, linket tenni, pl. a logóra. Természetesen ebből az következik, hogy nem szükséges a kép felvágása, csupán XHTML és CSS segítségével kivitelezhető. A megoldás egyaránt valid és cross-browser.

1. lépés

Helyezzünk egy linket a kérdéses helyre. Én a fejlécben szeretnék egy kattintható felületet a logónak, ami visszamutat a főoldalra.

1
2
3
<div id="header">
  <a href="index.html" title="" id="logoLink"> </a>
</div>

Elolvasom a teljes bejegyzést »

Top 10 WordPress sablon

Írta: | 2008. január 28. | kategóriák: CMS, Design, Letöltések, Web | 26 megjegyzés

Mivel még nem volt alkalmam készíteni sablont az oldalra, fogtam magam és összeválogattam 10 nagyon jó WordPress sablont. Remélem te is jónak fogod találni a templateokat. Sok szöveget nem is fűznék hozza, hiszen ebben az esetben a látszat a lényeg.

Top 1

Elolvasom a teljes bejegyzést »

WordPress menu span hack

Írta: | 2008. január 15. | kategóriák: Blogolok, CMS, CSS, Design, PHP | 2 megjegyzés

A minap felkerült egy írás, ahol dinamikusan lehet gombot készíteni CSS segítségével. DeX hozzászólása kapcsán:

Ha a gombon nyomvatartod az egeret, majd lehúzod róla, és ott engeded el, akkor beragad a lenyomott állás?

arra gondoltam, ha már az active-ot hover-re cserélem, használhatom menünek is az egész CSS kódot, a minimális modosításokkal. A CSSben mindössze annyi a tennivaló, hogy az active modosítókat kicseréljük hoverre. Így a link fölé görgetéskor aktíválodik az új kinézet és nem a link lenyomásakor. Miután készen vagyunk a CSS résszel, nyugodtan használhatjuk weboldalainkban.

Mi van akkor, ha a kódot nem mi írjuk? Én arra az esetre gondoltam, amikor a WordPress által kilistázott oldalakat/kategóriákat formázom menüként. A megoldás egy kis ügyesség, okosság. A probléma orvoslását keresve az alábbi megoldást találtam a legmegfelelőbbnek.

Elolvasom a teljes bejegyzést »

Dinamikus gomb készítése CSSt használva

Írta: | 2008. január 13. | kategóriák: (X)HTML, CSS, Design | 16 megjegyzés

Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben. A következő leírásban egy ilyen szerű gomb elkészítéséről lesz szó. Először elmondanám, hogyan is működik a gomb, milyen elmélet alapján, majd a szükséges kódot is közzéteszem.
Az ötlet az, hogy ne legyen egy statikus háttér, amiről lefuthat a szöveg, ha éppen hosszabb, mint a kép maga. Persze ezt elméletben ne lehet tökéletesen kiküszöbölni, még szerencse, hogy a gyakorlati világban élünk. A háttér dinamikus szélességét annak köszönhetjük, hogy a linkekbe nem a szöveget helyezzük, ahnem egy span elemet, ami tartalmazza a szöveget, így valójában két hátterünk van: egy nyitó, ami nyulni is fog, ahogy a szöveg egyre hosszabb (persze csak egy pontig, de mivel mi határozzuk meg, nem okoz gondot) és egy záró háttér, amely lezárja az első háttér végét, így egységes megjelenést biztosít.

Elolvasom a teljes bejegyzést »

3 havas szöveg effekt

Írta: | 2007. december 05. | kategóriák: Design, Szöveg effekt | 4 megjegyzés

Az elkövetkezőkben bemutatók néhány példát havas szöveg készítésére. Az elsőben inkább fagyos, hóharmatos szöveget készítek, a másodikban behavazott szöveget, aztán meg, ami jön. Az alap lépések mindenik effekthez ugyanazok: hozz létre egy fehér háttérszínű dokumentumot, és helyezz rá egy (tetszés szerint) kék szöveget. Ezen a szövegen fogjuk elvégezni a kívánt változtatásokat.

Hóharmatos szövegHarmatos szöveg készítése. Talán ez a legegyszerűbb. Készíts egy új réteget a szöveg rétege fölé. Ezt követően a Ctrl gombot lenyomva tartva kattints a szöveg rétegének nézőképére (szöveg réteg esetén egy T betű). Így készítesz egy kijelölést, amely a szöveg körvonalát követi. Ha nem sikerül, akkor ugyan ezt a műveletet egy más módszerrel is elérheted: jobb klikk a nézőképen és Select Layer Transparecy (magyarban valami ehez hasonló kellene legyen: a réteg áttetszőségének kijelölése). Ezt követően válaszd a fehér előtérszínt (foreground color, a felső szín négyzet) és egy soft brush-t (egy puha körvonalú, nagyon áttetsző ecset). Az új rétegen óvatosan színezd be a szöveg azon területeit, ahova hóharmatot szeretnél.

Elolvasom a teljes bejegyzést »