Google te ayuda con el color en tus diseños para Apps

Google te ayuda con el color en tus diseños para Apps

El color es un elemento indispensable a la hora de diseñar una App, una web, publicidad… Puede determinar de modo determinante la usabilidad de tu aplicación o sitio web.

El color ayuda a hacer visible la jerarquía, la navegación o arquitectura de un diseño, hace que el usuario muestre más o menos interés en nuestros contenidos y una vez interesado, puede hacer que la experiencia sea positiva o que no vuelva a usar nuestro diseño nunca más.

CONTINUAR LEYENDO “Google te ayuda con el color en tus diseños para Apps” »

Comparte este Blog de Diseño Web

Efectos hover para botones con CSS3

Efectos CSS3 para botones

Efectos CSS3 para botones

El uso de botones realizados con CSS3 es ya una práctica habitual, reducen peso a la página y existen mil maneras de customizarlos para sustituir sin problema a casi cualquier imagen de botón. Hoy os dejo una colección de códigos realizados con CSS3 que además añade todo tipo de acciones a esos botones, aunque podrían aplicarse también a imágenes.

Podréis encontrar: animaciones 2D, transformaciones de bordes, transformaciones y movimientos con sombras, transformaciones tipo burbuja, o el típico curl de página.

CONTINUAR LEYENDO “Efectos hover para botones con CSS3” »

Comparte este Blog de Diseño Web

Objeto interactivo en 3D con jQuery

jQuery Interactive

jQuery Interactive

En este artículo podréis ver cómo crear un objeto interactivo en 3D mediante imágenes y un simple JS.

Al hacer drag sobre la imagen arrastramos el objeto de tal modo que parece que estamos realizando un giro en 3D. En realidad estamos cargando todas y cada una de las imágenes que componen ese movimiento 360º. El efecto es perfecto para una galería de coches por ejemplo, el único problema es que nos tendremos que hacer con todas las imágenes de la rotación completa.

CONTINUAR LEYENDO “Objeto interactivo en 3D con jQuery” »

Comparte este Blog de Diseño Web

Widget para customizar los botones de suscripción en tu web

Botones para suscripción

Botones para suscripción

En ocasiones resulta complicado incorporar los botones de suscripción en tu web por no poder adaptarlos al diseño del conjunto de tu sitio.

Los botones de suscripción a Facebook, Youtube, Twitter o Google+, son botones preestablecidos que suministran las distintas redes sociales y que no podemos modificar.

Este código, nos ayuda a camuflar el botón de la red social, debajo de un slide. Se trata de una capa que se abre al hacer rollover sobre ella, de modo que podemos camuflar el diseño y mantener el botón original. Aquí tenéis el código para realizar botones de suscripción en vuestra web o blog con CSS y con un slide muy vistoso que podréis diseñar a vuestro gusto ya que llevará por detrás vuestra propia CSS.

Podéis ver el ejemplo y el código en cssdeck.com

Comparte este Blog de Diseño Web

ascensor.js Código jQuery para navegación web

Navegación web con jQuery

Navegación web con jQuery

La navegación web en una sola página es una forma de dar al usuario una transición entre secciones natural y muy vistosa.

Para ello existen multitud de plugins jQuery que facilitan el uso de este sistema de navegación.

Todas las áreas de contenido se encuentran en la misma página, y gracias al menú nos vamos desplazando por cada una de ellas.

CONTINUAR LEYENDO “ascensor.js Código jQuery para navegación web” »

Comparte este Blog de Diseño Web

Tendencias del diseño web, by Apple…

Imagen tomada de appleweblog.com

Imagen tomada de appleweblog.com

Nadie en este mundillo es ajeno a la tremenda influencia de Apple en el diseño web.

Estoy seguro que aparición del iOS7 en el mercado, volverá a dar un cambio de aires al diseño web.

Es cierto que podemos ver una clara inspiración en el diseño más plano de Windows o Google, pero eso si, con el toque especial que siempre Apple da a sus diseños. El responsable, Jonathan Ive.

El cambio ha sido radical, pasando del skeuomorphism (que representa el arte de imitar la realidad) a un diseño totalmente minimalista, es decir, de Steve Jobs a Jonathan Ive.

