Ben Taylor remek áttekintő posztja arról, hogyan érdemes iOS-re fejleszteni, milyen szabályszerűségeket kövessünk, hogyan működik a felület és milyen dolgokat kell outputolni. Elég sok mindent tudunk már belőle, viszont jól összeszedett, sok kifelé mutató linkkel erős tananyag a téma iránt érdeklődőknek.
/via @ZsoltVajda
Nagyon úgy tűnik, erős bukóban van üzletileg a Facebook telefon home screen. Marco Arment egyenesen kimondja: a dizájn szépen működik, meg látványos, de használni szar, ugyanis a dizájn arra épít, hogy mindenki olyan fotókat rak majd fel magáról, mint amilyeneket Mike Matas készít. Hát nem. Az emberek szar képeket raknak fel magukról, erre tehát nem lehet egy koncepciót felépíteni. Nagyon egyet tudok érteni.
Az alábbi képen melyik számológép készült szkeuomorfikus stílusban?
A válasz: mindkettő. Etele küldte át Sacha Greif francia designer posztját, aki elhatározta, hogy megírja a lehető legtárgyilagosabb, “ultimate” esszét a flat-vs-skeuomorphic témában, posztjának címe: Flat Pixels: The Battle Between Flat Design And Skeuomorphism
Akit mélyebben érdekel a téma, mindenképpen olvassa végig, mert mindkét oldalról elmondja az előnyöket és hátrányokat, én viszont kiemelek néhány gondolatot ide is:
Although to be more precise, this trend is not always about skeuomorphism – which implies a connection to a past incarnation of a similar design – but rather often about realism (…)
sure, those leather textures and page turn animations feel tacky now after we’ve been stuck with them for the past couple years, but when the iPhone was first revealed nobody had seen such visual richness in an operating system’s user interface before (let alone on a phone). (…)
realism done wrong can morph into kitsch (…)
Antoine de Saint-Exupery [said] that “perfection is achieved not when there is nothing left to add, but when there is nothing left to take away” (…)
Flat design also forces you to really care about typography and layout, two areas where web design has traditionally lagged behind its more established print cousin.
Egyetlen dolgot hiányoltam az “ultimate” esszéből, és ezért is érzem túlzónak ezt a minősítést, mert nem beszélt az animációkról benne. Loren Brichter appja egy kalap szart érne, ha nem lenne benne az egészben benne az a digitális könnyűség, ami attól jön elő, amikor az ember elkezd műveleteket végezni a felülettel. Ez az iskola is az iPhone-on kezdődött, mégpedig akkor, amikor észrevettük, hogy túl tudjuk húzni a felületet és finoman visszarugózik a helyére. Jól emlékszem, annak idején mennyire készen voltam ettől az apróságtól. Ajánlott olvasnivaló még a témában: Transitional Interfaces.
Én úgy látom, hogy az út előre az okosan megdizájnolt, visszavágott flat kellemes, átgondolt animációkkal, ami meg tudja tartani az egyensúlyt a “gagyi” és a “túlhajszolt” között.
Végignéztem Terry White CC videóját is, egy csomó dologra nem figyeltem fel korábban. Új upscale filterek:
Másodszor van már benne Adobe ID-k közötti preferencia és workspace (meg action stb.) szinkronizálás. Meglátjuk, mennyire működik jól, mindenesetre ez is olyan dolog, ami manapság már teljesen triviális.
Még egy dolog, ami fontos: innentől bármilyen layert smart objektummá alakítva ráakaszthatunk egy “Camera RAW” filtert. Sajnos elég szerencsétlenül nevezték el, én is ezért léptem át felette, viszont ez egy igazi killer cucc lesz: innentől nem csak akkor kapjuk meg a Camera RAW dialógust, ha képeket importálunk, hanem bármikor. És bármire rátehetjük, akár layerekre is. Ez gyakorlatilag a képfeldolgozó, a menükben található exposure, levels stb. részek inkább csak az oldschool szinkronban tartás miatt maradtak benne.
Elképesztően sok opcióval egészítették ki, ráadásul így megdolgozva a képeket végig non-destructive módban tudjuk feldolgozni őket. Baromira tetszik, hogy tetszőlegesen kiválasztott objektumra tehetünk ilyen “vektor maszkokat”, igen, akár többet is, aztán a beállítások után bármikor visszatérhetünk hozzá. Sőt, a patch tool is teljesen újszerű életre kel ezekkel a “vektoros” állítgatásokkal. (Idézőjelbe teszem a vektor szót, mert nem ez a legmegfelelőbb kifejezés rá, de talán érthető, hogy miért.)
Korábbi posztom után kaptam néhány választ designer körökből:
@angelday a dokumentumhataron kivulrol inditott kijelolessel majd visszazoomolassal mi a baj?
— Zsolt Vajda (@ZsoltVajda) 2013. május 8.
@zsoltvajda @angelday köszönöm, hogy megkérdezted helyettem. Kicsit túlzásnak érzem a problémát.
— György Bokros (@hipra) 2013. május 8.
— Lipovszky Lél Keve (@keve_) 2013. május 8.
Úgy tűnik, nagy a megelégedettség azt illetően, hogy ez egy túllihegett probléma. Ennek némiképp ellentmondani látszik, hogy a néhány nappal ezelőtt bejelentett Photoshop CC-ben javították az általam is nevesített dolgot, sőt, itt van a bemutató videó, amit Hosszú Zoli talált meg (2:29-nél az érdekes rész):
Idézem még az első hozzászólást is YouTube-on:
Finalllyyyyyyyyy!!!!!!!
Ui: Egyébként a videót hallgatva az első gondolatom ez volt: “Hm, ennek a faszinak mennyire magyar akcentusa van!” Utána is kerestem, és tényleg, a Londonban élő Martin Perhiniak magyar származású Adobe Certified előadót halljuk.
Tipikus probléma, ha két shape objektum van egymáson, nem lehet velük könnyedén dolgozni. A legegyszerűbb eset, ha adott egy ilyen modal ablak dizájn, amiben a feladat az, hogy a gomb méretét állítsuk be.
Teljesen hétköznapi rétegek:
A tipikus megközelítés az, ha a “Direct Selection Tool”-lal (“A” billentyű) kijelöljük a jobb szélét a gombnak és a Shift váltóbillentyű lenyomva tartásával arrébb visszük a kontroll pontokat vízszintesen. A probléma itt kezdődik, ugyanis a kattintást a Photoshop azonnal úgy értelmezi, hogy kijelöltük az alatta levő, szintén shape layert:
A réteg is gyönyörűen átáll az alsóra:
Semmit nem értünk el. Kifejezetten idegesítő a jelenség egy komplexebb dokumentumnál, ha véletlen kattintunk így, azonnal elugrik messzire az aktív layer még akkor is, ha lelockoltuk. A Photoshop hülyesége lenne mindez?
Néhány emberrel történt konzultációt követően az alábbi kényelmetlen megoldásokat ismeri a tudomány:
1. húzzuk a kijelölést a háttérobjektumon túlról (sajnos nem minden élethelyzetben alkalmazható)
2. jelöljük ki egyesével a pontokat shifttel
3. konvertáljuk smart objektummá a nagyobb réteget, ettől csak külön ablakban fogjuk tudni méretezni (aminek viszont semmi értelme nincs, mert nem látjuk azt, hogy mi van körülötte), viszont nem fog leakadni a direct selection tool
4. opt-clickeljünk a layereknél a szem ikonon, ez csak az adott réteget mutatja meg (minden mást kikapcsol), végezzük el a módosítást, majd opt-click vissza – sajnos ez sem az igazi, mert szintén nem látszik a kontextus
Sajnos egyik sem tökéletes. A legkisebb fájdalom talán akkor van, ha tudunk “kintről” indítani egy téglalapot, ha nem megy, akkor egyenként kell összefogdosni a pontokat – rémesen körülményes sok esetben. Én vakon nem tudok méretezni, szóval ezzel a kettővel játszom.
+1. érdemes belülről indítani, ebben a példában két jelölésből megvan
Én nagyon egyszerűen meg tudnám oldani a problémát: direct selection tool kattintás után ne ugorjon layert, hiszen az általam aktivált layeren dolgozom.
Even though you might be tempted to use a new tool to work on a new design, I think that’s a bad idea. Instead, I think you should set aside some time to redo an old project or mimic an existing design using the new tool.
Remek ötlet.
Az új Photoshop egyik fontos újítása lesz a “Smart Shape Properties” ablak, ahol az alakzat méretét üthetjük át és állíthatjuk be akár egyesével a lekerekítések mértékét:
Shape layerek méreteit ma is átüthetjük, viszont sajnos az torzítja a lekerekítéseket is, értelme nem sok van. Az új PS-ben előnyös módon a lekerekítések megtartják a formájukat is (citation needed).
Akinek ma lenne szüksége valami ilyesmire, használhatja @shadowxaf Corner Editor scriptjét, ahol hasonló módon üthetjük át a shape layer tulajdonságait.
(Ha már itt tartunk: valaki igazán elárulhatná, hogy egy nagy shape layerre rakott kisebb shape layer handle-jét hogyan lehet kijelölni területtel, ugyanis a klikk regisztrálása után mindig a nagyobb objektum rétegre ugrik automatikusan.)
Véget ér a “Creative Suite” korszak:
Adobe is launching the “CC” family, featuring Photoshop CC, InDesign CC, Illustrator CC, Dreamweaver CC, Premiere Pro CC, deep integration with Behance social features, desktop access to Typekit and more. (…) Just like last year, Adobe is announcing major updates to nearly all of its products, slated for a June release. The difference today is that, without a new Creative Suite, pricing has been simplified — for most people, you’ll have to shell out $49.99 per month.
Meglátjuk az európai árakat, ha tényleg kb. 12 ezer forintba fog kerülni (50 dollár per ma), azt mondom, hogy meg is éri. Jelen pillanatban az előfityus teljes csomag €61,49-be kerül havonta, de egy éves hűséggel, ami ugyan 19 ezer forint, hűség nélkül 27 ezer. (Plusz adó, gondolom.) nem, ez bruttó 12 rugó még 12-vel felszorozva is 144 ezer, de ebből adnak valamennyi kedvezményt is éves előfityu esetén.
Ezt sokkal inkább életszerűnek gondolom, mint azt, hogy 6-800 ezer nettóra vegyék le az embert egy csomagért. Ha tényleg 12 nettó lesz az ára, akkor kb. 7 éven át használhatjuk mindig a legfrissebb Photoshopot és a teljes csomagot, mire kifizetünk nekik 1 millió nettót. Melyik karomba harapjak, melyik karomba harapjak.
Azt meg gondolom mindenki tudja, hogy teljesen nyilvánvalóan a dobozos termék és licencia szűnik csak meg, maga a program, a kódbázis, meg minden egyéb marad ugyanez.
Mik az újdonságok? Ezen a YouTube linken érdemes végigvenni a videókat, van itt minden, például CSS copy-paste is (nem várok sokat tőle).
Megjelenés júniusban.
Az Instagram új logójáról a Stocklogós blogbejegyzésében olvashatunk, ami alapján ez a posztom készült.
Az Instagram régi logóját nem is nevezném nagyon megtervezettnek, mert egyszerűen a 33 dolláros “Billabong” betűtípussal kiírták csak:
Egy évvel ezelőtt áprilisban a Facebook ezer millió dollárért (ennyi pénze még Csányi Sándornak, Magyarország leggazdagabb emberének sincs) megvásárolta a 13 fős céget és az Instagram felhasználóit – köztük engem és a feleségemet.
Mackey Saturday dizájner kapta meg a feladatot, hogy az eredeti logotípia nyomán készítse el a korszerűsített változatot. A feladat nem volt több annál, mint megőrizve az eredeti értékeit készítsen valami egyedit és modernt. Mackey munkához is látott …
… majd előállt a végeredménnyel (régi – új):
Érdemes megnézni a részleteket is:
Nekem erre feláll.
UI/UX fanatikusoknak készült a “Little Big Details” tumblr blog, ahol ötletes, mindenekelőtt nagyon kellemes felületi megoldásokat, valódi példákat sorolnak fel. Kicsit most leült a frissítési gyakoriság, máskülönben érdemes végiglapozgatni és tanulni belőle. Steve halálának évfordulóján az Apple honlapján a logó alja jelent csak meg a faviconok között:
Szándékos, vagy véletlen hiba? Sosem fogjuk megtudni, viszont felkerült ez is a blogra.
A tegnapi Quartz Composer poszt folyományaként Chek remek találata Pasquale D’Silva posztja a modern grafikus felületekben található finom animációk fontosságáról. Erről egy szakkönyvet lehetne írni, elég erős kattanás önmagában a téma, Pasquale éppen csak megkapargatja a felszínt és ad egy csomó szempontot ahhoz, hogyan tervezünk ilyen interface-eket. Én egyébként nem csak iOS-ben látom ezt az irányt, de a modern web is errefelé halad. Pasquale a poszt végén linkel még a Moonbase node editorra is, remélem hamarosan kiderül számomra is majd, hogy mi az a szoftver, amivel kinetikus felületeket és mockupokat tervezünk. Tényleg most érett meg a pillanat erre?
update: A minták egy részét Chris Coyier meg is építette CSS-ben.
Adam Whitcroft 60 leggyakrabban előforduló felületi elemei iPhone álló wireframe-ek gyártásához “stroke” és “solid” változatokban. Nagyon precíz, igényes munka, amiben az összes layer shape-ként szerepel, ingyenesen letölthető innen.
A Webisztánon olvastam, hogy a Facebookhoz vitt Mike Matas team a Facebook Home interakcióit nem Photoshopban, hanem Quartz Composerben rakta össze. A közlés forrása ez az Julie Zhuo blogposzt, amiben néhány kulcs gondolatot is elkaphatunk:
something like Facebook Home is completely beyond the abilities of Photoshop as a design tool. How can we talk about physics-based UIs and panels and bubbles that can be flung across the screen if we’re sitting around looking at static mocks? (Hint: we can’t.) It’s no secret that many of us on the Facebook Design team are avid users of QuartzComposer, a visual prototyping tool that lets you create hi-fidelity demos that look and feel like exactly what you want the end product to be.
Reméltem, hogy ennél több is kiderül a megoldásról, mert már régóta keresem én is a választ erre a kihívásra. Sajnos Zhuo nem ad több tippet ennél, illetve linkel egy másik posztjára:
QuartzComposer, which many designers on our team use, takes weeks or even months to get comfortable with.
A Quartz Composert én is ismerem, persze csak koncepcionálisan, de nehéz elképzelnem, hogy egy node editorban hogyan lehet UI-t és annak interakcióit tervezni. Egyelőre letöltöttem a szoftvert, megnéztem, egyszerűbb dolgokat megcsináltam (mouse-t követő particle generátor, AHHH!), de továbbra sem értem, hogy lesz ebből Facebook Home, illetve interakciók, animációs minták.
update: Dave O’ Brien 12 óra alatt összerakott egy hasonló interakciót, szintén QC-ben:
Egyelőre még nincs tutorial, de indult vele egy branch, le lehet tölteni a sample fájlt is. Sajnos itt olvasom, hogy az Apple deprecate-elni akarja a QC-t update: megoszlanak az ezzel kapcsolatos vélemények, de tény, hogy az Apple régen nyúlt már a QC-hez, úgyhogy talán a Vuo, vagy a Moonbase lehet majd ennek alternatívája, de azt sem tartom elképzelhetetlennek, hogy az Apple fogja az iOS SDK részévé tenni a QC valami továbbfejlesztett változatát.
Picit próbálgatva a mintát arra jöttem rá, hogy elképesztő overkill egy komplett interface-t megcsinálni QC-ben, helyette inkább néhány statikus dolgot kell kiexportálni és úgy lehet illusztrációt készíteni néhány felületi elemből. Azt ki merem jelenteni egy kis vizsgálódás után, hogy nem UI tervezésre való a QC, viszont aki megismeri, az el tudja végezni benne a munkát, apróbb illusztrációkat.
