Dise±o Grafico Para Dummies

of 46

  • date post

    07-Jul-2018
  • Category

    Documents

  • view

    356
  • download

    32

Embed Size (px)

Transcript of Dise±o Grafico Para Dummies

  • 8/19/2019 Diseño Grafico Para Dummies

    1/46

    diseño gráco for dummies

  • 8/19/2019 Diseño Grafico Para Dummies

    2/46

    diseño gráco

    comunicación visual

    PERCEPCIÓN

    EMISOR - CODIFICADOR - RECEPTOR

    diseño gráco

    comunicación visual

    PERCEPCIÓN

    EMISOR - CODIFICADOR - RECEPTOR

  • 8/19/2019 Diseño Grafico Para Dummies

    3/46

  • 8/19/2019 Diseño Grafico Para Dummies

    4/46

  • 8/19/2019 Diseño Grafico Para Dummies

    5/46

  • 8/19/2019 Diseño Grafico Para Dummies

    6/46

  • 8/19/2019 Diseño Grafico Para Dummies

    7/46

  • 8/19/2019 Diseño Grafico Para Dummies

    8/46

  • 8/19/2019 Diseño Grafico Para Dummies

    9/46

  • 8/19/2019 Diseño Grafico Para Dummies

    10/46

  • 8/19/2019 Diseño Grafico Para Dummies

    11/46

  • 8/19/2019 Diseño Grafico Para Dummies

    12/46

  • 8/19/2019 Diseño Grafico Para Dummies

    13/46

  • 8/19/2019 Diseño Grafico Para Dummies

    14/46

  • 8/19/2019 Diseño Grafico Para Dummies

    15/46

    UXuser experience

  • 8/19/2019 Diseño Grafico Para Dummies

    16/46

    Norman, D. A. (2002). Emotion and design:

    Attractive things work better.

    Usabilidad = Belleza Belleza NO superior a usabilidad.

    ESTÉTICA VS USABILIDAD?

  • 8/19/2019 Diseño Grafico Para Dummies

    17/46

    La estética tiene una función en donde las emociones juegan un papel importante la experiencia de usuario (UX)

    Si existe un diseño visual agradable, los usu- arios se sienten más relajados , y tienden a ver el sitio más creíble y fácil de usar.

  • 8/19/2019 Diseño Grafico Para Dummies

    18/46

    A positive rst impression — usually based on looks rather than interaction — determines the value of the website / app on the user’s behalf.

    fuente: uxmyths.com

  • 8/19/2019 Diseño Grafico Para Dummies

    19/46

    aprobación

    vista

  • 8/19/2019 Diseño Grafico Para Dummies

    20/46

    Stanford Credibility Project 2500+ participantes

    Importancia de: layout, tipografía, colores.

  • 8/19/2019 Diseño Grafico Para Dummies

    21/46

    If the app doesn’t have some kind of aesthetic value, it will not only fail to attract the user’s attention, it will also fail to HOLD the user’s attention. ”

    - Max Steenbergen UX MAGAZINE

  • 8/19/2019 Diseño Grafico Para Dummies

    22/46

    FORMA y FUNCIÓN

    BELLEZA y CEREBR

    PLACER y USABILID

  • 8/19/2019 Diseño Grafico Para Dummies

    23/46

    more cognitive cost

    Apple...

    less cognitive cost

  • 8/19/2019 Diseño Grafico Para Dummies

    24/46

    “easier on the eye”.- Jürg Nänni (Visual Perception)

    El usuario asocia ciertos comportamietos con elementos especí cos basados en su APARIENCIA.

    Ej. Es más fácil reconocer BOTONES con formas curvas o redondas.

  • 8/19/2019 Diseño Grafico Para Dummies

    25/46

    TIPOGRAFÍA

  • 8/19/2019 Diseño Grafico Para Dummies

    26/46

  • 8/19/2019 Diseño Grafico Para Dummies

    27/46

    LEGIBILIDAD

    Escoge typefaces con formas convencionales

    Altura en X mayor.

    Typefaces con “espacios generosos”

    GLS MIT GLS MIT

    a e c! " $

  • 8/19/2019 Diseño Grafico Para Dummies

    28/46

  • 8/19/2019 Diseño Grafico Para Dummies

    29/46

  • 8/19/2019 Diseño Grafico Para Dummies

    30/46

    ! a con serifassin serifas

    sans serif / palo seco

    textos cortos textos largos

    serif

  • 8/19/2019 Diseño Grafico Para Dummies

    31/46

    LECTURA Justi cación adecuada (evitar “ríos”)

    ríos = FAIL!

    color: CONTRASTES y colores complementarios

    interlineado mayor al puntaje de la letra.

    “Force-justi ed” text, or hyphenless justi cation, always creates ugly rivers and awkward spacing which causes the reader to lose the natural ow of the text as the eye has to make various leaps and jumps to complete words and sentences. Currently, there is no proper native suppor t for hyphenation in CSS, but you could use Hyphenator.js for a proper client-side hyphenation online.

    “Force-justi ed” text, or hyphenless justi - cation, always creates ugly rivers and awk- ward spacing which causes the reader to lose the natural ow of the text as the eye

    “Force-justi ed” text, or hyphenless justi - cation, always creates ugly rivers and awk- ward spacing which causes the reader to

  • 8/19/2019 Diseño Grafico Para Dummies

    32/46

  • 8/19/2019 Diseño Grafico Para Dummies

    33/46

    OBJETIVO

  • 8/19/2019 Diseño Grafico Para Dummies

    34/46

    JERARQUÍA

  • 8/19/2019 Diseño Grafico Para Dummies

    35/46

  • 8/19/2019 Diseño Grafico Para Dummies

    36/46

  • 8/19/2019 Diseño Grafico Para Dummies

    37/46

  • 8/19/2019 Diseño Grafico Para Dummies

    38/46

  • 8/19/2019 Diseño Grafico Para Dummies

    39/46

  • 8/19/2019 Diseño Grafico Para Dummies

    40/46

  • 8/19/2019 Diseño Grafico Para Dummies

    41/46

  • 8/19/2019 Diseño Grafico Para Dummies

    42/46

  • 8/19/2019 Diseño Grafico Para Dummies

    43/46

  • 8/19/2019 Diseño Grafico Para Dummies

    44/46

  • 8/19/2019 Diseño Grafico Para Dummies

    45/46

  • 8/19/2019 Diseño Grafico Para Dummies

    46/46