Las mejores herramientas para generar patrones gratis

Las Mejores Herramientas Para Generar Patrones Gratis

 

Herramientas para generar patrones. Los diseños de patrones (patterns) son una parte a menudo olvidada del kit de herramientas del diseñador. Aunque es fácil descartar los patrones como mera decoración, a menudo pueden ser los ingredientes vitales que completan tu diseño.

Los patrones pueden mejorar las ilustraciones y proporcionar la semilla para proyectos de diseño gráfico complejos. Un sutil efecto de patrón puede animar la creación de páginas web planas, mientras que los diseños más llamativos pueden ser una obra de arte abstracta para cuando una ilustración o un arte de archivo no sea suficiente.

Hacer patrones perfectos que se vean como una pieza puede ser un reto, incluso utilizando Photoshop o Illustrator para hacer gran parte del trabajo pesado. Sin embargo, con estas fantásticas herramientas gratuitas, podrás crear rápidamente magníficos patrones que son adecuados para todo tipo de proyectos creativos.

01. Repper (herramientas para generar patrones)

Repper herramienta para crear patrones

Repper es una aplicación de pago con precios desde 4,99 libras al mes para uso personal, pero ofrece una prueba de 14 días que todo aquel con ojo necesite crear patrones. Hace que sea sorprendentemente fácil hacer bonitos patrones que se alineen perfectamente; sólo tienes que darle una imagen de origen y jugar con cualquiera de los 28 ajustes de los mosaicos, y rápidamente serás capaz de generar cualquier número de patrones perfectamente abstractos.

También hay algunos grandes efectos con los que experimentar; nos gusta especialmente la herramienta Metamorfosis, que permite hacer instantáneamente fabulosos diseños al estilo de MC Escher.

02. Patternify

Patternify

Si buscas un patrón simple para usar como fondo de tu página web, Patternify de Sacha Greif podría ser la solución. Es un generador de patrones CSS; sólo tienes que pintar algunos píxeles en una cuadrícula (de hasta 10×10 de tamaño), y Patternify lo convierte o bien en un archivo PNG que puedes descargar y colocar en mosaico, o bien en código Base64 que puedes pegar en la fuente de tu página. Los resultados no son enormemente sofisticados, pero es una excelente herramienta si quieres construir un fondo para un sitio retro.

03. Mazeletter (herramientas para generar patrones)

Mazeletter herramientas para crear patrones gratis

Me encanta este enfoque de campo abierto para la generación de patrones. Mazeletter no es tanto una herramienta como una colección de nueve fuentes libres que están diseñadas para permitirte construir complejos e infinitos patrones de mosaicos de laberinto, simplemente escribiendo un montón de letras.

Es el trabajo de Paul Cronan en Fathom Foundry, y está inspirado en su amor por los laberintos de toda la vida; cada una de las nueve fuentes tiene su propio aspecto distintivo, y tanto si construyes tus propios patrones a mano como si simplemente juegas tecleando letras en el sitio de Mazeletter, podrás construir rápidamente algunos diseños laberínticos de aspecto increíble.

04. Patterninja

Patterninja

Para crear coloridos patrones repetitivos con mucho control sobre cada elemento, el Patterninja de Sergiy Yavorsky es una herramienta brillante. Puedes construir patrones a partir de iconos ya preparados que se pueden escalar, posicionar y rotar para crear el aspecto adecuado, y también puedes subir tus propias imágenes para usarlas como elementos del patrón.

Una vez que hayas creado el patrón perfecto, es cuestión de segundos para descargar y compartir tu creación.

05. Patternizer

Patternizer

Si te gustan las rayas, entonces te va a encantar Patternizer. Es otra herramienta sencilla pero brillante que consiste en construir patrones a partir de rayas o de cuadros entrecruzados; puedes añadir tantos como quieras en capas apiladas, estableciendo el color, la rotación, la opacidad, el ancho, la separación y el desplazamiento de cada uno.

Con un poco de práctica, pronto podrás crear patrones bastante complejos a partir de los elementos más básicos, y cuando termines de construir, podrás exportar tu patrón como CSS, listo para ser añadido a cualquier sitio web.

5 populares parejas de fuentes para web de Google fonts

5 Populares Parejas De Fuentes Para Web De Google Fonts

Parejas de fuentes para web de Google fonts

Fuentes para web de Google fonts. La selección de fuentes complementarias nunca es una tarea fácil para los diseñadores web. A veces es difícil saber por dónde empezar. Si tienes problemas para crear una buena combinación de fuentes para el cuerpo y el encabezado de tu sitio web, o si sólo quieres dar un pequeño empujón en la dirección correcta, aquí tienes 5 combinaciones populares que se ven muy bien juntas.

Work Sans y Roboto (fuentes para web de Google fonts)

Work Sans y Roboto

Estas dos fuentes se llevan de maravilla. Work Sans es una fuente hecha específicamente para ser usada en tamaños grandes y medianos. Y aunque su amplio espaciado entre letras lo hace inadecuado como fuente de cuerpo, es perfecto para encabezados. Mientras tanto, Roboto fue diseñada para parecer natural y legible. Es una fuente extremadamente popular y práctica, y una que combina bien con la apariencia llamativa pero elegante de Work Sans.

Source Serif Pro y Source Sans Pro

Source Serif Pro y Source Sans Pro

¿Buscas algo un poco más sofisticado? Estas dos fuentes fueron creadas en el mismo proyecto para complementarse mutuamente. Source Serif Pro añadirá un toque de estilo a tus encabezados, mientras que Source Sans Pro, hecha con interfaces de usuario en mente, ofrece una experiencia racionalizada y fácil de leer.

Playfair Display y Montserrat

Playfair Display y Montserrat

