Conception sur un écran Retina: Mes réflexions sur le MacBook Pro Retina

220, 5 pixels par pouce: 2800 de large et 1800 de haut pour un total de plus de cinq millions de pixels. C'est l'écran sur lequel je travaille maintenant, à plein temps. Cela soulève des tonnes de questions: Apple a-t-il une entreprise qui fabrique un tel écran? Cela aidera-t-il ou entravera-t-il l'industrie? Pouvez-vous vraiment faire un travail de conception sur cette chose si vous concevez des écrans non rétiniens?

Aujourd'hui, je vais vous parler de mon expérience avec la machine qui menace de changer votre façon de faire votre travail. Je ne retiendrai rien alors que je délire sur ce que j'aime et que je déclamerais ce qui me rend fou. Lisez et voyez si vous êtes d'accord avec mes conclusions.

Explorez Envato Elements

Dang You Apple

Au cours de la dernière décennie, nous, les concepteurs, nous sommes concentrés sur la façon de faire face à un changement de paradigme majeur sous la forme de tailles d'écran toujours variables. Ce défi nous a poussés jusqu'au bout, mais nous a fait sortir de l'autre côté de meilleurs designers, capables de réaliser des exploits impressionnants de sites Web vraiment flexibles qui ont fière allure sur n'importe quel écran.

Mediaqueri.es présente une conception Web réactive qui a fière allure partout.

Bien que notre attention se soit concentrée sur un changement de paradigme majeur, un autre s'est glissé sur nous: la résolution. La dynamique derrière ce changement est récemment venue d'Apple avec ses écrans de qualité «rétine», désormais présents sur l'iPhone, l'iPod Touch, l'iPad et le MacBook Pro, avec l'iMac et le MacBook Air qui suivront sans doute dans un an ou deux. .

Apple n'est peut-être pas le premier ou le seul fabricant d'électronique à proposer des écrans haute résolution, et ils ne sont presque jamais les premiers à rien. Cependant, que cela nous plaise ou non, ils ont historiquement établi la marque pour une adoption généralisée des changements technologiques majeurs (c'est la partie où vous sautez tout le reste que je dis afin que vous puissiez vous plaindre de la quantité de ce qui n'est pas vrai dans les commentaires).

Comme avec la révolution de la taille de l'écran, cela présente aux concepteurs un énorme changement de paradigme qui change tout. Cet obstacle peut s'avérer encore plus difficile à surmonter que le précédent et il requiert notre attention et nos spéculations immédiates. En mars, j'ai publié une discussion sur ce même sujet.

Depuis, j'ai acheté un MacBook Pro Retina, la machine qui a cassé l'écran de la rétine hors de son joli petit jardin clos iOS et dans le domaine de quelque chose que les gens de tous types de professions utiliseront pour le travail. Après des semaines de travail à temps plein sur la machine, j'ai pensé qu'il serait approprié de partager mes expériences avec vous.

Les écrans Retina devraient-ils même exister?

«Alors que nous voyons des écrans haute densité devenir de plus en plus gros, je commence à me demander pourquoi? Tout simplement parce que nous le pouvons? " - John Carey
Ombres de cinquante pieds

J'ai lu récemment plusieurs articles de créatifs qui sont en fait assez en colère contre Apple pour avoir poussé l'industrie sur une voie aussi pénible. Comme Ian Malcom fustigeant John Hammond pour sa décision hâtive de ramener les dinosaures d'entre les morts, ces critiques insistent sur le fait que ce n'est pas parce qu'Apple peut faire un tel écran qu'ils le devraient .

Un jour, avec l'écran rétine, j'ai convaincu que les critiques avaient tort. C'est tellement beau. Je peux à peine supporter de regarder mon ancien MacBook. Mes yeux ont été ouverts et tout à coup le même écran avec lequel je n'ai jamais eu de problème a l'air tout à fait sombre et boueux.

Aurions-nous dû nous arrêter au magnétoscope?

La seule façon d'apprécier vraiment à quoi cela ressemble sans en faire l'expérience par vous-même est de trouver un vieux téléviseur CRT et de le brancher à un magnétoscope pour pouvoir regarder un film. Sérieusement, allez l'essayer. En quelques secondes, vous vous demanderez comment, dans le monde, vous avez réussi à supporter une expérience visuelle aussi médiocre. Dix minutes et vous remercierez quotidiennement les dieux de la technologie pour le tout-puissant Blu-ray.

