462 Interfaces Web y Moviles

CARRERA DE 1 AÑO
CURSO : INTERFACES WEB Y MÓVILES

DURACIÓN : 32 Horas / 16 Sesiones
PRE – REQUISITO : Conocimientos basicos de Photoshop
SUMILLA
En este curso el alumno crea interfaces de productos o medios innovadores en base a las necesidades del usuario, aprendiendo
como colocar los objetos de manera óptima en el espacio para que sus mensajes tengan la recepción deseada, tanto para el medio
Web y medio móviles.
Este curso es teórico-práctico se explican los conceptos de lo que son las interfaces, se analiza al usuario de dichas interfaces, se
enseña cómo se deben colocar los elementos en el espacio utilizando ejemplos prácticos, videos y conceptos puntuales que
servirán para que el alumno no solo conozca la temática de la realización de un Diseño de interfaces, sino basándose en los test de
usabilidad para que pueda argumentar su trabajo frente al cliente.
SES CONTENIDO
FUNDAMENTOS DEL DISEÑO WEB:

• Percepción visual: Que es el diseño web?, El diseñador, El Target, Usuario Multitarea, Nivel de diseño,
1 Lenguaje visual global, Contenido, Navegadores, Dispositivos
• Fundamentos de la composición: El equilibrio visual, La tensión compositiva
• Color, tipografía, iconos: Adobe Kuler, Square font
PROCESO DE DESARROLLO WEB:

• Discusión,
• Planear la estructura del sitio,
• Estructuras de páginas (Wireframe),
• Planear el contenido,
• Iniciar el diseño,
• Consultar al cliente,
• Remodelamiento del diseño,
• Aprobación del cliente,
• Diseño adicional de la página,
• Confirmación, Construyendo el HTML y CSS,
2 • Prueba,
• Publicación
• Factores de calidad de una web: Accesibilidad, Navegabilidad, Usabilidad, Iconografía.
BRIEF DEL PROYECTO:

• Datos del cliente, ¡Su empresa! ¡Su marca!,
• Objetivos del sitio web,
• Secciones del sitio,
• Comercio electrónico,
• Actualizaciones del sitio,
• Datos para el sitio,
• Observaciones
PLANEAMIENTO DEL PROYECTO I:

• Presentación,
• Presupuesto,
3
• Contrato
• Diagrama de Gantt,
• Mapa de ideas
ARQUITECTURA DE LA INFORMACIÓN:
• Wireframe o mockup
COMPONENTES DE UNA INTERFAZ:

• Cabecera
4 • Los sistemas de navegación
• El cuerpo de la pagina
• El pie de pagina
• Los espacios en blanco
• Lenguajes de marcas
• Maquetación web
• Mapa de navegación
QUE ES EL DISEÑO RESPONSIVE (DESKTOP, TABLET, MOBILE)

• Tamaño de pantallas
• Resoluciones
• Relación estética y funcional.
5 • Exploradores para móviles.
DISEÑO DE LOS ELEMENTOS GRÁFICOS:

• Diseño de la estructura web.
• Diseño de contenidos, títulos, marcos y adornos.
• Diseño de barras de navegación y menús desplegables.
• Optimización de imágenes.
• Manejo de imágenes y creación de banners
6 • Diseño de formularios
• Creación de favicon
• Retoque y efectos web en PhotoShop.
• Sectores en PhotoShop, generación de estilos CSS.

7 • Diseño de una interfaz para Desktop: Website.
• Diseño de una interfaz para Tablet: Lanscape.
8 Ejercicios de aplicación.
DEFINICIÓN DE WEB MÓVIL

• ¿Qué es una web móvil?
• ¿Para qué sirve una web móvil?
• Ventajas de las webs móviles
• Tipos de webs móviles
• Diferencias entre web móvil, app nativa y app híbrida
• Cómo dar a conocer una web móvil (SEO Móvil)
• Cómo rentabilizar una web móvil
9 • Pagos desde el móvil
DISEÑO, USABILIDAD E INTERFAZ DE LA WEB MÓVIL

• Estructura, creatividad y diseño
• Accesibilidad web
• Adaptaciones automáticas de la web a móvil (CSS)
• Tablets y Smartphones
DISEÑO DE INTERFACES PARA APLICACIONES MÓVILES - Android

• Visión creativa
• Principios del diseño para Android
• Descripción de UI
10 • Estilo:
• Dispositivos y exhibiciones
• Plantillas
• Eventos táctiles
• Métricas y rejillas
• Tipografía
• Color
• Iconografía
• Patrones:
• Gestos
• Estructura del APP
• Navegación
• Barra de acción
• Disposiciones del multi-cristal
• Widgets
• Ajustes
• Compatibilidad y Accesibilidad
DISEÑO DE INTERFACES PARA APLICACIONES MÓVILES - IOS 7

