Bibliotecas y herramientas de animación CSS

Herramientas online css

 

Crear animaciones CSS de aspecto profesional puede ser difícil y lleva mucho tiempo, pero afortunadamente, existen excelentes herramientas de animación CSS para ayudar a impulsar tu proceso creativo. Esta colección de recursos incluye todas las mejores bibliotecas de animación CSS.

Elige uno que se adapte a tu proyecto y comienza de inmediato, o utilízalo como punto de partida para crear algo personalizado para tu marca. También hay algunas hojas de estilo y atajos útiles para complementar tu aprendizaje.

01. animista

animista biblioteca de animación css

Animista es un parque de animación CSS

Animista es un tipo de área de juegos donde puedes editar y jugar con una colección de animaciones CSS pre-hechas. Luego copia el código de lo que desees, para usar en tus proyectos. Animista comenzó su vida como un proyecto paralelo para la desarrolladora front end Ana Travas, quien aún lo está desarrollando.

02. CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet

Explora esta colección de animaciones CSS3 preestablecidas, plug-and-play

Este útil proyecto ofrece un conjunto de animaciones preestablecidas, plug-and-play para que las uses en tus proyectos web. Hay instrucciones claras para ayudarte a comenzar, pero básicamente, solo tienes que añadir la hoja de estilo a tu sitio web y aplicar las clases de CSS pre-hechas a los elementos que desea animar. Esta hoja de trucos utiliza los fotogramas clave de CSS3, lo que significa que no debes preocuparte por colocar el elemento para dejar espacio para las animaciones.

03. animate.css

biblioteca animate.css

Esta biblioteca incluye 77 animaciones CSS esenciales.

Esta biblioteca reúne nada menos que 77 animaciones, todas creadas en CSS y listas para usar. Simplemente haz referencia al archivo CSS y cuando añadas clases a un elemento, la animación sucederá. Esto funciona mejor al agregar o eliminar clases usando JavaScript.

La biblioteca tiene un tamaño de archivo impresionantemente pequeño cuando está comprimido con gzip, pero si no quieres cargar todo en tu pagina web, el proyecto también es una gran fuente de inspiración. Compilada por Dan Eden, esta biblioteca incluye casi todas las animaciones CSS que puedas necesitar, desde lo básico (rebote, atenuación) hasta algo más emocionante (Jack in the Box, Jello). Usa el menú desplegable en la página de inicio para ver el título de la biblioteca animada en cada uno de los diferentes estilos.

04. Hover.css

biblioteca Hover css

Hover.css se centra en animaciones de interacción de botones

Similar a Animate.css, Hover.css es una colección de efectos CSS que puedes usar en tus proyectos. Esta biblioteca fue creada específicamente para animaciones de interacción de botones. La biblioteca se puede descargar en vainilla CSS, Sass o Less, por lo que encajarán en casi cualquier proyecto. La biblioteca tiene casi todas las animaciones que puedas necesitar para la interacción.

05. CSShake

biblioteca CSShake

CSShake se centra en agitar animaciones.

CSShake es una biblioteca de animaciones CSS dedicada a hacer temblar elementos. La biblioteca tiene una serie de clases que puedes agregar a los elementos para aplicar una de las muchas animaciones diferentes. Las animaciones usan fotogramas clave y utilizan la propiedad de transformación para crear animaciones que a veces parecen locas, pero definitivamente difíciles de ignorar.

06. Obnoxious.css

biblioteca Obnoxious css

¿Quieres saber cómo no hacer animación CSS?

Obnoxious.css fue creado por Tim Holman y es exactamente como su nombre indica. La biblioteca explora lo que es posible con la animación CSS, pero ilustra perfectamente lo que no debes hacer con las animaciones CSS. Si bien se presenta como una biblioteca de animación lista para el producto (y lo es), se pretende que sea irónica. Prepárate.

Espero que te haya gustado este artículo sobre herramientas de animación CSS, si no te es molestia, compártelo y ayuda a que se difunda este mensaje.

 

