Categorías
Diseño

Helena Zhang: 7 principios del diseño de iconos

  • Clarity
  • Readability
  • Alignment
  • Brevity
  • Consistency
  • Personality
  • Ease of Use

7 Principles of Icon Design Helena Zhang

Categorías
Javascript Profesionalidad

El coste de los frameworks de javascript en el rendimiento web

Una buena recomendación, un artículo que habla sobre el coste en el rendimiento al usar algunos frameworks de javascript, y son los siguientes:

  • jQuery
  • Vue.js
  • Angular
  • React
  • The cost of downloading the file on the network
  • The cost of parsing and compiling the uncompressed file once downloaded
  • The cost of executing the JavaScript
  • The memory cost

The Cost of Javascript Frameworks — Tim Kadlec

El artículo es bastante interesante, y no habla muy bien de algún que otro framework en cuestión de rendimiento (Angular y React).

Y aprovechando, la pregunta: ¿realmente es necesario utilizar siempre toneladas de javascript? ¿Utilizar de forma discriminada recursos que añaden peso a la página sin una ventaja crítica? El hecho de que esté revisando una web con 60 ficheros de fuentes enlazadas tiene algo que ver. Mínimo 5 megas de peso cada página… Hacer webs ligeras en busca de la eficiencia (y la usabilidad) es algo que se ignora con demasiada frecuencia, y debería de ser un punto clave. Importa.

Categorías
CSS

Paletas de colores CSS con el esquema de color HSL y la función calc()

Un artículo interesante Creating Color Themes With Custom Properties, HSL, and a Little calc(), sobre un par de ideas que llevo dándole vueltas durante algún tiempo. Elementos:

  • Variables CSS
  • Usar el esquema de color HSL en lugar del hexadecidal.
  • La función calc() de CSS

Los motivos:

  • La insuperable ventaja de trabajar con HSL en CSS frente a hexadecimal a la hora de trabajar con el color.
  • La posibilidad de usar y reutilizar variables en CSS (y el ahorro de trabajo que supone)
  • La función calc() que permite automatizar cálculos de colores.
  • Y principalmente, porque los navegadores que no interpretaban estas características, están en el limbo

Habrá quien dirá que con SASS y similares, ya se puede hacer lo mismo, pero no siempre se tiene libertad para poder instalar lo necesario y poder utilizarla. No lo digo yo, lo dice un amigo.

Obviamente mi sistema de utilizar inkscape para crear variaciones de color (en tono, o luminosidad) haciendo cajitas para tener de un vistazo la paleta que uso, se puede mejorar mucho 🙂

Categorías
Diseño

Oink my god: Identidad visual

En el blog de Oink my God han publicado Qué es la identidad visual y cuáles son los 6 elementos claves que la conforman. Aquí va una pequeña tabla de contenidos, que se desarrolla en el artículo:

  1. Logo
  2. Tipografías
  3. Paleta de color
  4. Extensiones visuales
  5. Tratamiento fotográfico y/o de ilustración
  6. Tono de voz o personalidad de la marca

Qué es la identidad visual y cuáles son los 6 elementos claves que la conforman

Pero claro, hay identidad más allá de la visual. Y hay más puntos de contacto entre la entidad protagonista y el ecosistema de clientes, usuarios, empleados, administraciones públicas, espacios públicos y privados, y los no-usuarios que se ven afectados por las actividades que forman parte del negocio de la entidad.

Como complemento, podríamos hablar también del diseño de servicios en  Como diseñar servicios que funcionan, por Louise Downe.

Otro día se podría hablar también de la responsabilidad corporativa y de un comportamiento apropiado con empleados, clientes, no clientes, proveedores, administraciones públicas y medio ambiente.

Porque todo importa.

Categorías
CSS

Frameworks CSS sin clases

Leyendo el breve artículo No-Class CSS Frameworks, me ha recordado algo que encontré (y alabé) hace algunos años: El CSS Grid mínimo: ungrid.

La lista de frameworks CSS —una denominación tal vez demasiado pretenciosa, para tratarse sólo de una hoja de estilos—, es la siguiente:

Y creo que merece algo más que darle un vistazo. Keep It Simple, ya sabemos.