Avisar de contenido inadecuado

Diseno De Interfaces en Pixelovers

Expand

Rediseño de Flickr

El otro día Juanma comentó sobre Facebook Facelift, el lavado de cara de Facebook y hoy me he encontrado que Flickr han cambiado la página de fotos. Hay que reconocer que el mensaje es muy llamativo: "We're introducing a new photo page, and you can check it out early. Take me to the future!" que viene a significar: "Estamos presentando una nueva página de foto y tu puedes echarle un vistazo antes de tiempo. ¡Llévame al futuro!

Flickr anuncia nueva página de foto

 

Expand

Libro manual jQuery UI 1.7

jQuery UI 1.7Hace unos meses cayó en mis manos este fantástico libro: jQuery UI 1.7 de Dan Wellman. Y lo llevo usando casi a diario desde entonces puesto que estoy metido en un proyecto en el cual usamos casi toda la librería (Dialog, Slider, Tabs, Sortable...). Al principio pensé que no le daría uso puesto que existen demos y documentacion de jQuery UI, pero desafortunadamente no es tan buena como me esperaba.

Creo que una de las partes que más conflicto crea entre los usuarios del framework es la cantidad de clases que añade a los elementos involucrados. Y es cierto, añade muchas, pero todas ellas necesarias. Gracias a eso te permite controlar a tu gusto la interfaz. Ellos te proporcionan una serie de temas, los cuales puedes personalizar mediante el jQuery UI ThemeRoller, pero hay casos en los que te quieres salir de la norma y dar, en un caso concreto, un estilo diferente. Conociendo bien el porqué de cada clases es muy fácil, y para este caso el libro me ha venido como anillo al dedo. He podido aprender, ya en el capítulo 2, el CSS Framework, algo imprescindible para dotar a tu interzar la personalidad que buscabas.

Por otro lado el libro me ha venido muy bien para entender paso a paso el funcionamiento de los widgets. Con lo que he podido crear mis propois plugins para automatizar ciertos procesos, como por ejemplo la creación de sliders, o paneles configurables mediante sortable.

La verdad que siendo sincero, si piensas desarollar algo con jQuery UI 1.7 y quieres hacer bien, te recomeiendo este libro.

Expand

Enlaces de la semana (semana 5 de 2010)

Comenza febrero y con ello inauguramos una nueva sección el en blog "Enlaces de la semana", en la que haremos un resumen de todos los enlaces que hemos ido poniendo en twitter (@pixelovers) y en la página Pixelovers en Facebook.

Javascript

CSS

HTML

Diseño

  • MagazineXpert, publicación para la comunidad hispanohablante de tecnologías y aplicaciones Adobe - http://bit.ly/cXaZP5.
  • A Set Of User Interface Design Elements (PSD) - http://bit.ly/d2Lg1V | Control buttons, info boxes, breadcrumbs, forms, scrollbars & more.
  • Color Theory for Designers, Part 1: The Meaning of Color - http://bit.ly/9ixnJb | Smashing Magazine.
  • Color Theory For Designers, Part 2: Understanding Concepts And Terminology - http://bit.ly/asn06E | Smashing Magazine.
  • 100+ Seamless Patterns Great for Creating Website Backgrounds - http://bit.ly/a9JoCE.
  • Beautiful Free Vector Downloads Roundup - http://bit.ly/9jQ8o8.

Utilidades web

  • Using firebug lite on Google Chrome. Originaly made by Firebug Team - http://bit.ly/doKjxi.
  • How to Use sIFR 3 - http://bit.ly/dlGflM | Video explicativo de este sistema que te permite usar cualquier fuente en la web
  • Best Practices To Develop Perfect Websites for iPhone and Mobile Devices - http://bit.ly/bFzPDd

Espero que os resulten interesantes y si queréis descubrir estos enaces antes siguenes en Twitter @pixelovers y hazte fan de la página Pixelovers en Facebook.

Expand

Interfaces gráficas de usuario (plantillas de diseño)

Ahora que empieza un año nuevo es un buen momento para hacer nuevos propósitos, y qué mejor que mejorar tus diseños siguiendo una retícula o desarrollando para nuevos dispositivos. Os traemos unas cuantas plantillas que pueden hacerte más facil llevar a cabo este propósito de año nuevo.

Navegadores de escritorio

Retícula de 960px

960px Grid

