Creando un diseño en Photoshop. Cree fácilmente materiales de marketing. Presta atención a los detalles

Traducción de un artículo del diseñador Claudio Guglieri que describe el proceso de diseño de un sitio web de principio a fin.

Al diseñar el diseño de un sitio web, recordé los errores comunes que veo que cometen muchas personas, especialmente entre los pasantes y los nuevos diseñadores.

Esta breve lista de consejos, probados en mi experiencia, le ayudarán mientras trabaja en el diseño de su próximo sitio web.

1. Pon tus pensamientos por escrito

Es obvio, pero muchos diseñadores cometen el error de lanzarse a Photoshop antes de pensar en el problema que intentan resolver. Intente trabajar primero en papel. Créame, es más fácil y mejor pensar en ello. Y luego todo lo demás. Piensa en el contenido, funcionalidad del proyecto, etc.

2. Crea bocetos de alto nivel.

Esto es lo primero que hay que hacer. También debe crear inmediatamente marcos de interfaz de usuario que rodeen el texto, lo ayuden a realizar diversas acciones y navegar por la interfaz. Estos incluyen navegación y componentes como barras inferiores, barras laterales, etc. Si comienzas con esto, tendrás una idea general de tu proyecto.

3. Agregue una cuadrícula a su archivo PSD

Es sencillo. Antes de comenzar a diseñar, necesita una cuadrícula. Si no haces esto, créeme, el proyecto no quedará muy bien al final. Una cuadrícula te ayudará a estructurar el diseño de diferentes áreas, te ayudará a ser consistente en términos de espaciado y mucho más.

4. Elige tu tipografía

Explorar diferentes fuentes y colores es una parte importante del proyecto. No recomendaría usar más de dos fuentes en un sitio web. Pero una excepción puede depender de la naturaleza del sitio. Luego, después de sopesar todo, puedes elegir más de dos fuentes, o incluso configurar solo una. Pero el texto debe ser legible con su fuente y, en algunos lugares, debe exigir acción. Y lo más importante: sea coherente.

5. Elige una combinación de colores

A lo largo del flujo de trabajo de selección de fuentes, debes trabajar en la combinación de colores de toda la interfaz de usuario (color de fondo, texto, etc.). Los colores deben elegirse en función de la funcionalidad del elemento. Preste atención a sitios como Facebook, Twitter, Quora o Vimeo.

6. Divide el diseño

Es necesario que cada sección del sitio cuente una historia. Necesita una causa y un resultado final. El texto debe tener resaltado, resaltado, etc. para las partes más importantes del texto. Y, de hecho, la página no debería tener demasiadas "salidas" a otros recursos y fuentes. El usuario debería hacerse la pregunta "¿Qué puedo hacer aquí?" Fíjese el objetivo de hacer el diseño más simple posible. Y te sorprenderá lo difícil que es lograrlo.

7. Conjunto de reorganización

Como diseñadores damos forma a la imagen de las páginas web para el usuario en Internet. Es necesario decidir cuántos pasos deberá seguir el usuario para realizar alguna acción, qué tan efectivo será el sitio como resultado, etc. Los patrones de diseño existen porque nadie se ha tomado el tiempo de evaluarlos. Es importante repensar, probar y refactorizar los modelos interactivos establecidos en cualquier componente y ver cómo podemos mejorarlos.

8. Ponte a prueba

Animo a todos los diseñadores a hacer esto en todos sus proyectos. Ejemplos de diferentes tareas para esto serían: usar un nuevo sistema de malla al crear nuevos componentes; Pequeñas tareas como evitar un modo de fusión o usar un color específico.

9. Presta atención a los detalles

Recientemente se ha abusado de esta afirmación. Un detalle podría ser alguna pequeña interacción entre elementos, una animación inesperada, o una decoración estética, etc. Y todo, al final, es significativo. Es incluso mejor si te gusta.

10. Trate cada componente como si lo estuviera presentando a un concurso.

Debo admitir que este consejo no es mío. Lo escuché en Fantasy Interactive y me sorprendió lo claro y verdadero que sonaba. Cada detalle debe estar diseñado para ser lo mejor posible.

11. Perfecciona tu trabajo

A la hora de percibir estéticamente cualquier obra, ciertas cosas pueden llamar tu atención. Y deberías evitarlos. Por ejemplo, rayas degradadas, bordes borrosos, fuentes de configuración de renderizado, pinceladas que no combinan bien con el fondo. Estos son sólo algunos ejemplos. Pero en realidad la lista es interminable. Preste siempre atención a su diseño en su conjunto para ver si todo funciona bien. Luego, cada componente se puede analizar individualmente con más detalle.

