Itt a nyár lehet kint fröccsözni, sörözni, összefújja a szemetet a szél a szakmából. Ha zavarba vagyunk, nem tudjuk miről kezdjünk el beszélgetni, hát itt van két tökéletes téma, amit ha feldobunk garantált a több órás beszélgetés. Kezdjük az elsővel:

“Te már FLATBEN dizájnolsz vagy még SKEUMORPTHBAN?”

Tökéletes felvezetés lehet ez egy garantált vitához. Amelyik blog új like-okat várt az elmúlt hetekben/hónapokban, az már biztosan írt ebből legalább egy, de inkább több posztot. Ez most a sláger. Tegyük fel például egy zenésznek azt a kérdést, hogy “te _pontosan_ milyen stílusban is zenélsz?”, nos hasonlóan definiálhatatlan ez egy grafikusnál is. Nem lehet mindent kategorizálni, ahogy ezt sem. Mi pontosan a flat? Ha nem használsz gradienst? Vagy ha nem használsz árnyékot sem? Honnantól flat a flat!? Nem úgy kell kezdeni egy munkát, hogy ezt most eldöntöttem, flatben tervezem. Úgy kell tervezni, hogy jó, használható és érthető legyen a végtermék. Követni vakon egy trendet csak azért mert az most a sláger nem okos dolog. Ez az egész flat hullám tökéletesen rámutatott arra, hogy vannak dolgok amik grafikailag túl voltak bonyolítva, de ugyanakkor azt is megmutatta, hogy komplex problémáknál egy végletekig lecsupaszított felület egy használhatatlan wireframe érzését keltheti. Ha ebben a témában állást kéne foglalnom, egyszerűen csak ezt a posztot linkelném.

“Photoshop mellett/helyett mit használsz prototypeoláshoz vagy ui tervezéshez?”

Ajjj de szép! Én személy szerint egy ux-es szakértőt és egy sitebuildert használok ehhez. Miért? Mert ez az ő szakmájuk. Kicsit olyan érzésem van, mintha elérkeztünk volna egy újabb Dreamweaver korszakhoz. Hirtelen az emberek megint elkezdtek érteni mindenhez. Eddig mindenki azt mondta, hogy legyél specialista, most meg, hogy érts mindenhez? Szerintem egy webdesignernek nem kell tudnia kódolni, nem kell tudnia tökéletes wireframet rajzolnia. Viszont rá kell látnia ezekre. Tudnia kell, hogy mit lehet css-el csinálni, vagy tudnia kell, hogy már vannak icon fontok vagy éreznie kell, hogy egy oldal mitől használható, hogy egy landing page mitől lesz jó. Újítónak kell lenni. Nem szabad, hogy saját tudásunk legyen korlátja önmagunknak: csak azért ne tervezzél olyan site-ot mert csak azt tudod _te_ lebuildelni. Hirtelen padlógázt nyomtak ezek a szegmensei a szakmának és aki mindenben jó akar lenni, az nem lesz igazán jó egyikben sem.

Persze ez a kérdés elkanyarodhat másfelé is, hőmérséklet és elfogyasztott alkoholtól függően. Lehet, hogy egy tökéletes flame indul arról, hogy mi fogja kiváltani a Photoshopot, vagy mi most a legjobb online ui készítő. Biztos, hogy mindenki fog legalább egy különbözőt mondani, mert ő összerakott benne egy website-ot, amin volt legalább 2 gomb is (lekerekített ráadásul!). Lehet erről vitázni, de nem ezen fog múlni, hogy miben csinálod a terveidet, az a lényeg, hogy jó legyen. Lehet, te InDesign-ban raksz össze egy weboldalt, de ha tökéletes, akkor hát ez van (max a sitebuilder, vagy a grafikus, aki átveszi tőled fog megcipőzni ezért). Nem az eszközön múlik. Nem szégyen például az sem ha papírra rajzolsz. Azt kell választani, amiben a legjobban meg lehet oldalni az adott feladatot, nem bonyolult.

Egészségetekre.