C'était pénible de passer des cassettes VHS, mais avec le recul, ça valait le coup.

Avec la perspective que nous avons maintenant, avec le recul, les clients et les producteurs de l'industrie du film sont mieux lotis pour avoir laissé la bande VHS comme principale méthode de reproduction et de distribution vidéo. La révolution était-elle gênante pour toutes les personnes impliquées? Absolument.

Les créateurs de contenu devaient apprendre, adopter et même développer de nouvelles façons de faire. Les clients ont dû abandonner les anciens équipements et les charges de contenu, faire de nouveaux achats qui semblaient redondants avec les précédents, apprendre le nouveau jargon; C'était le bordel. Et cela ne les a fait que sur la scène DVD, beaucoup sont encore en train de passer au Blu-ray ou peut-être même à une solution purement numérique comme iTunes et l'Apple TV.

«Les avances ne sont pas basées sur le fait de gêner ou non quiconque. Surtout quand Apple est aux commandes. »

L'arrivée de l'informatique haute résolution pose les mêmes problèmes, tant aux consommateurs qu'aux créateurs de contenu. Malheureusement, c'est ainsi que fonctionne l'industrie technologique. Des progrès sont réalisés lorsqu'il existe un marché pour eux et le savoir-faire technologique est présent pour produire un résultat de qualité que les consommateurs peuvent se permettre. Ils ne sont pas basés sur le fait de gêner ou non quiconque. Surtout quand Apple est aux commandes.

Et c'est une bonne chose. Bien sûr, cela peut ne pas sembler, mais gardez à l'esprit que les écrans d'ordinateur ne possédaient autrefois qu'une poignée de couleurs et vous pouvez parier qu'il y avait des gens dans l'industrie à l'époque qui insistaient pour qu'ils n'aillent pas plus loin. Je suis sûr que vous êtes content qu'ils l'aient fait, alors arrêtez d'être l'une des personnes qui sont entraînées à donner des coups de pied et à crier vers le progrès et essayez plutôt d'attaquer les défis de front et de contribuer quelque chose de précieux à la conversation.

Vivre et travailler sur un MacBook Pro Retina

"Je savais qu'il y aurait des problèmes, et il y en a."

La question de savoir si les écrans rétiniens devraient exister sur le marché grand public est vraiment une discussion non pertinente. Ils le font et vous avez deux choix: vous adapter ou mourir. En tant qu'ancien designer en impression seule, j'ai fait face à ce choix, les développeurs Flash sont actuellement confrontés à ce choix, vous pourriez aussi bien rejoindre le club.

Je suis tout à fait sur l'adaptation, j'ai donc pris la voie de l'adopteur précoce et j'ai sauté dans ce train avant de savoir où il allait. J'ai laissé mon MacBook 13 ″ 2007 et j'ai acheté un nouveau et brillant MacBook Pro 15 ″ Retina.

Je savais qu'il y aurait des problèmes, et il y en a. Certains de ceux qui m'inquiétaient ne se sont pas révélés importants, d'autres sur lesquels je ne comptais pas me faufiler et m'ont tourmenté.

Un millier de chapeaux

Chaque jour, je porte plusieurs chapeaux métaphoriques. Je suis designer, écrivain, photographe, navigateur Web, observateur de films; vous l'appelez.

Pour cette raison, je peux offrir un aperçu de nombreuses expériences différentes du point de vue de l'affichage de la rétine. Il est vrai que je ne suis pas un joueur. J'ai grandi attaché à une manette Nintendo et je n'ai jamais été intéressé par les jeux sur PC, vous devrez donc demander ailleurs si vous recherchez des informations dans ce domaine.

Voici un aperçu de certaines des principales catégories d'utilisation quotidienne et de mes réflexions sur chacune.

Utilisation générale du système d'exploitation

J'utilise actuellement OS X Lion et il semble que 99% des mises à jour soient disponibles pour les graphiques de la rétine. De temps en temps, j'attrape le site d'un bouton qui semble pixelisé, mais seulement dans des utilitaires profondément enfouis que peu utilisent même de toute façon.

Pour la plupart, c'est là que l'écran brille. Tout a l'air absolument magnifique. Apple a non seulement mis à jour le système principal, mais également la plupart de ses applications, telles que iMovie.

Applications tierces

Ce domaine était une préoccupation lorsque j'ai acheté la machine, mais il s'est avéré que c'était un problème moins important que je pensais que ce serait.

