Frogx Three

Diseño Web

Artículos sobre diseño web, tips para SEO, galerias de diseño web para inspirarnos, optimización de paginas web, recursos web gratis, etc.

Inspiración: 10 Diseños de paginas web – Noviembre 2014

diseños web diciembre 2014 cover

Ya se nos esta acabando el año y quiero seguir mejorando Frogx Three en cuanto a diseño y también mucho en cuanto a contenido, la idea es compartir con todos muchas dosis de inspiración en relación a varios temas, y por supuesto que me gustaría conocer sus consejos y opiniones eso sería genial porque al final lo que comparto en este blog es para todos un recurso útil, por ello a partir de hoy empezaremos con una nueva serie post mensuales con galerías de diseños de paginas web con el fin de compartir un poco inspiración para diseñadores web. El fin de estas galerías es que tu como diseñador de paginas web te atrevas a realizar diseños diferentes, darte cuenta que hay cosas increíbles que se pueden crear y que en diseño web como en cualquier especialidad de diseño casi no existen limites. El único limite que tiene el diseño es......

Seguir leyendo 31

Tumult Hype Pro el futuro de la animación con HTML5/CSS3

tumul hype professional

Tumult la empresa que desarrolla  Hype una de las mejores aplicaciones para crear animaciones web y diseños de paginas web en Mac, Tumult esta preparando el lanzamiento de una nueva versión de su poderos App, se trata de Hype Pro el futuro de la animación con HTML/CSS3 o al menos así lo están dando a conocer, entre las características que promete Tumult para la nueva versión de Hype, aparte de la posibilidad de crear animaciones para Web, Hype Pro incluye un nuevo método para crear paginas web responsivas de forma intuitiva y muy sencilla sin necesidad de programar. El nuevo Hype Pro también te permitirá crear animaciones con movimientos naturales sin utilizar keyframes o código, simplemente utilizando las funciones que el mismo programa ofrece, también ofrece una forma mas sencilla para agregar interacción y gestión de eventos para controlar las animaciones, perfecto para crear juegos HTML5 para móviles con eventos Touch, otra......

Seguir leyendo 33

Blocs la App para diseñar paginas web responsivas sin programar

blocs app

Les presento Blocs App una nueva e increíble App para diseñar paginas web responsivas sin programar, así es no necesitas saber nada de programación para utilizar Blocs App y crear paginas web que sean responsivas, bonitas y con optimización para SEO, esta fantástica App para Mac es una de las nuevas aplicaciones que se están convirtiendo en toda una tendencia en Internet y que permiten diseñar paginas web sin tener que ser un programador, eso si deberás conocer los conceptos básicos sobre diseño web para que tu pagina sea un éxito, no bastan con diseñar y no programar, Blocs App no hace magia solo te ayuda a ser mas productivo en tu trabajo. A pesar de que Blocs App dice ser la App definitiva para los diseñadores web que no saben programar, la verdad es que saber un poco de programación mínimo lo básico de HTML5, CSS3 y JavaScript es necesario......

Seguir leyendo 52

Underscores, generador de plantillas base responsivas para WordPress

underscores

Underscores o _S es una plantilla base para WordPress la cual podemos utilizar para implementar a partir de ella nuestros diseños web y tomarla como base para crear los diseños de nuestra pagina web utilizando WordPress como motor principal, en el sitio web que enlazo al final de estas lineas podrán encontrar un generador de plantillas base responsivas para WordPress gratuito el cual genera plantillas basado en la plantilla Underscores, la cual es Open Source. El sitio te genera un archivo Zip con la plantilla underscore con soporte responsivo el cual puedes utilizar para tu pagina web, en el sitio antes de generar puedes personaliza el nombre de la plantilla, el nombre del autor, la URL del autor, la descripción e incluso puedes solicitar que en el paquete se incluya un archivo SASS para manejar los estilos CSS utilizando SASS. Este generador de plantillas para WordPress es gratuito, y seguro que les......