Idén ünnepli 55 évét a LEGO és egy eszméletlenül jó printkampánnyal lepték meg magukat. Imádom ezeket az egyszerű, de nagyszerű megoldásokat. Főleg, ha ennyire jól kapcsolódik a brandhez, pár grafikai elem, de elmondja az egész LEGO életérzést. Imádom.

Mindig is vonzott a téma, hogy modelleknek vagy fotósoknak készítsek website-ot. Esetükben a tartalomnak kell szolgáltatnia a dizájnt még jobban, mint egyéb esetekben. Nem hagyhatjuk, hogy amit készítünk, elvegyen a termékük értékéből. Tehát minél többet le kell faragni a dizájnelemek rengetegéből, hogy a látogató nehogy elvesszen nézelődés közben.

Elhatároztam, hogy megkeresek valakit aki modellkedéssel foglalkozik, szerencsére nem kellett sokat rohannom az alany után, mert egy ismerősöm Cintia, modellkedik. Miután felvetettem neki az ötletem, hogy csinálnék neki egy oldalt – aminek folyamatáról később cikk születne – szólt, hogy meg vannak kötve a kezei, ugyanis az ügynökét kell megkeresnem a dologgal. Fel is kerestem az Attractive Model Agency-nél  Cintia ügynökét, aki beleegyezett a dologba, azzal a kikötéssel, hogy az oldalon fel kell tüntetnem az Attractive brandingjét és nekik jóvá kell hagyniuk végül a site-ot. Beleegyeztem, majd azonnal át is küldte Cintia teljes anyagát. A munka elkezdődhetett.

A kód nem olvasható a cikkben, mert így túlzottan hosszúra nyúlna, valamint inkább az elkészítés átgondolásáról és a viszontagságokról szól, de a végső állapot megtekinthető demo formában, valamint a forrás letölthető tömörítve a cikk végén.

A struktúra

A munkafolyamat átgondolása volt a dolog legnagyobb buktatója, ugyanis olyan oldalt akartam készíteni, amin azonnal láthatjuk, hogy kivel is van dolgunk, így a fotóknak kellett szentelnem a kihasználható terület legnagyobb részét. Tehát a bemutatkozást és egyéb módon a fotókat háttérbe szorító szövegelést lehagytam a főoldalról. A második gondom, a menü volt, melyben szükség volt egy ‘Bemutatkozás’, egy ‘Kapcsolat’ és egy ‘Galéria’ vagy ‘Referenciák’ menüpontra. A ‘Galéria’ már adott volt, hogy a főoldalra kerül, a ‘Bemutatkozás’ és a ‘Kapcsolat’ menüpontok, pedig annyira picik, hogy nem szenteltem nekik külön oldalt, ezért egy ‘info’ menüpontban egyesítettem őket, mely majd valahol ügyesen megnyílik a főoldalon, a tartalom központi szerepét meghagyva.

A fotók rendezésével folytatódott a probléma, ugyanis egy modellnek rengeteg képe születik munkája során (műtermi, divat, sajtó, stb.). Erre azt a megoldást találtam ki, hogy alapból ömlesztve jelennek meg a képek, majd a megfelelő kategóriára kattintva szűri és listázza nekünk a képeket. A képek kattintáskor pedig valamilyen felugró galéria effekttel nyílnak meg.

Ezzel a struktúrális átgondolás le is zárult. Van egy jól működő single page koncepciónk, aminek már csak egy szép elrendezés és egy jó színpaletta kell.

Betűtípus

Mostanában betűtípusnak a Source Sans Prot választom 200-as vastagsággal, divatos betűtípus ez manapság, mióta a Microsoft előrukkolt a Windows Metro felületével. Az oldalt is hasonló elvek alapján próbáltam elkészíteni, hogy a siklások és az áttűnések szép dinamizmust kölcsönözzenek az oldalnak.

Színek

Mivel lányról beszélünk, aki modellkedik, egy lilás-rózsaszínes / antracitszürkés / fehér palettára gondoltam elsőre, de csak ízlésesen, nehogy melléfogjak. A lilás-rózsaszínes  szín kiválasztása volt a legnehezebb, de sikerült. Választásom végül egy inkább rózsaszínre esett, ami szerintem elegáns az antracit alapon.