Beaucoup de mes applications préférées, telles que Sublime Text 2, semblaient brutes au début, mais ont déjà reçu des mises à jour de la rétine qui les rendent meilleures que jamais.

Certes, la plupart des applications n'ont pas encore été mises à jour, mais bien que je suis accro aux applications, il n'y a vraiment pas beaucoup d'applications que j'utilise quotidiennement. À l'exception de CS6, dont nous parlerons plus tard, la seule application que j'utilise tous les jours qui me dérange vraiment est Twitter pour Mac.

Cette application présente vraiment la méchanceté des graphiques non rétiniens sur un écran rétine. Chose intéressante, un texte en direct et modifiable comme celui qui apparaît dans la fenêtre du «nouveau tweet» semble bien, mais tout votre flux est hideux, du texte aux avatars.

Navigation sur le Web

«Ce sont les petites images qui semblent mauvaises. Le petit logo JPG en haut du site, la capture d'écran de l'interface… »

La navigation sur le Web m'a vraiment fait peur. Je savais très bien que le Web est un monde à faible résolution et pointer un écran rétine de 15 pouces, c'est comme prendre une loupe sur une photo à faible DPI.

À ma grande surprise, nous nous sommes remarquablement bien préparés à cette révolution, même par accident. Dans notre obsession d'économiser de la bande passante en créant des graphiques Web sans images, nous construisions en fait un Web infiniment évolutif.

La plupart des interfaces utilisateur de nos jours sont construites avec de bons vieux HTML, CSS et JavaScript. Lancer un écran rétine sur ces graphiques ne fait que les rendre plus beaux! Pour mémoire, on ne peut certainement pas en dire autant des sites Flash.

Le vrai problème réside bien sûr dans les images. Chose intéressante, la plupart de ma navigation sur le Web se passe sans un seul air renfrogné, et je suis un écrou de résolution.

Les photographies professionnelles ont particulièrement tendance à être superbes. Naviguez sur Flickr ou 500px et vous trouverez l'expérience toujours aussi agréable, peut-être encore plus.

Ce sont les petites images qui semblent mauvaises. Le petit logo JPG en haut du site Web, la capture d'écran de l'interface, ceux-ci n'ont vraiment pas beaucoup d'informations à utiliser pour doubler les pixels et semblent donc assez déplorables.

Films et émissions de télévision

Le Retina MacBook Pro a mis au rebut son lecteur optique comme le MacBook Air, donc je n'ai évidemment aucune expérience avec les DVD, mais pour la plupart, les vidéos sont comme des images. Le plus beau est le meilleur et le plus mauvais le pire.

Les films HD téléchargés numériquement brillent sur l'écran tandis que le streaming en direct Netflix / Hulu semble sensiblement irrégulier. Heureusement, la distance à laquelle j'observe généralement une émission est beaucoup plus éloignée que celle où je travaille, de sorte que les problèmes de résolution ne sont généralement pas aussi visibles.

La photographie

Parce que je photographie avec un Canon 5D Mk II, mes photos sont belles et grandes. Ils ont fière allure sur l'écran de la rétine et je n'ai eu aucun problème avec le zoom avant et l'édition de petits détails. Le seul vrai problème est que le logiciel (Photoshop et Lightroom) n'a pas encore été embelli de rétine, même dans CS6.

L'écriture

Du point de vue de l'écriture pure, l'écran de la rétine est incroyablement bon. La typographie à 220 pixels par pouce est une belle chose. Je sélectionne Writeroom, passe en mode plein écran et bloque le monde.

Après quelques heures, il est facile d'oublier à quoi ressemble le bon type. Cependant, quelques secondes après avoir fait apparaître un document texte sur un écran basse résolution, je ne vois que des pixels. Pixels sales et moches.

Le type n'a pas seulement l'air bien à bout de bras non plus. Je peux coller mon visage aussi près de l'écran que mes yeux peuvent gérer et le type semble toujours pointu.

La typographie est magnifiquement nette sur l'écran de la rétine.

Photoshop, conception et captures d'écran

Vient maintenant la partie dont vous voulez vraiment entendre parler: comment est Photoshop? Pouvez-vous concevoir sur cette chose?

Les concepteurs iOS devraient le trouver utile

Je commencerai par dire que je ne suis pas un designer iOS. Ces gars-là ont été contraints de concevoir des graphiques rétiniens sur des écrans non rétiniens jusqu'à présent et j'imagine qu'ils sont impatients de faire le changement.

