Enamorarse de la web: sitios web y herramientas inspiradores

Publicado: 2022-03-10
Resumen rápido ↬ Todos necesitamos un poco de inspiración de vez en cuando. En esta publicación, recopilamos recursos inspiradores de toda la web para usted: hermosos atractivos visuales, consejos para desafiar sus habilidades y herramientas útiles que seguramente generarán nuevas ideas. ¡Disfrutar!

La inspiración puede provenir de lugares inesperados: las conversaciones que tuvimos, los puntos que conectamos en nuestras mentes y las pequeñas cosas que detectamos en alguna parte. Y si bien a veces necesitamos una buena idea para un problema específico, en otras ocasiones no hay nada más preciado que dar un paso atrás en la tarea en la que estamos trabajando para dejar que nuestra mente divague libremente.

En esta publicación, recopilamos recursos que lo ayudarán a hacer precisamente eso. Encontrará atractivos visuales para disfrutar, ideas para sacarlo de su zona de confort y desafiarse a sí mismo , así como herramientas y recursos para ayudarlo cuando esté atascado en un proyecto. Solo cosas que encontramos inspiradoras y útiles y que también pueden impulsar su creatividad. ¡Disfrutar!

Un mundo de maravillas en miniatura

¿Alguna vez has pensado que el brócoli que estás preparando para la cena parece un bosque de árboles? ¿O que las hojas que flotan en la superficie del estanque de patos de su parque local parecen pequeños botes? Cuando ves las cosas desde una perspectiva diferente , comienza a abrirse un mundo completamente nuevo. Un mundo de maravillas.

Calendario en miniatura
El calendario en miniatura de Tatsuya Tanaka nos permite ver las cosas que nos rodean desde una nueva perspectiva.

Tatsuya Tanaka tiene un ojo muy especial para las pequeñas maravillas que se encuentran frente a nosotros. Desde 2011, crea escenas de estilo diorama en miniatura a partir de cosas simples y cotidianas y pequeñas figuras impresas en 3D y pintadas a mano. En el universo en miniatura de Tatsuya, descubrirás escenas de barbacoa en las que los sujetapapeles se convierten en sillas y mesas de picnic y grapas de metal en la parrilla, encontrarás un paquete abierto de patatas fritas que forman un parque de patinaje, una paleta de sombras de ojos y un lápiz labial que se convierte en una pequeña oficina o una hamburguesa en un tiovivo. La imaginación es el único límite. Tatsuya publica un nuevo diorama en miniatura todos los días en su calendario en miniatura. Ahora bien, si esa no es la manera perfecta de comenzar un nuevo día pensando fuera de la caja, ¿qué otra cosa es?

flores de fuego

Sajones giratorios, palomas voladoras, baterías de polka, fuentes aztecas, luces de bengala: la variedad de fuegos artificiales es tan rica como los nombres que los describen. Sin embargo, si alguna vez trató de tomar fotos de un espectáculo de fuegos artificiales, sabe que puede ser bastante difícil capturar esta riqueza. Eso es exactamente lo que hace que una serie de anuncios de catálogo de fuegos artificiales japoneses del siglo XIX sea tan fascinante: sin ninguna expectativa de fotorrealismo, las ilustraciones de los catálogos evocan una sensación única de asombro.

Catálogo de fuegos artificiales japoneses
Una pieza única de atractivo visual: ilustraciones de un catálogo de fuegos artificiales japoneses de la década de 1880.

Digitalizados por la Biblioteca de la ciudad de Yokohama, los catálogos se remontan a la década de 1880 y muestran no solo los fuegos artificiales como los conocemos hoy, sino también los llamados " fuegos artificiales a la luz del día". Los fuegos artificiales diurnos tuvieron su origen en Japón y no usaban efectos pirotécnicos sino un proyectil que contenía un globo con forma de animal, persona u otras formas que se abría y se inflaba cuando regresaba al suelo. ¡Ojos dulces!

