Archivo de la categoría: Introducción al Diseño Web

2. Introducción al Diseño Web: El proceso de diseño Web.

Usabilidad Web

Usabilidad Web.

Usabilidad Web, parte primordial de la eXperiencia del Usuario (UX).

Se le llama usabilidad Web a la capacidad de un Sitio Web de ser:

  • comprendido,
  • aprendido,
  • usado y
  • ser atractivo para el usuario.

en condiciones específicas de uso.

Son beneficios de implementar la usabilidad Web:

  • Un aumento o mejora de:

  1. La tasa de conversión de visitantes a clientes del sitio Web.
  2. Satisfacción del usuario.
  3. Mejora la imagen y renombre.
  4. Optimización de los costes de diseño, rediseño y mantenimiento Web.
  5. La calidad de vida de los usuarios, reduciendo su estrés, incrementando su satisfacción y en consecuencia aumentando su productividad.
  • Una disminución de:

  1. Los costes de aprendizaje y esfuerzos.
  2. Los costes de asistencia y ayuda al usuario.
  3. La tasa de errores cometidos por el usuario y
  4. del retrabajo.

Fuente:

Definición por La Organización Internacional para la Estandarización (ISO) ISO/IEC 9126.

Elementos visuales que conforman una página Web.

Los elementos visuales, en términos de diseño, integran la composición de una página Web con una jerarquía de elementos que debe de tomar en cuenta la usabilidad y objetivo específico de cada página del Sitio (conversión).

Actualmente, una página de un Sitio Web, sea empresarial o personal, está conformada en similitud con los elementos de una página de un libro o revista (diseño editorial):

  1. Encabezado, mejor conocido como: header.
    Es la parte superior de una página Web, que usualmente consta de uno o más o más imágenes que pueden tratarse de banners publicitarios, fotografías y/o ilustraciones.
  2. Menú superior o barra de navegación.
    Se trata de un grupo de hipervínculos a las secciones más importantes y puede ubicarse arriba del header o sobre él.
  3. Contenido o cuerpo de texto.
    Como su nombre lo indica, se trata del contenido, que usualmente es texto complementado por imágenes, videos o audio.
    Dentro de él pueden colocarse también banners publicitarios estáticos o animados, formularios, botones, etc.
  4. Menú lateral.
    Muchas páginas Web actualmente cuentan con un menú lateral izquierdo o derecho, que en dispositivos móviles puede ser ocultado para otorgarle más espacio al contenido y su navegación.
  5. Pie, también llamado: footer.
    Es la última parte de una página ubicada debajo de todos los demás elementos, donde se coloca el colofón que consiste en el nombre y derechos de autor, fecha , datos de contacto como: la dirección, teléfono y redes sociales además de la información legal (términos y condiciones de uso) y avisos pertinentes (de privacidad, cookies).

Consideraciones generales del diseño adaptable a dispositivos móviles

Hace no tanto tiempo, en los inicios de la Word Wide Web la única forma de acceder a un Sitio Web era a través de una computadora de escritorio, con monitores que hasta hoy aumentan de resolución y tamaño año tras año.

Ahora, podemos visitar toda clase de Sitios Web desde laptops, tabletas y celulares (smartphones), que a la inversa, han reducido los monitores a los cuales se debe adaptar nuestro diseño y contenido, lo que es llamado en inglés responsive design o responsive layout.

En un Sitio Web adaptable a dispositivos, la Hoja de Estilo en Cascada (CSS) que controla la apariencia del Sitio Web indica distintas medidas y atributos según el tamaño del ancho del navegador.

Interpretación de las páginas.

Para una mejor experiencia del usuario el diseño debe ser flexible al tamaño del monitor:

  • A mayor tamaño: más contenido e imágenes de mayor tamaño.
  • A menor tamaño: el contenido e imágenes reducen y se ajustan.

Recomendaciones para diseñar un Sitio Web adaptable a dispositivos móviles.

