Share
A menudo se piensa que diseñando en el navegador Es un enfoque moderno para el diseño web. De hecho, antes del advenimiento de herramientas como Photoshop, no había otra opción. Solo en los últimos años, desde los albores del diseño responsive, los diseñadores volvieron a sus raíces y comenzaron a diseñar en el navegador..
No estoy diciendo que todos los sitios web deban comenzar su vida en el navegador, pero como los sitios web ahora necesitan ser más adaptables que nunca, parece tener más sentido tomar esta ruta. El diseño en Photoshop (o una aplicación similar) puede tener beneficios, que veré más adelante, pero también puede tener sus inconvenientes. Echemos un vistazo a algunos de estos.
Una pregunta que los diseñadores de IU en el trabajo me preguntan mucho es "¿Cuál es el ancho máximo que debe tener el diseño?". La respuesta que solía dar siempre a estas preguntas era "Crear el diseño a aproximadamente 960px". Hoy en día, cuando me preguntan esto, les digo que no hay un ancho fijo y que deberían imaginar que el diseño debería funcionar en cualquier ancho..
Dado que la capacidad de respuesta es tan demandada, es importante que cuando se diseñan sitios web, esto se tome en cuenta desde el principio, no solo como una idea de último momento. Cuando los teléfonos inteligentes aparecieron por primera vez en escena, muchos diseñadores crearon un diseño de ancho fijo en Photoshop para escritorio y luego otro para teléfonos inteligentes (generalmente alrededor del ancho de 960px para escritorio y 320px para dispositivos móviles). Si bien este enfoque puede haber funcionado por un tiempo, ya no es plausible debido a la amplia gama de anchos de dispositivos que acceden a la web. La única manera de tener una idea real de cómo funcionarán, se verán y funcionarán los sitios web sensibles es diseñándolos en el navegador.
La consistencia será grande también. Espero pensar en términos de partes reutilizables para mantener las cosas simples y consistentes - Chris Coyier en el rediseño de trucos CSS
Si bien puede ser cierto que los visitantes (en la mayoría de los casos) no visitan un sitio web por su diseño, sino que lo visitan por su contenido, al diseñar en el navegador podemos enfocarnos en el contenido de un sitio web y construir el diseño alrededor de eso..
Cuando se diseña en Photoshop, a menudo ocurre que el diseño se considera primero y luego el contenido. En algunos casos, el contenido ni siquiera es considerado en absoluto. ¿Cuántas veces ha creado un diseño en Photoshop y solo ha llenado el contenido con una carga de Lorem Ipsum? Todos lo hemos hecho, sin embargo, parece un enfoque extraño cuando el contenido debe ser una de las consideraciones más importantes. Diseñar en el navegador permite esto..
Al optar por este enfoque, antes de saltar directamente a su editor de código favorito, es importante tener una idea sólida de los elementos y componentes que incluirá su sitio web. Al hacer esto, podrá hacer componentes reutilizables, utilizando el mismo formato HTML y CSS. Cualquier cambio que realice se puede modificar fácilmente simplemente cambiando algunas líneas de código.
Una de las razones principales por las que podría querer diseñar en el navegador es para ver cómo se ve un diseño sensible en tiempo real. Antes de comenzar con esto, puede ser una buena idea establecer algunos puntos de interrupción de consulta de medios predefinidos y luego todo entre esos puntos de interrupción debe ser fluido.
Piense en el diseño de su sitio y adapte la mejor solución para sus necesidades. Por ejemplo, si tiene un sistema de cuadrícula de fotos 4x4, planifique en qué punto de corte la cuadrícula 4x4 dejará de ser elegible para resoluciones más pequeñas y cambie la cuadrícula a algo más apropiado, como un sistema de cuadrícula de 2x8.
Bien, puede que piense que Photoshop ha sufrido algunos golpes en este artículo, pero Photoshop todavía tiene su momento de brillar incluso al diseñar en el navegador. Hay ocasiones en que CSS simplemente no corta el estilo y para elementos más decorativos, tendrá que recurrir a Photoshop. Deberías usar Photoshop junto con tu editor de código..
Los sitios web como el anterior serían difíciles de diseñar en el navegador, ya que tiene un estilo muy ilustrado. Diseñar en el navegador no sería el mejor enfoque para sitios como este.
No es infrecuente en estos días que los diseñadores de UI presenten un panel de estado de ánimo de un diseño de sitios web en lugar de una representación real. Estas tablas de humor pueden incluir cosas tales como
Al hacer esto, el diseño aún se está considerando bien, pero no es tan restrictivo como el diseño tradicional de una maqueta de Photoshop..
Si aún no ha intentado diseñar en el navegador y desea quedarse atascado, aquí hay algunas herramientas útiles que lo ayudarán a optar por este enfoque..
Hay muchos IDE disponibles, pero aquí hay uno en línea, que lleva el diseño en el navegador a un nivel completamente nuevo. Las ventajas de usar un IDE basado en la nube es que puede compartir archivos con colegas u otras personas que trabajan en un proyecto, todo con gran facilidad..
Los azulejos de estilos se pueden describir como
Un diseño que se entrega con fuentes, colores y elementos de interfaz que comunican la esencia de una marca visual para la web..
Le permiten crear una identidad de marca para un sitio web que puede darle un poco de estilo sin ser demasiado restrictivo a la apariencia del diseño final. Si no los ha usado antes, puede encontrar una excelente introducción aquí.
Live Reload actualiza automáticamente la página del navegador tan pronto como guarda un archivo HTML / CSS / javascript o cualquier otro archivo. Esto puede ahorrarle tiempo y elimina la necesidad de presionar constantemente el botón de actualización F5.
Type cast es ideal para diseñar tipografías en el navegador. Le permite escribir con estilo rápidamente en el navegador y verificar la legibilidad y la representación mientras trabaja.
En el momento de escribir Adobe, tenemos una pequeña herramienta en la tubería que parece bastante prometedora. Se llama 'Edge Reflow' y le permite diseñar simultáneamente para todos los tamaños de pantalla sin sacrificar la calidad o la capacidad. Está escrito como una herramienta realmente útil para diseñar sitios web receptivos ya que, a diferencia de Photoshop, no utiliza un lienzo de ancho fijo. No hay noticias sobre cuándo se lanzará, pero puede registrarse para recibir una notificación de su lanzamiento..
Desafortunadamente, puede haber un efecto secundario negativo al diseño en el navegador. Como diseñadores y desarrolladores web, siempre estamos buscando formas de acelerar nuestro flujo de trabajo de diseño web. Al diseñar en el navegador, podemos estar tan atrapados en la funcionalidad, asegurándonos de que funciona en cada resolución, de modo que a veces podemos olvidar darle al diseño el amor y la atención que merece. Tomaremos atajos y trataremos de facilitarnos la vida, todo lo cual puede contribuir a la negligencia..
No se limite a sentarse y tomar la 'salida fácil'. Muchas veces recibí un archivo para un diseño, le di un vistazo y pensé: 'sí, no se puede crear mucho de esto en CSS, será un sitio de imágenes pesadas solo para el diseño'. Todos sabemos que las imágenes causan hinchazón y por eso tratamos de usarlas lo menos posible. A veces, sin embargo, esto puede ser inevitable, por ejemplo, cuando se trabaja en contenido de marca con un diseño muy intenso. Es lo mismo con muchas disciplinas; Necesitas hacer un compromiso sensato entre la forma y la función. Demasiada forma y muy poca función darán como resultado un sitio web deficiente y viceversa.
Nunca ha sido tan importante poder diseñar sitios web fluidos y con capacidad de respuesta que se adapten a varias resoluciones. La necesidad de estos requisitos hace que las herramientas como Photoshop sean menos útiles que antes para el diseño web..
Como el diseño receptivo está aquí para quedarse, es posible que empecemos a ver un cambio en la forma en que los sitios web están diseñados estéticamente y con esto vendrán nuevas herramientas y soluciones a algunos de los problemas actuales. Por supuesto, si un sitio web está más centrado en la marca y el diseño, Photoshop siempre será su herramienta número uno a la que dirigirse; Algunos sitios tienen más diseño dirigido que contenido dirigido.
.
Accentsconagua