Diseño Web archivos - fmkr - Fco. Moreno - Diseño Gráfico y Multimedia

Crossoverposting febrero 2019

Posted on 22 febrero, 20199 diciembre, 2019 by Paco Moreno

Nunca os he contado el porqué de mi interés por el diseño gráfico, en especial por el diseño de interacción. Durante mis estudios de informática en la UCLM, cursé la asignatura de Interfaces y Periféricos, en la que realicé un proyecto que necesitó de una interfaz de usuario. Durante el desarrollo del proyecto, me picó el gusanillo del HTML, y me propuse aprender a usar pohotoshop para diseñar la interfaz; darle interactividad, etc.., y sobre todo picó la inquietud del porqué un programa informático debería tener una interfaz que, además de usable y de fácil comprensión y manejo, tuviese un diseño atractivo y, porqué no decirlo, bonito estéticamente y atrayente. Después la especialización profesional y el estudio de diseño gráfico fueron una consecuencia profesional.

Bueno, y después de la batallita, os traigo una edición más de Crossoverposting, el post de recopilación de los recursos y enlaces sobre diseño gráfico, experiencia de usuario y diseño de interfaces que más me ha gustado durante el mes de febrero, y que me sirve de «repositorio» de recursos para mí y espero que os sirva a vosotros (si es que alguien lee estos posts)

UI Kits

Stisla

Stisla es una plantilla de administración gratuita, 100% de código abierto, basada en Bootstrap que te ayudará a acelerar tu proyecto, diseñar tu propia interfaz de usuario de panel de control y que además encantará a los usuarios que la utilicen. Con una completa documentación, puedes clonarla como repositorio desde Github o descargarla directamente.

Smart Home (UX Pin)

Smart Home es un UI Kit que tiene todo lo que se necesita para crear paneles de control para administrar dispositivos inteligentes como termostatos, luces u otros dispositivos que conforman un hogar moderno conectado. Lleva casi 30 pantallas prediseñadas y puedes descargarlo en diferentes formatos para que lo uses en Photoshop o Sketch. Gracias a UX Pin por este regalazo.

Software de Diseño

Pinegrow

Pinegrow es un editor Web multiplataforma compatible con Mac, Windows y Linux, que te permite construir sitios web multipáginas usando estilos CSS y SASS, con un editor de rejilla css y compatible con varios frameworks como Foundation, Bootstrap 3 o Bootstrap 4; y todo ello lo puedes hacer sin picar (demasiado) código. Además dispone de un generador de themes de WordPress, si usas este gestor de contenidos, que te permitirá generar tus propias plantillas de diseño. El software no es gratuito, pero tiene una versión trial, y los precios de licencia son muy muy asequibles.

Tipografía

Noemí Slab Typeface

Noemí Slab Typeface es la creación del diseñador malagueño José Antonio Jiménez. Se trata de una familia tipográfica ideal para su uso en periódicos y prensa en general. Dispone de una versión gratuita de descarga con dos versiones, text y negrita. Una fuente serifada de aspecto de máquina de escribir que nos recuerda a las Lucidas o a Museum. Un excelente trabajo que además tiene un 50% descuento para uso personal hasta febrero de 2019.

La Pildorita

Del 26 al 29 de marzo se celebran en Barcelona las ferias Graphicspag19 y GRADA.

Graphicspag es la feria de referencia del sector de la comunicación visual. Un espacio en el que durante 4 días se darán cita expositores provenientes de países como Alemania, Bélgica, China, Países Bajos, Francia, Italia, Polonia, Reino Unido, algunos países latinoamericanos y Suecia… y en el que los profesionales que la visiten podrán descubrir los equipos, maquinaria, soportes, y materiales que están revolucionando el sector de la comunicación visual y la publicidad a través de impresiones de gran formato. 300 marcas, 200 expositores y más de 9.000 metros cuadrados dedicados al sector. Una feria donde todos los sectores de las artes gráficas y la comunicación visual tienen su espacio.

Esta feria, compartirá espacio con GRADA, un evento impulsado por el Col·legi Oficial de Disseny de Catalunya, que recoge todas las disciplinas que utilizan la imagen como motor y como herramienta de sus actividades: desde la comunicación visual, el diseño gráfico, hasta la ciencia, la arquitectura y la ingeniería, y el desarrollo de estas durante todo su recorrido.

GRADA nace con el objetivo de reconocer el nuevo paradigma del diseño que proclama el Col·legi Oficial de Disseny de Catalunya. La unión de Graphispag con GRADA tiene como objetivo unir los actores que utilizan la imagen como herramienta vital para el desarrollo de sus disciplinas. Empresas productoras, clientes profesionales, clientes finales, prescriptores de proyectos, de productos y de comportamiento se encuentran en los mismos espacios, para compartir y aprender del talento.

Crossoverposting Enero 2019

Posted on 22 enero, 20199 diciembre, 2019 by Paco Moreno

Hace tiempo que busco la forma de organizar los recursos de diseño que voy encontrando en Internet a través de Twitter, Facebook o algunas de las newsletters, como Honos, a las que estoy suscrito. Así quiero «re-inaugurar» una nueva categoría de post en el blog dedicada a hacer un batiburrillo de estos recursos que voy encontrando. Y digo «re-inaugurar» porque es algo que ya hace años hacía (cuando el blog no se basaba en WordPress, que ya sabéis que este año, la web hace 15 años online). Por entonces acuñé el término «Crossoverposting» como un rápido sobrevuelo por encima de los post en los blogs que entonces seguía; así que creo que voy a continuar con esta costumbre, y de esta manera, concentrar en un solo lugar los recursos.

