Así que quiere construir un sitio web y no sabe por dónde empezar. O tal vez sea un aspirante a diseñador web que quiere empezar a comercializar servicios, pero no está seguro de lo que buscan los clientes potenciales.
Si cualquiera de estos escenarios se aplica a usted, está en el lugar adecuado.
Hoy vamos a sumergirnos de lleno en ideas creativas de diseño web que no sólo le inspirarán para empezar a crear sitios web bonitos, sino que también le ayudarán a motivarse para salir de su zona de confort y experimentar con nuevas ideas.
Empecemos por lo básico.
Si es nuevo en el diseño web, dominar los conceptos básicos es fundamental para su éxito como diseñador web. Mientras que las ideas más complejas o fuera de lo común pueden ser divertidas para experimentar, hasta que no tenga un dominio firme de estos fundamentos, podría tener dificultades. Empiece despacio y permítase crecer a medida que adquiera experiencia.
No necesita reinventar la rueda para convertirse en un diseñador web de éxito. De hecho, la mayoría de las veces, ceñirse a un diseño sencillo es lo que acabará resultando más intuitivo para los usuarios.
Recuerde que está construyendo un sitio web para que lo utilicen otras personas. Si las páginas están desordenadas, son difíciles de leer o difíciles de usar, lo más normal es que los usuarios hagan clic y se vayan.
Por el contrario, si mantiene el diseño despejado, fácil de leer y de navegación intuitiva, es mucho más probable que el usuario pueda encontrar la información que busca y estará mucho más inclinado a permanecer en su sitio web.
No cabe duda de que puede divertirse con las fuentes al diseñar un sitio web, pero ante todo debe asegurarse de que cualquier tipografía que utilice sea fácil de leer.
Esto incluye no sólo la selección de un tipo de letra legible, sino también asegurarse de que los tamaños de letra son apropiados para el usuario medio de la web.
Además, no olvide tener en cuenta el interlineado y la longitud de las líneas.
Aunque pueda parecer que basta con escribir el texto y copiarlo/pegarlo en su sitio web, lo cierto es que hay mucho más que interviene en la toma de decisiones sobre la tipografía. La legibilidad es la principal preocupación.
Cuando esté empezando, le recomendamos que trabaje sólo con un puñado de elementos y que los coloque en cuadrículas o bloques al planificar su diseño. Todo debe seguir un orden lógico y nada debe dar la sensación de estar flotando en medio del espacio de su sitio web.
Cuando tenga dudas sobre cómo maquetar su diseño web, tenga en mente el patrón F.
El patrón F describe la trayectoria más habitual que seguirán los ojos de los usuarios al aterrizar en una página web (la misma trayectoria que seguiría usted al escribir la letra F).
Como diseñador o aspirante a diseñador, probablemente ya sea consciente de que los colores son la clave de un gran diseño, pero es importante que esta idea quede bien clara.
No olvide que, aunque puede resultar tentador utilizar todos sus colores favoritos, descubrirá que el blanco y el negro son realmente sus mejores amigos cuando se trata del diseño de páginas web. Esto se debe a que el blanco y el negro son colores que contrastan, lo que hace que destaquen bien (es decir, una fuente negra sobre un fondo blanco es siempre una elección segura).
Dicho esto, probablemente no quiera tener una página web totalmente en blanco y negro. Idear una paleta de colores complementarios y ceñirse a ellos durante todo el proceso de diseño le será de gran utilidad.
¿Recuerda que dijimos que el diseño de su sitio web debía ser intuitivo? No olvide incluir la navegación en esta fórmula.
Como diseñador, puede ser tentador pensar sólo en lo visual, pero lo más probable es que no esté diseñando una página estática. Estará diseñando varias páginas que necesitan enlazarse entre sí. Tenga en cuenta dónde coloca los enlaces, las barras de navegación y los bloques de texto que llevan a otras zonas del sitio web.
En algunos casos, la animación puede ser el camino a seguir, pero en otros, querrá buscar imágenes en la fotografía. Como diseñador, probablemente no será su responsabilidad buscar todas las imágenes, pero es una buena idea hacerse una idea de dónde planea el cliente abastecerse.
Esto no sólo le ayudará a planificar su diseño en términos de maquetación, sino que también puede ser un buen indicador de la estética general de la página web (es decir, si el cliente quiere utilizar una gran cantidad de imágenes vibrantes y coloridas, esto podría ser una buena pista de que usted debería mantener el resto de la maquetación más minimalista para ayudar a que las imágenes destaquen y evitar que las cosas parezcan demasiado desordenadas).
Hablando de estética general...
De nuevo, es probable que no sea responsabilidad suya idear la marca para el sitio web, pero es algo que debe tener en cuenta a la hora de diseñar.
Si no tiene en cuenta la marca, el sitio web podría tener un aire totalmente distinto al que el cliente quiere transmitir. Por ejemplo, si diseña un sitio web divertido, colorido e interactivo para un abogado o un médico, esto podría no coincidir con el tono más serio de los servicios ofrecidos.
Muchas personas navegan por Internet en sus teléfonos y eso significa que es imperativo que el diseño de su página web sea responsivo para móviles. Esto significa que cuando la página web se utiliza en un teléfono móvil, todos los elementos del diseño deben encajar, las fuentes deben ser legibles y usted debe poder navegar por la página web con la misma facilidad que lo haría en un ordenador de sobremesa.
Así que ya conoce lo básico. Ahora vamos a hablar de algunas formas en las que puede añadir algo de picante y sabor al diseño de su sitio web con algunas técnicas y tendencias de diseño más avanzadas.
Nuestro consejo anterior sigue siendo válido: Es absolutamente necesario que siga utilizando fuentes legibles. Esto es especialmente cierto cuando está eligiendo fuentes para piezas de contenido grandes e importantes.
Dicho esto, no dude en experimentar con fuentes más lúdicas. Por ejemplo, vale la pena considerar las letras de burbuja, las fuentes manuscritas, las fuentes retro, las fuentes cinéticas (en movimiento) o incluso las fuentes personalizadas. Sólo asegúrese de que cuando elija estos tipos de letra, coincidan con la marca y la estética del cliente para el que está creando.
¿Quiere crear una página web que tenga un toque interactivo? ¿Por qué no prueba a jugar con la interacción por arrastre?
Con esta idea de diseño web, está creando elementos en la página web que realmente requieren que el usuario "coja" un elemento y lo arrastre a otra parte de la pantalla para desencadenar otra acción. Por ejemplo, hojear un portafolio arrastrando la página en lugar de simplemente desplazándose.
Atrás quedaron los días en que las páginas web tenían que ser totalmente estáticas. Si se siente cómodo, añadir un poco de movimiento a su página web es una forma estupenda de animar las cosas. Puede hacerlo mediante animaciones o GIF. Sólo asegúrese de no excederse en este aspecto o podría acabar pareciendo un diseño amateur.
Este estilo de diseño va en contra de todo lo que sugerimos en la primera sección, pero si usted es alguien que realmente se siente cómodo saliendo de lo convencional, merece la pena estudiar esta idea de diseño web.
En esencia, el brutalismo consiste en ofrecer un diseño ecléctico totalmente opuesto a los diseños más convencionales. Los elementos visuales inconformistas, los diseños que atraen la mirada por toda la página y la falta de orden son características de este tipo de diseño.
¿Cansado de los fondos blancos? Los fondos degradados son una forma fácil de darle un toque picante a las cosas sin dejar de ser relativamente clásico. Puede hacer estos degradados realmente en cualquier color que desee, sólo asegúrese de que el texto sigue siendo legible en la página. Además, los degradados monocromáticos tienden a ser lo que está más de moda ahora mismo.
Aunque las páginas web limpias y ordenadas pueden ser fáciles de ver, si quiere añadir algo de profundidad a su diseño, añadir algunas capas es una forma estupenda de hacerlo. Además, puede jugar con las capas de la forma que desee. Ponga capas de texto sobre elementos visuales, añada alguna animación o incluso algunas formas. Aún así, debe evitar que las cosas parezcan demasiado recargadas, pero cuando se hace correctamente, la superposición de capas es una estrategia excelente para conseguir interés visual.
Dado que los diseñadores tienden a trabajar con formas, imágenes y animaciones, esta idea puede parecer muy fuera de lo común para un diseñador, pero cada vez más estamos viendo una tendencia creciente en la que aparecen sitios web sólo de texto.
Como forma muy moderna y despejada de enfocar el diseño web, para la marca adecuada puede ser una opción excelente.
Como aspirante a diseñador web, necesita tener un gran portafolio. No sólo porque un portafolio es esencial para cualquier persona creativa que intente mostrar su trabajo, sino que es particularmente importante para un diseñador web porque su trabajo consiste en destacar un gran diseño.
Repasemos algunas ideas que puede utilizar a la hora de configurar su portafolio de diseño web:
Una de las cosas que más nos gusta del formato de galería para un portafolio es que ofrece al espectador una visión general de toda su obra. Pueden simplemente hacer clic en su portafolio y ver todo su trabajo sin tener que navegar a cada pieza individual.
Por ejemplo, vemos que esto se hace maravillosamente en el Plantilla afilada.
Como diseñador, no quiere que la gente entrecierre los ojos o tenga que esforzarse para ver de qué va usted. Su estilo debe ser obvio para el espectador nada más hacer clic en su portafolio.
Según nuestra experiencia, una de las formas más fáciles de hacer que su estilo resulte obvio para el espectador es utilizar imágenes grandes que sean claras y le permitan centrarse en los detalles.
Cuando quiera que sus imágenes destaquen, lo más probable es que desee que el resto de los elementos del diseño web sean bastante mínimos. La página Kiln La plantilla es maravillosa para esto.
En algunos casos, ir con un diseño más atrevido y poco convencional puede ser apropiado, pero en general, siempre sugerimos algo limpio y sencillo para su portafolio. Mantendrá el desorden bajo control y permitirá que la gente se centre realmente en lo que importa: su trabajo.
Echa un vistazo a la Diseño de la exposición para hacerse una idea de este estilo.
Como hemos mencionado anteriormente, la superposición de capas es un componente clave de un sitio web bien diseñado y no es algo que deba descartarse.
Si quiere asegurarse de que su diseño web incorpora algunas de esas capas imprescindibles, no olvide echar un vistazo a Line.
Si los usuarios no pueden averiguar cómo navegar realmente por su cartera, hay muchas posibilidades de que hagan clic antes incluso de llegar a disfrutar de todo su duro trabajo.
Asegúrese de que esto no ocurra utilizando un diseño intuitivo como Meridian.
A menudo, al confeccionar un portafolio, es bastante fácil caer en la trampa de pensar que su diseño tiene que ser totalmente profesional. Aunque recomendamos que su trabajo tenga un aire profesional en general, también nos gusta recordar a los diseñadores que se diviertan con sus portafolios. No todo tiene que ser tan según las normas.
Si desea añadir un toque lúdico sin perder la sensación de profesionalidad, le recomendamos encarecidamente que eche un vistazo a Sierra.
Aunque no todos los diseñadores van a querer el toque moderno, en su mayor parte, es responsabilidad de un diseñador mantenerse al día de las tendencias y ofrecer un trabajo moderno. Si está de acuerdo, le recomendamos encarecidamente que añada un aire moderno y actual a la página web de su portafolio. Algo como Polarize le será de gran utilidad.
¿Quiere ver algunas de estas ideas de portafolios de diseñadores en acción? Si es así, tenemos toda la inspiración en su camino con estos ejemplos de portafolios de nuestros miembros:
Minimalista, fácil de navegar y con su trabajo expuesto en primer plano, Zineb Hamza es el ejemplo perfecto de una diseñadora que sabe cómo mantener a los usuarios en su página web. Con una navegación fácil de usar que le dirigirá a todos sus diversos proyectos, no le costará encontrar lo que busca en el sitio web de la diseñadora.
Tema utilizado: Exposure
Nos encantan los diseñadores que saben mantener la sencillez con un diseño minimalista, y Ahmed Bokhari lo hace a la perfección. Con un uso mayoritario de texto en su página de inicio, no hay distracciones y podrá navegar rápidamente a la cartera del diseñador sin ninguna confusión.
Tema utilizado: Horizon
Este diseñador nos muestra exactamente cómo poner en práctica esa disposición en cuadrícula con su diseño sencillo y minimalista. Con sólo una pequeña barra de navegación izquierda y grandes cuadrículas para cada proyecto, uno se hace una idea de la estética de este diseñador desde el primer momento.
Tema utilizado: Order
Uno de nuestros ejemplos favoritos de un diseñador que sabe utilizar el estilo de diseño clásico, esta página web pone de relieve todas esas decisiones de diseño clásico que nos encantan. Hay mucho espacio en blanco, fuentes fáciles de leer, un diseño de cuadrícula y una barra de navegación superior clásica para un uso intuitivo. ¿Qué puede no encantar?
Tema utilizado: Rise
Como diseñadora, Lucy Yu utiliza mucho color y movimiento en sus diseños. ¿Y adivina qué significa eso para la página web de su portafolio? Así es: sencillo, minimalista y con mucho espacio en blanco. ¿Se está dando cuenta de algo? No puede equivocarse con un diseño clásico cuando intente mostrar su trabajo.
Tema utilizado: Ora
Si quiere que su trabajo hable por sí mismo, seguir los pasos de este diseñador es su mejor apuesta. Con texto limitado y funciones de desplazamiento intuitivas y sencillas, no encontrará todas las campanas y silbatos con este ejemplo. En su lugar, lo que encontrará es un sitio web que muestra maravillosamente el trabajo de este diseñador. Simple y llanamente.
Tema utilizado: Coral
Cuando tiene muchos proyectos diferentes y quiere que los usuarios de su página web puedan navegar fácilmente de uno a otro, este diseñador nos muestra cómo hacerlo. Con una barra de navegación a la izquierda, busque el proyecto que le interesa y selecciónelo. Así de fácil. Sin desorden ni animaciones confusas que le distraigan. Directo, sencillo y al grano. De nuevo, puede que esté notando un patrón con estos diseños de sitios web de portafolios.
Tema utilizado: Surface
*Las ofertas son válidas hasta el 31 de diciembre de 2023 a las 11:59 p.m. PST. El descuento 50% sobre el precio de suscripción de un nuevo plan anual Básico, Pro o Pro Plus se aplicará automáticamente al finalizar la compra con el código 50FORMAT. El descuento se aplica sólo al primer año. La oferta no puede combinarse con ninguna otra promoción.