Etiqueta: diseño web

Tendencias del diseño web 2018

Tendencias del diseño web 2018 El diseño web ha sido parte esencial de todo negocio en internet o e-commerce como lo quieras llamar. Tanto el diseño como la optimización han sido parte fundamental para mejorar la experiencia del usuario, pero en cuanto a tendencias del diseño web, tenemos que reconocer unos más que otros.

Tendencias diseño web 2018

En este año 2018 se han descubierto muchas tendencias para que el diseño web tenga mucho énfasis y hacer destacar el atractivo de una web. Recordemos que la optimización siempre es importante, pero si hablamos de tendencias de diseño web, debemos enfocarnos solo en el diseño. La base para esto se trata en las webs más populares, más atractivas, las opiniones y las críticas de los usuarios. Ya que todos estos datos están recolectados para identificar cuales fueron las tendencias del año 2017 y cuales se van a destacar en este año 2018, veamos más sobre ello:

Estructura

En cuanto al diseño o estructura de las páginas web nos vamos a enfocar en dos; el diseño web modular y el diseño web en esqueleto. Ya hemos hablado del diseño web modular como una de los más populares por su presentación como Pinterest en su sitio web. Se trata de agregar varios módulos a un dashboard y que se carguen de forma independiente. Esto funciona muy bien cuando tenemos un e-commerce y queremos mostrar varias vistas, productos o servicios. Puede funcionar como landing page o como una página especifica de nuestra web, solo hace falta ubicarla de forma correcta.

En cuanto al diseño web en esqueleto, es muy similar al modular, debido a que se van cargando por módulos y en forma segmentada. Esta estructura del diseño web en esqueleto permite que nuestra web se cargue por etapas de forma organizada, la recomendación principal es cargar los elementos menos pesados y más básicos, luego cargar los elementos más pesados y con más funciones. Es un poco complejo aplicar esta estructura, pero realmente funciona y hace más organizada una web. Además, el rendimiento no se verá afectado, incluso puede estar mejor optimizado si ordenamos bien los elementos que se van a cargar primero.

Colores

Otro de los factores más grandes son los colores de nuestro diseño web, es la parte fundamental, no se puede hacer un diseño único, sino un diseño universal que sea agradable para todos. Los colores en tendencia para este año 2018 se basan en un contenido propio y basado en infografías informativas por toda la web. Pero sin perder la limpieza del color y lo simple, podemos optar por un par de colores vivos, pero tampoco tener un festival de colores en nuestra web, necesitamos una paleta de colores adecuada y bien estudiada.

Dentro de los colores también tenemos que hablar de las formas, ya que las figuras geométricas forman parte de las tendencias del diseño web en este año 2018. Anteriormente hablamos de ellas, se trata de colocar todo el diseño web en formas geométricas, una característica del Material Design de Google. En este caso no nos vamos a enfocar solo en los colores, sino en los logotipos, flyers, banners, infografías y todo lo que tenga que ver con el diseño. Posteriormente tenemos que volver a aplicar los colores vivos, una paleta de colores específica que se pueda manejar varios colores pero sin hacer un parque de diversiones nuestra web.

Imágenes y videos

Las Imágenes Hero, también usadas como videos, nuevamente forman parte de las tendencias del diseño web de este año 2018. Sin embargo, se debe tener en cuenta la rapidez y optimización de estas imágenes o videos que son capaces de llenar toda la landing page, pero que da gran impacto a los usuarios. Si tarda mucho en cargar un video o una imagen que colocamos, entonces es una mala opción, intenta optimizarlo o utiliza otro método para llenar todo ese espacio de la landing page, sin perder optimización y rapidez de la web.

También debemos tener en cuenta que la realidad virtual y las imágenes 360º grados ha sido parte de un 2017 lleno de sorpresas, por eso comenzando el año 2018 se convirtió en una tendencia. Esto se debe a que cada vez más cámaras y más aparatos de realidad virtual se acercan a las manos de los usuarios y quieren experimentar dicha experiencia. También están las imágenes Hero dinámicas, se trata de cambiar de imagen o colocar botones CTA por encima de la imagen dependiendo de las acciones del usuario mientras pasa el mouse por ciertas áreas de la web.

¿Con cuál te quedarás?

Como hemos visto, la estructura modular, la estructura de esqueleto, los colores vivos, las formas geométricas y las imágenes Hero forman parte de las tendencias del diseño web 2018. No es necesario escoger uno solo, ya que podemos combinar todos los elementos en uno sola web, pero siempre debemos tener en cuenta la optimización y la rapidez de la web. Si vamos a optar por SEO, recordemos que un Speed Up lento penaliza el SEO según Google. Así que debemos tener en cuenta no solo nuestro diseño, si se debe ver atractivo, pero debe ser optimizado y rápido.

¿Qué son y cómo funcionan las imágenes “Hero”?

¿Qué son y cómo funcionan las imágenes “Hero”?Hay ciertos detalles de una página web que los usuarios tienen como prioridad, cuando ese diseño está mal o no atrae suficiente al usuario ¿Qué piensas que hará? Probablemente cierre la página web al instante o le interese más el contenido que el diseño…

Imágenes Hero

Dentro de una página web el diseño tiene mucho que ver con el contenido multimedia, estas imágenes Hero son una de ellas ya que tiene que ver con una imagen que en el diseño web ocupan todo el ancho de una página web, puede ser utilizada incluso en cabeceras y tiene que ser siempre interactivo, de esta manera, los usuarios al llegar a tu página web se van a quedar impresionados con esta imagen, que se llama imagen Hero porque abarca casi todo el inicio de una página web y enfoca toda la vista hacia él.

A las imágenes Hero también se le conoce como imagen destacada gracias a su traducción y su uso, ya que muchos la usan como página de inicio, es como si tuviéramos una tienda de productos y destacáramos las ofertas más importantes en la imagen Hero de nuestra web, lo que queremos decirte es que no es una imagen estática, puede ser incluso un video pero con las dimensiones de una imagen presentando las verdaderas funciones de la página web o presentando servicios y productos, esto siempre llama la atención de los usuarios, depende de ti que hagas en la imagen Hero.