J'ai le problème opposé: concevoir des graphiques non rétiniens sur un écran rétine. Vous ne vous attendez peut-être pas à ce que ce soit une douleur, mais pour être honnête, c'est vraiment le cas.

C'est parce que vous perdez tout concept de résolution lorsque vous êtes dans la plage de ppp inférieure. Je peux peut-être ignorer les petites images irrégulières lorsque je navigue, mais lorsque je suis dans le fauteuil du créateur, mon cerveau examine chaque pixel.

Pixel doublé oeuvre suce

«Afin de bien comprendre si l'œuvre est à la hauteur ou non, je dois y jeter un œil sur mon ancien écran.»

Sur l'écran de la rétine, tout ce que je crée ou importe dans Photoshop à une résolution Web standard ressemble à de la merde. Même si je construis quelque chose en vecteur, à moins que je ne veuille l'exporter en SVG, et la plupart du temps ce n'est pas une option (pour le moment), il va toujours obtenir la sortie vers un minuscule JPG ou PNG qui a l'air super pixelisé parce que mon écran tente de doubler sa résolution.

Cela présente beaucoup de problèmes délicats, à la fois lorsque je travaille avec ma propre œuvre d'art et celle des autres. Pour ma propre œuvre d'art, dois-je la construire en basse résolution? Cela nuit à ma capacité de juger de sa clarté. Ou devrais-je le construire en haute résolution et le réduire pour outpur? Je ne sais pas si vous l'avez remarqué, mais Photoshop peut vraiment supprimer les illustrations raster lors de la mise à l'échelle.

C'est également un problème lorsque j'utilise des illustrations de quelqu'un d'autre. Si vous êtes un designer, vous recevez probablement souvent des illustrations de tiers qui sont nulles et pixélisées. Par conséquent, vous choisirez d'exiger un meilleur saut d'illustration en l'utilisant complètement.

Pour moi, c'est beaucoup plus difficile, car à première vue, ça va toujours mal paraître sur l'écran de la rétine à moins qu'il ne soit énorme. Afin de bien comprendre si l'œuvre est à la hauteur ou non, je dois la regarder sur mon ancien écran.

Captures d'écran

"Du coup, les captures d'écran que je prends sont deux fois plus grandes que prévu!"

Étant donné que je blogue pour gagner ma vie, je pense qu'il est prudent de dire que je prends plus de captures d'écran que la personne moyenne. Je travaille toujours avec des captures d'écran d'une interface d'application ou d'un site Web et je les inclue dans des publications.

L'écran de la rétine m'a frappé avec une boule de courbe méchante ici. Du coup, les captures d'écran que je prends font le double de la taille que je voulais! Lorsqu'elles sont redimensionnées, les captures d'écran de l'interface utilisateur, avec leurs graphiques raster et leur petit texte, ont vraiment l'air désagréables sur n'importe quel écran, donc j'essaie toujours de les utiliser à 100% lorsque cela est possible.