12. Guarda tus PSD

Este (junto con el uso de una cuadrícula) es uno de los consejos importantes al trabajar con Photoshop. A pesar de la cantidad de personas trabajando en un proyecto y tareas, debes mantener el orden en tus archivos. Esto aligerará el proyecto y exportará varias secciones para acelerar el diseño y el intercambio de archivos entre todas las personas involucradas en el proyecto.

13. Trabaja y espera lo mejor, pero prepárate para lo peor.

Nuestro trabajo como diseñadores es resolver problemas utilizando diversas restricciones. Debemos crear un sitio web que funcione no sólo en las condiciones más ideales, sino también en situaciones de fuerza mayor. Por ejemplo, el usuario utiliza la pantalla más pequeña para ver páginas web, en las que también debería verse cómodo. Ésta es nuestra tarea. El sitio debe funcionar perfectamente en todas las pantallas.

14. Obsesionarte con el diseño hasta que lo odies.

Si te apasiona tu trabajo, genial. Cada vez que termino algo, lo reviso con diligencia, disfruto del resultado e incluso lo imprimo como captura de pantalla y lo cuelgo en la pared. Mientras trabajo, llego al último punto del trabajo donde termino odiando el proyecto, en el sentido de que si no te gusta tu trabajo anterior, es una señal de crecimiento y madurez. Luego puedes rehacerlo de alguna manera o simplemente aprender de los errores en el futuro.

15. No dedique demasiado tiempo a los conceptos antes de compartirlos con los clientes.

Al presentar conceptos de diseño interactivo a los clientes, asegúrese de estar en la misma página. Entonces no necesitarás hacer mil opciones de diseño y podrás seguir trabajando con tranquilidad y confianza. Pero si el cliente no se enamora de su visión de diseño inicial, será necesario un gran esfuerzo para armar todo lo que le encantará. Digan lo que digan, los clientes son diferentes. Las cosas no siempre saldrán bien.

16. ¡Diseñador! ¡Sé el mejor amigo de un desarrollador!

Los desarrolladores son personas creativas y aman su trabajo tanto como tú. Pero no todos ellos están incluidos en el proyecto desde el principio y, a menudo, sólo interfieren en el proceso mismo cuando sus esfuerzos ya no son necesarios. Esto no está bien. Muchas ideas geniales surgen del equipo de desarrolladores con el que colaboras por una causa común. Por lo tanto, aquí también debes asegurarte de estar en la misma onda que ellos. Trabajar juntos ayudará a completar el proyecto de manera eficiente, utilizando todas las ideas.

17. Explicar todo como si fuera un niño de cuatro años.

Es importante no sólo completar el diseño, sino también presentarlo adecuadamente. Y lo más importante, está claro para todos. Su mejor trabajo puede ser ignorado si otros no pueden entenderlo. Tenga siempre en cuenta que las disposiciones que comprende pueden ser como matemáticas superiores para una persona común y corriente, es decir, un bosque oscuro. Presenta tu trabajo de forma accesible.

18. Ama cada una de tus ideas, pero no te apegues demasiado a ellas.

Existe una delgada línea entre defender su posición y ser respetuoso con los demás miembros del equipo. Como diseñador, creo firmemente en lo que hago, pero también tengo que estar abierto al compromiso. No olvide que existe más de una solución única. Y no necesariamente el tuyo.

19. Sigue el diseño sobre la marcha

Si trabajas en una agencia, probablemente ya hayas comprendido lo que es intentar afrontar un nuevo proyecto cuando el anterior acaba de finalizar. Contrariamente a la creencia popular, su trabajo no termina una vez que se entregan el PSD y las hojas de estilo. Si realmente te preocupas por tus clientes y tus resultados, habla con tus desarrolladores sobre el proyecto. Es posible que necesite ayuda con los píxeles, etc. Asegúrese de que todo esté perfecto.

20. Controla tu progreso

En los círculos del diseño, a todos nos encanta contemplar no sólo el resultado, sino también el proceso en sí. Puede ser que la mejor parte del proyecto se pierda en los archivos por alguna razón. Una vez que el cliente/desarrollador haya completado y aprobado el proyecto, intente crear una breve reseña temática específicamente para las etapas de su trabajo. Esto es muy útil ya que recibirás aprobación, experiencia y retroalimentación, aumentando así el nivel de confianza del cliente.

