diseño de interfaces, Guías, Proyectos, Investigaciones de Diseño de Redes

¡Descarga diseño de interfaces y más Guías, Proyectos, Investigaciones en PDF de Diseño de Redes solo en Docsity!

DISEÑO DE

INTERFACES

MULTIMEDIA I

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC Curso Diseño De Interfaces Multimedia I ( 2355 ) Formato Manual de curso Autor Cibertec Versión 2019 Páginas 177 p. Elaborador Trujillo Hoyos, Luis Alfredo Revisor Arroyo Salgado, Sergio Jair

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC Unidad de Aprendizaje 3 DISEÑO Y COMPOSICIÓN EN ADOBE XD 73 3.1. Tema 6 : Adobe XD Introducción 75 3.1.1. :^ Características principales 75 3.1.2. :^ Entorno de Adobe XD 76 3.1.3. : Configuración de un artboard 76 3.1.4. : Interfaz de Adobe XD: Barra de Herramientas 81 3.1. 5. : Formas básicas en Adobe XD 82 3.1. 6. : Herramienta pluma en Adobe XD 87 3.2. Tema 7 :^ Propiedades de diseño y composición en Adobe XD 91 3.2.1. :^ Herramienta texto en Adobe XD 91 3.2.2. : Imágenes y máscaras 94 3.2.3. : Alineación de objetos y capas 98 3.2.4. : Combinación y agrupación de formas 102 3.2.5. : Creación de paleta de colores 106

3. 2. 6. :^ Símbolos 108
4. 2. 7. :^ Diseño de botones 110
5. 2. 8. : Componiendo con Grip Design 111
6. 2. 9. : Diseño de un UI Kit 113
7. 2. 10. : Diseño de un Mockup (Diseño interfaz) 115 Unidad de Aprendizaje 4 RECURSOS INTERACTIVOS PARA WEB 155 4.1. Tema 8 : Adobe XD - Prototipo y exportación 157 4.1.1. :^ Introducción a la interactividad y experiencia de usuario con Adobe XD 157 4.1.2. : Integración de los artboard (interacción) 158 4.1.3. : Pruebas del protipado 170 4.1.4. : Exportación de archivos para etapa de producción Web 172 Bibliografía 175

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO

Presentación

El curso Diseño de Interfaces multimedia I es un curso teórico práctico, en el cual, el alumno conocerá los conceptos fundamentales del diseño Web y los aplicará en el diseño y creación de interfaces multimedia y recursos Web, orientados a las necesidades del usuario. El alumno aplicará los conocimientos de diseño gráfico ya adquiridos en la construcción de interfaces multimedia, logrando así que sus mensajes tengan la recepción deseada por parte del usuario. En la primera unidad de este curso se explican los conceptos básicos del diseño Web tales como HTML, hosting, dominio, los fundamentos de este como la navegabilidad, funcionalidad y usabilidad; así como el proceso de trabajo que sigue un diseñador Web hasta entregar el prototipo final al cliente. En la segunda unidad, el alumno conocerá las últimas tendencias en diseño Web en cuestión de tipografía, imágenes, iconografía y otras, las cuales podrá aplicarlas en sus proyectos Web. Asimismo, conocerá sobre el diseño responsive y resoluciones de pantalla. En la tercera y cuarta unidad, el alumno conocerá las herramientas de Adobe XD para realizar el diseño de su interfaz. Aprenderá el trabajo con símbolos, máscaras, textos, formas básicas. Finamente integraremos nuestros artborad para generar interacción. Con todos estos recursos el objetivo es que nuestros estudiantes puedan tener una idea clara de todos los aspectos involucrados en el desarrollo Web y que tengan la capacidad de poder sacar adelante su primer proyecto Web.

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO

Red de contenidos

DISEÑO DE INTERFACES MULTIMEDIA I

CONCEPTOS FUNDAMENTALES DEL DISEÑO

WEB

• Conceptos Básicos del Diseño Web
• Fundamentos del Diseño Web
• Proceso de diseño de una interfaz Web

TENDENCIAS Y DISEÑO DE INTERFACES

• Tendencias y Elementos en Diseño
• Diseño y composición de Wireframe

DISEÑO Y COMPOSICIÓN EN ADOBE XD

• Adobe XD Introducción
• Propiedades de diseño y composición en Adobe XD

RECURSOS INTERACTIVOS PARA WEB

• Adobe XD - Prototipo y exportación

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO 1.1. TEMA 1: CONCEPTOS BÁSICOS DEL DISEÑO WEB

1.1.1. ¿Qué es una interfaz y cuáles son sus principales usos?