Elrendezés

Az elrendezésben a választásom a 960 pixeles szélességre esett, mert ez már egy fektetett okostelefon képernyőn is megfelelő szélesség, de még az 1024 x 768-as képernyő felbontáson is szépen elfér. Ha később szűkségessé válik a reszponzivitás is beépíthető lesz, de ilyen mélységekbe nem merültem. Az oldalról becsuszó sáv 230 pixel  széles lett, mert ezzel még tökéletesen látszik a tartalom nagyrésze. A képeket 5 oszlopba rendeztem, a méretük 168 x 120 pixel lett és a köztük lévő köz, pedig 20 pixel, az egésznek pedig 10 pixeles margót adtam. Így a végső elrendezés valahogy így fest:

Ezután a modell és az ügynökség neve kerül a bal-felső sarokba az info gombbal együtt. Ettől jól elkülönülve, pedig a képek kategóriaválasztó menüje lejjebb. Ehhez egy 1 pixel vastagságú vonalat választottam, mely újra előkerül a galéria alján, ezzel keretet adva a dizájnnak.

Szkriptek

A szkriptek mind jQuery alapúak, ezért nem akadnak össze és annyi erőforrást sem igényelnek, hogy ne működjenek egy átlagfelhasználó számítógépén. Az alábbiakra esett a választásom:

• Fancybox – A képek megjelenítéséhez
• Quicksand – A galéria szűréshez
• Pageslide – A beúszó sávhoz

A többi problémába az elkészítés folyamán ütközhetünk, de ha precízen minden lépést jól átgondolva dolgozunk — és remélem így dolgozunk — akkor a problémák száma minimalizálható vagy nullára redukálható.

Az elkészítés folyamata

Első körben a HTML dokumentumba mindig a főbb dolgokat rakom be, a stíluslapot, a szkripteket és a tartalmat csak ezután a fennakadások elkerülése érdekében. Ezek elkészültével elkezdünk foglalkozni a stíluslap szépítgetésével. Mivel ez egy egyszerű oldal, letisztult kódot kapunk eredményül, ezért számíthatunk egy egyszerű stíluslapra is. Fontos megjegyeznem, hogy a tartalom és funkció tökéletes összhangjának érdekében, amikor elkezdjük készíteni a végleges stílust, már fontos ismernünk az elhelyezendő tartalom nagyrészét. A helykitöltő szövegek használata, amiatt nem tanácsos nagymértékben, mert ha egy bemutatkozásnak öt bekezdésnyi szöveget helyezünk el, mikor az valójában csak egy bekezdés, téphetjük a hajunkat. Első lépésnek érdemes megfontolni állandó jelleggel az Eric Meyer által készített CSS Reset-et. Ezt az általam használt Espresso 2.0 programba alapértelmezett snippetként rakták be. Aki még nem egészen biztos a 960-as grid használatában az töltse le esetleg az ennek írt frameworkot, de mivel esetünkben nem 12 oszlopos elrendezésről van szó ezt most mellőzzük. Végső lépésként beszúrhatjuk a szkripteket a dokumentumunkba.

Az oldal elkészítése során nem ütköztem jéghegy méretű problémákba, csak apróságokba. Ami kissé szíven ütött, hogy a képek miniatűrjeinek margóit szimmetrikusan kellett elosztani, ugyanis, ha a filter átrendezte a képeket és minden ötödik elemnek nem volt margója, akkor elég furcsa dolgokat produkált eredménynek. A Quicksandet nehéz személyreszabni, de némi utánaolvasás után találhatunk megfelelő átírásokat. Az oldalról becsúszó sávot külön fájlból kéri be a szkript, így érdemes figyelni a karakterkódolás beállítására. A rászánt idő, a megfelelő mennyiségű kávé, pizza, szendvics (egészségpatriótáknak búzacsíra, uborkalé, egyebek) felhalmozásával 3 óra körül van. Nyilván, ez jóval több időre nő, ha problémákba ütközünk, valamint ha a megrendelő igényei változnak. Jelen esetben ez halmozottan igaz, ugyanis a modell és az ügynökség igényeinek is meg kell felelnünk. Remélem sikerült.

