Mirando WydBlog me encuentro con un sencillo pero práctico tutorial para realizar botones con brillo al más puro estilo web 2.0.

Hema es una cadena holandesa dedicada a los complementos del hogar tipo Ikea, en el que podemos ver una presentación de los productos nada normal, recrean el archi-utilizado efecto dominó, pero como casi siempre con este efecto, sigue funcionando.

No pierdas la oportunidad de verlo, vale la pena.

Vía: Efecto Efe

Utilizar una metodología en el trabajo nos permite en muchos casos reducir el tiempo de trabajo para llegar a un mismo objetivo, y el caso del diseño web no es diferente. Es más, casi diría con seguridad que en este campo la metodología es mucho más importante que en otros campos, por eso desde webnova nos ofrecen un detallado planning a la hora de planificar el diseño de una web.

1. El porqué del site: Es primordial saber qué objetivo se persigue con una página web, de esta manera trabajaremos con algo sólido, con una meta y no tendremos que variar completamente la funcionalidad a medio proyecto porque un día el cliente navegando por otras webs haya visto “un par de cositas” que le han parecido que podrían quedar bien en su web. La mayoria de veces, el cliente no sabe lo que quiere, simplemente desea estar en internet, ya sea por narcisismo o porque la competencia tambén está, pero no se plantea en ningún momento estar para conseguir un propósito (ya sea brindar mayor servicio a sus clientes o intentar conseguir otros nuevos con la web como carta de presentación, etc)Por eso es tarea del diseñador conseguir unificar unos objetivos y así enfocar el diseño.

    

2. Que buscarán los visitantes del site: Debemos estudiar bien el tipo de público del site y estructurar el contenido en consecuencia, de esta manera facilitaremos la navegación por el mismo. También debemos marcar niveles de importancia del contenido, haciendo muy visible el más importante. En este aspecto, el estudio de las entradas a través de buscadores nos darán una idea de las informaciones más valiosas para los usuarios.

 

3. Gestión de la información: No se puede empezar a diseñar la estructura de una web sin tener el contenido de la misma. El empezar a diseñar sin contenidos solo conduce a dos posibilidades, o cambiar despues el diseño para adaptarlo al contenido o adaptar el contenido para adaptarlo al diseño, y eso una vez tenemos todo medio maquetado es una gran put…Como deciamos en el punto anterior, debemos estructurar webs usables, y sin conocer contenidos es muy complicado diseñar nada usable.

 

4. Definir la “personalidad” del site: Todo cliente tiene una personalidad, un estilo, y este tiene que seguir marcado en el site. Una página web no deja de ser la continuación de una línea de comunicación que empieza por la marca. Por muy bonito que pueda quedar un efecto, un tipo concreto de diseño web, no son las tendencias las que han de marcar el proyecto, es esa personalidad de la marca, el estilo del cliente al que se ha de dar continuidad en el site.En este punto es necesario realizar un boceto del diseño del site para su aprobación por parte del cliente.

 

5. Maquetando: Ahora sí, sabiendo el porqué del site, las necesidades de los usuarios, teniendo el contenido, la estructura definida y la personalidad del sitio, es el momento de empezar a maquetar la página web.

 

6. Entrega y correcciones: En el momento de la entrega lo lógico es que el cliente encuentre pequeños detalles que quiera mejorar o simplemente cambiar. Primero de todo, hay que intentar hacer entender al cliente que no todo el mundo navega como él, así que el concepto de usabilidad no va dirigido en exclusiva a él, sino al global de los usuarios, y que su lógica no tiene porque ser la imperante. Aclarado esto, las modificaciones deben ser detalladas al milímetro (de esta manera ahorraremos tiempo nosotros y el cliente disfrutara de su nueva página antes) y deberian hacerse todas de una sola vez, no en tongadas que no acaban nunca.

Vía: Webnova

No estamos hablando del web de un coche, estamos hablando de la maravilla que sirve para que el Audi R8 entre en internet, la verdad es que seguro que se puede hacer mejor, pero reto a quien quiera a que lo consiga (no lo tiene nada fácil). Este web tiene una mezcla perfecta de vídeo, animación 3d, interactividad, buen tratamiento fotográfico, navegabilidad, y por supuesto un producto a vendercon el que te se caerá la baba.

Os dejo con el making-off, que no tiene desperdicio.

Vía: Territorio creativo

Web oficial: Audi

YAML (Yet Another Multicolumn Layout) o lo que es lo mismo, Otra Disposición Multicolumna es un framework (X)HTML/CSS para crear modernas y flexibles disposiciones de capas. La estructura es extremadamente versátil en su programación y accesible a los usuarios finales.

