Cómo hacer un sitio web atractivo incluso si no puedes diseñar

¿Te suena familiar? Tienes una gran idea, construyes esa idea, empiezas a mirar el resultado final y piensas... Esto se ve terrible.

Y lo peor, no sabes cómo solucionarlo. Después de todo, somos desarrolladores, no diseñadores.

Afortunadamente, no tienes que ser un diseñador increíble. Solo tiene que ser ingenioso y comprender un par de sencillos consejos de diseño. Internet está lleno de herramientas y recursos gratuitos para complementar su falta de habilidades de diseño.

Voy a mostrarte cómo aprovechar esos recursos para crear algo de lo que puedas estar orgulloso.

Esta guía cubrirá las herramientas, técnicas y recursos que utilizo para diseñar sitios web. No es el final, es todo, pero es una gran guía para las personas que luchan con el diseño. Vamos a construir una aplicación llamada DesignDo. Será una colección de consejos y recursos de diseño (¡muy meta!). Todo lo que usemos será 100% gratis. Para mantener nuestro enfoque en el punto de esta publicación, no usaremos un marco de trabajo frontal. Solo HTML estático.

Planificación

Usar un marco CSS

¿Alguna vez has jugado bolos con alguien que es terrible en eso? ¿Pusieron esos parachoques en el carril para que no puedan lanzar una pelota de alcantarilla? El marco CSS es su parachoques. Es casi imposible lanzar una "bola de alcantarilla" con ellos. Le brindarán un excelente punto de partida y también brindarán las limitaciones que necesita un desarrollador que lucha con el diseño.

Recomendaría Tailwind CSS. Utiliza clases que son abstracciones de propiedades CSS. Sirve como ruedas de entrenamiento para aprender CSS y, además, es fácil crear sitios atractivos con él. Lea los documentos aquí .

Además, si no está utilizando un marco frontal como React o Vue, le sugiero que utilice alpine js. Es excelente para realizar cambios sencillos en la interfaz de usuario, como convertir la navegación en un menú de hamburguesas en dispositivos móviles.

Colores

Mantenlo simple.

Utilice un fondo blanco y texto en negro o gris oscuro. Si tiene texto negro en un área con un color de fondo más oscuro, como un botón, cámbielo a blanco.

1 color principal para su logotipo y botones de llamada a la acción. Úselo con moderación para las cosas que desea "destacar" en su diseño.

Los colores secundarios deben ser un color claro para que las tarjetas se destaquen del fondo blanco. La forma más sencilla es usar varios grises claros para esto. Van con todo.

Determina la personalidad de tu sitio

Cada sitio tiene una personalidad. Pueden ser serios y de negocios. También pueden ser divertidos y alegres. Averigua cuál quieres que sea la personalidad de tu sitio. Esto determinará un par de propiedades CSS que utilizará. ¿Averiguarlo? Bien.

Ahora, si elige serio , sugiero usar:

• Fuente : use la fuente CSS de viento de cola predeterminada. No tendrás que configurar nada.
• Radio del borde: no utilice el radio del borde. Los botones cuadrados y las cajas emiten vibraciones serias.
• Color : para su color primario, los azules oscuros, verdes, grises y morados son excelentes opciones.

Si eliges diversión , te sugiero usar:

• Fuente : Tailwind Default o Outfit
• Radio del borde: utilice un radio del borde de mediano a grande. Elija 1 sin embargo. No mezcle diferentes tamaños de radio de borde. Mantenlo consistente.
• Color: Para su color primario, tiene muchas opciones. Sin embargo, sugeriría un color vibrante más claro.

Encuentra inspiración

Muy bien, entonces tienes una idea de qué personalidad tendrá tu sitio. Ahora ve a buscar algo de inspiración para despertar tu creatividad. NO COPIES el diseño de alguien a la T o su código. Úsalo como tu estrella polar.

Sitios de inspiración de diseño web

• https://land-book.com/
• https://www.awwwards.com
• https://www.siteinspire.com/
• https://dribbble.com/

Mis decisiones

DesignDo será un sitio divertido/creativo. Usaré la fuente de viento de cola predeterminada y un radio de borde grande en botones y tarjetas. También usaré violeta claro como mi color primario.

Usaré esta plantilla de sitio web como mi inspiración...

Tiene una buena sección principal donde puedo poner algo de información sobre mi sitio y una lista vertical, que necesitaré para enumerar mis consejos y recursos de diseño.

Trabaja inteligentemente y no duro