A végső oldal demója megtekinthető itt.

A végső oldal tömőrített formában megtekinthető itt.

Források:

• Attractive Model Agency
• Pageslide
• Quicksand
• Fancybox
• 960.gs
• Eric Meyer CSS Reset

Quince creates a more smile-worthy world, by making the apparently impossible possible in the area of communication. This we do together with our customers and a team of 14 creative thinkers in Budapest.

Our team now await a digital designer and a PHP developer who are open to personal development, team work, and being part of an exceptional approach in creating true solutions. All that we do is done with endeavour, no little sweat, but above all is done with a smile.

In our understanding, a creative designer is a real pixel crafter with mad skills in designing interfaces and layouts for the spectrum of digital media with good skills in quality photo manipulation, understands flash well (deep AS knowledge is not a must) and has some years of experience within the field of advertising.

We’re also looking for an experienced PHP developer so if you’re more into coding than pixels, we’d like to know more about you too!

(x)

Tavalyi offf-on az Fi csak annyit válaszolt, amikor a new business stratégiájulról kérdezték, hogy: jó dolgokat csinálunk. És tényleg. Alapvetően, ha valaki jó dolgokat csinál, arra felfigyelnek és fognak neki munkát adni, igazából ez nem bonyolult, sokkal inkább logikus.

Viszont nagyon nehéz eltalálni, hogyan tudod ezt az egészet tálalni. Van, aki nagyon design központúra veszi a portfóliójában a munkák bemutatását, van aki bőlére ereszti a szöveget, de mint majdnem mindenhol itt is az arany középút a legjobb megoldás.

A legnagyobb erő azokban a munkákban van, amik szépek, jól átgondoltak és van mögöttük valami ötlet, van bennük valami “okosság”. Ez a tökéletes kombó szerintem, az arány már csak a megbízás milyenségétől függ, mert nem mérhető egy mérlegen egy interface tervezés egy nike-nak készített elborult illusztrációval.

Nem véletlen, hogy mostanában ennyire felpörögtek az esettanulmányként bemutatott projektek. Ez a legjobb módja, hogy elmeséljük történetszerűen, hogyan jutottunk a projekt végére. Hogyan gondolkoztunk és miért csináltuk azt, amit. Az, hogy leírjuk mit miért csináltunk az nem bullshit, hanem egy nagyon fontos része a munkának. Ez többet ér szerintem a legjobb CV-nél, ez lesz a legjobb profil rólunk és ez lehet a legnagyobb erőnk. Szépen rajzolni sokan tudnak, de szépen rajzolni és okosan dolgozni már jóval kevesebben.

Ez a gondolat csak erősödik bennem, amikor ilyenre és ilyenre csorgatom a nyálam, tőlük ebben lehet tanulni.

Imagine a world where all of your devices are connected. Simply. Elegantly. At LogMeIn, that world is real. We make the complicated connections simple and the simple fun. Users worldwide rely on LogMeIn solutions for remote control, file sharing, systems management, data backup, business collaboration and on-demand customer support.

You, the Lead Designer, will develop LogMeIn’s product design across all platforms including Macs, PCs, Android and iOS platforms. You will be responsible for developing brand standards and translating and implementing LogMeIn’s brand into website and product design. You will work with LogMeIn’s other designers, as well as external designers as needed, to execute LogMeIn’s visual branding across all media.

(x)

Gondolom, mindenkinek megvan az, hogy kikerül valami az internetre és egyből jön a reakció “azt máshogy kéne szerintem”, “hú azt lehetett volna másmilyen”. Nade milyen? Gyorsan kommentálni, kritikákat írni könnyű. Megcsinálni jobban viszont nehéz. Félreértések elkerülése végett: tisztában vagyok vele, hogy valaki tud úgy kommentet írni, hogy nem ért hozzá, sőt hasznosat is tud, hiszen nem mindenki szakács mégis tudja, ha odaégett a sütemény. Viszont, van olyan, hogy az kritizál, aki akár át is tudná azt a webszájtot tervezni. Hát tervezze át, legyen jobb!

Ha most munkát keresel, netalántán az egész világnak szeretnéd megmutatni, hogy te mennyire jó vagy, akkor talán a legjobb tanácsom: tervezz át valamit mégjobbra. Sok idő és energia, de megtérül. Konkrétan nem egy ilyen blog van, ami ezekkel foglalkozik, ilyen például az http://uninvitedredesigns.com. Hobby redesignok és koncepciók, és van köztük sok érdekes és igazán finom megoldás.

Megosztanám veletek a tapasztalatomat erről. Anno amikor a Facebook bevezette a timeline-t nagyon örültem, egy friss vizuális világ volt körülötte. Ami viszont meglepett, hogy a főoldalra a mai napig nem került át az a look and feel. Ezért poénból áthekkeltem a főoldalt, semmi más céllal, csak, hogy megnézzem, hogyan is nézne úgy ki. Csináltam belőle egy gyors behance projectet, mert hát miért ne, fióknak dolgozni, amúgy sem a legjobb. Kicsivel több mint 4000-en nézték meg. De ami az érdekesebb, hogy több, mint 10 meló megkeresés érkezett azóta, a világ random pontjairól. Ha épp állást keresnék, ennél egyszerűbben szerintem nem is találhatnék.

Nade ott van például Fred Nerby facebook újragondolása. Szerintem legalább 10-20-szor annyi energiát rakott bele a srác, de meg is lett a gyümölcse. Már több, mint 250e-n nézték meg a projektet, és szerintem neki is rengeteg megkeresés érkezett az inboxába.

De említhetném Tobias van Schneider .Mail koncepcióját, aki továbbgondolta a levelezők működését. Mi lett az eredménye? Az Fi egyből lecsapott rá.

Mi ebből a tanulság? Ha már grafikus valaki, vagy webdesigner, akkor ne csak üljön és sírjon, hogy nincs melója, vagy kritizáljon jobbra, balra. Üljön le és mutassa meg, hogyan is lehetne ezt másképp (úgyis szar idő van most, még inni sem lehet a szabadban ). Hiszek abban, hogy a befeketetett energia és a minőségi melózás meghozza a gyümölcsét. Annyit igérhetünk, ha jót csinálsz, mi szívesen írunk róla. Sok sikert!

Gondolom mindenkinek rémlik a klasszikus kérdés: te mennyiért csinálsz weblapot? Nem először fordult már elő velem is az, hogy megkérdezték, hogy egy ilyen vagy olyan ikont mennyiért tudnál megrajzolni nekünk? Nyilván egyértelmű, hogy nincs ezeknek egzakt dobozos ára, annyiba fog kerülni, mint amennyi idő elmegy vele.

Azonban nagyon sok ember tudatában az él még, hogy “de hát ez csak egy ikon”. Csakhogy: ki kell először találni, mi legyen az, le kell skiccelni, hogy egyáltalán, hogy fog ez a legjobban kinézni, aztán le kell ülni a gép elő és meg kell rajzolni nagyban, majd a különböző méretekre “dedikált” ikonokat kell csinálni, mert hát az, hogy csak leméretezzük nem éppen a legelegánsabb megoldás.

Egy ukrán stúdió a Ramotion most feltöltött egy case study-t Behance-re, ahol nem csak megcsodálhatjuk ezeket a műremekeket, hanem kicsit mögéjük is láthatunk, hogy mi mennyi idő volt és kb milyen úton jutottak el a végeredményig. Lehet, hogy az csak egy gömb, de, hogy ilyen legyen kelleni fog 50 óra rá, vagy mondjuk szeretnél egy kis házikót? Semmi gond, 130 óra. A matek innentől nem annyira bonyolult, szorozzuk fel egy tapasztalt grafikusi órabérrel. És ez csak az ikon.

