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.

Withink, una start-up con un diseño web para aprender

Withink, una start-up con un diseño web para aprenderHay muchas compañías que comienzan con un simple negocio, vendiendo un servicio o un producto, lo que muchos de ellos no saben es como pueden estar cambiando el mundo y cuando se enteran, es porque Google o Apple les está ofreciendo millones de dólares…

Withink, start-up

Una start-up es una pequeña empresa recién sacada del horno como le dicen, pero que ya se encuentra con una buena propuesta, dentro de la tecnología, una start-up básicamente es el futuro… Por eso otras compañías como Apple o Google como lo mencionamos anteriormente las compran por millones de dólares, porque son patentes como lo fueron Oculus VR o las impresiones 3D, que hoy en día son el futuro de la tecnología y como es casi imposible resistirse al financiamiento, entonces la mayoría de las start-ups son compradas pero con los mismos trabajadores para que formen parte del grupo.

Ahora hablemos de Withink, esta start-up valenciana (Valencia, España) ha estado cambiando el estereotipo del diseño web que venimos viendo en casi todas las start-ups, ya que como ellos y el diario valenciaplaza lo menciona, hacen que todo su diseño web sea para la captación de clientes y usuarios, así como debería ser todo ¿Cierto? Pero ellos se enfocan mucho más en ello, que en el propio diseño. La fundadora del diseño y la comunicación de Withink es Esther Castells, hasta ahora se le ha dado mucho reconocimiento por el gran trabajo de Withink, pero tenemos que saber más sobre este proyecto.

Estrategias personalizadas

Una de las grandes y repetitivas palabras que nos vamos a encontrar en Withink es “estrategia”, pero esto significa que se enfocan mucho en el trabajo y la organización, tanto que las estrategias personalizadas si captan mayores clientes, es tal cual como hablamos de personalizar un diseño web, mientras todo se encuentre personalizado, todos van a sentirse especiales y le van a dar el gran reconocimiento a la web, por eso entre mas personalizada sea una web o una estrategia como las de Withink, vamos a tener una mayor cantidad de clientes.

Sus recursos gratis

¿Desde cuándo lo gratis dejo de atraer a clientes? Nunca, por eso Withink hace que sus recursos sean gratuitos, de esta manera, captar la mayor atención de los clientes y tener muchas más probabilidades de que alguien adquiera un servicio o producto… En cuanto a los recursos gratis estamos hablando de información, en este caso, Withink creó un eBook como primera estrategia para tener la mayor cantidad de subscripciones, una vez te hayas subscripto y te hayas unido a la comunidad vas a tener un recurso totalmente gratis como un eBook, plantillas gratis y organizadores semanales.

Si lo vemos de otro modo, pareciera que Withink comprara sus usuarios con recursos ¿Cierto? Por eso es que se le ha dado el reconocimiento a Withink, por ser una compañía que ha tomado el rumbo de apoyarse en captar los clientes a toda costa, sin importar algunos sacrificios… Withink no es tonta por regalar recursos, solo que hemos visto tantos estereotipos de compañías donde se pagan miles de dólares para un recurso, que se nos hace muy extraño que una web no tenga tantas restricciones, pero eso es lo que ha hecho tan popular a Withink y ha atraído la mayor cantidad de usuarios posible.

Servicios de Withink

