Blend, la forma más sencilla de hacer degradados CSS

Es cierto que los degradados hace algunos años que dejaron de estar de moda. Los diseños actualmente son más planos, más ligeros y minimalistas, pero eso no significa que muchos de nuestros clientes no quieran saber de modas y prefieran apostar por los clásicos cambios sutiles de color en los fondos y componentes de sus sitios web.

Existen muchas aplicaciones que ayudan a diseñar degradados en CSS, pero la que os presentamos hoy es seguramente la más sencilla e intuitiva de todas: Blend.

Solo tenemos que elegir el color inicial y el final y pulsar en el botón central. Una vez mostrado el degradado, moveremos el eje hacia un lado u otro para aumentar la cantidad de uno u otro color, siendo posible en todo momento obtener el código CSS desde la misma pantalla.

captura-20

Creado por el diseñador Colin Keany, de DigitalOcean, no requiere registro ni identificación de ningún tipo. Tampoco tiene publicidad ni enlaces hacia otras páginas, aunque sí pueden encontrarse los clásicos botones para compartir el proyecto en las redes sociales.

Pablo 2.0, nueva versión de la herramienta de creación de banners de buffer

Mucho más sencilla que canva.com, pero también más sencilla de usa, y mucho más intuitiva, Pablo se presentó hace algunos meses como una buena forma de crear un banner en pocos minutos.

La herramienta, creada por Buffer.com, sufre ahora una excelente actualización que permite definir los tamaños adecuados para cada tipo de red social, por lo que tenemos al alcance de un click la posibilidad de personalizar el resultado para no preocuparnos con el ancho y largo de cada trabajo.

Disponible en buffer.com/pablo, podemos añadir un texto principal, un texto secundario y un logo, así como una imagen que sirva como fondo del banner. En el menú lateral es posible definir los tamaños, y dentro del mismo banner editaremos los textos.

captura-73

En la parte superior tenemos tres opciones para añadir efectos al fondo: dejarlo con más contraste, difuminarlo o ponerlo en blanco y negro, decisiones que se tomarán dependiendo del tono de la imagen y del color del texto que hay por encima de ella.

Anque ya hay algunas fotografías que podemos usar como fondos, es posible subir la nuestra, por lo que la personalización puede ser bastante flexible.

Lo dicho, no es canva.com, pero para un banner rápido, es perfecto.

Facebook presenta una web dedicada al diseño

captura-79

Si os gusta el diseño que Facebook usa en sus aplicaciones y os gustaría obtener recursos en ese sentido, echad un vistazo en facebook.github.io/design.

Se trata de una nueva página que Facebook ha creado para compartir material de diseño gráfico, desde artículos con las mejores prácticas hasta archivos que podemos usar para crear nuestros propios trabajos.

Es posible encontrar, por ejemplo, archivos de photoshop con manos que sujetan un móvil en blanco, ideal para rellenarlo con nuestro diseño antes de presentarlo al mundo, así como enlaces a la página de Facebook en Medium, donde tienen artículos útiles para profesionales de este área.

Aunque no es una colección muy amplia, es un primer movimiento que vale la pena seguir de cerca. El diseño de Facebook puede gustar más o menos, pero algo es indiscutible: atrae a miles de millones de personas cada día, por lo que “algo” tendrá. Aún así, los recursos ya publicados no solamente hacen referencia a las guías de estilo del propio Facebook, también ayudan a encontrar material para aplicaciones móviles en general, por lo que paree que la variedad será una buena protagonista de esta nueva sección.

Canva, la herramienta para hacer banners, recibe 15 millones de dólares de inversión

captura-200

Seguramente muchos de vosotros usáis canva.com para crear banners de todo tipo, desde mensajes para las redes sociales a obras de arte para poner en los perfiles. Lo que es posible que no sepáis es que la empresa ya está valorada en 165 millones de dólares, un número ampliado hoy después de los 15 millones que han recibido de inversión.

El modelo de negocio se basa tanto en el lanzamiento de la versión “para el trabajo” de Canva, que permite la colaboración de varias personas en los mismos banners, como en la adquisición de licencias de imágenes de su banco particular a un dólar la unidad.
Continúa leyendo…

Stylizer, para crear CSS de forma mucho más intuitiva

Las hojas de estilo en una web son las responsables por todo su diseño: los colores, los espacios, el tipo de letra, la estructura… a menudo solo tenemos que cambiar de CSS para tener una web completamente renovada, aunque es necesario tener bastantes conocimientos para poder realizar los cambios deseados en poco tiempo.