Es lo primero que ven

Sin duda alguna las imágenes Hero se han convertido en una tendencia del diseño web debido a que es lo primero que los usuarios notan al entrar una web, no importa si es la página web de Apple o de Google, siempre va a ser lo primero que noten e incluso, hay tantos desarrolladores que captan la atención del usuario por estas imágenes que es lo primero que cargan de la página, por si no carga muy rápido llamar la atención del usuario y que él quiera esperar que se cargue toda la página web.

Solo contenido útil

Sabemos que las imágenes Hero pueden contener información, el problema es que no lo podemos llenar de información innecesaria o irrelevante que ya los usuarios saben, es como colocar “Nuestra empresa se llama XXX” cuando ellos mismos pusieron en el URL su enlace con su nombre ¿Ilógico no? Las imágenes Hero deben contener información útil y que sea de mucho interés, puedes colocar muchas imágenes Hero y un controlador para que dure una cantidad de tiempo exacta, pero se necesita que despierte más interés en los usuarios y hay compañías que si la han aplicado de esta manera.

Formas de uso

Las imágenes Hero tienen distintas formas de uso, puedes aplicarla en casi todos los sitios de tu página web, es contenido multimedia puro y eso lo hace interactivo.

  • Ofertas especiales: Tanto de servicios como de productos, la atención del usuario irá primero aquí, lo mejor es destacar los servicios que le puedan favorecer mucho más a ellos y hacer una cantidad exacta para que se repita a varios servicios o productos.
  • Información destacada: A los usuarios no les gusta leer 5 páginas de puro contenido escrito, lo mejor es destacar y resumir los servicios que mejor le podemos ofrecer, así ellos no tendrán problema si no entienden todo el contenido del servicio.
  • Una historia: Las imágenes Hero han sido utilizadas también para contar historias, como forma de un testimonio sobre el servicio o producto que compraron con nuestra empresa, solo no debemos excedernos de la cantidad de historia que hacemos en él.

Puedes notar que se le puede dar casi cualquier uso a una imagen Hero, lo más impresionante de todo es que siempre va a atraer la atención del usuario, no dejes pasar la oportunidad y dale un buen uso, no dejes que el usuario lo deje de ver.

Como fondo completo

Una imagen Hero tiene tantas funciones que muchos la usan como una imagen que forma parte tanto del contenido escrito como el multimedia, es como agarrar una imagen que tenga todo lo que necesitamos y colocarlo de fondo de nuestra página web, el problema de no tener conocimientos con el diseño web y las imágenes Hero es que esta modalidad de utilizarlo como fondo puede colisionar con toda la web, puede ser un desastre total si no hacemos un buen uso de ella, además de ajustarlo a varias pantallas para un diseño responsive.

Puedes usarlo como galería

Gracias a todos los usos que le podemos dar a las imágenes Hero también podemos tener la opción de utilizarlo como una galería, pero ¿Cómo? Tiene que depender también de tu página web, por ejemplo, si tienes una página web donde presentas servicios de diseño de arquitectura, diseño de departamento o incluso mostrar logotipos puedes implementar esta función de imágenes Hero en la cabecera como una galería, de esta manera, cuando vayan leyendo que puedes hacer todo esto, las imágenes empezarán a hablar por si sola y si al usuario le gusta, no dudes que tienes más probabilidades de que acceda a tu servicio o producto.

Las primeras impresiones en una página web

Las primeras impresiones en una página webTodo usuario que entra a una página web se da cuenta de ciertas cosas, puede que no todos, pero al menos el 90% de los usuarios siempre se da cuenta de las mismas cosas, por eso hoy te vamos a enseñar las primeras impresiones de toda página web…

Primeras impresiones

En una página web los elementos que hay para que un usuario pueda ver pueden ser infinitos, pero no siempre es así porque muchos ni siquiera logran llegar a una segunda página, solo ven la página de inicio y como notan que no es lo que buscan, simplemente la cierran y no es así… Tenemos que dar siempre la primera impresión (es lo que cuenta ¿No?) para que puedan llegar a otras páginas de destino, si hacemos todo mal no esperes que vayas a tener visitas porque cuando no duran mucha tiempo ni siquiera cuenta como visita para las estadísticas.

¿Cuáles son?

Las primeras impresiones son todo aquello que ve un usuario apenas al llegar a una página web, si todo es lo suficientemente interactivo te aseguramos que el usuario siempre va a buscar nuevas secciones, por eso te recomendamos que tengas estas áreas a la perfección.

  • Imágenes Hero

Hace un par de días hablamos sobre las imágenes Hero y porque es tan importante, en realidad, es la primera vista que cualquier usuario ve en una página web y por eso es muy recomendable que se utilicen los mejores parámetros para perfeccionar las imágenes Hero. Aquí podemos colocar ofertas, promociones especiales o colocar la información más destacada de nuestra compañía, además es recomendable colocar botones CTA (Call To Action) para que vayan a una página de destino, de esta manera, cuando ponga su vista en la imagen Hero, ir directamente al servicio o al producto al que estás haciendo publicidad.

  • La paleta de colores

Si aún no tienes idea de la paleta de colores te recomendamos que visites la paleta de colores recomendadas por Material Design, básicamente la paleta de colores es la primera impresión que se va a llevar un usuario debido a que estará en cada rincón estarán los colores primarios, secundarios y alternativos. Tenemos que tener en cuenta que por el simple hecho de que a un usuario no le guste la paleta de colores, cierra la ventana y ni siquiera cuente como una visita, se necesita una paleta de colores neutral para que se lleven una buena impresión en general.

  • Equilibrio de contenido

Puede tardar un poco, pero un usuario siempre se va a dar cuenta de la cantidad de contenido y el equilibrio de la misma, por ejemplo, a un usuario le puede causar mucho estrés que hayan tantas imágenes y no entienda en realidad sobre que trata el sitio o el producto, la otra parte es cuando un usuario se llena de mucha información y no ve las imágenes, no va a entender… Por eso el equilibrio de ambas debe ser fundamental, para que los usuarios entiendan tanto en contenido escrito como en contenido multimedia sobre que trata la web.

  • Tiempo de carga

