Ontwerpen op een Retina-scherm: My Thoughts op de Retina MacBook Pro

220, 5 pixels per inch: 2800 breed en 1800 hoog voor een totaal van meer dan vijf miljoen pixels. Dat is het scherm waar ik nu fulltime aan werk. Dit roept talloze vragen op: heeft Apple een bedrijf dat zo'n scherm maakt? Zal het de industrie helpen of hinderen? Kun je echt ontwerpwerk doen aan dat ding als je ontwerpt voor schermen zonder retina?

Vandaag ga ik je alles vertellen over mijn ervaring met de machine die de manier waarop je je werk doet dreigt te veranderen. Ik zal niets inhouden als ik enthousiast ben over wat ik leuk vind en tieren over wat me gek maakt. Lees verder en kijk of u het eens bent met mijn conclusies.

Verken Envato Elements

Dang You Apple

De afgelopen tien jaar hebben wij als ontwerpers gefocust op het aanpakken van een grote paradigmaverschuiving in de vorm van steeds wisselende schermformaten. Deze uitdaging heeft ons tot het uiterste gebracht, maar heeft ons ook betere ontwerpers opgeleverd, die indrukwekkende prestaties kunnen leveren van echt flexibele websites die er geweldig uitzien op elk scherm.

Mediaqueri.es toont responsive webdesign dat er overal geweldig uitziet.

Hoewel we onze aandacht hadden gericht op één grote paradigmaverschuiving, kwam er een andere op ons af: resolutie. Het momentum achter deze verschuiving kwam onlangs van Apple met zijn "retina" -kwaliteitsdisplays, die nu aanwezig zijn op de iPhone, iPod Touch, iPad en MacBook Pro, en de iMac en MacBook Air zullen ongetwijfeld enige tijd volgen in de komende twee jaar .

Apple is misschien niet de eerste of enige elektronicafabrikant die schermen met een hoge resolutie pusht, en ze zijn ook bijna nooit de eerste. Maar of je het nu leuk vindt of niet, ze hebben historisch gezien het merkteken gezet voor de brede acceptatie van grote technologische verschuivingen (dit is het deel waar je al het andere overslaat dat ik zeg, zodat je kunt tieren over hoezeer dit niet waar is in de opmerkingen).

Net als bij de revolutie van de schermgrootte, biedt dit ontwerpers een enorme paradigmaverschuiving die alles verandert. Deze hindernis is misschien nog moeilijker te overwinnen dan de vorige en vereist onze onmiddellijke aandacht en speculatie. In maart plaatste ik een discussie over dit onderwerp.

Sindsdien heb ik een Retina MacBook Pro gekocht, de machine die het netvlies uit zijn mooie kleine ommuurde tuin in iOS brak en in het rijk van iets dat mensen van alle soorten beroepen voor hun werk zullen gebruiken. Na weken fulltime aan de machine te hebben gewerkt, dacht ik dat het gepast zou zijn om mijn ervaringen met u te delen.

Moeten retina-schermen zelfs bestaan?

“Als we zien dat schermen met een hoge dichtheid steeds groter worden, begin ik me af te vragen, waarom? Gewoon omdat we dat kunnen? ' - John Carey
Vijftig voetschaduwen

Ik heb de laatste tijd verschillende artikelen gelezen van creatievelingen die eigenlijk best boos zijn op Apple omdat ze de industrie zo'n lastig pad hebben geduwd. Zoals Ian Malcom John Hammond hekelt voor zijn haastige beslissing om dinosaurussen terug te brengen uit de dood, staan ​​deze critici erop dat alleen omdat Apple zo'n scherm kan maken, dit niet betekent dat ze dat zouden moeten doen .

Op een dag overtuigde me met het netvliesscherm dat de critici ongelijk hadden. Het is gewoon zo mooi. Ik kan amper meer staan ​​om naar mijn oude MacBook te kijken. Mijn ogen zijn geopend en ineens ziet hetzelfde scherm waar ik nooit een probleem mee had ronduit donker en modderig.

Moeten we stoppen bij de videorecorder?

De enige manier om echt te waarderen hoe dit is zonder het zelf te ervaren, is door een oude CRT-televisie te vinden en deze aan te sluiten op een videorecorder zodat je een film kunt kijken. Serieus, ga het proberen. Binnen enkele seconden zult u zich afvragen hoe u in de wereld ooit zo'n slechte visuele ervaring hebt doorstaan. Tien minuten hiervan en je zult de technologiegoden dagelijks bedanken voor de almachtige Blu-ray.

