Curso práctico de diseño web

Un manual que trata el diseño orientado a la web, con una interesante introducción al diseño en general y el desarrollo del diseño en la web en particular.

Listado de los capítulos

1.- Introducción al diseño gráfico

La historia del diseño gráfico, desde los orígenes de la humanidad hasta la aparición de la web e Internet.

2.- Diseño gráfico

Una aproximación al diseño gráfico en general, con una descripción de los elementos que componen habitualmente un diseño y las características principales que podemos encontrar en ellos.

3.- Diseño gráfico en la web

El diseño web va más allá del diseño tradicional pues existen muchos limitadores relacionados con el medio donde se presentan las páginas: Internet. Conocemos las características fundamentales del diseño en la web.

4.- Componentes gráficos de un ordenador

Descripción de los principales componentes gráficos de un ordenador: La tarjeta de gráficos y el monitor.

5.- Resolución de pantalla

Consideraciones relativas a los distintos tipos de pantalla que pueden tener los visitantes y el espacio disponible para cada caso.

6.- Colores en un ordenador

Cómo trabajan los ordenadores para codificar un color. El formato RGB.

7.- Calibración del monitor

Una composición gráfica puede verse con diferentes tonalidades dependiendo de la configuración del monitor. Tenemos que calibrar el monitor para que el aspecto de nuestra obra sea el mismo en todos los ordenadores.

8.- Formas básicas en diseño gráfico

El lenguaje visual a través de grafismos puede descomponerse en entidades básicas, cada una de las cuales tiene por sí misma un significado propio, pero que unidas de diferentes formas pueden constituir elementos comunicativos distintos.

9.- El punto

El punto es la unidad mínima de información visual, y está caracterizado por su forma, tamaño, color y ubicación.

10.- La línea

La línea es el elemento básico de todo grafismo y uno de los más usados. Representa la forma de expresión más sencilla y pura, pero también la más dinámica y variada.

11.- El contorno

El contorno es el objeto gráfico creado cuando el trazo de una línea se une en un mismo punto.

12.- El cuadrado

Elementos de diseño: el cuadrado.

13.- La circunferencia

Elementos de diseño: la circunferencia.

14.- Contornos mixtos

Elementos de diseño: contornos mixtos, que son los que están compuestos por varios tipos de contornos.

15.- Contornos orgánicos

Elementos de diseño: contornos orgánicos, que están formados por curvas libres.

16.- El diseño equilibrado. Introducción

Estudio de las reglas básicas del diseño gráfico. No existe una fórmula que de un diseño infalible pero sí unas reglas básicas.

17.- El diseño equilibrado. Las proporciones

Debemos tener en cuenta la definición a utilizar, los elementos gráficos y las proporciones...

18.- El diseño equilibrado. La escala

Se entiende por escala la relación entre las proporciones de los elementos visuales de una composición.

19.- El diseño equilibrado. El contraste

El contraste permite resaltar el peso visual, lo podemos conseguir por medio de diversos medios: tonos, colores, contornos y escala.

20.- El diseño equilibrado. Las agrupaciones

Como los elementos web deben agruparse para obtener un resultado coherente.

21.- El diseño equilibrado. El reticulado

Cómo armonizar los bloques de contenido que formarán la composición del diseño.

22.- El diseño equilibrado. Las alineaciones

Necesarias para conseguir una composición ordenada y lógica, así como para relacionar elementos.

23.- El diseño equilibrado. Las simetrías

Otro condicionante para que el diseño de la web tenga una organización natural.

24.- El diseño equilibrado. El equilibrio entre contenidos

La organización espacial, primordial para atraer al usuario.

25.- El diseño equilibrado. La jerarquía visual

La organización guia al usuario en la contemplación de una página web.

26.- Teoría del color. Introducción

Es una parte fundamental de la web, productor de sensaciones.

27.- Teoría del color. Naturaleza del color

Descripción formal del color como un fenómeno físico.

28.- Teoría del color. La percepción del color

Como el ojo puede detectar y clasificar los colores que le llegan.

29.- Teoría del color. Modelos de color

Descripción de los tipos de color conocidos, así como se aborda una explicación de como los objetos adquieren los colores.

30.- Teoría del color. Tipos de color

En este capítulo describiremos como a partir de los colores primarios se pueden conseguir otros, y dependiendo de las tonalidades hacer diferentes clasificaciones.

31.- Teoría del color. Propiedades de los colores

Los colores tienen unas propiedades inherentes que les permite distinguirse de otros y acuñar distintas definiciones de tipo de color.

