El diseño de Interfaz puede ser considerada la última etapa de la planificación. Mediante la interfaz se representa visualmente el formato y secciones en las que todo el contenido será dispuesto tal y como verá la página el usuario y una vez aprobado su diseño, ésta puede ser exportada directamente desde la aplicación gráfica como imágenes optimizadas para Web, HTML ó CSS, dependiendo de la aplicación.
Usualmente se presentan para la aprobación del cliente 2 ó 3 diseños de 2 tipos de páginas: La página de inicio y basada en ella 1 página interior.
Eligiendo una aplicación gráfica
Interfaz
El software de Adobe más popular para el diseño de la Interfaz Web son Fireworks, Photoshop e Illustrator, de éstos 3 Fireworks es el más adecuado para exportar para Web, permitiendo crear gráficos en vectores que no se distorsionan al ser redimensionados, exportar los códigos de colores y otros atributos a nuestra hoja de estilo CSS integrado con Dreamweaver y Flash.
Edición al 2016: Firefox ha sido descontinuado y Flash ya ha pasado a segundo término, siendo JavaScript una mejor alternativa para la programación comportamientos como animaciones y efectos que lograr establecer una mayor interactividad con el usuario desde cualquier dispositivo y navegadores principales. como Chrome, Firefox, Safari, Opera e Internet Explorer, ahora llamado Microsoft Edge.
El espacio de color adecuado
RGB, laser (BOY CC BY-SA 3.0)
El espacio de color más adecuado para Web es el llamado RGB por sus siglas en inglés para Red, Green y Blue que significa Rojo, Verde y Azul, ya que son los colores de los que está conformadas las imágenes en cualquier clase de monitor.
Resolución
Resolución
La resolución indica cuánto detalle puede observarse en una imagen.
La resolución para las imágenes a publicarse en Internet se mide en PPI, siglas en inglés para Pixels Per Inch, en español Pixeles por Pulgada, reconocible por sus siglas en mayúscula: PPP.
Al hacer clic en Exportar para Web en Fireworks, Photoshop o Illustrator la resolución a la que las imágenes son convertidas automáticamente es de 72 Pixeles Por Pulgada, la cual es recomendada popularmente .
Diferencia entre PPP y ppp
Es importante distinguir que PPP está relacionada al tamaño del monitor en pulgadas y nuca debe confundirse ni usarse como sinónimo de ppp, con minúsculas, que significa puntos por pulgada (DPI) y es una medida para impresión.
El color y la forma
Psicología del color (Team Dalog CC BY 2.0).
Para poder diseñar para Internet o para impresión efectivamente, es necesario saber usar el color y formas apropiadas para apoyar el mensaje que se quiere transmitir, es decir, el Significado de las formas básicas y Psicología del color.
El Manual de Identidad Visual Corporativa o imagen corporativa.
El Manual de Identidad Visual Corporativa establece las bases y delimita el uso del logo, sus colores institucionales y tipos de letra de tal manera que se asegure su reproducción con fidelidad.
Si la empresa o persona para la que está diseñando cuenta con un Manual de Identidad Visual Corporativa es probable que ya cuente con el diseño de interfaz, por lo menos el correspondiente a la página de inicio.
Usualmente dichos manuales suelen estar acompañados los archivos en vectores del logo., sus aplicaciones como lo es en éste caso el Diseño Web, papelería básica, artículos promocionales, etc.
Si el manual no incluye el Diseño de interfaz, diséñela en base a los lineamientos que delimita, especialmente para el uso correcto del logo, tipo de letra y colores institucionales en RGB.
Actividades para el diseño de Interfaz
- Antes de bocetar su diseño, asegúrese de obtener el Manual de Identidad Visual Corporativa, si la empresa o persona ya cuenta con él.
- Si no cuenta con un manual, al bocetar su diseño, liste las características y cualidades más destacadas del producto o empresa para la cual está diseñando y represente cada uno con una forma utilizando ése elemento tanto para el diseño de página de inicio como para las páginas interiores
- Por ejemplo, si ha elegido el círculo para evocar la calidad de su producto, puede utilizarlo en todas las viñetas, algunos botones y en fotografías
- Haga lo mismo con los colores, priorizando el uso de los colores institucionales o de la campaña, si éstos ya están definidos.
Deja una respuesta
Lo siento, debes estar conectado para publicar un comentario.