Het was lastig om over te schakelen van VHS-banden, maar als ik nu terugkijk, was het het waard.

Met het perspectief dat we nu hebben, terugkijkend, zijn zowel de klanten als de producenten in de filmindustrie beter af omdat ze de VHS-tape hebben achtergelaten als de primaire methode voor videoreproductie en -distributie. Was de revolutie lastig voor alle betrokkenen? Absoluut.

Contentmakers moesten gloednieuwe manieren van werken leren, adopteren en zelfs ontwikkelen. Klanten moesten oude apparatuur en heel veel inhoud achterlaten, nieuwe aankopen doen die overbodig leken bij eerdere, en nieuw jargon leren; het was een troep. En dat bracht ze alleen op het dvd-podium, velen zijn nog steeds bezig met het springen naar Blu-ray of misschien zelfs een puur digitale oplossing zoals iTunes en de Apple TV.

“Voorschotten zijn niet gebaseerd op het feit of ze iemand hinder zullen bezorgen of niet. Zeker als Apple achter het stuur zit. ”

De komst van computers met hoge resolutie levert dezelfde problemen op, zowel voor consumenten als voor makers van inhoud. Zo werkt de technologie-industrie helaas. Er wordt vooruitgang geboekt wanneer er een markt voor hen is en de technologische knowhow aanwezig is om een ​​kwaliteitsresultaat te produceren dat consumenten zich kunnen veroorloven. Ze zijn niet gebaseerd op het feit of ze iemand hinder zullen bezorgen of niet. Zeker als Apple achter het stuur zit.

En dat is een goede zaak. Natuurlijk lijkt het misschien niet zo, maar houd er rekening mee dat computermonitors eens maar een handvol kleuren bezaten en je kunt er zeker van zijn dat er mensen in de branche waren die erop stonden dat ze niet verder gingen. Ik weet zeker dat je blij bent dat ze dat deden, dus wees niet langer een van de mensen die trappend en schreeuwend vooruit worden gesleurd en probeer in plaats daarvan uitdagingen aan te gaan en iets waardevols bij te dragen aan het gesprek.

Leven en werken op een Retina MacBook Pro

'Ik wist dat er wat problemen zouden zijn, en die zijn er.'

Of retina-schermen al dan niet op de reguliere markt zouden moeten bestaan, is echt een irrelevante discussie. Dat doen ze, en je hebt twee keuzes: aanpassen of sterven. Als voormalig ontwerper van alleen afdrukken stond ik voor deze keuze, Flash-ontwikkelaars staan ​​momenteel voor deze keuze, u kunt net zo goed lid worden van de club.

Ik ben helemaal over aanpassing, dus ik nam de early adopter-route en sprong op deze trein voordat ik enig idee had waar het naartoe ging. Ik liet mijn 13 ″ MacBook 2007 achter en kocht een glimmende nieuwe 15 ″ Retina MacBook Pro.

Ik wist dat er wat problemen zouden zijn, en die zijn er. Sommigen van degenen waar ik me zorgen over maakte, bleken geen groot probleem te zijn, anderen waar ik niet op rekende en die me tot frustratie hebben geplaagd.

Duizend hoeden

Op een willekeurige dag draag ik verschillende metaforische hoeden. Ik ben een ontwerper, schrijver, fotograaf, webbrowser, filmkijker; noem maar op.

Hierdoor kan ik inzicht geven in veel verschillende ervaringen vanuit het oogpunt van een retina-display. Het enige dat ik weliswaar niet ben, is een gamer. Ik ben opgegroeid met een Nintendo-controller en heb nooit interesse gehad in pc-gaming, dus je zult ergens anders moeten vragen of je op zoek bent naar inzicht op dat gebied.

Hier is een blik op enkele hoofdcategorieën van dagelijks gebruik en mijn gedachten daarover.

Algemeen OS-gebruik

Ik gebruik momenteel OS X Lion en het lijkt 99% bijgewerkt voor grafische retina. Af en toe vang ik een knop op die er korrelig uitziet, maar alleen in diep begraven hulpprogramma's die maar weinigen zelfs gebruiken.

Dit is waar het display voor het grootste deel uitblinkt. Alles ziet er absoluut schitterend uit. Apple heeft niet alleen het kernsysteem bijgewerkt, maar ook de meeste van zijn apps, zoals iMovie.

Apps van derden

Dit gebied was een probleem toen ik de machine kocht, maar het bleek een minder belangrijk probleem te zijn dat ik dacht dat het zou zijn.

Veel van mijn favoriete apps, zoals Sublime Text 2, zagen er aanvankelijk ruw uit, maar hebben al retina-updates ontvangen die ze beter dan ooit maken.