32.- Teoría del color. Contrastes de color

El contraste es un fenómento con el que se pueden diferenciar colores atendiendo a la luminosidad, al color de fondo sobre el que se proyectan...

33.- Teoría del color. Estudio de algunos colores I

En este capítulo describiremos las sensaciones que producen algunos colores como el rojo, el verde y el azul, así como su posible uso y su significado en una web.

34.- Teoría del color. Estudio de algunos colores II

Acabamos el apartado de la teoría del color con el estudio de más colores, las sensaciones que producen y su conveniencia de uso en los sitios web.

35.- El color en la web. Colores disponibles para la web

Descubriremos el número de colores que podremos usar en una web, y si son estos los mismos se la web se ejecuta en un ordenador o en otro.

36.- El color en la web. Paletas de color seguras. Websafe y Reallysafe

Las paletas de colores dan limitaciones a la hora de presentar los colores que contiene la web. En este capítulo vamos a ver cuales son estas limitaciones.

37.- El color en la web. El problema de las imágenes

Los colores de las imágenes pueden sufrir cambios si deben ir encapsulados en estructuras tales como tablas, capas, etc. Esto puede tener una solución aproximada, pero no óptima. Vamos a ver los problemas que se pueden presentar.

38.- El color en la web. Colores y partes de una página

Es importante saber escoger los colores que definirán una parte de la página para que sea factible el cometido de ésta. Veremos que colores son los más apropiados para cada sección del sitio.

39.- Elección de la paleta para un sitio web

Es necesario escoger colores acordes con los que lleva el logotipo de la página. En este capítulo vamos a ver relaciones posibles para conseguir la funcionalidad esperada.

40.- El color en la web. Herramientas básicas para trabajar con colores

Existe una gran variedad de herramientas que nos permiten manipular las características de los colores para conseguir los que necesitemos. Abordamos una amplia lista de programas en este capítulo.

41.- Tipografía. Introducción

En esta sección vamos a hablar de los contenidos textuales de las páginas web, y en este primer capítulo, vamos a hacer una introducción a este estudio.

42.- Tipografía. Un poco de historia

Vamos a ver como ha evolucionado la escritura desde los tiempos de los babilonios hasta nuestros días, pasando por el acotecimiento tipográfico más importante: la invención de la imprenta.

43.- Medidas tipográficas

Seguimos con un poco más de historia de la tipografía, en este caso con sus medidas y cómo se han ido adaptando a las necesidades actuales.

44.- Partes de una letra

Vamos a conocer las partes fundamentales de una letra y saber distinguirlas en el caso de tener que crear familias tipográficas.

45.- Familias tipográficas

Vamos a conocer las familias tipográficas y sus grupos y clasificaciones.

46.- Fuentes Serif y fuentes Sans Serif

Vemos la clasificación de fuentes tipográficas en Serif y Sans Serif.

47.- Tipografía digital

Vemos como podemos interletrar y diseñar caracteres de mejor calidad

48.- Fuentes para impresión y fuentes para pantalla

Vemos tecnicas y tipos de fuentes tipograficas para tipos de resoluciones de pantalla e impresion.

49.- Administración de fuentes en un ordenador

Vemos donde estan las fuentes en nuestro ordenador, los rasgos caracteristicos, y como las administra el ordenador.

50.- Tipografía y diseño

En esta ocasion vemos la eleccion de la paleta de fuentes y de sus variantes, asi como el color, el grosor y otras características.

51.- Tipografía en la web

A la hora de manejar fuentes en una página web tenemos que tener en cuenta las limitaciones que presenta este medio particular.

52.- Disposición de textos en una página web

Para acabar con el tema de tipografías, tratamos la disposición correcta de textos en las páginas web.

53.- Introducción a los gráficos digitales

Qué son, como nos ayudan en los diseños y la manera de trabajar con los gráficos digitales.

54.- Gráficos de mapas de bits. Resoluciones

Vemos uno de los tipos de gráficos digitales: los mapas de bits. Conocemos qué son las resoluciones y cuáles son las adecuadas para los distintos trabajos.

55.- Dimensiones de una imagen de mapa de bits

Explicación de los distintos tipos de medidas de las dimensiones de los mapas de bits.

56.- Modos de color

Continuamos con los gráficos digitales, estudiando los modos de color, que es la cantidad máxima de colores de la paleta de un mapa de bits.

57.- Color y mapas de bits

Cómo se trata el color en los mapas de bits. Profundidad de color de las imágenes, paletas, etc.

58.- Peso de un fichero Gráfico