Paisajes urbanos basados ​​en libros antiguos

Los libros antiguos son conocidos por tener títulos extensos y portadas bastante sencillas, a pesar de la riqueza de conocimientos que atesoran dentro de sus portadas. Para ilustrar el conocimiento único que los lectores encontrarían en ellos, Nicholas Rougeux inició un proyecto muy especial: Title Cities.

Título Ciudades
Title Cities vuelve a imaginar títulos de libros antiguos influyentes como paisajes urbanos modernos.

Title Cities vuelve a imaginar las portadas de libros científicos antiguos como paisajes urbanos coloridos, basándose únicamente en las palabras de la portada. Ya sea El origen de las especies de Charles Darwin o La óptica de Isaac Newton, para cada libro, Nicholas dibujó recuadros alrededor de las palabras en la página del título y las codificó con colores por su primera letra. Manteniendo sus tamaños originales entre sí, luego dispuso las cajas en paisajes urbanos abstractos. Un hermoso ejemplo de que la inspiración se puede encontrar en todas partes.

Ilustraciones de mineralogía ordenadas por color

¿Alguna vez se te ha ocurrido una idea que no podías dejar pasar? Cuando Nicholas Rougeux se encontró con la enorme colección de ilustraciones de minerales que el naturalista e ilustrador británico James Sowerby creó a principios del siglo XIX, se preguntó cómo se verían ordenados por color en un gran collage. Y, bueno, pasó los siguientes cuatro meses haciendo exactamente eso: arreglando todas las ilustraciones de Sowerby de la serie de 718 platos-fuerte Mineralogía británica y Mineralogía exótica .

Mineralogía británica y exótica
British & Exotic Mineralogy organiza más de 2000 ilustraciones de minerales dibujadas a mano por color.

El resultado es el impresionante proyecto British & Exotic Mineralogy . Una obra de arte fascinante que crea un puente entre el trabajo meticuloso de dos personas que viven con dos siglos de diferencia y las técnicas que utilizaron, desde la caja de pintura hasta las tecnologías web modernas. Si desea obtener más información sobre el enfoque de Nicholas y los desafíos que enfrentó en el camino, hay una publicación de blog adjunta en la que comparte una mirada detrás de escena.

¡Más después del salto! Continúe leyendo a continuación ↓

Una galería de patrones seleccionados

Cuando los colores llamativos se encuentran con paletas sutiles, las curvas orgánicas aparecen junto a formas geométricas de bordes afilados y los diseños minimalistas se enfrentan a obras de arte divertidas, la inspiración no está lejos. Si está listo para una bolsa sorpresa de dulces para los ojos , Pattern Collect es para usted. El sitio selecciona patrones bellamente ilustrados creados por diseñadores de todo el mundo.

Colección de patrones
Pattern Collection es una maravillosa bolsa sorpresa de estilos únicos.

Puede explorar el escaparate por etiqueta y, si le gusta una obra de arte, un enlace lo lleva al original en Dribbble o Behance, donde puede obtener más información sobre el ilustrador y su trabajo. Quién sabe, tal vez incluso se convierta en la oportunidad de encontrar talento creativo para trabajar en un próximo proyecto.

La gloria visual de las cintas en blanco

¿Recuerdas las cintas VHS en blanco? Antony Terence les dedicó un artículo en el que destaca por qué siguen siendo una clase magistral de diseño visual aún hoy, con su “complicada relación entre tipografía y color ” que “las hace aún más intrigantes”, según escribe.

Gloria visual de VHS en blanco
Las cintas VHS vírgenes de los años 80 todavía les fascinan hoy en día.

Si te apetece más inspiración del pasado, bueno, ¿qué tal cintas de música vacías? El blog japonés Tapefan está totalmente dedicado a la belleza de los antiguos Sony, TDK, Fuji, Maxell y sus compañeros, que solían atesorar la música favorita de la gente antes de que las tecnologías modernas ocuparan su lugar. Un inspirador viaje en el tiempo.