Mirar un poco sobre los servicios de Withink nos hará cambiar un poco sobre como llevamos nuestra web, Withink se ha encargado de hacer incluso sus servicios adaptables a las necesidades de los clientes ya sean nuevos o avanzados, se nota que han trabajado duro en ello…

  • Diseño web estratégico: Este es el primer servicio y tal vez el más importante, Withink se encarga de crear la estrategia adecuada a tu web ya creada o que vas a crear, Withink hará toda la planificación para que tu web sea una herramienta de venta.
  • Diseño gráfico de publicidad: Withink busca siempre ser original y especial, por eso el diseño gráfico hacia tu publicidad será una base para Withink, además de que sea “bonito” esta start-up hará que sea especial para captar clientes, como lo mencionamos anteriormente, Withink se encarga de que los clientes sean la prioridad a costo de todo.
  • Diseño de marca personal: O mejor conocido como logotipo, para Withink tal vez sea uno de los servicios más estables, ya que al conocer tu idea de diseño y como los clientes se encuentran en la actualidad, hará un diseño equilibrado entre lo que quieres y lo que el cliente necesita.
  • Recursos gratis: No es contado como un servicio dentro de la web, pero es una de las grandes bases para atraer clientes como lo comentamos anteriormente, por eso este servicio es fundamental para desviar la atención de cliente y obtener una subscripción totalmente rápida.

Estos servicios que ofrece Withink es lo que ha hecho que su start-up se haya convertido en un punto de vista diferente a todos los estereotipos de diseño web que venimos viendo desde hace muchos años, por eso deberíamos aprender un poco del diseño y la estructura web de Withink.

El equilibrio de contenido en el diseño web

El equilibrio de contenido en el diseño webEl equilibrio debe existir en todos los aspectos del mundo como un restaurante, no puede haber más bebidas que comidas ¿Cierto? Tiene que existir un balance, un equilibrio o una igualdad entre las comidas y las bebidas, así los clientes tendrán de donde escoger…

Equilibrio de contenido

En cuanto al equilibrio de contenido en el diseño web, se refiere a todo el contenido que vamos a mostrar ya sea textual o visual, un gran ejemplo del equilibrio de contenido son las infografías, ya que están intentan hacer un equilibrio entre las imágenes, colores y cualquier tipo de visualización junto a un par de textos informativos, así ellos pueden captar la atención de los clientes y también informarlos de una manera más sencillas, además de colocar su logo y su promoción para que los sigan a través de redes sociales y mucho mas…

¿Por qué es importante el equilibrio? Imagina por un momento una web con solo texto como si fuera un documento de Word explicando un millón de teorías y sin ni siquiera una imagen para intentar tener una idea visual de lo que podemos estar hablando o en el caso contrario, una web con solo imágenes sin ningún tipo de información o explicación ¿Qué sentido tiene? Ninguno, por eso se debe hacer un balance y un equilibrio entre las imágenes, video o efectos y el texto explicativo de los servicios o productos, es tan importante este elemento en el diseño web que será lo primero que vean.

La atención del cliente

La cantidad de imágenes o textos que se integran en un dashboard o cualquier sección de una página web es la esencial para llamar la atención de los clientes, si a simple vista no captamos la atención del cliente, será difícil luego…

  • Atención visual: La más importante, todos los usuarios verán primero el diseño, las imágenes e incluso los videos antes que cualquier otra información, por eso, este contenido visual debe ser de mucha calidad, de esta manera, apenas vean la primera imagen van a tener toda la atención puesta en la página web.
  • Texto informativo: Este es el complemento de la atención visual, ya que una vez captes la atención el usuario a la web o simplemente a un servicio/producto, con el contenido informativo (texto) vamos a terminar de convencer al cliente de el por qué debe adquirir tal servicio o producto.

Así se mueve el equilibrio, vimos que la atención visual es mucho más importante peor en cuanto a calidad, no en cantidad… Esto no significa que vamos a incorporar muchas imágenes y no colocar texto, para eso es el balance, para crear el perfecto equilibrio entre la cantidad y calidad de imágenes y texto.

¿Cómo lo hago?

Te hemos hablado mucho sobre lo negativo que sería no tener un balance o un equilibrio entre el contenido visual y el contenido descriptivo, sin embargo, la forma en la que puedes hacer un equilibrio perfecto debe consistir en la cantidad y la calidad de todo contenido, por ejemplo, si colocamos una simple imagen como un rollo de fotografías para cámaras profesionales ¿Qué hacemos con una descripción de 1.000 palabras? En dado caso que tengamos que describir en 1.000 palabras, entonces debemos también colocar entre cada texto un par de imágenes para hacerlo un poco interactivo.

