A „design” kategória archívuma

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. :(

Playboy Man of the Year

Megmondom, hogy jutottam el ide: Bazsó Gábor Facebook lapját böngészgettem gyermekfotók után kutatva, ott láttam, hogy kapott egy jelölést a Playboy Man of the Year versenyen (NB, érdekes módon Winkler Róbert nem kapott, Uj Péter viszont igen).

Az első gondolatom a weblapot nézve ez volt: egész jó és milyen szépen reszponzív – hirtelen ennyit tudtak emelni a színvonalon? A playboy.hu címlapja tábla alapú vérciki frankenstein szörnyeteg, amit legalább 10 éve szerelgetett gondolom éppen az, aki arra járt, csoda, hogy megjelenik egyáltalán valami.

Ez a Man of the Year viszont – baromi jól néz ki, korszerű, magyar viszonylatban meglepő.

Szakmai kíváncsiságból átvizslattam az oldalt, hogy valami referenciát találjak arra vonatkozóan, kik készítették a lapot, de nem találtam semmit. Ugyanakkor előjött belőlem a kritikus gondolkodás: ezt a site-ot vajon Magyarországon magyar emberek készítették? Ha igen, akkor az egyik legjobb munka, amivel mostanában találkoztam.

Mégsem hagyott nyugodni a dolog, nem hiszem el, hogy ennyire elkerülte volna a figyelmemet. Átnéztem a dokumentum forrását és az alábbiakra lettem figyelmes:

1. A teljes HTML és CSS angol nyelvű – azt tapasztaltam általában, hogy a magyar fejlesztők mindenképpen benne hagynak valami magyar nyelvű utalást, kommentet, itt nem találtam semmit, csak angol dolgokat.

2. Fura, hogy a loader “royal_loader” class a CSS-ben, valamiért azt feltételezném, ha a Playboyra kifejlesztett dizájn lenne, akkor nem “royal” lenne a neve, hanem “playboy” talán? Arra tippelek, hogy a téma neve lehet talán a “royal”.

3. A CSS fejlécében a leírás komment blokk:

=Common Styles
=Typography
=Buttons
=Content Styles
=Navigation
=Hero
=Services
=Portfolio
=Project
=Team
=Subscribe
=Testimonials
=Footer
=Blog
=Slider
=Video
=Media

Ebben egy sor olyan rész szerepel, ami láthatóan egy általános dizájn szekciói (Services, Portfolio, Project, Testimonials stb), nem pedig a Playboy eredeti fejlesztésű dizájnjáé.

4. Benne maradt egy komment, gondolom a téma fejlesztője részéről, hogy a logót hogy kell pozícionálni, ez megint csak a teóriámat erősíti:

/* Set to the height of your own logo to center the text */

5. Néhány a témában szereplő, de fel nem használt ikont találtam a CSS-ben (egyetlen példa), ezek is benne felejtődtek.

6. respond, reply-title, comments részek is arra utalnak, hogy blogot is kiszolgál

7. Ráhekkelték a Playboy nyuszi logót az pointer helyére – ez az ízléstelenség nagyon kilógott.

Összességében ennyi volt a vizsgálódásom, és végeredményben kijelenthetem, hogy magyar website nem (sokszor) tudott még nemzetközi színvonalú munkával meglepni. Ettől függetlenül a Playboytól egy vásárolt (vagy hackelt) webdesignnél többet vártam volna. Én amikor ránéztem, komolyan azt hittem, hogy sikerült valami egészen nem magyar, kevés pénzből összerakott, kelet-európait dobniuk, de újra csalódnom kellett.

update: ezt a 43 dolláros (kb. 10 ezer forint) template-et vásárolták meg, ebben van a Royal preloader is. Köszi mindenkinek, aki beküldte a helyes megfejtést. :)

update 2: a fenti egy Joomla sablon, az eredetije a “Visia” nevű 13 dollárért – 4 rugó. Vajon a Playboy magyar menedzsmentjénél tudnak arról, hogy milyen eredeti gondolkodás megy náluk?

Hivatalosan is bekerül a Teehan+Lax iOS 7 GUI az új Sketch-be

Jön a Teehan+Lax iOS 7 GUI Sketch 3-ba, Geoff Teehan:

I’m really excited today to share the news that our iOS 7 GUI template is going to ship natively in Sketch 3 (…) No longer will you need to Google ‘iOS GUI Sketch’ and download the file from our site. You can just open Sketch 3, select our iOS 7 template and starting building out your next iOS app.

Én magam boldog Sketch 2 felhasználó vagyok, bár UI-t nem azon tervezek, de, mint ahogy annak idején Bazsó Gábor megfogalmazta a vezetés közbeni orális szex kapcsán, mindig is nagyon érdekelt. A Teehan+Lax iOS 7 PSD-je szerintem UI körökben alap, akinek nem lenne meg, innen ránthatja le a legutóbbi változatot. Gondolom a 3-as Sketchben még újabb iOS 7 template-et kapunk majd.