Una interfaz es una superficie de contacto. Es el medio a través del cual un ser humano interactúa con un dispositivo mecánico o electrónico. La interfaz es el mecanismo o herramienta que posibilita esta comunicación mediante la representación de un conjunto de objetos, íconos y elementos gráficos. Ejemplos de interfaces: Figura 01: Ejemplos de interfaces Sus principales usos son:  Control de las funciones del dispositivo.  Manipulación de archivos.  Información de estado.  Funciona como extensión del cuerpo.

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO Figura 03: Interfaz gráfica de una página Web Figura 04: Interfaz gráfica de un Smartphone

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC Figura 05: Interfaz gráfica de un videojuego

1.1.3. ¿Qué es una página Web y por qué es importante?

Una página Web es un documento al que podemos acceder mediante un navegador. Se encuentra disponible en internet y contiene texto, sonido, video, programas, enlaces, imágenes, animaciones, entre otras cosas. La inmensa totalidad de páginas que forman los sitios Web dan lugar a lo que se conoce como World Wide Web (WWW). Entonces, la Web consiste de un sin número de páginas que presentan información variada usando diferentes tecnologías y unidas entre sí a través de hipervínculos. Esta conexión es posible porque todas las computadoras utilizan el mismo protocolo de interconexión basado en IP (Internet protocol).

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC Tener un sitio Web le da muchas ventajas a una marca, entre ellas las siguientes:  Alcance mundial de productos y servicios: Personas de todas partes del mundo podrán encontrar fácilmente su negocio. Asimismo, podrá competir con cualquier empresa de todo el mundo.  Accesibilidad las 24 horas del día: Permite que sus clientes potenciales se informen sobre sus productos y servicios a cualquier hora del día. Su información siempre estará disponible.  Imagen profesional de la empresa: Su empresa será percibida de forma profesional si cuenta con presencia en la Web. Si no contara con una página Web entonces podría estar transmitiendo una imagen poco creíble y confiable.  Impulso para las ventas: Puede vender sus productos a través de su página Web en cualquier momento a cualquier parte del mundo. No se limita en horarios y eso genera un enorme impulso a las ventas.  Mejor servicio al cliente: Sus clientes potenciales se sentirán atendidos y en confianza si pueden acceder a información sobre sus productos en el momento que lo deseen con total libertad. Video: Web 2.0: ¿Por qué es importante tener un sitio Web? Fuente: Tomado de https://www.youtube.com/watch?v=8-DH-oUO-fs

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO

1.1.4. Diferencia entre una página Web y un sitio Web

La mayoría de veces nos referimos de una manera equivocada a un sitio Web, pensando que página Web o sito Web son sinónimos. Sin embargo, existe la diferencia de conceptos entre una página Web y un sitio Web. La página Web es la unidad de cualquier sitio Web, mientras este último es el conjunto de páginas Web organizadas de manera jerárquica, teniendo como página Web principal la página index o página de inicio. Si viéramos esta diferencia de manera metafórica se podría decir que es como si el sitio Web es un libro y las hojas por las que este está conformado vendrían a ser las páginas Web. Figura 08: Diferencia entre página Web y sitio Web

IES PRIVADO CIBERTEC CARRERA DE DISEÑO GRÁFICO Dentro de una estructura básica tenemos las siguientes etiquetas HTML: Dentro de otras etiquetas HTML, tenemos por ejemplo, la etiqueta , la cual puede tener atributos como color, tamaño, tipo de fuente. <font color= "#FF0000" face= "Arial" size= "+5"> texto El resultado a esta etiqueta sería:

CARRERA DE DISEÑO GRÁFICO IES PRIVADO CIBERTEC

1.1.6. Servicio de Hosting y su uso

El hosting es el servicio por el cual nosotros podemos visualizar nuestro sitio Web en internet, es decir, es un espacio físico dentro de un servidor Web que nos proporciona la salida de nuestro sitio en el ciberespacio. Las características del servicio de hosting es que poseen un ancho de banda, que es la transferencia o velocidad con la que se puede enviar cierta cantidad de datos o información en internet, otra característica es la capacidad de almacenamiento medida en mgb o gigas que no viene a ser otra cosa que el espacio físico que puede ocupar nuestro sitio Web dentro de un servidor Web. Los servicios de hosting pueden ser gratuitos, así como de paga, variando según esta elección las características agregadas que podemos conseguir como pueden ser, correos corporativos, mayor capacidad de almacenamiento y ancho de banda, estadísticas sobre el ingreso de cibernautas a nuestro sitio Web. Figura 09: Funcionamiento del servicio de hosting En la imagen podemos apreciar como es el proceso del funcionamiento del hosting para que nuestra página se muestre en internet:

1. Diseñamos nuestra página Web usando el lenguaje html para agregar recursos como imágenes, videos y audio. 2. Esta página o sitio Web es almacenado a un servicio de hosting o servidor Web. 3. Desde este momento cualquier cibernauta por medio de nuestra dirección Web (nombre de dominio) puede solicitar una petición al servidor Web por medio de la conexión a internet y así poder visualizar nuestra página Web.