No tiene mucho que ver con el diseño web, pero es fundamental para la interacción con el usuario, es una de las principales impresiones que se lleva el usuario, en caso de que una página web dure mucho tiempo cargando, puede verse afectado ya que un usuario simplemente cerrará la página porque no soporta que dure tanto tiempo cargando. Debemos hacer un balance y programar bien el BackEnd para que cargue toda la página web pero que también se cargue el diseño para no hacer esperar al cliente 1 minuto o mucho más.

  • Efectos y animaciones

Apenas toda la web este totalmente cargado entonces el usuario podrá visualizar todos los efectos y las animaciones, pero esto se divide en un 70/30 de todos los usuarios, ya que la minoría de ellos en realidad no toman en cuenta si hay animaciones o si hay efectos cargándose en la web, incluso por un slider no le dan mucho importancia, pero cuando se trata de usuarios que van a adquirir un servicio de diseño o de animaciones, necesitamos que nuestra web este cargada pero no del todo de efectos y animaciones, esto demuestra nuestras habilidades.

  • Nombre de la compañía (no todos)

Esta tal vez pueda ser una de las impresiones más alternativas pero que hace énfasis en lo que miran los usuarios, ya que muchos de ellos tan solo al ver el nombre de una dirección web ni siquiera lo visitan o le dan clic, además, debemos saber que el nombre de una compañía en el sitio web también puede favorecer mucho en el SEO para ubicar y posicionar nuestra marca, así que puede ser muy opcional, pero esta primera impresión lo notan incluso antes de entrar a la página web.

Te aseguramos que si perfeccionas cada uno de estos elementos vas a tener una vista mejorada de aquellos que visitan tu web, de esta manera, pueden obtener mejores resultados para vender sus productos, servicios, que visiten su plataforma o incluso que lean todos sus posts, es la mejor manera de obtener buenos resultados.

Relación entre el diseño web y las matemáticas

Relación entre el diseño web y las matemáticasEl diseño web siempre se ha relacionado con muchas otras características fuera de la informática como el color, la psicología e incluso el arte ¿Cierto? Combinar todo en un solo entorno para atraer una cantidad de usuarios, pero hoy se enfoca a las matemáticas…

Diseño web y matemáticas

Las matemáticas se han hecho una base constante para las ciencias de la Tecnología de la Información y Comunicación o mejor conocido como TIC ¿Por qué? Porque las matemáticas son la base de casi cualquier cosa y se ve relacionado con muchos otros diseños como la modelación o la creación de ambientes para videojuegos, así que el joven que pensó que solo vería las matemáticas en la escuela, está equivocado… Las usamos para todo y hoy en día para el diseño web se ha convertido en una tendencia, no te imaginas la verdadera razón.

El diseño web siempre ha necesitado una exactitud, una medida o una figura para plasmarlo con un arte más personal ¿Cierto? Ahí ya estamos usando las matemáticas dentro del diseño web, incluso cuando estamos midiendo el marco de una imagen en un software podemos ver como la cantidad de centímetros, pixeles o milímetros se contabilizan y ya estamos haciendo uso de las matemáticas ahí… Por eso las matemáticas la usamos para todo, tanto que el tiempo de carga es muy importante y se establece una cantidad exacta de cuanto debería durar una web cargándose y ¿Qué crees? Sigue siendo contabilizado a través de las matemáticas.

Una tendencia con futuro

Vamos a ser muy claros, el diseño web y la relación que tiene con las matemáticas no es una tendencia como tal, venimos usándolo desde hace muchos años incluso de las primeras páginas web, lo que si se hace una tendencia dentro del diseño web es que utilizan las matemáticas con mucha conciencia para aplicarlas y obtener los mejores resultados, además de no se trata solo de la programación, sino también el uso de sus figuras geométricas que también está relacionado con las matemáticas para crear un diseño mucho más especial, te lo explicaremos a continuación…

¿Dónde lo usamos?

Las matemáticas son usadas tanto en el diseño como en la programación y no solo en lo web, es mayormente mejor aplicado en las apps porque se necesita mucha más exactitud y perfección para poder mostrar un diseño adaptado a cualquier ambiente.

  • Dimensiones: Tanto para diseñar un logotipo como para hacer el maquetado de una página web o una app se necesitan dimensiones y tales dimensiones son basadas en unas medidas básicas de la matemática que se adapta a cualquier pantalla.
  • Figuras: Cuando hacemos un diseño tomamos círculos, cuadrados e incluso rectángulos y luego le damos un uso abstracto, pero siempre utilizamos las figuras geométricas para darle un enfoque más práctico y perfecto al diseño.
  • Contenido: El contenido lo organizamos según las dimensiones que usamos y a través de varias contabilizaciones, ya sea por diseño web o por programación web se debe contabilizar cada uno del contenido para visualizarlo de la mejor manera.

Estas son las 3 bases donde usamos las matemáticas en el diseño web, pero tenemos que tener en cuenta que hasta por diferenciar un lado del otro estamos tomando como base la matemática, nunca la hemos dejado de usar y ahora mucho menos…

Es un sistema de guía

Muchos diseñadores no recurren a este recurso de guía porque piensan que su creatividad se verá afectada y no se mostrará de la mejor forma, pero debemos tener un control y una guía para hacer cierto diseño web, por ejemplo, las columnas pueden dividirse en 3, 4 o 5 partes iguales, con esta guía podemos administrar muy bien el contenido o incluso como se visualizará en la web, pero no podemos dejar todo al azar y que sea todo abstracto, debe utilizarse como un sistema de guía las matemáticas para el diseño web y el diseño de contenido.

La regla de tres

