Diseño Web

Flat design, ¿la tendencia más popular de la web?

Liliana Bustillos · 23.03.2017 ·

El flat design o diseño plano surgió hace algún tiempo de la mano de Microsoft en contraposición a Apple. La firma de Steve Jobs apuesta por un diseño realista o skeuomorphism que imita la realidad a través del uso de sombras,
texturas y todo tipo de trucos visuales. Ahora bien, el diseño plano o, denominado “auténticamente digital” por Microsoft, como nos hace entender su nombre, es un diseño minimalista, moderno, limpio y sencillo que ha adquirido protagonismo estos últimos años gracias a su facilidad de adaptarse a cualquier pantalla y que, según los expertos del diseño web, seguirá siendo tendencia por muchos años más.

El diseño plano o flat design está influenciado por el estilo suizo; un diseño gráfico desarrollado en Suiza en la década de los años 50. Para entonces, se buscaba lograr la unidad del diseño a través de la asimetría en la composición. La información que se deseaba reflejar debía ser clara, legible y objetiva para lograr que fuera socialmente útil e importante.

Desde el año 2002, Microsoft ha implementado en sus lanzamientos el diseño plano como característica de diferenciación entre otras empresas, el cual estuvo dominada por formas grandes e imágenes brillantes acompañadas por fuentes tipo San-serif.

Ya que tenemos una idea general de lo que es el diseño plano, aquí te dejamos sus características principales para que decidas si este tipo de diseño es que el que más le conviene a tu página web o no:

El flat design se caracteriza por el uso de colores planos y vivos
con pocas variaciones en la paleta para favorecer el contraste sobre fondos oscuros e imágenes.
Con sus composiciones limpias y minimalistas, ofrecen un contenido sencillo y libre de distracciones, donde el texto debe ser reducido a lo estrictamente necesario. En el diseño plano aplica el conocido decir de menos es más con el objetivo de lograr un diseño más funcional.
Las tipografías que reinan en el mundo plano son las Sans Serif con un uso elegante y moderado de tamaños y negritas resaltar contenidos.
La diferencia primordial entre el diseño realista y el plano es la ausencia de efectos visuales, degradados, texturas y sombras, los cuales tienden a causar distracción en el usuario y a recargar el ambiente visual.
Por último, las formas geométricas y los íconos sencillos son fundamentales en el
flat design, debido a que aportan nitidez al diseño global.

¿Todavía no estás convencido? Te mencionamos algunas ventajas que no solo resaltan su parte estética, sino su funcionalidad que es lo que al final cuenta.

Este tipo de diseño facilita el uso y la comprensión de interfaces gráficas en las pantallas de los dispositivos móviles como tu smartphone o Tablet.
Al momento de diseñar una página web, tendrás mucho más libertad en el uso de los recursos y, así, lograrás transmitir la información que desees de forma más directa (el conocido call to action). Por eso, es más recomendable este tipo de diseño para los landing pages o webs de una sola página en donde la comunidad web que te visita podrá encontrar y entender la información de forma más fácil y rápida.
Por su diseño simple, el uso de colores vivos producirá en tu portal web un ambiente amigable y provocará una serie de emociones positivas en el usuario.

Gracias a su diseño adaptable (Responsive Design), el diseño plano es perfecto para acomodarse a cualquier tipo de formato, incluyendo teléfonos inteligentes, pantallas con retina display, tablets y monitores, facilitando así la conservación del look minimalista de la web en otros dispositivos. Además de su funcionalidad, las páginas web o aplicaciones con diseño plana son fáciles de usar, tienen una apariencia moderna, son más eficientes y tardan menos tiempo en cargar su contenido, el cual, además, se deja de rodeos y va directo al punto. Para que tengas una buena idea de la aplicación de este tipo de diseño, Microsoft, con su sistema operativo Windows 8, fue el pionero del flat design. El landing page de neuvoo también es un gran ejemplo del diseño plano.