Viszont ezt az ikont fogják először látni az app store-ban, ez az ikon lesz a szimbóluma annak az alkalmazásnak amit már több száz órája fejlesztünk. És lehet, hogy sokan csak az ikon miatt fogják megvenni/letölteni. Így is soknak hangzik? Térdre borulok és nagyon tisztelem azokat a megrendelőket, akik ezt belátják és korrektül kifizetik ezt a munkát. Kiváncsi lennék hány magyar óriáscég nevetne ki egy ilyen árajánlatot és hányan fogadnák el…

Felgyorsultak az események és nagyon sok mindennel kellett az elmúlt időszakban fogalalkoznom. Nem is volt időm posztot írni arról, hogy miket csinálunk most pontosan, de most sem arról írok, inkább a dán tipográfiáról egy pár szedett-vedett gondolatot. Csak pár cikázó gondolat, melyet érdekesnek találok, de semmiképp sem összetett disszertációnak szánom

Még a betűtervezési időszakban hallgattunk egy nagyon jó és igazán érdekes előadást a dán betűtervezésről. A jellegzetes dán betű kialakulása szoros kapcsolatban áll az építészeti egyetemmel (the Royal Danish Academy of Fine Arts, School of Architecture). Olyannyira, hogy az építészek tanulnak tipográfiát és signage és egyéb három dimenziós betűvel kapcsolatos feladatokat is képesek megoldani. Ebből adódik, hogy azok, akik kezdetben nagy hatással voltak arra, amit ma jellegzetes dán betűtervezésnek hívnak, építészek voltak, emiatt képesek voltak síkban és térben egyaránt gondolkozni, így tökéletesen tudták megoldani a betűk térbe fordítását.

A 20. századig nem voltak Dániának saját betűtípusai. Nem úgy, mint Hollandiának, Nagy-Britanniának és Németországnak. Ezért főleg németországból hoztak betűtípusokat, amiket nyomtatásra használtak.

Fontos megemlíteni, hogy azok a betűk, melyek ez után az időszak után születtek nem nyomtatásra szánt betűtípusok voltak. Ezeket utcatáblákhoz, feliratokhoz, főcímekhez tervezték és sokszor csak kapitálisokból álltak, ezért nem voltak alkalmasak arra, hogy hosszú szövegeket szedjenek velük. Nem léteztek különböző metszetek.

Érdekes vonatkozás még, hogy a tervezők majdhogynem teljesen izoláltan dolgoztak. A Bauhaus nagy szerepet játszott Dániában, de bizonyos tervezőkre hatott csak. Pl. Ib Andersen plakáttervezőre igen, míg Knud V. Engelhardra nem.

Három kedvenc tervezőm, akik meghatározó szerepet játszottak és játszanak a dán tipográfiában:

Thorvald Bindesbøll

Dán építész legismertebb munkája talán a Carlsberg sörgyárnak készített logotípiája. Munkáiban jellemzőek voltak az ornamens motívumok és nála jelent meg előszor a dán ø úgy, hogy a vonal az o szemén belül maradt.

Knud V. Engelhardt

Talán az egyik legmeghatározóbb szereplő a jellegzetes dán betű kialakulásában. Gyakran emlegett munkája, amit ma is sokan csodálnak a Gentofte tartománynak tervezett utcatáblái. Mivel eléggé egosita személyiség volt, ezért szinte minden munkáján megjelenik a KVE♥, utalván saját magára: Knud V. Engel Heart.

Bo Linnemann

Azt hiszem róla elég csak annyit megemlíteni, hogy a Kontrapunkt egyik alapítója.

Múltkor már írtunk a Puma új projektjéről, de azóta már volt alkalmam kipróbálni is a technológiát. Hát izgalmas az biztos. Nagyon fura érzés, hogy igazából nem látod, hogy mit csinálsz egészen addig, ameddig “elő nem hívod” fénnyel a grafikát. Kicsit hasonlít a szitázáshoz, ami miatt nekem a Lumi jobban tetszik, az a nyers hatása.