En esta primera nueva edición del «Crossoverposting«, quiero subdividir la entrega en secciones, y estos son los recursos que os traigo:

UI/UX

Vía @Vincentxia77 os traigo un post de Mockplus en el que nos enumeran 6 tutoriales sobre diseño de Interfaces de Usuario y User Experience disponibles en Internet que nos pueden venir muy bien para nuestra constante mejora de capacidades. Entre ellos Hackdesign, una amplia variedad de material que incluye tutoriales, cursos, excelentes publicaciones en blogs, documentación y recursos de descarga, etc; o «Foundations of UX: Prototyping» por James Williamson en lynda.com, que nos propone mejorar el proceso de diseño estructurándolo en 5 pasos. Lecturas muy recomendables.

En Line25.com tienen una impresionante colección de las 25 mejores librerías CSS para animación que hay en Internet y que te permitirán agregar dinamismo e interactividad a tu trabajo. En esta colección encontrarás un montón (algunas gratuitas y otras de pago) de animaciones y efectos CSS para cualquier tipo de elementos web, como textos, imágenes, botones, formularios, pestañas, información sobre herramientas, tarjetas y más. Entre ellas podemos encontrar Hexa, Vivify, Flutter o Woah.css entre otras.

Una de las colecciones gratuitas de recursos de diseño más impresionantes que hay es el que nos brinda Inside Design by Invision, una gran cantidad de librerías de alta calidad, UI Kits, Icon packs y Mockups, todos gratuitos, que te encantará y que lo hará de visita obligada e imprescindible en tus bookmarks.

Tipografía

MARZ es una fuente futurista geométrica, sans serif, con líneas limpias diseñada por Marco H Designs. Incluye glifos únicos en mayúsculas, minúsculas y números. Esta fuente es perfectamente adecuada para una variedad de propósitos de visualización, incluidos logotipos, distintivos y etiquetas, titulares y pancartas, impresiones y mucho más. Y es gratis para uso personal, aunque tiene una versión para proyectos comerciales, que si quieres utilizar tendrá que ponerte en contacto con el autor.

Azonix es fuente minimalista geométrica y muy moderna, con todas sus formas correctas y con todos los caracteres en el mismo tamaño; es perfecta para encajar en una línea uniforme. Se trata de una fuente en mayúsculas diseñada por Mixo y una gran opción para titulares y logotipos. La «A» sin una línea de cruz le da a un aspecto futurista y único. Y lo mejor, es libre para uso personal y comercial.

La Pildorita

Ya nos lo comentaba Ángel Álvaro de Castro en su charla de Subflash de 2015. El diseño en la publicidad que viene tendrá que identificarse, sí o sí, con las emociones, para transformar las ideas en realidad. A medida que la tecnología se vuelve más inteligente, es necesario crear una conexión emocional que permita que los productos digitales lleguen mejor a los usuarios, y para ello, es clave que exista un estudio de la interacción entre humanos y productos y que a la vez sea inspiradora. El diseñador Gleb Kuznetsov nos muestra en este vídeo parte de su trabajo de creación de experiencias digitales a través del diseño emocional.

Mi página web, fcomoreno.net cumple 15 años online

Posted on 9 enero, 20199 diciembre, 2019 by Paco Moreno

En 2019, esta web que estás visitando fcomoreno.net, cumple online 15 años. Si tenemos en cuenta la velocidad a la que avanza internet y las tecnologías web en general, 3 lustros de vida son todo un logro. Y aunque ha tenido altibajos, y no siempre ha estado actualizada, ha vivido momentos estelares, como la nominación y premio del desaparecido Diario La Verdad de Albacete, a la mejor página web personal en 2011. Mi página web cumple los 15 años de edad, en mi opinión, en un buen estado de salud, con una imagen renovada en 2018 y un blog actualizado con aceptable frecuencia.

En 2011, fcomoreno.net recibió el Premio a La Mejor Página Web Personal de los Premios Web del Diario La Verdad de Albacete.

En 2004, el mundo andaba un poco patas arriba, casi como ahora. En cuestiones políticas, Aznar era presidente del gobierno, aunque no por mucho tiempo, ya que los atentados del 11 de marzo precipitarían la caída de los populares y el ascenso del partido socialista a cuyo frente estaba Zapatero. La Guerra de Irak, la sonda Spirit de la NASA aterrizando en Marte, y la sonda Cassini enviada a Saturno; y entre otros éxitos del cine, se estrenaba «El Retorno del Rey» de la trilogía del Señor de los Anillos de Peter Jackson.

Ese año, nacieron dos pesos pesados de Internet, el 11 de enero, en Buenos Aires (Argentina) el estudiante de secundaria Fernando Sanz crea el sitio web Taringa, seguro que te suena, y el 4 de febrero, en la Universidad de Harvard (Estados Unidos), Mark Zuckerberg funda Facebook (por entonces llamado Thefacebook), como un proyecto universitario. Además ese mismo año, la empresa Canonical lanza la primera versión de la famosa distribución del sistema operativo Linux, Ubuntu.

En 2004, yo llevaba ya tres años trabajando en Im3diA comunicación como director creativo. Anteriormente había estado trabajando hasta el 2000 en OCS B2B Factory, Medios Imagen y comunicación y como profesor de academia en un centro local. Mi idea a la hora de comprar el dominio fcomoreno.net era crear una web donde, por un lado pudiera potenciar mi marca personal, teniendo un sitio donde darme a conocer y colgar sobre todo los tutoriales y respuestas de soporte técnico que coleccionaba en los Foros Oficiales de Macromedia.general.España; y por otro lado, una página web donde experimentar y poner en práctica lo que yo mismo iba aprendiendo. Por aquel entonces, yo trabajaba mucho con Flash y visitaba muy a menudo webs como After-hours.org de Toni López, así que las primeras versiones de la web tenían mucho Flash y se basaban en experimentos de animación, intros, para luego después jugar con la carga externa de documentos de texto, xml, hasta poner en marcha el primer CMS que usé en la web, un gestor de contenidos superbásico basado en php y mysql llamado PHPNews.