Si decides que el diseño plano es la mejor opción para modernizar tu página web, solo debes recordar que ¡menos es más!

Autora invitada: Liliana Bustillos, del equipo de comunicaciones de neuvoo.

JPG, GIF y PNG: Para qué sirve cada formato y cuándo usarlo [infografía]

Sebastián Thüer · 17.02.2017 ·

Unas de las dudas más frecuentes de los diseñadores web que recién comienzan tiene que ver con los formatos de archivos. Los navegadores web puede mostrar imágenes con extensiones JPG, PNG y GIF. Pero cada una tiene sus particularidades.

EL JPG es el formato estándar de la mayorías de las cámaras de foto. Admite diferentes niveles de compresión de la imagen, puede reproducir con bastante fidelidad los colores y también posee buen desempeño en imágenes oscuras o con sombra. Por ello sus uso predominantes es mostrar imágenes fotográficas.

El formato GIF solo permite una paleta de 256 colores pero incorporara canales de transparencia. Las imágenes se comprimen pero sin pérdida de calidad. Por ello, se utiliza en iconos y gráficos con pocos colores. Además, tiene una característica única: el formato puede contener una secuencia de imágenes, de forma tal que puede contener una animación simple.

El PNG es el último formato en arribar a la web. Se presenta en dos versiones: el PNG de 8 bits que es muy similar al GIF, y el PNG de 24 bits con la misma cantidad de colores que un JPG. El PNG comprime la información sin pérdida de calidad e incluye un canal alfa para añadir una escala de transparencia. Se emplean fundamentalmente para logos que necesitan transparencia y degradados e imágenes de alta calidad, cuando el tamaño del archivo no es un problema.

Todo esto está explicado visualmente en la siguiente infografía:

Vía: TicsyFormacion

Adobe Creative Cloud 2017: Estas son las principales novedades

Sebastián Thüer · 03.11.2016 ·

Adobe acaba de actualizar su suite Creative Cloud a la versión 2017 que incluye algunos de los programas más populares de diseño como Photoshop, Illustrator , InDesign y Dreamweaver. La nueva versión promete mejoras de rendimiento y un mejor flujo de trabajo a partir de la integración de servicios y programas de la compañía. Creative Cloud 2017 ya está disponible para los usuarios que tengan una suscripción de Adobe.

Aquí un repaso de las principales novedades de los programas.

Photoshop CC 2017

La primera impresión que uno tiene es que hay cambios importantes. Apenas creamos un nuevo documento vemos una pantalla totalmente renovada con diversas opciones para escoger tamaños para diferentes soportes como foto, impresión, ilustración, web o teléfonos móviles. Un acierto porque ahora es mucho más intuitivo y fácil generar un documento con las especificaciones correctas.

La nueva ventana para crear documentos es mucho más intuitiva y fácil de usar.

Pero una vez iniciado el programa, no hay demasiados cambios en la interfaz a primera vista. Una herramienta interesante es un buscador integrado que permite encontrar con rapidez herramientas de Photoshop, paneles, menús, ayuda y tutoriales en la propia aplicación. Una buena idea porque con tantas opciones de configuración, acciones y plugins uno por ahí se pierde y no recuerda exactamente donde estaban las cosas.

Otra apuesta fuerte de Adobe es en la integración de servicios. Están empujando fuerte su biblioteca de activos Adobe Stock y ahora en cada búsqueda podemos ver plantillas, fotos, ilustraciones y demás recursos para descargar. Inclusive cuando creamos un documento nuevo nos ofrece comenzar a trabajar directamente desde una plantilla.

Todo se hace desde el propio programa (selección, descarga y edición) sin necesidad de acudir al navegador. La verdad que como ágil, es muy ágil pero sospecho que veremos muchos trabajos muy parecidos entre sí que partieron de la misma plantilla.

Una contra es que el programa ahora es un poco más pesado. Al menos con un Intel I5 y 8GB de Ram va justito, incluso trabajando con imágenes para la web que no tienen demasiada resolución.