La pagina web de Capitana Marvel es un hermoso desastre de los años 90

Pagina web de Capitana Marvel

 

Marvel aprovechó la nostalgia de los noventa para promocionar su película.

La pagina web promocional de Marvel para su  película Capitana Marvel, te llenará de un cálido resplandor nostálgico, o te servirá como otro recordatorio de que ahora eres muy, muy viejo.

En línea con la configuración del Capitana Marvel en 1995, Marvel lanzó una pagina web retro que te informa de todo lo que necesitas saber sobre la película de superhéroes protagonizada por Brie Larson. Eso es todo el tiempo que estés dispuesto a navegar a través del diseño de una web de la vieja escuela y las opciones de fuentes que te agotan los ojos.

Un encantador recuerdo

Para los visitantes que crecieron con una dieta de Pogs y Tamagotchis, el sitio web es un encantador recuerdo de una época en la que acceder a una pagina web significaba que no podías hacer llamadas telefónicas. Mientras tanto, los visitantes más jóvenes podrán disfrutar de esta estética arcaica que alguna vez disfrutaron los «ancianos».

Pagina web de Capitana Marvel

Los elementos familiares de internet de antaño incluyen un libro de visitas, un contador de visitas y una cantidad de texto animado que paraliza el módem. Todo lo que falta es una bandada de tostadoras voladoras. Sin embargo, en términos de diseño promocional, este sitio web es tan malo que es muy bueno.

Diseño estrafalario pero efectivo

Algunos de nuestros toques favoritos incluyen a la anciana Skrull que aparece de vez en cuando: los visitantes pueden hacer clic para golpearla en la cara. El antiguo Windows Media Player y el cuestionario decepcionante sonarán una sonrisa también. Y si bien puede parecer una diversión estrafalaria en la superficie, este sitio también es práctico: el botón «Obtener boletos» se encuentra en una posición privilegiada cuando llegas a la página.

La lengua en la mejilla, internet, killjoy y el editor ejecutivo de The Verge , Dieter Bohn, ha señalado que este sitio no es una réplica exacta de un sitio web de los noventa, ya que cuenta con  10 MB, lo que hubiera demorado una eternidad su apertura.

También destaca el hecho de que su libro de visitas está lleno de referencias a eventos que sucedieron después de 1995. Sin embargo, esto no arruina nuestro disfrute del sitio, especialmente cuando te enteras de que todo fue creado en FrontPage y alojado con Angelfire.

Como la fuente Gotham conquistó el mundo del diseño

Como la fuente gotham conquistó el mundo del diseño

Nacimiento de la Fuente Gotham

Cuando cierro los ojos y pienso en una palabra, me imagino esa palabra con la fuente Gotham. Estoy maldito por la necesidad compulsiva de identificar cada tipo de letra con el que me encuentro, pero incluso si no sufres esta aflicción en particular, si su relación con la tipografía se parece a su relación con el aire, una interacción constante tan perfecta que casi no lo piensa, a menos que suceda algo. Muy mal, ya sabes esta fuente. Si navegas online, has visto una cartelera, has ido a una sala de cine o has caminado por la calle con los ojos abiertos, has visto a Gotham.

Gotham es un tipo de letra diseñado por primera vez en 2000 para GQ y lanzado para uso público en 2002. Una lista abreviada de dónde ha aparecido incluye: Spotify; Netflix; Universidad de Nueva York; Programas de televisión que incluyen CONAN y Saturday Night Live ; películas que incluyen Inception , Moneyball , The Lovely Bones y Moonlight . Si los anuncios en las estaciones de tren y en las paradas de autobús de su ciudad no usan Gotham, probablemente usen un aspecto similar a Gotham.

Gotham está en todas partes , como sugiere el nombre de una de las cuentas de Tumblr dedicadas a rastrear su prevalencia, pero ¿cómo llegó a ser tan ubicuo? ¿De qué manera se adquiere un tipo de letra tan exhaustivamente en tan poco tiempo, y qué les gusta a los anunciantes de todas las industrias?

