3# Iconos en iOS

Wednesday, March 6, 13
@SantanderAle Alejandro Santander Diseador & Fundador de Estudio Gor
<Agenda Da 1> Iconos? Breve historia de los iconos Tipos de iconos Iconos en la actualidad Introduccin a la alta denicin Hagmos un Favicon
Wednesday, March 6, 13 5
Iconos
Los inicios
Qu es un icono?
Dejando a un lado las connotaciones religiosas, hoy la palabra
icono abarca una amplia gama de tipos de imgenes, desde el juego con el blanco y el negro, botones de Play y Pausa, a los muy detallados a todo color que se utilizan para identicar una aplicacin. Pueden ser tan simples como un tringulo o tan complejo como la representacin de una hoja de una planta con venas y gotas de agua. Todos viven sobre el paraguas del trmino: icono.
Logotipos versus Iconos?

Los logos destacan entre otros logos, representan una identidad corporativa. Los iconos nos dirigen, informan o nos advierten. Funcionan mejor cuando son familiares a otros y son reconocibles.
Breve historia
Iconos
Dangerous Neighbourhood Nothing here
Dangerous drinking water Owner is in
Owner is out
Best place for handout
Police here dont like Hobos
This is the place
e dont like Hobos
OK/Alright
Dangerous Neighbourhood Nothing here
This is not a safe place This is not a safe place
s Neighbourhood
Dangerous drinking water Owner is in
OK/Alright Kind lady lives here Kind lady lives here Owner is out
Police here dont like Hobos Dangerous drinking Hit the road - quick!water the road - quick! Wednesday,Hit March 6, 13
10
11
12
Norm Cox
13
14
15
Captar la esencia de un objeto o idea con slo unas lneas simples y as mismo manteniendo la elegancia en cada forma, es como disear sobre un grano de arroz. Eso es lo grandioso de los iconos, son como pequeos poemas.
16
Tipos de iconos
Cada funcin, una resolucin.
17
Favicons
18
Ideogramas, pictogramas e iconos arbitrarios
19
Iconos de Aplicaciones
20
Iconos en la actualidad
1024px+
21
22
23
24
25
26
27
28
29
30
31
32
33
34
ABC de la alta denicin

Teora de pixel
35
Introduccin

Las pantallas de alta denicin denominadas por Apple Retina Display llegaron con el iPhone 4. Solo hay un factor de escala. 1x <> 2x. ( Hasta ahora!... ) Las pantallas y las ventanas ahora tienen una desidad de pixel 4:1. Signica que son pixeles cudruples, cada uno es igual a un punto. Un punto es una unidad de medida. Un punto es igual a 1/72 pulgadas de una pantalla generalmente. En simples palabras: Texto mejor denido e imgenes con mejor detalle.
36
De un punto a un pixel
1 punto
37
1 punto
1 punto
1 punto
38
1 punto
39
1x
1 pixel
= 1 punto
40
2x
1 pixel
1 pixel
= 1 punto
1 pixel 1 pixel
41
Ms pixeles signica mas detalles
42
43
44
45
Puntos vs Pixeles
46
47
48
49
50
Eso es todo? Cosa de nios. #WINNING
51
Solo que hay un problema...
52
Las pantallas de alta denicin son diferentes.
53
Iconos con la misma resolucin en puntos pero con diferentes resoluciones de display requieren diferentes tratados visuales por el tamao de display.
54
Un icono 1x de mayor tamao no funcionar como un icono de menor tamao 2x porque el contenido debe ser diferente.
55
Tabla de resoluciones del icono. Punto x punto.
56
Tabla de resoluciones del icono. Pixel x Pixel.
57
1x vs 2x
58
1x vs 2x Un grco 2x a 32x32 pixeles en una pantalla retina fsicamente se ver de 16 puntos, lo que son 16 pixeles.
59
1x vs 2x Un grco 2x a 32x32 pixeles en una pantalla retina fsicamente se ver de 16 puntos, lo que son 16 pixeles.
60
61
Formatos comunes

ICO PNG PDF ICNS SVG
62
Iconos para iOS

Pequeos dulces cuadrados para la vista.
63
64
65
66
67
68
69
70
71
72
73
74
75
Iconos de alto rendimiento

Se enfocan en una forma nica Seleccionan cuidadosamente los colores Evitan usar una fotografa Evitan usar mucho texto Representan de forma efectiva la textura de sus materiales Son creativos
76
Enfoque en formas unicas, simples y colores estratgicos
77
78
No usan texto
79
80
81
82
83
Representan de forma ecaz sus texturas
84
Son creativos
85
Probar conos en diferentes fondos
86
Probar rendimiento en menor escala
87
Caso a revisar
88
89
90
91
92
93
94
95
Primer paso
Dominar pixeles
96
97
16px
98
99
100
48px
101
72px
102
Cmo empezar un icono 16px?
103
Hagmos un icono
Working mode: ON
104
Como empezar un icono?

Tener una idea concreta a representar Bocetar teniendo en mente las resoluciones necesarias Trabajar su versin digital, con formas de preferencia vectoriales. Determinar colores nales
105
106
107
108
109
110
111
112
113

3# Iconos en iOS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3# Iconos en iOS

Uploaded by

Copyright:

Available Formats

Wednesday, March 6, 13

@SantanderAle Alejandro Santander Diseador & Fundador de Estudio Gor

Logotipos versus Iconos?

Dangerous Neighbourhood Nothing here

Dangerous drinking water Owner is in

Best place for handout

Police here dont like Hobos

This is the place

e dont like Hobos

Dangerous Neighbourhood Nothing here

This is not a safe place This is not a safe place

Dangerous drinking water Owner is in

Ideogramas, pictogramas e iconos arbitrarios

ABC de la alta denicin

Ms pixeles signica mas detalles

Ms pixeles signica mas detalles

Ms pixeles signica mas detalles

Ms pixeles signica mas detalles

Eso es todo? Cosa de nios. #WINNING

Solo que hay un problema...

Las pantallas de alta denicin son diferentes.

Tabla de resoluciones del icono. Punto x punto.

Tabla de resoluciones del icono. Pixel x Pixel.

ICO PNG PDF ICNS SVG

Iconos para iOS

Iconos de alto rendimiento

Enfoque en formas unicas, simples y colores estratgicos

Representan de forma ecaz sus texturas

Probar conos en diferentes fondos

Probar rendimiento en menor escala

Cmo empezar un icono 16px?

Como empezar un icono?

You might also like