Diseñar en una pantalla Retina: Mis pensamientos sobre la Retina MacBook Pro

220.5 píxeles por pulgada: 2.800 de ancho y 1.800 de alto para un total de más de cinco millones de píxeles. Esa es la pantalla en la que trabajo ahora, a tiempo completo. Esto da lugar a toneladas de preguntas: ¿Apple tiene algún negocio haciendo tal pantalla? ¿Ayudará u obstaculizará la industria? ¿Realmente puedes hacer trabajo de diseño en esa cosa si estás diseñando para pantallas sin retina?

Hoy les contaré todo sobre mi experiencia con la máquina que amenaza con cambiar la forma en que hacen su trabajo. No retendré nada mientras delira sobre lo que amo y despotrica sobre lo que me vuelve loco. Siga leyendo y vea si está de acuerdo con mis conclusiones.

Explore los elementos de Envato

Dang You Apple

Durante la última década, los diseñadores nos hemos centrado en cómo abordar un cambio de paradigma importante en forma de tamaños de pantalla siempre variables. Este desafío nos ha estirado hasta el final, pero nos trajo al otro lado mejores diseñadores, capaces de lograr hazañas impresionantes de sitios web verdaderamente flexibles que se ven geniales en pantallas de cualquier tamaño.

Mediaqueri.es presenta un diseño web receptivo que se ve muy bien en cualquier lugar.

Si bien nuestra atención se centró en un cambio de paradigma importante, otro nos coló: la resolución. El impulso detrás de este cambio ha venido recientemente de Apple con sus pantallas de calidad "retina", ahora presentes en el iPhone, iPod Touch, iPad y MacBook Pro, y el iMac y MacBook Air, sin duda, seguirán en algún momento en el próximo año o dos. .

Es posible que Apple no sea el primer o único fabricante de productos electrónicos en impulsar pantallas de alta resolución, ni casi nunca son los primeros en nada. Sin embargo, nos guste o no, históricamente han establecido la marca para la adopción generalizada de los principales cambios tecnológicos (esta es la parte en la que omiten todo lo demás que digo para que puedan despotricar sobre cuánto esto no es cierto en los comentarios).

Al igual que con la revolución del tamaño de la pantalla, esto presenta a los diseñadores un gran cambio de paradigma que lo cambia todo. Este obstáculo puede resultar aún más difícil de superar que el anterior y requiere nuestra atención y especulación inmediatas. En marzo, publiqué una discusión sobre este mismo tema.

Desde entonces, compré una Retina MacBook Pro, la máquina que rompió la pantalla de retina de su pequeño jardín amurallado con iOS y en el ámbito de algo que las personas de todo tipo de profesiones usarán para trabajar. Después de semanas de trabajar en la máquina a tiempo completo, pensé que sería apropiado compartir mis experiencias con usted.

¿Deberían existir pantallas de retina?

“Cuando vemos que las pantallas de alta densidad se hacen cada vez más grandes, empiezo a preguntarme, ¿por qué? ¿Solo porque podemos? - John Carey
Sombras de cincuenta pies

Últimamente he leído varios artículos de creativos que están realmente enojados con Apple por empujar a la industria por un camino tan problemático. Al igual que Ian Malcom castigando a John Hammond por su apresurada decisión de resucitar a los dinosaurios de entre los muertos, estos críticos insisten en que solo porque Apple pueda hacer esa pantalla, no significa que deberían hacerlo .

Un día con la pantalla de retina me convenció de que los críticos están equivocados. Es tan hermoso. Apenas puedo soportar mirar mi viejo MacBook. Mis ojos se abrieron y de repente la misma pantalla con la que nunca tuve un problema se ve francamente oscura y fangosa.

¿Deberíamos habernos detenido en la videograbadora?

La única forma de apreciar realmente cómo es esto sin experimentarlo usted mismo es encontrar un televisor CRT antiguo y conectarlo a una videograbadora para poder ver una película. En serio, ve a probarlo. En cuestión de segundos te preguntarás cómo en el mundo has logrado soportar una experiencia visual tan pobre. Diez minutos de esto y estarás agradeciendo a los dioses de la tecnología diariamente por el todopoderoso Blu-ray.

