A „design” kategória archívuma

Designer’s guide to DPI

Sebastien Gabriel gyakorlati összefoglalója:

No complex math and un-parsable graph, just straight forward explanations ordered in short sections for you to understand and apply directly to your design process.

A fickó visual designer a Google-nél és a Chrome-on dolgozik. A guide-ja elég jó, praktikus, és különösen klassz benne, hogy az Android világot és az ottani HiDPI kijelzőket és terminológiát is bemutatja egy halom jó továbbvezető linkkel a végén. (És aki kattintgatni is szeret, annak itt van tőle egy tutorial Sketch-hez.)

Twitter logo evolúció

Összefoglaló a New York Times-on arról, hogy a Twitter mikor és milyen logóra cserélte a márkáját. A sztori rövidítve annyi, hogy amikor indultak egy 15 dolláros iStockphoto illusztrációt vásároltak az angol Simon Oxley-től. Oxley a mai napig árulja ennek a madárnak egy variációját. 2009-ben aztán Biz Stone és Philip Pascuzzo csinálták a “hajas” madarat, aminek később eldobták a színeit, végül ezt emelte a mai szintjére 2012-ben Doug Bowman (idén májusban hagyta el a hajót).

Tudtommal egyébként a türkiz “t” betű soha nem volt a Twitter hivatalos logója, talán valamiféle Facebook hatásokra terjedt el a neten. Én általában egy új site esetén rápillantok a használt Twitter ikonra, ha még a régit látom, akkor tudom, hogy a webdesignernek kijár az “igénymentes övezet” matrica. Hasonlóan egyébként a dátumot is érdemes megnézni a lapok alján, abból mindig lehet arra következtetni, hogy hány éves az éppen használt design. Ha régi, általában belepillantok a forrásába is, előbújik belőle szépen a tábla alapú dolog időnként. Még szerencse, hogy a böngészők nagyon toleránsak manapság.

/via @iraszl

Designing the new Foursquare

Sam Brown Foursquare designer posztja arról, hogy mi ment bele az új appjukba. Teljesen áttervezték (jobbára Sketchben!) és készítettek hozzá új vizuális identitást is. Ez a hivatalos vállalati (blog)kommunikáció része, ezért minden csupa sunshine és happiness. Ettől függetlenül akár csak ilyen szinten is jó látni, hogy ekkora cég mit rak bele az appjába. A team elszántságát jelzi, hogy tavaly decemberben az alábbi slide-ot rakták bele a céges prezentációjukba:

Simán el tudom képzelni, hogy tényleg ennyire beleszerelmesedtek a munkájukba.

The $5 logo

Sacha Greif megbízott néhány 5 dollárért is dolgozó designert, hogy készítsenek neki logót. Természetesen kiderül, hogy a hat beérkező munkából négyet egészen biztosan loptak valahonnan. És hát innentől kezdve lehet mutogatni, lám-lám, olcsó húsnak híg a leve. Nagy meglepetés?

Nekem az a része, hogy Sacha ilyenekkel tölti az idejét, az volt. Ki az, aki nem tudja, hogy feltörekvő világ designerei, akik a KKV biz mellett innen is húznak be pénzt, a meló rapid végét fogják meg? Másrészt mit is szeretnénk kimutatni? Azt, hogy olcsó szar logót kapunk végeredményül? És a 2000 dolláros logó az igazi? Meg a végén berakjuk ezt a képet?

Mackey Saturday working on the Instagram logo.

Mi ez a faszság? Miért ne lehetne létező piaca az 5 dolláros innen-onnan lopott logóknak? Aki ennyit szán egy ilyen dologra, az olyan logót is kap. Egyedül talán azért érdekes a sztori, mert ezek a logódesignerek jobb munkákat mutatnak, aztán a végeredmény lesz a mosógépből előhúzott vektor. De talán még ez sem izgalmas.