Seguir leyendo 37

Inspiración: Diseño web para Discovery Channel

diseno web discovery channel cover

Les dejo un poco de inspiración para este fin de semana, se trata de la propuesta de diseño web para Discovery Channel que hizo la agencia Huge Inc. de Rio de Janeiro Brasil el año pasado para ganar se cuenta de esta gran marca, lo cual consiguieron, la propuesta de diseño que hizo el estudio fue utilizada por los sitios de Discover Channel regionales, y algunos aun la utilizan sin embargo el sitio de Discovery Channel de los Estados Unidos utiliza un diseño totalmente diferente. Los sitios regionales de Discovery utilizan la propuesta de diseño que hizo en su momento el estudio Huge Inc. y que pueden ver completamente en la siguiente imagen, aunque la realidad de la propuesta con la versión que utilizan los sitios de Discovery es otra pues en la practica el diseño de las paginas web de Discovery tiene algunas variaciones en su diseño y estructura,......

Seguir leyendo 25

Tips: El arte de las animaciones en interfaces web

15 noviembre, 2014 Enlace Corto

css animations

Llevamos muchos tiempo hablando del diseño de interfaces y de la importancia que tienen las animaciones en interfaces web aprovechando las capacidades que ofrece CSS3, HTML5 y JavaScript combinados logrando enganchar y enamorar a tus visitantes con algunas animaciones simples y sutiles que dan una sensación de innovación y comodidad al navegar a través de una pagina web o cualquier interface de una aplicación sea cual sea el medio en el que la estemos utilizando. Por ello quiero compartirles un enlace que me encontré muy interesante y que todos deberías leer, es una pagina web en forma de diapositivas que nos ofrece muchos tips sobre el arte de las animaciones de interfaces, así como muchos recursos para utilizar de forma inteligentes estos recursos para diseñadores de interfaces  web y móviles, en el documento encontrarán desde Frameworks CSS y JavaScript recomendados, ejemplos de código, recomendaciones de su uso e incluso algunos......

Seguir leyendo 33

Tutorial para crear mockups 3D interactivos con CSS3 y jQuery

3d-animated-mockup-featured-new

Si eres diseñadores sabras lo importante que puede llegar a ser aplicar un poco de animación en una pagina web, y si tus usuarios tiene interacción con eventos de tu sitio para provocar animación mejor, pero y si combinas todo eso y creas formas interactivas para hacer demostraciones que permitan a tus visitantes y interactuar y que tengan un entorno visual agradable, bueno esto seria increíble. Eso es lo que podrás lograr si sigues el siguiente tutorial que estoy compartiendo con ustedes, y que si bien esta en Ingles bien que vale la pena esforzarse un poco en comprenderlo. Este tutorial para diseñadores web te permitirá crear mockups 3D interactivos con CSS3 y jQuery, una combinación que bien utilizada y aprovechada es una bomba, en el enlace que les comparto al final podrán encontrar el tutorial completo que les explica como funciona y como utilizarlos, también podrán descargar los archivos......

Seguir leyendo 7

Atomic, App colaborativa para diseño de interfaces

atomic

Les quiero presentar Atomic una App colaborativa para diseño de interfaces que me encontré ayer, no se desesperen por probarla pues esta aplicación aun esta en desarrollo y no hay una fecha prevista para su lanzamiento al publico o su primera Beta pero te puedes suscribir a la lista de correo de Atomic para ser uno de los primeros en recibir la noticia de su lanzamiento, Atomic será una App Online sencilla, pero con características muy útiles que te permitirán trabajar en equipo, algunas de las principales características que ofrece Atomic son: Crear diseños de interfaces con interacción lo que te permitirá demostrar el funcionamiento de las principales funciones de tu App o al menos su navegación. Compartir tus diseños por medio de enlaces, evitando la necesidad de compartir pesados archivos. Panel de comentarios para recibir Feedback de tus colegas o clientes con los que compartas los avances de tu diseño.......

