Etiqueta: diseño

Para quien estudia CSS3

Publicado el

por Juan Diego Polo

Como muchos ya sabréis, CSS3 invadirá poco a poco las diferentes páginas web ofreciendo recursos modernos y fáciles de implementar en su diseño.

Aquí­ os dejo una serie de enlaces interesantes para quien está estudiando o para quien simplemente quiere saber más sobre esta nueva técnica de programación de hojas de estilo.

css3generator.com

Genera código en CSS3 después de indicarle el valor de algunas variables. Hay disponible una sección para ver el resultado antes de exportarlo.
Continúa leyendo «Para quien estudia CSS3»

Practica CSS3 con css3please.com

Publicado el

por Juan Diego Polo

Si trabajáis con CSS para el diseño de páginas web y queréis empezar a entender el funcionamiento del nuevo CSS3, echar un vistazo en css3please.com.

Se trata de una web que muestra un componente en el lado superior derecho que responde directamente al código mostrado en la página. Podemos alterar el código sin necesidad de ningún programa adicional y ver los efectos que el cambio tiene en el panel de texto.

Un buen editor de CSS3 online que puede ser usado para fines académicos.

Herramientas para creación de prototipos y wireframes

Publicado el

por Juan Diego Polo

En el mundo del diseño web, un wireframe es una representación esquemática de una página web, sin elementos gráficos que muestren contenido. Son realmente útiles como herramientas de comunicación entre programadores, diseñadores y clientes.

Aquí­ os dejo una lista de aplicaciones que podéis usar para realizar este tipo de dibujos, lista publicada en spyrestudios.com. Por desgracia no todas son gratuitas, con lo que tendréis que poner los pros y contras de cada opción antes de tomar una decisión.

Hot Gloo


Opción en flash, muy sencilla de usar y con cuenta gratuita que no permite el trabajo en grupo.
Continúa leyendo «Herramientas para creación de prototipos y wireframes»

GestureCons – Iconos gratuitos del mundo «multitouch»

Publicado el

por Juan Diego Polo

Si tenéis que diseñar algún manual de un dispositivo multitouch o necesitáis crear algún material relacionado con esta nueva forma de trabajar, os aconsejo la colección de iconos que ofrecen en gesturecons.com.

Son 52 gráficos en alta resolución en formato vectorial, disponibles en pdf, .ai y .eps. Manos girando, deslizándose, mostrando operaciones con los dedos… ideal para quien trabaja con diseño gráfico.

TestSize – Cómo se ven ciertas páginas en diferentes resoluciones

Publicado el

por Juan Diego Polo

Testsize es una aplicación bastante sencilla y muy útil cuando queremos diseñar alguna página web compatible con la mayorí­a de las resoluciones posibles.

Sólo tenemos que indicar la url que queremos probar y la resolución deseada, testsize mostrará el resultado en una ventana del tamaño adecuado, permitiendo hacernos saber si los usuarios que usen ese tamaño podrán ver el contenido más importante de nuestra web.

Aunque puede parecer una tonterí­a, es algo extremadamente importante en el diseño de cualquier medio de comunicación digital.

Más de 100 tipos de fuentes gratuitas para diseño

Publicado el

por Juan Diego Polo

No es fácil encontrar un tipo de fuente, con licencia gratuita, que sea fácil de leer, original y elegante al mismo tiempo, por eso tiene mucho mérito la recopilación realizada por iniwoo.net en la que podemos obtener más de cien tipos de letras con una calidad asombrosa.

Se trata de una cuidada selección obtenida de sitios especializados en este tipo de contenido, entre los que están:

Colorzilla – Extensión de Firefox para quien trabaja con colores

Publicado el

por Juan Diego Polo

Colorzilla es un plugin del navegador Firefox que nos permite obtener el código de cualquier color de las letras, imágenes, fondos y demás elementos de la página que estemos visitando.

Crea paletas, detecta reglas CSS, permite compartir las paletas creadas, tiene zoom, disponible en varios idiomas… imprescindible para los que trabajan en temas relacionados con diseño y quieren ahorrar tiempo en la ejecución de sus trabajos.

tawdis.net – análisis de la accesibilidad de sitios web

Publicado el

por Juan Diego Polo

Tawdis.net es una aplicación que nos permite analizar la accesibilidad de cualquier sitio web.

En realidad T.A.W. es un conjunto de herramientas que van desde los más conocidos analizadores de páginas a los sistemas de monitorización o a una herramienta para la realización de observatorios.

Su objetivo, usando sus propias palabras:

Comprobar el nivel de accesibilidad alcanzado en el diseño y desarrollo de páginas web con el fin de permitir el acceso a todas las personas independientemente de sus caracterí­sticas diferenciadoras.

Disponible en español, gallego, catalán e inglés, es un sitio de fundamental importancia para quien trabaja en el desarrollo de páginas web y quiere ampliar su público objetivo

Visual Website Optimizer – Haciendo pruebas para la nueva versión de tu sitio web

Publicado el

por Juan Diego Polo

Cuando se trabaja en un nuevo diseño de un sitio web se esperan muchas cosas: aumentar la fidelidad de los lectores, reducir el porcentaje de rebote (usuarios que vienen, se van y no vuelven), adaptarse a nuevos contenidos… son muchos los factores y muchas las sorpresas que inevitablemente siempre se tienen durante las primeras semanas del estreno.

Visual Website Optimizer nace para disminuir los sustos y poder conocer los resultados que la alteración tendrá analizando la reacción de nuestros visitantes. Después de crear un nuevo test, podremos indicar los módulos que sufrirán los cambios o indicar dos urls distintas con los diseños que quieren ser comparados. El sitio web mostrará de forma aleatoria las dos versiones del sitio y ofrecerá estadí­sticas analizando los parámetros que nos preocupan.

Podéis probarlo en su Demo o ver el ví­deo de presentación en el que podemos comprobar lo simple que es crear nuevos tests. Espero que os resulte útil y evite más de un infarto.

Selección de enlaces para diseñadores

Publicado el

por Juan Diego Polo

Aquí­ os dejo una lista de enlaces que pueden ser útiles para quien trabaja con diseño.

– Trucos para pasar de un archivo PSD a HTML: line25.com
– Cómo pasar de un boceto a un tema en Wordpress: spoongraphics.co.uk
– Tutoriales de CSS3 y técnicas de creación de botones: speckyboy.com
– Excelentes diseños web oscuros: webdesignledger.com
– Cientos de trucos para quien trabaja con CSS: css-tricks.com
– 17 extensiones de Google Chrome para webdesigners: designm.ag

Espero que los aprovechéis.