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 15
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 […]

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 […]

mayo 31st, 2017

Conexión a Internet y sus servicios

Cómo establecer una conexión a red local y servicios de Internet. La red local de trabajo o LAN por las […]

junio 10th, 2016

Temario de Fundamentos de programación

Recientemente inicié la licenciatura: Ingeniería en Desarrollo de Software, mi objetivo principal de estudiar esta segunda carrera es aprender a […]

mayo 9th, 2016

Visores de realidad virtual hechos de materiales reciclados

Estos lentes o visores de realidad virtual gratuitos se arman a partir de empaques, convirtiendo un celular smartphone en un […]

mayo 1st, 2016

Rediseño de JanikMaC.com para el #May1Reboot

JanikMaC.com fue uno de los Sitios Web que participó del rediseño masivo mundial, éste 1º de Mayo (2016) cuando decenas de Sitios Web publicaron […]

abril 14th, 2016

Registros del servidor

En la mayoría de los Sitios Web, se almacenan registros en el servidor que registran automáticamente las búsquedas, clicks en hipervínculos y otros tipos de […]

abril 7th, 2016

Caché de datos

La Caché de datos de aplicaciones almacena los datos en un dispositivo para mejorar la velocidad en la que se carga […]