Desde entonces hasta hoy, la web ha ido pasando por diferentes estados, he ido renovando la interfaz, mi propia marca, los contenidos… Incluso pasó por una pérdida de la primera base de datos, en la primera etapa en la que ya integré WordPress… Hasta lo que veis actualmente. Espero que cumpla muchos más y que siga siendo un reflejo de mi yo en Internet, aunque con la hegemonía de twitter y facebook, las web personales son seres en extinción. Espero que vosotros me sigáis leyendo.

La guías de estilo en el diseño web (UI/UX)

Posted on 19 septiembre, 20189 diciembre, 2019 by Paco Moreno

Una guía de estilo es un «documento vivo» completo que realiza un seguimiento de todos los elementos repetitivos de un proyecto de interfaz gráfica, tanto para aplicaciones de escritorio o dispositivos móviles, como para sitios web complejos. En este documento se abarcan desde las reglas de marca hasta la cantidad de biselado para botones de llamada a la acción, es decir, todos los detalles gráficos a tener en cuenta en el diseño de una interfaz. Las guías de estilo también deben impartir reglas y prácticas sugeridas, incluyendo lo que se debe y no se debe hacer. En un nivel más holístico, son un gran lugar para definir la filosofía de diseño de una empresa.

Es cierto que las guías de estilo requieren de un trabajo adicional para crearlas, especialmente al principio del desarrollo del proyecto, cuando el equipo de diseño ya está lo suficientemente ocupado en el desarrollo de la interfaz. Pero a la larga, ese trabajo extra temprano, ahorra tiempo más tarde: hace que las referencias sean mucho más fluidas y evita la confusión y la incomprensión entre los equipos. Cuando se usan correctamente, las guías de estilo son herramientas de colaboración que complementan aspectos del diseño y añaden múltiples ventajas.

Consistencia visual

Las buenas prácticas de diseño de la interfaz de usuario web, aconsejan que las guías de estilo nos ayudan a crear un diseño coherente que refleje un lenguaje visual común. Elementos como las paletas de colores, los tipos de letra, las animaciones y los menús de navegación contribuyen a una experiencia de usuario unificada.

Contexto

Las guías de estilo explican el razonamiento detrás de las decisiones de diseño. Por ejemplo, además de explicar los detalles técnicos de las páginas con navegación por desplazamiento y las que tienen navegación con pestañas, también debe explicar que el desplazamiento se usa para contar historias, mientras que las pestañas se usan para mostrar los productos.

Colaboración

Tener un manual de referencia establecido para cada miembro del equipo asegurará que todos trabajen con consistencia en el mismo proyecto. La colaboración es más sencilla, con menos preguntas repetidas y correos electrónicos de ida y vuelta, con aclaración de cuestiones.

El vocabulario singular

Otro rasgo colaborativo es la racionalización de la comunicación a través de un vocabulario singular (es decir, definir qué podría ser un «widget» o un «módulo»). Limitar las convenciones de nomenclatura adecuadas puede evitar muchas incomunicaciones innecesarias.

Estandarización de código

Las guías de estilo de front-end ayudan a estandarizar el HTML, CSS o JavaScript, para que los diseñadores y desarrolladores puedan ver si un nuevo diseño se desvía de los estándares establecidos. También lo ayudan a descubrir si el marcado existente se expande fácilmente.

Consolidación

Los diseñadores solo necesitan buscar un lugar para hacer referencia a todos los componentes, en lugar de perder tiempo revisando diferentes notas y cuestionando qué documentos dicen qué.

Orientación para nuevos miembros del equipo

En lugar de enseñar repetidamente los nuevos estándares a los nuevos miembros de un equipo, puede enviársele una guía de estilo a medida que aumentan. Con la guía de estilo como documento de anclaje, las conversaciones de seguimiento serán más significativas.

Ayuda con las decisiones de diseño

No olvidemos que el proceso de creación de la guía de estilo puede llamar su atención sobre algunas decisiones de diseño cruciales que de otro modo podríamos haber olvidado.

Las Guías de Estilo también pueden tener inconvenientes

Entre los inconvenientes de las Guías de Estilo nos encontramos con los siguientes:

Costo: Una guía de estilo bien documentada puede ser una inversión costosa por adelantado y, si bien muchos argumentarían que los beneficios son importantes, es posible que no sean fáciles de demostrar. Es por ello que tenemos que considerar el costo de mantener nuestras guías de estilo. A medida que se realicen las mejoras por los aprendizajes de los test A/B, casi seguramente necesitaremos actualizar las guías de nuestro proyecto con mejoras basadas en los resultados obtenidos en la etapa de Testeo.

Son conjunto inicial de suposiciones: Si bien una guía de estilo de alta calidad puede basarse en las buenas prácticas o la investigación del usuario, a menos que haya sido completamente probada en Testeo A/B, tiene inherentemente una gran cantidad de suposiciones. Un botón debería verse así, con un bise4l como ese y usando esta paleta de colores. Útil como punto de partida, pero ¿y si en un contexto específico no es lo suficientemente grande o el color no destaca? Parte de las tareas de Optimización de la Tasa de Conversión (CRO) es identificar y desafiar las suposiciones para impulsar una experiencia óptima.