Seguro en la escuela o la universidad escuchaste de la regla de tres, si no lo recuerdas en serio deberías buscar ayuda, pero básicamente se trata de dividir un espacio o una área en 3 partes iguales, esta es una gran base para el diseño web ya que podemos particionar en 3 partes toda la página y saber cómo vamos a distribuir el contenido. Otra de las formas que lo usan es en el diseño de fotografías, ya que pueden controlar y perfeccionar en 3 partes el uso del contenido que tendrá la fotografía o el diseño.

Radio de Oro

También conocida como la proporción aurea se basa en tomar toda la dimensión de la web y dividirla por un radio específico para diferenciar el uso del contenido de una web, por ejemplo, si tenemos una web que muestra contenido de noticias y a la izquierda una barra lateral para mantener un control ¿Cómo hacemos? Dividimos la dimensión de la web (usualmente entre 1.100 y 1.200 px) y la dividimos entre un radio (entre 1.60 y 1.70), esto dará la dimensión exacta para usar el lado derecho de la visualización del contenido, usualmente entre 700 y 800 px.

La atracción del diseño a mano

La atracción del diseño a manoDesde hace muchos años se ha querido vectorizar los dibujos, aquellas obras de arte que hacemos con papel, lápiz y en ocasiones colores, realmente se puede y ya se está llevando a cabo esta tarea, pero no tienes ni idea de lo original que se nota en un diseño web…

Diseño a mano

En todo el post cuando hablemos de “diseño a mano” nos vamos a referir a aquellos diseños que hemos hecho con lápiz sobre papel, ya sea un logotipo, una fecha o una casa, sin embargo, las líneas rectas y todo aquello geométrico no entra en esta generalización, debe ser como aquellos diseños que se hacen en pizarra de escuelas, en realidad, tiene que ser algo fuera de lo perfecto y eso ha hecho mucho énfasis en el diseño web, el diseño a mano en realidad se está convirtiendo en una tendencia para todos los desarrolladores web.

Esta modalidad del diseño a mano se puso de moda debido a que quitaba el patrón de flechas comunes, contornos y marcos, tal cual como un entrenador de futbol escribe sus jugadas, así se ha utilizado el diseño a mano dentro del diseño web, se ha utilizado para dejar a un lado lo común de flechas, círculos y cualquier figura de una manera perfecta. Muchos han tratado de tener sus propias figuras de diseño a mano, ya que al ser algo abstracto es muy difícil conseguir plantillas con tantas figuras, pero aun cuando es tan desconocido, atrae mucho.

Lo imperfecto se vuelve ideal

Tenemos que tener en cuenta que el diseño a mano no busca la perfección, podemos darnos en cuenta que todos los diseños a mano no son perfectos, no son líneas perfectas pero si debe tener una simetría a la perfección, de esta manera, los diseños se vuelven más atractivos para los usuarios, esta tendencia ha tomado protagonismo porque deja de ser un diseño web convencional, empieza a ser muy original y desde que las estadísticas han dicho esto, los desarrolladores web han tenido en cuenta esto como base para sus páginas web.

¿Cómo hacerlo?

Hay dos formas de hacerlo, la primera lleva mucho más trabajo pero se trata de un diseño a mano totalmente original, puedes hacer tu diseño a lápiz en papel o a mano alzada como le dicen muchos, luego vectorizarlo para llevarlo a un software de PC, posteriormente podemos crear el modelo sin fondo y también perfeccionar el diseño, colocarle color si no quiere que sea blanco por defecto, entre otras… El problema de este modo es que suele llevar mucho más trabajo de lo común, pero es la mejor opción ya que se vuelve un diseño a mano original.

En cambio la otra forma es ir directamente al software de diseño a mano en una PC, eso sí, si no tienes suficientes conocimientos en diseño se te puede hacer muy difícil hacer una flecha, un circulo y cualquiera otra figura con el efecto de diseño a mano, por eso a las personas que no son exportas en el área de manejar un software de diseño, lo más recomendable es que para hacer estos diseño a mano lo mejor es que lo haga de la primera forma o buscar diseños ya listos en internet y perfeccionarlos a su diseño web con un software.

¿Dónde utilizarlo?

El diseño a mano es recomendable utilizarlo en las indicaciones o en la señalización de un objeto, por ejemplo, tenemos un producto y queremos señalar varias partes específicas, utilizamos la flecha diseñada a mano para señalar esa parte específica. Estas flechas de diseño a mano también son muy utilizadas para hacer un checklist o lista de cosas por hacer, de esta manera, no rellenar todo el de “check” sino que utilizamos un signo de realizado diseñado a mano, así se vuelve mucho más interactivo y no es tan frecuente, también se puede utilizar en texto ya que hay fuentes ya diseñadas.

Ideal para deportes

Muchas páginas web sobre deportes han tomado el diseño a mano para hacer algunas indicaciones de sus páginas web, suele ser la mejor opción ya que las fechas e indicaciones del diseño a mano tiene relación como lo comentamos anteriormente con las indicaciones y las fechas de entrenadores hacia sus jugadores. También se ha implementado mucho en las apps para smartphones con el deporte, es usado frecuentemente para los landing tipo tutorial o solo para diseños de apps en modo de organización de torneos, se ha vuelto toda una tendencia no solo para la web, sino para las apps.

¿Hasta cuándo será tendencia?

La pregunta de muchos, el diseño a mano probablemente nunca dejaría de ser tendencia ya que no se ha popularizado tanto porque no va de la mano con casi cualquier temática de una empresa, por eso el diseño a mano se ha convertido en tendencia, no porque todos lo utilizan, sino porque las páginas web que han utilizado este modelo les ha ido muy bien y por eso esta modalidad y diseño dentro de las páginas web probablemente nunca deje de ser tendencia, depende de cómo lo uses, tampoco lo uses en cada rincón de tu web.

FrontEnd en el diseño web

FrontEnd en el diseño webUna página web no es solo un diseño, una imagen o un formulario de registro, tenemos que saber que el diseño web representa también a la programación y todo se complementa entre el diseño, la programación e incluso el servidor para realizar una página web completa.

FrontEnd