Nueva pestaña, nueva obra de arte

¿Por qué no darle vida a una de las acciones más mundanas que realizamos innumerables veces al día y hacerla un poco, bueno, más emocionante, incluso inspiradora? Estamos hablando de abrir nuevas pestañas del navegador . Si está cansado de ver el mismo fondo plano cada vez que abre una nueva pestaña, la extensión de Google Arts & Cultures para Chrome podría ser para usted.

Extensión de las Artes y la Cultura
Insufle un poco de cultura en su día con la extensión del navegador Google Arts & Cultures.

Cada vez que abre una nueva pestaña (o al menos una vez al día), la extensión le presenta hermosas ilustraciones nuevas. Las obras de arte van desde Van Gogh y Monet hasta obras contemporáneas de artistas callejeros de todo el mundo. Si una de las obras maestras despierta su curiosidad, puede hacer clic en la descripción de la imagen para descubrir más. Una excelente manera de insuflar un poco de cultura en tu día.

Salvapantallas aéreos para Mac

¿Estás cansado del mismo viejo protector de pantalla que te saluda cuando regresas a tu escritorio después de un descanso para tomar café? Aerial está aquí para cambiar eso. El proyecto de código abierto le permite reproducir videos desde el protector de pantalla tvOS de Apple en su Mac.

Aéreo
El salvapantallas de código abierto para Mac, Aerial, te permite explorar la Tierra desde la perspectiva de un pájaro.

Entre los protectores de pantalla, encontrará videos aéreos de alta calidad filmados en varias ciudades y lugares como Nueva York, San Francisco y China, videos de la Tierra desde la ISS, videos submarinos, así como una selección de videos creados especialmente para Aerial. Todos ellos están filmados en 4k, lo que le da la sensación de que realmente está experimentando la ubicación como un pájaro que se cierne sobre la escena. Las superposiciones de protectores de pantalla le muestran descripciones de las principales características geográficas que se muestran en los videos y, si lo desea, también le brindan información sobre la hora y el clima y lo que se está reproduciendo actualmente en Apple Music o Spotify.

Arte circular generativo

¿Recuerdas los espirógrafos? ¿Las pequeñas ruedas y anillos de plástico que te permiten dibujar todo tipo de formas de flores? La colección de arte generativo de Nadieh Bremer, Rotae, es la hermana mayor de la fascinación del viejo Spirograph. "Rotae" significa "ruedas" en latín y es una oda a la gran variedad de formas que pueden aparecer a partir del proceso aparentemente simple de dejar que los círculos giren sobre círculos.

Rotae
Los círculos que giran sobre círculos son el corazón de la colección de arte generativo Rotae de Nadieh Bremer.

La galería Rotae consta de 529 salidas, todas ellas animadas para revelar las complejidades del camino subyacente. ¿Como funciona? Cada uno de los Rotaes usa un hash como su semilla, un generador de números pseudo-aleatorios elige el número de ruedas y qué simetría de m-fold crear. Luego, a las ruedas se les asignan aleatoriamente radios y frecuencias que crearán la simetría deseada. En su resumen del proyecto, Nadieh comparte más información sobre la tecnología detrás de las obras maestras visuales y sobre cómo las animó.

Consejos e inspiración para el arte generativo

Un proyecto impresionante que cierra la brecha entre una tradición centenaria y la codificación de vanguardia es {Shan, Shui} . Creado por Lingdong Huan e inspirado en los rollos de paisajes chinos tradicionales, crea paisajes chinos de desplazamiento infinito generados por procedimientos en formato SVG . Las montañas y los árboles del paisaje se modelan desde cero utilizando ruido y funciones matemáticas. ¡Fascinante!