Estudio del tamaño que ocupan los mapas de bits en disco, que suele estar relacionado con el número de colores con el que está codificado el gráfico.

59.- Optimización de ficheros gráficos

Cómo reducir el tamaño en bytes de un archivo gráfico. Ejemplos de técnicas utilizadas para optimizar el peso de las imágenes.

60.- Gráficos vectoriales

Descripción de los gráficos vectoriales. Ejemplos de creación y usos de los mismos.

61.- Metaficheros gráficos

Tipo de ficheros gráficos que permiten trabajar tanto con mapas de bits como con vectores. Descripciones detalladas y usos.

Descargas

 Si eres usuario de DesarrolloWeb:
Archivo de descarga Curso práctico de diseño web Parte 1 Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Curso práctico de diseño web Parte 1.
Tamaño: 692 KB
Fecha creación: 17/12/2010
Páginas: 41
Archivo de descarga Curso práctico de diseño web Parte 2 Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Curso práctico de diseño web Parte 2.
Tamaño: 1.368 KB
Fecha creación: 17/12/2010
Páginas: 42
Archivo de descarga Curso práctico de diseño web Parte 3 Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Curso práctico de diseño web Parte 3.
Tamaño: 1.139 KB
Fecha creación: 17/12/2010
Páginas: 44
Archivo de descarga Curso práctico de diseño web Parte 4 Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Curso práctico de diseño web Parte 4.
Tamaño: 729 KB
Fecha creación: 17/12/2010
Páginas: 32

Bibliografía recomendada

DISEñO DE SITIOS WEB. MANUAL DE REFERENCIA

Compra este libro en Agapea, la librería urgente a domicilio.

Manual en portugués
Esta disponible en CriarWeb.com:

Compartir

Comentarios

Xtremelora

12/5/2009
Maravilloso trabajo
Waooooo, los felicito, me encanta la manera en la que escriben todos estos contenidos, me parece realmente maravilloso...
Muchos de nosotros estamos agradecidos por su ardua labor caballeros sigan asi...

Haaaaaa, jejejejeje quisiera decirles que no aguanto mas las ganas de que las secciones de Curso practico de diseño web 1 y 2 pronto tengan sus respectivos pdf para ser descargados...

Saludos desde Paredon Chiapas Mx.

sonia Diaz

13/5/2009
excelente manual
La verdad que es una excelente tarea! me quedaron muy claros algunos conceptos que no tenia aprendidos. Es de gran ayuda encontrar en este manual un resumen muy completo acerca del área de diseño web.
Mis felicitaciones para el autor y seguro somos muchos los agradecidos!!
Sigan adelante con esta estupenda labor, ya que esta pagina creo q es la mas visitadas ya que el material q brindan es muy seguro!

victor__diaz_medina

01/7/2009
genial
soy disenador y de veras siempre he rehuido estas cuestiones...
Solo por su pericia en el arte de ensenar es que he comenzado a aprender a cear webs
gracias!
Dios les bendiga!

paqui

08/7/2009
sobre el curso
Muy interesante el contenido. Me ha sido muy util para introducirme en el tema. Me parace que recoge muy bien los conceptos básicos sobre el tema. Animo a todo el que esté interesado a que se los lea.

Anita

18/7/2009
10
Muy buen manual

diseño web

12/8/2009
Genial este manual
Este manual es genial... uno de los mejores en castillano..

Gracias!

Darksed

20/8/2009
Felicidades
Muy bueno el manual, lo unico pedir ansiosamente la version para descargar y asi llevarlo a mi maquina que no tiene internet. Gracias

David Vallejo

21/8/2009
Felictaciones
en verdad senores han hecho un trabjao verdaderamente estupendo

sergio_arias-184819

30/9/2009
descargar manual
¿No hay ninguna opción para descargar el manual entero?

David Carrero

09/10/2009
Nosotros usamos para diseño Color vivo INternet
Nuestra empresa de <a href="http://www.colorvivo.com/">diseño web y desarrollo web</a> es Color vivo.

ecem

18/12/2009
curso practico de diseñador web
muy pero muy bueno el manual, sos un capo

chalsfirebird

