Developer Si2

Repositorio de tecnología creativa

Categoría: UX

From Data to Viz

Un excelente recurso para llegar a ejemplos reales y representar datos con D3.JS , ayudantote a elegir el gráfico apropiado…

El contraste correcto

Una forma de identificar si el texto sobre el color de fondo es legible y accesible.https://color.review/

Techna Sans

Techna Sans is a bold, semi-geometric sans-serif typeface. With its low contrast and sharp stroke endings, it has an authentic…

UXcellence

Compilación de artículos, libros y otros materiales para una UX excelente, muy destacable la sección destinada a accesibilidad:https://uxcellence.com/

ETC Triespace fuente variable gratuita

La función ETC pone a disposición gratuita –que no libre– la fuente monoespaciada Triespace en su versión variable que ellos…

Mapas con grandes conjuntos de datos

kepler.gl es una herramienta código abierto de análisis de datos geo–espacial que permite la carga y filtrado de datos a…

Storytelling + d3js

Recursos interesante para hacer diseño orientado a datos. Utilización del gráfico de cuerdas d3js para ir representado datos paso a…

Colección Tipográfica Febrero ’19

A typeface designed to mimic the national park service signs that are carved using a router bit.: https://nationalparktypeface.com/ Fundición con…

Colección tipográfica Enero ’19

Open-source Bodoni Revival Majör Mono Display is a monospaced geometric sans serif all-uppercase typeface which also has a complete set…

Buenas prácticas user onboarding y estados vacíos

Enlazo un artículo de James Gill sobre cómo diseñar procesos de onboarding y estados vacíos para hacer más fácil al…

Archia de atipo

Hace tiempo que seguimos los trabajos de atipo foundry y su formato de distribución de fuentes. Archia es una slab…

unDraw: Open Source Illustrations

Un proyecto open source de la ilustradora Katerina Limpitsouni que por el nombre parece pretender ser el unsplash de las…

El Arte del DataVisualization

Referencias de auténticos currazos a todos los niveles en webs de visualización de datos. https://districtmobility.org/ http://www.okela.org/es/red https://hellosunapp.com/ http://histography.io/ http://rhythm-of-food.net/ http://nycfoodiverse.com/…

Ritmo vertical en tipografía web

Artículo para calcular correctamente un buen ritmo vertical en la tipografía de nuestra web: https://24ways.org/2006/compose-to-a-vertical-rhythm/ Herramientas Calcula la escala de…

Generar guías de estilo basadas en diseño atómico

Generador de Guías de estilos basada en PHP y NODE para crear guías de estilos fundamentadas en los elementos del…

Recursos Tipográficos

Matej Latin está elaborando una muy buena lista de recursos de tipografía web basados en apps, herramientas, plugins and otros…

Avataaars library para Sketch

Biblioteca de avatares de los cuales puedes intercambiar elementos, pelo, ropa, accessorios, colores, razas… de Pablo Stanley (Gracias Amigo) Para…

Encontrar los colores correctos para visualización de datos

En este artículo abordan el porqué y cómo se deben elegir correctamente los colores para hacer distinguibles y accesibles nuestros…

Design Genome de Invision

Análisis estructural por parte de Invision, mediante datos y entrevistas, de grandes organizaciones que prestan gran atención al diseño de…

Open source fonts y libre–revivals

Fundición open source con tipografías muy interesantes: https://www.theleagueofmoveabletype.com/ El diseñador Pablo Impallari lidera varios revivals de tipografías míticas y clásicas…

Enlaces: Datos en mapas

http://www.therefugeeproject.org/ https://citygeographics.org/ http://luminocity3d.org/Population.html#population_density_2011/7/52.600/-2.500 https://pudding.cool/2018/10/city_3d/ https://www.strava.com/heatmap https://labs.strava.com/ https://earthengine.google.com/timelapse/ http://livingcities.here.com/ Proyecto con interesante forma de disponer multitud de mapas: Home: https://resourcewatch.org/ Explore:…

Fotos (de stock, de calidad, «gratis»)

En Sí2 pagamos nuestra mensualidad a Adobe Stock, porque lo heredamos desde Shutterstock,.. y ahí seguimos. Porque consideramos muy importante…

Botones dinámicos en Sketch con Paddy

Botones dinámicos de forma sencilla Hoy hemos estado creando unos botones dinámicos gracias a Paddy. Se trata de un plugin…

Resolver problemas con símbolos en Sketch

Sketch es una herramienta muy buena para el diseño de interfaces pero tiene ciertos bugs que a veces te sacan…

Cómo exportar Sketch a HTML

En SI2 usamos Sketch para diseñar interfaces. Una de las razones es la flexibilidad que te aporta trabajar con los plugins disponibles, ya…

PhotoSwipe Responsive Lightbox

PhotoSwipe es un plugin JavaScript sin dependencias, siendo uno de los mejores lightbox que hemos usado en SI2 para desarrollos…

Optimización de carga web / testmysite de Google

Quizá no es la herramienta más completa, pero sí muy sencilla para tener rápidamente una visión general de donde hay…

UX en móviles: La mejor forma de pedir permisos a usuarios

Recomendable recopilación de consejos y estrategias a seguir para ser mantener una experiencia de usuario lo más amigable posible a…

Android Experiments

Para la edición de este año no llegamos, pero para el que viene tenemos Buenos Propósitos… ;-) https://www.androidexperiments.com/

Triangulator

Aplicación en html5, disponible para su descarga (funciona en browser pero hay que descargarla) a partir de una imagen crear…

Scroll back to top plugin

Las páginas con mucho scroll están de moda y el usuario necesita volver arriba de forma más fácil. Para cuando hay…

Take a breath…

A veces desarrollamos cosas solo por aprender por el camino, por demostrar que sabemos hacerlo. Algo así debieron pensar los…

Columnas personalizadas en listado Admin de WordPress

Un plugin chulébrico (y casi imprescindible) para cuando empezamos a añadir campso meta como locos en lso Custom Post types,…

MixItUp JS para filtrar dinámicamente

Plugin Javascript para filtrar inline mediante etiquetas, botones o selects. Muy  sencillo, flexible y ordenable. https://mixitup.kunkalabs.com/

Mobile First (y httpS omnipresente)

Solo un recordatorio a un par de enlaces que solemos tener en cuenta por aquí: – https://design.google.com/ – (su nuevo…

Clockwise framework

Algunos recursos muy interesantes de usTwo, útiles para diseñar y programar watch faces para Android Wear. Incluye guías de diseño…

Profundizando en D3.js con ejemplos

Algunos sitios con ejemplos interesantes utilizando D3.js, o sólo como inspirtación, o para ver cosas bonitas: – http://christopheviau.com/d3list/gallery.html – https://github.com/mbostock/d3/wiki/Gallery…

UX + UI aspectos a tener en cuenta

UX Aspectos clave de una experiencia de usuario positiva: Respuesta emocional positiva. Sensación de control. Distinción de  la relevancia. Comprensión….

D3.js para dar vida a los datos

D3 ayuda a dar vida a los datos a través de HTML, SVG, and CSS. Si te preocupan que se…

Generador de fuente + CSS con iconos

Lo de usar un juego de iconos como fuente queda muy elegante y agiliza mucho el desarrollo. Cuando FontAwesome te…

Aplicaciones de mockups en dispositivos reales

Una alternativa gratuita de gran calidad a https://placeit.net/: magicmockups.com para mostrar nuestras maquetas y prototipos de una forma muy atractiva. Alguna más:…

© 2020 Developer Si2. Tema por Anders Norén.