www.azuax.com

Soluciones informáticas para Internet

Ariel Toro Garrido

● Diseñador Gráfico ● Desarrollador Frontend ● Autodidacta ● Creativo ● Espontáneo ● Dedicado

Proceso creativo en el desarrollo web

Que debemos saber antes de comenzar

Responsive Design

¿Qué es Responsive Design?● Diseño elástico adaptable a cualquier dispositivo ● Google penalizará a sitios no responsible

320px 768px 1024px

Retina Design

● Mismo espacio del dispositivo, pero al doble de pixeles

640px 1536px 2048px

Estructura Semántica Básica HTML5

UX - UI

UX: Experiencia del usuariotodas las interacciones que una persona tiene en cierto tiempo

UI: Interfaz de usuarioes el medio con que el usuario puede comunicarse

UX - UI

Producto UI(filo del cuchillo)

UX

(experiencia de pelar la manzana)

Diseño Plano o Flat Design● Tendencia de moda en en diseño web / aplicaciones móviles ● Diseño Minimalista ● Facil de Realizar ● Facil de Maquetear ● Diseño Limpio ● Utilizado Actualmente por grandes compañías como Apple y

Windows 8 con su interfaz metro

Diseño Plano o Flat Design

iOS 6 iOS 7

Wireframe

¿Qué es un Wireframe?● Es un boceto plano y sencillo que se puede realizar en papel o con algún software como illustrator

Aplicación de Wireframe

● Agregar etiquetas html ● Definir comportamientos para experiencia del usuario ● Creamos diseños para responsive design

Aplicación de Wireframe Azuax

Mockup

¿Qué es un Mockup?

● Diseños terminados ● Colores definitivos ● Tipografías ● Funciones definidas ● Iconos definidos

Maquetación

Normalize

● Restablece el CSS y hace que los navegadores muestren todos los elementos de manera más consistente y en línea con los estándares modernos.

Bootstrap

● Es el framework css mas popular para el desarrollo de proyectos en html, css y js.

● Su filosofía es trabajar mobile first

Iconos Vectoriales

● Iconos transformados en tipografías ● Se aplican a traves de CSS ● Por ser vectores no se pixelan en ninguna resolución ● Se puede aplicar color y diferentes tamaños

Iconos Vectoriales

Font Awesome Flat icon

Web Fonts

● Fuentes externas que se cargan dinámicamente. ● Permiten utilizar tipografías que no están instaladas en el

dispositivo del usuario.

http://www.google.com/fonts

Unidades de Medida

EmEm es una unidad escalable que se utiliza en los documentos web.

1 em es igual al tamaño de la fuente font-size del padre

RemEsta unidad es lo mismo que "em" pero, y esta es la gran y única diferencia,

el cálculo siempre se realiza sobre el valor de la letra m del elemento raíz

html {font-size: 62.5%}

Visiten

www.azuax.com

¡Muchas Gracias!