Creemos un diseño de sitio web completo en Photoshop. Comencemos con el diseño de la página y luego pasemos al diseño de sus elementos individuales. El resultado será un diseño de página web moderno, listo para su diseño:

Sus características clave son barras horizontales para separar contenido, encabezado colorido, portafolio, diseño principal de dos filas y pie de página con enlaces:

Antes crear un sitio web en Photoshop, es mejor esbozar los contornos principales en papel:

El diseño de distribución también le ayuda a desarrollar la estructura y tener una idea de las mejores posiciones para los elementos clave del diseño:

Al crear un nuevo documento en Adobe Photoshop, hago el tamaño del diseño para que se ajuste a un monitor de pantalla ancha común para dar una buena idea del aspecto general del sitio:

Utilice guías para medir un ancho de 960 píxeles en el centro del documento y cree una cuadrícula básica para colocar los elementos de la página:

Comencemos a crear un diseño de sitio web en Photoshop con el encabezado. Haga una selección en todo el ancho del documento y rellénelo de blanco. Haga doble clic en la capa para abrir Estilos de capa y agregue " Superposición de degradado» ( Superposición de degradado) con una transición vertical de gris a blanco:

A continuación, dibujaremos el área del encabezado principal donde se colocará el material destacado. En una nueva capa, haga una selección y luego aplique el estilo " Superposición de degradado"con dos colores. También agregue una sombra interior sutil para darle profundidad a su boceto:

Con el área del encabezado con la máscara seleccionada, presione CTRL+MAYÚS+C para copiar los datos combinados y luego péguelos en una nueva capa. Ir a la pestaña Filtro > Ruido > Agregar ruido para crear una textura simple, luego configure el modo de fusión en "Multiplicar" y reduzca la opacidad a un valor adecuado:

A continuación, continuamos creando un sitio web en Photoshop, insertando el logo de la empresa y colocándolo en la cuadrícula. Agregar estilo " Superposición de degradado" con configuraciones que coincidan con los colores del encabezado, luego cree una sombra interior suave:

Utilice la herramienta Texto para crear el menú de navegación principal, establezca el color de fuente en gris medio y utilice un tono ligeramente más oscuro para el enlace activo:

El encabezado es un excelente lugar para presentar su sitio. Con un fondo brillante, atrae la atención principal del usuario. Utilice este espacio para colocar un título introductorio atractivo con una fuente personalizada que coincida con la imagen de la empresa:

Continúe detallando el contenido introductorio, pero esta vez use familias de fuentes Arial o Helvetica para que el texto se pueda colocar en el html sin reemplazar imágenes:

Antes de terminar el sitio web en Photoshop, coloca la imagen de la computadora portátil en el medio. Esto encaja bien con la imagen de la empresa ficticia y crea un gran espacio temático para mostrar ejemplos de trabajo en la pantalla de una computadora:

Resalta esta área con un degradado radial que viene desde detrás de la computadora. Este toque adicional ayudará a elevar el elemento sobre la página:

Debajo del encabezado principal, crea otra selección y rellénala con un degradado blanco y gris:

Divida la sección central de la página en dos columnas con guías adjuntas a las líneas de la cuadrícula. A la izquierda tendremos el panel de contenidos principal, y a la derecha tendremos una delgada barra lateral. Utilice la herramienta Texto para agregar texto de ejemplo:

Debajo del área de contenido principal puede haber espacio para mostrar las últimas publicaciones del blog. Divida esta columna en dos columnas más y esboce entradas de muestra. Los usuarios deben considerar que los enlaces de encabezado pueden hacer clic, así que cambie su color para dar una señal visual:

Al crear un sitio web desde cero en Photoshop y maquetar, utilizamos la opción “ Rectángulo con esquinas redondeadas" para dibujar un rectángulo en la barra lateral. El color original no importa ya que cambiaremos su estilo en el siguiente paso:

Haga doble clic en la capa y agregue varios estilos de capa, incluido un degradado de gris a blanco, un trazo gris fino y una sombra interior suave:

Utilice esta barra lateral para diseñar la sección de su Proyecto Destacado ( Proyecto destacado). Sus elementos pueden incluir pequeñas fotografías y pasajes de texto:

Dibuja otro rectángulo para usarlo como botón. Agrega un par de estilos de capa como " Superposición de degradado" y "Trazo" para que el estilo del botón sea coherente con el tema gris general:

Cree un título de botón breve y significativo que anime al usuario a navegar por el sitio para ver proyectos futuros:

Indique el final del contenido dibujando un área de pie de página en la pantalla. Rellena este espacio con un color gris claro para diferenciarlo del área de contenido principal:

Sigamos creando un sitio web en Photoshop dibujando una máscara redonda y rellenándola con un degradado radial de negro a transparente. Presione Ctrl+T para transformar la selección, aplastar y estirar el área creada para formar una imagen larga parecida a una sombra:

Centre la sombra en la pantalla y luego elimine el exceso de espacio sobre el sótano. El resultado es una sombra sutil que “levanta” la página principal, añadiendo un pequeño detalle al diseño:

El pie de página es un excelente lugar para mostrar elementos de página no esenciales. Por ejemplo, formularios de autorización de usuarios. Refine el diseño usando la herramienta Texto y luego dibuje un par de campos de entrada. Completa los márgenes con una suave sombra interior.

Cacoo te permite crear diagramas en línea. Es una herramienta completamente gratuita que le brinda la posibilidad de crear wireframes, diagramas y UML utilizando un navegador web y aplicaciones.

Gliffy admite la creación de wireframes de aplicaciones y sitios web gratuitos. Puede utilizar Gliffy en la web o como complemento para varias aplicaciones de Google y Confluence. También admite la vista previa de estructuras alámbricas HTML5.

MockFlow le permite crear estructuras alámbricas de aplicaciones a través de Internet o utilizando teléfonos inteligentes. La aplicación es capaz de evaluar la usabilidad del diseño.

Tiggzi es una aplicación móvil para desarrollar marcos de aplicaciones y sitios web diseñados para teléfonos móviles. El programa te permite crear aplicaciones para HTML5 y JQuery que se ejecutan en teléfonos móviles. También puedes exportar aplicaciones para Android, IOS y Web Móvil.

Frame Box es una de las formas más sencillas de crear marcos en línea, utilizando herramientas sencillas de arrastrar y soltar. El programa es muy sencillo y no requiere mucho estudio, simplemente puedes sentarte y trabajar.

iPhone Mockup es otra herramienta de estructuración de alambres que te permite crear maquetas para aplicaciones de iPhone. Este programa también es muy fácil de usar; sólo necesitas arrastrar y soltar los elementos necesarios desde la barra de herramientas.

Pencil Project es otra aplicación de gráficos que le permite crear esquemas para sitios web y admite la exportación de esquemas en varios formatos, como HTML, PNG y PDF.

iPlotz es una herramienta gratuita que le permite crear navegación para sitios web y aplicaciones. Se basa en componentes que se pueden utilizar para crear un diseño de proyecto.

Creatly admite la creación de diagramas, diagramas y diseños para varios tipos de proyectos utilizando mapas y estructuras alámbricas. Además, admite la gestión simultánea de múltiples proyectos.

La principal especialización de Naview es la construcción de navegación con estructura alámbrica y la visualización de ideas de navegación, y este programa también admite pruebas del proyecto principal.

Flair Builder es otra herramienta de estructuración de alambres ampliamente utilizada que le permite crear diseños para sitios web y aplicaciones enriquecidas de Internet. Admite varias plataformas como Windows, Mac y Linux. El programa se creó con Adobe AIR, lo que proporcionó una mejor integración y una fácil instalación.

Simple Diagrams es otra herramienta sencilla para crear diagramas y estructuras alámbricas, el programa te permite realizar diseños de forma rápida y sencilla y, lo más importante, es muy fácil de entender. Simplemente puedes abrirlo y comenzar a crear tu diseño.

Esperamos que estas herramientas de diseño de proyectos le resulten útiles. Si conoce otras herramientas similares, no dude en contarnos sobre ellas en los comentarios.

El estudio Layout-Master de Nikolai Saganenko ofrece la creación de diseños muy complejos en el menor tiempo posible. Visita gratuita de un especialista.
Para ordenar, escriba a Esta dirección de correo electrónico está protegida contra spambots. Debe tener JavaScript habilitado para verlo.. Detalles de la empresa: LLC "Architectural Standard". Entrega dentro de la Federación Rusa.

Photoshop es un programa extremadamente popular entre los diseñadores web, incluso un estándar para muchos. Y cuando se trata de diseño de un sitio web, en la mayoría de los casos se trata de un archivo .PSD.

Antes de crear directamente el diseño, debe decidir la estructura del sitio, pensar en la navegación e imaginar dónde se ubicarán qué bloques y elementos.

¿En qué consiste el diseño?

La gran mayoría de páginas web constan de:

• La parte superior (cabecera), en la que se ubica el logo, eslogan, menú de navegación, etc.;
• el bloque principal en el que se ubica el contenido;
• barra lateral (barra lateral);
• la parte inferior (pie de página), que generalmente almacena información de respaldo, información de derechos de autor, enlaces útiles, etc.

