Aunque seas una persona a la que no le interesan tantos las tendencias, es importante que no dejes que el diseño de tu web pase de moda. Te presentamos a continuación las tendencias que van a marcar el diseño web en este año
1. Diseños a toda página sin barras laterales
La mayoría de las páginas web cuentan con una barra lateral que acompaña todo el largo de la página web. Eliminar la barra lateral o llevarla al final de la página donde puede hacer las veces de pie de página, proporciona mucho más espacio al cuerpo de tu web. Este uso es típico para las web de revistas o con grandes imágenes.
Presentar una página web sin barra lateral puede resultar muy atractivo, pero es importante asegurarnos de que las líneas de texto no sean demasiado largas. Se recomiendan textos con líneas de 40-60 caracteres y el uso de imágenes, columnas y espacios entre párrafos para incentivar la lectura de tus textos.
Nuestras plantillas sin barra lateral son Chicago, Cairo y Riga.
2. Diseños con fondos dinámicos
Ya es oficial, los sliders ya son historia. ¿Qué los está sustituyendo? Las grandes imágenes con títulos y botones de llamada a la acción, que se ven con un golpe de vista y pueden ser más impactantes. Es lo que se llama ahora "hero areas".
Esta nueva tendencia también la encontramos en varias de las nuevas plantillas de Jimdo. Se suelen utilizar junto con una imagen de fondo que ocupe todo el ancho y alto de la página. Requisito indispensable para ello es el uso deimágenes de alta calidad.
Nuestras plantillas con el efecto hero son Rio de Janeiro, Rome y Zurich.
3. Diseños web con navegación fija en la parte superior
El menú de navegación se mantiene en la parte de arriba de la página mientras que el visitante va viendo otro contenido de la web situado más abajo de manera que nunca pierde de vista dónde se encuentra o con la posibilidad de cambiar de subpágina sin tener que volver arriba. Esto proporciona un gran efecto de asombro y es muy útil si te interesa que los usuarios vayan a alguna de las pestañas, como por ejemplo, tu tienda.
Se recomienda usar la navegación en páginas con mucho contenido hacia abajo, pero siempre manteniendo el menú en una sola línea (esto es aplicable siempre). Si presentas el menú en dos o más líneas, quita demasiado espacio y convierte la lectura en algo molesto para aquellos usuarios que tienen pantallas más pequeñas.
4. Diseños con navegación oculta ("toggle" o "hamburger")
Si te interesa asegurar cada milímetro de tu pantalla para el contenido íntegro de tu web, esta puede ser la solución para ti. Inspirado en las aplicaciones para dispositivos móviles que depende de menús expandibles para presentar todas sus opciones, la navegación adaptativa oculta el menú hasta que el cliente haga clic en las tres líneas y poder ver las demás subpáginas.
Para un mayor impacto visual, puedes utilizar esta tendencia para grandes imágenes de fondo o diseños minimalistas. Es importante no recargar mucho la web, puesto que muchos elementos pueden hacer pasar desapercibido el botón para desplegar.
5. Diseños minimalistas
No es un secreto, a veces menos es más. Los visitantes de tu web se pueden sentir ocasionalmente agobiados, por lo que si tienes la posibilidad de presentar tu mensaje rápido, limpio y concreto, no lo dudes y hazlo. Consigue este efecto en tu web con el menú de navegación y presenta únicamente la información exacta que se necesita sin adornos superfluos.
Las mejores páginas minimalistas aplican a menudo el color blanco o cualquier otro color básico a su fondo y tienen mucho espacio entre todos los elementos de la web. Logotipos sencillos, textos más largos y fotografías aisladas pueden resaltar en una página de diseño minimalista.
6. Diseños con esquemas de colores monocromáticos
Usar varias tonalidades de una misma gama de color pueden tener un gran impacto visual. Menor variedad también permite los contrastes de textos blancos o negros para resaltar en la pantalla.
Recuerda que algunos colores pueden tener un gran significado psicológico en tu audiencia, así que asegúrate de elegir un color adecuado antes empezar. Después puedes usar herramientas online como Adobe Kuhler para generar cinco versiones monocromáticas de tu color elegido.
7. Diseños web con vídeos ambientales
Poco a poco las conexiones de Internet se hacen más rápidas, por lo que cada vez más vamos viendo cómo los diseñadores buscan otras alternativas más vivas para sus fondos con vídeos. Los vídeos están pensados para páginas con pocas áreas de contenido y colores de textos que contrasten para que no se pierdan en el vídeo.
Para obtener los mejores resultados, selecciona un vídeo ambiente o varios con áreas amplias de colores similares e introduce pequeñas áreas de contenido y colores para los textos que contrasten.
¿Cómo diseñar correctamente la página de inicio de una empresa?
Retén a tus visitas desde el primer momento
Pecamos de repetición, pero nunca viene mal decir que la página de inicio de una página web determina el éxito o el fracaso de la misma. ¿Tan tajante? Efectivamente: la capacidad que tenga nuestra web para retener a las visitas y hacer que estas conviertan (es decir, compren o interaccionen con nuestra página web) es lo que hace que una página sea buena o no. Para ello, hay que destacar con el diseño y crear una estructura clara de la información de nuestra página de inicio.
Pirámide invertida de la información
Básicamente esta técnica consiste en dosificar la información de mayor a menor importancia. Es la técnica que se
utiliza en el periodismo tradicional para captar a los lectores pues de esta forma se logra retener la atención de las visitas (o lectores en este caso). Esto no hace referencia única y
exclusivamente al texto; las imágenes o vídeos también forman parte de esta información y más si trasladamos este concepto al mundo web. De hecho, el diseño juega un papel primordial a la
hora de presentar la información en una página y el reto es buscar el equilibrio con el diseño.
Siguiendo este principio, la página de inicio se estructuraría del siguiente modo: en la parte
superior predominaría el diseño y muy poco texto para aumentar el impacto visual. El texto podría ser de un tamaño mayor y ser por ejemplo un eslogan con el que se
identifique la empresa. Conforme nos desplazamos hacia abajo, la información escrita va aumentando en cantidad y en protagonismo: se van dando más detalles
mientras que el diseño va disminuyendo de importancia.
Esta distribución de la información y el diseño contribuye a:
-
Retener a las visitas, dado que el diseño es el factor que más influye a la hora de captar la
atención de las visitas.
- Aumentar la credibilidad de la marca: al darle un lugar protagonista a imágenes como el logotipo o una imagen principal, se transmite ante todo profesionalidad.
-
Informar desde el primer instante: las visitas captan desde el primer instante qué servicio o
producto se ofrece o cómo pueden interactuar con la página web.
¿Cómo estructurar la página web en tres partes?
No existe una regla universal para estructurar la página de inicio. A pesar de eso, la suma de los pequeños detalles hace que el contenido se vea mejor. Así pues, es importante que cuidemos las reglas básicas del menú de navegación, de los títulos o las imágenes dentro de la web.
No obstante, en este artículo nos vamos a centrar en la distribución conceptual de la información y vamos a hacer una simple separación imaginaria en tres partes. Para explicarlo, vamos a tomar como ejemplo la página de No pierdas tus libros, un proyecto de La práctica.
PRIMERA PARTE: ESPACIO PARA LA MARCA
En esta primera parte, como decíamos, la visita tiene que saber desde el comienzo donde está. Es por eso que es necesario destacar el logotipo de la marca y una imagen de gran impacto que retenga a la visita.
El menú de navegación da a los usuarios el control sobre la página web. Este tiene que tener una
estructura ramificada e ir desde un punto más general (como "tienda online") a una categoría más concreta (como puede ser un producto).
Otro buen ejemplo, puede ser la página web de los asesores financieros albers-partner.de que (aunque esté en alemán) desde el primer momento se ve el logotipo, a qué se dedican y resaltan una imagen representativa de la ciudad de Hamburgo, que es donde ofrecen sus servicios. O esta página otra página: rebecca-winter.co.uk que ofrece asesoramiento y coaching a padres.
SEGUNDA PARTE: DESTACA LOS PRODUCTOS O SERVICIOS
En esta segunda parte, los productos y servicios toman el papel protagonista. Es un buen momento para poder enlazar con otras partes de la página web, como la tienda online o más información. Puedes utilizar imágenes o iconos que se conviertan en enlaces. En este sentido destacamos las páginas corrotoarquitectura.es que con un toque minimalista sólo presenta imágenes que nos dirigen a otros puntos de la página web o babyclasic.com que presenta tres columnas con más información, además de jugar con los colores y los iconos.
TERCERA PARTE: INFORMACIÓN SIEMPRE VISIBLE
En este ejemplo se resalta además esta tercera parte con otro color para diferenciarse aún más de las partes anteriores. En este espacio se ha de incluir una forma de contacto. Con eso sería suficiente, aunque es también un espacio en el que podemos ofrecer un "segundo" menú de navegación o enlaces a los apartados más destacados de la web. También puede ser un buen lugar para promocionar las redes sociales.
Finalmente y como últimas recomendaciones podríamos decir que la información también es necesario dosificarla entre las diferentes páginas: no podemos tener toda la información en la página de inicio y en el resto de las subpáginas grandes espacios en blancos.
También es necesario buscar ser conciso, claro y procurar evitar toda la información (tanto textos como imágenes) que pueda causar distracciones o ruido al mensaje principal; a fin de cuentas, la página de inicio es como la portada de una revista.
40 diseños web muy creativos
Primero con flash y ahora con HTML5 y CSS3, el mundo de las páginas web siempre tuvodiseños web muy creativos, pero hoy más que nunca vemos como las web se llenan cada vez de más colores y más diseños originales. Pareciera que la imaginación de los diseñadores no tiene límite y los diseños que logran crean con las distintas tecnologías disponibles son interminables. Acá tenemos 40 diseños web muy creativos, una recopilación que muestra 40 ejemplos de sitios web diseñados con una imaginación y creatividad digna de artistas.
Sony Ericsson
Cornerd
Toasted Digital
Jeugdraadbrakel
Cappen
Html 5lab
Ben the Bodyguard
Ryan Scherf
Pointles Scorp
Nike Better World
The Combine
Art Flavours
Still Pointe Sanctuary
Notch Studio
Web Effectual
Inservio Web Solutions
Just Dot
Clear Ideaz
Kunalchhajer
Psyched
Sushimonstr
Za
Pink Turkey
Wearecupcup
Cilantro Cafe
Uru Star
Big Beep
Solid Soup
Mens World
Sandaliasxtr
Macaroni Bros
Svn2ftp
Ivanasetiawan
Simple Geo
Marketing Profesional
Trevanh Etzel
Cuddle Bugstore
Pinjata
Ready Made Designs