CONTINUAR LEYENDO “Tendencias del diseño web, by Apple…” »

Comparte este Blog de Diseño Web

Un plugin de jQuery para crear tooltip estilo barra de herramientas

Crear tooltips con jQuery

Crear tooltips con jQuery

Toolbar.js es un plugin de jQuery que nos ayuda a crear fácilmente tooltip estilo barras de herramientas.

Se trata de un plugin muy sencillo que nos permite crear cualquier tipo de barra de herramientas.

Permite abrir la barra desde cualquier elemento, los elementos de la barra de herramientas son fácilmente personalizables. Las barras pueden aparecer horizontales o verticales, por encima o debajo del botón.

CONTINUAR LEYENDO “Un plugin de jQuery para crear tooltip estilo barra de herramientas” »

Comparte este Blog de Diseño Web

Divierte tus cajas de texto con jQuery

divertirse con jQuery

divertirse con jQuery

Se trata de un plugin experimental en jQuery que lo que hace es amenizar la entrada de texto en las cajas de tu web.

Existe la posibilidad de incluir hasta 5 efectos distintos de animación. Con lo aburrido que es siempre rellenar un formulario, esta puede ser una buena manera de hacerlo más divertido 😉

 

 

VER DEMO

Comparte este Blog de Diseño Web

Guía gratuita Google para la creación de webs móviles

Guía Google para optimizar web mobile

Guía Google para optimizar web mobile

Si estás pensando en diseñar una web para smartphone, Google pone a tu disposición una guía gratuita con todo tipo de consejos, trucos y código para optimizarla y obtener los mejores resultados.

Para empezar, lo primero que Google te recomienda es realizar un diseño web receptivo, es decir, utilizar el mismo HTML para todos los dispositivos, independientemente de su resolución, y utilizar CSS para decidir los cambios según estas resoluciones.

Esta guía, te ofrece además, la posibilidad de consultar la compatibilidad entre smartphones o recomendaciones para el uso de javascript en tu sitio.

En definitiva, se trata de una guía realizada por Google, eso significa que si quieres tener contento a Googlebot, léete esta guía y síguela al pie de la letra 😉

 

 

VER LA GUÍA GOOGLE PARA WEB MOBILE

Comparte este Blog de Diseño Web

¿Cómo hacer una galería de fotos igual que la de Google?

Galería de imágenes Google

Galería de imágenes Google

Todos vosotros habréis visto la galería de imágenes de Google, al pinchar sobre cualquiera de los thumbnails, este se despliega con un efecto acordeón, insertando un espacio de información entre las demás miniaturas de la página.

En este post de diseño web, vais a poder acceder a toda la información para implementar una galería exactamente igual a la de Google en vuestro sitio web.

CONTINUAR LEYENDO “¿Cómo hacer una galería de fotos igual que la de Google?” »

Comparte este Blog de Diseño Web

Herramientas gratuitas para hacer infografías

Herramientas gratis para crear infografías

Herramientas gratis para crear infografías

El uso de infografías además de ayudarnos a hacer comprender mejor una información, suele producir un efecto mayor en cuanto a viralización de tus contenidos. Por otro lado, al tratarse de imágenes con información, conseguirás mucho tráfico también en imágenes de Google.
He encontrado en www.desingenia.com un buen post en el que nos aconseja varias herramientas para hacer infografías de forma gratuita. Por lo general suelo usar siempre photoshop, pero es cierto que alguna de estas herramientas te proporcionan ayudas que de otro modo se pueden complicar bastante.

 

VER POST ORIGINAL

Comparte este Blog de Diseño Web

¿Cómo diseñar una web mobile?

Diseño de Web para Móviles

Diseño de Web para Móviles

El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.

Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.

CONTINUAR LEYENDO “¿Cómo diseñar una web mobile?” »

Comparte este Blog de Diseño Web

Slide Down Box Menu, un menú completísimo con jQuery y CSS

Menú con jQuery y CSS

Menú con jQuery y CSS

En este blog de diseño web hemos mostrado numerosos ejemplos de menú, y seguiré añadiendo, porque el menú constituye una parte esencial del diseño web, cada proyecto es un mundo y requiere un menú diferente.