Playfair Display se hizo con los tipos de letra tradicionales de finales del siglo XVIII en mente. Como fuente de visualización se ve mejor en los encabezados, donde añadirá un aspecto elegante y atemporal a tu sitio web. Y fusionado con la fuente de cuerpo de Montserrat, que se inspiró en los letreros de principios del siglo XX en Buenos Aires, lograrás una combinación sorprendentemente sinérgica.

Poppins y Raleway

Poppins y Raleway

Poppins es una agradable fuente geométrica basada en círculos y curvas. Funciona bien como fuente de encabezado y cuerpo debido a su versátil y hermoso diseño. Raleway, mientras tanto, está diseñada como una fuente de gran tamaño. A pesar de esto, funciona muy bien como una fuente de cuerpo con Poppins. Pruébalo; ¡te sorprenderá este improbable combinación!

Libre Baskerville y Lato (fuentes para web de Google fonts)

Libre Baskerville y Lato

Estas dos fuentes funcionan juntas porque contrastan bien. Libre Baskerville es una fuente alta y elegante con serifas, mientras que Lato es sans serif, moderna y diseñada para dar una sensación cálida y amigable. Ambas le darán mucha personalidad a tu sitio.

Combinando las mejores fuentes

Encontrar fuentes que funcionen bien juntas es un arte en sí mismo. Es importante que el encabezado y el cuerpo de las fuentes sean compatibles, ya que elegir las correctas conducirá a un diseño más armonioso. Estas 5 combinaciones de fuentes son un buen punto de partida.

Y lo mejor es que, con las fuentes de Google, son todas gratuitas y fáciles de importar a tu sitio. Empieza a usar tu combo favorito en tu proyecto actual de inmediato!

10 Ejemplos de animaciones SVG para diseñadores web

10 Ejemplos de animaciones SVG para diseñadores web

 

Las mejores animaciones SVG para diseñadores web

Animaciones SVG para diseñadores web. SVG (Scalable Vector Graphics) tiene una serie de ventajas en comparación con otros formatos de imagen utilizados en la web. En primer lugar, los SVG son escalables, por lo que pueden adaptarse a cualquier tamaño de pantalla sin pérdida de calidad. Luego, los navegadores pueden cargarlos más rápido, usando menos recursos. Y, pueden ser editados con CSS como si fueran simples elementos de HTML. Además de ser utilizado para imágenes estáticas, también puede crear animaciones impresionantes con SVG. En este artículo, he recopilado 10 ejemplos de animaciones SVG para inspirarte a usarlas también en tus propios proyectos web.

1. Become a Traveler Today (Animaciones SVG)

See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.default

Esta impresionante demo de ‘Become a Traveler Today’ de José Aguinaga es actualmente la animación SVG más popular en CodePen, y esto no es una coincidencia, ya que se ha invertido mucho trabajo en este proyecto artístico. El autor creó los gráficos con Adobe Illustrator y los exportó con el plugin SVG Export. También utilizó el preprocesador Sass para crear la animación de fotogramas clave que mueve cuidadosamente el globo alrededor de la pantalla.

Descarga este SVG desde este enlace.

2. SVG Loader Animations

See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.default

Estos cargadores puros de SVG de Nikhil Krishnan son un bonito ejemplo de cómo crear animaciones SVG adecuadas para proyectos web en el mundo real. Al igual que la demostración ‘Become a Traveler Today’, estos cargadores también utilizan el preprocesador Sass. Sin embargo, aquí, la animación es un efecto SVG nativo añadido directamente al elemento animateTransform SVG dentro de la página HTML.

Descarga este SVG desde este enlace.

3. Project Deadline Is Coming

See the Pen #2 – Project Deadline – SVG animation with CSS3 by Jonathan Silva (@jonathansilva) on CodePen.default

Este genial proyecto de animación de Jonathan Silva es escalofriante y divertido a la vez. Demuestra muy bien que realmente se pueden utilizar las animaciones SVG para cualquier tipo de proyecto creativo. Con este pequeño pero inteligente recordatorio de plazos, puedes motivar a tu equipo a cumplir con los plazos, sin ser un fastidio. Aquí, el autor creó el efecto animado usando la regla @keyframes de CSS y un poco de jQuery para establecer el tiempo.

Descarga este SVG desde este enlace.

4. SVG Text Animation Using Stroke Offset Method

See the Pen SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem) on CodePen.default

Además de las imágenes animadas, también puede utilizar animaciones SVG para crear efectos impresionantes de texto. Por ejemplo, echa un vistazo a esta bonita animación de texto de Mack Ayache. Él hace uso de simples formas SVG para crear las letras. A continuación, añade el movimiento por separado a cada letra utilizando los atributos SVG stroke-dashoffset y stroke-dasharray. Sin embargo, añade estos atributos al CSS en lugar de al elemento <svg> dentro del HTML. Él puede hacer eso porque los atributos de presentación de SVG pueden ser utilizados como propiedades CSS también.

Descarga este SVG desde este enlace.

5. Sketch Photo Animation

See the Pen Sketch Photo by Kristen Zirkler (@kristenzirkler) on CodePen.default

Esta animación de fotos exclusivas de Kristen Zirkler puede ser una gran incorporación a cualquier interfaz de usuario que muestre fotos de perfil. La autora creó el gráfico en Adobe Illustrator colocando dos capas una encima de la otra, una para su foto y otra para el camino que va alrededor de su cara. Luego, usó Sass para agregar la animación de fotogramas clave que modifica las reglas de desplazamiento-desplazamiento y opacidad.

Descarga este SVG desde este enlace.

6. Beating Heart Animation (Animaciones SVG)

See the Pen Beating Heart – CSS and SVG animation – low poly by morkett (@morkett) on CodePen.default

