SiloMag #130

Como cada dos semanas, os traemos una nueva entrega de SiloMag. Y como siempre, hemos recopilado las mejores noticias y recursos sobre diseño gráfico, diseño web y WordPress para todos vosotros.

Esta semana vemos el nuevo restyling de Instagram una propiedad CSS para hacer recortes de imágenes de forma sencilla, el nuevo plan de pago de WordPress.com, un tutorial interactivo para conseguir mejores textos, la novedades en la última actualización de Gutenberg, la historia detrás de la famosa imagen del título de Stranger Things, y muchas más cosas!

Diseño Gráfico

Stranger Things: historia de su icónico logo

imagen del titulo de la serie de television stranger things

Posiblemente el título y la tipografía usada en la serie de Netflix Stranger Things sea una de las más reconocibles. En este interesante artículo de TypeRoom nos explican como fue el proceso de creación, porque se usó la fuente ITC Benguiat, y nos muestran imágenes de como fueron algunas de las alternativas desechadas durante este proceso hasta llegar a la imagen final que todos tenemos presente a día de hoy.

Instagram restyling 2022: nueva tipo y gradiante

mosaico de fotografías con textos utilizando la nueva tipografia de instagram
Instagram y su restyling responden a varias situaciones por las que atraviesa Meta (Facebook), entre las cuales se encuentra TikTok ganando mercado. Desde hace mucho, Meta ha copiado ciertas características de otras apps, sin embargo, aunque ahora tiene los Reels, TikTok sigue dominando en esa área. A diferencia de 2016 en que fue un rebranding total, en esta ocasión, es una actualización de la marca existente. Con un nuevo gradiente y tipografías personalizadas, Instagram busca conectar más con la comunidad global de creadores.

Sprite unifica su identidad visual con un nuevo logo y un nuevo packaging

lata de rrefresco de sprite con la nueva imagen rediseñada

A pesar de su notable éxito, Sprite tenía un importante problema: no tenía una identidad visual sólida y unificada en todo el mundo. Sprite presentaba diferentes versiones e identidades dependiendo del país en el que lo consumieras. Frente a esto, desde The Coca-Cola Company entendieron que era fundamental cambiar la situación para conservar el legado y asegurar el futuro de la marca.

Diseño Web

Primer vistazo a la propiedad CSS object-view-box

ejemplo practico de la propiedad css object-view-box, como dos fotografias, una de ellas con un recorte de imagen realizado
Crear recortes de imagen directamente con CSS siempre ha sido algo complejo. Había que estar creando nuevos elementos HTML por encima de donde estuviese insertada la imagen, jugar con la propiedad position y background-image, modificar su tamaño… Por suerte, gracias a la propiedad CSS object-view-box nos vamos a ahorrar quebraderos de cabeza, ya que solo tendremos que definir la distancia desde el borde original de la imagen hasta el borde del recorte que queramos hacer. Ahmad Shadeed nos lo explica en profundidad en este artículo.

Tutorial interactivo para aprender la lógica detrás de un gran diseño de texto

texto plano html con un cartel indicando why this look so awful?
Desde Learn UI Design nos traen un pequeño tutorial interactivo. En menos de 5 minutos aprenderemos algunos trucos a tener en cuenta al trabajar con textos en la web, como elegir una tipografía adecuada, además de aprender patrones de diseño como el espaciado correcto entre títulos y cuerpo de texto, o como aplicar correctamente la jerarquía. Os recomendamos que lo probéis.

Legibilidad: la longitud de línea óptima

texto con varias longitudes, siendo solo una la correcta al tener mejor legibilidad

Seguimos hablando de textos, pero en esta ocasión centrándonos en la legibilidad. Y es que esta legibilidad no solo es sobre el tamaño de texto, su contraste respecto al fondo o el tipo de fuente. También lo es sobre la longitud de línea. Una línea de texto demasiado corta hace que cortemos la continuidad del mensaje demasiado. Y si es demasiado larga, puede hacer que nos perdamos, o que no sepamos muy bien como seguir en la siguiente línea. En este artículo de Baymard Institute nos dan algunos tips.

WordPress

Presentación del nuevo WordPress Starter Plan

dos lapices de color azul sobre logotipo de wordpress dibujado

WordPress.com anunció hace unos días un nuevo plan «Starter» para clientes, que cubre la brecha de precios entre el plan gratuito y su plan Pro de 15€ al mes. El plan Starter cuesta 5€ al mes e incluye un nombre de dominio personalizado, junto con 6 GB de almacenamiento y la posibilidad de utilizar bloques de pago, como el formulario de donaciones, contenido premium y botón de pago.

Novedades de Gutenberg 13.3

ventana con opciones del nuevo bloque de gutenberg para añadir taxonomias

Aun estamos de resaca tras la salida de WordPress 6.0, pero la evolución de Gutenberg no para. Llegamos a la versión 13.3 del editor de bloques (en WordPress 6.0 estamos utilizando la 13.0), y trae como novedades la posibilidad de mostrar desde el propio viewport del editor los margins y paddings, un bloque de tabla de contenidos, que detecta automáticamente todos nuestros headings, o un nuevo bloque para trabajar con taxonomías.

Por qué deberías usar Google Analytics 4 (GA4)

logotipos de google analytics 4 sobre fondo blanco
¿También has visto una notificación en Google Analytics que indica que puedes actualizar a Google Analytics 4? Probablemente te preguntes por qué harías eso ahora. Incluso si aún no has visto la notificación, esta herramienta completamente nueva proporciona información sobre los datos en línea de tu empresa o proyecto web ya está disponible también para ti. Daniel M. Casas no da una serie de razones por las que deberías comenzar con esta nueva versión de Google Analytics ahora.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *