Los diseñadores web y diseñadores gráficos conocen el continuo cambio de la industria que sugiere cambios, adaptaciones, desarrollo de nuevas destrezas para hacer frente al ineludible desarrollo tecnológico. En los últimos años, una de las áreas que más cambios ha sufrido debido al incremento de la demanda de usuarios de Internet, ha sido la de la telefonía móvil y la necesidad de disponer de sitios adaptados para este tipo de portabilidad y formato.

La tecnología WAP es una necesidad en crecimiento que exige de sitios webs diseñados para complacer a esa audiencia en auge. Diseñar sitios web para dispositivos moviles exige un gran desafío y requiere un enfoque estratégico del diseñador y el desarrollador.

Durante el proceso de desarrollo es esencial tener en consideración determinados aspectos para un desarrollo eficiente y ajustado a los estandares web:

• Código semántico y limpio. Lo mejor es dejar atrás los viejos códigos de gran peso basados en tablas y otros códigos engorrosos. La marcación limpia le ayudará a asegurar una correcta visualización en navegadores y móviles (crossbrowsing), sin apuros ni sobrecarga excesiva. Ajustese a las normas de la W3C.
• Separación de contenidos y presentación en CSS. Lo más importante para sus visitas es tener un acceso libre e inmediato al contenido y enlaces. La presentación lujosa es prescindible. un sitio que utiliza una marcación adecuada y eficaz es un sitio de éxito en móviles.
• Etiquetas Alt: Algunas visitas no son capaces de hacer un seguimiento de las imágenes. Las etiquetas “alt” permiten orientar sobre el tipo de contenido que hay debajo de la imágen.
• Etiquetar campos de formulario: Permiten hacer el sitio mucho más utilizable.
• Utilizar encabezamientos. utilice con intelgiencia encabezadores destacando los textos más importantes (h1, h2, h3) frente a los más secundarios.
• Evitar flotadores. Utilices fijas y no flotantes para asegurar una mayor estabilidad en la pequeña pantalla.
• Reducir márgenes y relleno. En tecnología móvil los márgenes deben ser más pequeños. Cantidades grandes de márgenes y paddings pueden hacer un fastidio a más de un internauta-móvil.
• Navegabilidad fácil. Proporcione únicamente enlaces relevantes y trate de engrosar el contenido con navegación inútil o irrelevante.
• Contrastes de color: Las pantallas móviles no tendrán la misma apariencia que un ordenador personal o portatil. Asegúrese de que los textos y colores son los adecuados para estos soportes.

La tecnología WAP prolifera y los sitios más oficiales y populares de Internet no dudan en adelantarse a este gran advenimiento de usuarios que buscan un lugar en Internet a través de sus móviles. Aunque los sitios web son en su mayoría sitios en inglés, se espera que en poco tiempo el mercado español invierta en publicidad para estos medios utilizando sitios adaptados a la portabilidad móvil e invierta de una manera inteligente.

Después de haber hablado de sitios web móviles echemos un vistazo a algunas capturas de pantalla como ejemplo. Muchas de estas capturas de pantalla han sido obtenidas de los sitios estrella de Internet.

Ebay, compañía lider en la compra-venta de productos por Internet.

SEGUIR LEYENDO ….

Con el siguiente ejemplo de actividad y pasividad de espaciados verticales podemos comprobar la importancia de estos elementos que deben configurarse en armonía con el diseño y los espacios del diseño. El espacio en blanco sirve para crear un diseño equilibrado y armonioso a menudo con el que uno se siente cómodo en la lectura. Por tanto, es esencial, su presencia equilibrada en sitios dirigidos sobre todo a lectores habituales.

Cuando no hay configuración de los espacios verticales todo es muy estrecho y agobiante y obliga a forzar al lector su vista sobre un espacio demasiado pequeño. En definitiva, no existe comodidad visual con el diseño.

Para solucionar este y otros problemas podemos dar un estilo al diseño a través de las hojas de estilo CSS. Debemos añadir márgenes, espaciados interiores, variedad de tipografías, tamaños, alineamiento entre caracteres y espaciado vertical entre líneas. No utilizar estos parametros es insensato y puede descomponer el trabajo textual.

El espacio en blanco llamado “whitespace” crea la posibilidad de balance y equilibro y es realmente importante, quizás lo esencial en un diseño orientado a una gran cantidad de textos a utilizar en él.

Analicemos el ejemplo gráfico superior para tener una mayor comprensión sobre la estética de los elementos visuales:

• 1. En el primer ejemplo del gráfico podemos contemplar que existe una ausencia de regularización de los espacios entre textos haciendo que encabezados, subtítulos y textos descriptivos permanezcan casi juntos. El problema de esto se encuentra en que al permanecer juntos, el ojo no puede discriminar correctamente los distintos elementos y tampoco separarlos. Se trata de una falta de racionalización que radica en su falta de espaciados blancos.

• 2. En el segundo epígrafe remarcado en el gráfico podemos discernir que se trata de un encabezado. Tras él, se encuentra un subtítulo descriptivo del encabezado que nos da la sensación de que se trata de un resumen corto previo al texto introductorio.

• 3. En el tercer epígrafe podemos ver como se nos introduce con armonía en el texto y en esta ocasión podemos separarlo del encabezado. Existe suficiente espaciado entre encabezado y texto que nos ayuda a dividirlo en un esqueleto entre “cabeza” y “cuerpo”. También la separación de lineas en el texto nos facilita una mayor orientación y continuidad de lectura. Para conseguir efecto, debemos utilizar un espaciado vertical mayor al tamaño de la fuente. Personalmente, recomiendo utilizar un espaciado vertical con un tamaño doble al tamaño de la fuente, es decir, si la fuente tuviera 12px, el espaciado vertical debería ser de 24px.

Estos son algunos de los diseños favoritos realizados en 2007 renovando la antigua imágen de las compañias. Destaca en los rediseños mejoras sobresalientes tanto en aspecto como en funcionalidades. Todos estos sitios recibieron rediseños que descencadenaron un gran cambio.

Twitter. Sus cambios permitieron a los usuarios vestir sus propias páginas con un look personal y distinguido. Más alla de eso, el servicio de “microbloggin” tiene mucha calidad y su diseño fácil y sencillo es intuitivo y manejable.

Galería de fotos de Mac. El servicio Mac realizó una versión actualizada que nos proponía un concepto diferente. Pequeños cambios tanto en color como en la presentación final pueden hacer que un diseño realmente hermoso.

Documentación de Google y hojas de cálculo. Una de las herramientas de documentos más populares de Google con un procesador de documentos en línea. Tuvo una enorme revisión a finales de Junio del 2007. Hizo una transición a colores pasteles en lugar de fuertes colores azules haciendo una nueva dirección hacia un concepto diferente. Ahora es más fácil y liviano organizar y compartir documentos con esta aplicación 2.0 online.

Adobe Buzzword. Mientras Google presumía de procesadora de hojas de cálculo y documentos, Adobe Systems Inc. estaba ocupado en adquirir la franquicia Buzzword, un procesador de textos moderno. Esta herramienta es preciosa y saca el máximo rendimiento de los editores web.

Pownce. Su expresión estilizada se debe a Daniel Burka quien diseñó el clásico Digg. Pownce hace muchas cosas correctas incluyendo los temas seleccionables por el usuario y llenar artículos útiles sin provocar el desorden.

Vimeo. El rediseño nos muestra un planteamiento más 2.0, esquinas redondeadas y textos grandes con gran simpleza. Hoy en día, es una plataforma de streaming multimedia de gran popularidad.

Picnik. Interfaz limpia y simple y sobre todo sencilla. El software de escritorio que permite editar fotos. Los usuarios de Flickr consiguen un berneficio extra con esta potente herramienta.

Current. Además de tener un diseño hábil e ingenioso para una televisión online tiene un estilo muy organizado y ordenado que nos hace la navegabilidad mucho más fácil.

Facebook para el iPhone. Hay una tonelada de aplicaciones de iPhone pero de los más hermosos es la versión de Facebook. El sitio fue diseñado para que fuese exprimido al máximo en cuanto a funcionalidad a pocos clicks.

Fluther. Sus diseños estan basados en temas relajantes. Ademas de tener una mascota de medusas con anteojos, el diseño es maravillosamente simple.

Es interesante conocer de vez en cuando la labor merecedora de muchas mujeres que se dedican de modo independiente a ofrecer servicios creativos. En un ambito donde cada vez hay más mayoria de hombres podemos encontrar a grandes diseñadoras web de enorme creatividad.

En una de las encuestas realizadas recientemente resultó haber tan sólo 16,1% de mujeres frente al 82,8% que son hombres.

Destacamos las siguientes:

Veerle Pieters

Jan

Shirley Ann

Mourylise Heymer Marreiros

Rina(Honey Design)

En el blog del creativo Lee Munroe podemos encontrar la lista completa que se compone de 26 chicas diseñadoras web.

Su nombre es Larissa Meek y aparte de ser Miss USA finalista, modelo, actriz y estrella de realitys americanos también es diseñadora y animadora 3D, y no una más, si no que esta diseñadora tiene mucho talento.

En su blog podemos encontrar una exhibición pública de sus artworks más profesionales, fotos y divagaciones personales.

Desde 2006 ha trabajado en la AgencyNet en Florida, una firma interactiva de múltiples premios y menciones de honor cuyos trabajos son de gran admiración. En su agencia trabaja junto a otros profesionales de enorme talento y trayectoria profesional.

En 1996 empezó la universidad en la escuela del instituto de arte de Chicago (SAIC) a la animación de 3D de estudio. La universidad costaba tanto que gas todo lo dinero que había salvado para la universidad en mi primer año. Necesitaba una beca o un milagro. Decidió competir en un desfile como una manera ayudar pagar la universidad y mejorar sus destreza de comunicación y fue seleccionada para representar Misuri a adolescente 1997 de Miss USA. No ocupó los primeros puestos pero la experiencia abrió puertas a la industria de modelos.

Visitar el blog de Larissa Meek. Haz click aquí.