27/12/2009
no se puede dercargar este manual??
valla pena :(

darksma_des_pe

05/1/2010
PROBLEMA PARA DESCARGAR MANUAL
El manual parece estar muy interesante, pero tengo el problema de que no lo puedo descargar de antemano muchas gracias por la ayuda... saludos

sml

06/2/2010
manual de diseño web
Este es uno de los mejores manuales que he visto para el diseñador dedicado a la creación de productos informáticos, con una gran profundidad en los elementos estéticos y semióticos. Sería muy positivo que se lograra descargar para el estudio sistemático del mismo.

grandema

18/2/2010
Agradecer contenidos
Gracias por vuestro aporte, sencillamente S e n s a c i o n a l !!!

A.A.M.O

26/2/2010
alfredo
Que honda profe.
Aparte de todo lo que bien se le puede dar mas cache o ya es todo

Arturo

16/3/2010
Excelente
Muy buen aporte. Es uno de los menores cursos de diseño Web con el me he topado. Repito 'Excelente'.

guarramon

11/4/2010
Curso desarrollo web
Hola, me gustaria acudir como alumno a un curso completo de desarrollo web donde aprender bien todo lo que necesito para dedicarme a esto. Javascript, php, flash... Gracias a quienes puedan darme informacion. Creo que los manuales no son suficiente.

WILLY

27/4/2010
felicitarlos
He estado desde hace unos años en este cuento del diseño y programacion WEB, pero nunca habia encontrado un manual tan completo y detallado, los felicito y muchas gracias por compartir esta informacion.

daylis

29/4/2010
Descargar
Hola estoy suscrita como usuario avanzado pero no sé como descargarme un manual que necesito, alguien me puede ayudar?
Saludos, soy webmaster

josepoder

10/5/2010
informacion
alguien me podria decir como me descargo el manual??

gracias...

gabriel_colmenares

01/6/2010
La descarga
Buenas, q paso con las opciones de descargas q antes otorgavan, no todos tenemos internet y nos gustaria mucho poder llevarnos estos manuales a casa para asi practicar.

vladlabel

13/7/2010
felicitaciones
Muchas gracias por sus manuales.
Son de mucha ayuda para los que estamos recién entrando en este mundo.
Saludos

ALEJANDRO

03/8/2010
exelente
muy bueno el manual

firstmaster

10/8/2010
profesores online feicitaciones
han logrado una escuela online para diseñadores y programadores web,
sin la presencia e uds., ni la pérdida de su tiempo,
me parece excelente.
yo estudio otra cosa, pero no me cave ninguna duda de que se puede aprender con estos manuales a diseñar y a programar

felicitaciones y gracias.

jaly

24/8/2010
agradecimientos
excelente manual se los agradezco

jaly

24/8/2010
saludos
agredecido por todos los manuales

apalmer1887

25/8/2010
Curso de Desarrollo web con PHP, MYSQL y JQUERY
En este curso vamos a aprender como desarrollar aplicaciones web al estilo 2.0 combinando: PHP, HTML, CSS, JavaScript y MYSQL comenzando desde los conceptos básicos.

Tiene: Videos, Documentos y Ejemplos

http://www.crealotu.com/cursos

Recién estan haciendo las primeras entregas asi que pueden seguirlas.



Saludos

fiskerxd

27/8/2010
Buen Manual
un 10 para el manual...xD

GatoDet

06/9/2010
Exelente manual
Hola!
esta genial el manual, muy completo, exelente
lastima q no sepa como descargarmelo =/ alguien me puede ayudar?
les agradeceria su ayuda.

Saludos, y siguan así.

weblaelectrica

23/9/2010
Exelente manual
Un exelente manual de inicio en el estudio del Diseño en general y del diseño de páginas web en particular...
Me uno a la gran mayoría de personas que pidieron la versión bajable de esta gran ayuda en el diseño de páginas web.
Mis felicitaciones

zeus

11/10/2010
manual
que bacaneria.!! parseros.!

Jalius

14/10/2010
lo buscaba
necesitaba algo como esto... gracias!!

scenita

10/11/2010
No abundan páginas web como esta!
Les felicito, no hay muchas páginas como esta en Internet, los manuales son muy pedagógicos, se leen muy bien, y la información-formación es abrumadora, puede convertir a un novato si no en un experto, si en una persona con la formación suficiente para que lo pueda ser en poco tiempo.

Les felicito!!

Un saludo.
Luis.

nancy

04/1/2011
Curso de diseño web
Estoy interesada en las clases como me puedo comunicar contigo

Teresa

17/1/2011
Esta muy bueno el manual pero quiero recomendarles esto
Lo que te puedo recomendar es este curso Buenísimo que seguí:

Bueno la verdad no se si recomendarte un instituto ya que en mi caso fue diferente. Yo soy web master y trabajo ya desde mas de un año haciendo paginas web para negocios o empresas de varias partes del mundo y me va de maravilla. Yo aprendí a crear páginas web con un curso a través de videos. Fue muy practico porque no tenía que desplazarme hacia ningun lugar y podía seguir el curso desde mi casa a cualquier hora. De esa manera ahorre mucho tiempo y dinero porque el curso fue buenísimo y sobre todo barato.

Si deseas te dejo aqui la dirección del Curso de diseño de páginas web para que veas si es que te conviene :

http://www.comohacerpaginasweb.net

cacaroto5a

26/2/2011
Gran aporte
Mil gracias a los que desinteresadamente apoyan a personas que como yo, intentan ser mejores cada día en cuanto a tecnología web se refiere. Es una gran información que no se consigue a la vuelta de la esquina.... mil agraciaasssssss.

oscar_vergara

04/8/2011
EXCELENTE
Muy buen trabajo, organizado, metódico y muy explicativo
Gracias

wanda

15/10/2011
a la pagina
tengo 11 años y ago unos diseños increibles los voy a poner en una pagina que es www.wandadiseñospropios.com

michaelmvp

24/2/2012
Oferta
Mi nombre Heuris Santos, le presento la siguiente oferta

Especial Hosting $47 por 1 Año, Dominio Gratis, visítenos en nuestra web: www.hostsary.com, seleccione productos y servicios de su interés, descuentos especiales, Soporte 24/7 / Panel Cpanel / Web mail. Contacto:htorres@hostsary.com

Miguel

25/2/2012
Curso de diseño web
Muy buen material de consulta!

A quien le interese ir mas alla y profundizar conocimientos les recomiendo estas clases de diseño web!

http://www.mskdesigns.com/cursos-y-clases-de-creacion-de-paginas-web

michaelmvp

27/2/2012
OFERTA
Mi Nombre es Heuris Santos, le presento la siguiente oferta

Web Hosting $47.4 /1 Año, Dominio Gratis
Eco Reseller $7.95 /Mes
Reseller Pluss $24.95 /Mes
VPS $14.95
Dominios $8.95

Mas información y detalles visite nuestra web www.hostsary.com y seleccione productos y servicios de su interés, descuentos especiales, Soporte 24/7 / Panel Cpanel / Webmail.

Contacto: heuris_santos@hotmail.com / htorres@hostsary.com

joshualz2

03/4/2012
Felicitaciones!!!
Excelente trabajo realmente esta impresionante!!!

6603677

29/8/2013
felicitaciones
hola, creo que este manual es bueno sobre todo para tener de una manera sencilla una visión del papel del diseño gráfico en el diseño web.

Deshikenichi

19/1/2014
Gracias
Gracias amigos estab busncado manules muy buenos... y los encontre gracias feliz Dia...

maxiereyes

28/1/2014
Excelente
Genial manual

AEO

02/2/2014
Felicidades equipo
Muy buenos manuales sobre el desarrollo web, los felicito y seguiré aprendiendo de vuestro contenido; el cual es excelente :)

