¿Dónde buscar ideas para sitios web?

Quiero compartirles cinco fuentes que pueden consultar para ayudarte a crear bosquejos y ayudarte a desarrollar más ideas para crear un sitio web.

Tabla de Contenidos

  • Introducción
  • Colours Cafe
  • Daily Web Design
  • Frontend Mentor
  • Wrap Bootstrap
  • Canva
  • Internet
  • Conclusión

Introducción

En mi canal de YouTube he estado recibiendo mucho esta pregunta, respecto de dónde sacar ideas para crear sitios web. Y la verdad es que no soy diseñadora o especialista en ux/ui para decir que me es fácil crear sitios web de la nada.

Así que les comparto algunas de mis fuentes esenciales, que siempre tengo a la mano para crear un proyecto web.

Colours Cafe

Quiero empezar primero con esta cuenta de instagram de colorimetrías Colours Cafe, que llevo ya unos años siguiéndolo y que es para mi una fuente muy práctica si quiero asignar una paleta de colores a mi sitio. Esta cuenta ofrece un sin número de variedad de paleta de colores, así como también comparte proyectos para visualizar cómo se pueden aplicar.

Esta fuente te puede ayudar mucho a la hora de maquetar tu sitio al tener un color predeterminado. Sobre todo cuando carecemos un poco de conocimientos para formar y combinar colores.

Por ejemplo, para crear mis sitios del reto #100sitiowebchallenge simplemente elijo el número correspondiente de la paleta de colores al número del sitio web que sigue. De esta manera asigno una colorimetría a mi sitio.

Daily Web Design

Daily Web Design es una de mis fuentes favoritas de ideas para crear un sitio. Creo que tiene mucha variedad, en lo personal visualmente muy atractivos y modernos. Un manejo de gráficos, ilustraciones y fotografías que se unen muy bien.

Aunque que les compartiré que a veces vemos sitios muy bonitos visualmente, pero un poco complicado para construir.

Lo que hago con esta fuentes, es ver algún sitio que me llame mucho la atención y empiezo a crear mi propia versión, después empiezo a maquetar el concepto e idea en mi cuaderno y luego me paso a Figma a maquetar.

-Oh Figma, uno de mis mejores amigos XD

Frontend Mentor

Frontend Mentor es otra fuente que no tengo mucho usándola, pero también se ha convertido uno de mis favoritos. Este sitio tiene una variedad de retos que puedes construir en html, css y/o JS.

Son 102 ejercicios diferentes donde te ofrece los archivos de diseño para poder empezar a maquetar y posteriomente estilizar y animar si es el caso.

Este sitio lo que hace es ofrecerte un reto, teniendo los niveles desde inicial hasta con más expierncia:

  1. Principiante
  2. Junior
  3. Intermedio
  4. Avanzado
  5. Guru

Dependiendo del nivel que elijas, te da las opciones para construir el sitio en HTML, CSS y/o JS. Posteriormente subes la solución a un respositorio de Git para por último dar y recibir feedback de los proyectos.

Me encanta el sitio, y personalmente he hecho varios proyectos.

Yo uso este sitio para ver sólo el homepage de un proyecto que me guste y empezar a construir.

Excelente para ponerte retos y empezar a construir sitios con maquetaciones ya hechas.

Wrap Bootstrap

Wrap Bootstrap es un respositorio de templates hechos en bootstrap que están a la venta.

Me gusta mucho explorar este sitio, porque me permite filtrar los sitios por categoría y de ahí de acuerdo al proyecto que quiero construir me da muchas ideas.

Lo que hago muchas de las veces es que tengo un concepto en mi mente y llego a mezclar la estructura de varios sitios hasta llegar a la maquetación que quiero.

Otra razón de la cuál me gusta esta página es que no me abruma al ver el ejemplo de una variedad de templates.

Canva

Por último, otro repositorio del cual saco muchas ideas para construir mi sitio es Canva.

Canva es sin duda otro de mis mejores amigos XD, y los nuevos “features” que han traído este año con el uso de AI para crear diseños, sin duda complementa esta poderosa herramienta para nosotros los “no diseñadores”.

Los templates de sitios web en Canva son muy básicos, pero muy atractivos para sitios sencillos y sobre todo para tener una idea en la organizaicón de la estructura de tu sitio.

Me gusta cómo aplica gráficos, ilustraciones y fotografía, me parecer sitios sencillos y atractivos visualmente.

Si estás aprendiendo a hacer sitios web, yo recomiendo sólo usar Canva como una fuente de inspiración para crear sitios web, pero no maquetar o publicar un sitio desde Canva.

Al final si tenemos los conocimientos básicos de maquetación y estilos, este tipo de herramientas son rápidas de digerir cuando entrar al mercado por primera vez.

Internet

Y cómo extra quiero agregar que los buscadores son tus mejores amigos también, me ha sido útil infinidad de veces sólo buscar ideas de ciertos tipos de sitio web en internet para tener una idea de dónde puedo empezar.

Me ayuda, me inspira para iniciar.

Creo que lo importante es también aprender a desarrollar ese hábito de identificar qué es buen diseño y qué no para construir tu sitio. Te invito a ver este video donde hablo sobre dos de los consejos que puedo compartirte para mejorar tus diseños web.

Conclusión

  • Esta es una lista de fuentes de información para sacar ideas para tu sitio web
  • Colours Café es un repositorio de paleta de colores que ofrece una variedad de colorimetrías para tu sitio.
  • Daily Web Design es una cuenta en Instagram con un sin fin de ejemplos de diseño web pueden ayudarte a inspirarte.
  • Frontend Mentor son bosquejos de retos en HTML, CSS y/o JS que puedes empezar a maquetar
  • Wrap Bootstrap es una librería de templates a la venta que su categorización te puede ayudar a identificar ejemplos de sitios web de ciertas industrias.
  • Canva tiene una librería de diseños de sitios web básicos, que pueden ayudarte a visualizar diferentes ejemplos visuales.
  • Internet es siempre una última fuente que puede arrojarte un sin fin de ejemplos de sitios web con características más específicas.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Esta es la Mejor Guía para Aprender Desarrollo Web en 2024

Esta es la Mejor Guía para Aprender Desarrollo Web en 2024

Tabla de Contenidos Introducción Guía de Desarrollo Web de Brad Traversy 2024 Conclusión Introducción Siempre trato de darles las mejores recomendaciones en temas de desarrollo web, y esto enfocado a lo que yo consumo. En este caso quiero recomendarles esta guía para...

¿Qué es Flexbox Froggy?

¿Qué es Flexbox Froggy?

Flexbox Froggy es un juego para aprender y practicar CSS flexbox. Tabla de Contenidos Introducción Acerca de Flexbox Froggy ¿Cómo se juega Flexbox Froggy? Jugando Flexbox Froggy Introducción A veces recibo mensajes preguntándome si es necesario aprender primero los...