Seguir leyendo 15

MixitUp, Plugin jQuery para filtrar y reordenar grids dinámicamente

mixitup

Me encontré un plugin jQuery genial que quiero compartir con ustedes se llama MixitUp y creo que lo aplicare en algún momento al blog, MixitUp es un plugin jQuery que te permite agregar dinamismo al grid de tu pagina web, el plugin te permite filtrar y reordenar bloques en un grid de forma dinámica y con animación agregando un toque visual y bastante interesante a la tu diseño, de tal manera que puedes ofrecer una opción interesante de filtrado de datos con un poco de interacción y animación que harían mas cómoda y agradable la interacción de los usuarios que visitan tu pagina con la información que ellos encuentran en tu sitio. El plugin es gratuito, y lo puedes utilizar sin problemas en cualquiera de tus paginas web, en el sitio hace referencia a una licencia comercial pero esta es solo si tienes intensiones de incluir MixitUp en un plantilla......

Seguir leyendo 26

Script para agregar animaciones a imágenes SVG en tu pagina web

vivus

La semana pasada les hable de un sitio donde podían encontrar un plugin para animar iconos para web, aquellos iconos estaban construidos utilizando imágenes SVG y al menos en aquel sitio los podían integrar de manera sencilla en una pagina web utilizando jQuery, en este nuevo recurso para diseñadores les vengo a compartir Vivus, un script JavaScript para agregar animaciones a imágenes SVG aprovechando la propiedad strokeDashoffset que ofrece CSS3 la cual utiliza el script para crear una animación de dibujo de lineas de las imágenes SVG que estes utilizando en tu pagina web. El script es gratuito y muy, muy pero muy fácil de utilizar, simplemente basta con incluir el script en tu pagina y llamar a la función que se encargara de animar las imágenes SVG que le indiques en cada llamada, les dejo el enlace hacia el sitio oficial de esta librería JavaScript y espero que les sea de......

Seguir leyendo 31

Framework CSS para integrar Google Material Design en tu pagina web

google materials design

  Hace un par de meses Google hizo publico un nuevo modelo y estilo de diseño de interfaces bautizado como Google Material Design el cual utilizaría en todas sus aplicaciones, tanto móviles como web, el cambio se ha dado poco a poco, dos de las aplicaciones que ya han sufrido los cambios son Google Calendar para Android y Google Maps para iOS y Android, y por supuesto su nueva App para correo llamada Inbox que esta disponible igual via web. Bueno pues en Internet han empezado a salir multiples frameworks CSS y JavaScript inspirados en Google Material Design que ofrecen la posibilidad de aplicar el estilo y la interacción de Material Design al diseño de interface UI de tus servicios y paginas web, este es el caso de Material UI un framework CSS de los que mas me han gustado pos su sencillez y cuidado en los detalles y que te permitirá......

Seguir leyendo 22

Velositey el plugin Photoshop indispensable para diseñadores web

velositey-v2

Navegando un poco en mis diferentes fuentes de información (aka Google) me he topado con una verdadera joya para diseñadores web de la que me he enamorado, se trata de Velositey un fantástico plugin Photoshop indispensable para diseñadores web, el plugin no es para programadores, es específicamente para diseñadores, prácticamente es una herramienta que te permite armar las plantillas de un diseño web o al menos su estructura de una forma muy rápida y basada en el estandar del sistema grid 1170. El plugin ofrece una serie de elementos y modulos prediseñados y basados en Smart Objects que te podrás insertar en tu area de trabajo para armar la estructura de tu plantilla para el diseño de tu pagina web, es un plugin extremadamente sencillo de utilizar y que te ahorrara mucho tiempo de trabajo, lo mejor de todo es que el plugin es completamente gratuito. Características de Velositey 12 estilos......

Seguir leyendo 27

Plugin jQuery para cambiar diseño de elementos de formularios web