Azt hiszem, ha megjelenik, akkor nekiállok és legalább egy éles projektet megcsinálok benne. Engem egyébként az nem hoz lázba, hogy két klikkel lehet gridet létrehozni, meg retinába és simában is kiexportálja a PNG-ket, hiszen ezeket az Adobe termékeiben is meg tudom oldani. A szokás meg nagy úr, még akkor is, ha sok billentyűkombináció azonos.

Egyébként megvan, mi hozna lázba: ha az új Sketch tudna olyanokat, amiket lehet gyakorlati UI és product tervezésnél kamatoztatni, például váltogatni compok között aktívan, sőt, ruganyos fizikai animációkat pakolni layer setekre, azaz világos és egyértelmű prototípusokat előállítani.

A Facebook új ruháját a számok irányítják

Dustin Curtis kemény kritikával illeti az új Facebook dizájnt. Új posztjában több név nélküli Facebook fejlesztővel történt beszélgetés alapján világosan megfogalmazza, hogy a korábbi design egyértelműen annyira jól sikerült, hogy a felhasználók folyamatosan kevesebb és kevesebb időt töltöttek a site-on, csak a News Feed ment:

It was performing so well from a design standpoint that users no longer felt the need to browse areas outside of the News Feed as often, so they were spending less time on the site. Unfortunately, this change in user behavior led to fewer advertisement impressions, which led, ultimately, to less revenue.

A végén még egy “overheard” beszélgetést is leír, ahol az egyik Facebookos arról panaszkodik, hogy a Facebooknál a bárminemű designt megtesztelik és ahol a számok fölfelé mennek, azt csinálják.

A poszt gondolom annyira jól sikerült, vagy talált be?, hogy a Facebook design directora, Julie Zhuo is becsipogott egy poszttal a Mediumon. Természetesen kiáll az új munka mellett, ugyanakkor megpróbálja onnan megfogni a dolgot, hogy az emberek széles tömegeinek, nincs nagy méretű monitoruk:

It turns out, while I (and maybe you as well) have sharp, stunning super high-resolution 27-inch monitors, many more people in the world do not. Low-res, small screens are more common across the world than hi-res Apple or Dell monitors. And the old design we tested didn’t work very well on a 10-inch Netbook. A single story might not even fit on the viewport.

Megnéztem ilyen szemmel is a két screenshotot (előtte, utána), de számomra inkább Dustin érvelése tűnik logikusabbnak, noha el tudom képzelni, hogy szereltek ennek megfelelően a media query-ken, mindenesetre nem látom azt, amit a nő ír.

Mega pornósztori

A prezentációt illetően a vs.hu továbbra is rendületlenül hisz a felcicomázott, a valódival összehasonlítva erősen megkérdőjelezhető élvezeti értékkel rendelkező, felfújt guminőben – az ő terminológiájukban ez a mega és látványos, hosszú posztokat jelent, amik tekeréssel újabb és újabb dizájnelemet gördítenek az olvasó elé.

Láthatóan a vizuális élménnyel akarják a tartalmat négyzetre emelten az olvasó elé tárni, aminek egy szőrös hónaljra többnaposan ráhagyott izzadtságszagú, a webes konvenciókat látványosan felrúgó, sorkizárt tipográfiájú nonszensz a végeredménye1.

A mostani darabjuk a pornószakmát elemzi, jó sok meztelenséggel, meg kitakart pornóval – eléggé vásári a hangulat. A téma mindenképpen hálás, de ettől függetlenül posztom témája nem a pornó könnyen értékesíthető volta, hanem ezeknek a mega-típusú anyagoknak az értelmetlensége, ami kifejezetten a web “skip intro” időszakát juttatja az eszembe, ahol mindenki meg volt őrülve egy új technológiáért, vagy effektért.

Nem véletlen mondtam, hogy használhatatlan: amikor elvesszük a felhasználótól a gördítés lehetőségét és felülvágjuk az általunk fantasztikusnak gondolt hangulati elemmel, hibát követünk el. Innentől az olvasó ugyanis nem tud kedvére haladni, helyét átveszi a felcicomázott guminő.

Az is lehet egyébként, hogy a vs.hu készíti túl az anyagot és ennek egy visszafogottabb, szolid változata kellően elegendő illusztrációja lehetne az anyagoknak. Ez lenne ugyanis a feladata, és ezt a balanszot nem tudják valahogy eltalálni: a vs mega anyagai mind-mind súlyosan effekt-nehezek és olyan szinten nyomják agyon a tartalmat, hogy nem lehet sajnos egyáltalán arra figyelni, amire kéne. Ebben az értelemben definiálhatnánk mindjárt az öngól fogalmát is.

Azt szeretném végül kérni, hogy a pénzt, amit a mega anyagok előállítására fordítanak, adják át nekem.

1. NB, az Apple iPhone 5s scrollozhatatlan weblapja is pontosan ennyire használhatatlan.

Index.hu redizájn