Todo consiste en la calidad y no sobrepasarnos con la cantidad, si hacemos un buen equilibrio entre ambas también podemos captar la atención del cliente mucho más rápido. Para que haya un equilibrio y un balance perfecto también podemos utilizar plantillas webs que recomiendan utilizar una cantidad de imágenes específicas y la cantidad de palabras necesarias, estas plantillas webs son utilizadas frecuentemente para la visualización de productos, así tendremos una plantilla que pueda organizar y equilibrar la cantidad con la calidad, de esta manera, no sobrecargaremos ni muchas imágenes ni mucho texto, sino crear el balance y equilibrio perfecto.

Organiza bien en tu web

Maquetar, modelar o diseñar una web puede ser muy molesto porque debemos pensar en cada una de las secciones, de las áreas y de todo el contenido tanto visual como descriptivo que va a estar presente, pero para eso se hacen los profesionales ¿Cierto? Un gran problema es cuando no tenemos ni idea de cuándo o dónde mostrar este contenido visual y descriptivo, para tener en cuenta la atención del usuario debemos crear un apartado en el dashboard para colocar contenido visual y descriptivo, luego también puede estar la sección de productos y la de servicios, pero nunca deben colisionar con otras secciones de la web.

En conjunto, un éxito

Hay muchos diseñadores web que hacen especie de una imagen y luego un texto descriptivo pero como si un elemento fuera totalmente distinto, hay que entender por un momento que se tratan de dos elementos que tienen que funcionar en conjunto para que el usuario pueda entender la idea, por ejemplo, si colocamos en una imagen de un auto y en el texto descriptivo empecemos a hablar de especificaciones técnicas de un smartphone ¿Qué relación tiene? Ninguna y este es un error que se comete frecuentemente en el diseño web.

¿Imagen o video de fondo?

¿Imagen o video de fondo?Una imagen vale más que mil palabras, entonces ¿Cuánto vale un video? Pero desde que pueden ser manipuladas las imágenes por Photoshop o videos por After Effects, todo se ha vuelto una mentira y ya no se sabe en que creer, pero hablemos ahora del diseño web…

Fondo de una web

El fondo es muy importante en el diseño web ya que es el segundo elemento que logran ver las personas, pero es el primero que carga al iniciar la web. El fondo se ha vuelto tan importante en cualquier web que grandes compañías como Twitter, tan solo para hacer un poco de personalización, le da la posibilidad a los usuarios de que puedan escoger otro color o una imagen personalizada, de esta manera, no se sienten como un usuario más, sino un usuario especial y personalizado, pero ¿Qué puede ser el fondo de una web?

Imagen como fondo

Una imagen como fondo de una web es lo más usual en todo el mundo, por eso también se ha cambiado este estereotipo del diseño web, pero una imagen de fondo siempre dependerá del estilo que tenga ya que va a ser el fondo y la base del diseño web principal, incluso si el fondo es un color solido también puede considerarse como la base para la paleta de colores que pueda tener la compañía. Las imágenes se pueden adaptar fácilmente, pero algunos prefieren utilizar un color sólido y de cabecera utilizar la imagen de fondo.

Ventajas de una imagen

Tener una imagen como fondo o cabecera tiene sus ventajas, como podrás ver, es una buena alternativa para la optimización, sin embargo, ya hemos comentado mucho que se trata de un estereotipo que muchos diseñadores webs han llevado a cabo desde sus primeros diseños y aun puede usarse, pero hay que saber usarla.

  • Tiempo de carga reducido
  • Desvía la atención del cliente hacia la imagen
  • Posibilidad de adjuntar contenido visual y descriptivo
  • Crean la base y paleta de colores de la web
  • Puede ser totalmente responsive con el contenido web
  • Hace que la marca personal sea reforzada