Lo primero que debemos saber es que el FrontEnd es un término que va de la mano del BackEnd, en realidad son dos capas a nivel de páginas web donde una muestra el lado del cliente (FrontEnd) y el otro el lado del servidor (BackEnd) y por eso vamos a hacer mención en el FrontEnd para el diseño web, porque es lo más importante para atraer a los usuarios como los colores, plantillas o formularios, sin embargo, para que una página web funcione a la perfección, deben funcionar las dos partes por separado y juntos, son dos capas que se complementan.

Lo primordial que debemos entender es que el FrontEnd no es solo diseño, ciertamente se complementa de lenguajes de estructuración como HTML y diseño como CSS, sin embargo, también tiene mucho que ver con la programación, no cualquiera puede hacer un diseño web FrontEnd con solo imágenes personalizadas por Photoshop, también se debe tener conocimientos de programación… Adicional del diseño en el FrontEnd y los conocimientos en programación también se debe hacer una buena conexión con el BackEnd (comentado anteriormente) ya que deberían funcionar en conjunto para hacer una buena página web no solo con diseño, sino también con funcionalidades.

Elementos del FrontEnd

El FrontEnd debe tener ciertos requisitos o elementos para que sea bien aplicado al diseño web, no se puede hacer cualquier locura, se debe llegar algunos lineamientos y tener en cuenta sus elementos para tener el mejor FrontEnd.

  • Estructuración: En la mayoría de los casos se utiliza HTML, de esta manera, se puede estructurar cada uno de los códigos para mantenerlos organizados, además de que podemos agregar ciertas funciones como geo localización u opciones multimedia.
  • Presentación: Aquí es donde todos usan CSS en la versión que quieran para presentar todo lo estructurado en HTML, de esta manera, se verá mejor presentable ya sea con bordes, fondos múltiples, sombras, degradados o incluso paleta de colores.
  • Interactividad: Todos usan JavaScript y parte de sus frameworks para hacer el diseño interactivo, una vez ya tengamos la estructurara y la presentación la interactividad será más enfocado a las animaciones, conexiones al BackEnd, entre otras.

Sin estos elementos el FrontEnd no funcionaría y no tendría el mejor rendimiento, en caso de que funcione aun sin uno de estos elementos, no significa que esté bien implementado y cuando los usuarios empiecen a interactuar con él es cuando los errores empezaran a aparecer.

Desarrolladores FrontEnd

En toda la creación de una página web nos vamos a encontrar con modeladores, diseñadores y en este caso, los desarrolladores FrontEnd y BackEnd ¿Qué hacen? Un desarrollador FrontEnd se va a encargar tanto del diseño como de la programación en conjunto, son programadores que tienen cierta inclinación también en el diseño y eso les permite crear la capa estructurada adecuado y luego hacerla interactiva con una presentación más llamativa, suele quedar mucho mejor con un desarrollador que cuando colocas a un programador y un diseñador a trabajar por separado en un FrontEnd, se enredan mucho.

Herramientas recomendadas

Para hacer el FrontEnd sin preocuparte del BackEnd de una página web se pueden utilizar ciertas herramientas, pero no utilices cualquiera, estas son las más usadas y recomendadas:

  • Chrome Dev Tools: Un conjunto de herramientas creadas por Google para editar el archivo HTML, CSS e incluso JavaScript en tiempo real, es muy popular ya que Google Chrome es uno de los navegadores web más usados y esto lo hace muy compatible.
  • LiveWeave: Lo que se destaca de esta herramienta es el diseño y las grandes utilidades que tiene, es como un compilador en tiempo real donde puedes modificar el código y el diseño, además de ver en tiempo real el proyecto final así como el código.
  • Live Reload: Algunas de las herramientas de los navegadores hace falta que se le actualice a cada momento para probar los cambios, a diferencia de todas Live Reload aplica los cambios sin necesidad de refrescar la página, por eso es tan utilizada.

Si ya has utilizado alguna de ellas veras lo fácil de cómo podemos modificar y ver en tiempo real cada uno de los cambios, muchas herramientas incluso se tiene que estar pendiente y actualizando, con estas solo necesitas modificar la línea de código.

¿Y el Full Stack?

Si llegaste hasta este punto es porque seguramente has encontrado la mención de Full Stack dentro de estos términos, pero se trata de la mención o el nombre que se le puede dar a un desarrollador, ya que un programador Full Stack hace absolutamente todo el trabajo, tanto de FrontEnd como de BackEnd, es decir, un programador multiuso pero que le puede tomar mucho más tiempo ya que hace la capa del BackEnd y además la adecua al diseño FrontEnd, pero en la mayoría de los casos, es la mejor opción porque sabe que hace y lo adecuada tanto al FrontEnd y el BackEnd.

Formularios interactivos para el registro

Formularios interactivos para el registroUn usuario tiene ciertas perspectivas de una compañía tan solo por el diseño web, por ejemplo, si tu empresa ofrece servicios de diseño web pero tienes un logotipo que no llama para nada la atención, las probabilidades de que dejen su logotipo en tus manos, piensa en ello…

Formularios de registro

Los formularios de registro es la base de muchos diseños web ¿Por qué? Muchos diseñadores la utilizan tanto que se encuentra en un Landing Page y no está mal, el formulario de registro funciona para hacer el registro de un usuario a la web, puede ser para subscribir a un usuario a un boletín de noticias/servicios o simplemente para registrarlo y asociarlo a lo que se deba la plataforma, debe ser sencillo pero recolectar toda la información necesaria para tener en cuenta que es lo que necesita el usuario o para mejorar cada día la web.

El problema de muchas páginas web y de los diseñadores es que no se enfocan en el formulario de registro, imagina una web con un registro tan común que podrías hacerlo en Microsoft Power Point y te sale mucho mejor, la realidad es que una gran cantidad de usuarios le dan mucha importancia al registro de formulario, ya sea por los colores, por lo interactivo o simplemente por los datos de registro que pide, debemos tener en cuenta que si tenemos un mal formulario de registro, los usuarios ni siquiera les gustará registrarse en la web, es muy importante para el funcionamiento de la misma.