Cambiar las cintas VHS fue una molestia, pero mirando hacia atrás ahora, valió la pena.

Con la perspectiva que tenemos ahora, mirando hacia atrás, tanto los clientes como los productores de la industria del cine están mejor por haber dejado atrás la cinta VHS como el método principal de reproducción y distribución de video. ¿La revolución fue inconveniente para todos los involucrados? Absolutamente.

Los creadores de contenido tuvieron que aprender, adoptar e incluso desarrollar nuevas formas de hacer las cosas. Los clientes tuvieron que abandonar equipos viejos y un montón de contenido, realizar nuevas compras que parecían redundantes con las anteriores, aprender nuevas jergas; fue un desastre. Y eso solo los llevó a la etapa de DVD, muchos todavía están en medio de saltar a Blu-ray o tal vez incluso a una solución puramente digital como iTunes y Apple TV.

“Los avances no se basan en si incomodarán o no a alguien. Especialmente cuando Apple está en el asiento del conductor ".

La llegada de la informática de alta resolución presenta los mismos problemas, tanto para los consumidores como para los creadores de contenido. Desafortunadamente, así es como funciona la industria de la tecnología. Los avances se hacen cuando hay un mercado para ellos y el conocimiento tecnológico está presente para producir un resultado de calidad que los consumidores puedan pagar. No se basan en si incomodarán o no a alguien. Especialmente cuando Apple está en el asiento del conductor.

Y eso es algo bueno. Claro, puede que no lo parezca, pero tenga en cuenta que una vez los monitores de computadora solo poseían un puñado de colores y puede apostar que había personas en la industria en el momento que insistieron en que no iban más allá. Estoy seguro de que te alegra que lo hayan hecho, así que deja de ser una de las personas arrastradas a patear y gritar hacia el progreso y, en cambio, intenta atacar los desafíos de frente y contribuir con algo valioso a la conversación.

Vivir y trabajar en una Retina MacBook Pro

"Sabía que habría algunos problemas, y los hay".

Si las pantallas de retina deben existir o no en el mercado principal es realmente una discusión irrelevante. Lo hacen, y usted tiene dos opciones: adaptarse o morir. Como ex diseñador de solo impresión me enfrenté a esta elección, los desarrolladores de Flash se enfrentan actualmente a esta opción, también podrías unirte al club.

Me gusta mucho la adaptación, así que tomé la ruta de los primeros usuarios y me subí a este tren antes de tener idea de a dónde iba. Dejé atrás mi MacBook 2007 de 13 ″ y compré una nueva y brillante Retina MacBook Pro de 15 ″.

Sabía que habría algunos problemas, y los hay. Algunos de los que me preocupaban resultaron no ser un gran problema, otros con los que no conté y me acosaron con la frustración.

Mil sombreros

En cualquier día, uso varios sombreros metafóricos. Soy diseñador, escritor, fotógrafo, navegador web, observador de películas; Tu dilo.

Debido a esto, puedo ofrecer una visión de muchas experiencias diferentes desde el punto de vista de la retina. Lo único que ciertamente no soy es un jugador. Crecí conectado a un controlador de Nintendo y nunca tuve interés en los juegos de PC, por lo que tendrás que preguntar en otro lugar si estás buscando información en esa área.

Aquí hay un vistazo a algunas categorías principales de uso diario y mis pensamientos sobre cada una.

Uso general del sistema operativo

Actualmente estoy ejecutando OS X Lion y parece 99% actualizado para gráficos de retina. De vez en cuando veo un botón que parece pixelado, pero solo en utilidades profundamente enterradas que pocos incluso usan de todos modos.

En su mayor parte, aquí es donde brilla la pantalla. Todo se ve absolutamente impresionante. Apple no solo ha actualizado el sistema central, sino también la mayoría de sus aplicaciones, como iMovie.

Aplicaciones de terceros

Esta área fue una preocupación cuando compré la máquina, pero resultó ser un problema menos significativo de lo que pensé.

Muchas de mis aplicaciones favoritas, como Sublime Text 2, parecían difíciles al principio, pero ya han recibido actualizaciones de retina que las hacen mejores que nunca.