Shan, Shui
El proyecto de arte generativo {Shan, Shui} está inspirado en las pinturas de paisajes tradicionales chinos.

Ahora, si te preguntas cómo podría funcionar algo tan complejo, no estás solo. Victor Shepelev quería conocer el secreto de {Shan, Shui}* y lo convirtió en su proyecto de advenimiento para entender cómo funciona. Y, de hecho, le tomó 24 días profundizar en el código. Resumió sus hallazgos en una serie de artículos.

Si está listo para ensuciarse las manos con un pequeño proyecto de arte generativo, los artículos de George Francis con consejos y trucos para crear arte generativo son para usted. Para obtener más inspiración, también asegúrese de navegar por el sitio de Andrey Andronov. Lleva a cabo algunos experimentos fantásticos con estilos de arte famosos y nuevos, desde Mondrian y Bauhaus hasta el suprematismo y el arte geométrico.

Arte con CSS

¿Alguna vez has intentado crear una obra de arte CSS desde cero? Si no es así, Yosra Emad escribió un tutorial fácil de seguir que podría inspirarlo para comenzar. En él, Yosra te lleva paso a paso por el proceso de creación de un fantasma amigable solo con CSS. Ella muestra todo, desde dividir un boceto inicial en capas y planificar el marcado hasta codificar cada detalle de la obra de arte. No solo es un pequeño y divertido desafío de codificación, sino que también te ayuda a llevar tus habilidades de posicionamiento CSS al siguiente nivel.

Ikko Tanaka puro CSS
Chuan Yuan recreó los famosos gráficos del diseñador japonés Ikko Tanaka con CSS.

Si está buscando inspiración para el arte CSS, la cuenta Codepen de Chuan Yuan es un cofre del tesoro lleno de impresionantes patrones de fondo CSS, así como obras de arte CSS estáticas y animadas . No te pierdas el Codepen donde Chuan recreó los famosos gráficos del diseñador japonés Ikko Tanaka solo con CSS.

Trabajos de pintura inspiradores de Houdini

Houdini es un conjunto de API de navegador de bajo nivel que le brindan acceso directo al modelo de objetos CSS y le permiten escribir código que el navegador puede analizar como CSS. Si ya está un poco más familiarizado con el concepto, es posible que haya oído hablar de Paint Worklets. Ofrecen una forma de dibujar imágenes que responden dinámicamente a los cambios en el CSS.

houdini.cómo
Houdini.how presenta Paint Worklets para jugar.

Para profundizar en cómo funcionan los worklets, Houdini.how presenta algunos Paint Worklets agradables para experimentar: fondos brillantes , confeti, degradados en polvo, subrayados, información sobre herramientas y más. Un tutorial lo ayuda a poner todo en marcha y un polyfill soluciona la falta de compatibilidad en Firefox y Safari.

Un bot de Twitter que crea paletas de colores

La inspiración del color se encuentra en todas partes. A veces incluso en una imagen alguien la incluye en un tuit. Para esas ocasiones, Color Parrot es tu nuevo mejor amigo. Solo menciona el bot de Twitter en una respuesta y te responderá con una paleta de colores para la imagen.

Loro de colores
El tweetbot Color Parrot crea paletas de colores a partir de imágenes.

Cuando solicite ayuda a Color Parrot, puede especificar la cantidad de colores que le gustaría obtener del bot. Solo incluye el número en tu tweet. “@color_parrot ¿cuáles son esos colores? Necesito 6 de ellos.”, por ejemplo. Por cierto, la historia detrás del bot también es interesante: David Aerne, su creador, mantiene una lista de código abierto de nombres de colores que utilizan muchas aplicaciones y sitios web. Para medir qué nombres son mejores que otros, recopila los gustos y las reacciones a cada color. Entonces, al usar el bot, está contribuyendo activamente al proyecto de código abierto. ganar-ganar

Gradientes de malla curados a mano