Lo interactivo, siempre atrae…

Seamos sinceros, lo interactivo siempre le ha agradado a los usuarios, así como los efectos de movimiento, las animaciones e incluso un simple GIF, todo esto hace que los usuarios se vean mucho más enfocados en seguir indagando dentro de la web para buscar muchas más cosas, ya sean productos, servicios o contenido de algún interés, sea cual sea el motivo, siempre que sea interactivo y tenga una finalidad, va a ser suficiente para que continúen con el registro, evita todo lo sencillo ya que esto desviaría la atención y no completarían el registro.

La razón por la cual lo interactivo siempre atrae es debido a que lo sencillo, lo plano y lo usual se ha convertido en algo aburrido, incluso el videojuego del dinosaurio que hizo Google para su navegador cuando no hay conexión a internet es mucho más interactivo que todo lo que pueda hacer un navegador web y eso es lo que debemos hacer, aplicarlo al diseño web de una manera que los usuarios que lleguen a nuestra web siempre van a a seguir indagando y si, simplemente por un formulario de registro, eso dice mucho de una empresa.

Consejos

Para tener un formulario de registro adecuado se necesitan un par de consejos, no de programación, sino de diseño web. Te recomendamos seguir los siguientes consejos para tener un buen formulario de registro interactivo:

  • Colores llamativos: Cuando el formulario de registro tiene la paleta de colores adecuada los usuarios no van a dudar ni la primera vez para registrarse, por eso los colores siempre tienen que ser llamativos pero sin ser muy oscuros, debe ser suficiente.
  • Personalización: Hace un par de posts hablamos de la importancia de la personalización, a medida de que se vaya completando el registro y que se vaya llenando la base de datos, debemos hacer que se personalicen las opciones de los usuarios.
  • Utilizar Material Design: En el Material Design hablamos sobre iconos, paleta de colores e incluso formas especiales para diseñar, aplicar este formato en los formularios de registro sería lo más conveniente, de esta manera, seguiremos reglas que han funcionado y formularios avanzados por Google.

Hacerlo interactivo significa que podamos convivir con el cliente, que podamos mostrar en la web lo que les gusta e incluso preguntarles por futuras recomendaciones, es hacerlo siempre pensando en interactuar ya sea ofreciendo datos o solo animación.

Registro paso a paso

Cuando hablamos de formulario de registro interactivo vamos a hacer mención a lo que son los registros paso a paso, en realidad no tiene un nombre para este formulario, pero se basa en señalar y hacer un pequeño tour a medida de que hacemos el mismo registro, de esta manera, no importara si el usuario entendiera o no la plataforma a primera vista,  a medida de que el registro fuera progresando a los usuarios mediante pequeños tips se les agregaría información para que entendieran sobre que trata la plataforma o mostrándole los servicios adecuado según lo seleccionado.

Asistente de registro

Otra de las características que podrían interesar y ser suficientemente interactivo para un formulario de registro son los asistentes de registro o sencillamente un pequeño bot dentro de la web que te resuelva las preguntas frecuentes, que puedas hacer nuevas preguntas y que se te programe adecuadamente a los datos que este ingresando el usuario, de esta manera, si al usuario le gustan los autos del año 2000 y nuestra web ofrece autos de varios años que el bot empiece a recomendarles este producto, posiblemente va a ser una gran inversión, pero facilitará tanto el diseño como el túnel de ventas.

Material Design por Google

Material Design por GoogleGoogle es una de las compañías más grandes en el mundo que abarca diseño, programación e incluso marketing, tiene herramientas absolutamente para todos, pero lo mejor de todo es que Google imparte cursos y ofrece todo el contenido para que todos se capaciten, ya depende de ti como lo uses…

Material Design

Google en el año 2014 en una de sus presentaciones anuales más grandes del mundo como lo es Google I/O hizo un anuncio de lo que hoy en día conocemos como Material Design. Todo comenzó con la nueva interfaz de Google Now (viejo asistente virtual de Google) y cuando Google notó que esta nueva interfaz se adecuó muy bien a las apps, todo empezó a girar alrededor del Material Design y luego cuando se presentó la actualización 5.0 Lollipop, Google decidió reemplazar absolutamente todo lo que conocíamos de la interfaz y convertirlo en Material Design.

Todo indica que Holo (interfaz de Google 4.0) fue reemplazada por lo que Google llama Material Design, pero no fue solo la interfaz, fue absolutamente todas las apps de Google como Calendario, Gmail, Search e incluso Docs. Posteriormente cuando Google liberó Android Studio como compilador oficial de Android, también dio la gran noticia de liberar las librerías, los tips y todo el uso de Material Design, de esta manera, los desarrolladores podrían aplicarlo sin tantos conocimientos a sus apps independientes, posteriormente los desarrolladores webs se llenaron de mucha audacia y lo aplicaron al diseño web, sin mencionar que Google actualiza diariamente esta documentación.

Elementos para el diseño

Material Design abarca hasta la mas mínima opción que aparece dentro de una interfaz de Google porque ellos lo han aplicado incluso en los formularios, pero hoy vamos a hablar solo del diseño, tanto para las apps como para el diseño web.

  • Colores

Dentro de la documentación oficial de Google podemos ver cómo le dan un uso especial al color, ya que en el Material Design esta es una de las características que hizo más relevancia dentro del diseño web, entre ellas podemos encontrar todos los colores con su degradado recomendable por Google, además de tener herramientas para crear temas, hacer test de accesibilidad, previsualizar como se vería en una interfaz el color, las paleta de colores recomendadas por Google y también la usabilidad que se le puede dar, si quieres saber nuestra recomendación, te invito a visitar paleta de colores Material Design recomendadas por Google.

  • Iconos