Son restrictivas: Si se aplican demasiado estrictamente, pueden restringir su alcance para la experimentación. Seguir una guía de estilos al pie de la letra, puede cerrar las mentes a soluciones más innovadoras o creativas. Un cierto grado de flexibilidad y autonomía es importante para permitirle al equipo desarrollar, mejores soluciones para los problemas de diseño.

Fuentes

Great UI Design Requires Smart Style Guides, by Jerry Cao
https://www.uxpin.com/studio/blog/great-ui-design-requires-smart-style-guides/

Using brand and design style guidelines for CRO, by Matt Lacey
https://www.smartinsights.com/conversion-optimisation/conversion-optimisation-strategy/using-styleguides-cro-help-hindrance/

Style Guide Best Practices by Brad Frost
http://bradfrost.com/blog/post/style-guide-best-practices/

Photon Design System by Mozilla
https://design.firefox.com/photon/welcome.html

Consejos para una correcta integración de equipos de diseño y desarrollo front-end (UI/UX)

Posted on 4 mayo, 20189 diciembre, 2019 by Paco Moreno

Diseñadores y desarrolladores estamos condenados a entendernos, diréis que soy un pesado y siempre estoy hablando del mismo tema, pero como informático reconvertido a diseñata, puedo entender que las relaciones no siempre son buenas, que es difícil llegar a consensos en la implementación de un producto y que es necesario un marco de entendimiento en el que se pueda trabajar juntos de forma efectiva. Os dejo aquí algunos consejillos desde el punto de vista de un diseñador, que a mi me han servido para desempeñar mis tareas junto a diferentes equipos de desarrollo en mi carrera.

Lo primero, confía en tu programador

Cuando asistas a reuniones con clientes, o responsables de producto para definir el diseño y funcionalidad de un producto, ve de la manita con tu programador o tu ingeniero. Siempre juntos. Te ayudará a acotar las peticiones que el cliente o el responsable de producto quieren en el proyecto, en función de la posibilidad de que puedan realizarse, o del coste de su desarrollo. También, cuenta con ellos a la hora de tomar decisiones en cuanto al diseño, porque si tu desarrollador siente que ha contribuído en el proceso de diseño, pondrá mucho más cuidado a la hora de implementarlo, y a ti no se te llevarán los demonios cuando veas que hay algo diferente a lo que tú prototipaste. Además, lo creas o no, hay programadores con nociones de diseño bastante acertadas y decentes, sobre todo en el aspecto de la experiencia de usuario; y a fin de cuentas a todos nos gusta que nos escuchen, siempre se saca algo positivo.

Adquiere nociones básicas de código

Habitualmente, la implementación de los proyectos front-end se realiza en HTML, CSS y JavaScript. Si vienes del mundo de las artes gráficas, de plástica o diseño gráfico y nunca has tenido contacto con la tecnología que se usa en la implementación de proyectos web, o el desarrollo de interfaces gráficas UI y UX, a lo mejor podrás diseñar unos prototipos preciosos, sí, con unas fotos maravillosas, pero estarán muy, muy lejos de ser funcionales, y de tener una experiencia de usuario y usabilidad correcta. Toma nociones básicas de HTML, CSS y javascript para entender la tecnología que se está utilizando, y para poder tener en cuenta las limitaciones y posibilidades que tiene, y después aplícales tus conocimientos de comunicación visual y diseño, y serás un crack; y además te habrás ganado el respeto de los programadores que trabajen contigo.

Evita los estilos personalizados. Usa UI-Kits

Prácticamente todos los equipos de desarrollo front-end utilizan algún tipo de librería CSS, o UI-Kits para la implementación de estilos en la aplicación. Estas librerías a menudo contienen estilos comunes como márgenes predefinidos, colores y otras clases predefinidas que los programadores utilizan para hacer el desarrollo más rápido y más consistente. Evita al programador que tenga que utilizar estilos personalizados al mínimo, solo cuando sea extrictamente necesario, para no tener que escribir código CSS nuevo desde cero que anule los estilos de la librería utilizada.

Además muchas veces estos kits llevan implementados patrones de diseño que están muy testeados, que funcionan y que simplifican de manera notable la interacción con el usuario y la toma de decisiones de diseño. No reinventes la rueda, usa patrones de diseño, sobre todo en lo que a elementos de interacción se refiere.

Compartid el progreso del trabajo

A los diseñadores nos mola mucho ver como nuestro trabajo va cobrando vida, por lo que revisar los progresos del desarrollo es realmente una cosa divertida para todos. Si tu programador te mantiene actualizado y al tanto con el progreso del desarrollo del producto, te ayudará a garantizar que su implementación cumpla con las expectativas y no haya sorpresas en el futuro. Esta es también una gran oportunidad para que el programador pueda hacerle al diseñador cualquier pregunta que pueda tener sobre el diseño o las tareas futuras.

Y por último optimizad el flujo de trabajo

Por si no lo sabías, yo te lo digo: las interrupciones constantes son la perdición para la existencia de un programador. Lo mismo nos pasa a nosotros, no se puede hacer un trabajo óptimo y con concentración si nos estamos interrumpiendo constantemente para solucionar pequeños problemas de diseño o de programación, en uno u otro sentido. El diseño es un proceso iterativo, e indudablemente habrá cambios continuos en el producto; acumula estos cambios en paquetes, antes de recurrir al programador para una consulta por un único cambio.

Y lo mismo para el programador, los diseños y prototipos muchas veces no contemplan todos los casos que pueden darse en programación, y es bueno que el programador use su intuición y complete las lagunas modificando aspectos del prototipo general para adaptarlos al caso concreto. Que no se preocupe que luego puede revisarse ese diseño; y por supuesto, comunicarse con su diseñador para tomar decisiones importantes, pero acumular consultas es bueno para no estar interrumpiendo el trabajo de tu compañero.