Si quieres ver un ejemplo de una animación SVG realmente sofisticada, echa un vistazo a la animación del corazón palpitante cuidadosamente elaborada por David Corkett. A pesar de que es un efecto complicado, no utiliza ningún tipo de JavaScript, sino que se basa únicamente en SVG y CSS. El corazón está hecho de múltiples polígonos a los que el autor añadió efectos de entrada y salida usando la regla @keyframes de CSS.

Descarga este SVG desde este enlace.

7. Pointless Rider (Animaciones SVG)

See the Pen Pointless Rider by Elliott Munoz (@elliottmunoz) on CodePen.default

Si alguna vez has querido crear un logo animado, aquí tienes un excelente ejemplo. La demo de Pointless Rider de Elliott Muñoz muestra que también puedes usar animaciones SVG para temas de marca. Por defecto, es un elegante logotipo en blanco y negro. El autor añadió el sutil efecto de animación con los elementos SVG animateTranform y animateMotion. Aquí, el CSS sólo alinea los elementos y establece los colores, pero es el SVG el que se encarga de todo el movimiento en la pantalla.

Descarga este SVG desde este enlace.

8. Sovog 404 Page (Animaciones SVG)

See the Pen Sovog 404 page by Marco Barría (@fixcl) on CodePen.default

Las páginas 404 son otra área en la que puedes poner en práctica con éxito una animación SVG. La demostración de la página Sovog 404 de Marco Barría se basa en SVG y Sass para hacer que el robot levante sus extremidades. Aunque las partes del robot son todas trayectorias SVG separadas, se mueven hacia arriba y hacia abajo con la ayuda de la transformación: rotate(); propiedad CSS, utilizada en cada trayectoria individualmente.

Descarga este SVG desde este enlace.

9. List Expand SVG Animation

See the Pen List Expand by Daniel (@daniel_wolf) on CodePen.default

Si quieres un ejemplo de una animación SVG que puedas usar fácilmente en proyectos cotidianos, aquí tienes una interesante demostración. Esta elegante animación de expansión de una lista de Daniel Wolf puede funcionar bien en cualquier aplicación móvil o web en la que se quiera mostrar información ampliada a los usuarios. De acuerdo con la descripción del autor, la clave para este efecto es «el tiempo en que los elementos se mueven en la transición». Las animaciones se basan en CSS así como en un poco de jQuery para la funcionalidad de clic.

Descarga este SVG desde este enlace.

10. SVG Animation with Sliders

See the Pen SVG animation with sliders by Kenneth Aamås (@knekk) on CodePen.default

Esta bella animación SVG de Kenneth Aamås con controles deslizantes de demostración utiliza tanto Sass como JavaScript para lograr un efecto inteligente y controlado por el usuario. Puede cambiar las dimensiones de la imagen con la ayuda de tres sliders en la parte inferior de la página. Cada slider está atado a una parte diferente de la imagen que comienza a moverse cuando el usuario cambia la posición del slider. Para esta animación, el autor utiliza la propiedad CSS de transición en lugar de las animaciones de fotogramas clave, lo que resulta en un efecto más sutil.

Descarga este SVG desde este enlace.

Si te han gustado estos efectos en CSS te invito a que leas el artículo Efecto De Burbujas Con CSS Como 7UP. y recuerda compartir este artículo en tus redes sociales 🙂

Y si quieres aprender más sobre diseño web, mi canal de Youtube

Si te apasiona el mundo del diseño y desarrollo web, tienes que suscribirte a mi canal en Youtube, verás contenidos tan chulos como este jeje 😉




Nuevas e interesantes herramientas para diseñadores web

Nuevas e interesantes herramientas para diseñadores web

 

Nuevas herramientas para diseñadores web

Herramientas para diseñadores web. Ya es hora de empezar a pensar en todos los aspectos del diseño de la nueva temporada que se utilizarán durante el próximo año. Podrían ser iconos, ilustraciones o fuentes. Este mes tenemos algunos elementos nuevos que podrían encajar en tu diseño, así como herramientas de aprendizaje e inspiración. Esto es lo nuevo para los diseñadores:

UIPrint

UIPrint es un conjunto de plantillas de dibujo para dispositivos que puedes imprimir, puedes utilizarlo con tu pen (porque a algunos de nosotros nos encanta dibujar). La colección actual incluye más de 10 marcos y cuadernos de dibujo imprimibles.

Haptics (Herramientas para diseñadores web)

Haptics (Herramientas para diseñadores web)

Haptics proporciona a los desarrolladores una forma rápida y sencilla de ver cómo son los diferentes comentarios en los modelos compatibles de iPhone y Apple Watch. Disponible sólo en el iTunes Store y requiere iOS 13.0+.

HTTP Mock

HTTP Mock te permite capturar y ver todos tus puntos finales de pruebas HTTP y HTTPS, y reescribir, redirigir o inyectar errores.

Art of Symbols

Art of Symbols

Art of Symbols es un proyecto publicado por Emotive Brand que analiza a fondo el diseño y los significados de iconos y símbolos comunes. El proyecto fue originalmente publicado día a día como un proyecto Instagram, pero ha sido compilado en un sitio web que es súper informativo y divertido de ver.

Smoother & Sharper Shadows

Smoother & Sharper Shadows

Smoother & Sharper Shadows es un tutorial que te ayudará a limpiar el aspecto de las sombras con la propiedad box-shadow CSS. Puedes tener más control sobre el aspecto de las sombras para conseguir diseños más pulidos.

CTRL+Z

CTRL+Z

CTRL+Z es un divertido flyer interactivo que puede ser una fuente de inspiración. Haz clic y arrastra para ver cómo funciona este flyer para una próxima exposición de arte.

Shape

Shape

Shape te permite personalizar el estilo, los colores y el borde de más de 1.000 iconos e ilustraciones estáticos y animados. Exportación a React, SVG y Lottie. La herramienta también incluye plantillas de interfaz de usuario para ayudarte a utilizar las colecciones de iconos.

