Share
La web ha sufrido algunos cambios serios en los últimos años y la forma en que está diseñada la web está cambiando junto con ella. Es posible que Photoshop siga siendo la herramienta de "acceso" para muchos diseñadores web, pero para algunos, Photoshop ya no es el rey. En este artículo, Ian Yates, Editor de Webdesigntuts + explicará cómo se usó Photoshop en el pasado, cómo se puede usar en el futuro y por qué.
Técnicamente hablando, Photoshop es una aplicación para manipular imágenes (perdóname por indicar lo obvio), pero también está repleto de herramientas para crear gráficos desde cero. Forma, vector, tipo, rellenos y efectos, todos estos (y más) se prestan muy bien para construir diseños gráficos.
No hace mucho tiempo, los navegadores web eran incapaces de generar directamente este tipo de efectos, pero podían mostrar imágenes de mapa de bits perfectamente bien. Para explorar el diseño gráfico en un navegador, era lógico llegar a Photoshop, crear imágenes, guardarlas como imágenes y usarlas dentro de una página web.
Gradientes, sombras, patrones, ángulos; todo es fácil de crear con las herramientas de Photoshop, no demasiado fácil de crear con cualquier otra cosa.
Construir para la web también era relativamente complejo (mucho menos aerodinámico que en la actualidad), por lo que burlarse de un diseño en Photoshop siempre iba a ser más fácil y rápido que luchar con Dreamweaver. ¿Por qué no diseñar en una aplicación de gráficos, obtener la aprobación del cliente?, entonces En realidad construir para la web? Los diseñadores de hoy en día han crecido utilizando Photoshop porque ofrecía la forma más rápida de visualizar un concepto de diseño de alta fidelidad..
kuhboom.com: los diseños web con texturas densas lo llevarán a buscar la herramienta de división. Cuando la web era un medio emergente, no existían "agencias web", por lo que la tarea de crearla correspondía a los diseñadores de impresión. Estos chicos hicieron lo que era lógico; tomaron su experiencia de diseño de impresión digital, valores, técnicas, procesos y herramientas, y luego los aplicaron a este nuevo mundo valiente. Efectivamente portaron el diseño de impresión a la pantalla, por lo que el flujo de trabajo ya existía:
Todo lo que necesitaba alterar era la salida final. Como tal, Photoshop fue testigo de los cambios y siguió adelante con el viaje, arraigándose como el mejor amigo del diseñador gráfico..
Los tiempos están cambiando (como dijo Bob Dylan). La web es un lugar diferente en estos días y el rol de Photoshop en el proceso de diseño para esa web también está cambiando. Por qué?
Una gran parte del problema radica en los avances tecnológicos que han impulsado grandes cambios en el diseño web en los últimos años. Hemos visto crecer Internet desde una biblioteca de documentos estáticos hasta un conjunto interactivo de servicios y aplicaciones. Los proveedores de redes han extendido sus dedos en casi todos los rincones del mundo, el ancho de banda y la velocidad han aumentado a niveles similares a los de la ciencia ficción. Los dispositivos habilitados para Internet, como teléfonos inteligentes, tabletas e incluso relojes, se fabrican de manera asequible y rápida. Todo esto ha revolucionado la forma en que usamos la web, y ha alterado drásticamente nuestra percepción de cómo deberíamos diseñar para ella..
Los diseñadores de impresión comienzan con restricciones (las dimensiones fijas de una página) y luego diseñan dentro de ellas. Cuando se diseñó por primera vez para la web, este fue también un punto de partida lógico; Establecer un lienzo fijo y trabajar hacia adentro. Para averiguar cuáles deberían ser esas dimensiones fijas, los diseñadores tuvieron que hacer suposiciones sobre el tamaño de la pantalla del usuario final. Muy temprano en 800x600px fue el más común. Más tarde, 1024x800px fue la norma. Trabajar en una cuadrícula de 960px tenía sentido porque se ajustaba a la mayoría de las pantallas (las pantallas más grandes eran raras, los propietarios de pantallas más pequeñas tendrían que actualizarse eventualmente) y era divisible por un rango de anchos de columna.
Estas suposiciones eran erróneas entonces (obligando a un usuario a ajustar su navegando a tu ¿Diseño ?!) y lo son aún más en estos días. ¿Qué tan grande es una página web hoy??
De Brad Frost's Esta es la Web En mayo de 2010, un tipo llamado Ethan Marcotte escribió sobre una idea brillante que había concebido. Tomando las tecnologías y los métodos existentes, propuso un enfoque "Diseño web sensible" que utilizaba diseños fluidos (no fijos), imágenes flexibles (que aumentan y disminuyen con el diseño) y Consultas de medios CSS (que permiten que los diseños cambien según el tamaño de la pantalla). otros factores).
Con estas ideas la web cambió, irreversiblemente..
Gracias a los conceptos de Ethan, los diseñadores web se han dado cuenta de que deberían estar pensando desde el principio. contenido hacia afuera, no la límites de página hacia adentro (aunque hay que señalar que este enfoque no es obligatorio). No sabemos qué tan grande es una página web, por lo que necesitamos diseñar nuestro contenido para que se ajuste a los límites a los que se enfrenta. Piense en el contenido web como si fuera líquido; Se puede verter en todo tipo de recipientes..
Aquí hay un problema para Photoshop. Photoshop trabaja inherentemente a los límites fijos. Las formas, tipos y objetos dentro de sus diseños son fijos, mientras que las páginas web no lo son cada vez más. La producción de una composición para presentar a un cliente solía lograrse rápidamente en Photoshop, pero ¿cómo se puede presentar efectivamente un diseño fluido como una instantánea estática??
La próxima web presentada por mediaqueri.es. La tipografía es otro gran ejemplo de diseñadores de impresión que intentan imponer restricciones a los usuarios finales. El navegador de cada usuario les da la posibilidad de establecer su tamaño de tipo predeterminado; después de todo, algunas personas prefieren letras más pequeñas, mientras que otras prefieren una experiencia de lectura más fácil con letras más grandes. De forma predeterminada, los navegadores generalmente establecen el tipo en 16px, por lo que, a menos que un diseñador indique lo contrario, o un usuario modifique el valor predeterminado, así es como será la copia del cuerpo grande.
Los diseñadores de impresión, sin embargo, tienen una dificultad real para renunciar a este control. "¡¿Cómo puede permitir que el usuario defina el tamaño del tipo ?! ¿Tiene alguna idea de lo que hará con el resto del diseño?"
Bloquear el tamaño de fuente dentro de un diseño web (a través de CSS) ayudará en gran medida a evitar que ocurra algo impredecible, pero no es fácil de usar. En estos días, se considera la mejor práctica para dimensionar los elementos de página y la tipografía usando ems en lugar de píxeles; Unidades de medida relativas que se basan en el tamaño de fuente predeterminado. Por lo tanto, si un navegador tiene un tamaño de fuente predeterminado diferente, todo el diseño puede flexionarse en respuesta a eso.
Esta flexibilidad, una vez más, resalta las limitaciones del diseño de comps estáticas en Photoshop.
Los navegadores se están desarrollando muy rápidamente en estos días y las imágenes ya no son necesarias para muchos efectos en la web. CSS es capaz de producir gradientes precisos, curvas, objetos sesgados, sombras, transparencia alfa (la lista continúa) y esto es así dado el inicio de las pantallas Retina. Las pantallas de retina (o, más precisamente, las pantallas de alta densidad de píxeles) realmente han lanzado una llave en el trabajo para los diseñadores web. Las pantallas Retina tienen el doble de píxeles que las pantallas normales, lo que les permite el lujo de hacer que todo sea súper nítido. Sin embargo, cualquier elemento basado en píxeles se explota dos veces más ancho que el doble, lo que resulta en una calidad comparativamente inferior.
Para que los sitios web conserven su nitidez, los diseñadores tienen que confiar lo más posible en lo que el navegador puede mostrar. De hecho, la tendencia reciente hacia "Diseño plano" es (en parte) una reacción a este diseño web basado únicamente en CSS.
Todo esto elimina una gran parte de lo que hace Photoshop (producir mapas de bits) de la ecuación.
Kit de interfaz de usuario plana de Designmodo Como hemos mencionado, la web se ha vuelto verdaderamente global gracias a la expansión de los dispositivos móviles. Nos obliga a darnos cuenta de que no podemos conocer las circunstancias en las que se accede a nuestro contenido. No sabemos si nuestro usuario final está sentado en el sofá con un Kindle, volando en parapente con un iPhone o corriendo por el Desierto de Gobi con una MacBook Pro. No sabemos qué tan grande es su pantalla, cómo es su procesador y, igualmente, no podemos asumir que la conexión es tan rápida..
Estamos empezando a darnos cuenta de que el rendimiento es una parte fundamental del diseño para la web. De nuevo, las imágenes juegan un papel en esto. Cada activo individual (ya sea una imagen, un guión, un documento, lo que sea) que se extrae de un servidor web es costoso.
En lugar de guardar archivos como imágenes y fuentes en una carpeta llamada "activos", voy a cambiar el nombre de la carpeta "pasivos".
- Jeremy Keith (@adactio) 18 de febrero de 2013
No solo deben optimizarse para ser lo más pequeños posible, sino que también deben ser tan pocos como sea posible. Los navegadores están limitados en la cantidad de activos que pueden simultaneamente descargar, a menudo a sólo dos en un momento dado. Si su página web contiene cientos de imágenes individuales, formarán un cuello de botella y, en última instancia, ofrecerán una experiencia negativa al usuario final..
Esto puede ayudarse, combinando archivos de imagen en sprites individuales, pero (nuevamente) las pantallas de retina forzan algún tipo de plan de respaldo.
En cambio, los efectos se logran mejor con CSS, los iconos se pueden incrustar a través de fuentes web, los logotipos se pueden implementar como gráficos vectoriales escalables, todo lo cual deletrea el final de la herramienta de división.
En el pasado, cuando el flujo de trabajo del diseñador web era exactamente el mismo que el de la impresión con Internet pegado al final, el diseño de diseños en Photoshop era una parte integral del proceso:
En estos días, con menos del resultado final que se basa en activos integrados en una aplicación de gráficos, diseñar un diseño completo en Photoshop significa efectivamente duplicar sus esfuerzos. Constrúyalo una vez para tener una idea de cómo se verá y luego constrúyalo de verdad. Luego tira el PSD porque no sirve para nadie.
Adobe se resistía al cambio, o simplemente trataba de ser complaciente, cuando introdujo algunas características de diseño web en CS6. El panel de salida CSSHat-like CSS le permite capturar código de sus elementos de página creados visualmente. También hicieron posible pegar un color hexadecimal (copiado desde el navegador) que incluye un hashtag (#ffffff por ejemplo) en el selector de color de Photoshop sin lanzar un error.
Los estilos de párrafo (un poco como en InDesign) se introdujeron para dar un mayor control global sobre la tipografía. Lorem Ipsum encontró su camino como una característica estándar y ahora incluso puede elegir las dimensiones comunes del dispositivo como ajustes preestablecidos de documentos!
Pero estamos en negación aquí: hay un gran elefante azul parado en la esquina de la habitación.
Lo que realmente estamos viendo aquí no es una aplicación que no se ajuste al diseño web, sino un flujo de trabajo que ya no es apropiado. De hecho, incluso antes de que la web fuera más fluida y elegante, hubo fallas fundamentales en el proceso de diseño web de Photoshop, tal como lo describimos. Hubo una tendencia a crear representaciones de páginas web perfectas en píxeles antes de que la construcción pudiera comenzar. Y luego, debido a la obsesión por lograr que todo sea 100% perfecto en Photoshop, habría un fanatismo similar para lograr resultados idénticos en todos los navegadores. Nos tomó mucho tiempo darnos cuenta de que las páginas web no tienen que aparecer idénticas en todos los navegadores!
Un problema serio con el objetivo de la perfección en Photoshop surge cuando el cliente se involucra. Este flujo de trabajo hace que sea muy fácil quedarse atascado en un bucle infinito de clientes que hacen sugerencias para empujar píxeles, inevitablemente perdiendo de vista el panorama general.
Lo que se necesita es un enfoque más modular para el diseño web y Photoshop puede jugar un papel en eso. Consideremos primero la etapa de planificación; Recopilación de información y contenido, esbozando relaciones entre áreas del sitio web en su conjunto, una parte crucial de este proceso modular, pero que se realiza mejor fuera de Photoshop..
Wireframing lleva el proceso más lejos; Diseñar elementos de interfaz rudimentarios, estableciendo relaciones visuales, jerarquía e interacción básica. Una vez más, esto no es una tarea que Photoshop lleve a cabo muy bien, en lugar de dar paso a aplicaciones como Omnigraffle y Balsamiq, incluso Illustrator (y hay muchas más).
Photoshop se presta mucho mejor a la estética. No puede describir diseños de forma fluida, pero puede explorar colores, texturas, estilos de elementos individuales, tipografía, atmósfera y estado de ánimo. Style Tiles es un concepto sugerido por Samantha Warren. Son esencialmente tableros de humor de Photoshop, pero resaltan una forma de aislar y presentar la fase estética al cliente..
El siguiente módulo en este flujo de trabajo es la creación de prototipos; Construyendo diseños básicos, pero funcionales para el navegador. Y no, esta tampoco es la taza de té de Photoshop. De hecho, Adobe está trabajando intensamente en una línea alternativa de aplicaciones para ayudar aquí. Sus herramientas Edge pretenden ofrecer una interfaz de lienzo familiar, que ofrece un rendimiento fluido para el navegador; Ideal para la creación rápida de prototipos, pero todavía es un trabajo en progreso..
Cada una de estas etapas modulares toma un aspecto del proceso de diseño, lo aísla e involucra en gran medida al cliente, lo que les brinda muchas oportunidades para firmar en cada etapa sin afectar a las demás..
Tenga en cuenta que este es un flujo de trabajo sugerido, no hay nada escrito en piedra en lo que respecta al diseño y, a menudo, hay más implicados que estas etapas generales. Lo que me lleva a mi punto final..
Cualquier proceso de diseño es extremadamente personal y lo que funciona para otra persona no necesariamente funcionará para usted. Hay muchas personas que piden el fin del diseño web en Photoshop, y en cambio hacen campaña por un flujo de trabajo basado en el navegador. El hecho es que, si Photoshop funciona para ti, ¡úsalo! Al final del día, somos diseñadores: si queremos pasar cientos de horas de trabajo empujando píxeles y puliendo nuestra cartera de Dribbble, permítanos deleitarnos con eso.!
¿Interesado en aprender más sobre Photoshop y su relación con el diseño web? Echa un vistazo a los artículos a continuación.
Accentsconagua