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.

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 😉




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 🙂

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 🙂

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.

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.

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