Cómo hacer sus propios gráficos para su sitio web

¿Alguna vez ha abierto un sitio web e inmediatamente ha vuelto a hacer clic en él? POR SUPUESTO QUE TIENE. Cuando el diseño de un sitio es desagradable, te vas de allí más rápido de lo que Cersei bebe vino en TIENE . En un mundo en el que todo el mundo está compitiendo por los ojos, los sitios mal diseñados se están preparando para el fracaso.

No temas, te tengo a ti. Como diseñador gráfico, he sitios renombrados para clientes que usan Espacio cuadrado (mi plataforma preferida), ayudándoles a optimizar el diseño de su sitio para su marca y negocio. He resumido mis consejos principales para crear un sitio hermoso y funcional que cualquier principiante pueda seguir, así que toma tu computadora portátil (o teclado) y hagámoslo.

¿Listo para compartir su visión o negocio con el mundo? Comienza hoy tu prueba gratuita de Squarespace (no se requiere tarjeta de crédito) y usa el código 'EVERYGIRL' con un 10% de descuento cuando estés listo para publicar tu sitio web.

Empiece con un moodboard

Lo primero que hago al comenzar un nuevo proyecto de diseño gráfico es crear un moodboard, 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, el sentimiento 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 seleccionados? * Suspiro * Oh, cuánto extraño los días del moodboarding analógico.



Si no es un diseñador gráfico, aún puede crear paneles de estado de ánimo rápida y fácilmente utilizando Pinterest . Los tableros secretos son una herramienta fantástica para seleccionar imágenes: comience por fijar cualquier cosa que llame su atención. Luego, revise su nuevo tablero y comience a eliminar las cosas que no son exactamente correctas. No sienta que necesita limitarse a imágenes que incluyan fuentes o elementos de 'marca', ¡coloque cualquier elemento que llame su atención! Piensa en cómo te hacen sentir las imágenes. ¿Qué quieres que haga tu marca? hablar a sus clientes o audiencia? Una vez que haya seleccionado su tablero, le quedará una guía de referencia sobre la apariencia de su marca que puede volver a visitar una y otra vez mientras configura su sitio web.

https://www.pinterest.com/kellyetz/website-color-moodboard/

vestidos para llevar a una boda de verano 2019

Elija fuentes + colores complementarios y edítelo usted mismo cuando sea necesario

Fuentes

Sé que puede ser tentador jugar con MUCHAS fuentes ( Espacio cuadrado tiene montones para elegir) cuando esté configurando su sitio, pero aléjese del teclado y escuche por un segundo. Demasiadas fuentes o fuentes que son todas similares en diseño serán confusas a la vista y harán que sea estresante o desagradable para los clientes mirar su sitio. Los clientes estresados ​​y los clientes no son ideales cuando piensa en términos de tasa de rebote, espectadores recurrentes y ojos que desea permanecer en su sitio el tiempo suficiente para comprar algo (al menos).

cómo hacer que los monos se vean lindos

Como diseñador, este es uno de los errores más comunes que veo en los sitios web o en el material de marca colateral (tarjetas de presentación, membretes, etc.), pero la buena noticia es que es una solución fácil si recuerda estos consejos:

  • Elija tres fuentes como máximo. Edita, gente! Afortunadamente, Espacio cuadrado facilita esto al crear fuentes consistentes en todo su sitio. Elija fuentes para el Título 1, el Título 2, el Título 3 y el Párrafo (texto del cuerpo) y Squarespace completará automáticamente esas fuentes dondequiera que use títulos o texto del cuerpo en su sitio. GANAR.
  • Intenta elegir un serif (un tipo de letra con florituras al final de las letras, como Times New Roman) y un san serif (una tipografía sin florituras como Open Sans) que son complementarias. O elija dos san serif o dos serifas que sean lo suficientemente diferentes para que el ojo las distinga. El uso de dos estilos diferentes de fuentes como encabezados y subtítulos creará una yuxtaposición agradable en su sitio, lo que hará que sea más fácil de leer y le dará un brillo profesional. A continuación, te preparé esta práctica guía de algunas de mis combinaciones de fuentes favoritas, todas disponibles en Squarespace, para que comiences. Eres bienvenido. (¡Asegúrate de fijarlo para más tarde!)
  • Tenga cuidado con las fuentes de escritura. Usarlos en exceso es MUY fácil de hacer, un poco es muy útil.
  • Nunca uses Comic Sans. Eres mejor que eso.