Hermosos gradientes? ¡Sí por favor! Si no tiene tiempo para crearlos usted mismo o está buscando una nueva inspiración, la colección de degradados de malla curada a mano de Gene Maryushenko seguramente lo tendrá cubierto.

Gradientes de malla
Mesh Gradients presenta 100 gradientes que puede descargar y usar de forma gratuita.

Descontento con lo que encontró en línea, Gene creó 100 gradientes que harán que su sitio se destaque, sin ser ruidoso. Los degradados se pueden descargar de forma gratuita como archivos JPEG. CSS y SVG se agregarán más adelante. ¡Disfrutar!

Un generador de microcopia amigable

Encontrar las palabras correctas puede ser un desafío. Speak Human podría ser el lugar perfecto si necesita inspiración para la redacción. Por ejemplo, para mensajes de confirmación, interrupciones respetuosas y recordatorios amables.

habla humano
Speak Human le brinda inspiración de microcopias para diferentes casos de uso.

Para inspirarse, simplemente seleccione un propósito de un menú desplegable y el generador le presentará una pieza de microcopia inteligente y centrada en el ser humano: una forma amigable de pedirles a los usuarios su correo electrónico, por ejemplo, o una pequeña copia de comercio electrónico. que se destaca entre la multitud. Rapido y Facil.

Fuentes en uso

¿Necesitas decidirte por una tipografía para un proyecto pero te falta algo de inspiración? ¿O tal vez tienes un punto dulce para todo lo relacionado con la tipografía? De cualquier forma, Fonts In Use podría ser justo lo que estabas buscando.

Fuentes en uso
Fonts In Use es una forma divertida de descubrir nuevas combinaciones de fuentes.

Fonts In Use es un archivo de tipografía indexado por tipo de letra, formato, industria y período. Desde facturas antiguas y anuncios de periódicos de principios del siglo XX hasta empaques de dulces y secuencias de títulos de películas de hoy, el sitio es un cofre del tesoro de muestras tipográficas de todos los orígenes. Una gran manera de descubrir nuevas fuentes.

Patrones generativos de garabatos

¿Qué puedes crear a partir de formas geométricas básicas? Según Sy Hong y Ye Joo Park, ¡mundos enteros! Los diseñadores se unieron para crear Tabbied, una pequeña herramienta que genera garabatos geométricos coloridos a partir de ajustes preestablecidos ya creados. Simplemente seleccione uno de los ajustes preestablecidos, personalice los colores y elija configuraciones como la frecuencia de un patrón y la cuadrícula real, y ¡ta-daa! — puedes descargar el PNG con tu garabato de inmediato.

tabulado
Tabbied te permite generar garabatos geométricos coloridos a partir de ajustes preestablecidos.

Si está buscando algo un poco más avanzado, Repper y MagicPattern también lo respaldan. Y dado que no puede haber suficiente variedad cuando se trata de patrones, también puede echar un vistazo a Patternify, un generador de patrones CSS que le permite definir un patrón en una cuadrícula de 10 × 10, obtener una vista previa del resultado y descargar PNG o CSS. Para inspirarte un poco más, Hero Patterns te ofrece una colección de patrones de fondo SVG repetibles y MagicPattern presenta patrones de fondo CSS puro como zig-zag o diagonales.

Sitios web inspiradores de todo el mundo

¿Con qué frecuencia te encuentras con sitios web en cirílico? ¿Qué pasa con los sitios japoneses? ¿O sitios de industrias específicas pero oscuras? Cuando queremos explorar patrones de diseño inusuales, puede ser una buena idea buscar en lugares inusuales . Por ejemplo, Cyrillic.Design muestra sitios web en cirílico que a menudo no aparecen en galerías populares. Todas las entradas se pueden filtrar con etiquetas y periódicamente se agregan nuevos sitios web.

Diseño cirílico
Cyrillic Design es una muestra de sitios web que normalmente no aparecen en galerías populares.