Una fuente sans serif

Las respuestas más simples son las técnicas. Gotham es un sans serif sans serif sans serif, lo que significa que le faltan los pies pequeños en las esquinas de las letras que se ven en un tipo de letra como Times New Roman y geométricas que aluden a la influencia de las formas básicas en su diseño. Tiene una altura x alta, lo que significa que las letras minúsculas como xey son comparativamente grandes, y sus diferentes pesos (negrita, delgada, mediana, etc.) son muy distintos entre sí. Todo esto es para decir que Gotham se puede leer fácilmente a distancia en una cartelera o cartel, lo que la convierte en una opción natural para la publicidad impresa.

Las raíces de esta tipografía

De hecho, Gotham encuentra sus raíces tipográficas en gran parte de la señalización arquitectónica del siglo 20 que se encuentra comúnmente en la ciudad de Nueva York. Por extraño que parezca, la señalización geométrica en la puerta principal de la Autoridad Portuaria (no es un lugar que muchas personas asocian con la moda) sirvió de inspiración para el creador de Gotham, el titán de la industria tipográfica Tobias Frere-Jones.

“El objetivo era encontrar una voz sencilla, incluso clara”, me dijo Frere-Jones por correo electrónico, “y las letras de la Terminal de autobuses de la Autoridad Portuaria fueron un ejemplo prometedor de esa voz. También me preocupaba hacer nuevos sans geométricos cuando ya hay tantos … esperaba que esta fuente no tipográfica pudiera producir algo memorable en un campo tan abarrotado «.

También está la cuestión del estilo más nebulosa y abarcadora. Gotham ha sido descrito por Frere-Jones como «fresco» y «masculino» (después de todo, estaba destinado inicialmente a GQ ); Michael Beirut, quien diseñó el logotipo de Hillary Clinton 2016, una vez lo describió a Newsweek como una «fuente elegante, intencionalmente no elegante, muy sencilla y sencilla».

¿Una fuente masculina o femenina?

Es difícil desentrañar lo que se refiere a la distinción de una tipografía como “masculina”: En el contexto de GQ , la franqueza y la autoridad sencillas de Gotham ciertamente se pueden leer como masculinas, especialmente en sus pesos más pesados, pero en los pesos más ligeros, combinados con la paleta de colores correcta, se podría leer fácilmente como una tipografía elegante y femenina. ¡Es una fuente que oscila en ambos sentidos!

Tal vez esa combinación de elegancia y sencillez es el factor más crucial en su ascenso a la prominencia. Gotham es, de muchas maneras, una pizarra en blanco, que se puede usar con estilo en una amplia variedad de contextos, mientras que impregna su entorno con un poco de elegancia «plainspoken» realista.

El fenómeno de Gotham

Pero lo que hace que el fenómeno de Gotham sea extraordinario es la forma en que se ha utilizado en innumerables industrias para innumerables productos y marcas, mientras que trasciende su asociación con cualquiera en particular. Si te mostrara una oración escrita en Jubilat o Myriad Set Pro, las cuales tienen algunas similitudes de construcción de letras con Gotham a pesar de parecer muy diferentes, es probable que las reconozcas como las fuentes utilizadas por Bernie Sanders y Apple, respectivamente.

Pero es probable que no identifiques inmediatamente a Gotham como «la fuente de Obama», o «la fuente de Saturday Night Live » o «la fuente de Spotify», ¿lo harías? En su universalidad, Gotham se resiste a ser encasillado, lo que le permite ser usado por una marca importante después de una marca importante sin volverse obsoleto.

Imitadores y progenitores

En las casi dos décadas desde la llegada de Gotham, el ya bien poblado campo de sans serifs reducido ha visto una explosión en el mundo de la publicidad. Los imitadores de Gotham, incluidos Raleway, Montserrat y Gibson, han asumido el manto de los sans serifs limpios y directos, junto con los progenitores de Gotham como Avenir y Proxima Nova.