¿Cómo crear?

Piense y piense en la estructura. No estaría de más dibujarlo en una hoja de papel o en el propio Photoshop.

Preste atención a la combinación de colores: los tonos deben combinarse y ser coherentes con el tema y la dirección del sitio. El texto debe ser fácil de leer y las páginas deben cargarse rápidamente. No se exceda con decoraciones, elementos interactivos y fuentes elegantes: la conveniencia es más importante que el diseño llamativo, porque los usuarios visitan sitios no para mirarlos boquiabiertos, sino con un propósito predeterminado, y cuanto más rápido su recurso pueda resolverlo, más es valorado.

Decide si tu diseño será extensible o fijo. Una plantilla de tamaño fijo se ve igual en todas las pantallas, mientras que una plantilla de “goma”, que cambia de tamaño, se adapta al dispositivo. Si el diseño es "de goma", entonces debe decidir qué llenará el fondo del sitio.

Sin embargo, creamos el diseño de este recurso web en, que es una parte (lo recomiendo encarecidamente), y puede encontrar un ejemplo complejo en él.

Aquí, para no distraerme con los detalles y el uso de herramientas ya estudiadas, consideraré un ejemplo condicional de diseño, un diagrama de plantilla, pero usando el algoritmo descrito puedes trabajar fácilmente con tu propio diseño.

1. Cree un documento para el diseño futuro. No olvides dimensionar.
2. Delimite el diseño utilizando guías extraídas de las reglas.

Para habilitar las reglas, presione la combinación de teclas Ctrl+R o ejecute el comando Ver -> Reglas del menú principal del programa.

Para arrastrar una guía horizontal, haga clic en la regla superior con el botón del mouse y, sin soltarlo, mueva el puntero hacia abajo hasta que la guía esté en la posición deseada. Para extender una línea vertical, haz lo mismo, simplemente mueve el puntero a la derecha de la regla de la izquierda.

Como resultado, su plantilla debería estar demarcada.

1. Dibuja el diseño. Añade gráficos, líneas, botones y otros elementos. Aquí todo es individual y analizamos las herramientas para trabajar en todo momento.

1. Agrega un poco de color si aún no lo has hecho. Recuerda la armonía y suavidad de los tonos. El conocimiento de la interacción hombre-máquina y la escuela de arte solo serán una ventaja.

como cortar

El diseño terminado debe cortarse "en pedazos" para poder utilizar sus elementos en el diseño del sitio, parte de los cuales se implementará a través de HTML, parte a través de CSS y parte a través de las mismas imágenes en las que se cortará el diseño. Recuerde esto cuando desee dejar varias imágenes con fondo blanco, texto de página o nombres de enlaces: debe dejar solo lo que se tomará de los archivos gráficos y no se implementará por otros medios.

Entonces, el diseño está listo y abierto. Lo cortaremos.

1. Desactive las capas con elementos de diseño innecesarios: texto, botones, formas, etc. Para ocultar una capa, haga clic en el ojo en su línea.

1. Ajuste las guías extraídas de las reglas a los elementos estructurales del sitio. En principio, el diseño se puede cortar a lo largo de ellos, pero en este caso es posible que no quede exactamente como necesitamos, por lo que usaremos otra herramienta.
2. Seleccione la herramienta Anidamiento. Se encuentra en la paleta del grupo Marco.

1. Para cortar una parte de su diseño, mueva el puntero hacia donde desea comenzar y actúe como si estuviera seleccionando un área rectangular. La porción cortada estará numerada. El color azul del número significa que el fragmento está activo y se puede editar. Las piezas que el programa espera que cortes están numeradas sobre un fondo gris. El fragmento cortado está resaltado y tiene marcadores, gracias a los cuales se puede ajustar su tamaño y posición.

1. Haga el siguiente corte de la misma manera y así sucesivamente hasta completar el trabajo.
2. Cuando todo esté hecho, guarda el resultado. Para hacer esto, ejecute el comando Archivo -> Exportar -> Guardar para Web (versión anterior), verifique la configuración (seleccione formato, calidad, etc.), haga clic en Guardar y especifique la carpeta en la que se creará el catálogo de archivos gráficos. .

1. Dentro del directorio seleccionado, apareció una carpeta de imágenes con archivos gráficos, cada uno de los cuales contenía parte del diseño.
2. Ahora podrás guardar botones, iconos y otros elementos previamente ocultos.

El diseño está creado, cortado y completamente listo.