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 una pantalla así? ¿Ayudará u obstaculizará la industria? ¿Realmente puedes hacer un trabajo de diseño en esa cosa si estás diseñando para pantallas sin retina?

Hoy voy a contarles todo sobre mi experiencia con la máquina que amenaza con cambiar la forma en que hace su trabajo. No retendré nada, ya que deliré acerca de lo que amo y de lo que me vuelve loco. Lea y vea si está de acuerdo con mis conclusiones.

Dang You Apple

Durante la última década, los diseñadores se han centrado en cómo abordar un cambio de paradigma importante en forma de tamaños de pantalla que varían constantemente. Este desafío nos ha llevado al extremo de nuestro ingenio, pero nos ha sacado a relucir mejores diseñadores, capaces de lograr hazañas impresionantes de sitios web realmente flexibles que se ven muy bien en cualquier tamaño de pantalla.

Mediaqueri.es presenta un diseño web sensible que se ve genial en cualquier lugar.

Si bien nuestra atención se centró en un cambio de paradigma principal, otro nos sorprendió: la resolución. El impulso detrás de este cambio ha llegado recientemente de Apple con su? Retina? Pantallas de calidad, ahora presentes en el iPhone, iPod Touch, iPad y MacBook Pro, con el iMac y el MacBook Air sin duda seguirán en algún momento durante 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 son casi nunca 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 omite todo lo que digo, por lo que puede decirle que 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 enorme 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, he comprado una Retina MacBook Pro, la máquina que rompió la pantalla retina de su pequeño y bonito jardín amurallado con iOS y en el ámbito de algo que la gente de todo tipo de profesiones usará 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.

¿Deben 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


He leído varios artículos últimamente de creativos que en realidad están bastante enojados con Apple por empujar a la industria por un camino tan problemático. Al igual que Ian Malcom que castigó a John Hammond por su apresurada decisión de devolver a los dinosaurios de la muerte, estos críticos insisten en que solo porque Apple puede hacer tal pantalla, no significa que debería.

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

¿Deberíamos haber parado en el VCR?

La única manera de apreciar realmente cómo es esto sin experimentarlo es encontrar un viejo televisor CRT y conectarlo a una videograbadora para poder ver una película. En serio, ve a intentarlo. En cuestión de segundos, se preguntará cómo en el mundo ha 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.

Fue un dolor cambiar de las cintas VHS, 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 cinematográfica están mejor por haber dejado atrás la cinta VHS como el método principal de reproducción y distribución de videos. ¿Fue la revolución inconveniente para todos los involucrados? Absolutamente.

Los creadores de contenido tenían que aprender, adoptar e incluso desarrollar nuevas formas de hacer las cosas. Los clientes tenían que abandonar equipos viejos y un montón de contenido, hacer nuevas compras que parecían redundantes con las anteriores, aprender una nueva jerga; fue un desastre. Y eso solo los llevó al escenario del DVD, muchos todavía están en medio de saltar a Blu-ray o quizás incluso a una solución puramente digital como iTunes y el Apple TV.

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


La llegada de la computación 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 alguna vez los monitores de computadoras solo poseían un puñado de colores y se puede apostar a que había personas en la industria en el momento que insistían en que no fueran más lejos. Estoy seguro de que estás contento de que lo hayan hecho, así que deja de ser una de las personas que patean y gritan para progresar y en su lugar 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 hay".


El hecho de que existan o no pantallas de retina en el mercado general es realmente una discusión irrelevante.Lo hacen, y usted tiene dos opciones: adaptarse o morir. Como antiguo diseñador de impresión, me enfrenté a esta opción, los desarrolladores de Flash actualmente se enfrentan a esta opción, así que también podría unirse al club.

Me gusta la adaptación, así que tomé la ruta de los primeros adoptantes y me subí a este tren antes de tener una idea de a dónde iba. Dejé atrás mi MacBook 2007 de 13 "y compré un nuevo 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 contaba se me habían colado y me han frustrado.

Mil sombreros

En un día cualquiera, llevo varios sombreros metafóricos. Soy diseñador, escritor, fotógrafo, navegador web, observador de películas; lo que sea

Debido a esto, puedo ofrecer información sobre muchas experiencias diferentes desde el punto de vista de la retina. La única cosa que ciertamente no es un jugador. Crecí conectado a un controlador de Nintendo y nunca me interesaron los juegos de PC, así que tendrás que preguntar en otra parte si estás buscando información en esa área.

He aquí un vistazo a algunas categorías principales de uso diario y mis pensamientos sobre cada uno.

Uso general del sistema operativo

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

En su mayor parte, aquí es donde la pantalla brilla. 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 era una preocupación cuando compré la máquina, pero resultó ser un problema menos importante que pensé que sería.

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

Por supuesto, la mayoría de las aplicaciones no se han actualizado todavía, 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 veremos 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 aparece en el? Nuevo tweet? La ventana se ve bien, pero todo tu flujo es horrible, desde texto a avatares.

Buscando en la web

? Es las pequeñas imágenes 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 tenía asustado. Sabía muy bien que la web es un mundo de baja resolución y apuntar con una pantalla de retina de 15 "es como llevar una lupa a una foto con un DPI bajo.

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

La mayoría de la interfaz de usuario en estos días se construye con buenos viejos HTML, CSS y JavaScript. Lanzar una pantalla retina a estos gráficos solo hace que se vean mejor. Para el registro, ciertamente no se puede decir lo mismo 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 gesto, y soy una loca de resolución.