Winning Icons

Winning Icons

Winning Icons son un conjunto de 50 vectores que celebran el éxito. Con medallas e iconos de celebración en tres estilos, esta colección está hecha para ganar. El conjunto está disponible en los formatos SVG y JPG.

Sketch Devices (Herramientas para diseñadores web)

Sketch Devices (Herramientas para diseñadores web)

Devices es un conjunto de modernas maquetas de dispositivos para Sketch actualizado por el equipo de Facebook Design. Del equipo de diseño: «Facebook soporta una audiencia diversa en todo el mundo y un conjunto de dispositivos igualmente diverso. Para enfatizar que en nuestras mofas de diseño, hemos rediseñado una gama de dispositivos para mostrar la diversidad global de las personas que utilizan nuestros productos. Cada dispositivo viene con un mapa de bits del dispositivo (con y sin sombras) y el archivo original de Sketch para ese dispositivo».

Si te han gustado estos recursos, te recomiendo que visites el siguiente artículo: Bibliotecas y herramientas de animación CSS.

Diseño web minimalista: 10 ejemplos increibles

Diseño web minimalista: 12 ejemplos increibles

 

El diseño web minimalista demuestra que menos puede ser más

Diseño web minimalista. El diseño minimalista de páginas web es un arte subestimado. Todos hemos escuchado el dicho «Menos es más», pero es un principio que a menudo es más fácil decirlo que hacerlo. A medida que las progresiones de la tecnología abren nuevas posibilidades en el diseño de una web, se hace cada vez más difícil resistirse a añadir algunas florituras de diseño.

El diseño minimalista de páginas web beneficia a los usuarios en forma de tiempos de carga más rápidos y mejor compatibilidad entre tamaños de pantalla. Es más, un diseño de interfaz de usuario simple está en sintonía con la navegación móvil, sin dañar el escritorio o la experiencia del usuario.

La filosofía minimalista se centra en la idea de que hay que diseñar en torno al contenido. En términos web, el diseñador comienza con el contenido en general y luego construye la interfaz suficiente para que los usuarios puedan identificar su objetivo y navegar hacia él fácilmente.

La estética minimalista es la representación visual de esa filosofía. El diseño web minimalista utiliza mucho espacio blanco – o al menos uniformemente coloreado. Pero no confundas despejado con aburrido. Debe elegir tus diseños con cuidado, de lo contrario, tu restringida paleta de elementos de diseño parecerá aburrida en lugar de elegante.

A continuación, he recopilado mis diseños web minimalistas favoritos para inspirarte a hacer más haciendo menos.

01. HalloBasis

HalloBasis

El estudio de diseño de Dusseldorf HalloBasis se enorgullece de entregar proyectos que se comunican bien en nombre de sus clientes. Este sitio web en WordPress actúa como el sitio de portafolio online del estudio, y es un brillante ejemplo de diseño web minimalista hecho de forma diferente.

El sitio hace una apuesta audaz con sólo unos pocos elementos, gracias a su estética sobredimensionada, que tiene la ventaja añadida de facilitar la accesibilidad. De hecho, es posible que se le perdone por pensar que la función de zoom de su navegador elegido está al máximo, tal es el tamaño de la fuente 17.5vw para los titulares de 770px de ancho mínimo. Desde el punto de vista tipográfico, es grande, con la fuente Messina Sans que se adapta a ese tamaño y garantiza la legibilidad. Lo que es realmente refrescante es que esto se aplica tanto a los enlaces de navegación como a los avisos personalizados de GDPR para aceptar cookies. También es muy fácil alternar entre las traducciones al alemán y al inglés usando los botones de la pantalla principal.

02. Jazz FM

Jazz FM diseño web minimalista

Esta colorida página web para una emisora de radio con sede en Bucarest hace un gran trabajo al dejar que la música hable por sí misma. A primera vista, Jazz FM, simplemente invita a los visitantes a retransmitir la emisión en directo a través de un botón de reproducción triangular que llena la mitad de la pantalla. También tenemos un logo y un display de la pista Now Playing, pero es muy llamativo gracias a la combinación de negro y amarillo. Esto es sólo el encabezado, sin embargo, la estructura de una sola página larga continúa con mucha más vitalidad – aunque siempre con el diseño miminalista del sitio en mente.

Lo más notable es que hay una gran cantidad de magníficas ilustraciones de SVG que, por supuesto, se escalan con una nitidez asombrosa, sin importar el tamaño de la pantalla. La tipografía vuelve a ir a lo grande, gracias a una economía de texto ahorrativa, sobre todo como etiquetas de cabecera que detallan dónde más se puede disfrutar del Jazz FM. Otras características de interés incluyen un programa limpio y claro de siete días, cinta de sintonía FM con desplazamiento e incluso una guía de festivales de jazz.

03. Uber Sign Language

Uber Sign Language

En línea con su filosofía de accesibilidad, Uber ha creado un sitio web dedicado a enseñar a sus clientes el lenguaje básico de signos, para que puedan interactuar con los conductores con discapacidad auditiva. Uber Sign Language es una clase magistral en diseño con moderación. Muestra a los usuarios cómo firmar frases comunes simples (sí, no, gire a la izquierda, etc.), o incluso su nombre, a través de vídeos cortos y sencillos. Hay muy poca explicación; el contenido habla por sí mismo, lo que demuestra que no se necesitan palabras inteligentes para captar un mensaje importante de la marca.

04. Evoulve

Evoulve diseño minimalista de paginas web

Evoulve es una empresa dedicada a convertir tecnologías emergentes en productos viables. El diseño de la página web tiene un aire hipnotizador y futurista. Hay muy pocos elementos en la pantalla: simples anotaciones de texto y muy pocas opciones de navegación, con el telón de fondo de un globo terráqueo que rota lentamente y un cielo estrellado. Sin embargo, cada uno de ellos ha sido diseñado perfectamente, con sutiles animaciones CSS que amplían el sentido de la magia y crean un ambiente de descubrimiento.