Es una buena base para tus diseños web puesto que es una medida muy versatil que te permite multiples divisiones en columnas de diferentes anchos. Además este ancho cabe perfectamente en los navegadores a una resolución de pantalla de 1024x768 px., que es la más estandar actualmente, quitándo bordes y barras de scroll.

Más info | Plantilla de retícula de 960px.

Descargar 960px Grid.

Elementos del navegador web

Si quieres dotar a tus diseños de algo más de realismo puedes presentarlos incrustados en una ventana de navegador o añadiendo elementos de formulario, como botones, inputs, barras de scroll, etc... Siendos sinceros la interfaz gráfica de Mac OS X es la más bonita y apreciada por los diseñadores, pero de todas formas os dejamos las plantillas de los más habituales.

Navegadores en Mac OS X

Navegadores en Windows Vista

Navegadores en Windows XP

Dispositivos Móviles

Cada vez es más frecuente el uso de móviles para navegar por internet, por ello la necesidad de crear una versión móvil de tu web se está conviertiendo en algo indispensable. Debido a la multitud de dispositivos diferentes que existen tenemos la opción de crear una web genérica, o si le queremos dotar de valor añadido a nuestra web, podemos adaptar nuestro sitio a cada uno de los diferentes dispositivos.

Plantilla de la interfaz de iPhone

Nuestro compañero Albert García, ya nos habló sobre Plantilla para photoshop de la interfaz de iPhone. Y ahora os traemos el PSD del la última versión del sistema operativo Móvil de Apple, el iPhone OS 3.0, que viene con nuevos elementos gráficos como:

• Mapa y elementos del mapa, inluido el enrrollado
Elementos para copiar y pegar
• Editor de barra de línea de tiempo
• iPhone Horizontal
• Barras de paneles horizontales y teclados

iPhone GUI 3.0

Más info | iPhone GUI PSD 3.0.

Descargar iPhone GUI PSD 3.0.

Plantilla de la interfaz del iPad

Si tienes pensado desarrollar también para el iPad seguro que la anterior GUI se te queda corta. Así que te dejo una específica para el iPad.

Más info | iPad GUI PSD.

Descargar iPad GUI PSD.

Plantilla de la interfaz de Andrid

Los chicos de Smashing Magazine, que recientemente han publicado The Smashing Book, nos dejan esta interfaz completita para su uso libre.

Android GUI

Más info | Android GUI PSD Vector Kit.

Descargar Android GUI PSD Vector Kit.

Plantilla de la interfaz de Palm Pre

La gente de teehan+lax, los que han desarrollado iPhone GUI PSD 3.0., nos vuelve a sorprender con Palm Pre GUI PSD.

Palm Pre GUI

Más info | Palm Pre GUI PSD.

Descargar Palm Pre GUI PSD (tipografía Coconut).

Descargar Palm Pre GUI PSD (tipografía Avenir).

Expand

RMSForms, framework CSS para formularios

Robert M. Sandy Jr.Si eres desarrollador web, seguro que alguna vez has maldecido cuando te ha tocado maquetar formularios. Y es totalmente normal, a veces se convierte en un quebradero de cabeza suplicio. Robert M. Sandy Jr. ha pensado en ello y por eso a desarrollado RMSForms, un framework CSS para ayudar a dar estilo a los molestos formularios. No solo se centra en las incoherencias de los navegadores, si no también en conseguir una disposición correcta tanto visualmente como semánticamente. Así que si tienes que hacer una web con muchos formularios, puedes plantearte utilizar esta hoja de estilo de menos de 100 líneas, sin comentarios, y un tamaño de 8Kb.

Está basado en una estructura HTML muy simple:

<fieldset>
<legend></legend>
<ul class="form [modifier]">
<li><label class="[label modifier]"></label><input/></li>
</ul>
</fieldset>

Donde los modificadores están compuestos por 3 letras:

  • H = Bloque Horizonal
  • V = Bloque Vertical
  • I = Inline

Y se pueden generar los siguientes:

  • vvv – Vertical <li>, Vertical <label>, Vertical campos de formulario
  • hvv – Horizontal <li>, Vertical <label>, Vertical campos de formulario
  • hii – Horizontal <li>, Inline <label>, Inline campos de formulario
  • hhh – Horizontal <li>, Horizontal <label>, Horizontal campos de formulario
  • vii – Vertical <li>, Inline <label>, Inline campos de formulario
  • vhh – Vertical <li>, Horizontal <label>, Horizontal campos de formulario