Labelauty

Labelauty es un pequeño pero muy útil plugin jQuery para cambiar el diseño de elementos de formularios web, en particular de los elementos Checkbox y los Radio Buttons, que podrán ser muy útiles pero son los elementos más inflexibles para crear diseños de paginas web con formularios que se adapten al diseño, el plugin prácticamente convierte los elementos checkbox y radio buttons en botones seleccionables a los cuales les puedes aplicar diseños mas agradables y que se puedan adaptar a la identidad del sitio sin perder la funcionalidad que estos elementos nos ofrecen. La imagen de abajo te muestra un ejemplo de como utilizar este plugin jQuery para cambiar el diseño de formularios web, el plugin es completamente gratuito y bastante sencillo de aplicar, basta con iniciar el script en el footer o cabecera de tu sitio web para que el diseño de todos los elementos checkbox y radio buttons se......

Seguir leyendo 30

Genial diseño de la pagina oficial de Big Hero 6

web big hero six 3

Si estas esperando con ansias la película de Disney Big Hero 6 que se estrenara el próximo 5 de Noviembre o si eres un diseñador web que admira los buenos trabajos de diseño web, bueno pues tienes que conocer la nueva pagina web oficial de Big Hero 6 la cual fue creada por el diseñador Rolf A. Jenser quien es originario de Oslo, Noruega, el nuevo sitio oficial para esta película es un sitio único y original, y que a pesar de estar lleno de animación, no existe ni rastro de Flash. El sitio esta lleno de interactividad y elementos animados todos aprovechando las diversas posibilidades que nos ofrece la combinación de HTML5, CSS3 y mucho JavaScript, en verdad les recomiendo mucho visitar el sitio incluso si no les interesa la película ver lo que Rolf ha logrado con este sitio es muy interesante y demuestra que con CSS3 y HTML5......

Seguir leyendo 38

54 Iconos PSD gratis para tiendas online (e-commerce)

iconos tiendas online

Si andas pensando en montar una tienda online o tienes entre tu agenda aun cliente con un proyecto relacionado con e-commerce entonces este paquete de iconos PSD gratis para tiendas online te podrán ser de mucha utilidad, el paquete incluye una serie de 54 iconos PSD todos relacionados con comercio electrónico, desde iconos para pagos, ofertas, tarjetas de crédito, iconos de descuento, también iconos relacionados con paquetería y envió de paquetes, comunicación entre clientes y por supuesto iconos relacionados con acciones comunes o de navegación dentro de una pagina web. Este paquete de iconos PSD para comercio electrónico fue creado por el diseñador Virgil Pana quien es originario de Rumania, Virgil es un diseñador especializado en diseño web y diseño de interfaces UI/UX, al final del post les dejo el enlace para descargar el paquete de iconos y también el enlace directo hacia el portafolio de Virgil el cual les......

Seguir leyendo 19

Brackets 1.0 un gran editor para diseñadores web con increíbles mejoras

nueva version brackets

Hace unos meses les recomendé un nuevo editor para diseñadores web Open Source creado por Adobe y de nombre Brackets, en aquel entonces este fantástico editor para crear paginas web estaba en versión beta 0.4 y incluso en aquel momento Brackets se plantaba como una excelente alternativa entre los IDE de programación para diseño web, bueno pues el día de ayer Adobe lanzo Brackets 1.0 la primera versión estable de este editor de código para diseño web, la nueva versión de Brackets incluye una serie de características fantásticas que te harán reconsiderar elegir este como tu editor de código web oficial. Principales características de Brackets 1.0 Editor en linea En lugar de saltar entre tabs de archivos, Brackets te permite abrir una ventana directa al código que más te interesa. ¿Quieres trabajar en el archivo CSS que se aplica al ID específico de un elemento HTML? Basta con poner el cursor del ratón sobre......

Seguir leyendo 35

Plugin jQuery para animar iconos para diseños web

livIcons