Bibliografía

5 Rules for Designer-Engineer Collaboration: https://uxdesign.cc/5-rules-for-designer-engineer-collaboration-182fd74bd09f
Designers & Developers. Collaborative Design Process for Innovation: https://uxplanet.org/designers-developers-collaborative-design-process-for-innovation-c931206ed2ac
How Designers Work With Developers: https://uxdesign.cc/how-designers-work-with-developers-7552be5e40e9
5 tutoriales para aprender diseño UX y UI: https://graffica.info/5-tutoriales-para-aprender-diseno-ux-y-ui/

Consejos a la hora de diseñar una interfaz gráfica para una aplicación web (UI/UX).

Posted on 15 diciembre, 20179 diciembre, 2019 by Paco Moreno

Hoy os traigo algunos consejillos útiles para primerizos en esto del mundillo del diseño de interfaces gráficas (UI/UX). Quizás sean consejos básicos, pero que harán que te lleves mejor con la persona que tendrá la difícil tarea de dar vida al diseño que tú – diseñador gráfico – realices. Esos seres que cohabitan con los diseñadores en las agencias, llamados programadores o developers, son buena gente ;-), y después de todo, son ellos los que se enfrentan al reto de hacer realidad el concepto que tú has creado. El primero de todos, es para mí el más importante.

Que sea posible la implementación de tu diseño

Esto que parece una obviedad es de suma importancia. Hoy día la implementación de la inmensa mayoría de interfaces gráficas para aplicaciones web está realizada en HTML y Javascript (en cualquiera de sus frameworks) y CSS. Se acabaron los tiempos de Flash hace mucho tiempo. Cuando crees una interfaz gráfica para una aplicación web, asegúrate de que los elementos que estás diseñando con tu programa de diseño favorito (Photoshop, Sketch, Fireworks, Illustrator…) sea posible implementarlas mediante éstas tecnologías. Hay muchas posibilidades: degradados, formas, transparencias… pero que lo que hagas sea factible. Los diseños muy bonitos pero imposibles, sólo para la ciencia ficción. Habla con tu programador, él es tu amigo. Consensúa con él qué se puede hacer y qué no; con el tiempo ya no tendrás que preguntarle.

Crea Guías de Estilo

Normalmente cuando te encargan un trabajo de diseño de UI, te proporcionan un documento de esquemas de pantalla (wireframes o prototipos) a diseñar con la totalidad de las pantallas que tendrá la aplicación. Pero existen muchas pantallas intermedias, paneles de selección de opciones o simplemente agregados posteriores que no aparecen en el documento y que, dados los diversos ajustes de funcionalidad a lo largo del proceso de la progremación, son necesarios crear; y que cuando estén en funcionamiento deberán tener el mismo aspecto en consonancia con el resto de la aplicación.

Pónselo fácil a tu amigo el developer. Crea una pequeña guía de estilo con los elementos de interfaz que más se repitan en los diseños para que él pueda crear código de estilos reutilizable. Te querrá mucho más y el cliente lo notará en el precio y en la velocidad de su apliciación.

No abuses de las Tipografías

Si no lo harías en un diseño para imprenta ¿Porqué lo haces en un diseño de pantalla?. Las tipografías en las interfaces gráficas deben estar integradas en la aplicación. Procura utilizar pocas tipografías en tus diseños, a lo sumo dos tipos diferentes, lo que incidirá en la rapidez de carga y proceso de la aplicación. Las webfonts son también tus amigas: Googlefonts, Cufons, CSSfontstack… son sistemas de incrustación de fuentes online. Tenlas presente mucho antes que usar una tipografía propietaria. Que tengan buena legibilidad en pantalla, y a tamaños pequeños. Recuerda que las tipografías sin serifa y de palo grueso siempre se leerán mucho mejor en una pantalla pequeña que las fuentes con serifa y palo fino. Tampoco abuses de los tramados de fondo que pueden dificultar la lectura.

Crea Librerías de Iconos

Los iconos son fundamentales en la interfaz gráfica en cualquier aplicación. Son los elementos gráficos más usados, no sólo en nuestra época digital, sino que desde la más remota antigüedad. Crean familiaridad en las herramientas, e identifican procesos con una información visual concreta. Mi consejo es que crees librerías de iconos embebidas en un archivo webfont o iconfont, para que después nuestro amigo developer le pueda dar el aspecto deseado mediante estilos CSS. Muchísimo mejor que darle una carpeta con 40 png o gifs.

La ventaja es que son vectoriales, no se pixelizan al ampliar, y tu colega programador puede hacer que sólo se tenga que cargar una vez, un solo archivo, para tener toda la librería de iconos disponibles en toda la aplicación. Hay páginas especializadas en iconos como FlatIcon donde no solo te puedes descargar la imagen vectorial para usarla en tu prototipo, sino que puedes crear la librería completa de tu colección lista para integrar en cualquier desarrollo.

Otro recurso importante en este sentido es la tipografía FontAwesome. Una fuente que podemos usar para implementar iconos sin necesidad de imágenes y sin técnicas intrusivas ni javascript; que podemos instalar en nuestro ordenador como una tipografía normal y que se puede usar mediante CSS en los desarrollos; además de que contiene una colección de 893 iconos en su versión gratuita y de libre uso.

Usa gráficos vectoriales