«El péndulo nunca se detiene», dijo Frere-Jones. “La ola de sans serifs reducida ya está comenzando a mostrar su edad, y algunas identidades corporativas ya se están alejando de ella. Pero ser limpio y directo nunca pasa de moda, incluso si necesita una nueva expresión «.

Descarga modulo

Las 25 fuentes más principales por los diseñadores

Las 25 fuentes más principales

 

Buscando fuentes he revisado más de 70 entrevistas de diseñadores de renombre mundial como; Erik Spiekermann, Jessica Hische, Michael Bierut, Ellen Lupton, Mark Simonson y Seb Lester, además de propietarios de fundaciones como Font Smith, Type Together y Process Type.

Hemos contado la cantidad de veces que se seleccionó cada tipo de fuente y, aunque las selecciones fueron tan diversas como los diseñadores que se habían entrevistado, encontramos un pequeño consenso sobre las 25 fuentes más principales.

Las fuentes preferidas de los diez mejores diseñadores serán familiares para muchos, pero es de esperar que la lista completa les brinde un trampolín útil para explorar muchas más.

Seleccionar el tipo de fuente correcta hace toda la diferencia para un diseño y comunicación efectiva. Pero con más de 100.000 familias de fuentes para elegir puede ser una tarea desalentadora. Existen algunas guías excelentes sobre cómo elegir y emparejar fuentes, pero para aplicar estos principios es importante estar familiarizado con una amplia gama de tipos de letra de calidad.

Las 25 fuentes más principales por los diseñadores

1. Georgia . Matthew Carter, 1993. Elegido 11 veces.

Originalmente diseñado para mayor claridad en pantallas de baja resolución para Microsoft, es la contraparte de Verdana que también aparece en esta lista. Georgia todavía aparece en millones de sitios web. Es una tipografía robusta pero amigable con una cursiva maravillosamente fluida.
«Un logro técnico magnífico». Jason Santa Maria

2. Gotham. Tobias Frere-Jones, 2000. Elegido 8 veces.

Ocasionalmente conocido como la Helvética del siglo XXI. Gotham se inspiró en la señalización arquitectónica del edificio más antiguo de Manhattan. Originalmente fue encargado por la revista GQ y fue famoso por la campaña presidencial de 2008 de Barack Obama.

3. FF Scala . Martin Majoor, 1990-2004. Elegido 7 veces.

Descrita como la «primera fuente seria de texto» de FontShop International, Scala es una super familia, popular entre los diseñadores de libros, que incluye un serif, un sans serif y un diseño de joya decorativa.
«Scala y Scala San son casi perfectas.» John Boardley

4. Futura . Paul Renner, 1927. Elegido 6 veces.

Esta tipografía «moderna» inmortal con sus formas inflexibles se ha convertido en el sans serifs geométrico de referencia durante casi 80 años.
«El futuro de Paul Renner caracterizó su tiempo e influyó en muchos otros diseñadores. Era una tipografía moderna y real, no basada en tipos de letra serif existentes «. Georg Salden

5. Gill Sana . Eric Gill, 1926. Elegido 5 veces.

Un diseño británico por excelencia producido bajo la dirección de Stanley Morison en Monotype. Sigue siendo una de las mezclas más distintivas de formas humanistas y geométricas.

6. Garamond . (Claude Garamond, c. 1480-1561), Elegido 5 veces.

Se han elegido varios derivados del diseño del punzón parisino, que incluyen; ITC Garamond (Tony Stan), Adobe Garamond y Garamond Premier (Robert Slimbach).
«Garamond era el maestro que apreciaba tanto la moderación como la elegancia. De los diversos tamaños romanos y cursivos que cortó, creo que su fuente ‘Vraye Parangonne’ (aproximadamente 18 pt) captura mejor la esencia de su visión. La sutileza de la línea y los detalles son simplemente notables «. Robert Slimbach

7. Caslon . (William Caslon I, 1722) Carol Twombly, 1990. Elegido 4 veces.