El resto de las novedades no parecen ser significativas a excepción de nuevas mejoras en el filtro de licuar. La lista completa de mejoras está aquí.

Illustrator CC 2017

Adobe Illustrator CC 2017 también comparte la nueva ventana para crear archivos con Photoshop. Muy cómoda para buscar rápidamente los tamaños y resoluciones más habituales para cada tipo de trabajo.

La interfaz del programa no presenta cambios significativos pero sí algunas herramientas interesantes. Por ejemplo, un imán que se encuentra arriba a la derecha y, al activarlo, alineará automáticamente los elementos que vayamos trabajando. Por ejemplo, si creamos dos cuadrados y queremos poner uno al lado de otro, no tenemos que ser muy precisos: apenas colocamos un cuadrado al lado de otro automáticamente los alinea. Del mismo modo, si queremos centrar elementos o separarlos de forma equidistante.

El trabajo con la tipografía era algo bastante fastidioso con Illustrator si teníamos muchas fuentes instaladas. La nueva versión tiene un panel con una solución simple pero efectiva: poder marcar tipografías favoritas para luego encontrarla rápidamente a través de un filtro.

Illustrator CC 2017 sigue la misma senda de Photoshop y también ofrece en todo momento acceso a plantillas de Adobe Stock y mejora el trabajo con elementos de las bibliotecas. Insisto: creo que veremos muchos trabajos parecidos con tanta facilidad para usar templates.

La lista completa de las novedades de Illustrator puede consultarte aquí.

InDesign CC 2017

Las novedades que trae la nueva versión del software para maquetación y diseño de página son concretas y puntuales: un mejor manejo de las notas a pie de página para que puedan extenderse por varias columnas del documento, mejoras en las propiedades de las fuentes Open Type y un mayor control cuando se trabaja con puntas de flecha.

Además, InDesign CC 2017 está en la tendencia de ofrecer recursos y plantillas de Adobe Stock mucho más a mano, nuevas funciones para Creative Clouds Libraries y mejor manejo de activos. En este sentido, el programa de autoedición de Adobe se apunta a las mejoras generales que han experimentado todos los programas de la suite.

Pero, sin ser un usuario intensivo de InDesign, no se advierten demasiadas novedades relevantes.

Dreamweaver CC 2017

En este caso Adobe hizo una apuesta fuerte por reestructurar su programa insignia de diseño web. Hace años atrás, Dreamweaver el estándar de la industria para diseño web. Su facilidad para alternar entre la vista de código y de diseño, y la generación automática de un código HTML lo convirtieron en el programa de referencia para diseño web. De hecho, en pleno apogeo de Flash era Dreamweaver el software de diseño web más vendido de Adobe.

Sin embargo, las cosas comenzaron a complicarse. Los desarrolladores fueron migrando a entornos más robustos y enfocados en la programación que admitían, por ejemplo, control de versiones, sintaxis abreviada, preprocesadores, frameworks y muchas cosas utilidades especificas. A su vez, no resultaba del todo intuitivo para los diseñadores que recibieron con alegría a Muse, una competencia interna de Adobe mucho más enfocada en el diseño y con bastantes semejanzas a InDesign.

Conclusión: Dreamweaver era algo limitado para desarrolladores y algo complicado para diseñadores. Por lo tanto, la necesidad de reinventarse era inminente.

Así llegamos a este nuevo Dreamweaver CC 2017 que desde entrada nos advierte que se trata de un producto nuevo y nos va mostrando paso a paso sus principales novedades. Por empezar, vuelve a una vieja práctica: preguntarnos si nos sentimos más cómodos como desarrolladores o diseñadores. Dependiendo de esta opción, nos mostrará una interfaz diferente. Claro, después siempre podemos alternar entre estas vistas.

El editor de código de Dreamweaver 2017 es totalmente nuevo.