Sokkal inkább az, hogy Sacha fogja magát és a posztja végén ő maga is beáll logót dizájnolni. És jobb logót készít, mint az 5 dolláros feltörekvő KKV mellől kisarjadt designerek. Gratulálok Sacha, tényleg jobb vagy!

Grids club

A collection of Photoshop grids by Julien Perrière.

Az első nagy szám azt jelenti, hány hasáb van, jobbra felül a hasábok közti margót (gutter), alatta pedig a grid teljes szélességét. Adobe Photoshop felhasználás már létező dokumentum esetén: megnyitjuk azt a dokumentumot, ahova szeretnénk rátenni a gridet, megnyitjuk a megfelelő gridet PSD-ből, aztán jobb klikkelünk a grid layer csoportján, “Duplicate Group…” és ott kiválasztjuk a már megnyitott PSD fájlt.

Kéretlen redizájnok: Wikipedia

George Kvasnikov és Julian Krenz tanulmánya arról, hogyan lehetne egy “beautiful” Wikipédia interface-t tervezni. Remek munka, szuper microsite (ne felejtsük el draggelni a screenshotokat!), láthatóan sok időt eltöltöttek vele. Ebből egészen biztosan megfuttatnék egy prototípust a cégen (alapítványon) belül, aztán megnézném, hogy viselkedik a különféle cikktípusokon – ki tudja, lehet, hogy kiadja. Érdekes trendnek gondolom, hogy grafikusok ilyen módon próbálják felhívni magukra a figyelmet, sikerrel.

Yosemite ikonok elemzés

Nick Keppol remek posztja arról, hogy az Apple új operációs rendszerében milyen ikon konstrukciót használnak. Sajnos kevés erre vonatkozó dokumentáció van, így gyakorlatilag házi feladat szintjén kell megoldania ezt mindenkinek. Rettenetesen jó és részletgazdag munka, ajánlom a részletes feldolgozását minden app designernek.

Két rész tetszett nekem különösen: az első, ahol megkonstruálja az új shape-ek gridjeit (amihez még kapunk PSD-t is, handy), a második, ahol bemutatja, hogy a Yosemite grádiensei valójában ambient occlusiont mintáznak – ettől lesznek fantasztikusan guszták, úgy, hogy nem is vesszük észre. Csodálatos!

Megújult VirginAmerica.com

Megújította magát az a légitársaság, amivel még nem utaztunk, de mindenki azt mondja, hogy a legjobb.

Elég merész és előre ugró design egy olyan iparágból, ami nem mer előre ugrani. Személy szerint nekem azért szokatlan, mert akkora teret kitöltő felületi elemeik vannak az UI-ben, amit egyszerűen nem szoktunk még meg. Nekem egy képernyő méretű gomb valamiért nem gomb, ösztönösen nem is nyomnám meg, keresnem kell:

A new look site-juk hijackelt scroller. Sajnos a scroller dolgot a productban is navigációnak használják, rajtam ezt egészen biztosan nem tudták volna keresztülpofozni, sőt, üzenem mindenkinek, hogy LEAVE THE SCROLLING ALONE. Nagyon tetszik viszont a grafikai tervezés, az Ive-grádiensek, elképzelés, átdizájnolták a boarding pass-t is (zsebredugható méretűnek).

Jó látni, hogy ekkora cégnél is időnként szóhoz jutnak azok, akik szeretnének valamit csinálni érdemben is, és erre a nagy szervezet ad támogatást. Ekkora cégeknél a legapróbb váltásoknak is irtózatos szervezeti dependenciái vannak, de elég azt mondani, hogy legtöbbször az ott dolgozók egyszerűen csak basznak rá.

A parallax scroll és a long shadow esete

Jeffrey Zeldman arról, hogy a trendek nem élnek örökké:

When an agency would rather tell you about their industry than learn about yours, run the other way. Your digital partner’s mastery of web technology should be automatic, not a selling point. Beware the trendy pitch. Piling on every slick trick in the book doesn’t help you connect with your audience; it erects unnecessary barriers. Following web trends doesn’t make you cutting-edge; it dates you.