Google también nos ofrece la gran herramienta de adquirir todos los iconos tanto en color negro como blanco para su web o su app, lo mejor de todo es que están diseñados por Google ¿Qué puede salir mal? Es una de las mejores compañías en cuanto a diseño, están optimizadas, renderizadas y perfeccionadas para que puedas usarla en cualquier interfaz. Existe poco menos de mil iconos en lo que puedes seleccionar o buscar para descargarlo en formato SVG, PNG o incluso en formato de código, en caso de que no tengamos la posibilidad de incrustarlo con archivo multimedia.

  • Imágenes

La forma en la que Google trata las imágenes es dándole un enfoque mucho más practico que una “simple decoración”, por eso le ha ido tan bien… Por eso Google en este apartado del Material Design te ofrece los principios básicos de cómo utilizar las imágenes para perfeccionarlas, luego elegir cuales son las mejores prácticas para elegirlas y personalizarlas, por ultimo Google te imparte toda la capacitación para que lo integres a una interfaz, ya sea web o para las apps, desde resolución hasta la protección del texto para que haga suficiente contraste con la interfaz.

  • Tipografía

Google tiene  una tipografía muy fresca, entre el estándar para la tipografía o el tipo de fuente utilizan Roboto y Noto, aunque para las Android apps el estándar siempre va a ser Roboto. Por defecto Google recomienda que todas las apps sean nativas al idioma ingles o que al menos tengan una traducción hacia este idioma, además en este apartado del Material Design vamos a aprender sobre la caracterización de lenguaje, los estilos (normal, negrita y cursiva) y el tamaño del texto, ya que Google se enfocará en enseñarte en que apartado de una app o un diseño web puedes elegir que tan grande debe ser la tipografía.

  • Escritura

Escritura no es lo mismo que tipografía, no nos confundamos con estas dos características que Google tiene por separado… La escritura para Google tiene que ver en cómo vamos a organizarlo, ya que tiene que ser una escritura en general, sin importar en que idioma se encuentra. Google nos enseñará en este apartado como dirigirnos a un usuario (primera persona o segunda persona) así como evitar el pronombre “nosotros”, escribir directo y conciso, el tono en el que debemos escribir como invitar siempre al usuario y también el uso de la puntuación.

Prácticamente Google dentro del apartado diseño parece una universidad por presentarnos cada uno de los principios y de los temas avanzados del diseño para el Material Design, es como una pequeña biblia de todo lo que necesitamos saber para el diseño web o para las apps, por eso sigue siendo una de las mejores compañías del mundo.

Paleta de colores Material Design recomendadas

Paleta de colores Material Design recomendadasDentro del diseño web se toman bases para atraer a los usuarios, no basta con el contenido y los servicios que ofrecemos, también tiene que ver con el diseño y desde hace un par de años, la paleta de colores ha sido la base de todo.

Material Design

Desde hace un par de años el término “Material Design” ha sido reconocido por mucho tiempo, lo que muchos no saben es que no se trata de una plantilla de colores o de materiales para el diseño web, sino de la modernización que tuvo Google en su sistema operativo Android, que partiendo del diseño de Android fue que tuvo inicio el Material Design, luego fue que se viralizó este uso en otras plataformas como las páginas web u otros sistemas operativos, anteriormente el Material Design de Google era conocido como Holo y todo inició en Google Now.

Lo que hizo Google fue tomar todas las bases del diseño, aplicarlas a Google Now y al ver que tuvo tanto éxito ampliarlo hasta aplicarlo completamente a la versión 5.0 de Android (Lollipop), luego se empezaron a aplicar a todas sus apps hasta que Google formalizo el termino para todos los desarrolladores, tanto que Google tiene una web especial para la paleta de colores y todos los usos que se le puede dar al Material Design, tanto que puedes descargar los paquetes de iconos actualizados para utilizarlo en más de 4 tamaños distintos, tanto en blanco como en negro en varios formatos.

Paleta de colores Material Design

Google se tomó la molestia de hacer todas las paletas de colores para el Material Design, pero no de cualquier forma colocando todos los colores ahí, sino de una manera tan organizada que puedes ver como se hace contraste a un color varias veces, pero no venimos a hablar de los colores sino de las combinaciones recomendadas que ofrece Google para los desarrolladores, lo mejor de todo es que día a día Google actualiza según sus términos y sus modelos que le han funcionado en su sistema operativo y en todas sus webs, mira que son muchas…

Tema Light (claro)

Para los temas claros Google recomienda la utilización de varios tonos de color blanco y gris, además de utilizar sombras negras para que haga contraste con los textos y con el contenido. Este es la paleta de colores que utiliza casi cualquier app de Google, además de utilizar colores primarios de un tono azul, verde o incluso rosado, depende del contraste que uses, pero esta es la paleta recomendada para el tema light:

  • Color gris numero #E0E0E0 – Status bar
  • Color gris numero #F5F5F5 – App bar
  • Color gris numero #FAFAFA – Background
  • Color blanco numero #FFFFFF – Cards/Dialogs

Tema Dark (oscuro)

Para el tema oscuro de Material Design recomienda una combinación desde el color negro más oscuro hasta un tono gris, debemos tratar de hacer una buena combinación con el tono de color adecuado, ya que si no acatamos los colores recomendados de Google podemos hacer especie de un coloración de neón, si estás buscando esta paleta de colores estaría bien, pero si no te sale intencionalmente podrías tener muchos problemas con tu app o diseño web.

  • Color negro numero #000000 – Status bar
  • Color gris numero #212121 – App bar
  • Color gris numero #303030 – Background
  • Color gris numero #424242 – Cards/Dialogs

Texto en fondos

El fondo y la combinación de colores en el texto tienen mucho que ver con la legibilidad, no podemos tener un fondo negro y colocar un texto negro ¿Cómo lo diferenciaríamos?

  • Fondo claro: Cuando el fondo es blanco o un color muy claro se puede hacer una combinación de texto color negro numero #000000 pero utilizar opacidad hasta un 38% para textos ocultos.
  • Fondo oscuro: Cuando utilizan un color oscuro como negro, azul, rosado o incluso verde se necesita utilizar un color blanco para el texto, 100% blanco para diferenciar bien el texto en el fondo.

Color primario y secundario