05. Tinker (diseño web minimalista)

Tinker diseño multimedia

Tinker es una marca de relojes con un concepto simple: los clientes pueden elegir el tamaño de la esfera, el color de la correa y el metal, en cualquier combinación. No hay características o detalles innecesarios. La interfaz de usuario del sitio web de la empresa deja claro el concepto; los usuarios pueden seleccionar fácilmente su combinación ideal de entre las limitadas opciones disponibles.

06. Leen Heyne

Leen Heyne

Además de sus joyas, el logotipo monocromo de Leen Heyne y el nombre de la empresa son los únicos elementos visuales significativos de su página web. La extensión del espacio en blanco circundante hace que sea una apuesta segura para que los ojos del usuario se sientan atraídos por los productos.

07. We Ain’t Plastic

We Ain't Plastic

El contraste es otra táctica visual útil para mantener los diseños minimalistas interesantes. El sitio web del ingeniero alemán de UX Roland Lösslein We Ain’t Plastic establece un marcado contraste de tamaño entre la imagen central, el texto y los iconos de arriba.

08. Nua Bikes

El sitio de Nua Bikes es engañosamente minimalista, porque en realidad hay muchos elementos en la pantalla. Sin embargo, al condensar el texto y maximizar el espacio en blanco, la empresa puede llamar la atención sobre su producto, la bicicleta.

09. Sendamessage.to

Sendamessage diseño minimalista web

Divertido, si es posible, Sendamessage.to permite a la gente personalizar los mensajes a sus amigos con un gesto con la mano. El fondo negro y estéril añade potencia a la imagen principal y a las letras blancas y negritas del texto.

10. Maaemo (diseño web minimalista)

Maaemo arte minimalista

El sitio web del restaurante noruego Maaemo, con tres estrellas Michelín, utiliza el minimalismo para crear un sentimiento de clase. El tratamiento visual es perfecto para contar historias, como lo demuestra el sitio con fotos en alta definición de platos que se están creando.

Si te ha parecido interesante este artículo, te recomiento leer 5 diseños de tiendas online para inspirarte, y sobre todo, recuerda compartirlo en tus redes sociales 🙂

Linecons – Pack de Iconos vectoriales Gratuitos

Pack de Iconos vectoriales Gratuitos

 

Dale un toque profesional a tus aplicaciones con esta colección de iconos gratuitos

Iconos vectoriales gratuitos. Linecons es un pack de iconos vectoriales gratuitos sorprendentes. El pack contiene 48 iconos totalmente escalables y con estilo de contorno. Puedes utilizarlos para la creación de interfaces web y móviles. Se adaptan a cualquier diseño y a cualquier plantilla web.

Cada uno de diseñado minuciosamente en este nuevo y específico estilo. Si necesitas iconos profesionales de píxeles perfectos, usa Linecons – gratis, incluso para proyectos comerciales. Descarga estos iconos vectoriales totalmente gratis y dale a tu proyecto un aspecto profesional.

Cada icono está disponible en los siguientes formatos:

Primero, Fuente web (HTML/CSS)
Segundo, PDF
Tercero, AI (Adobe Illustrator)
En cuarto lugar, PSD (Adobe Photoshop)
En quinto lugar, PNG (tamaño original y 512×512 px)
Y para finalizar, SVG (Archivo Vectorial Universal)

Los vectores gratis incluyen: Nube, Corazón, Estrella, TV, Sonido, Vídeo, Papelera, Usuario, Llave, Buscar, Configuración, Cámara, Etiqueta, Cerradura, Bombilla, Bolígrafo, Diamante, Pantalla, Ubicación, Ojo, Burbuja, Copa, Teléfono, Noticias, Correo, Como, Pila, Foto, Nota, Reloj, Avión de papel, Params, Billetes de banco, Datos, Música, Megáfono, Estudio, Comida, Laboratorio, Camiseta, Bomberos, Clip, Compra, Tienda, Calendario, Billetera, Vestierón, Camión, Mundo.

Paquete de Iconos de Vectores Gratuitos

Descarga los iconos haciendo click en el siguiente botón:
Descargar iconos

Si te ha gustado este artículo, puedes visitar y descargar este otro Pack de iconos de transporte gratis en svg y png 🙂

 

Generadores gratuitos para diseñadores web

Generadores gratuitos para diseñadores web

Conoce estos generadores gratuitos para diseño web

Generadores gratuitos para diseñadores ¿Está buscando una manera de abandonar la rutina y tener más tiempo para el diseño y la creatividad de tu diseño web?

La dura realidad es que cada proyecto implica tareas aburridas y mundanas que hay que hacer si o si. Pero esto no significa que debas aburrirte hasta la muerte, hay una salida. Utiliza la ayuda de servicios y generadores online creados específicamente para situaciones como UPNG, Lists o Font Generator. Todas estas pequeñas herramientas realizan esas tediosas tareas.

UPNG (Generador gratuito para imagenes png)

UPNG (Generador gratuito para imagenes png)

UPNG se ocupa de la tarea más trivial que existe – minimiza las imágenes en formato PNG. Reduce y optimiza las imágenes tratando de encontrar un equilibrio óptimo entre la calidad y el tamaño. Como resultado, no verás mucha diferencia entre la imagen original y su versión minimizada; pero tu página web se cargará más rápido.

POPULATE (Generador gratuito de textos ficticios)

POPULATE (Generador gratuito de textos ficticios)

Populate te proporciona textos ficticios para tus bocetos. A diferencia de Lorem Ipsum, estos trozos de texto son legibles y comprensibles, y parecen contenido real. Cubre 10 categorías populares: negocios, comunicación, diseño, alimentación, finanzas y otras.