Élesbe ment az Index.hu redesign. Ma láttam én is először. Első pillantásra úgy tűnt, hogy az Origo.hu-t látom, csak narancssárga-feketében, és, az Origóval ellentétben, reszponzív dizájnban, ami a kommunikációjuk egyik tent pole-ja Kudlik Júliával. Szép, “letisztult” egyébként, de már az Origó is az volt. Picit sajnálom, hogy nem mertek nagyobbat gondolni és érvényesült a szűk közösség csoportdinamikája, ahol inkább egymást nézegetik a közvetlen versenytársak.

Abba érdemes belegondolni, hogy Uj Péter volt az Origo újcímlap rendezője, az Index pedig ennek mintájára lett egy második iteráció, vagyis a két nagy közül gyakorlatilag egyik sem mert semmit lépni Uj Péter iránymutatása nélkül. Ráadásul ugye ott van még a 444 is, ami túlzás nélkül állíthatom, hogy egy teljesen új dolog volt Magyarországon. Új volt ez a címlap melletti hasábban megjelenő gyors hír/mém/érdekesség folyam is, ami most szintén előjött az Indexen is – a 444 után. update: annyiban árnyalni illik a dolgot, hogy még a 444 kiválás alatt közösen kezdtek el ezen gondolkodni

További érdekességek, párhuzamok: az Origo fejlécének betűje Roboto, az Index fejlécének betűje Roboto Condensed. Az Index egyébként két Google betűt használ, Robotót és Open Sanst. Hát nem tudom, elég unalmas választások, majdnem olyan, mint a Calibri, basszus.

Az Origo linkjei nagy #222 feketék, az Index ehhez képest #111 feketét használ. Érdekes, hogy egyik site sem fordít gondot arra, hogy megteremtsen egy egységes vizuális rendszert a linkek jelöléséhez, viszont úgy tűnik az Index ebben a nagyobb zsivány és mindent mindennel kever, forgat, permutál. A látszattal ellentétben például ez nem chat buborék, hanem egy link:

Ez itt egy link:

Ez nem link:

Ez szintén nem link:

Még egy dolog: bullet pointok a cikkekben. A 444-en a leadet váltották le ezzel a funkcióval, azaz egy olyan részt, ami elmondja tömören a cikk lényegét. Az Index láthatóan nem ismerte fel a dolog eredeti jelentését, hiszen ők a lead után hozzák a bullet pontokat újabb extraként. :) Apró szemantikai különbség.

Az Indexnél tehát hiányolom a linkek átgondoltságát, sokallom viszont a szomszédos inspirációt, illetve nem értem az unalmas betűket. Ezek a kritikám cölöpjei, ezek után bele lehetne még menni a részletekbe és mindenféle apróságokra rámutatni, de ezt már feleslegesnek érzem, ráadásul ilyenkor még sok mindent szerelnek. Egy nagyon pozitív példa viszont: a 404 oldaluk, teljesen jó ötlet és vicces is.

Rájuk fért egyébként már nagyon a váltás, de számomra a portáldizájn és előadás prezentációjának csúcsa a magyar neten marad továbbra is az Index.hu Uj Péter-Illés Attila újpesti változata, azt még nem sikerült felülmúlnia senkinek.

Ha valaki szeretne szakkommentálni, ide kattintson.

Címlapügyi híradó

A vs.hu megújulásának kapcsán egy sor információt bújt ki a tavaszi ágyásokból. Megtudtam, hogy néhány héten belül a nol.hu és az index.hu is arculatot, címlapot fog váltani. Az Index esetében már régóta várjuk az újat, ez is belsős munka lesz, fő dizájnere Bokros György @hipra (és persze a mindenhol ott kotnyeleskedő Szabó Zoli). Az Index 2 blogcímlap egyébként több, mint egy éve ment élesbe. A nol.hu szintén érdekes, ott a lead Szabó Gergő @hh – tudtátok, hogy tábla alapú még a dizájnjuk kb. 1998-ból? A vs.hu-t is átvizslattam, azzal a véleménnyel értek egyet, hogy olyan, mint egy fashion-site, egyáltalán nem hírportál fűszerezésű, inkább olyan, mint az a férfi a villamoson, aki egy 5 méteres kölnibuborékban közlekedik – szédelegsz a szippantás után. (A 444-re is van definícióm: asztalra odabaszott, kivert metál.)

update 2014.03.10.: nol.hu éles.
update 2014.03.14.: index.hu éles.

Speed Design with Illustrator

14 remek tipp Vincent Le Moign-tól Adobe Illustratorhöz. Szimbólumok használata moduláris dizájnhoz, grafikus stílus használata gombokhoz, globális színek használata gyors elsődleges színváltáshoz, lekerekített fülek átméretezése torzítás nélkül csupán négy abból a 14 tippből, amit ingyenesen megkapunk. Vincent 2011-es korábbi összefoglalója a témából még a flat korszak előttről pedig itt.

A New Car UI

Hibátlan munka Matthaeus Krenntől:

Nagyon szép weblapot is fejlesztett köré. Lenne egy csomó kérdésem a gyakorlati használhatóságával kapcsolatban, de ez meggyőzött már önmagában. Van még egy csomó másik projektje is ennek a san franciscóban élő fiatalembernek, például a springTo.js, amivel manapság divatos “ruganyos” animációkat készíthetünk JS-ben.