A „design” kategória archívuma

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.

Diszkrét animációk a könnyebb értelmezhetőség jegyében

Michaël Villar, Stripe:

We’ve focused on using animations in Checkout from day one because we believe that they enrich the core experience. To illustrate how they do so, I’ll walk through a few of the animations we’ve implemented so far.

Íme egy példa:

Nagyon gusztusos, bár a végén ő is elismeri, hogy némelyik effekt a látvány és nem a user flow miatt került bele. Szerintem a Stripe elég jól eltalálta az arányokat (bár nem használtam), viszont ezekkel nagyon könnyen át lehet esni a ló túloldalára, főleg akkor, ha megjelennek azok a vizuális eszközök, amikkel gyerekjáték lesz elemekre az ilyen animációk aggatása – akkor aztán úgy fog kinézni a web, mint egy kimaxolt karácsonyfa. Ettől függetlenül remek dolog a fókusz támogatása animációkkal.

Skala Color picker Mac

Remek webfejlesztőknek való kis ingyenes color picker Macre: Skala Colorrészletes ismertető. Azonnal konvertál CSS-be másolható módon mindenből mindenbe, HSL módon működik, a hue és alpha választók 4x precízióval mennek, ha felfelé visszük tekerés közben. Az alpha megjelenítése az app támogatásának függvényében változik, Photoshopban és TextEditben például nincs, Pagesben van. A Skala Color egyébként a Bjango kis kézműves indie szoftverfejlesztő hamarosan megjelenő Skala nevű UI tervezőeszköz elő-marketingje. Apropó, ha PS-ben akarjuk bekapcsolni, a “Preferences – General” részen állítsuk át:

Sketch 3 újdonságok

Meng To bullish indítója a Sketch 3-hoz:

It’s only been one year since Sketch has completely changed my design workflow. As a design application that I spend 8 hours a day on, there is no other tool that has influenced my life more than Sketch. The growth that I see for Sketch is out of this world; new resources and plugins are coming out almost on a daily basis. This tiny team of 4 is innovating at a faster rate than the gigantic team building Photoshop.

Érdemes végignézni a posztot, ezen látszik igazán, mit tud az új Sketch UI tervező eszköz. A következő projektnél el fogom kezdeni használni. Viszont ahhoz előbb meg kéne vennem. De ahhoz meg reparálnom kell a rendszerlemezem még tegnapról, rebootosan. Úgyhogy most kilépek, ha holnap nincs Heti Meteor, akkor el sikerült basznom. Csá.

/via Chek

Megjelent a Sketch 3

Modern vektor alapú UI tervezéshez bizony kezd nagyon komoly eszközzé válni a Sketch, aminek ma jelent meg a 3-as változata. Khoi Vinh talán a legismertebb példa, aki nagy hanggal UI tervezéshez átnyergelt PS-ből a Sketch-re. A fő érve az, hogy amíg a Sketch leginkább UI-osoknak készült, addíg a PS inkább egy általános képfeldolgozó tool. Van bárki a most olvasók közül, aki meglépte már a Sketch-et?

Apropó, a hármas sajnos paid upgrade, jelenleg €44,99.-ért (kb. 14 ezer forint) vásárolhatjuk meg, ráadásul ez fel is fog menni a bevezető időszak után olyan 18-20 ezer forint körüli összegre. Szerintem érdemes megvenni és használni, kamatoztatni a benne rejlő lehetőségeket. Intro video elég meggyőző:

Disclaimer: appoktól sajnos nem leszünk jobb designerek, 45 fokos long shadow rajzolás sem megy jobban. :(