El tipo de letra que dio lugar a un refrán de las impresoras » En caso de duda, utilice Caslon». También es una de las favoritas de Benjamin Franklin.

8. Akzidenz Grotesk . H. Berthold, Berthold Type Foundry, 1898. Elegido 4 veces.

El primer tipo de letra sans serif ampliamente utilizada. «El grotesco original y sigue siendo el mejor». Vincent Connare.

9. Gótico alternativo . Morris Fuller Benton, 1903. Elegido 4 veces.

Diseñado para la American Typefounders Company (ATF). Los tres pesos son audaces y estrechos. Usado en el logo de la página de inicio de YouTube.
«Muy bien diseñado y dibujado. Es un estándar que busco en mi propio trabajo » Mark Simonson.

10. Baskerville . John Baskerville, 1757. Elegido 4 veces.

Baskerville diseñó su propia fuente para mejorar sus trabajos impresos y mejorar las fuentes dominantes de William Caslon. Sus fuentes fueron admiradas (notablemente por Giambattista Bodoni y Benjamin Franklin) y criticadas por sus competidores. Baskerville hizo variaciones de su tipografía para usar en diferentes tamaños (ahora conocidos como ‘tamaños ópticos’). Algunas interpretaciones modernas de Baskerville se han reproducido siguiendo los diseños de un tamaño específico, lo que resulta en varias versiones distintas.

11. Chaparral . Carol Twombly, 2000. Elegido 4 veces.

Elegida por Robert Bringhurst, Chaparral se mueve un lugar en la tabla. La cara de texto de «Twombly» que combina la legibilidad de los diseños del siglo XIX con el estilo del siglo XVI.

12. Helvetica . Max Miedinger con Eduard Hoffmann, 1957. Elegido 4 veces.

Helvetica no necesita presentación como el tipo de letra más famosa del planeta, incluso inspiró una muy buena película.
«Puedes decir ‘te amo’ en Helvetica. Y puedes decirlo con Helvetica Extra Light si quieres ser realmente elegante. O puedes decirlo con Extra Bold si es realmente intenso y apasionado, y podría funcionar «. Massimo Vingelli.

13. ITC Franklin Gothic . Morris Fuller Benton, 1902. Elegido 4 veces.

Creado para American Type Founders Company y nombrado en honor a Benjamin Franklin.

14. Meta Serif . Erik Spiekermann, Christian Schwartz y Kris Sowersby, 2007. Elegido 4 veces.

El compañero servil al influyente sans serif de Eric Spiekermann, FF Meta. También está diseñado para funcionar bien con FF Unit y FF Unit Slab.

15. Metro William Addison Dwiggins , 1930. Elegido 4 veces.

Diseñado a partir de una insatisfacción con los serifs san de la época como Futura.

16. Copperplate Gothic . Jackson Burke, 1948/1960. Elegido 4 veces.

Michael Bierut lo describió como «el mejor tipo de letra ‘no me importa’. Sin estilo, sin matices, solo actitud directa, franca, directa «.

17. Adelle . José Scaglione y Veronika Burian, 2009. Elegido 3 veces.

Adelle es una tipografía serif slab concebida para uso editorial intensivo, principalmente en periódicos y revistas, pero su personalidad y flexibilidad la hacen muy adaptable. «Adelle Sans logra capturar una de las emociones humanas más deseadas: la alegría». Nadine Chahine

18. Caecilia . Peter Matthias Noordzij, 1990. Elegido 3 veces.

Una serifa de losas humanista en lugar de geométrica, ayudando a su legibilidad. «Una serifa de losas amistosa que es más contemporánea en su estructura. Es una familia grande y flexible que siempre establece un tono realmente agradable cuando lo uso. «Frank Chimero

19. DIN . Albert-Jan Pool, 1995. Elegido 3 veces.