Parte de mejorar en desarrollo y diseño es tragarse el ego. No eres un mejor desarrollador porque construyes todo desde cero. Eres solo un desarrollador lento. Lo mismo ocurre con la construcción de su sitio.

Encuentre componentes o temas gratuitos

Nunca empiezo mi HTML desde cero. Siempre empiezo con algunos componentes preconstruidos y voy desde allí.

Vamos a usar una excelente opción gratuita, Wicked Blocks .

Usando mi sitio de inspiración para guiarme, elegí los siguientes bloques para usar.

mi encabezado

Héroe

A continuación se muestra el contenido del pliegue:

Pie de página

Junta tus bloques en HTML

Antes de comenzar a personalizar nuestro sitio, juntemos nuestros bloques en HTML.

Es un buen comienzo, pero nos queda algo de trabajo antes de que DesignDo esté donde lo queremos.

Logo

Nuevamente, ¡mantenlo simple!

Por lo general, uso un logotipo basado en texto para mis sitios. El nombre de mi sitio es DesignDo, así que ese será mi logo. Por lo general, uso el color primario como fondo y texto en blanco o negro. El color del texto tiene que ver con la legibilidad. Entonces, si el texto blanco es difícil de leer encima de su color primario, use texto negro y viceversa.

Puede crear su logotipo escribiendo HTML o usando un editor de imágenes.

Si decides usar un editor de imágenes, te recomiendo Photopea .

¡Es una imitación de Photoshop, es gratis y es increíble! También puede cargar sus propias fuentes para el texto.

Para el logotipo de DesignDo, solo voy a usar el nombre como texto con una fuente extra negrita. El fondo será mi color primario.

También estoy agregando una ligera rotación al logo para darle un poco más de carácter. (No hagas esto si buscas un diseño más serio.

Enlaces de navegación

No debería haber mucho que hacer con los enlaces de navegación. Asegúrate de que el texto sea gris o negro. Si desea agregar iconos junto con el texto, puede hacerlo. Heroicons es una gran biblioteca de íconos gratuitos que uso todo el tiempo. Sugeriría usar esto si está haciendo un sitio más serio.

También puede usar Heroicons para un sitio divertido/creativo. También me gusta usar emojis para íconos si la personalidad de mi sitio es divertida y creativa.

Para DesignDo, solo tengo 1 enlace de navegación y usaré el emoji de fuego para llamar más la atención.

Héroe

Debido a que usamos Wickedblocks para darnos una ventaja inicial, la sección de héroes no tiene mucho que hacer para nosotros.

Solo necesitamos actualizar algo de texto. Cuando se trata de etiquetas de titulares grandes como las nuestras, estructúrelo de manera que la primera línea sea más larga que la segunda. Es más atractivo a la vista.

También necesitamos actualizar el color de nuestro botón Notificarme a nuestro color primario

Contenido

Una vez más, no estamos muy lejos de cómo queremos que se vea nuestro contenido de la mitad inferior de la página.

No estoy sintiendo los iconos. No van con la personalidad del sitio. Así que me pondré en contacto con Heroicons para obtener algo más acorde con nuestro tema.

¡Eso es mejor! Dejaré el fondo de los íconos solo ya que es gris claro y es un buen contraste con nuestro ícono oscuro y el fondo blanco. También es redondeado, por lo que sigue nuestro tema de grandes radios de borde.

El "Título de corta duración" es un H2 pero usa los mismos estilos que su descripción debajo. Queremos que el título del consejo se destaque y capte la atención del lector. Voy a aumentar ligeramente su tamaño y peso de fuente (no queremos que sea más grande que la etiqueta H1 que se encuentra arriba).

¡Finalmente, actualizaremos el texto del cortador de galletas que vino de los bloques malvados con nuestros propios consejos de diseño!

Resumen

Mucha gente defiende el uso de su propio CSS hecho a mano y el uso de herramientas de diseño como Figma para crear maquetas. Estoy de acuerdo, ambos son grandes cosas. Pero la verdad es que, como desarrollador, no tengo tiempo para convertirme en un experto en Figma o para escribir mi propia biblioteca de CSS personalizada que pueda llevar de un proyecto a otro.

Pero puedo ser ingenioso y usar herramientas y recursos gratuitos en Internet para crear diseños atractivos a un ritmo rápido.

Si quieres ver el proyecto que creé en esta publicación, sigue estos enlaces:

Puedes encontrar DesignDo aquí .

El repositorio de este proyecto está aquí .

Si disfrutó de este artículo, siéntase libre de unirse a mi boletín @ https:// thefreelancedev.com

También publicado aquí .