Saludos
Alejandro

María José Cabrera Ibarra

07/4/2014
Felicidades
Excelente información, me gustaría saber si incluirán posteriormente la sección de retículas para la web, un saludo.

tablada86

29/4/2014
Felicitaciones al grupo de Desarrollo Web
Los felicito, la verdad q hacen unos manuales muy didacticos y muy bien explicados y que abarcan toda la rama del desarrollo web.

Valthy

14/5/2014
Muy interesante
MUY Buen aporte, excelente manual y muy buen tratamiento de la informacion, clara y precisa
saludos desde chile

lalfvilla

01/6/2014
Excelente
Muy bueno, claro y practico. Gracias

edwin_flores28

02/6/2014
PRIMEROS PASOS DISEÑO WEB
Agradezco mucho por este tipo de manuales que se encuentran en desarrollo web, recién son mis primeros pasos en diseño web, por lo que e visto me parece muy bueno y sencillo, ojala que poco a poco vaya mejorando y pueda aprender a diseñar paginas web, gracias.

Reglita

12/9/2014
Manuales Diseño Web
A mi modo de ver hay excelentes manuales los cuales me van a servir de mucha utilidad a la hora de perfeccionar mi sitio web.

Martha Llanos

18/10/2014
Muchas gracias
La verdad nunca he visto un manual tan completo, es desafiante

caeroq

29/10/2014
Manuales
Me gustaria poder descargar todos los PDF sin limites de descargas :( ya con este apartado "curso practico de diseño web" culminan mis descargas y no tengo como donar soy de Venezuela :( alguien que tenga todos los cursos y los comparta conmigo.