Métodos de diseño

Introducción.

El diseño tiene fundamentos racionales y es la metodología el puente entre los principios para llevar a cabo el diseño y la investigación necesaria para completar y justificar el proyecto de forma objetiva.

Si no sabes por donde empezar a Diseñar tu Sitio Web

Esta es una guía metodológica para el desarrollo del proyecto de Diseño Web siguiendo los siguientes puntos:

  1. Análisis del proyecto de diseño.
  2. Investigación.
  3. Desarrollo gráfico de la propuesta.
  4. Desarrollo Web.
  5. Lanzamiento y mantenimiento del Sitio Web en línea.
  6. Evaluación del impacto social.

Fuente: metodología basada en la Guía metodológica para el desarrollo de proyectos gráficos de IADA-UACJ.

Boceto para aplicación Web.

Bienvenida al blog

¡Bienvenido o bienvenida al Blog GrafiTÚ sobre diseño y desarrollo Web!
Eres oficialmente nuestro visitante favorito.

Nos encanta recibir retroalimentación y esperamos que participes en nuestro Sitio Web.

Por favor, tómate tiempo para considerar:

  • Formar parte de los usuarios registrados que tienen acceso a Lecciones y DESCARGAS gratis.
  • Seguirnos en el RSS Feed:
  1. De la página de inicio.
  2. Del Blog.

– ¡Gracias por tu interés en GrafiTÚ!,
– LDG Janik Ma. C.

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.

 

¿El negro es propiamente un color?

El negro no es en sí un color, sino la ausencia de color y/o de luz.

Puede proyectar vacío, muerte, degradación a la vez que en psicología es reflejo de sabiduría y prudencia.

El negro simboliza las fuerzas subterráneas y el abandono, por ejemplo, un pájaro negro es signo del inconsciente en vigilia.

La tonalidad gris oscuro representa la potencia contenida y algunos negros son las imágenes de la renuncia o de la rebelión y la violencia.

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/

Espacio de color

Un espacio de color o modelo de color es un modelo para la representación matemática del color que describe la forma en la que los colores pueden representarse, usualmente compuesto de 3 o 4 valores, por ejemplo: CMYK y RGB.

CMYKLos modelos de color sin una función de mapeo asociada a un espacio de color absoluto, donde las interpretaciones de los colores en el espacio están definidos colorimétricamente sin referencias a factores externos, es prácticamente un sistema de color arbitrario sin conexión a un sistema de interpretación de color.

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.

Profundidad de color

La profundidad de color es el número de bits usados para indicar el color o el número de bits utilizado por cada componente en un solo pixel en una imagen de mapa de bits (raster image).

Debido a la naturaleza del sistema binario, una profundidad de bits de n implica que cada píxel de la imagen puede tener 2n  valores posibles y por lo tanto, representar 2n colores distintos.

La profundidad de color comúnmente se representa en bits por pixel (bpp), pero también se puede representar en bits por channel (bpc), bits por color (bpc) o bits por muestra (abreviado bps por bits per sample).

Los valores de profundidad de color suelen ser divisores o múltiplos de 8: 1, 2, 4, 8, 16, 24 y 32 debido a que 1 byte es usualmente de de 8 bits (llamados octetos), excepto en la profundidad de color de 10 o 15 bits usada por determinados dispositivos gráficos.

Color indexado.

Para profundidades de color menores o iguales a 8, los valores de los pixeles hacen referencia a tonos RGB indexados en una tabla llamada caja creadora de colorización o paleta de colores.

Algunas profundidades de color en la gama baja son:

  • 1 bpp: 21 = 2 colores: monocromo.
  • 2 bpp: 22 = 4 colores: CGA.
  • 4 bpp: 24 = 16 colores: mínima profundidad aceptada por el estándar EGA.
  • 8 bpp: 28 = 256 colores: VGA.

Las imágenes .gif utilizan la paleta de color indexado, de ahí que su límite sea de 256 colores, mientras que en fotografía digital el color es de 24 bit u 8 bit por canal de color RGB.

Color directo.

Cuando los valores de la profundidad de colores es mayor, es más práctico codificar dentro de cada pixel los 3 valores RGB (rojo, verde y azul).

Color de alta resolución o HiColor:

En la profundidad de 15 bpp

Se utilizan 5 bits para codificar la intensidad de cada uno de los 3 colores.

  • Es posible representar: 32 x 32 x 32 = 32768 colores en cada pixel.

En la profundidad de 16 bpp

Se utilizan 5, para codificar la intensidad del rojo, 5 para el azul y 6 para el verde.

Ya que  se sabe que el ojo humano es más sensible al color verde y que puede discriminar más tonos que varían en su intensidad.

  • Es posible representar: 32 x 64 x 32 = 65536 colores en cada pixel.

Color real o True Color.

Se dedica un octeto entero a representar la intensidad luminosa de cada uno de los tres tonos, lo cual permite:

  • 24 bpp: Cada pixel pueda tomar 224 = 256 x 256 x 256 = 16.777.216 colores distintos.
  • 32 bits: Se siguen usando 24 bits, pero en cuatro canales, habiendo uno adiconal llamado Alfa, que permite la transparencia en imágenes como las .png.

Procesamiento de precisión.

Las imágenes de 48 bits no parecen mejores que las imágenes de 24 bits (que ya contienen más colores de los que el ojo humano puede distinguir), pero la existencia de más sombras entre colores (65.536 en lugar de 256) significa que se pueden realizar más operaciones en la imagen sin el riesgo de notar solapamiento o posterización (pérdida de detalle).

  • 48 bpp o 16 bits por cada canal de color.
  • 64 bits puede referirse al total de bits cuando el canal Alfa es utilizado.