Color

Lo siguiente son los colores, ¡la parte divertida! Eche un vistazo a su panel de estado de ánimo (le dije que sería útil) y extraiga 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 tiene que ver con la armonía y la confianza, considere los tonos de azul. Si te gusta más la energía y la positividad, prueba los amarillos. Refina tus sombras hasta que encuentres un grupo (yo diría que cinco o seis como máximo) que te guste. Asegúrese de guardar los colores específicos para usarlos en el futuro; aquí hay una gran herramienta para encontrar el código hexadecimal de un color de una imagen si no tiene ningún software de diseño como Photoshop o Illustrator.

Puedes copiar fácilmente un código hexadecimal en Squarespace para usar ese color exacto en tu sitio. A continuación, te indicamos cómo:

Entender la jerarquía + el equilibrio

Recuerda eso infame Oscars snafu ? Todo eso podría haberse evitado con la jerarquía; así de ~ crítico ~ puede ser para un diseño.

Fuente: Bien

enamorado de chico amigo

La creación de una jerarquía dentro de su sitio prioriza el texto que desea que sus espectadores vean primero; piense en llamadas a la acción audaces, títulos de productos, etc. El uso de la jerarquía clasifica su contenido y crea un camino para que el ojo del espectador viaje, para que pueda seguir la historia de su sitio de la forma en que desea que se vea. Aquí hay un ejemplo de cómo creé una jerarquía en uno de mis sitios de Squarespace:

El equilibrio es tan importante como la jerarquía, ya que ancla su sitio y ayuda a que sea más agradable a la vista, clave para retener a los espectadores. Cada elemento de su página tiene un cierto 'peso' que debe equilibrarse. 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 tenues son más claras. A continuación, se muestra un ejemplo de cómo creé el equilibrio en uno de mis sitios de Squarespace:

¿Qué te pones en una primera cita?

Sea estratégico con los espacios en blanco

AMO EL ESPACIO BLANCO. Siempre 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 hay que tener en cuenta es que por espacio en blanco, los diseñadores se refieren al espacio negativo o la ausencia de elementos de diseño, texto o imágenes. No es necesario que el espacio sea blanco para calificar.

Piense en ello como darle a sus elementos espacio para respirar. Del mismo modo que no usaría una foto con la mitad de la parte superior de la cabeza cortada, no desea agregar texto e imágenes a su sitio cuando estén demasiado juntos; resultará estrecho e incómodo para el usuario. ojo. Más espacios en blanco = un diseño más limpio y moderno. Me encanta la herramienta 'espaciador' de Squarespace para crear fácilmente espacios en blanco alrededor de tus elementos cuando lo necesitas. Aquí tienes un ejemplo:

Crea gráficos consistentes

La coherencia 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. Gana, gana.

Al crear su sitio, o después de que su sitio esté completo, es posible que deba crear gráficos, como imágenes de publicaciones de blog que se pueden marcar, listas de verificación descargables, publicaciones de Instagram, etc., para integrarse perfectamente con el diseño de su sitio web. La creación de plantillas para estos gráficos acelerará su flujo de trabajo diario y garantizará 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 que se puede fijar:

cosas que hacer con el sexo

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 en estos días lo están. 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 maravillosamente minimalistas y funcionales. Bing bang boom hecho.

¿Listo para compartir su visión o negocio con el mundo? Comienza hoy tu prueba gratuita de Squarespace (no se requiere tarjeta de crédito) y usa el código 'EVERYGIRL' con un 10% de descuento cuando estés listo para publicar tu sitio web.

¿Tiene preguntas sobre el diseño de su sitio? ¡Comparta los comentarios a continuación y nuestra diseñadora gráfica le dará sus comentarios!