SiteInspire organiza sitios web por industria y categoría, lo que permite buscar sitios web relacionados con la industria de la salud o proyectos relacionados con la arquitectura. Design Made in Germany muestra el trabajo realizado por diseñadores alemanes y Responsive-JP destaca el brillante trabajo de los diseñadores japoneses. Finalmente, puedes encontrar un montón de páginas de destino en Land-Book y One Page Love, mientras que Personalsit.es recopila sitios web personales pequeños y encantadores. ¡Ahora, esto debería mantenerte ocupado por un tiempo!

Inspiración de la interfaz de usuario móvil

¿Cómo resolvieron otros diseñadores un problema de interfaz de usuario en particular? Stephanie Walter recopiló algunos recursos útiles que seguramente lo inspirarán un poco al diseñar para dispositivos móviles.

Inspiración de la interfaz de usuario móvil
Stephanie Walter recopiló recursos para inspirarse en la interfaz de usuario móvil.

En la lista de Stephanie, encontrará más de 15 recursos para inspirarse en la interfaz de usuario móvil, perfectamente organizados en diferentes categorías: recursos ordenados por patrones de interfaz de usuario, tipo de vista, componentes, flujos específicos, así como inspiración en la categoría de la aplicación y el ícono móvil . Y aunque el contenido ya tiene dos años, sigue siendo un cofre del tesoro para todos los que trabajan en una interfaz móvil.

Podcasts a los que suscribirse

¿Qué podcasts estás escuchando? ¿Qué te inspira y qué te ayuda a descubrir cosas que nunca has conocido? Estas son las preguntas que hemos hecho en Twitter, con muchas sugerencias excelentes provenientes de la comunidad. Work-Life es un podcast encantador con consejos sobre cómo mejorar su trabajo , mientras que Darknet Diaries es una escucha fascinante sobre piratas informáticos, infracciones, delitos cibernéticos y todas las cosas que habitan en las partes ocultas de Internet.

Diarios de la red oscura
El podcast Darknet Diaries se sumerge profundamente en las partes ocultas de Internet.

Siempre puede encontrar una mejor perspectiva de las cosas en Un poco de optimismo y aprender a mejorar su flujo de trabajo de diseño con Design Better Podcast. Hay mucho más sobre todos los aspectos del diseño en Design Matters y 99% Invisible. Todos los excelentes podcasts para tener en su biblioteca para dar un paseo por el parque, correr o simplemente cocinar un poco por la noche. Ah, y, por supuesto, también está nuestro propio Smashing Podcast. Sólo digo'!

Desenreda tu desorden de marcadores

¿Tiene un sistema dedicado para almacenar todas esas herramientas y artículos útiles que podrían ser útiles algún día, los libros que planea leer, las recetas que quiere probar y todos esos otros pequeños fragmentos de inspiración que encuentra al navegar? ¿La web? Si sus marcadores están repletos de preciosos obsequios pero les ha perdido la pista, una pequeña herramienta lo está esperando para ayudarlo a desenredar ese lío de marcadores: Raindrop.io.

Gota de agua
Raindrop.io hace que organizar tus marcadores sea más intuitivo.

Raindrop.io le permite ordenar sus marcadores en colecciones y asignarles etiquetas que facilitan la búsqueda rápida de lo que está buscando y, si lo desea, incluso puede compartir estas colecciones con miembros del equipo y amigos. La herramienta funciona a la perfección en todos los dispositivos y también está disponible en una versión premium que viene con características adicionales, como un buscador de enlaces rotos y duplicados, búsqueda de texto completo para los sitios web que guardó, una copia de seguridad en la nube y más.

Terminando

¿Ha encontrado un sitio recientemente que lo dejó sintiéndose inspirado? ¿O tal vez una pequeña herramienta útil que te ayudó a superar un problema creativo? ¡Nos encantaría saberlo en los comentarios a continuación!