Si queréis ver el resultado, aquí tenéis un ejemplo de RMSForm.

Expand

The Smashing Book

Libro de Smashing MagazineYa por fin ha salido a la venta el libro de Smashing, en el que encontrarás las mejores prácticas en diseño Web moderno. Sus 313 páginas están llenas de consejos técnicos y buenas prácticas de codificación, usabilidad y optimización, adnás podrás aprender a como crear interfaces de usuario con éxito y aplicar los principios de marketing para aumentar las tasas de conversión. Todo esto no sería posible sin mostarte cómo obtener el máximo provecho de la tipografía, color y marca.

Un libro muy recomendable para los diseñadores web y desarrolladores de interfaces, que espero tener en mis manos muy pronto para poder contar de primera mano mis impresiones.

Expand

El uso de iconos en la web

En la web es muy habitual el uso de iconos o pictogramas para facilitar la navegación por una página web o cualquier herramienta con una interfaz gráfica. Los primeros iconos fueron creados para facilitar el uso de los PCs por los novatos en los años 70. Pero no se popularizaron hasta mas tarde, cuando se empezaron a usar en los Sistemas Operativos de Macintosh y Microsoft. Ahora, la finalidad sigue siendo la misma, facilitar el uso de entornos gráficos.

Con estos dibujos evitamos leer textos y obtenemos de una manera más rápida las opciones que nos presentan. Una buena elección de estos iconos es muy importante, puesto que si un usuario no es capaz de determinar su significado no hemos conseguido nuestro porpósito de ahorrarle tiempo en la visualización de la página. Un icono debe contener la menor cantidad de detalle posible, únicamente dejar los imprescindibles para la comprensión de su significado.

Otro punto importante en la elección de un icono es la estandarización, o mejor dicho, a lo que están acostumbrados los usuarios. Es muy arriesgado inovar con estos temas puesto que los usuarios son muy reticentes a los cambios y tendría que ser muy bueno el icono para que no despiste al usuario.

Si decides crearte tus propios iconos, te recomiendo que leas: 10 Mistakes in Icon Design (versión traducida: 10 errores al diseñar iconos). Sin embargo, si optas por utilizar iconos existentes, aquí te dejo unas cuantas herramientas y galerías de iconos para facilitarte el trabajo:

Buscadores de iconos:

Sets de iconos:

  • Famfamfam: Yo diría que están muy vistos, pero el set de banderas es muy socorrido.
  • Pinvoke: Mayor cantidad que Famfamfam y menos trillados.
  • Sweetie: Elegantes y limpios, con licencia Creative Commons e incluye los ficheros de Photoshop.
  • IconFactory: Muy buena calidad y por ello algunos hay que pagarlos.
  • Tango Icon Library: Una librería de iconos Open Source.
  • Glyphlab: Iconos enérgicos y coloridos con mucho nivel de detalle.
  • Greyscale: Galería de iconos en escala de grises.

Recopilaciones de iconos

Ese icono que usaste en tu web no se encontraba entre estas páginas y tu prefieres buscarlos en otros sitios, compartelos con nosotros para ampliar las opciones de búsquedas.

Expand

Interface del iPhone: Contexto VS consistencia

La inclusión del botón de acceso directo a iTunes en la portada ha servido a los chicos de Signal VS Noise para hacer una pequeña reflexión acerca de los motivos que han llevado a Apple a colocar ese botoncito ahí y no en otro lugar. Me ha parecido muy acertada, así que aprovecho para compartirla con vosotros.

30467-28758.jpg

Como ilustra la imagen, la posición siguiendo un criterio de consistencia, la natural respecto a nuestro orden de lectura-escritura, hubiera sido la izquierda. A pesar de esto, los responsables del diseño del interface del iPhone han decidido ubicar el nuevo icono a la derecha, primando la proximidad a otra opción relacionada: el botón de iPod. Ha primado el contexto frente a la consistencia.

Por otro lado resulta interesante fijarse en qué las dos opciones posiblemente más destacadas, SMS ( en primer lugar y arriba a la izquierda ) e iTunes ( en último lugar y abajo a la derecha ), son las dos que reportan algún tipo de beneficio económico directo a la compañía ( recordad que Apple recibe un porcentaje del gasto de llamadas y SMS del terminal ). ¿Intencional o casual? Genial, en cualquier caso.

Via | Signal VS Noise