Por empezar, el editor de código es totalmente nuevo. Cuenta con sugerencias de código para familiarizarse con HTML y CSS, ayudas visuales y resaltado de sintaxis. Podríamos decir, que su target son «diseñadores que saben código», es decir, profesionales del diseño que se sienten cómodo editando ellos mismos HTML / CSS / Javascript pero que pueden necesitar alguna ayuda para hacerlo.

La nueva versión de Dreamweaver también hace un guiño a los desarrolladores con la admisión (algo tardía, eso sí) de preprocesadores como SASS, Less y SCSS. Además, ofrece un nuevo espacio de trabajo para moverse más rápido por los diferentes proyectos.

Al mismo tiempo, tiene interesante ayudas visuales como una vista previa de navegador en tiempo real y la posibilidad de editar CSS directamente desde un documento HTML sin tener que abrir un archivo aparte. Así las clases que afectan a un elemento se identifican mucho más fácil.

De verdad, las novedades son muchas así que para más detalles se puede consultar aquí.

Conclusión

La nueva versión de Adobe Creative Cloud 2017 ya está aquí pero sin grandes novedades. Hay pequeños cambios incrementales para mejorar la eficiencia de algunas herramientas y una apuesta fuerte para integrar su librería de recursos Adobe Stock al flujo de trabajo. Quizás, demasiado fuerte.

Los productos de Adobe están bastante maduros e introducir novedades drásticas es una jugada que no siempre sale bien. Por ello, las mejoras son puntuales y acotadas. Sus usuarios son profesionales del diseño, la producción y la comunicación que emplean estas herramientas diariamente para hacer su trabajo. Por ello, salvo que haya razones bien fundadas -como en el caso de Dreamweaver- han optado por no introducir cambios sustantivos.

Salvo esta excepción, las novedades de la nueva versión no son tantas, pero las desventajas de pasarse tampoco.

Estrategias para diseñar newsletter y conseguir contactos

Sebastián Thüer · 15.08.2016 ·

Van Gogh se cortó una oreja y Rembrandt decía que “el pintor persigue la línea y el color, pero su fin es la poesía”. Para el interesado en email marketing, la tarea de diseñar newsletter es el boceto poético de su objetivo final: conseguir aumentar su lista de contactos.

Igual que un cuadro sigue una línea central que guía al artista en la concepción y el desarrollo de la obra de arte, la newsletter es el epicentro de todo un proceso que abarca desde el génesis del plan de acción a ejecutar hasta las estadísticas de campaña que muestran los resultados del envío.

En este caso, partiendo de la base de que nuestro objetivo como profesionales es aumentar nuestra base de datos captando nuevos contactos vamos a explicar una serie de estrategias para diseñar nuestro epicentro, la newsletter, que bien realizada nos dará el resultado esperado.

1. Diseñar newsletter en armonía y equilibrio

Las técnicas del expresionismo, el dadaísmo o el surrealismo están muy bien para desconfigurar la realidad y romper con los estereotipos marcados, pero mejor dejemos a Picasso y a Kandinsky en los museos. Cuando hablamos de elaborar una newsletter, hay que tirar del realismo más que nunca y ofrecer al lector un mensaje claro, conciso y directo.

Evidentemente, puedes jugar con el color, las formas y el diseño, pero tratando de mantener una comodidad visual. De nada sirve, por ejemplo, cargar una newsletter con mucho texto de muchos colores y que las imágenes brillen por su ausencia. O, al contrario, desplegar todo un catálogo de fotografías sin un hilo conductor que describa al lector lo que muestra el boletín.

La armonía y el equilibrio son tintes fundamentales en la creación de la newsletter. Además, debes enfocar tus palabras e intenciones a una rápida asimilación por parte del destinatario: el binomio comprensión-reacción. Unos ejemplos:

Si tu objetivo es conocer a tus contactos y que rellenen un formulario, dilo claro y sin rodeos. A todos nos gusta saber qué quieren de nosotros. Estructura la newsletter incluso con forma de cuestionario y añade un botón llamativo o call-to-action que incite a hacer clic.