Para una buena experiencia de usuario (UX) y usabilidad, las consideraciones generales del comportamiento del Sitio Web (según la W3C) son:

  • Consistencia en la dirección y la página Web:
    El visitante debe poder acceder con la misma dirección URI a exactamente la misma página Web en su computadora de escritorio y en cualquier dispositivo móvil aunque su contenido varíe ligeramente.
  • Explotar las capacidades del dispositivo:
    Se debe mostrar el mismo contenido a través de todos los dispositivos, a la vez que se aprovechen las capacidades de dispositivos que pueden proveer mejoras sobre otros.
  • Evitar implementaciones deficientes:
    Hay navegadores que no interpretarán el contenido de acuerdo a lo planificado y hay deficiencias en la implementación. Si un dispositivo es conocido por tener limitaciones particulares, el diseñador y/o desarrollador debe ajustarse a las Mejores Prácticas para evitar en la medida de lo posible, restringir su contenido solo a ciertos dispositivos.
  • Pruebas:
    Al realizarse pruebas, se debe procurar utilizar el dispositivo real en la versión que se estima utilizará el mercado objetivo.
    De utilizarse un emulador, es preferible utilizar el de la empresa que lo manufactura.

Otras consideraciones son:

Navegación y enlaces:

  • Permitir el acceso desde direcciones cortas.
  • Barra de navegación superior de una sola línea.
  • Estructura balanceada evitando el exceso de hiperenlaces.
  • Navegación consistente agrupada y proveer un enlace hacia arriba (el principio de la página).
  • Permitir el uso de las flechas del teclado.
  • Identificación clara del destino de un hiperenlace.
  • Evitar el uso de Image Maps a menos que se conozca que se soporte efectivamente por el dispositivo.
  • Actualización, redireccion y apertura de ventanas nuevas:
    • No causar que se abran pop-ups, ventanas nuevas, ni el cambio de ventana sin informar previamente al usuario.
    • No auto-actualizar una ventana, sin proveer al usuario de una forma de detenerla.
    • No usar re-dirección automática a través del HTML, de ser necesaria implementarla mendiante  HTTP 3xx (como la redirección 301 o 302).
  • Mantener el número de enlaces a recursos (Como CSS, imágenes, etc.) externos al mínimo.

Diseño de página y contenido:

  • Evitar las barras de desplazamiento horizontales.
  • Optimizar el peso de las imágenes y otros recursos.

Definiciones en la página:

  • Evitar el uso de iFrames.
  • Usar el elemento Table solo para tablas.
  • Evitar el uso de texto imágenes para sustituir texto real (que puede ser seleccionado y copiado).

Datos introducidos por el usuario (formularios):

  •  Minimizar el trabajo del usuario, especialmente la escritura mediante el teclado.
  • Habilitar la navegación en el formulario mediante las flechas y números del teclado.

Exportar como HTML

Los 3 editores gráficos Illustrator, Photoshop y Gimp de los que ya se ha hablado en este blog, cuentan con herramientas para subdividir una imagen basándose en las guías de la imagen; el primer paso para exportar imágenes, texto y crear un documento HTML de la manera más práctica.

  • Gimp

En Gimp, la herramienta Gillotina corta la imagen a lo largo de cada guía, de manera similar a cortar documentos reales con una guillotina para papel, creando imágenes nuevas con sus piezas.

  • Photoshop

En una imagen con guías, seleccione la herramienta Slice o en español, Sector, haz clic en Slices Guides o Sectores guías en la barra de opcion.

  • Illustrator

En una imagen con guías, seleccione del menú Objeto > Slice o en español, Sector > Crear a partir de Guías.

Para cambiar el tipo de Sector a uno de imagen, texto o espacio sin imagen, haz clic sobre la placa o icono sobre ella, al hacerlo aparecerán opciones que te permitirán definir el tipo adecuado, agregar etiquetas, cambiar su nombre, agregar el texto y enlaces que se van a exportar.

Toma en cuenta que al seguir este procedimiento todas los Sectores o Slices creados anteriormente, son borrados y recuerda iniciar cada enlace con «http://» para evitar errores de vinculación..

Exportar como HTML

Exportar como HTML creará automáticamente un documento HTML y una carpeta con las imágenes a partir de las imágenes nuevas creadas a partir de los Sectores de la imagen abierta.

