8 maneras de diseñar sitios más rápido en Photoshop
Como diseñador web, es difícil mantenerse organizado. No solo está equilibrando varios proyectos a la vez, sino que también enfrenta plazos ajustados y clientes difíciles. También puede estar rebotando de marca en marca, y tener que aprender constantemente nuevas pautas y estilos de marca.
Afortunadamente, hay muchas maneras de hacer que su flujo de trabajo sea más eficiente. Para ayudar, he reunido estos ocho consejos para mantenerte sano en tu carrera de diseño web
1. Mantenga sus archivos organizados
Una de las cosas más fáciles que puede hacer para mantener su cordura es mantener sus archivos organizados. Crear y mantener una estructura de carpetas coherente hará que encontrar tus archivos sea muy fácil. Los problemas surgen cuando se estructura una carpeta de forma diferente a otra, por lo que es un desafío localizar ese archivo Final-Final-logo.ai .
Las convenciones consistentes de nomenclatura de archivos son esenciales al organizar sus archivos. Aquí es donde interviene el control de versiones. Algunos diseñadores usan fechas, otros usan números de versión y algunas usan rondas. Esto dependerá de su industria y sus preferencias personales, pero es una buena práctica. Gracias a las versiones, puede rastrear fácilmente qué archivo es el más reciente, especialmente si tiene versiones anteriores guardadas para referencia.
Por lo general, guardo de dos a tres versiones antiguas en caso de que el cliente quiera volver a la estrategia de héroe de Round One, o prefiera su tratamiento móvil de Round Two. Para evitar la mentalidad de pack rata, es bueno archivar o eliminar archivos antiguos para evitar que el disco duro se estanque.
Aquí hay una estructura de muestra que uso en Clearlink.
La combinación de una estructura de carpetas coherente y convenciones de nomenclatura con control de versiones también ayudará a la capacidad de búsqueda. Por ejemplo, si comienza todos los nombres de archivo de una marca con la marca o abreviatura, puede filtrar los activos para esa marca más fácilmente. Esto ayudará a diferenciar "ATT-logo-final.ai" de lo que podría ser un mar de "logo-final.ai's".
2. Comprenda su marco
Una cosa que no aprendí hasta varios años en mi carrera de diseño es cómo utilizar correctamente un marco existente. Los dos grandes bateadores en el mundo del framework están actualmente Oreja y Fundación , pero Google Materializar seguramente les dará una carrera por su dinero en el futuro cercano. La empresa para la que trabajo usa Foundation para la mayoría de sus sitios de marca.
Foundation viene con una cuadrícula de respuesta incorporada, junto con el diseño de botones, campos, tipografía, navegación, etc. entre muchas otras cosas para hacer su vida más fácil. Al utilizar la grilla incorporada de Foundation dentro de sus PSD, le facilitará al desarrollador implementar sus diseños de una manera más perfecta que si hace lo suyo. Photoshop tiene esta ingeniosa herramienta de diseño de guías que no solo hace que la creación de grillas sea fácil, sino que también las une al tablero para facilitar la reestructuración y el movimiento de archivos.
Captura de pantalla de Hoja de trucos de la Fundación
Los marcos también proporcionan un buen punto de partida para el diseño de botones, formularios, etc. y ayudan a mostrar las posibilidades y limitaciones de las estrategias de diseño que puede implementar. Esto no solo le dará un excelente punto de partida para su diseño, sino que ayudará a fomentar una colaboración más amigable con su desarrollador.
3. Organiza tus capas por sección de contenido
Cuando se trata de PSD de diseño web complejos con tantas carpetas, capas, objetos inteligentes, etc., es fácil que las cosas se ensucien. Una vez que aparece la capa 2,455, empiezas a darte cuenta de que necesitas algún tipo de organización dentro de tu PSD. Es por eso que recomiendo organizar su PSD por secciones.
El mío generalmente consiste en carpetas que incluyen Nav, Hero, Intro, Packages, Benefits, Footer, etc. También coloreo el código de estas carpetas en forma de arcoiris, por lo que son fáciles de navegar. Esto hace que actualizar secciones y volver a trabajar su PSD sea muy fácil.
Organizo mi archivo en carpetas de sección que están codificadas por colores del arco iris para facilitar la capacidad de escaneo.
Por ejemplo, si necesita aumentar la sección de héroes, puede arrastrar fácilmente todas las carpetas siguientes como una unidad (comando de retención) y luego arrastrarlas de nuevo después de realizar la actualización. Esta estrategia también ayuda a los desarrolladores y otros diseñadores a navegar fácilmente por su archivo. Al usar nombres comprensibles como "Hero" y "Nav", un nuevo diseñador puede saltar fácilmente a la carpeta y hacer los cambios que necesite.
Algunos diseñadores incluso nombrarán capas individuales, lo que también puede ser increíblemente beneficioso, pero puede consumir bastante tiempo. Como las capas son fáciles de encontrar mediante la herramienta de selección automática cuando está configurada en "capa", ahora es fácil acceder a capas individuales, por lo que depende del diseñador individual cómo desea organizar sus capas. El punto es que estás hecho.
4. Memoriza todos los atajos de teclado que normalmente usas
Este es un gran problema de eficiencia. Si te encuentras utilizando un comando clave específico con regularidad, memorízalo. Aumentará su eficiencia exponencialmente si tiene atajos de teclado principales hacia abajo.
Algunos de los más importantes son el guardado, el tamaño de fuente y el orden de las capas principales, guardar para la web y la opacidad entre muchos más. Photoshop también le ofrece la posibilidad de crear accesos directos personalizados. En mi libro, el comando más importante que debe haber memorizado es guardar su archivo. Debido a los bloqueos aleatorios de Adobe, es bueno equivocarse al ahorrar a menudo en lugar de arriesgarse a perder su progreso.
Adobe le ofrece la opción de personalizar sus accesos directos de teclado en Edición> Métodos abreviados de teclado
Los atajos también se relacionan con la organización de las capas por carpetas de sección de contenido (como se mencionó anteriormente). Es más fácil colocar capas en la parte superior e inferior de una carpeta mediante métodos abreviados de teclado que reordenar las capas en un archivo no organizado. Aquí es donde entra en juego la organización de su archivo a medida que diseña. Memorizar los atajos de teclado utilizados frecuentemente y mantener sus capas organizadas mejorará enormemente su eficiencia y ayudará a otros diseñadores a trabajar con sus archivos.
5. Utilizar bibliotecas CC
Una de las mejores cosas que Adobe ha agregado desde la creación de CC es las bibliotecas. Si no has oído hablar de ellos, debes verificar esto increíble tutorial sobre cómo usarlos.
Siento que cada equipo de diseño debería utilizar esta increíble función. Las bibliotecas le permiten crear una biblioteca de marca con recursos como colores, estilos de fuente, fotos, íconos y símbolos (como encabezados y pies de página). Gracias a las bibliotecas, puede colaborar fácilmente con creatividades de varias organizaciones con una única biblioteca de marca.
Las bibliotecas facilitan el cambio de colores y la actualización de los estilos de texto con solo hacer clic en un botón. También ayudan a almacenar iconos de marca que pueden actualizarse fácilmente en un solo lugar y las actualizaciones se reflejan rápidamente en los PSD. Esto es increíblemente beneficioso para los encabezados y pies de página de su sitio, donde es probable que realice pequeñas actualizaciones durante todo el proyecto.
También uso Bibliotecas CC para el diseño de fuentes en todo mi diseño. Configuraré estilos para la copia de héroe, encabezados, subtítulos, copia del cuerpo, descargos de responsabilidad, etc. para aplicaciones de escritorio, tabletas y dispositivos móviles. Con respecto a la vista de alternar, me encuentro usando el formato de lista más que la vista de mosaico debido a su fácil capacidad de escaneo.
Elementos de la biblioteca vistos como colaboradores
Las bibliotecas también son excelentes para la colaboración en equipo. Puede optar por colaborar con otras creatividades para editarlas y agregarlas a la biblioteca, o puede compartir el enlace de la biblioteca para acceder fácilmente. También tienen una función "Crear nueva biblioteca desde el documento", pero prefiero crear la biblioteca yo mismo, para que se mantenga organizada y solo tenga los activos más relevantes.
Desafortunadamente, hay algunas desventajas para las bibliotecas, una de ellas es la falta de estilos de párrafo y carácter separados para el texto. Resuelvo esto aplicando el estilo de mi personaje en un cuadro aparte y luego pegando diferentes estilos en un cuadro para hacer que los cuadros de texto sean más fáciles de administrar dentro del archivo. Otro inconveniente es que actualmente no puedes actualizar un estilo de personaje globalmente. Actualmente, no hay habilidades de organización dentro de la biblioteca para crear subcarpetas dentro de las categorías (color, estilos de caracteres, etc.), pero esperamos que Adobe esté trabajando en esto también.
La forma actual en que funcionan las bibliotecas CC es que el activo actualizado / agregado más recientemente aparezca arriba. Los colores de la Biblioteca CC no se pueden aplicar al texto individual dentro de los cuadros de texto y solo se aplican fácilmente a las formas y cuadros de texto completos. Estoy seguro de que Adobe está trabajando duro para solucionar estos problemas, así que no estoy demasiado preocupado, especialmente porque los profesionales definitivamente superan las desventajas.
6. Mantenga imágenes y vectores en formato de objeto inteligente
Aunque hará que su archivo sea más grande, mantener sus imágenes y vectores en formato de objeto inteligente hará que sea más fácil para los futuros diseñadores editar sus PSD. Imagínese esto: el cliente regresa con ediciones que incluyen volver a recortar una foto de héroe y hacer pequeños ajustes a un icono de vector. Esto se realiza más fácilmente si el PSD incluye la foto de resolución completa en lugar de una versión rasterizada más pequeña. Los vectores también son fáciles de ajustar cuando son objetos inteligentes de Illustrator en lugar de gráficos rasterizados.
Otra ventaja de tener fotos en formato de objeto inteligente se obtiene cuando las guarda como PSD y luego las coloca en su archivo como un objeto inteligente. Al usar una foto PSD colocada, es más fácil agregar capas de ajuste y ediciones dentro de un archivo de fotos separado y en lugar de saturar el archivo de origen. La utilización de objetos inteligentes como gráficos de la biblioteca le brinda aún más de una combinación ganadora. No solo puede editar fácilmente los objetos vectoriales, sino que los gráficos de la biblioteca se actualizarán en todas las aplicaciones.
El gráfico "Ilustración de héroe" se puede editar en un PSD por separado para mantener el desorden del archivo principal al mínimo.
7. Crea una guía de estilo y adhiérete a ella
Muchas marcas tendrán una guía de estilo general para que sigas cuando se trate de fuentes, colores, fotos, iconos, ilustraciones, etc. Esto es útil como recurso, pero no siempre te mantendrá constante en el estilo específico de tu sitio web. . He mejorado enormemente mi eficiencia al crear guías de estilo web para cada sitio específico en el que trabajo.
A veces, las marcas tendrán múltiples sitios con diferentes estilos, por lo que me aseguro de tener uno para cada sitio, de modo que pueda mantener la coherencia mientras diseño. Esto también crea un recurso fácil de arrastrar y soltar cuando necesito botones, iconos, ilustraciones, fotos, etc. Esto no solo te hará más eficiente como diseñador, sino que te ayudará a mantenerte consistente en tu estilo en todo el sitio.
¿Qué espaciado utilizo entre las secciones? ¡Mira la guía de estilo! ¿Cuál fue el color del botón primario y el relleno de nuevo? ¡Cógelo de la guía de estilo! Esto también ayudará a otros diseñadores a saltar fácilmente en los diseños del sitio con facilidad y eficiencia. Si combinas el uso de las bibliotecas CC con la guía de estilo, estás aún más adelantado que el juego.
Creé una guía de estilo de PSD para todas las diferentes marcas en las que trabajo, así puedo agarrar fácilmente elementos como botones e íconos.
Muchos diseñadores tienen la tentación de agregar nuevos estilos cada vez que enfrentan un nuevo problema dentro del diseño. Para mayor coherencia, es mejor evitar esto y siempre apegarse a los estándares que ha establecido dentro de su guía de estilo. Si agrega capas y estilos nuevos, asegúrese de que se apliquen en todo el sitio.
Cuantos más nuevos estilos se creen, más complejos serán los futuros diseños, y más difícil será para los nuevos diseñadores saltar sobre los proyectos y mantener los diseños consistentes. En muchos casos, la coherencia es más importante que la innovación constante en lo que respecta a la experiencia del usuario. Aunque puede tomar más tiempo crear la guía de estilo web al comienzo de un proyecto, aumentará su eficacia para todas las páginas futuras.
Una de las mejores prácticas que aprendí de Brad Frost es hacer una inventario de interfaz ya sea durante el proceso de diseño o en un sitio existente en el que estará trabajando. Un inventario de interfaz consiste en recopilar todos los diferentes estilos de texto, estilos de botones, etc. a través de capturas de pantalla y compilarlos para encontrar inconsistencias. Luego puede presentar sus hallazgos al cliente para proponer actualizaciones y mejoras.
Como los sitios web tocan a varios diseñadores en el caso de su existencia, las cosas pueden ponerse bastante peludas en el departamento de coherencia. Una vez que encuentre un estilo de diseño unificado para los elementos en la página, asegúrese de actualizar su guía de estilo para que todos estén actualizados.
Captura de pantalla del inventario de interfaz de http://bradfrost.com/blog/post/interface-inventory/
8. Fomentar la colaboración entre departamentos
Muchas personas que persiguen carreras en la producción de marketing (diseñadores, desarrolladores, redactores, etc.) tienden a ser introvertidas, por lo que es difícil salir de su zona de confort cuando se trata de colaboración. También es difícil dejar su burbuja de experiencia, especialmente cuando es más fácil relacionarse con personas de su campo. Aunque a veces puede ser incómodo o incómodo, dejar su burbuja y colaborar regularmente con personas de otros departamentos puede mejorar enormemente la calidad de sus diseños junto con su eficiencia.
Un buen ejemplo de esto es cuando diseñadores y desarrolladores colaboran en un rediseño. Debería reunirse con el desarrollador de antemano para ver qué marco utiliza, educarse en el sistema de grillas y evaluar las posibilidades. Cuando el trabajo de diseño esté completo, asegúrese de compartir su biblioteca de Photoshop, para que el desarrollador tenga fácil acceso a la paleta de colores, estilos de fuente, etc. También es útil compartir la guía de estilo con anticipación, junto con cualquier componente que tenga. diseñado para darles una buena ventaja.
La colaboración con otros diseñadores en su equipo que utilizan Bibliotecas también lo ayudará a mantenerse constante y ser más eficiente. Dar al Director de arte o la responsabilidad de la mayoría de los Diseñadores sénior sobre las actualizaciones de la biblioteca y la guía de estilo eliminará la confusión y mantendrá la marca consistente. Solo asegúrese de que haya una línea de comunicación cuando se realicen las actualizaciones, para que todos estén en la misma página.
Mantente sano
El diseño web puede ser abrumador y desafiante a veces. No siempre tiene que ser así. Siguiendo estos simples consejos sobre la eficacia de Photoshop, puede aliviar una buena parte de su estrés. Esto no solo mejorará su bienestar, sino que los gerentes y directores, tanto del lado empresarial como creativo, realmente apreciarán su arduo trabajo y lo elogiarán por ello. Después de todo, todos son buenos con un diseño más consistente, eficiente y bellamente diseñado.