Está basado en estandares web, es accesible, flexible y fácil de utilizar. Dispone de la versión online llamada YAML Builder que permite el desarrollo visual de capas CSS directamente en el navegador. Sus características disponibles permiten elegir los elementos básicos de disposición disposición (#header, #footer, …), el número y orden de las columnas contenidas, arrastrar y jerarquizar las subplantillas y el contenido simulado. Finalmente, muestra el código XHTML y CSS.

Enlaces: YAML Builder, YAML

Otro recurso para crear una web rápidamente, es con dotemplate. Su funcionamiento es senzillo: seleccionas un diseño y a partir de aquí puedes personalizar los colores, las tipografías y otros elementos a tu gusto, siempre viendo el resultado final y permitiéndote modificarlo en todo momento.

Enlace: dotemplate

Conceptos básicos de usabilidad

1. El usuario es el que manda. Los usuarios de internet son mucho más exigentes en la red que en los comercios tradicionales; primero porque estan en su casa y segundo porque nadie les va reconduciendo hacia ningún sitio, así que para que un usuario vuelva debes ofrecerle lo que está buscando sin titubeos y sin hacerle perder ni un segundo.

2. La calidad se basa en la rapidez y la fiabilidad. En internet lo que cuenta es que tu página sea más rapida que bonita, más fiable que moderna. En definitiva, para perdurar en internet hay que ser directo.

3. Simplifica, optimiza. Todo debe estar a un tiro de piedra; no esperes que tus visitantes aprendan tu site map y sepan como llegar a la información de memoria, eres tú quien debe poner toda la información ordenada y de manera lógica para que el usuario no tenga ninguna duda de donde está la información que necesita.

4. Buenos contenidos. Saber expresar lo que quieres decir de manera fácil y entendible a veces es muy complicado, pero debe ser el objetivo número uno si queremos que los visitantes vuelvan a por más información otra vez. Por ello hay que seguir algunas reglas básicas como poner las conclusiones al principio y escribir tan sólo un 25% de lo que pondrías en un papel (sintetizar las ideas).

Puntos básicos para ser accesible

1. Imágenes y animaciones. Describe cada una de las imágenes y animaciones en el Alt

2. Multimedia: Incluye subtítulos y descripciones en audio de lo que se está mostrando en la animación para hacer más accesibles estos elementos.

3. Enlaces de hipertexto: Los enlaces han de poder ser entendidos fuera de contexto, por eso un “enlace” o “click aquí” no servirán de mucho para determinado número de visitantes.

4. Figuras y diagramas: El atributo longdesc puede ayudarnos para hacer una descripción más amplia del contenido del elemento.

5. Scripts, applets y plug-ins: Muchos de ellos no son accesibles, por eso nuestra recomendación es no utilizarlos si queremos ser accesibles, pero aún en el caso de utilizarlos habría que complementarlos con otros elementos que sirvan la misma información de manera accesible, y de esa manera poder escoger el modo de llegar a la misma.

6. Texto ampliable: La utilización de CSS puede ayudarnos a la hora de hacer accesible nuestra web con la utilización de tamaños de letras en dimensiones “em” y no en píxeles, de esta manera podremos redimensionar de manera más fácil los textos y hacer más legible la información a personas con problemas de visión.

7. Revisar tu trabajo: Una vez realizados estos puntos básicos, revisa el resultado en webaim.org para saber si la web es accesible.

Vía: W3C

Dolors Pou, consultora de usabilidad en Xperiencie Consulting, diseñadora y periodista nos desgrana en un artículo para consumer.es las diferencias entre usabilidad y accesibilidad de una manera fácil y entendedora. Por eso pasamos a resumir los conceptos básicos que en él se apuntan.

“La misión de la usabilidad es hacer la vida más fácil a las personas que buscan información en una web”

Parece básico, pero muchas veces los diseñadores sacrificamos esta facilidad de movimiento por la web (navegación intuitiva) para poder realizar nuestras “pajas mentales” y crear páginas monísimas por las que, seguramente, nadie sabrá navegar.

Por tanto la usabilidad consiste simplemente en hacer más fácil a las personas llegar a la información que necesitan.

Leer el resto de la entrada »

Google Maps se abre a todos para poder incluir sus mapas en nuestras páginas web, pudiendo personalizar la situación concreta del mapa, el nivel de zoom…

Para utilizar Google Maps en nuestra web tenemos que situarnos en la ubicación que queremos mostrar y hacer click en la parte superior derecha “Enlazar con esta página”, una vez allí nos muestra dos opciones, la de poner un link del mapa (eso ya funcionaba en Google Maps desde hace tiempo) y la segunda, incluir el mapa en una web.

Si hacemos click en “Personalizar y obtener vista previa del mapa incrustado”, se abre una nueva ventana en la cual podemos personalizar el tamaño del mapa, pudiendo elegir entre pequeño, mediano, grande o tamaño personalizado.

Vía: Incubaweb

Web oficial: Google Maps