SlideShare a Scribd company logo
1 of 68
Download to read offline
me@josekusunoki.com |   @jkusunoki
;-)

  me@josekusunoki.com |   @jkusunoki
comunicador

     me@josekusunoki.com |   @jkusunoki
periodista

     me@josekusunoki.com |   @jkusunoki
diseñador

    me@josekusunoki.com |   @jkusunoki
elcomercio.com.pe


         me@josekusunoki.com |   @jkusunoki
gestion.pe


     me@josekusunoki.com |   @jkusunoki
depor.pe


    me@josekusunoki.com |   @jkusunoki
peru21.pe


     me@josekusunoki.com |   @jkusunoki
escape.pe


     me@josekusunoki.com |   @jkusunoki
innovación

     me@josekusunoki.com |   @jkusunoki
versatilidad

      me@josekusunoki.com |   @jkusunoki
juegos

   me@josekusunoki.com |   @jkusunoki
colloidfarl @ Flickr
bpdragon @ Flickr
burtyoungsters @ Flickr
blueisbest @ Flickr
Proyecto Natal (http://www.xbox.com/en-US/live/projectnatal/)
telecomunicaciones


         me@josekusunoki.com |   @jkusunoki
raybyrne @ Flickr
kellylwatson @ Flickr
meagain-debbie @ Flickr
Wikipedia
medios
(convencionales)
   (El Comercio)




            me@josekusunoki.com |   @jkusunoki
ndrc @ Flickr
peterme @ Flickr
Diseño Web
 (válido para versiones 2.0 o posteriores)




                        me@josekusunoki.com |   @jkusunoki
Elementos

• Tipografía
• Color
• Composición

                me@josekusunoki.com |   @jkusunoki
Tipografía
  la Internet es 95% tipografía




                   me@josekusunoki.com |   @jkusunoki
DD. vs PP.
     nosotros también podemos hablar chino




• XHTML
• CSS
• jQuery
• Frameworks
• Wireframes
                          me@josekusunoki.com |   @jkusunoki
DD. vs DD.
    el peor enemigo de un diseñador es otro diseñador




• Tamaño vs. ancho de columnas
• Interlineado
• Serif o sans-serif
• Cómo se suavizará la tipografía
                               me@josekusunoki.com |    @jkusunoki
Color
otra forma de encaminar la vista del usuario




                        me@josekusunoki.com |   @jkusunoki
Qué recomiendo

• Buen contraste
• Sólida paleta de color
• Identificar tus puntos visuales
• Trazar la ruta usando color
                  me@josekusunoki.com |   @jkusunoki
Composición
nada mejor que el orden y las matemáticas para potenciar la creatividad




                                      me@josekusunoki.com |         @jkusunoki
1. Grillas

     me@josekusunoki.com |   @jkusunoki
2. Grillas

     me@josekusunoki.com |   @jkusunoki
y por último




        me@josekusunoki.com |   @jkusunoki
3. Grillas

     me@josekusunoki.com |   @jkusunoki
Tendencias
 de nada te servirá inventar el agua tibia




                        me@josekusunoki.com |   @jkusunoki
De qué va esto
• Navega, navega y navega
• Sé curioso
• No uses, interpreta
• Receptor primero, luego emisor
                me@josekusunoki.com |   @jkusunoki
Reflexiones

     me@josekusunoki.com |   @jkusunoki
Diseño no es arte, es
   comunicación

           me@josekusunoki.com |   @jkusunoki
Diseñar me hizo
mejor periodista

        me@josekusunoki.com |   @jkusunoki
Diseñar me hizo
mejor comunicador

         me@josekusunoki.com |   @jkusunoki
El medio es el
   mensaje
  y tú que te burlabas de McLuhan




                    me@josekusunoki.com |   @jkusunoki
El futuro es cada vez
   más inmediato

           me@josekusunoki.com |   @jkusunoki
Un comunicador
diseña información

         me@josekusunoki.com |   @jkusunoki
Tomorrow never knows


          me@josekusunoki.com |   @jkusunoki
gracias.


    me@josekusunoki.com |   @jkusunoki

More Related Content

Viewers also liked

Introducción a la web
Introducción a la webIntroducción a la web
Introducción a la webiConstruye
 
Wireframes y diseño web
Wireframes y diseño webWireframes y diseño web
Wireframes y diseño webiConstruye
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica WireframesRodrigo Vera
 
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011byroncorrales
 
Introducción a los Wireframes
Introducción a los WireframesIntroducción a los Wireframes
Introducción a los WireframesRodrigo Vera
 
Cómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpressCómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpressBeatriz González Pozo
 
SEO para WooCommerce (WordPress)
SEO para WooCommerce (WordPress)SEO para WooCommerce (WordPress)
SEO para WooCommerce (WordPress)Señor Muñoz
 
Móntate un sitio web completo con WordPress en 4 horas
Móntate un sitio web completo con WordPress en 4 horasMóntate un sitio web completo con WordPress en 4 horas
Móntate un sitio web completo con WordPress en 4 horasIñaki Arenaza
 
Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02Rodrigo Vera
 

Viewers also liked (11)

Introducción a la web
Introducción a la webIntroducción a la web
Introducción a la web
 
Wireframes y diseño web
Wireframes y diseño webWireframes y diseño web
Wireframes y diseño web
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica Wireframes
 
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
 
Introducción a los Wireframes
Introducción a los WireframesIntroducción a los Wireframes
Introducción a los Wireframes
 
02 introducción al diseño web
02 introducción al diseño web02 introducción al diseño web
02 introducción al diseño web
 
Cómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpressCómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpress
 
SEO para WooCommerce (WordPress)
SEO para WooCommerce (WordPress)SEO para WooCommerce (WordPress)
SEO para WooCommerce (WordPress)
 
Móntate un sitio web completo con WordPress en 4 horas
Móntate un sitio web completo con WordPress en 4 horasMóntate un sitio web completo con WordPress en 4 horas
Móntate un sitio web completo con WordPress en 4 horas
 
Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02
 
Estructura y diseño de un sitio web
Estructura y diseño de un sitio webEstructura y diseño de un sitio web
Estructura y diseño de un sitio web
 

Recently uploaded

Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfhellotunahaus
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxNorberto Chacon
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxcalc5597
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxLeo Florez
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTADMaryNavarro1717
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosCristianGmez22034
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALEvaMaraMorenoLago1
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanaMarsielMendoza1
 

Recently uploaded (20)

Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 

Diseño web - UPC