Toegegeven, de meeste apps zijn nog niet bijgewerkt, maar ondanks dat ik een app-verslaafde ben, zijn er echt niet zoveel apps die ik dagelijks gebruik. Met uitzondering van CS6, dat we later zullen bespreken, is Twitter voor Mac de enige app die ik elke dag gebruik en me echt irriteert.

Deze app toont echt de smerigheid van niet-retina-afbeeldingen op een retina-display. Interessant genoeg ziet live, bewerkbare tekst zoals die in het venster "nieuwe tweet" er goed uitziet, maar je hele stream is afschuwelijk, van tekst tot avatars.

Surfen

'Het zijn de kleine afbeeldingen die er slecht uitzien. Het kleine JPG-logo bovenaan de website, de schermafbeelding van de interface ... ”

Surfen op het web maakte me echt bang. Ik wist heel goed dat internet een wereld met een lage resolutie is en dat het erop gericht is om een ​​15-inch retina-scherm te richten, alsof je een vergrootglas meeneemt naar een foto met een lage dpi.

Tot mijn verbazing hebben we ons opmerkelijk goed voorbereid op deze revolutie, ook al is het per ongeluk. In onze obsessie om bandbreedte te besparen door webafbeeldingen zonder afbeeldingen te bouwen, bouwden we eigenlijk een web dat oneindig schaalbaar is.

De meeste gebruikersinterface is tegenwoordig gebouwd met goede oude HTML, CSS en JavaScript. Door een retina-display naar deze afbeeldingen te gooien, zien ze er alleen maar beter uit! Voor de goede orde kan hetzelfde zeker niet gezegd worden van Flash-sites.

Het echte probleem ligt natuurlijk bij afbeeldingen. Interessant genoeg gaat het grootste deel van mijn surfen op het web zonder een frons, en ik ben een resolutie-moer.

Vooral professionele foto's zien er vaak geweldig uit. Cruise naar Flickr of 500px en je zult de ervaring net zo leuk vinden als altijd, misschien zelfs nog meer.

Het zijn de kleine afbeeldingen die er slecht uitzien. Het kleine JPG-logo bovenaan de website, de schermafbeelding van de interface, deze hebben echt niet veel informatie om mee te werken voor pixelverdubbeling en zien er daarom behoorlijk betreurenswaardig uit.

Films en tv-programma's

De Retina MacBook Pro heeft zijn optische station net als de MacBook Air geschrapt, dus ik heb duidelijk geen ervaring met dvd's, maar voor het grootste deel zijn video's als afbeeldingen. De grote ziet er beter uit en de slechte ziet er slechter uit.

Digitaal gedownloade HD-films schitteren op het scherm terwijl Netflix / Hulu live streaming er merkbaar grillig uitziet. Gelukkig is de afstand waarop ik meestal een show bekijk veel verder terug dan waar ik werk, dus eventuele resolutieproblemen zijn meestal niet zo merkbaar.

Fotografie

Doordat ik fotografeer met een Canon 5D Mk II komen mijn foto's lekker groot uit. Ze zien er geweldig uit op het retina-display en ik heb geen problemen gehad met inzoomen en het bewerken van fijne details. Het enige echte probleem is dat de software (Photoshop & Lightroom) nog niet is verfraaid met het netvlies, zelfs niet in CS6.

Schrijven

Vanuit het oogpunt van puur schrijven is het netvliesscherm verbazingwekkend goed. Typografie met 220 pixels per inch is prachtig. Ik trek Writeroom omhoog, schakel over naar de modus Volledig scherm en blokkeer de wereld.

Na een paar uur vergeet je gemakkelijk hoe goed het type eruitziet. Binnen enkele seconden nadat ik een tekstdocument op een scherm met lage resolutie heb weergegeven, zie ik alleen pixels. Vuile, lelijke pixels.

Het type ziet er ook niet alleen goed uit op armlengte. Ik kan mijn gezicht zo dicht mogelijk bij het scherm houden als mijn ogen aankunnen en het type lijkt nog steeds scherp.

Typografie is prachtig scherp op het netvliesscherm.

Photoshop, ontwerp en screenshots

Nu komt het deel waarover u echt wilt horen: hoe is Photoshop? Kun je op dit ding ontwerpen?

iOS-ontwerpers moeten het nuttig vinden

Ik zal beginnen met te zeggen dat ik geen iOS-ontwerper ben. Deze jongens zijn tot nu toe gedwongen om netvliesafbeeldingen op niet-netvliesschermen te ontwerpen en ik stel me voor dat ze graag willen overstappen.