Este sans geométrico limpio se basa en el tipo de letra estándar alemán, DIN 1451, utilizado para documentos oficiales y letreros de calles, etc. DIN significa Deutsches Institut für Normung (Instituto Alemán de Normalización). La fuente se agregó a la colección de diseño de MoMA en 2011.

20. Fedra Serif . Peter Bilak, 2003. Elegido 3 veces.

Un tipo de letra de texto muy original. Formado por una combinación única de consideraciones tecnológicas, manteniendo formas escritas a mano.
«Una tipografía bellamente diseñada. Un ejemplo muy agradable y contemporáneo de calidad técnica y diseño caritativo. «José Scaglione y Veronika Burian

21. Feijoa . Kris Sowersby, 2007. Elegido 3 veces.

Con el objetivo de crear una sensación de suavidad, Feijoa tiene una ausencia casi completa de líneas rectas. Feijoa evita con éxito la sensación de frialdad que Kris había sentido con algunos tipos de letra digitales anteriores.
«Esas rectas suavemente curvadas y esquinas redondeadas le dan al diseño una hermosa calidad orgánica, casi caligráfica. Sin embargo, no hay nada frívolo en el tipo de letra, todo es funcional y parece muy seguro de sí mismo. «Yves Peters

22. Hoefler Text . Jonathan Hoefler, 1991. Elegido 3 veces.

Diseñado para que Apple demostrara tecnologías de tipo avanzado, reintrodujo las tradiciones de diseño tipo alguna vez esenciales para la impresión fina, como conjuntos de ligaduras, mayúsculas grabadas, adornos y arabescos.

23. Officina . Erik Spiekermann, 1990. Elegido 3 veces.

Una familia emparejada de rostros serif y sans serif, originalmente diseñada como un tipo de letra para correspondencia comercial, pero que tenía una audiencia mucho más amplia y moderna.

24. Quadraat . Fred Smeijers, 1992. Elegido 3 veces.

Una tipografía original que combina elegancia renacentista con ideas contemporáneas sobre la construcción y la forma. El nombre del estudio de diseño de Smeijers en Arnhem, del mismo nombre.
«En mi opinión, uno de los diseños de tfuente más importantes de los años noventa» Yves Peters

25. Sabon . Jan Tschichold, 1964. Elegido 3 veces.

Un tipo de letra serif oldstyle basado en Garamond. Una característica distintiva de Sabon es que los estilos romano e itálico y los pesos regulares y audaces ocupan el mismo ancho.

3 ejemplos de diseño de landing page efectivas

 

Un diseño correcto de una landing page puede hacer o deshacer una página web, ya que esto es lo primero que verán tus visitantes. Si lo haces mal, la mayoría de la gente no se quedará.

Los diseños de landing page deben transmitir claramente el punto de venta único (USP) del producto o servicio, y centrarse en una llamada a la acción (CTA), como hacer que el visitante registre sus datos o realice una compra. Cualquiera que sea el objetivo, depende del diseño de la página para canalizar al usuario hacia ella, ya sea a través del uso de espacios en blanco, colores contrastantes o señales direccionales más explícitas. (Y tener las mejores herramientas de diseño web a mano te ayudará a lograrlo).

Los encabezados y subtítulos claros y concisos, y los puntos de bala impactantes y fáciles de escanear están a la orden del día. La landing page debe tener una marca destacada, a menudo incorpora una imagen para comunicar el producto o servicio de un vistazo, y se dirige directamente al punto para evitar que los usuarios se distraigan.

Con todo esto en mente, hemos reunido 3 ejemplos particularmente efectivos de diseño de landing page de toda la web.

1. Landing page de IBM Plex

El paginador único para Plex de IBM está diseñado para mostrar la nueva fuente desactivada para un mejor efecto

IBM lanzó recientemente su propia fuente personalizada; Esta es la primera actualización de su tipografía corporativa desde 1956, por lo que es un gran problema. Para ayudar a introducir el tipo de letra en el mundo, IBM le pidió a studio XXIX que diseñara y construyera una landing page para mostrarlo. El pensamiento detrás del diseño web fue usar imágenes, animación y fotografía para contar la historia de Plex mientras se muestra la fuente de diferentes maneras.