Los gráficos vectoriales son muy útiles frente a las imágenes de mapa de bits, ya que tienen un tamaño de archivo pequeño y no se pixelan cuando amplías a un gran tamaño. Están definidos mediante algoritmos: un archivo de imagen vectorial contiene definiciones de formas y rutas que especifican cómo debe verse la imagen cuando se renderiza en pantalla. Desde que existe el formato SVG (un formato basado en XML para describir imágenes vectoriales) y que es interpretado directamente por el navegador, la integración de gráficos vectoriales en las aplicaciones es muy sencilla.

En sus últimas definiciones el formato SVG soporta animaciones mediante atributos CSS. El editor online SVGator te permite crear animaciones en este formato sin tener que picar ni una sola línea de código, mediante un timeline sencillo. Hay otros proyectos como vivus.js, una librería sin dependencias de javascript que permite a tu amigo el programador animar SVGs con muchas posibilidades.

Especifica las interacciones mediante un documento

Ayuda al programador a entender y poner en marcha tu diseño, explicándole que efectos quieres que se lleven a cabo a la hora de interactuar con los elementos de interacción que tú has diseñado. Porque lo importante de una interfaz gráfica no solo es que muestre los datos que debe mostrar, sino también el cómo debe hacerlo; que la forma en que se comnican los datos en pantalla proporcione una respuesta creíble, y lógica a las acciones del usuario. Para ello las microinteracciones son muy importantes. Estas microinteracciones son, por ejemplo, las transiciones entre acciones del usuario, comprobaciones en formularios, tiempos de espera, pantallas de estado, botones de interfaz animados, cargas progresivas de gráficas o avisos y notificaciones.

Te aconsejo que una vez hayas creado tu impoluta interfaz gráfica, crees un documento de texto explicándole al colega developer qué respuesta quieres en cada interacción del usuario. Es un poco tedioso, pero le ayudará a «humanizar» una interfaz. Y volviendo al primer consejo, procura que sean posibles. Está bien que seas creativo, pero hazlo con los pies en el suelo.

Y por último, no reinventes la rueda

Desde el primer momento en que te pones a diseñar los controles de una aplicación te das cuenta de que está todo inventado, no es necesario que inventes un elemento de interacción nuevo para crear una iterfaz innovadora. Hay muchos recursos que ya funcionan y probados con éxito desde hace mucho tiempo: Utiliza patrones de diseño, librerías gráficas, UI Kits, plantillas… Todo es válido y útil siempre que el uso que hagas de ello sea correcto y adecuado. Y si eres un creador nato, una vez hayas experimentado todos estos recursos, es cuando ya puedes ponerte a crear nuevas tendencias.

Herramientas que te hacen la vida más fácil para la implementación de UI desde Windows

Posted on 3 noviembre, 201727 noviembre, 2017 by Paco Moreno

Si le preguntas a cualquiera que se dedique al diseño de interfaces de usuario (UI) te dirá que la gran mayoría de los entornos gráficos de las aplicaciones para dispositivos móviles o para escritorio se realizan en la archiconocida herramienta Sketch. El problema es que Sketch sólo funciona bajo el sistema operativo de los ordenadores de Apple, MacOS X. Las razones que los desarrolladores alegan son entendibles, pero no deja de ser una putada para los que somos usuarios de Windows. De modo que antes de la próxima llegada de Invision Studio que promete dejar a Sketch en paños menores y que será compatible con ambos sitemas operativos, hay que buscarse la vida.

Sketch es un software súper liviano porque usa muchas de las características principales de OS X, que se pueden ver en su interfaz. Eso significa que la aplicación completa debería reescribirse para que funcionase en Windows o en cualquier otro sistema operativo. La razón por la que los desarrolladores no piensan crear una aplicación nativa para otro sistema operativo la dan ellos mismos:

Sketch relies on a lot of technology that is exclusive to OS X and the fact that no other OS provide a clear business model for software development, we’re not considering supporting it.

«Sketch se basa en una gran cantidad de tecnología que es exclusiva de OS X y el hecho de que ningún otro SO proporciona un modelo de negocio claro para el desarrollo de software, no estamos considerando darle soporte.»

Sin embargo hay varias herramientas para Windows que te pueden hacer la vida más fácil a la hora de compatiblizar Sketch con el sistema operativo de Microsoft y aquí os las pongo por que me parecen muy útiles.

Icons8 Lunacy

Este software es un Visor de Sketch GRATUITO para Windows con características útiles para programación HTML/CSS. Lo más cerca posible hasta la fecha de Sketch. Sin plugins y con sincronización con el servidor. Funciona genial con archivos que contienen texto, imágenes de trama, degradados y sombras. Los desarrolladores prometen que el paso siguiente, la Edición, estará disponible muy pronto.

El software permite visualizar las propiedades CSS de cualquier objeto y copiarlas con un solo clic para llevarlas a tu editor de códgio habitual. Igual que Zeplin y Avocode, pero gratis y rápido. Igual de rápido que la app Sketch original. La aplicación Exporta recursos de Sketch App. Las propiedades que utilizas a menudo aparecen destacadas. Puedes ver propiedades del texto, imágenes de trama e incluso degradados y sombras.

Puedes descargarlo en: https://iconos8.es/lunacy

Evolus Pencil

Si la anterior herramienta nos servía para abrir los diseños realizados en Sketch y poder exportar recursos y códigos desde Windows, con Evolus Pencil podemos hacer la parte que le falta a Lunacy: la Edición. Evolus Pencil es un software para el diseño de prototipos para apps. Dispone de las librerías gráficas de los estándares más usados: Mobile – IOS UI y Mobile Android ICS, y la capacidad de importar otras librerías gráficas para interfaces de usuario. También tiene la capacidad de exportar HTML+CSS, SVG o PDF. Una completa herramienta de prototipado GRATUITA opensource y de libre uso, que funciona en Windows y que combinada con tu software de diseño habitual te puede servir para el diseño de tus prototipos de interfaces gráficas para aplicaciones, tanto de escritorio como de dispositivos móviles. Puedes descargarlo aquí: http://pencil.evolus.vn/Default.html