Ik heb het tegenovergestelde probleem: het ontwerpen van niet-netvliesafbeeldingen op een netvliesscherm. Je verwacht misschien niet dat het vervelend zal zijn, maar om eerlijk te zijn, is het echt zo.

Dit komt omdat u alle conceptresolutie verliest wanneer u zich in het lagere ppi-bereik bevindt. Ik kan misschien kleine grillige afbeeldingen negeren als ik aan het browsen ben, maar als ik in de stoel van de maker zit, onderzoeken mijn hersenen elke pixel.

Pixel verdubbeld artwork zuigt

"Om een ​​goed beeld te krijgen of het kunstwerk al dan niet in orde is, moet ik het op mijn oude scherm bekijken."

Op het retina-scherm ziet alles wat ik maak of importeer in Photoshop met een standaard webresolutie als onzin. Zelfs als ik iets in vector bouw, tenzij ik bereid ben om het als SVG te exporteren, en meestal (nog) geen optie is, zal het nog steeds uitvoer krijgen naar een kleine JPG of PNG die er super gepixeleerd uitziet omdat mijn scherm probeert de resolutie te verdubbelen.

Dit levert veel lastige problemen op, zowel wanneer ik met mijn eigen artwork werk als dat van anderen. Moet ik het voor mijn eigen kunstwerk met een lage resolutie bouwen? Door dit te doen, kan ik de helderheid ervan niet beoordelen. Of moet ik het met hoge resolutie bouwen en het verkleinen voor outpur? Ik weet niet zeker of je het hebt opgemerkt, maar Photoshop kan rasterillustraties echt vernietigen bij het schalen.

Het is ook een probleem wanneer ik illustraties van iemand anders gebruik. Als u een ontwerper bent, ontvangt u waarschijnlijk vaak illustraties van derden die waardeloos en korrelig zijn. U zult er daarom voor kiezen om beter artwork te eisen, waarbij u het helemaal gebruikt.

Voor mij is dit veel moeilijker, want op het eerste gezicht ziet het er altijd slecht uit op het netvlies, tenzij het enorm is. Om een ​​goed beeld te krijgen of het kunstwerk al dan niet in orde is, moet ik het op mijn oude scherm bekijken.

Screenshots

"Plotseling zijn de screenshots die ik maak dubbel zo groot als ik had bedoeld!"

Gezien het feit dat ik blog voor de kost, denk ik dat het veilig is om te zeggen dat ik meer screenshots maak dan de gemiddelde persoon. Ik werk altijd met screenshots van een app-interface of website en neem ze op in posts.

Het netvliesvertoning raakte me hier met een slechte kromming. Plots zijn de screenshots die ik maak dubbel zo groot als ik had bedoeld! Wanneer de grootte is gewijzigd, zien schermafbeeldingen van de gebruikersinterface, met hun rasterafbeeldingen en kleine tekst, er echt smerig uit op elk scherm, dus ik probeer ze altijd waar mogelijk 100% te gebruiken.

Met het retina-scherm was wat vroeger een screenshot van 510 pixels breed was (de standaard Design Shack-afbeeldingsgrootte) nu 1.020 pixels breed. Als ik retina-gebruikers volledig negeer en doe alsof ze niet bestaan, zegt de logica dat ik afbeeldingen moet presenteren die 510px breed zijn, wat betekent dat ik ze handmatig in Photoshop moet verkleinen en moet accepteren dat ze eruit zien alsof ze waren gewoon overreden door een vrachtwagen, vooral als het om gerasterde tekst gaat.

Let wel, ze zien er natuurlijk slechter uit dan de meeste gebruikers, want je raadt het al, ik sta op een netvliesscherm.

Verander je resolutie dom

Ik heb mijn screenshot-dilemma aan een paar verschillende mensen gepresenteerd en ze zeggen allemaal hetzelfde: verander gewoon je resolutie! Dit lijkt een perfect haalbare oplossing, maar zo eenvoudig blijkt het niet te zijn.

De Retina MacBook Pro wordt geleverd met vijf verschillende resolutie-instellingen. Dit is wat er gebeurt als ik twee verschillende resoluties kies, een schermafbeelding van hetzelfde exacte venster maak en ze vervolgens in Photoshop naast elkaar plak.

Zoals je kunt zien, komen ze exact dezelfde maat uit. Het wijzigen van de resolutie in Systeemvoorkeuren heeft invloed op de totale grootte van de totale schermafbeelding, maar meestal blijven de elementen in de schermafbeelding ongewijzigd.