De acuerdo, la mayoría de las aplicaciones aún no se han actualizado, pero a pesar de ser un adicto a las aplicaciones, realmente no hay tantas aplicaciones que uso a diario. Con la exclusión de CS6, que discutiremos más adelante, la única aplicación que uso todos los días que realmente me molesta es Twitter para Mac.

Esta aplicación realmente muestra la maldad de los gráficos sin retina en una pantalla de retina. Curiosamente, el texto en vivo y editable como el que se produce en la ventana "nuevo tweet" se ve bien, pero toda su transmisión es horrible, desde el texto hasta los avatares.

Buscando en la web

“Son las imágenes pequeñas las que se ven mal. El pequeño logotipo de JPG en la parte superior del sitio web, la captura de pantalla de la interfaz ... "

La navegación web realmente me asustó. Sabía muy bien que la web es un mundo de baja resolución y apuntar una pantalla de retina de 15 ″ es como llevar una lupa a una foto con bajo DPI.

Para mi sorpresa, nos preparamos para esta revolución notablemente bien, aunque sea por accidente. En nuestra obsesión por ahorrar ancho de banda al crear gráficos web sin imágenes, en realidad estábamos construyendo una web que es infinitamente escalable.

La mayoría de la IU en estos días está construida con buenos viejos HTML, CSS y JavaScript. ¡Lanzar una pantalla de retina a estos gráficos solo los hace ver mejor! Para el registro, lo mismo ciertamente no se puede decir de los sitios Flash.

El verdadero problema, por supuesto, radica en las imágenes. Curiosamente, la mayor parte de mi navegación web transcurre sin un solo ceño, y soy un fanático de la resolución.

Las fotografías profesionales especialmente tienden a verse geniales. Navegue a Flickr o 500px y encontrará la experiencia tan agradable como siempre, tal vez aún más.

Son las imágenes pequeñas las que se ven mal. El pequeño logotipo de JPG en la parte superior del sitio web, la captura de pantalla de la interfaz, realmente no tienen mucha información para trabajar para duplicar los píxeles y, por lo tanto, parecen bastante deplorables.

Películas y programas de televisión

El Retina MacBook Pro desechó su unidad óptica al igual que el MacBook Air, por lo que obviamente no he tenido ninguna experiencia con los DVD, pero en su mayor parte, los videos son como imágenes. Lo genial se ve mejor y lo malo se ve peor.

Las películas HD descargadas digitalmente brillan en la pantalla, mientras que la transmisión en vivo de Netflix / Hulu se ve notablemente irregular. Afortunadamente, la distancia a la que normalmente veo un programa está mucho más atrás que donde trabajo, por lo que los problemas de resolución generalmente no son tan notables.

Fotografía

Debido a que disparo con una Canon 5D Mk II, mis fotos salen bien y grandes. Se ven muy bien en la pantalla de retina y no he tenido ningún problema con el acercamiento y la edición de detalles finos. El único problema real es que el software (Photoshop y Lightroom) aún no se ha embellecido en la retina, incluso en CS6.

Escritura

Desde un punto de vista de escritura pura, la pantalla de retina es asombrosamente buena. La tipografía a 220 píxeles por pulgada es algo hermoso. Levanto Writeroom, cambio al modo de pantalla completa y bloqueo el mundo.

Después de unas horas, es fácil olvidar lo bien que se ve el tipo. Sin embargo, a los pocos segundos de abrir un documento de texto en una pantalla de baja resolución, todo lo que veo son píxeles. Píxeles sucios y feos.

El tipo no solo se ve bien con el brazo extendido tampoco. Puedo pegar mi cara tan cerca de la pantalla como mis ojos pueden manejar y el tipo todavía parece afilado.

La tipografía es maravillosamente nítida en la pantalla de retina.

Photoshop, diseño y capturas de pantalla

Ahora viene la parte que realmente quieres escuchar: ¿cómo es Photoshop? ¿Puedes diseñar sobre esta cosa?

Los diseñadores de iOS deberían encontrarlo útil

Comenzaré diciendo que no soy un diseñador de iOS. Estos muchachos se han visto obligados a diseñar gráficos de retina en pantallas sin retina hasta ahora e imagino que están ansiosos por hacer el cambio.