Para esto es importante considerar los formatos de imagen más adecuados para su función:

  • JPG: Es la más recomendable para fotografías por su gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores, por ejemplo sólo grises o para animaciones.
  • PNG: fotografías editadas para contener transparencia, de mayor calidad que los .gif.
  • Gimp

El filtro: http://docs.gimp.org/es/python-fu-slice.html exporta como varios formatos, entre ellos html.

  • Illustrator o Photoshop

En Illustrator o Photoshop puedes Guardar para Web en el menú Archivo > Guardar para Web.

Con MEGAWEB EXPRÉS aprenderás a usar estos archivos para desarrollar un Sitio Web dinámico compatible con dispositivos móviles  y más diseñando un portal Web.

Regístrate hoy en el VideoTaller: MEGAWEB EXPRÉS.

 

CSS Sprites e interactividad

CSS Sprites

Es una forma de reducir el tiempo de carga de una página Web ahorrando también el uso de ancho de banda al llamar a una sola imagen que contiene a todas o varias imágenes del Sitio Web, mostrando con CSS únicamente las partes necesarias.

Interactividad

Al colocar el mouse o hacer clic sobre cualquier enlace, ya sea imagen, botón o texto, algo llamado conocido en inglés como hover y al hacer clic, es posible, cambiar sus características:

  • En el caso del texto, cambiar su color, decoración, peso, tamaño, etc.
  • En el caso de imágenes, cambiar una por otra, cambiar su opacidad, tamaño, etc.

Aprende esto y más diseñando un portal Web. Regístrate hoy en el VideoTaller: MEGAWEB EXPRÉS.

Crear imágenes con animación

Crear imágenes con animación como gifs animados para banners publicitarios, MEMES, botones, divisores y para otros usos es muy sencillo.

Es recomendable usar la menor cantidad de colores posibles para optimizar su tamaño y evite alternar colores muy contrastantes y rápidos que puedan causar mareo, convulsiones y cualquier molestia al usuario.

En Gimp:

Usar GIMP para animar, requiere pensar en cada Capa como un Cuadro que conforma la animación.

Duración de cada cuadro:

Si fuera distinta para algún cuadro, tendríamos que indicarla junto al nombre de la capa en milisegundos y entre paréntesis, por ejemplo si queremos que un cuadro dure un segundo pondríamos al lado del nombre de la capa (1000ms).

Animaciones con transparencias:

Combinar y reemplazar.

Si nuestra imagen está compuesta por capas con transparencias tenemos dos métodos para manejar nuestros cuadros:

  1. Combinar: Yuxtapone las capas mostrando que hay debajo de aquellas con transparencia.
  2. Reemplazar: Reemplaza por completo una capa o cuadro con otro.

Se señala colocando combine para combinar o replace para reemplazar en la capa entre paréntesis al lado del tiempo:

Nombre de la capa(xxxxms)(combine) ó (replace)

Degradados.

Para evitar perder la suavidad en degradados de color sólido a transparencia es recomendable simularla con capas en las que el degradado sea de color sólido al color de fondo.

Previsualizar la animación:

Mediante el Previsualizador podemos en cualquier momento ver como va quedando nuestra animación, abriéndolo en: Filtros > Animación > Reproducir Animación.

Al guardar una animación a color es necesario indexarla, ésto puede hacerse automáticamente al exportar o manualmente en: Imagen > Modo > Indexado (Alt+I).

Exportar gif:

Por último hay que recordar guardar la animación final en: Archivo > Guardar, señalando la extensión .gif y marcando la casilla de «Guardar como animación» y la casilla «Convertir a tonos de gris» si es en blanco y negro o «Convertir a indexada…» si usa todo tipo de colores.

Al exportar se presentan las opciones de:

  • Entrelazar: Carga la imagen de forma progresiva, mostrando distintos niveles de definición o calidad visual con cada pasada, hasta que se completa.
  • Comentario GIF: Espacio para comentar la imagen.
  • Repetir eternamente: reinicia la animación cuando finaliza.
  • Pausa entre cuadro cuando no se especifique: Cuando no se especifica en el nombre de capa ninguna duración todas tomarán la que se especifique aquí.
  • Colocación de cuadros cuando no se especifique: Igual que la anterior pero para elegir entre «Combinar o Reemplazar».

Optimizar y exportar fotografías y otras imágenes en mapa de bits

Importar las imágenes

Al importar imágenes en mapa de bits a Photoshop o Gimp para incluirlas en un Sitio o diseño Web, es recomendable empezar por:

  • Escanear la fotografía revelada,
  • Escanear los negativos o
  • Importar los archivos de las fotografías desde la cámara digital.

Optimizar imágenes en mapa de bits

Es importante contar con fotografías que cuya corrección de color, contaste y retoque fotográfico sean innecesarios o ya hayan sido aplicados, para como diseñadores Web, enfocarnos en optimización del modelo de color, resolución, ajuste del tamaño y tipo de archivo para Web.

Encuadre

  • Recorte en Gimp:

Para elegir la herramienta de Recorte. Has clic en el botón  en la caja de herramientas o en el menú: Herramientas > Herramientas de transformación > Recortar en la ventana de la imagen.

Cuando cambie el cursor, has clic y arrastra formando un rectángulo que cubra únicamente las partes de la imagen que desees conservar, si tu primera selección no fue de tu agrado, puedes arrastrar las esquinas o bordes del rectángulo para cambiar las dimensiones del área seleccionada y hacer doble clic sobre la imagen para aplicar el recorte.

Sus dimensiones y proporción se muestran en la barra de estado.

Exportar para Web.

  • En Gimp:

Archivo > Exportar como… > Seleccione el tipo de archivo.

  • En Photoshop:

Archivo > Exportar para  Web, seleccione el tipo de archivo desde el menú en la parte superior de la nueva ventana.

Las extensiones recomendadas para publicar las fotografías en Internet son:

  • JPG: Es la más recomendable para fotografías por su gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores, por ejemplo sólo grises o para animaciones.
  • PNG: fotografías editadas para contener transparencia, de mayor calidad que los .gif.

Extensiones recomendadas para compartir originales:

  • PSD: Imágenes a editar en Adobe Photoshop.
  • EPS
  • XCF: Imágenes a editar en Gimp.

Es recomendable que los archivos de imágenes se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Fuente: http://docs.gimp.org/es/

Crear y exportar imágenes vectoriales

Al crear imágenes vectoriales en Inkscape o Illustrator para iniciar el diseño Web, es recomendable empezar por escanear o fotografiar el boceto de la interfaz, para digitalizarla:

  1. Trazándolo con la herramienta: Pluma.
  2. Usando las formas predeterminadas como: polígonos, círculos y líneas para recrear todos sus elementos.

Exportar para Web.

Una vez digitalizada la imagen de la página de inicio y otras páginas con estilos propios, ésta debe ser dividida en secciones que contrendrán solo fondos, texto o imágenes, ésto puede ser visto a más profundidad en el video de ésta sección del VideoTaller.

Muchos programas para diseño presentan el menú: Archivo > Exportar para Web o similares, para hacer más simple la exportación a html, jpg, gif y png a partir de la imagen de interfaz.

Las extensiones recomendadas para publicar las imágenes en Internet son:

  • JPG: Imágenes complejas, que contengan gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores o con animación.
  • PNG: Imágenes que contengan transparencias, de mejor calidad que los .gif.

Es buena práctica mantener los nombres de archivos sin espacios, ni caracteres especiales y en minúsculas.

Compartir los archivos originales editables.

Las extensiones recomendadas para compartir los archivos originales son:

  • SVG.
  • EPS.
  • AI.

Es recomendable que estos archivos se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Modelo de color para Web

La mayoría de los dispositivos que se usan con una computadora como el monitor y escáner, usan el modelo RGB (modelo de reflexión o aditivo), excepto los que manejan tintas, como las impresoras, que suelen usar el modelo CMYK (modelo sustractivo).

RGB:

RGB son las siglas en inglés de Red, Green, Blue, que significa rojo, verde y azul.

Las imágenes en Internet usan éste modelo de color basado en los colores primarios de la luz que al mezclarse, representan el espectro visible por el humano.

Fidelidad:

El modelo de color RGB no define por sí mismo con exactitud qué rojo, verde o azul, por lo que los mismos valores RGB pueden parecer distintos en diferentes monitores en cualquier dispositivo que use éste modelo.