Introducción al Diseño
25
Iniciación al Diseño Web Iniciación al Diseño Web
-
Upload
dinamiclerning -
Category
Education
-
view
238 -
download
1
description
En este resumen puedes encontrar los elementos básicos para poder realizar un diseño web.
Transcript of Introducción al Diseño
Iniciación al Diseño Web
Iniciación al Diseño Web
Workflow Iniciación al Diseño Web
Estructura de la Información
Mapa web
Iniciación al Diseño Web
Wireframe Iniciación al Diseño Web
Wireframe Iniciación al Diseño Web
OPTIMIZACIÓN Iniciación al Diseño Web
OPTIMIZACIÓN Iniciación al Diseño Web
OPTIMIZACIÓN Iniciación al Diseño Web
OPTIMIZACIÓN Iniciación al Diseño Web
Estructura de la Información Iniciación al Diseño Web
Consejos de Diseño
Consejos de Diseño
BACKGROUND: color background-color: #c5e0fe;
Consejos de diseño
Consejos de Diseño
BACKGROUND: imagen fija background-image: url(‘../img/imagen.jpg’);
background-repeat: no-repeat;
Consejos de diseño
Consejos de Diseño
BACKGROUND: imagen repeMda background-image: url(‘../img/imagen.jpg’);
background-repeat: repeat;
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;
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
Consejos de diseño
Consejos de Diseño
IMAGENES: sombreado
Consejos de diseño
Consejos de Diseño
IMAGENES: bordes redondeados <DIV>
<div class=“top”>
<div class=“bottom”>
<div class=“middle”>
.bottom {background-image: url(‘bottom.png’)}
.top{background-image: url(‘top.png’)}
.middle{background-color: #35bc40}
Consejos de diseño
Consejos de Diseño
IMAGENES: bordes redondeados CSS3
BORDER RADIUS
-webkit-border-radius: 5px; -moz-border-radius: 5px;
-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
Consejos de diseño
Consejos de Diseño
TEXTO: NO JusMficar textos
align="justify"
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
Consejos de diseño
Consejos de Diseño
TEXTO: Mpograbas gráficas
Consejos de diseño
Consejos de Diseño
BOTONES: menu
misma altura!!!
ul.menu_principal li a.nosotros { background-image: url("../images/menu_nosotros.png"); background-repeat: no-repeat; height: 21px; width: 56px; }
ul.menu_principal li a.nosotros:hover { background-image: url("../images/menu_nosotros.png"); background-repeat: no-repeat; height: 21px; width: 56px; background-position: 0 -25px; }
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">
Consejos de diseño
Consejos de Diseño
FAVICON
http://tools.dynamicdrive.com/favicon
<link rel="Shortcut Icon" href="http://arcademotion.site88.net/wp-content/themes/twentyten/images/favicon.ico" type="image/x-icon" />
Consejos de diseño