Tengo el problema opuesto: diseñar gráficos sin retina en una pantalla de retina. Es posible que no esperes que sea un dolor, pero para ser sincero, realmente lo es.

Esto se debe a que pierde todo concepto de resolución cuando está en el rango inferior de ppi. Es posible que pueda ignorar pequeñas imágenes irregulares cuando estoy navegando, pero cuando estoy en la silla del creador, mi cerebro examina cada píxel.

Pixel Doubled Artwork apesta

"Para tener una idea adecuada de si la obra de arte está a la par o no, tengo que echarle un vistazo en mi pantalla anterior".

En la pantalla de retina, todo lo que creo o importo en Photoshop con una resolución web estándar parece una mierda. Incluso si construyo algo en vector, a menos que esté dispuesto a exportarlo como un SVG, y la mayoría de las veces eso no es una opción (todavía), seguirá obteniendo resultados en un pequeño JPG o PNG que se ve súper pixelado porque mi pantalla intenta duplicar su resolución.

Esto presenta muchos problemas difíciles, tanto cuando estoy trabajando con mi propia obra de arte como con la de otros. Para mi propia obra de arte, ¿debería construirla en baja resolución? Hacerlo perjudica mi capacidad de juzgar su claridad. ¿O debería construirlo en alta resolución y reducirlo para obtener una salida? No estoy seguro de si lo has notado, pero Photoshop realmente puede destruir las ilustraciones ráster al escalar.

También es un problema cuando uso ilustraciones de otra persona. Si eres diseñador, probablemente recibas obras de arte de terceros que son malas y pixeladas. Consecuentemente, optará por exigir una mejor omisión de obras de arte usándola por completo.

Para mí, esto es mucho más difícil, porque a primera vista, siempre se verá mal en la pantalla de la retina a menos que sea enorme. Para tener una idea adecuada de si la obra de arte está a la par o no, tengo que echarle un vistazo en mi pantalla anterior.

Capturas de pantalla

"¡De repente, las capturas de pantalla que tomo son el doble del tamaño que pretendía!"

Dado el hecho de que blogueo para vivir, creo que es seguro decir que tomo más capturas de pantalla que la persona promedio. Siempre estoy trabajando con capturas de pantalla desde una interfaz de aplicación o sitio web e incluyéndolos en publicaciones.

La pantalla de retina me golpeó con una bola curva perversa aquí. ¡De repente, las capturas de pantalla que tomo son el doble del tamaño que pretendía! Cuando se cambia el tamaño, las capturas de pantalla de la interfaz de usuario, con sus gráficos de trama y texto minúsculo, realmente se ven desagradables en cualquier pantalla, por lo que siempre trato de usarlas al 100% cuando sea posible.

Con la pantalla de retina, lo que solía ser una captura de pantalla de 510 píxeles de ancho (el tamaño de imagen estándar de Design Shack) ahora tiene 1, 020 píxeles de ancho. Si ignoro por completo a los usuarios de retina y finjo que no existen, la lógica dice que debería mostrar imágenes de 510px de ancho, lo que significa que tengo que redimensionarlas manualmente en Photoshop y tolerar el hecho de que parecen ser simplemente atropellado por un camión, particularmente cuando se trata de texto rasterizado.

Eso sí, me parecen peor que la mayoría de los usuarios porque, lo adivinaste, estoy en una pantalla de retina.

Cambia tu resolución estúpida

He presentado mi dilema de captura de pantalla a algunas personas diferentes y todas dicen lo mismo: ¡solo cambie su resolución! Parece una solución perfectamente viable, pero resulta que no es tan simple.

El Retina MacBook Pro viene con cinco configuraciones de resolución diferentes. Esto es lo que sucede si elijo dos resoluciones diferentes, tomo una captura de pantalla de la misma ventana exacta y luego las pego una al lado de la otra en Photoshop.

Como puede ver, salen exactamente del mismo tamaño. Cambiar la resolución en Preferencias del sistema afecta el tamaño general de la captura de pantalla total, pero la mayoría de las veces los elementos dentro de la captura de pantalla no cambian.