Font Generator (Generador gratuito para combinar fuentes)

Font Generator (Generador gratuito para combinar fuentes)

Como su nombre indica, Font Generator es una herramienta que funciona con fuentes. Mezcla y combina fuentes de la enorme base de datos de Google y ofrece a los usuarios combinaciones únicas. Simplemente especifica las fuentes de inicio para el título, los detalles y el cuerpo (o utiliza una función aleatoria) y la herramienta generará variaciones.

Fontjoy y Mixfont (Generadores gratuitos para combinar textos)

Fontjoy (Generadores gratuitos para combinar textos)

Como ya hemos hablado de los generadores de fuentes, aquí tienes dos más. Aquí tienes varias soluciones interesantes: Fontjoy y Mixfont. Ambas te permiten combinar diferentes tipos de letra para encontrar los que mejor se adapten a sus necesidades.

Mixfont (Generadores gratuitos para combinar textos)

Mixfont sólo muestra las opciones seleccionadas, mientras que Fontjoy permite bloquear las fuentes y probarlas utilizando tu propio texto.

Generadores gratuitos para títulos

Otras herramientas útiles para tratar con la tipografía son Bungee y Long shadow generator. Estas dos herramientas transforman títulos y eslóganes en piezas que llaman la atención.

Bungee (Generador  gratuito para títulos)

Bungee (Generador  gratuito para títulos)

Bungee es una herramienta online para crear tipografías con un estilo propio de la moda. Tiene una docena de magníficos tipos de letra que se pueden ajustar con precisión para conseguir un resultado espectacular. Puedes establecer texto, tema, color, fondo, letras alternativas y orientación.

Long shadow generator (Generador  gratuito para títulos)

Long shadow generator (Generador  gratuito para títulos)

Long shadow generator es un pequeño patio de recreo donde se puede experimentar con las sombras de texto. Modifica los aspectos principales y copia el código resultante para aplicarlo al título deseado.

Responsive Font Calculator (Generador  gratuito para títulos)

Responsive Font Calculator (Generador  gratuito para títulos)

El último en esta subsección es Responsive Font Calculator. Es para aquellos que se preocupan por el aspecto responsive de la tipografía en un sitio web. Esta pequeña calculadora proporciona una propiedad calc() apropiada que fuerza al texto a escalar suavemente y con gracia.

Generadores gratuitos para colores

Otra parte muy importante donde los generadores son verdaderos salvavidas es en los colores. Las paletas de colores mal elegidas pueden alterar la armonía de un proyecto e incluso transmitir el mensaje equivocado. Evita esto y prueba Random Material Palette Generator o Coolors.

Random Material Palette Generator

Random Material Palette Generator

La primera solución se basa en los principios del diseño de Material Design. Ofrece diferentes variantes de bonitos esquemas de tres tonos. Puedes aplicar la solución generada al texto, la imagen, una plantilla de tarjeta o una plantilla vertical para evaluar su utilidad.

Coolors (Generador gratuito de color)

Coolors (Generador gratuito de color)

Coolors es una herramienta profesional que genera paletas de colores de cinco tonos y te permite ajustar la saturación, el brillo, el tono y la temperatura. El resultado está disponible en cuatro formatos populares: PNG, SCSS, PDF y SVG.

Espero que te sirvan estar herramientas,  pronto volveremos con más, y una recomendación, si te han gustado estas herramientas no olvides ver Bibliotecas Y Herramientas De Animación CSS.

Los 12 mejores sitios web para descargar imágenes premium

descargar imágenes premium

 

Los mejores sitios para encontrar fotografías de calidad para tus proyectos y descargar imágenes premium.

Descargar imágenes premium. Puede ser muy frustrante cuando se tiene un gran idea para un proyecto y no encuentras la fotografía perfecta porque no se tiene el presupuesto para encargar el trabajo a un fotógrafo. Hay varias maneras de manejar esta situación: Puedes realizar la fotografía tu mismo, tratar de encontrar más dinero para el proyecto, o, podrías utilizar un sitio web de arte de valores.

Algunas personas imaginan que tales páginas web estarán llenos de clichés sosos y cansados, pero este ya no es el caso. En su lugar, los sitios web de fotografía de stock ahora ofrecen una enorme y ecléctica variedad de fotografías e ilustraciones en varios estilos y tamaños, creadas por miles de talentosos fotógrafos. Aunque, por supuesto, es poco probable que te gusten todas las imágenes que aparecen en ellas.

Hay muchas páginas de fotografías en internet, desde compañías más grandes donde la ilustración es sólo una parte de su oferta, hasta sitios más pequeños que se enfocan puramente en fotografías. A continuación encontrarás una lista de algunos de los mejores sitios para que los visites. Espero que encuentres lo que buscas.

01. Adobe Stock

Adobe Stock descargar imágenes premium

Adobe Stock te permite probar instantáneamente imágenes en sus aplicaciones CC

Adobe Stock es tan hábil como uno esperaría que fuera. Se integra con todas sus aplicaciones CC, lo que facilita la previsualización de una fotografía de stock o vector dentro de tus diseños y, a continuación, la licencia se ajusta a tus necesidades. Repleto de fotografías, vectores e ilustraciones de alta calidad, es también una gran plataforma para vender tus propios archivos. Si deseas realizar una prueba, Adobe ofrece una prueba gratuita de 30 días con 10 imágenes.

02. Getty Images

Getty Images descargar imágenes premium

Getty Images es muy conocido por sus fotos, pero también por su gran cantidad de ilustraciones.

Getty Images es enorme. Se trata principalmente de un portal de fotografía, pero su biblioteca también incluye cientos de miles de ilustraciones, todas las cuales se pueden buscar a través de un panel de búsqueda completo y fácil de usar, y que cubre todos los temas que se te ocurran. La oferta de fotografía tiende a inclinarse más hacia un estilo limpio y contemporáneo, y es fácil filtrar los resultados por factores como el color y el estilo.

