¿Alguna vez ha abierto un sitio web y lo ha vuelto a hacer clic? Cuando el diseño de un sitio es desagradable, se va más rápido de lo que Cersei consume vino. TIENE. En un mundo donde todos compiten por globos oculares, los sitios mal diseñados se están preparando para el fracaso.
No temas, te tengo. Como diseñador gráfico, he rebautizado sitios para clientes que utilizan Squarespace (mi plataforma preferida), ayudándoles a optimizar el diseño de su sitio para su marca y negocio. He condensado mis mejores consejos para crear un sitio hermoso y funcional que cualquier principiante puede seguir.. Además, ofrecemos a nuestros lectores un 10% de descuento en su primera compra de Squarespace con el código de cupón EVERYGIRL18. Puntuación. Así que toma tu cuaderno (o teclado) y hagamos esto.
Comience con un moodboard
Lo primero que hago al iniciar un nuevo proyecto de diseño gráfico es crear un panel de estado de ánimo, básicamente un plano de dónde quiero que vaya el diseño. Para referencia, aquí hay un ejemplo de un moodboard que creé para un proyecto el año pasado. Los Moodboards son una herramienta esencial para definir la estética de su marca: el aspecto que desea lograr, la sensación que desea evocar, los elementos específicos que lo llaman. ¿Alguna vez recortó fotos de una revista y las guardó en pilas como álbumes de recortes curados * Suspiro * Oh, cómo echo de menos los días del moodboarding analógico.
Si no eres un diseñador gráfico, puedes crear rápida y fácilmente moodboards usando Pinterest. Los tableros secretos son una herramienta fantástica para curar imágenes: comience por fijar cualquier cosa y todo lo que le llame la atención. Luego, vuelva a revisar su nueva tabla y comience a eliminar las cosas que no son exactamente correctas. No crea que necesita limitarse a las imágenes que incluyen fuentes o elementos de marca, ¡fije cualquier cosa que llame su atención! Piensa en cómo las imágenes te hacen sentir. ¿Qué quieres que haga tu marca? hablar a sus clientes o público Después de haber curado su tabla, le dejará una guía de referencia para el aspecto de su marca que le permitirá visitar nuevamente y nuevamente al configurar su sitio web.
Elige los colores de cortesía + colores y edítate cuando sea necesario
Fuentes
Sé que puede ser tentador jugar con MUCHAS fuentes (Squarespace tiene un montón de opciones para elegir) cuando está configurando su sitio, pero aléjese del teclado y escuche a Asec. Demasiadas fuentes o tipos de diseño que sean similares en diseño serán confusos a la vista y harán que sea estresante o desagradable para los clientes o clientes que visiten su sitio. Los clientes estresados y los clientes no son ideales cuando están pensando en términos de tasa de rebote, espectadores que regresan y globos oculares que desea permanecer en su sitio el tiempo suficiente para comprar algo (al menos).
Como diseñador, este es uno de los errores más comunes que veo en sitios web o material de marca colateral (tarjetas de presentación, membrete, etc.), pero la buena noticia es que es una solución fácil cuando recuerda estos consejos:
- Elija tres fuentes en la mayoría. Editar, gente! Afortunadamente, Squarespace lo facilita al crear fuentes coherentes en todo el sitio. Elija las fuentes para Encabezado 1, Encabezado 2, Encabezado 3 y Párrafo (texto del cuerpo) y Squarespace completará esas fuentes automáticamente en cualquier lugar que use encabezados o texto del cuerpo en su sitio. GANAR.
- Intenta elegir un serif (un tipo de letra con adornos al final de las letras, como Times New Roman) y un san serif (un tipo de letra sin adornos como Open Sans) que son complementarios. O, vaya con dos san serifs o dos serifs que son lo suficientemente diferentes para que el ojo distinga. El uso de dos estilos diferentes de fuentes como encabezados y subtítulos creará una yuxtaposición agradable en su sitio, facilitando su lectura y dándole un pulido profesional. A continuación, te he hecho esta guía práctica de algunos de mis combos favoritos de fuente, todos disponibles en Squarespace, para comenzar. De nada. (¡Asegúrate de fijarlo para más tarde!)
- Tenga cuidado con las fuentes de script. El uso excesivo de ellos es MUY fácil de hacer, un poco va un largo camino.
- Nunca uses Comic Sans. Eres mejor que eso.
Color
El siguiente es colores - la parte divertida! Eche un vistazo a su moodboard (le dije que sería útil) y saque los colores que aparecen una y otra vez. Una vez que tenga estos colores, considere la psicología del color: me encanta esta guía de Spruce Rd. ¿Qué colores coinciden con las palabras clave que asocia con su marca? Si su marca se trata de armonía y confianza, considere los tonos de azul. Si le interesa más la energía y la positividad, pruebe los amarillos. Refina tus matices hasta que llegues a un grupo (diría que cinco o seis como máximo) que te guste. Asegúrese de guardar los colores específicos para su uso en el futuro; aquí hay una gran herramienta para encontrar el código hexadecimal de un color en una imagen si no tiene ningún software de diseño como Photoshop o Illustrator.
Puede copiar fácilmente un código hexadecimal en Squarespace para usar ese color exacto en su sitio. A continuación le indicamos cómo:
Comprender jerarquía + equilibrio
Recuerde que el infame Oscars snafu. Todo esto podría haberse evitado con la jerarquía. Así es como ~ crítico ~ puede ser para un diseño..
Fuente: buena
La creación de jerarquías dentro de su sitio prioriza el texto que desea que vean primero los espectadores: piense en negrita a la acción, los títulos de los productos, etc. La jerarquía clasifica su contenido y crea un camino para que viaje el ojo del espectador, para que puedan seguir la historia de su sitio de la forma en que desea que lo vean. Este es un ejemplo de cómo creé la jerarquía en uno de mis sitios de Squarespace:
El equilibrio es tan importante como la jerarquía, ya que ancla su sitio y las ayudas lo hacen más agradable a la vista: la clave para retener a los espectadores. Cada elemento en su página tiene un cierto peso que debe ser equilibrado. Los colores oscuros y las líneas más gruesas son más pesados, los colores más claros y las líneas más claras son más claros. Este es un ejemplo de cómo creé el saldo en uno de mis sitios de Squarespace:
Ser estratégico con espacios en blanco.
Me encanta el espacio blanco. Cada vez que alguien me pide que dé mi opinión de diseño sobre algo que ellos mismos han creado, ¡mi consejo inevitable es más espacio en blanco! Lo primero que se debe tener en cuenta es que, por espacio en blanco, los diseñadores significan espacio negativo o la ausencia de elementos de diseño, texto o imágenes. El espacio no necesariamente tiene que ser blanco para calificar..
Piense en ello como dar a sus elementos espacio para respirar. Al igual que no usaría una foto con la mitad de la parte superior de su cabeza cortada, no desea agregar texto e imágenes a su sitio cuando están demasiado cerca entre sí, resultará tan estrecho e incómodo para el ojo. Más espacio en blanco un diseño más limpio, más moderno. Me encanta la herramienta espaciadora en Squarespace para crear fácilmente espacios en blanco alrededor de sus elementos cuando lo necesite. Aquí hay un ejemplo:
Crea gráficos consistentes
La consistencia es clave para crear un sitio que fluya sin problemas de un elemento a otro, de una página a otra. Utilizar las mismas fuentes, colores e imágenes en su sitio web creará un diseño optimizado y será más fácil de producir a largo plazo. Ganar ganar.
Cuando realice su sitio, o una vez que haya completado su sitio, es posible que deba hacer gráficos, como imágenes de publicaciones de blog pinables, listas de verificación descargables, publicaciones de Instagram, etc., para integrarse a la perfección con el diseño de su sitio web. La creación de plantillas para estos gráficos acelerará su flujo de trabajo diario y asegurará que su sitio y sus canales sociales siempre se vean profesionales. Si no tiene acceso a Photoshop o Illustrator, le recomiendo usar Powerpoint o Canva para crear sus gráficos, los cuales le permiten guardar plantillas.
Aquí hay una buena plantilla de inicio para un gráfico de publicación de blog pinnable:
Y aquí hay una buena plantilla de inicio para un gráfico de texto de Instagram:
Finalmente, simple no significa simplista.
Recuerde que un sitio hermoso no tiene que estar lleno de elementos, de hecho, muy pocos sitios hermosos lo están en estos días. Los sitios mínimos son agradables a la vista y, a menudo, más rápidos / fáciles de producir para los principiantes. Squarespace lo hace fácil con muchas plantillas prefabricadas que son increíblemente hermosas y funcionales. Boom bing bang hecho.
No olvides utilizar el código de cupón. TODOSGIRL18 con un 10% de descuento en tu primera compra de compra en espacios compartidos!
¿Tiene preguntas sobre el diseño de su sitio? Comparta los comentarios a continuación y nuestro diseñador gráfico le proporcionará sus comentarios.!
Este post fue en colaboración con SSquarespace, pero todas las opiniones que contiene son las de la junta editorial..