Novedades tecnológicas y diseño web
Un pequeño estudio de las novedades y tendencias en cuanto a diseño web y nuevas tecnologías.
¿Han venido para quedarse?
- Esquemas de colores simples. Simplicidad y minimalismo en el Diseño Web
- Parallax Scrolling
- Html5, Css3 y Javascript con jQuery
- Grandes imágenes de background y texturas
- Touchscreen. Diseñar para pantallas táctiles, no para ratones
- Websites de una sola página
- Compatibilidad con móviles en Diseño Web
- Buen contenido
- Social media
- Elementos flotantes. Menús de navegación, menús emergentes...
- Cupones descuento y compras en grupo geolocalizadas
- Redes sociales basadas en geolocalización
- Música geolocalizada
- Juegos móviles asíncronos
- Reconocimiento facial y de movimientos
- Telepresencia social
- Interacción web en tiempo real
- Sistemas operativos para redes de sensores inalámbricos
- Salud, bienestar e investigación móvil
Esquemas de colores simples. Simplicidad y minimalismo en el Diseño Web
Diseña simple, lo simple es bonito. No distraigas al usuario de tu web.
Simple no significa baja calidad o aburrido. Vamos a dar un contenido claro y cómodo, sin sobrecargar la página con incómodos apartados. Juega con dos tres colores para toda la web y abandona los colores de toda la vida, atrévete con colores más vivos.
Este es un ejemplo de sitio minimalista que ha triunfado: appex.no
Parallax Scrolling
Una curiosa técnica que consiste en engañar a nuestro ojo para apreciar profundidades 3D en dibujos 2D. Se consigue jugando con las capas y haciendo que se muevan a diferentes velocidades.
¿Quieres ver un ejemplo? Redimensiona la pantalla del navegador cuando cargues este sitio:
Otro ejemplo:
Html5, Css3 y Javascript con jQuery
HTML5 nos trae audio y video sin necesidad de plugins ni librerías externas. Nos mejora la semántica y nos aporta nuevas características que antes eran impensables.
Con CSS3 la vida del diseñador es más fácil. Bordes redondeados y sombras, opacidad, gradientes, nuevas tipografías, fondos multiples, rotación de textos, transformaciones, transiciones, animación, media queries, etc..
Y jQuery sigue dando fuerte, añade interacción a la web con frameworks de javascript tan sencillo e intuitivos como este.
Grandes imágenes de background y texturas
Títulos grandes con impresionantes web fonts, fondos a pantalla completa de gran calidad y diseños muy creativos con grandes imágenes capaces de llamar la atención de cualquiera.
Hipervínculos exagerados y grandes logos. ¡Todo a lo grande! capta la atención del usuario, esa es la idea.
Aquí tienes unos cuantos ejemplos:
Touchscreen. Diseñar para pantallas táctiles, no para ratones
Cuando hablamos de diseño y desarrollo web, estamos hablando de una de las industrias más versátiles, cambiantes y adaptables. El acceso a la red desde dispositivos táctiles está creciendo exponencialmente. Adapta tus diseños, modela tu interface para que sea manejable con dispositivos de pantalla táctil y sin ratón. ¿MouseOver ha muerto?
Websites de una sola página
Toda la información que requiera un usuario se compacta en una sola página. Esto no sólo mejora la estética del sitio web, sino que ahorra tiempo al usuario ya que toda la información que solicite se encontrará reducida en un sólo sitio.
Compatibilidad con móviles en Diseño Web
Un único contenido para cualquier dispositivo. La combinación de diseños fluidos y media queries adaptarán el diseño de cualquier página web a las dimensiones de la pantalla de cualquier medio de acceso, ya sea un smartphone, tablet, ordenador de sobremesa, portátil o televisor.
Un tema que ya hemos tratado en este artículo.
Buen contenido
Cuida el contenido, contenido original y de calidad.
Internet está saturada de información, si quieres destacar sobre los demás tienes que ofrecer contenido de calidad, útil, relevante y si es posible, excepcional.
Social media
La redes sociales omnipresentes en el diseño web. Facilitán la difusión de las informació, aumentan las visitas en la página web de origen.
Las redes sociales marcan el termómetro de la Web. Ya no basta con el simple icono de Facebook, Google Plus y Twitter en nuestro sitio, hay que moverse más allá. Lograr una integración en tiempo real de los contenidos, optimizar la manera en que se generan y pensar cómo desarrollar herramientas que le ofrezcan al usuario una mejor experiencia en las redes sociales, un lugar donde pasan gran parte del tiempo en el que están en Internet. El desarrollo de juegos para estas plataformas también es un nicho que se puede explotar con éxito para quienes tengan conocimientos en este campo.
Elementos flotantes. Menús de navegación, menús emergentes..
Que nadie se asuste: no vuelven los menús en frames, ni falta que hace. Lo que sí que vuelven son los menús anclados a nuestras pantallas: se acabó el scroll para acceder a nuestros elementos de navegación. Cabeceras fijas, menús laterales anclados o que se desplazan aprovechando el espacio en blanco. Información emergente.
Cupones descuento y compras en grupo geolocalizadas
Sistema mediante el cual puedes localizar establecimientos cerca de tu posición y que ofrecen descuentos en sus productos.
Redes sociales basadas en geolocalización
Redes sociales móviles que se ejecutan en segundo plano y nos avisan de toda la gente con la que nos hemos cruzado a lo largo del día: conocidos, amigos comunes, gente con la que sencillamente tenemos mucho en común, etc.
Música geolocalizada
¿Te imaginas que la música se adaptase al entorno?
Imagina que vas con tu musiquita por la calle, desde tu mp3, smartphone o dentro de tu coche y la música se adapta al entorno, a la calle...
Juegos móviles asíncronos
El juego online asíncrono es una opción ideal para el juego multiplayer en móviles, ya que las conexiones no son todo lo rápidas que querríamos. Además este sistema de juego es menos estresante y más adictivo.
Apalabrados es todo un ejemplo de este tipo de juego.
Reconocimiento facial y de movimientos
El reconocimiento facial puede suponer una pieza clave a la hora de etiquetar a usuarios automáticamente, para descubrir todas las imágenes en las que aparecemos, o conocer a la gente que aparece en las mismas.
Facebook se ha hecho reciéntemente con la empresa face.com para implementar este sistema de reconocimiento facial en sus productos.
Telepresencia social
Esto lo habías imaginado, incluso soñado alguna vez. La idea de transmitir sensaciones físicas cada vez está más cerca:
Gadget para enviar besos por la red y probarlos
Interacción web en tiempo real
Interacción en tiempo real. Turntable.fm es uno de los abanderados en esta materia, ya que permite organizar fiestas en salas de música virtuales, en las que conocer a gente, charlar y escuchar buenos temas.
Sistemas operativos para redes de sensores inalámbricos
Sensores en teléfonos, relojes, neveras, televisiones, aparatos domésticos de todo tipo... Los nuevos dispositivos, junto a las redes wifi, están haciendo posible la recopilación de datos de sus sensores.
Gracias a todo esto, nuestro entorno estaría conectado con nosotros en todo momento, y reaccionaría a nuestras acciones.
Salud, bienestar e investigación móvil
Los smartphones cada vez tienen más funcionalidades y sensores, incluso se está probando a añadirles lentes de microscopio para poder analizar tejidos o fluidos, con fines médicos o de investigación. Imaginaros poder enviar por Twitter o Facebook los resultados de un “auto-análisis” a vuestro médico, o incluso usar una App que utilice reconocimiento visual para analizar las muestras y que nos diga lo que tenemos, en cuestión de segundos.
CONCLUSIÓN
Evoluciones tecnológias que repercuten directamente en el entorno web. Infinidad de nuevos dispositivos que van a interactuar con la web, con diferentes características, como las dimensiones de pantalla o características nativas propias de cada dispositivo, como pantalla táctil.
Desarrolla una web flexible, preparada para dispositivos móviles. Piensa en un diseño minimalista y preocúpate por la semántica. Usa un lenguaje bien estructurado aprovechando las nuevas etiquetas de HTML5 y dale ese punto de dinamismo con jQuery o cualquier otro framework basado en javascript, no te cortes, pero hazlo bien.
¿Flash? flash está bien para un juego, un banner publicitario o para suplir algunas de las carencias que aún tiene HTML5, como streaming de vídeo, pero no uses flash salvo sea estrictamente necesario.
CALIDAD, es básico, usa contenido de calidad; imágenes, textos, enlaces. Optimiza las imágenes y pierde tiempo buscando la mejor, preocúpate de quien te enlaza y de a donde enlazas. Crea contenido de calidad y único, busca la diferencia, sé original.
Las redes sociales son tus aliadas, explótalas al máximo, dedícale tanto tiempo como el que le dedicas a tu web.
Investiga y aplica cuando sea posible las últimas tendencias. Apuesta por la geolocalización y ofrece o aplica servicios de este tipo en tu web. Si tienes un restaurante, dile al mundo donde estás.
¡Internet is everywhere! apuesta por ello, cambia de mentalidad.