03. iStock

iStock descargar imágenes premium

iStock tiene una amplia gama de fotografías

iStock es una versión micro-stock más pequeña de su hermana mayor, Getty Images. Esto significa que iStock tiene algunas de las mismas características que Getty Images, así que puedes filtrar los resultados de búsqueda por color, por ejemplo. También puede encontrar el espacio vacío que buscas en el diseño de texto y mostrar los resultados en consecuencia.

Esto es enormemente refrescante dada la cantidad de tiempo que a veces puede tomar encontrar el hilo correcto. Las ilustraciones de iStock están un poco más basadas en vectores que la mayoría de las de esta lista. Pero su área http://www.shutterstock.com/?utm_medium=Affiliate&utm_source=10078&utm_campaign=Skimbit%20Ltd.&irgwc=1&tpl=10078-42119de distribución es extensa y relativamente barata.

04. Shutterstock

fotografías en Shutterstock descargar imágenes premium

No hay sólo fotografías en Shutterstock, también hay muchas ilustraciones.

Aunque puedas pensar en ella como una biblioteca de fotografía, Shutterstock ofrece una gran cantidad de ilustraciones entre su colección de imágenes en constante expansión. Ya sea que busques vectores elegantes, ilustraciones llamativas o simples imágenes prediseñadas, deberías poder encontrar fácilmente lo que estás buscando con facilidad.

05. YouWorkForThem

YouWorkForThem

La misión de YouWorkForThem es ser la mejor fuente de recursos de diseño del mundo.

YouWorkForThem ha estado trabajando en un nicho único, orientados al diseñador durante décadas (por no mencionar las fuentes y las fotos también). El servicio proporciona actualmente más de 240.515 gráficos de más de 484 artistas y diseñadores, todos con licencias fáciles y asequibles. También hay disponibles opciones de licencias personalizadas.

06. Old Book Illustrations

Old Book Illustrations

Aquí encontrarás fotografías antiguas escaneadas de libros antiguos

Si estás buscando un estilo de imágenes antiguas, este sitio es genial – y también gratuito. Todas las imágenes son escaneadas de libros antiguos y de dominio público, por lo que no hay derechos que tratar. Es una estupenda colección: las categorías incluyen plantas, animales, edificios y monumentos, ornamentos y patrones.

07. The British Library

The British Library

Una enorme colección de más de un millón de imágenes

La Biblioteca Británica ha compartido más de un millón de imágenes de esta colección de dominio público en Flickr. Gran parte de ella son ilustraciones y obras de arte al viejo estilo; también hay miles de fotografías, mapas, anuncios vintage, dibujos botánicos, historietas vintage y otras imágenes interesantes.

08. Flickr: The Commons

Flickr: The Commons

The Commons comparte gemas ocultas de todo el mundo

Este proyecto pretende reunir y organizar las obras de arte y las colecciones fotográficas puestas a disposición del público por diversas instituciones, como universidades, museos y bibliotecas.

09. Stock Illustrations

Stock Illustrations

Me encanta la sección de animales de este sitio

La pista está en el nombre. Stock Illustrations presenta ilustraciones de stock contemporáneas adecuadas para el mundo de la publicidad, el diseño gráfico y la edición. Tanto si buscas un estilo, un tema o una obra de un artista en particular, hay una gran función de búsqueda que te ayudará a encontrar rápidamente las imágenes adecuadas para tu proyecto.

10. Ikon

Ikon

Ikon alberga una amplia gama de arte en stock, que se puede ver por estilo y tema.

El sitio web de Ikon parece bastante misterioso – hay demasiado estilo sobre la usabilidad, así que la navegación lleva algún tiempo. Pero sí alberga una buena gama de arte de archivo, visible por estilo, que incluye ilustración fotográfica, arte vectorial, digital y lineal, y temas que van desde la belleza y la moda, hasta el transporte y los personajes.

11. Image Zoo

Image Zoo

La fotografía de Image Zoo es más tradicional que la mayoría de los sitios.

Image Zoo tiene una gran colección de ilustraciones tradicionales, que se pueden buscar por palabra clave, nombre del artista o tema (lo que significa en realidad el nombre de la imagen individual). Las imágenes son, en general, menos contemporáneas que algunos de los otros sitios de ilustraciones que se enumeran aquí, y algunas recuerdan ligeramente a las ilustraciones tradicionales de los libros de texto educativos.

12. The iSpot

The iSpot

The iSpot cuenta con ilustraciones de una amplia gama de talentosos artistas

El sitio web de iSpot ofrece un gran número de ilustraciones tradicionales, por lo que es improbable que encuentre fotografías aquí. Se cubren muchos estilos diferentes, de una amplia gama de artistas con mucho talento. Puedes buscar ilustraciones utilizando palabras clave por categoría, tema, estilo y medio, así como el nombre del artista y la fecha en que fue subido.

Descargar imágenes premium

Si te ha gustado este artículo, pero no tienes presupuesto ni para unas fotografías o ilustraciones premium, te recomiendo que visites este otro, Los 5 mejores recursos gratuitos de iconos vectoriales gratis en 2018, y ya sabes, no olvides compartir los artículos!

Pack de iconos de transporte gratis en svg y png

Iconos de transporte

 

Esta semana te traigo un fantástico conjunto de iconos gratis. Diseñado por mis amigos de Flaticon, tenemos un pack de iconos de transporte gratis para ti!

Los 50 iconos de transporte gratuito son 100% personalizables, todos los colores son editables y están disponibles en formato SVG y PNG. El pack incluye iconos para coches, autobuses, bicicletas, camiones, autobombas, ambulancias, motocicletas, ciclomotores, trenes, barcos e incluso globos aerostáticos, dirigibles y naves espaciales. Por supuesto, eres libre de utilizar este pack de iconos tanto en tus proyectos personales como comerciales.

