Resultado de imagen de crear web

DISEÑO DE PÁGINAS WEB Y DISEÑO GRÁFICO.p
Documento Adobe Acrobat 601.8 KB

Resultado de imagen de crear web

Pruebas A/B en Landing pagesURL


http://www.instapage.com/adwords


La forma más fácil de hacer tu vídeo profesional


https://videolean.com/ 


12

 

ene

 

2015

Tendencias que marcarán el diseño web de TENDENCIAS DEL DISEÑO WEBeste año

 

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.

 t













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.




Si quieres atraer lectores y usuarios a tu blog o web es muy importante que les ofrezcas contenido relevante. Esta infografía da 10 ideas para lograrlo.

¿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.

 
Distribución información y diseño
Distribución información y 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.

 

Haz clic sobre la imagen para ampliarla



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

40 diseños web muy creativos - sony ericsson
Ver sitio

Cornerd

40 diseños web muy creativos - cornerd
Ver sitio

Toasted Digital

40 diseños web muy creativos - toasted digital
Ver sitio

Jeugdraadbrakel

40 diseños web muy creativos - jeugdraadbrakel
Ver sitio

Cappen

40 diseños web muy creativos - cappen
Ver sitio

Html 5lab

40 diseños web muy creativos - html 5lab
Ver sitio

Ben the Bodyguard

40 diseños web muy creativos - ben the bodyguard
Ver sitio

Ryan Scherf

40 diseños web muy creativos - ryan scherf
Ver sitio

Pointles Scorp

40 diseños web muy creativos - pointles scorp
Ver sitio

Nike Better World

40 diseños web muy creativos - nike better world
Ver sitio

The Combine

40 diseños web muy creativos - the combine
Ver sitio

Art Flavours

40 diseños web muy creativos - art flavours
Ver sitio

Still Pointe Sanctuary

40 diseños web muy creativos - still pointe sanctuary
Ver sitio

Notch Studio

40 diseños web muy creativos - notch studio
Ver sitio

Web Effectual

40 diseños web muy creativos - web effectual
Ver sitio

Inservio Web Solutions

40 diseños web muy creativos - inservio web solutions
Ver sitio

Just Dot

40 diseños web muy creativos - just dot
Ver sitio

Clear Ideaz

40 diseños web muy creativos - clear ideaz
Ver sitio

Kunalchhajer

40 diseños web muy creativos - kunalchhajer
Ver sitio

Psyched

40 diseños web muy creativos - psyched
Ver sitio

Sushimonstr

40 diseños web muy creativos - sushimonstr
Ver sitio

Za

40 diseños web muy creativos - za
Ver sitio

Pink Turkey

40 diseños web muy creativos - pink turkey
Ver sitio

Wearecupcup

40 diseños web muy creativos - wearecupcup
Ver sitio

Cilantro Cafe

40 diseños web muy creativos - cilantro cafe
Ver sitio

Uru Star

40 diseños web muy creativos - uru star
Ver sitio

Big Beep

40 diseños web muy creativos - big beep
Ver sitio

Solid Soup

40 diseños web muy creativos - solid soup
Ver sitio

Mens World

40 diseños web muy creativos - mens world
Ver sitio

Sandaliasxtr

40 diseños web muy creativos - sandaliasxtr
Ver sitio

Macaroni Bros

40 diseños web muy creativos - macaroni bros
Ver sitio

Svn2ftp

40 diseños web muy creativos - svn2ftp
Ver sitio

Ivanasetiawan

40 diseños web muy creativos - ivanasetiawan
Ver sitio

Simple Geo

40 diseños web muy creativos - simple geo
Ver sitio

Marketing Profesional

40 diseños web muy creativos - marketing profesional
Ver sitio

Trevanh Etzel

40 diseños web muy creativos - trevanh etzel
Ver sitio

Cuddle Bugstore

40 diseños web muy creativos - cuddle bugstore
Ver sitio

Pinjata

40 diseños web muy creativos - pinjata
Ver sitio

Ready Made Designs

40 diseños web muy creativos - ready made designs
Ver sitio