Video como fondo

Una de las nuevas tendencias en el diseño web es utilizar un video como fondo o como cabecera de toda la web, es utilizado para tener una enseñanza más interactiva de la página web y explicar, sin tantas vueltas, el punto final de la que se trata un servicio web… Esta forma de implementar un video tiene sus desventajas, ya que puede saturar el tiempo de carga necesario para tener toda la web cargada, sin embargo, es una gran herramienta para una gran interactividad entre la visualización y dejar un poco el estereotipo de imagen de fondo.

Ventajas de un video

El video como fondo o como cabecera de una web es una nueva tendencia porque se hace mucho más interactivo, sin embargo, tiene la gran desventaja que no es compatible con los navegadores para smartphones y tablets, es decir, si tienes una web original con video de fondo tendrás que diseñar una web minimalista diferente.

  • Capta la atención mucho más rápido que una imagen
  • Explicación y descripción rápida de un producto/servicio
  • Puede funcionar también como SEO en redes sociales
  • Es más innovadora para una marca personal
  • Se hace muy viral porque está en otros sitios
  • Mayor interactividad entre la web y el usuario

Color solido

Si aún no te decides entre una imagen o un video como fondo de una web, entonces puedes optar también por un color solido o varios ¿Cómo? Te recomendamos que veas un poco sobre el Efecto Parallax y Scroll donde podemos utilizar una paleta de colores para muchos fondos o también puedes hacer lo más básico según tu contenido, utilizar un color sólido como el blanco para hacer un diseño “Light” o un color más oscuro para tener un diseño “Night”, dos de los temas de diseño más populares en el mundo del diseño.

¿Cuál es mejor?

Vamos a hablar primero en cuanto a la optimización, si notamos bien, el tiempo de carga se verá afectado en un video de fondo o de cabecera de la web ¿Por qué? No se trata de cargar una cantidad de MB exacta, sino de toda una trama que dependerá también de la resolución del video, en cambio, una imagen solamente se carga una vez y ya, el video tiene que cargarse y reproducirse las veces que sea necesario, esto puede saturar también el tiempo de carga y el tiempo de permanencia en una web.

Pero ahora hablemos de la interactividad y del estereotipo, ya estamos cansados de ver la misma imagen en muchas webs intentado hacer un diseño “interactivo” con la imagen de fondo personalizado, sin embargo, se trata más de lo mismo… En cambio, un video como fondo de una web hace que los usuarios puedan desviar la vista por un momento hacia el video directamente y esto significa que tenemos más probabilidades de captar la atención del cliente ya sea para un producto que estemos promocionando o que simplemente estemos haciendo mención a una publicidad, pero siempre será mucho más interactivo un video a una imagen.

Menú Hamburguesa, optimización para el diseño web

Menú Hamburguesa, optimización para el diseño webCuando se trata de optimización para el diseño web se necesita usar todos los recursos necesarios y hoy en día te vamos a traer una herramienta que es muy utilizada en las apps mobile, sin embargo, desde hace un par de años se ha hecho popular en el diseño web.

Menú Hamburguesa

Lo primero que te preguntaras es ¿Por qué Manú Hamburguesa? Este término se le dio a esta herramienta debido a que la hamburguesa puede tener varios contornos como carne y pollo, entonces el icono se adaptó al contorno de la hamburguesa en 3 barras laterales, si logras ver una hamburguesa y el icono del Manú Hamburguesa vas a notar el parecido. Esta herramienta del diseño web fue creada para optimizar el contenido y tener un diseño más responsive ante los usuarios, cuando se trata de un navegador web mobile, se adapta mucho mejor.

Esta herramienta va a mejorar, optimizar y mantener organizado todos los elementos de un diseño web, por ejemplo, las secciones de una web, ya no necesitaremos dejarlas a simple vista ya que podemos enfocarnos más en la cabecera o la imagen Hero de nuestra web, de esta manera, el contenido brillará más y no se encontrará opacado por todas las secciones de la web. El Manú Hamburguesa se ha vuelto toda una tendencia en el diseño web porque tuvo mucho éxito en las apps mobile, mantener todo organizado solo cuando el usuario lo quiera ver, no mostrarlo siempre en la web como suele ocurrir.