Para el registro, esta es la cantidad de esa ventana que puedo caber en un documento de 510 px de ancho a tamaño completo:

Si solo maldiges, entonces tu reacción fue acertada con la mía.

Trabajando en una pantalla brillante y nítida

"¡Pasar la mitad del día saltando entre una pantalla de retina y otra sin retina literalmente me hizo sentir mareada!"

En mi viejo MacBook, típicamente trabajaba con brillo completo. He leído toneladas de cosas sobre la duración de la batería, la fatiga visual y otras cosas, pero nunca me gustó la forma en que se veía a menos que el brillo se disparase.

En esta nueva pantalla, el brillo total es absolutamente demasiado brillante para la mayoría de los escenarios de iluminación. Pantalla de la retina? Más como la retina quemando la pantalla. Sin embargo, esto es genial, preferiría tener una pantalla que sea demasiado brillante y deba rechazarse.

Curiosamente, he notado algunos dolores de cabeza ocasionales desde el cambio. La pantalla es tan brillante y nítida que pensarías que es más fácil para los ojos, pero puede haber un punto en el que va demasiado lejos y causa más fatiga visual de la que ahorra. Mientras mantenga el brillo bajo control, no creo que este sea un problema importante a largo plazo.

La nitidez de la pantalla fue solo un problema el primer día, cuando estaba transfiriendo todo desde la máquina vieja a la nueva. ¡Pasar la mitad del día saltando entre una pantalla de retina y otra sin retina literalmente me hizo sentir mareado!

Dolores de crecimiento

"Con la nueva tecnología vienen nuevos desafíos y los primeros en adoptar como yo son los que pagan el precio"

Así que ahí lo tienen, mi lista completa de elogios y quejas con respecto a mi nuevo Retina MacBook Pro. Intencionalmente, este artículo se centra en los desafíos de trabajar en una pantalla de retina más que en los beneficios. Si soy completamente honesto, los beneficios me sorprenden y no me arrepiento de mi compra. Me encanta esta computadora y no dudaré en decir que es la mejor que he usado.

Todas las luchas que he enumerado anteriormente son simplemente dolores de crecimiento. Con la nueva tecnología vienen nuevos desafíos y los primeros usuarios como yo son los que pagan el precio (en sentido figurado y literal) a cambio de poseer juguetes nuevos y brillantes que nadie más tiene.

Años después, cuando todas las computadoras nuevas lleguen a 220ppi y tengan unidades de estado sólido como componentes estándar, el precio de esta tecnología será mucho más asequible y las penalidades por usarla son casi inexistentes.

Comparación de resolución de pantalla de computadora de The Verge

Casi todas las quejas que enumeré anteriormente realmente se reducen al hecho de que tengo una computadora con una pantalla de mayor resolución que las personas para las que estoy diseñando. Una vez que todos estemos en la misma página, todo se simplificará dramáticamente.

Sin embargo, diré que poseer un dispositivo con una pantalla de calidad de retina puede aumentar su sensación de urgencia por el problema de imagen que ahora enfrentamos en la web. Desea que los usuarios de retina tengan bellas imágenes, pero ¿vale la pena el tiempo de carga para los usuarios que no son de retina? Afortunadamente, algunas soluciones realmente increíbles como Retina.js están comenzando a surgir que aliviarán este problema.

Aún así, un futuro cercano en el que tenemos que crear y cargar el doble de las imágenes que solíamos no es exactamente algo por lo que emocionarnos, ¿verdad?

¿Qué piensas?

Con suerte, esta gran diatriba no era un montón de tonterías. Mi intención era ayudar a los diseñadores que se preguntaban si deberían comprar una retina Mac o no a tomar una decisión informada. En la actualidad, hay demasiadas fuentes que enumeran solo lo bueno o solo lo malo y quería compartir todos mis pensamientos y permitirle decidir por sí mismo si una retina Mac es adecuada para usted.

En esa nota, ¿qué te parece? Si aún no ha comprado una computadora con una pantalla con calidad de retina, ¿cree que lo hará pronto? ¿Por qué o por qué no? Si es así, ¿qué te parece? ¿Lo recomendaría a otros?