El documento habla sobre la introducción al diseño web. Explica los pasos del workflow de diseño como la estructura de la información, mapas web, wireframes y optimización. También proporciona consejos de diseño sobre el uso de colores de fondo, formatos de imágenes, bordes redondeados, tipografía, botones y favicons.

1. Iniciación al Diseño Web
Iniciación
al
Diseño
Web

2. Iniciación al Diseño Web
Workflow

3. Iniciación al Diseño Web
Estructura
de
la
Información
Mapa
web

4. Iniciación al Diseño Web
Wireframe

5. Iniciación al Diseño Web
Wireframe

6. Iniciación al Diseño Web
OPTIMIZACIÓN

7. Iniciación al Diseño Web
OPTIMIZACIÓN

8. Iniciación al Diseño Web
OPTIMIZACIÓN

9. Iniciación al Diseño Web
OPTIMIZACIÓN

10. Iniciación al Diseño Web
Estructura
de
la
Información

11. Consejos
de
Diseño

12. Consejos de diseño
Consejos
de
Diseño
BACKGROUND:
color
background-color: #c5e0fe;

13. Consejos de diseño
Consejos
de
Diseño
BACKGROUND:
imagen
fija
background-image: url(‘../img/imagen.jpg’);
background-repeat: no-repeat;

14. Consejos de diseño
Consejos
de
Diseño
BACKGROUND:
imagen
repeMda
background-image: url(‘../img/imagen.jpg’);
background-repeat: repeat;

15. Consejos de diseño
Consejos
de
Diseño
BACKGROUND:
imagen
y
color
background-image: url(‘img/imagen.jpg’);
background-repeat: no-repeat;
background-color: #222;

16. Consejos de diseño
Consejos
de
Diseño
IMAGENES:
formatos
Lo
que
buscamos
es
un
punto
medio
entre
calidad
y
tamaño
de
archivo:
JPEG
nos
sirve
para
manipular
y
comparMr
archivos
de
imagen
de
Mpo
fotográfico.
GIF
serán
muy
úMles
para
manipular
imágenes
con
bloques
de
colores
planos.
PNG24
nos
servirá
para
imágenes
con
efectos
como
brillos
y
sombras,
que
también
requieran
transparencia.
Sobre
el
uso
de
formatos
existe
un
interesante
debate
entre
diseñadores
y
desarrolladores
web.
Algunos
prefieren
uMlizar
el
formato
PNG
el
cual
no
Mene
restricciones
de
patentes,
está
recomendado
por
el
W3C
y
permite
transparencia.
Sin
embargo,
hay
quienes
aún
prefieren
el
JPG
por
su
popularidad
y
caracterísMcas

17. Consejos de diseño
Consejos
de
Diseño
IMAGENES:
sombreado

18. Consejos de diseño
Consejos
de
Diseño
IMAGENES:
bordes
redondeados
<DIV>
<div class=“top”> .top{background-image: url(‘top.png’)}
<div class=“middle”> .middle{background-color: #35bc40}
<div class=“bottom”> .bottom {background-image: url(‘bottom.png’)}

19. Consejos de diseño
Consejos
de
Diseño
IMAGENES:
bordes
redondeados
CSS3
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
BORDER RADIUS
-webkit-border-radius: 0px 5px 0px 5px;
-moz-border-radius: 0px 5px 0px 5px;
-webkit-border-radius -moz-border-radius -o-border-radius -ms-border-radius

20. Consejos de diseño
Consejos
de
Diseño
TEXTO:
NO
JusMficar
textos
align="justify"

21. Consejos de diseño
Consejos
de
Diseño
TEXTO:
Mpograbas
web
hcp://www.webdesigndev.com/web-­‐development/16-­‐gorgeous-­‐web-­‐safe-­‐fonts-­‐to-­‐use-­‐with-­‐css

22. Consejos de diseño
Consejos
de
Diseño
TEXTO:
Mpograbas
gráficas

23. Consejos de diseño
Consejos
de
Diseño
BOTONES:
menu
ul.menu_principal li a.nosotros { ul.menu_principal li a.nosotros:hover {
background-image: url("../images/menu_nosotros.png"); background-image: url("../images/menu_nosotros.png");
background-repeat: no-repeat; background-repeat: no-repeat;
height: 21px; height: 21px;
width: 56px; width: 56px;
} background-position: 0 -25px;
}
misma
altura!!!

24. Consejos de diseño
Consejos
de
Diseño
BOTONES:
buscadores
/
formularios
.input_contacto {
background: url("../../img/input01.png") no-repeat scroll 0 0
transparent;
border: medium none;
color: #444444;
height: 59px;
width: 414px;
}
<input type="image" src="images/btn_enviar.jpg" name="enviar">

25. Consejos de diseño
Consejos
de
Diseño
FAVICON
<link rel="Shortcut Icon" href="http://arcademotion.site88.net/wp-content/themes/twentyten/images/favicon.ico" type="image/x-icon" />
http://tools.dynamicdrive.com/favicon