De a lényeg a lényeg, holnap egy nyílt workshop keretein belül kipróbálhatjátok ti is a Lumit! Jelentkezzetek az eseményre facebookon és találkozzunk holnap a Loffice-ban. Amire figyeljetek majd, hogy ha a ruhátokra jut az átlátszó anyagból az másnapra bizony színes lesz

Mindig ámulunk és bámulunk, amikor az Apple elejt egy sneek peek-et vagy mutat valami szép, új designt. A Windowsról és alapvetően a Microsoftról sose arra asszociáltam, hogy szép design. Eddig. Nagyon belehúztak és egy nagyon jó irányba tartanak. A Windows új arculatáról már anno írtunk, de egyre jobban pezseg most a levegő, így hogy jön az új operációs rendszer és a surface.

Első nagy meglepetés az volt, amikor felmentem a Microsoft oldalára és egy nagyon szép összkép fogadott. Ez a site, jól meg van csinálva. Reszponzív, szellős, tiszta. Egy baj van csak vele, hogy látszik ez valami óriási káoszt lefedő palást. Ugyanis az aloldalak köszönőviszonyban sincsenek egymással, bele lehet futni igencsak csúf megoldásokba. De az igyekezet megér egy dicséretet, pár éve nem gondoltam volna, hogy ez ilyen “rövid” idő alatt megszépülhet. Szerencsére vannak igen jól összerakott aloldalak is, ilyen pl. az Xbox music, vagy az új killer tabletnek induló Surface oldala.

Csalóka egyébként ez a vizuális világ. Az apple minden részletében kifaszázott layoutjai bár hülyén hangzik szerintem könnyebben lesznek ilyen szépek. Amikor több eszközöd van akkor több mindennel tudsz játszani, könnyebb átverni a szemet vagy éppen vezetni azt. Jelen esetben ez teljesen más story. Amikor az eszköztárunk leredukálódik flekkekre, tipóra és képekre, akkor már nem annyira egyszerű ez a történet. Sokkal fontosabbak lesznek az arányok és az eltartások. Nagyon vékony az a sáv, amiben ez a világ jól néz ki és könnyű minden irányba elbillenni. Ha egyszerűen kéne megfogalmaznom: könnyű olyan designt csinálni, ami szar és úgy néz ki a végeredmény mint egy kiszinezett wireframe

Egy szó mint száz. Örülök, hogy az MS fejlődik a grafikai megjelenésben és végre ténylegesen valami újat akar lerakni az asztalra. Az óriási párharcokból mi biztosan nyertesként fogunk kijönni.

Életemben nem rajzoltam még desktop alkalmazásnak ikont, így igen inspiráló volt a feladat. Egy olyan platform, amit eddig csak használtam, de tervezni nem rajzoltam semmit “rá”. Ami a tervezés során megfogalmazódott bennem az csupán ennyi: ez nagyon más. Ha mobilra rajzoltam eddig ikont, ott megvoltak olyan szigorú korlátok, amik egyben segítenek is, hát itt nincs, vagyis elsőre nem volt egyértelmű. Megpróbálom most összeszedni azokat a lépéseket, amiknél néha botlottam, vagy amikből tanultam és így remélhetőleg az én hibáimból vagy tapasztalataimból tanulhattok.

Kutatás, skiccelés

Az első talán, amit végigolvastam az az OS X Design Guidelines ide vonatkozó belyegyzései. Ezt követően pedig futottam pár szokásos kört, megnéztem adott ikonok miért is jók, végignyálaztam az App Store-t.

Ezek után pedig, papír és ceruza. Skiccelés. Amikor kb. kitaláltam mit szeretnék, gyorsan feldobáltam egy modellt, hogy tudjam tesztelgetni, milyen szögből nézhetne ki tényleg szépen majd a végeredmény. Ez egyébként egy nagyon kényelmes módnak bizonyult, nem több óra után kellett rájönnöm, hogy lehet jobban nézne ki az ikon kicsit más szögből…