La mayoría de las veces, el menú viene condicionado o bien por la cantidad de secciones que vayamos a utilizar o por los absurdos títulos larguísimos que nos pide el cliente. En el segundo caso es casi esencial convencerle que el titular de un menú ha de ser conciso y breve si queremos que funcione.

Hoy os dejo un menú que me ha parecido muy vistoso y útil. Se trata de un menú en el que al hacer rollover sobre la opción la casilla que contiene el titular se abre con un efecto elástico, en la zona superior aparece una imagen y el texto se desplaza hacia abajo, mostrando, cuando es preciso un submenú a su derecha.

Además de poder descargar todo el código de forma gratuita, podréis consultar con amplio detalle todos los pasos del proceso.

VER DEMO Y DESCARGAR MENÚ SLIDE DOWN BOX

Comparte este Blog de Diseño Web

Mapa de Redes Sociales 2013 de iRedes

Se ha presentado ya la tercera actualización del mapa de redes sociales iRedes.

En él se incluyen aquellas redes con al menos 10 millones de usuarios. El mapa está categorizado por temática, chat, citas, video&foto, general, agregadores y demás redes temáticas.

Mapa iRedes 2013

Mapa iRedes 2013

Comparte este Blog de Diseño Web

Espectaculares efectos para listas desplegables. jQuery y CSS

Lista desplegable con jQuery y CSS

Lista desplegable con jQuery y CSS

Hoy traemos un espectacular efecto para cuando tenemos que utilizar listas desplegables o incluso un menú.

El despliegue es customizable, totalmente configurable para conseguir efectos únicos. Como siempre ojo con los navegadores, se trata de transformaciones y transiciones CSS que como sabéis no todos los navegadores soportan.

El regalo nos lo trae tympanus y nada mejor que verlo para encapricharnos y descargarlo 😉

 

VER DEMO Y DESCARGAR ARCHIVO GRATIS LISTAS DESPLEGABLES

 

 

Comparte este Blog de Diseño Web

Psd’s de Ribbons GRATIS !!!

Seguramente hayáis visto estos “ribbons” o cintas en multitud de diseños, un estilo retro con mucha fuerza en los actuales diseños.
Tanto para cabeceras, titulares, menús o botones, es un recurso al que siempre podréis recurrir.
En este pack podréis encontrar varios ejemplos en diferentes PSD’s, todos los archivos psd de Photoshop están bien repartidos en capas y pueden ser fácilmente editadas. También podréis ver que incluye  variaciones de color. Si queréis más variaciones y más tipos, tocará rascarse el bolsillo…

CONTINUAR LEYENDO “Psd’s de Ribbons GRATIS !!!” »

Comparte este Blog de Diseño Web

La importancia de contratar un buen servidor web

Elegir un buen servidor para tu web

Elegir un buen servidor para tu web

A la hora de diseñar una web, tan importante como pensar en  un buen diseño y una buena usabilidad, es pensar dónde vamos a alojar nuestro proyecto.

Existen multitud de servicios hosting en todo el Mundo, algunos con precios exagerados y otros con precios ridículamente sospechosos… Lo cierto es (por experiencia), que el precio no siempre va asociado a la calidad del servicio prestado. Conozco varios casos de proyectos muy buenos que se han venido abajo por alojarlos en servidores inestables bien caros.

Vamos a ver en este post una serie de factores a tener en cuenta.

CONTINUAR LEYENDO “La importancia de contratar un buen servidor web” »

Comparte este Blog de Diseño Web

Descárgate gratis el timeline de Facebook en PSD

Si te dedicas al diseño web, seguro que más de una vez te ha tocado diseñar la cabecera o alguna entrada para la página Facebook de algún cliente. Nada más últil que esta guía en psd para poder diseñar a tamaño exacto todos y cada uno de los elementos customizables de Facebook. Además, las imágenes vienen acotadas para mayor comodidad.

El psd está completo y bien serparado por carpetas para poder encontrar todo enseguida.

CONTINUAR LEYENDO “Descárgate gratis el timeline de Facebook en PSD” »

Comparte este Blog de Diseño Web