List

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

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

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

resolucion

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

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

  1. 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.
  2. 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
  3. 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
  4. 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

  Posts

1 2 3 16
septiembre 12th, 2013

Bienvenido al Blog JanikMaC

Bienvenido (a) a mi Blog sobre e-business y Diseño Web. Mi Blog está dedicado a resolver sus dudas e informar […]

febrero 6th, 2023

Una propuesta Web personalizada para mejorar u negocio

Una propuesta Web personalizada para mejorar su negocio, mediante el desarrollo de un sitio web adecuado y atractivo a su […]

diciembre 26th, 2022

SEO para principiantes: Consulta de búsqueda

Una consulta de búsqueda en SEO es un término que se refiere a la palabra o frase que un usuario […]

diciembre 23rd, 2022

El significado de la navidad y sus símbolos

La navidad es una de las festividades más importantes del año para muchas personas alrededor del mundo. Esta celebración conmemora […]

diciembre 22nd, 2022

Fundamentos de la edición o montaje no lineal

El montaje no lineal es un proceso de edición de video que permite a los editores trabajar con fragmentos de […]

diciembre 22nd, 2022

El poder del contenido audiovisual

Medios audiovisuales La generación de contenido audiovisual abarca una amplia variedad de áreas y puede ser utilizada en diferentes contextos […]

diciembre 21st, 2022

El Gopher y la World Wide Web

El gopher es un protocolo de red diseñado para facilitar la recopilación y distribución de información en Internet. Fue desarrollado […]

abril 27th, 2018

Protegido: Guía de estudio para el examen de Cálculo diferencial

No hay extracto porque es una entrada protegida.

abril 18th, 2018

Solicito: Practicante en diseño gráfico y en producción multimedia.

Solicito: Practicante en diseño gráfico y en producción Multimedia.
Favor de enviar portafolio.
Ofrezco: Aprendizaje en diseño gráfico y Web, la posibilidad de cumplir con horas de práctica requeridas, carta de recomendación, prácticas (monitoreadas) desde casa, experiencia y portafolio real.​

marzo 26th, 2018

¿Cómo hacer cambiar a una persona?

A menudo, en lugar de ocuparnos de nuestros propios cambios decidimos cuál de nuestros amigos necesita cambiar. Esto también constituye […]