• El diseñar para IOS 7
• Anatomía del IOS App
• Iniciando y deteniendo
• Disposición
11 • Navegación
• Contexto
• Interactividad y Feedback
• Animación
• Color y tipografía
• Iconos y gráficos
• Terminología y Fraseología
• Integrando con IOS
INTEGRACIÓN CON HTML: MUSE

• Flujo de trabajo
• Flujo de trabajo impreso contra flujo de trabajo web
• Flujo de trabajo en Muse
• Planeación de tu sitio
• Diseño de páginas
• ¿Qué aparece en una página normal?
• Bocetos
• Bocetos con Muse
• Estructura de un sitio con la vista de planeación
• ¿Qué archivos genera Muse?
12
EL PODER DE LAS PÁGINAS
• Páginas
• Páginas Maestras
• Trabajando las páginas maestras en tu sitio
• Edición de las propiedades de la página
• Creación de vinculas
EL JUEGO DE LOS RECTÁNGULOS
• Trabajando con rectángulos
• Agregando color - rellenos y contornos
• Agregando efectos a los rectángulos
• Cambiando el orden de los rectángulos
• Cambiando las propiedades de los bordes
Creación de rectángulos con ancho completo
TIPOGRAFÍA
• El poder del texto
• Creación de campos de texto
13 • Edición de texto
• Creación y aplicación de estilos de párrafo
• Creación y aplicación de estilos de carácter
• Títulos
• Creación de títulos
• Metadatos
TRABAJO CON IMÁGENES

• Selección del formato de imagen ideal
• Colores web seguros
• Colocar imágenes en las páginas
• Agregar un logo
• Uso de un patrón de fondo
• Uso de una imagen de fondo
• Uso del panel Assets
• Agrupación de objetos
PERSONALIZACIÓN CON WIDGETS

• Trabajo con widgets
• ¿Cómo trabaja el widget menú?
• Panel de pestañas
• Eliminando un panel
• Composición con widgets
• Slidewshows
• Agregar un Google Map a la página
• Agregar un componentes de Twitter
MUSE Y OTRAS APLICACIONES

Agregar un botón de Photoshop
PRE VISUALIZACIÓN DE UN SITIO

• Pre visualización de páginas
• Exportación a HTML para un navegador de prueba
¿Para qué realizar pruebas?
PUBLICACIÓN DE UN SITIO
• Adobe ID
• Publicación en un sitio temporal
• Editando y actualizando el sitio
• Edición y ejecución
• Alternativas de alojamiento
14 DISEÑO DE PROTOTIPO PARA MÓVILES

• La plataforma Prototyper
• Prototipado responsive
• Gestión de iconografía móvil
• Definición de estilos
15 • Cargando pagina
• Exportar a HTML interactivo
• Pruebas
16 EXAMEN FINAL + PROYECTO FINAL
Informes e Inscripciones
Av. Benavides 715, Miraflores
Telf: 242-6890 / 242-6747
arteydiseno@ipad.edu.pe
Informes@ipad.edu.pe
http://www.ipad.pe/portal/inicio

462 Interfaces Web y Moviles

Cargado por

Copyright:

Formatos disponibles

462 Interfaces Web y Moviles

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

462 Interfaces Web y Moviles

Cargado por

Copyright:

Formatos disponibles

CARRERA DE 1 AÑO

CURSO : INTERFACES WEB Y MÓVILES

FUNDAMENTOS DEL DISEÑO WEB:

PROCESO DE DESARROLLO WEB:

BRIEF DEL PROYECTO:

PLANEAMIENTO DEL PROYECTO I:

COMPONENTES DE UNA INTERFAZ:

QUE ES EL DISEÑO RESPONSIVE (DESKTOP, TABLET, MOBILE)

DISEÑO DE LOS ELEMENTOS GRÁFICOS:

• Sectores en PhotoShop, generación de estilos CSS.

DEFINICIÓN DE WEB MÓVIL

DISEÑO, USABILIDAD E INTERFAZ DE LA WEB MÓVIL

DISEÑO DE INTERFACES PARA APLICACIONES MÓVILES - Android

DISEÑO DE INTERFACES PARA APLICACIONES MÓVILES - IOS 7

INTEGRACIÓN CON HTML: MUSE

TRABAJO CON IMÁGENES

PERSONALIZACIÓN CON WIDGETS

MUSE Y OTRAS APLICACIONES

PRE VISUALIZACIÓN DE UN SITIO

14 DISEÑO DE PROTOTIPO PARA MÓVILES

16 EXAMEN FINAL + PROYECTO FINAL

También podría gustarte