Avec l'écran rétine, ce qui était auparavant une capture d'écran de 510 pixels de large (la taille d'image standard de Design Shack) a maintenant une largeur de 1 020 pixels. Si j'ignore complètement les utilisateurs de la rétine et prétends qu'ils n'existent pas, la logique dit que je devrais servir des images de 510 pixels de large, ce qui signifie que je dois les redimensionner manuellement dans Photoshop et accepter le fait qu'elles ressemblent à ce qu'elles étaient juste écrasé par un camion, en particulier en ce qui concerne le texte tramé.

Attention, ils me paraissent bien pire que la plupart des utilisateurs car, vous l'aurez deviné, je suis sur un écran rétine.

Changer votre résolution stupide

J'ai présenté mon dilemme de capture d'écran à quelques personnes différentes et elles disent toutes la même chose: changez simplement votre résolution! Cela semble être une solution parfaitement viable, mais il s'avère que ce n'est pas aussi simple que cela.

Le Retina MacBook Pro est livré avec cinq paramètres de résolution différents. Voici ce qui se passe si je choisis deux résolutions différentes, je prends une capture d'écran de la même fenêtre exacte, puis je les colle côte à côte dans Photoshop.

Comme vous pouvez le voir, ils ont exactement la même taille. La modification de la résolution dans les Préférences Système affecte la taille globale de la capture d'écran totale, mais la plupart du temps, les éléments de la capture d'écran restent inchangés.

Pour mémoire, voici combien de cette fenêtre je peux tenir dans un document de 510px de large en taille réelle:

Si vous venez de maudire, alors votre réaction a été parfaite avec la mienne.

Travailler sur un écran clair et net

"Passer la moitié de la journée à sauter entre un écran rétinien et non rétinien m'a littéralement fait me sentir mal de la mer!"

Sur mon ancien MacBook, je travaillais généralement à pleine luminosité. J'ai lu des tonnes de choses sur la durée de vie de la batterie, la fatigue oculaire et ainsi de suite, mais je n'ai jamais aimé son apparence à moins que la luminosité ne soit activée.

Sur ce nouvel écran, la pleine luminosité est absolument trop lumineuse pour la plupart des scénarios d'éclairage. Écran rétine? Plus comme un écran brûlant la rétine. C'est génial cependant, je préférerais de beaucoup avoir un écran trop lumineux et qui doit être baissé.

Chose intéressante, j'ai remarqué quelques maux de tête occasionnels depuis le changement. L'écran est si lumineux et net que vous penseriez qu'il serait plus agréable pour les yeux, mais il pourrait y avoir un point où il irait trop loin et causerait plus de fatigue oculaire qu'il n'en économise. Tant que je garde la luminosité sous contrôle, je ne pense pas que ce sera un problème majeur à long terme.

La netteté de l'écran n'était vraiment qu'un problème le premier jour, lorsque je transférais tout de l'ancienne machine à la nouvelle. Passer la moitié de la journée à sauter entre un écran rétinien et non rétinien m'a littéralement fait me sentir mal de la mer!

Douleurs de croissance

«Les nouvelles technologies entraînent de nouveaux défis et les premiers utilisateurs comme moi en paient le prix»

Alors voilà, ma liste complète des éloges et des plaintes concernant mon nouveau MacBook Pro Retina. Intentionnellement, cet article se concentre sur les défis de travailler sur un écran rétinien plus que sur les avantages. Si je suis complètement honnête, les avantages m'époustouflent et je ne regrette pas du tout mon achat. J'adore cet ordinateur et n'hésiterai pas à dire que c'est le meilleur que j'aie jamais utilisé.

Toutes les difficultés que j'ai énumérées ci-dessus ne sont que des douleurs de croissance. Les nouvelles technologies entraînent de nouveaux défis et les premiers utilisateurs comme moi sont ceux qui paient le prix (au sens propre et au sens propre) en échange de la possession de nouveaux jouets brillants que personne d'autre n'a.

Des années plus tard, lorsque tous les nouveaux ordinateurs atteindront 220ppi et disposeront de disques SSD en tant que composants standard, le prix de cette technologie sera beaucoup plus abordable et les pénalités pour son utilisation presque inexistantes.

Comparaison de résolution d'écran d'ordinateur de The Verge

À peu près toutes les plaintes que j'ai énumérées ci-dessus se résument vraiment au fait que je possède un ordinateur avec un écran de résolution plus élevée que les personnes pour lesquelles je conçois. Une fois que nous serons tous sur la même longueur d'onde, tout sera considérablement simplifié.

Je dirai cependant que posséder un appareil avec un écran de qualité rétine peut augmenter votre sentiment d'urgence pour le problème d'image auquel nous sommes maintenant confrontés sur le Web. Vous voulez que les utilisateurs de la rétine aient de belles images, mais cela vaut-il le temps de chargement pour les utilisateurs non rétiniens? Heureusement, des solutions vraiment géniales comme Retina.js commencent à surgir qui vont atténuer ce problème.

Pourtant, un avenir proche où nous devrons créer et télécharger le double des images que nous avions l'habitude de faire n'est pas exactement quelque chose qui nous passionne, n'est-ce pas?

Qu'est-ce que tu penses?

Avec un peu de chance, cette énorme diatribe n'était pas une pile complète de radotage. Mon intention était d'aider les designers qui se demandent s'ils devraient ou non acheter un Mac rétine à prendre une décision éclairée. Trop de sources ne répertorient actuellement que les bons ou les mauvais et je voulais partager toutes mes pensées et vous laisser décider par vous-même si un Mac rétine est bon pour vous.

Sur cette note, qu'en pensez-vous? Si vous n'avez pas encore acheté un ordinateur avec un écran de qualité rétine, pensez-vous que vous le ferez bientôt? Pourquoi ou pourquoi pas? Si oui, qu'en pensez-vous? Le recommanderiez-vous à d'autres?