Hace unos días revisando la documentación de Google Materials vi los efectos de transformación que utilizan en los iconos de sus aplicaciones, efectos bastante interesantes que aprovechan una combinación entre CSS3 y SVG, pero requieren de mucho código CSS, algo que no todos están dispuestos a incluir en sus archivos, buscando un poco me tope con una excelente alternativa, se trata de un plugin jQuery para animar iconos para diseños web. El plugin en cuestión se llama LivIcons que esta combinación entre jQuery, Animaciones CSS y WebFonts, bastante interesante, no se trata de una aplicación que anima los iconos que tienes ya incluidos en tu pagina, el plugin incluye un pack de iconos prediseñados con animaciones de transformación que puedes incluir en tu sitio o utilizar para reemplazar los iconos estaticos que actualmente tengas en tu pagina web. Un excelente recurso para diseñadores web que te permitirá agregar dinamismo a......

Seguir leyendo 19

Paquete de patrones lineales para fondos web

patrones de lineas gratis

Ahora les quiero compartir un muy buen paquete de patrones lineales perfectos para utilizar en fondos web o alguna otra aplicación donde se les ocurra que puede ser bueno utilizar este tipo de fondos, los etilos son muy diferentes no solo en lo que no solo varia la separación entre lineas, también varias los colores y el grosor de las lineas, estos patrones pueden ser perfectos incluso para utilizar en posters u otro tipo de diseños impresos. En la siguiente imagen les dejo un muestrario de todos los estilos de patrones que se incluye en el paquete, el paquete incluye un total de 50 diseños de patrones lineales en vectores para Adobe Illustrator, lo que los hace aun mejores ya que son patrones que pueden modificar en forma colores e incluso el ángulo en que están posicionadas las lineas, este paquete fue creado y compartido por el diseñador Aleman Fabian Ring.......

Seguir leyendo 11

Convertidor de imágenes PNG a SVG, sin perder calidad y comprimidas un 70%

Convertidor de imagenes PNG a SVG

ZorroSVG es una excelente herramienta web que deberíamos sumar a nuestros recursos de diseño, es una App que funciona como un convertidor de imágenes PNG a SVG sin haber perdida de calidad, comprimiendo los archivos PNG en mas de un 70% y ofreciendo soporte para transparencias, esta herramienta es perfecta para todo aquel que se dedique al diseño web y sepa sobre la importancia que tienen las imágenes en las paginas web y mas aun la importancia que tiene la optimización del peso de los archivos que incluimos en nuestras paginas. También sabra que los archivos JPG son lo mejor en cuanto a optimización y calidad, pero también sabemos que las imágenes PNG son nuestras preferidas porque permiten usar areas transparentes, pero tienen un grave problema mientras mas colores y efectos visuales tenga la imagen los archivos PNG se vuelven mas y mas pesados, convirtiéndose en toda una pesadilla. Pero los navegadores e......

Seguir leyendo 78

Concepto de rediseño para Google News por George Kvasnikov

google news concepto rediseno 5

Imagino que la mayoría conoce el servicio de Google News, un servicio que presenta y recomienda las noticias de algunos de los sitios web mas destacados en Internet, se garantiza por presentar contenido de calidad generalmente, pero si eres un usuario leal de Google News no podrás negar que el diseño de interface de este servicio de Google deja mucho que desear, le hace mucha falta que los diseñadores de Google le dediquen un poco de tiempo para crear un portal de noticias agradable y fácil de navegar entre sección y que sea bonito. Bueno pues al parecer hay muchos que piensan igual y quieren aportar su granito de arena, tal es el caso del diseñador George Kvasnikov quien es originario de Alemania y que ha creado un interesante concepto de rediseño para Google News, un concepto pensado en la cantidad de contenido, el orden, la organización, el aspecto de la......

Seguir leyendo 33

Pagina 1 de 27123...6...Antiguas »

#RanascreativasÚltimas imágenes enviadas