Si persigues generar ventas en tu página web, transforma el mensaje en una muestra seleccionada de buenas imágenes de tus productos y/o servicios, con un texto atractivo y donde cada fotografía sea un enlace que derive en la página que deseas promocionar.

2. Inspírate de la vida para diseñar newsletter

Ningún pintor que se precie y haya pasado a la Historia destacó por su monotonía. En la versatilidad está el gusto y los pinceles de estos artistas estaban buscando nuevas ideas, musas y experiencias continuamente.

La vida está llena de celebraciones y momentos especiales que podemos aprovechar para dar un toque personalizado a nuestras campañas. Tanto tú como yo, con lo que nos cuesta abrir una newsletter de todas las que recibimos, cuando aceptamos leer una que nos ha llamado más la atención, esperamos que nos ofrezca algo original y acorde con la época del año en la que estamos.

Tener un arsenal de plantillas newsletter disponible nos hace muy fácil el trabajo. Si se acerca Halloween, por ejemplo, podemos tirar de diseños terroríficos y dar un aire tenebroso a nuestro mensaje. Por el contrario, inundaremos de corazones y tonos rosáceos nuestra escritura cuando el Día de los Enamorados se aproxima. Y si llega el verano… ¡a todo color! Un aire fresco para soportar las altas temperaturas con una fresca newsletter.

En resumen, esta estrategia consiste en variar el contenido y el formato del mensaje. Como en toda comunicación, lo repetitivo llega a cansar y una de las peores reacciones que podemos causar en el email marketing es el hastío, la pereza o la previsibilidad. La parte de conseguir contactos viene después, pues si gustamos a nuestros suscriptores de siempre, vamos a ser recomendados por ellos, compartidos en sus redes sociales y difundidos entre sus conocidos.

3. Construye fácilmente tu propia obra de arte

Como ves en este vídeo, diseñar newsletter es un juego de niños. Realmente, una hoja de papel en blanco y un lápiz de color fueron suficientes en nuestra niñez para pasarnos horas creando auténticas obras de arte. Crear es verter la imaginación en un recipiente y mostrárselo al mundo, ya sea un cuadro, una escultura o un diseño gráfico como una newsletter.

Muchas personas no lo toman en serio y creen que todo vale. Pero en una sociedad tan digitalizada en la que estamos infoxicados de estímulos, salirse del canon establecido es lo que marca la diferencia. Por tanto, dedicar parte de tu tiempo a la creación del mensaje y a probar su utilidad puede ayudarte a tener éxito en la campaña de email marketing, puesto que al final lo importante para el triunfo de ésta es captar la atención del destinatario y que el mensaje le transmita, mínimamente, algo.

En el vídeo puedes comprobar que una newsletter se estructura en diferentes módulos personalizables en función de lo que quieras transmitir. Mediante la técnica de “arrastrar-soltar”, irás creando el boceto de tu mensaje tanto para formato de ordenador como para las pantallas de los teléfonos móviles. Añade logos, redes sociales, vídeos, colores, textos, formas y, sobre todo, pinta, colorea, dibuja, perfila, expande, subraya, resalta… crea.

[author] [author_image timthumb=’on’]https://pbs.twimg.com/profile_images/715810959944773632/3PuFvE_p_400x400.jpg[/author_image] [author_info]Carlos Cuéllar de Mailify. Veintitantos. Periodista e Internacionalista. Apasionado del #MarketingDigital y #SocialMedia. Especializándome en email marketing porque la arroba es bella. Vive, comparte y aprende. Twitter: @Livirii[/author_info] [/author]

Portfolio actualizado

Sebastián Thüer · 01.08.2016 ·

Hace tiempo que tenía pendiente la publicación de algunos trabajos y proyectos de diseño web de los cuales estuve participando. Por ahora, hay algunos trabajados mayormente con WordPress aunque también alguno más antiguo que me sorprendió que todavía siga en línea a pesar del tiempo que lleva el rediseño.

Más información sobre los proyectos en la sección Diseño Web.