Na de eddig ez azért “gyerekjáték” el kellett kezdeni rajzolni, mint, ahogy a videón is láthatjátok először az egész modellt átrajzoltam photoshopban shape-ekkel, hogy később ne legyen szívás ha esetleg valamit át kell méretezni. Amikor ez megvolt, onnantól masszívan árnyékolgatnom kellett. Alapvetően szürke tónusban rajzoltam az egészet, hogy ne zavarjanak a színek (hajlamos vagyok színekkel elcsúszni ilyen fázisban…). Amikor ez megvolt, akkor pedig különböző adjustments layerek segítségével színezgettem kékesre.

A dock

Na valahol ezen a ponton jöttem rá, hogy nagyon jó, hogy én HD-ben nézek egy ikont, szép nagy, de sose fogja így nézegetni a felhasználó (maximum Plastik Józsi…). Sokkal többet kellett volna tesztelnem kis méretben, méghozzá dock méretben (ami egyébként 128×128 vagy maximum 256×256 px). A tesztelés során kijöttek azok a problémák amik nagyban nem: felesleges rengeteg részlet, kell bele szín. Ez a két tény, bár egyértelműnek tűnik, nem volt annyira az nekem . Ezen a ponton el is vetettem azt, hogy az összes oszlop ki lesz faragva, vagy ilyen-olyan ajtó lesz az épületen, mert felesleges. Kicsiben csak zavaró, nem ad hozzá.

Apropó tesztelés: én ezt a ronda, de hasznos appot használtam. Ezzel .icns file-okat tudunk generálni, amibe bele tudjuk menteni az app ikonjának minden méretváltozatát. 16×16-tól 1024×1024-ig. Könnyen lehet vele dolgozni és ezeket a file-okat, ha egy teszt app-hoz rendeljük könnyű vizsgálni a különböző árnyékokat.

A szín

A szín is egy érdekes pont, ha mindenki ránéz a dock-jára láthatja, hogy minden app, ami kirikít onnan rendelkezik valami domináns részlettel, ami színes. Így tervezzetek ti is, legyen valami jól megjegyezhető részletetek, ami élénk, vagy erősen elkülönül az egésztől. Ugyanígy fontos, hogy ne szürküljünk bele a dockba, szó szerint. A dock közeli szürke grafika borzasztóan eltűnik még ha jól is néz ki a psd-ben nagyban…

Arányok

Volt egy pont a videóban, ahol egyszercsak magasabb lett az egész. Na ez volt az a pont, ahol először nem értettem miért nem néz ki még mindig jól ez az egész… Ki kell használni a magasságot. Ha megvizsgáljátok a téglalap alakú ikonok mind be vannak forgatva kicsit, hogy nagyobbnak tűnjenek. Na ez volt itt is a baj, optikailag alacsonyabbnak tűnt az egész, meg kellett magasítani, hogy ne törpüljön el.

Árnyék

Már majdnem készen voltam az ikon master méretével, amikor rájöttem, hogy kéne mögé/alá/mellé árnyék, mert ezt nem az OS fogja körérakni… Ráadásul, ha szépen beárnyékoljuk az alját, akkor mégjobban leugrik a dock-ról. (Na jó kicsit hazudtam én erre nem jöttem rá, csak amikor már megvolt minden méretben, nem volt finom az összes méretben pár pixelt csalni az ikonokon, hogy köréférjen az árnyék, ne ess ebbe a hibába!)

Méretek…

Lehet, hogy jól néz ki az ikon nagyban, sose lesz olyan jó, ha csak simán átméretezzük. Fogtam a HD ikont és szépen elkezdtem lefelé skálázni és az összes méretben kicsiszolni. Egy adott méretnél már teljesen máshogy viselkedett, részleteket, árnyékokat kellett törölni, hogy ugyanaz a hatás érvényesüljön.

Aztán végül készen lettem… Nem írtam pontosan az órákat, de biztos, hogy 50+ munkaóra került az egész folyamatba. És ez még csak az ikon volt. Mert, hogy minek az apropóján írtam ezt az egészet azt már nem nehéz kitalálni, csinálunk egy szuper alkalmazást, amivel mac alatt gyönyörűen lehet rendezni az e-bookjainkat. Kövessetek minket, én pedig megigérem, hogy hamarosan írok az app tervezéséről is!