Lo bueno es que gran parte de la landing page sirve como una forma de probar la fuente y explorar los múltiples estilos disponibles. Así que realmente puedes verlo en contexto antes de decidir si quieres comenzar a usarlo en tus proyectos.

2. Landing page de Google Fonts

Google te dirige directamente a las fuentes sin ningún problema.

Originalmente lanzado en 2010, Google fonts recibe más de 15 mil millones de visitas al día, en más de 135 idiomas en todo el mundo. La página web de Google Fonts es limpia y responde bien, utilizando Material Design para su cuadrícula y estilo.

En la publicación de su blog sobre el proyecto, la diseñadora Yuin Chien explica que «al desarrollar la capacidad de jugar con combinaciones de escala, color y fuente, invitamos a todos a descubrir y usar tipografías sin problemas para sus proyectos». Y tiene razón; La interfaz es atractiva y hermosa. También es intuitiva y divertida de explorar.

Fundamentalmente, no te obliga a saltar a través de aros para llegar a las fuentes; están justo en la parte superior de la landing page, listas para que juegues. Puede escribir directamente en los campos de texto de la página para probar las fuentes. Y si se siente abrumado por la elección, Google facilita simplificar las cosas con casillas de verificación para las categorías de fuentes y controles deslizantes útiles para la cantidad de estilos, grosor, inclinación y ancho.

3. Landing page de Apple

La landing page de Apple se centra en la fotografía de productos.
No es de extrañar que los maestros indiscutibles del diseño industrial puedan juntar una página web decente, y la simplicidad sin esfuerzo de Apple.com incluso lo ha ganado con un lápiz negro D&AD.

La página de inicio rebana la extensa gama de productos de la compañía y se enfoca en un solo producto del momento. Además de la simple barra de navegación en la parte superior, es simplemente la fotografía del producto, el nombre del producto y su eslogan. Ni siquiera hay un CTA aquí. Apple supuso sensatamente que su público experto en tecnología sabrá que la imagen y el texto están vinculados a más información. Es una verdadera clase magistral de moderación.

Los 5 mejores recursos gratuitos de iconos vectoriales para diseño web en 2018

 

Recursos gratuitos de iconos vectoriales

Los 5 mejores recursos gratuitos de iconos vectoriales gratis en 2018 para los diseñadores descarga gratuita.

Hay una gran cantidad de recursos de diseño en línea, que incluyen iconos vectoriales gratuitos y fuentes gratuitas . Con estos recursos fácilmente disponibles, no hay razón para no aprovecharlos. Le ahorrarán mucho tiempo y le darán espacio para respirar antes de sus plazos.

Sin embargo, cada empresa y proyecto tiene su propio conjunto de especificaciones de diseño únicas. ¿Qué colores deben usarse para fuentes, botones e íconos? ¿Qué se debe usar – iconos vectoriales o mapas de bits? Tomar en consideración todas estas especificaciones puede dificultar la búsqueda del icono perfecto, incluso con todos los recursos disponibles. O tal vez, especialmente con la cantidad de recursos disponibles. La cantidad de opciones puede ser abrumadora!

Para ayudarlo a optimizar su proceso, Mockplus ha reunido una lista cuidadosamente seleccionada de los mejores recursos de iconos vectoriales gratuitos . Esta lista le ahorrará tiempo mientras busca el conjunto de iconos vectoriales perfecto, sin importar el estilo que esté buscando.

1. Freepik

Precio : Gratis

Formato : SVG / AI / EPS

Descargar :https://www.freepik.com

Frepik

Freepik es una de las plataformas más grandes y populares para encontrar iconos vectoriales gratuitos en línea. Se promociona a sí mismo como «el principal motor de búsqueda de vectores gratuitos» que está diseñado para ayudar a los usuarios a encontrar iconos vectoriales, ilustraciones, iconos, PSD y fotos gratuitos. El sitio ofrece una gran colección de más de 815,100 operadores gratuitos y premium. A diferencia de la mayoría de los otros sitios web, la calidad de los vectores Freepik es excelente, y puede descargar formatos AI, EPS o SVG.