Beneficios del Manú Hamburguesa

El Manú Hamburguesa cada vez es más utilizado por las webs, ya que su diseño hace que toda la arquitectura pueda adaptarse de una manera más fácil y optimizada, pero en ocasiones debemos saber implementarlo, ya que puede parecer una web sin personalidad y ser una más del montón de la internet.

  • Control de contenido hasta 20 secciones o mas
  • Más protagonismo al contenido visual
  • La UI es responsive a otros dispositivos (Smartphone y Tablet)
  • Se alcanza estilo limpio, organizado y simple
  • Invitará al usuario a ver todas las secciones

¿Cuándo usarla?

Algunos diseñadores web prefieren no utilizar el Manú Hamburguesa debido a que es un diseño enfocado para apps mobiles, tanto que cuando hacen un diseño web al hacer el maquetado para los smartphones es cuando utilizan el Manú Hamburguesa, puede ser una gran opción ya que es muy personalizado y mucho más minimalista, pero el Manú Hamburguesa puede utilizarse en muchas ocasiones, sin embargo, la recomendación más importante es que el icono del Manú Hamburguesa pueda visualizarse de manera correcta, el contraste entre el fondo y el icono debe ser perfecta para que no haya colisiones entre usuario y quede disgustado.

La primera recomendación para el uso de este Manú Hamburguesa se trata cuando tenemos más de 4 o 5 secciones para mostrar en nuestra web, por ejemplo, secciones como Home, Artículos, Noticias, Cursos, Nuestro Equipo, Crea tu Código, Contacto y About Us, si nos fijamos bien hay hasta 7 secciones, imagina por un momento colocarlas todas en nuestra web, es una forma de saturar de contenido… Hay webs que muestran hasta 15 secciones y ahí es cuando te recomendamos usar el Manú Hamburguesa para mantener todo el contenido de la web esquematizado y organizado, es la mejor opción.

Uso mixto

Te harás la gran pregunta ¿Por qué no hacerlo mixto? Puede funcionar depende de la arquitectura que tenga todo el contenido de tu web, ya que puedes combinar entre varias secciones de la web pero no es lo más recomendable, tal cual debe utilizarse un solo diseño y cuando vayamos a maquetar el diseño web mobile ahí podemos implementar el Manú Hamburguesa, ya que un smartphone o en una tablet es mucho más fácil visualizar el Manú Hamburguesa porque no tiene tantos elementos al igual que una página web en un computador de escritorio.

¿Existe alguna desventaja?

El Menú Hamburguesa puede mantener oculto y organizo ciertos elementos de nuestra web, es totalmente cierto, pero por ese mismo problema puede ser una gran desventaja ya que usuarios que no tienen la experiencia suficiente en la navegación web o ser lo suficientemente curioso para navegar entre todas las opciones de nuestra web, por ese motivo hay que dejarlo también a simple vista ya que si lo ocultamos mucho incluso para los usuarios con mucha más experiencia podría encontrarse muy difícil esta opción, debe tener mucho contraste con el color, las imágenes y la visualización de la web.

También debemos tener en cuenta que podemos dejar absolutamente invisible todo el contenido importante de nuestra web y esto podría ser una gran desventaja ya que el usuario una vez entre a la web puede decir: “Esto no es lo mío, no es lo que esperaba” sin ni siquiera dar un clic en el icono de Manú Hamburguesa, por eso debemos hacer también el buen uso de este Manú Hamburguesa, porque puede evitar que muchos usuarios ni siquiera le den clic, todo el diseño y el contenido visual de la web debe ser atractivo para hacer mucho contraste con el icono de Manú Hamburguesa.