Lo que ofrece Stylizer es una herramienta que ayuda a realizar cambios en el archivo CSS de forma visual, con un editor que puede abrir cualquier web local para realizar el trabajo.

captura-100

La aplicación permite que se vean los cambios de forma inmediata a medida que realizamos alteraciones en el diseño, evitando el F5; ofrece recursos para hacer de forma automática tareas repetitivas; permite el cambio de navegador de Internet para verificar que todos son capaces de mostrar el resultado que estamos deseando; ofrece barras de desplazamiento para cambiar el valor de las variables, evitando así la introducción manual de números en caso de que no lo queramos; tiene una herramienta para incluir los colores en una paleta con un simple click; dispone de sistema de detección de errores en la sintaxis…

Aunque es posible bajar una demostración, y ver un vídeo con un ejemplo de uso, la aplicación, disponible para Windows y Mac, no es gratuita. La licencia cuesta 79 dólares para la versión 6, que fue lanzada recientemente.

medialoot – miles de fuentes, iconos, gráficos, plantillas, interfaces y más

captura-37

Si estáis buscando recursos que ayuden a ampliar la variedad de vuestros trabajos en diseño, echad un vistazo en medialoot.com.

Se trata de una colección de componentes de todo tipo con el diseño como protagonista, fuentes, iconos, gráficos, plantillas, interfaces y otros elementos que podemos incluir en nuestras aplicaciones, temas y demás trabajos para darle un estilo más profesional en menos tiempo.

El proyecto fue creado por Mason Hipp y Jon Phillips, diseñadores que decidieron comenzar a realizar la recopilación de contenido para evitar siempre el mismo tipo de iconos y botones que se suelen comprar en las tiendas de este tipo. Lo que hacen es ofrecer “cajas” enteras de componentes, con recursos que combinan entre ellos para ayudar a tomar la decisión final.
Continúa leyendo…

Dos prácticas formas de encontrar la tipografía adecuada

Encontrar el tipo de letra para nuestro próximo proyecto es una de las tareas más complejas. Son muchas las opciones y muy variados los efectos que produce una tipografía u otra, motivo por el cual es importante tener presentes algunas herramientas que ayuden a ver el resultado con varias alternativas de forma rápida y efectiva.

Os dejamos aquí dos aplicaciones con ese objetivo, herramientas en las que es muy sencillo cambiar de tipografía para ver el efecto que tiene en la web.

wordmark.it

captura-7

Solo teneos que indicar la palabra que queremos ver de ejemplo y pulsar el botón, con algunas opciones en el menú superior que ayudan a cambiar el tamaño, el fondo y poco más.

Son decenas de fuentes que pueden ampliarse siempre en la parte inferior, con una opción de registro para que sea posible guardar las selecciones que realicemos.

fontfling.com

captura-8

No se ven todas las opciones de una sola vez, como en el caso anterior, pero con el menú lateral es posible personalizar el aspecto para cada una de las muchas opciones existentes. Cuentan con cientos de tipos de letra obtenidos de FontSquirrel, y en caso de gustarnos alguna de ellas, podemos bajarla desde el mismo portal.

Como veis, cada vez es más sencillo tomar este tipo de decisiones.

Curso online gratuito de Google sobre Material Design

captura-13

Son muchos los cursos que empiezan este mes, lista que actualizamos siempre en www.sinoloveo.com, y la ampliamos ahora con un curso que puede hacerse en udacity: Android Design for Developers.

El objetivo es ayudar a los programadores android a adaptar sus aplicaciones para Material Design, siguiendo así las normas que cada vez más apps están adoptando.

El curso es gratuito, puede hacerse por Internet, pero está en inglés. Lo imparte el propio Google, y lo divide en cinco lecciones:

– Lección 1: Android Fundamentos del diseño: Para conocer y aplicar los fundamentos del diseño de Android en las aplicaciones, tratando desde patrones de navegación común a temas que pueden aplicarse.

– Lección 2: Las superficies: Para entender cómo programar la interacción de los elementos en una aplicación.

– Lección 3: Diseño Gráfico: Para saber cómo incluir líneas clave, indicadores, fuentes, escala tipográfica, paleta de colores y temas / estilos.

– Lección 4: Movimiento: Para comprender el uso de movimiento en aplicaciones y cómo utilizar las transiciones al cambiar los estados.

– Lección 5: Diseño Adaptable: Para programar teniendo en cuenta que el resultado será ejecutado en diferentes tamaños de pantalla.

El curso tiene una duración de 4 semanas (tiene en cuenta una media de 6 horas por semana), pero puede comenzarse en cualquier momento.