Las fotografías profesionales tienden a lucir geniales. Navega por Flickr o 500px y encontrarás la experiencia tan placentera como siempre, tal vez incluso más.

Son las pequeñas imágenes 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 con la que trabajar para duplicar los píxeles y, por lo tanto, parecen bastante deplorables.

Películas y programas de televisión

La Retina MacBook Pro desechó su unidad óptica igual que la MacBook Air, así que obviamente no tengo experiencia con DVD, pero en su mayor parte, los videos son como imágenes. Los grandes se ven mejor y los malos se ven 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 notorios.

Fotografía

Como tomo con una Canon 5D Mk II, mis fotos salen muy bien. Se ven muy bien en la pantalla de la retina y no he tenido ningún problema con el zoom y la edición de detalles finos. El único problema real es que el software (Photoshop y Lightroom) aún no se ha embellecido con 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 una cosa hermosa. 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 mostrar un documento de texto en una pantalla de baja resolución, todo lo que veo son píxeles. Píxeles sucios, feos.

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

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

Photoshop, Diseño y Capturas de pantalla.

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

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

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

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

Esto se debe a que pierde todo el concepto de resolución cuando se encuentra en el rango inferior de ppi. Podría ser capaz de ignorar las pequeñas imágenes jaggy cuando estoy navegando, pero cuando estoy en la silla del creador, mi cerebro examina cada píxel.

Pixel duplica ilustraciones chupa

"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 la retina, todo lo que creo o importo en Photoshop a 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 no es una opción (todavía), aún así tendrá salida a un pequeño JPG o PNG que parece súper pixelado porque Mi pantalla intenta duplicar su resolución.

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

También es un problema cuando estoy usando ilustraciones de otra persona. Si eres un diseñador, entonces es probable que recibas obras de arte de terceros que están mal hechas y pixeladas. Por lo tanto, elegirás exigir un mejor trabajo artístico, omitiéndolo 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. Con el fin de tener una idea de si la obra de arte está o no a la par, 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 hago un blog para ganarme la vida, 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 las publicaciones.

La pantalla de la retina me golpeó con una 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 pequeño, realmente se ven desagradables en cualquier pantalla, por lo que siempre trato de usarlas al 100% cuando sea posible.

Con la pantalla 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 la retina y pretendo que no existen, la lógica dice que debo mostrar imágenes con un ancho de 510px, lo que significa que tengo que cambiarles el tamaño manualmente en Photoshop y soportar el hecho de que se ven como si fueran solo es atropellado por un camión, particularmente cuando se trata de texto rasterizado.

Ten en cuenta que, por supuesto, a mí me parecen peor que a la mayoría de los usuarios porque, lo adivinaste, estoy en una pantalla retina.

Cambia tu resolución estupido

He presentado mi dilema de captura de pantalla a diferentes personas y todos dicen lo mismo: ¡simplemente cambia tu resolución! Esto parece una solución perfectamente viable, pero resulta que no es tan simple.

La 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, luego las pegué una al lado de la otra en Photoshop.

Como puedes 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 de la captura de pantalla no se modifican.

Para el registro, aquí está la cantidad de esa ventana que puedo encajar en un documento de 510px de tamaño completo:

Si acabas de maldecir, 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 retina y una pantalla sin retina literalmente me hizo sentir mareado!"


En mi viejo MacBook, normalmente trabajaba a pleno brillo. He leído un montón de cosas sobre la vida útil de la batería, la fatiga visual y otras cosas, pero nunca me gustó su aspecto a menos que se disparara el brillo.

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

Curiosamente, he notado algunos dolores de cabeza ocasionales desde el cambio. La pantalla es tan brillante y nítida que uno pensaría que sería más fácil para los ojos, pero podría haber un punto en el que vaya demasiado lejos y cause más tensión ocular de la que se ahorra. Mientras mantengo el brillo bajo control, no creo que este sea un problema importante a largo plazo.

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

Dolores de crecimiento

? Con la nueva tecnología vienen nuevos desafíos y los primeros usuarios como yo somos los que pagamos el precio?


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 estoy siendo completamente honesto, los beneficios me impactan y no me arrepiento ni un poco 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 somos los que pagamos 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 estén alcanzando 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 su uso casi inexistentes.

Comparación de resolución de la pantalla del ordenador de The Verge

Casi todas las quejas que enumeré anteriormente 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 con calidad de retina puede aumentar su sentido de urgencia para el problema de imagen que ahora enfrentamos en la web. Desea que los usuarios de la retina tengan hermosas imágenes, pero ¿vale la pena el tiempo de carga para los usuarios que no usan la retina? Afortunadamente, algunas soluciones realmente impresionantes como Retina.js están empezando a surgir, lo que aliviará este problema.

Aún así, un futuro cercano donde tenemos que crear y cargar el doble de imágenes que solíamos no es exactamente algo para entusiasmarnos, ¿verdad?

¿Qué piensas?

Con suerte, esta gran perorata no era una pila completa de tonterías. Mi intención era ayudar a los diseñadores que se preguntan si deberían o no comprar una Mac retina para tomar una decisión informada. Demasiadas fuentes actualmente están listando solo lo bueno o lo malo, y quería compartir todos mis pensamientos y dejarte decidir por ti mismo si una retina Mac es adecuada para ti.

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 tienes, ¿qué te parece? ¿Lo recomendaría a otros?