La base del Material Design tiene mucho que ver con dos colores, el color primario que va a tomar toda originalidad del color dominante en todo el diseño web o de la app, por defecto Google recomienda utilizar un color índigo numero #3F51B5 y en cuanto al color secundario que frecuentemente es utilizado para los botones, botones con texto, selección de texto, campos de escritura, controles, barras de progreso e incluso hipervínculos, entre las recomendaciones que utiliza por defecto Google es un color rosado numero #FF4081 o un color verde azulado numero #455A64, estas son las recomendaciones del Material Design.

Diferencia al Flat Design

En el diseño web el Flat Design es un diseño muy plano como su nombre lo dice, por eso cuando Google hizo mención del Material Design muchos diseños web cambiaron toda su forma de presentar los colores en una forma de degradado ascendente y descendente, esto crea un efecto 3D y sombras, por eso el Material Design ha triunfado y se ha tomado como base para el diseño web y para las apps, tanto para Android como para iOS aunque tomen otra base, se tiene en cuenta incluso los iconos del Material Design desarrollado por Google.

La evolución del diseño web

La evolución del diseño webA través de los años las páginas web han cambiado mucho, la primera página web fue puesta en línea el 20 de Diciembre del año 1990 por Berners-Lee y solo mostraba información sobre lo que es World Wide Web o mejor conocido por todos como WWW.

Evolución de diseño web

Para entender mucho mejor de que se trata la evolución del diseño web debemos saber que la primera página web a la que hicimos mención anteriormente no tuvo absolutamente nada de diseño, no existía contenido, no había nada estructurado e incluso, era tanto texto que las primeras páginas web que tuvieron algo de “diseño” lo hicieron con los mismos caracteres de texto, como lo han hecho muchos programadores cuando comienzan a programar en consola de comandos, todo era basado en texto y eso nos hace entender que el diseño web en realidad no nació junto a las páginas web.

Pero tan solo tuvieron que pasar dos años, ya que en el año 1992 se empezaron a implementar los navegadores web gráficos, esto le permitía a los desarrolladores diseñar su página web y si, esta primera versión llamada “ViolaWWW Hypermedia Browser” ya podía incluir imágenes, pero como todo tiene un inicio, el blanco y negro fue lo esencial… Luego empezaron otros navegadores como Mosaic a mostrar su potencial gráfico con el diseño, hasta que actualmente vemos incluso animaciones especiales en cada una de las páginas web, eso lo hace mucho más interactivo, pero en realidad han cambiado muchas cosas.

Puntos importantes

Anteriormente solo eran páginas web basada en texto, pero tuvieron que cambiar un par de cosas para para que pudiéramos avanzar y tener las grandiosas páginas web que tenemos actualmente ¿Cierto? Aquí te traemos los puntos más importantes de la evolución del diseño web.

  • El comienzo de las tablas

Fue inmediato, Apple fue una de las primeras compañías que lo empezó a usar, pero luego que Mosaic en el año 1992 y 1993 hicieran en lanzamiento oficial de su navegador web Apple empezó a utilizar las tablas para separar contenido, ahora vemos como empieza a ser tan funcional que lo usamos a diario, incluso las plantillas de WordPress tienen una fuerte base en las tablas para separar los contenido, actualmente están usando las tablas horizontalmente para darle otro enfoque y no gastar tanto espacio del tamaño de la resolución final del diseño web, peor todo comenzó aquí…

  • Flash, una nueva era

Sabemos que Flash fue sin duda el comienzo de una nueva era de las páginas web interactivas, aunque no lo creas en el año 1996 comenzaron las verdaderas páginas web con el uso de Flash, pero solo hasta el año 2000 fue que se hizo popular, pero ¿Por qué usar Flash? Actualmente Flash no es tan poderoso para aplicar las interacciones en el diseño web, pero en aquella época HTML y CSS no eran poderosos, mucho menos teníamos en mente utiliza JavaScript o algunas librerías externas, pero esto fue el verdadero cambio que le dio al diseño web.

  • CSS y Web 2.0

Tal vez uno de los conceptos más utilizado por el cambio generacional del diseño web, pero la web 2.0 comienza en el año 2005 pero es cuando Flash empezaba a morir lentamente y varias tecnologías se empezaron a mejorar, como CSS que llega a su tercera versión y HTML estaba a punto de llegar a su quinta versión que todos conocemos como la mejor y hasta ahora todavía utilizada, además que estos diseños eran más bonitos, teníamos la llegada de JavaScript que ahora es más utilizado mediante librerías y otras herramientas de diseño web.

  • Páginas web responsive

Seamos sinceros, fue hasta hace más de 10 años cuando el término “responsive” o sencillamente adaptable como muchos le dicen fue cuando comenzó a llegar a las páginas web, pero este si fue uno de los grandes cambios ya que con la llegada del iPhone y luego la rivalidad con Google por su smartphone con Android, entonces empezaron a hacer los diseños adaptados a los smartphones y esto seguía en aumento, hasta que el año 2016 se encontraron cifras en el marketing donde más del 50% de los usuarios accedían mediante un smartphone ¿Cómo no hacer diseños responsive?

Estos fueron los puntos más importantes antes de la actualidad, sin haber pasado por esta etapa de evolución nunca hubiéramos llegado a tanta interactividad y diseños web realmente increíbles, por eso debemos agradecer haber pasado por estas tecnologías y estos puntos importantes de la evolución del diseño web.

¿Cuál es el futuro?

Justo ahora es casi imposible determinar cuál es el futuro del diseño web, en la actualidad las compañías invierten millones de dólares por diseñadores que hacen de las suyas y hacen muy optimizado tanto el diseño como el rendimiento de una página web y cada vez aumenta la tecnología, no sabemos hasta donde podemos llegar, ya que si se hace muy estable el tema del “holograma” ¿Quién dice que no tendríamos páginas web holográficas? En ese caso tendríamos que cambiar todos los parámetros de un diseñador y hacerlo holográfico, pero la tecnología está preparado para eso, por eso cada día se necesitan más puestos de trabajo en cuanto a estas áreas.