Bonus Track: Avocode PSD to Sketch Converter

Una bola extra. Imagina este flujo de trabajo en Windows: Diseñas tu interfaz en tu Photoshop de Toda la vida, conviertes tus PSDs a Sketch y los abres con Lunacy para empezar la implementación; ¿guay, no?. La casa Avocode (los creadores del software de prototipado propieario del mismo nombre) proporcionan una herramienta a disposición pública de forma gratuita que convierte tus PSD a Sketch; y prometen el soporte de conversión de trabajos realizados en Sketch a Adobe XD, la herramianta de prototipado de Adobe. Lo puedes encontrar aquí: https://avocode.com/convert-psd-to-sketch

Invision Studio, una herramienta de diseño y prototipado UI/UX que promete mucho.

Posted on 18 octubre, 201727 febrero, 2018 by Paco Moreno

InVision es una herramienta de prototipado de aplicaciones colaborativa de proyectos de diseño web y móvil; de las más famosas en cuanto al desarrollo de interfaces y experiencia de usuario se refiere (UI/UX). Recientemente, han anunciado que después de dos años de desarrollo, en Enero de 2018 lanzarán de forma amplia InVision Studio.

Se tratará de una aplicación de escritorio para crear y editar trabajos de diseño, para diseñar aplicaciones y sitios receptivos de principio a fin. Studio presentará una variedad de herramientas para diseñar pantallas, así como la capacidad de agregar animaciones y transiciones, y un motor inteligente que ayudará al desarrollador a crear diseños sensibles de forma sencilla e intuitiva y sin tener que picar ni una sola línea de código.

Con InVision Studio, dispondremos de la posibilidad de compartir el trabajo y obtener comentarios de colaboradores del proyecto; compartir componentes y comprar kits de elementos de diseño de la tienda de InVision justo dentro de la aplicación. Con Studio, InVision ha querido desarrollar una plataforma «de extremo a extremo» para diseñar experiencias digitales. Tradicionalmente, los equipos han tenido que basar su flujo de trabajo en conjunto, a través de una serie de herramientas dispares, muchas de las cuales, como Photoshop, fueron construidas para generaciones anteriores de diseño gráfico e impreso, que en mayor o menor medida se han ido adaptando para el diseño de pantalla; y otras más recientes como Skech que gozan del apoyo de muchos diseñadores, pero que siguen separando el diseño, del flujo de navegación. La existencia de este flujo de trabajo fragmentado frena a los equipos y les impide hacer mejor su trabajo.

Entre las posibilidades que tendrá Studio, el equipo de InVision asegura que dispondrá de nuevas capacidades, todas integradas en una misma aplicación que mejorará lafluidez de los trabajos de diseño. Visto el video de presentación, para mi que tiene muy buena pinta, y parece que con una curva de aprendizaje bastante asequible.

Posibilidades de InVision Studio

Entre las capacidades de que dispondrá Studio, nos cuentan que estarán las siguientes:

Animación avanzada: creación rápida de prototipos y animación avanzada para convertir las pantallas estáticas en experiencias de productos en vivo sin necesidad de una sola línea de código.
Diseño receptivo: el motor de diseño adaptativo de Studio permitirá el diseño en una variedad de dispositivos y orientaciones diferentes de forma automática.
Sistemas de diseño compartido: las bibliotecas de componentes compartidos se integrarán directamente en InVision Studio, lo que garantizará que los equipos de diseño se mantengan consistentes, conectados y actualizados.
Colaboración conectada: Studio se conecta perfectamente a la plataforma colaborativa basada en la nube de InVision, lo que facilitará la recopilación de comentarios y la participación de los interesados.
Amplio ecosistema de aplicaciones: Studio será una plataforma abierta que permitirá a los usuarios extender la experiencia del producto a través de un ecosistema de aplicaciones y complementos.

En definitiva...

InVision Studio ya está siendo utilizado por algunos de los equipos de diseño más avanzados, y estará disponible para el resto de los mortales, y más ampliamente, a partir de enero de 2018, tanto para Mac como para PC. Si quieres verlo en acción o solicitar un acceso anticipado, visita https://invisionapp.com/studio. Yo ya estoy deseando probarlo, aunque aún no se ha hablado nada de los precios oficiales que tendrá la herramienta, esperemos que sean asequibles a bolsillos modestos. En todo caso, los creadores tienen una amplia agenda de eventos en vivo en las ciudades de Nueva York, San Francisco, Seattle, Boston, Berlín y Ámsterdam a partir de la próxima semana y antes del lanzamiento.

Importantes Descuentos en los cursos de DOMESTIKA durante 72 horas

Posted on 18 septiembre, 20173 marzo, 2018 by Paco Moreno

Grandes descuentos en Doméstika. Como casi todo el mundo que se dedique al diseño o la creatividad sabe, Domestika es la mayor comunidad creativa en español, está online desde 2002. En Domestika miles de profesionales con diferentes perfiles creativos en red y comparten sus trabajos y conocimientos. Además tienen un área de formación donde constantemente están sacando cursos, con importantes descuentos.

Durante las próximas 72 horas, en Domestika han lanzado unos descuentos muy importantes en todos sus cursos, descuentos que van desde el 50% hasta el 30%, en todos los cursos de ilustración, fotografía, animación o desarrollo web; y solo durante 72 Horas.

