Taller #2 - Interfaz Gráfica

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

User avatar
xacarana
Site Admin
Posts: 1004
Joined: Fri Jan 15, 2016 6:13 pm

Taller #2 - Interfaz Gráfica

Post by xacarana » Mon Jul 24, 2017 6:49 am

Taller #2

La clase pasada hicimos énfasis en la estructura del contenido, en esta ocasión empezaremos a personalizar la interfaz usando estilos.
  1. Crear mookup interactivo del sitio web usando alguna herramienta de prototipado (Ver final de post) (10%)
  2. Personalizar la interfaz, usando border-radius, color, background, width, height, margin, padding. (10%)
  3. Crear una hoja de estilos y vincularla con el sitio web (15%)
  4. Uso correcto de los selectores (30%)
  5. Actualizar contenido en el servidor (20%)
  6. Publicar el dominio y las evidencias del ejercicio, como post reply (10%)
  7. Cada estudiante debe tener foto de avatar reciente (5%)
Video recomendado
El vídeo, un tipo de publicación digital que a evolucionado, acá una forma inteligente de usarla.



Aplicación recomendada



Sitio web recomendado

Image

Serie recomendada

Image

Trending topic

Image
Leer noticia aquí

Recursos importantes
  • Inkscape: Software vectorial de proposito general, se recomienda su uso si tiene conocimientos de gráficos vectoriales
  • Pencil: Herramienta de prototipado y creación de mockups
  • InVision: Herramienta de prototipado, fácil de integrar con otras herramientas, también es free
  • Marvel:Herramienta de prototipado, que se integra con herramientas como dropbox, drive y sketch.
Image

Image
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
NataTabares
Posts: 3
Joined: Mon Jul 17, 2017 2:55 pm

Re: Taller #2 - Interfaz Gráfica

Post by NataTabares » Tue Jul 25, 2017 1:44 pm

Hola, comparto el Mockup y los pantallazos de la pagina :)

Mockup:
https://marvelapp.com/65d0i41/screen/30779429

Pantallazos:
Pagina de inicio
Image
Image
Image

Proyectos
Image
Image
Image
Image
Image
jamás uno... sin el otro

User avatar
JuanCH
Posts: 3
Joined: Mon Jul 17, 2017 2:55 pm

Re: Taller #2 - Interfaz Gráfica

Post by JuanCH » Fri Jul 28, 2017 11:36 pm

Buenas
dejo el mockup y los pantallazos de la pagina

Mockup:
https://marvelapp.com/3fc9fh3/screen/30910831

Pantallazo pagina de inicio:
Image
Image
Image

Proyectos:
Image
Image
Image
Image

User avatar
DanielRG
Posts: 2
Joined: Mon Jul 17, 2017 2:56 pm

Re: Taller #2 - Interfaz Gráfica

Post by DanielRG » Sat Jul 29, 2017 12:08 pm

Buenas, comparto Mockup de la Página y sus respectivos pantallazos.

Mock up:
https://marvelapp.com/iic1a46

Pantallazos:
Página de inicio
Image

Proyectos:
Image
Image
Image
Image
Image

User avatar
Migueco
Posts: 3
Joined: Mon Jul 17, 2017 2:55 pm

Re: Taller #2 - Interfaz Gráfica

Post by Migueco » Sat Jul 29, 2017 12:17 pm

Hola, adjunto el mock up y los pantallazos, gracias.

mockup: https://marvelapp.com/3f7jh19/screen/30919433

inicio:

Image

Proyectos:

Image
Image
Image
Image
Image

User avatar
nataliaroldan
Posts: 4
Joined: Wed Jul 19, 2017 11:03 pm

Re: Taller #2 - Interfaz Gráfica

Post by nataliaroldan » Sun Jul 30, 2017 2:14 pm

Hola, aquí adjunto el mockup y los pantallazos, gracias.

Mockup: https://marvelapp.com/iid8j2g/screen/30932817

Image
Image
Image
Image
Image

User avatar
DianaAristizabal
Posts: 4
Joined: Sun Jul 23, 2017 10:13 pm

Re: Taller #2 - Interfaz Gráfica

Post by DianaAristizabal » Sun Jul 30, 2017 8:07 pm

Taller #2

Mockup

https://marvelapp.com/665eb60/screen/30935781

Diseño (pantallazos)

En el carrusel, las imágenes que pasan se pueden ver en el mockup.
La barra que aparece con las etiquetas, aparece en todas las imágenes (ver mockup).

Image
Image
Image
Image
Image
Image
Image
Image

User avatar
luisa09
Posts: 2
Joined: Mon Jul 24, 2017 9:29 am

Re: Taller #2 - Interfaz Gráfica

Post by luisa09 » Sun Jul 30, 2017 11:54 pm

Hola, adjunto el mockup y los pantallazos, gracias.
Https://marvelapp.com/332jhj5

Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image

User avatar
wasabimind
Posts: 3
Joined: Mon Jul 17, 2017 3:04 pm

Re: Taller #2 - Interfaz Gráfica

Post by wasabimind » Mon Jul 31, 2017 7:01 am

Buenas, anexo el link del Mockup e imágenes;

https://marvelapp.com/3334g9f/screen/30949359

Image
Image
Image
Image
Image
Image
Image

User avatar
JorgeBernal
Posts: 4
Joined: Sun Jul 23, 2017 9:27 pm

Re: Taller #2 - Interfaz Gráfica

Post by JorgeBernal » Mon Jul 31, 2017 9:16 am


Post Reply