Para que proyectos puedes utilizar estos iconos

Este pack de iconos de transporte gratis tiene muchas salidas, por ejemplo, si tienes una tienda online con diferentes métodos de de envío y a diferentes países, puedes utilizarlos según en transporte que necesites para realizar esos envíos con un diseño profesional.

También puedes utilizarlos en otros tipos de proyectos, si estás actualmente realizando una web de anuncios clasificados para la compra y venta de vehículos, si tienes una agencia de transporte o una aplicación para compartir coche, por supuesto se puede utilizar en más proyectos, estas son solo unas ideas.

Previsualiza y descarga la colección completa a continuación….

Vista previa del paquete de iconos de transporte gratis

Iconos de transporte gratis

 

Descargar iconos

Si buscas más iconos gratuitos, te recomiendo que te pases por este artículo donde te explico en qué sitios puedes encontrar iconos de gran calidad para tus poryectos 🙂

5 diseños de tiendas online para inspirarte

5 diseños de tiendas online para inspirarte

 

Estos 5 diseños de tiendas online demuestran que comprar puede ser maravilloso.

Diseñar un ecommerce es un gran negocio, y ahora es más fácil que nunca para las empresas grandes y pequeñas lanzar una tienda online.

Un software de comercio electrónico, como prestashop, que ofrece una increíble biblioteca de plantillas personalizables, facilita la creación de experiencias de compras online hermosas y altamente envolventes.

Aquí hay te dejo 5 diseños de tiendas online que han llamado mi atención. Así que sigue leyendo para obtener una inspiración de diseño web superior…

01. notanotherbill.com

ecommerce Not Another Bill

Not Another Bill cuenta con un filtro de lenguaje natural para que sea más fácil encontrar regalos

La idea detrás de la reconstrucción de este sitio fue cambiar la dirección de Not Another Bill de un servicio de suscripción de regalo a una tienda online.

Esta tienda online utiliza fotografía contemporánea que no se vería fuera de lugar en una revista de estilo de vida creativa. Estas fotos se ven mejor que las imágenes de fondo completo. En ningún momento ralentizan el impresionante tiempo de carga del sitio, lo que brinda una experiencia positiva al cliente.

Característica inspiradora: el filtro de lenguaje natural hace que sea fácil encontrar el tipo de regalo o producto que buscas.

02. El Stand de Parfait

diseños de tiendas online El Stand de Parfait

Este delicioso paginador de un solo uso utiliza movimiento y color para lograr un efecto impresionante.

Este fantástico sitio para una pequeña tienda de parfait cerca de Tokio parece simple a primera vista, pero en una inspección más cercana es un diseño engañosamente complejo de una página que utiliza un movimiento sutil para convertir un diseño plano en un asunto único y sorprendentemente dimensional.

El video en bucle también se usa de manera inteligente, recortado en círculos, mostrando la elaboración de un lujoso postre de chocolate. Las fotos ultraestilizadas del restaurante y la comida completan la experiencia, con capas superpuestas de imágenes animadas en un tiempo escalonado. Es un tratamiento divertido e inspirador.

Característica inspiradora: los botones flotantes libres orbitan alrededor de los parfaits y se vinculan con animaciones de pantalla completa construidas con maestría que hacen la transición a vistas de detalles modales.

03. Simply Chocolate

ecommerce Simply Chocolate

Cada producto en este sitio tiene mucho espacio para brillar.

Simply Chocolate es una compañía de chocolate con sede en Copenhague, Dinamarca. Un diseño de sitio vibrante y divertido le da a cada producto mucho espacio para brillar. Un efecto de paralaje significa que a medida que el usuario se desplaza hacia abajo, una barra de chocolate flota sobre el contenido, se desenrolla y se rompe en trozos.

Mientras tanto, los ingredientes de cada barra, rodajas de coco, almendras, hojas de menta,  animan suavemente en el fondo. Estos efectos en la cara funcionan porque solo se muestra una pequeña información en segundo plano al mismo tiempo, por lo que no se vuelve abrumadora.

Característica inspiradora: los efectos de paralaje ponen a cada producto al frente y al centro.

04. Kvell

ecommerce Kvell diseños de tiendas online

Cada sección está cuidadosamente dirigida por el arte.

Kvell es una marca de artículos para el hogar contemporánea con sede en Canadá, y su sitio web es realmente una  belleza. La página de inicio muestra cada rango in situ, con el usuario navegando haciendo clic en la barra de desplazamiento horizontal.

También pueden sumergirse para explorar cada rango con más detalle (la navegación en este punto cambia a vertical, pero el estilo sigue siendo el mismo). Los colores brillantes, la tipografía en negrita y las tomas de productos equilibradas que se usan en todas partes hacen de esta colección una alegría para explorar.

Característica inspiradora: se utiliza una dirección de arte consistente y atractiva.

05. Nordstrom

ecommerce Nordstrom

Los filtros de productos ayudan a los compradores a reducir lo que están buscando

Para un sitio con una amplia y variada gama de productos, desde moda hasta muebles y utensilios de cocina, el desafío es asegurarse de que sus usuarios puedan encontrar lo que están buscando.

Donde Nordstom se destaca es en sus opciones de filtrado de productos. Después de elegir el área general en la que están interesados ​​a través de la navegación del encabezado principal, los usuarios pueden restringir su búsqueda tanto como quieran usando más filtros que se muestran en el lado izquierdo. Características como estas son esenciales para compras felices.

Característica inspiradora: excelentes opciones de filtrado de productos.

Espero que te haya gustado esta selección de 5 diseños de tiendas online, si conoces alguna tienda online que te haya sorprendido no dudes en dejar tu comentario 🙂

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