50% → Los primeros 50 en utilizar el código 50DTO
40% → Los primeros 100 en utilizar el código 40DTO
30% → Los primeros 200 en utilizar el código 30DTO

Así que si estas interesado en realizar alguno de sus cursos, es el momento de hacerlo. Aquí tienes el listado de los cursos más recientes.

¿Qué es Domestika?

Domestika es la mayor comunidad creativa en español. Un espacio de referencia, debate y promoción en el que el aprendizaje de las disciplinas creativas ocupa un lugar central. En Domestika miles de profesionales con diferentes perfiles creativos interactúan en red y comparten sus trabajos y conocimientos. Domestika, es también una marca de referencia para el sector y tiene una audiencia especializada que se extiende más allá de su propia web. Si te gustan los píxeles, quieres compartir conocimientos y promocionar tu trabajo creativo, te animo a crear una cuenta en esta red..

Tres Plugins «Page-Builder» gratuitos para WordPress que merece la pena conocer.

Posted on 11 agosto, 201710 diciembre, 2019 by Paco Moreno

Hoy día WordPress prácticamente se ha convertido en el sistema de gestión de contenidos (CMS) estándar de facto para crear sitios web autoadministrados. La gran cantidad de temas de personalización, plantillas, y añadidos con funcionalidades, además de la inmensa comunidad que hay detrás de este software de código abierto en todo el mundo, lo convierten en la herramienta indispensable tanto para crear blogs, para lo que en un principio fue creado, como páginas completas e incluso tiendas virtuales con los diferentes plugins necesarios – aunque para este caso hay otros software CMS más específicos con mejores resultados. El caso es que WordPress es una herramienta muy útil y versátil. Esto no es nada que ya no supieras, pero había que empezar con algo.

¿Pero hay alguna pega?

Lo que ocurre es que muchas veces, el principiante se encuentra con que la instalación de WordPress con sus temas por defectos está «bastante pelada» – término que se utiliza para significar que los recursos iniciales son simples, y que es el momento de vitaminar al software con plugins o añadidos que permitan darle más funcionalidad para que resulte más fácil crear los contenidos y disponer de más recursos. Para ello existen una serie de plugins llamados «Page-Builders» con los que podrás «supermineralizar» tu WordPress con herramientas de arrastrar-y-soltar que te permitan crear contenidos atractivos de forma fácil y facilitar la gestión visual y de distribución de los mismos. Si tienes una página web hecha con WordPress, añadir un page-builder te simplificará mucho la vida, créeme.

Y Page-Builders para WordPress, hay muchos y muy buenos y diversos, gratuitos y de pago, pero en este artículo quiero hablarte de tres de ellos que, aparte de ser verdaderas bestias pardas como herramientas y utilidad, disponen de versión gratuita que puedes instalar sin miedo en cualquier WordPress; y si así lo deseas, adquirir su versión Premium después, que te proporcionará un mayor soporte y un mayor número de funcionalidades. Vamos con ello.

Themify

Sencillo y de aspecto austero, pero potente y lleno de combinaciones. Permite crear contenidos a partir de plantillas iniciales (layouts) y arrastrar elementos a modo de widgets de todos los objetos esenciales para crear una página, tales como textos, imágenes, mapas, sliders y las áreas de widgets. Funciona con cualquier Theme de WordPress y su interfaz de diseño es auto-explicativo, esto significa que puede crear diseños personalizados en tan sólo unos minutos. Los contenidos creados son Responsive, se adaptan a todas las resoluciones de pantalla, permite la personalización de los estilos. Dispone de una versión gratuita totalmente funcional que puedes descargar aquí: https://wordpress.org/plugins/themify-builder-lite/ y que puedes actualizar a su versión Premium aquí: https://themify.me/builder obteniendo nuevas funcionalidades, plantillas prediseñadas y otras funcionalidades estupendas.

Visual Composer

Fue pionero en esto de los constructores y uno de los más utilizados del momento y más populares, sobre todo por su precio de licencia en la versión pro, y que páginas como Themeforest lo incluye por defecto en una gran cantidad de los themes que comercializan. Compatible con la gran mayoría de temas existentes en el mercado, tanto comerciales y gratuitos, dispone de una gran número de módulos por defecto, y se puede ampliar su funcionalidad incorporando nuevos módulos que la empresa desarrolla o de terceros desarrollares. Los diseños se pueden guardar como plantillas para poder volver a utilizarlos y dispone de muchos elementos de contenidos para utilizar, incluyendo redes sociales y botones de compartir, rejillas, sliders, carruseles, tablas, mapas y mucho más. Para descargar la versión Lite puedes ir aquí: https://visualcomposer.io/download/ . La versión Premium la puedes adquirir en Codecanyon de Envato, en esta dirección: https://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431?s_rank=1

Elementor

A mí sinceramente me ha encantado este plugin. Su versión gratuita es muy funcional y dispone de muchos elementos para usar y maquetar tu página o entrada de blog. Visualmente muy atractivo y de sencillo uso, sin necesidad de tocar absolutamente nada de código, totalmente responsive y, una característica fundamental su rapidez tanto en su carga como en su uso. Es agil, muy agil, y carga muy rápido cuando lo ponemos en acción. Elementor es de código abierto y existen muchos añadidos creados para él por una gran cantidad de desarrolladores; y permite hacer personalizaciones con tu propio código CSS o HTML. Elementor es gratis como plugin y lo seguirá siendo mucho tiempo según sus desarrolladores, pero dispone de una versión PRO con muchas mejoras orientadas sobre todo al marketing. Puedes descargar libremente para uso en cualquier sitio web aquí: https://es.wordpress.org/plugins/elementor/ . Su versión PRO la puedes encontrar aquí: https://elementor.com/pro/