Voor de goede orde, hier is hoeveel van dat venster ik op volledige grootte in een 510px breed document kan passen:

Als je gewoon vervloekt was, was je reactie perfect met die van mij.

Werken aan een helder, scherp scherm

"Een halve dag springen tussen een netvlies- en een niet-netvliesscherm maakte me letterlijk zeeziek!"

Op mijn oude MacBook werkte ik meestal met volledige helderheid. Ik heb heel veel dingen gelezen over de levensduur van de batterij, vermoeide ogen en zo, maar ik vond het nooit leuk hoe het eruit zag, tenzij de helderheid werd aangezwengeld.

Op dit nieuwe scherm is de volledige helderheid absoluut te helder voor de meeste lichtscenario's. Retina-scherm? Meer als retina brandend scherm. Dit is echter geweldig, ik heb liever een scherm dat te helder is en moet worden afgewezen.

Interessant genoeg heb ik sinds het overschakelen af ​​en toe wat hoofdpijn opgemerkt. Het scherm is zo helder en scherp dat je zou denken dat het gemakkelijker is voor de ogen, maar er kan een punt zijn dat het te ver gaat en meer vermoeide ogen veroorzaakt dan het bespaart. Zolang ik de helderheid onder controle houd, denk ik niet dat dit op lange termijn een groot probleem zal zijn.

De scherpte van het scherm was eigenlijk alleen een probleem op de eerste dag, toen ik alles van de oude machine naar de nieuwe overbracht. Ik bracht de halve dag door met springen tussen een netvlies en een niet-netvliesscherm, waardoor ik me letterlijk zeeziek voelde!

Groeipijn

"Nieuwe technologie brengt nieuwe uitdagingen met zich mee en early adopters zoals ik zijn degenen die de prijs betalen"

Dus daar heb je het, mijn volledige lijst met lof en klachten over mijn nieuwe Retina MacBook Pro. Dit artikel is opzettelijk meer gericht op de uitdagingen van het werken op een netvliesscherm dan op de voordelen. Als ik helemaal eerlijk ben, blazen de voordelen me weg en heb ik geen spijt van mijn aankoop. Ik ben helemaal weg van deze computer en zal niet aarzelen om te zeggen dat dit de beste is die ik ooit heb gebruikt.

Alle worstelingen die ik hierboven heb genoemd, zijn slechts groeipijnen. Nieuwe technologie brengt nieuwe uitdagingen met zich mee en early adopters zoals ik zijn degenen die de prijs betalen (figuurlijk en letterlijk) in ruil voor het bezit van glanzend nieuw speelgoed dat niemand anders heeft.

Jaren later, wanneer alle nieuwe computers 220ppi bereiken en solid state drives als standaardcomponenten hebben, zal het prijskaartje voor deze technologie veel betaalbaarder zijn en zullen de straffen voor het gebruik ervan bijna niet bestaan.

Computerschermresolutie vergelijking van The Verge

Bijna elke klacht die ik hierboven heb genoemd, komt eigenlijk neer op het feit dat ik een computer bezit met een scherm met een hogere resolutie dan de mensen waarvoor ik ontwerp. Als we allemaal op dezelfde pagina staan, wordt alles drastisch vereenvoudigd.

Ik zal echter zeggen dat het bezit van een apparaat met een netvlieskwaliteitsscherm je gevoel van urgentie kan versterken voor het beeldprobleem dat we nu op internet tegenkomen. U wilt dat netvliesgebruikers prachtige afbeeldingen hebben, maar is het de moeite waard om te laden voor niet-netvliesgebruikers? Gelukkig beginnen enkele echt geweldige oplossingen zoals Retina.js op te duiken die dit probleem zullen verlichten.

Toch is een nabije toekomst waarin we dubbele afbeeldingen moeten maken en uploaden die we vroeger waren niet bepaald iets om enthousiast over te worden, toch?

Wat denk je?

Hopelijk was deze enorme tirade geen complete stapel geklets. Het was mijn bedoeling ontwerpers te helpen die zich afvragen of ze wel of niet een retina-Mac moeten kopen om een ​​weloverwogen beslissing te nemen. Te veel bronnen vermelden momenteel alleen het goede of alleen het slechte en ik wilde al mijn gedachten delen en u laten beslissen of een retina-Mac al dan niet geschikt voor u is.

Wat denk je, wat dat betreft? Als u nog geen computer met een retina-kwaliteit beeldscherm hebt gekocht, denkt u dat binnenkort te doen? Waarom of waarom niet? Zo ja, wat vind je ervan? Zou je het aan anderen aanbevelen?