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