iTunes concept

Brye Kobayashi 20 éves Hawaii-on élő egyetemista remek dolgozata arról, hogyan nézhetne ki az iTunes a most megújulni készülő OS X alatt. Nem emelnék ki belőle fotót külön, érdemes végignézni az anyagot.

A kétállású navigáció dilemmája

Ismét visszatérek az Instagramhoz. Az alábbi képen ugyanis egy kétállású navigáció van, amit ma reggel rossz irányban próbáltam megnyomni. Ez újra felveti annak a kérdését, hogy két elemből álló listában melyik a kijelölt és melyik a koppintható link.

Ez egy navigációs egység, ahol az egyik elemről a másikra váltunk. Rápillantva én ösztönösen azt hittem, hogy a szürkével jelölt az, amin állok. Gondolom azért, mert a fehér háttéren a fehér kiemelés nem létezik, viszont a szürke igen. Az Apple kétállású gombja is teljesen fehér abban az esetben, amikor ki van kapcsolva.

Ők a fizikai gombhoz hasonlóvá tették teljesen, sőt, még zölddel is kiemelik azt, amikor be van nyomva, mint az iPod shuffle esetében. De ez nem navigáció.

A kérdés ezek után az, hogy mivel lehetne ezt megjavítani? Egyáltalán nem triviális a kérdés kettő navigációs elem esetében. A problémát az okozza, hogy mind a kettő elemnek egyszerre kell jelzőnek is lennie: az egyik elemnek mutatnia, hogy ott állunk, a másiknak azt, hogy oda mehetünk. A két elem folyamatos küzdelemben van ebben a harcban és egyikük sem nyerhet.

Szerintem igazán jó megoldást nem lehet adni úgy, hogy egymás mellé tesszük őket. Viszont ha szétszedjük és azt mondjuk, hogy az egyik legyen tényleg jelölés, a másik meg innen elszállító navigációs link, akkor sokkal egyértelműbb a helyzet, főleg akkor, ha még a szövegírással is megsegítjük a kérdést.

A tudatos termék designer – Zurb University

Fantasztikus product / UI design resource és előadások, információk minden UI designer részére – ZURB University. De ne ott kezdjük, itt van például a Design Triggers szekció, ami a következő témákban mutat be mintákat (saját munkánk során vajon hány kategóriát tudtunk volna megnevezni belőle?):

Achievement, Anchoring, Appeal to Values, Authority, Autonomy, Bandwagon Effect, Belonging, Certainty, Chunking, Cognitive Load, Collecting, Conceptual Metaphor, Curiosity, Demonstration, Effort Justification, Faith in Aesthetics, Familiarity, Justifying Requests, Keywords, Limited Choices, Loss Aversion, Readability, Recognition over Recall, Relative Value, Scarcity, Self-Expression, Social Proof, Storytelling, Surprise & Delight, Zeigarnik Effect

Az én szemem felnyototta: az intuitív termékfejlesztés (“jól néz ki”) helyett tudatos termékfejlesztés. Mondjuk az is vicces, ha valaki előadja, hogy ezt a mintát Zeigarnik effektnek szánja. Fogalmam sem volt, mi az, de ezt is megtudtam a ZURB University-ből:

Zeigarnik Effect can affect user behavior on your site. Try to reduce the uneasiness users will feel from having uncompleted tasks, by breaking down long or complicated tasks into a series of smaller steps. Make it easy for users to pick up uncompleted tasks later. Use a progress bar or confirmation screen to give users a sure sense of closure.

A dolog onnan kapta az elnevezését, hogy Zeigarnik megfigyelte, a pincérek igen komplex ételrendeléseket is fejben tudnak tartani az este végéig, aztán azonnal elfelejtik őket. A dolog lényege abban van, hogy kielégülést jelent, ha végig tudjuk vinni a folyamatot, látjuk az eredményt és közben észben tartjuk. Ezt ügyesen felhasználhatjuk a termékfejlesztéshez is a fenti módon.