2. Flaticon

Precio: gratis

Formato : SVG / PNG / PSD

Descargar :https://www.flaticon.com/

Flaticon

FlatIcon tiene más de 961,000 iconos vectoriales gratuitos y es conocida como una de las bases de datos de iconos vectoriales más grandes de la web. Su base de datos contiene iconos gratuitos en formatos PNG, SVG, EPS, PSD y BASE 64. Por lo tanto, no importa qué tipo de ícono vectorial esté buscando, puede encontrar los recursos que necesita aquí, incluidos algunos de los más populares. Estilo libre conjunto de iconos de redes sociales.

3. Iconfinder

Precio: gratis

Forma: SVG / PNG / AI

Descargar: https://www.iconfinder.com

iconfinder

Iconfinder ofrece 2,592,445 íconos SVG hasta la fecha y es sin duda uno de los mejores motores de búsqueda de íconos gratuitos. Aquí, puede encontrar patrones libres adecuados para una variedad de colores de diseño. Sin embargo, es importante tener en cuenta que si bien hay muchas bibliotecas de iconos, es posible que no satisfagan sus necesidades exactas, por lo que es posible que deba editar los iconos usted mismo.

El Editor de iconos de Iconfinder es una nueva característica de Iconfinder. Es una herramienta de edición de iconos en línea gratuita y fácil de usar. No necesita descargar ni instalar software, puede usarlo a través de un navegador. Es muy sencillo ajustar el color, el tamaño o el texto del icono. Incluso si no tiene un software de edición vectorial, definitivamente puede satisfacer las necesidades de edición de iconos más básicas con el Editor de iconos.

4. Icons8

Precio: gratis

Formato : SVG / PNG / EPS / PDF

Descargar: https://icons8.com

icons8

Icons8 tiene 83,900 iconos, que abarcan varios estilos, incluidos los de Android, iOS y Windows. No hay necesidad de conectarse a la red para descargar. Simplemente debe seleccionar un icono y arrastrarlo a su editor preferido. Incluso puede cambiar directamente el color y el tamaño del icono sin iniciar sesión (excepto para png256 y png512, que requieren inicio de sesión para acceder). Icons8 soporta PNG, SVG, PDF y EPS.

5. Iconninja

Precio: gratis

Formato : SVG / PNG

Descargar :http://www.iconninja.com

iconninja

Icon Ninja es un motor de búsqueda que admite casi 1 millón de materiales de iconos gratuitos. Es compatible con la búsqueda de palabras clave. Todos los materiales proporcionan información detallada como formato, ancho, altura, tamaño de archivo, etc., lo que los hace muy adecuados para el uso de ingenieros de aplicaciones o diseñadores de PPT. Los materiales están disponibles en PNG y SVG.

Como utilizar iconos en SVG

En la actualidad, muchos recursos de iconos vectoriales deben combinarse con herramientas como Adobe Illustrator o CorelDraw.

Esto plantea una pregunta crítica: ¿Cómo utiliza estos recursos de íconos de alta calidad al comienzo del proceso de diseño?

¿La respuesta? Necesita una herramienta de creación de prototipos que admita la importación de iconos SVG.

Una de esas herramientas de creación de prototipos es Mockplus. Cuenta con amplios recursos de iconos vectoriales gratuitos incorporados, que se pueden utilizar como una biblioteca de iconos. Su colección de iconos vectoriales 2600+ es más que suficiente para proyectos generales. Si necesita otros estilos de iconos vectoriales, puede importar iconos externos a través del componente SVG incorporado.

Estos son los mejores recursos de iconos vectoriales gratuitos que queremos compartir con ustedes hoy. Esperamos que hagan que su flujo de trabajo sea más suave y acorten su proceso de diseño sin comprometer la calidad.

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)