> Manuales > Curso práctico de diseño web

Este es un manual de básico a avanzado sobre el diseño en general y el diseño web en particular. Está realizado de modo que cubra aspectos básicos y elementales que muchas veces se pasa por alto cuando se comienza el estudio del diseño, ofreciendo un enfoque académico y técnico.

El foco es explicar el diseño orientado a la web y a la vez resulta una interesante introducción al diseño en general, ya que se hablan de muchos aspectos básicos relacionados con el diseño clásico, como gestión del color, formas básicas en el diseño, equilibrio entre los componentes, etc.

Está dividido en dos partes, en la primera se tratan asuntos más generales, teóricos y atómicos. En la segunda parte del manual de diseño web se tratan temas más avanzados y cómo componer diversos componentes del diseño, como la interfaz gráfica y otros elementos gráficos. También se ofrece una detallada descripción de formatos gráficos.

Parte 1:

Curso práctico de diseño web

Artículos Descargas
  • Artículos del manual

  • Introducción al Curso de Diseño Gráfico para la Web

    Comenzamos el curso de diseño gráfico con una introducción que te ubicará en el conocimiento de diseño en general. Igual piensas que el diseño gráfico es algo relativo a la era de Internet o de los ordenadores, pero realmente ha acompañado al hombre desde el origen de su existencia.

  • 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. Características del diseño gráfico en la actualidad y el diseño gráfico en la web de manera particular.

  • Diseño gráfico por ordenador

    En esta segunda parte te ofrecemos informaciones teóricas y prácticas sobre diseño gráfico digital. Encontrarás mucha información útil para establecer las bases sobre las que profundizaremos más adelante. Se describen asuntos tan importantes como los componentes de hardware o las resoluciones de pantalla, así como los fundamentos mediante los cuales los ordenadores gestionan el color.

  • 2 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.

  • 3 Resolución de pantalla

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

  • 4 Colores en un ordenador

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

  • 5 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.

  • Fundamentos del diseño gráfico

    Sin entrar todavía en el medio de la web, ahora vamos a tratar aspectos fundamentales sobre el diseño gráfico en general. Son conocimientos esenciales sobre los elementos del diseño y cómo combinarlos de manera correcta y armoniosa, para destacar sobre todo el aspecto estético visual.

  • 6 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 y unidas de diferentes formas pueden constituir elementos comunicativos distintos. El punto, la...

  • 7 El diseño equilibrado

    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 para conseguir un diseño equilibrado y por tanto correcto y agradable a la vista: Proporciones, escala y...

  • 8 Cómo agrupar elementos correctamente para un diseño equilibrado

    Como los elementos web deben agruparse para obtener un resultado coherente, conseguir belleza y armonía requiere gestionar bien los grupos de elementos, en retícula, con alineación, simetría, etc.

  • 9 La jerarquía visual en el diseño web

    La organización guia al usuario en la contemplación de una página web. Explicaciones técnicas y prácticas sobre la jerarquía visual de elementos para conseguir un diseño web equilibrado.

  • El color

    El color es uno de los elementos esenciales que caracterizan un diseño gráfico. Comprenderlo y usarlo con criterio es uno de los pilares fundamentales de todo buen diseño. En esta parte del manual explicamos mucha teoría del color y sus usos de manera correcta, el significado y los sentimientos que transmiten, etc. Desde un aspecto más práctico se explica cómo los ordenadores gestionan los colores y la manera adecuada de usarlos en una web, de modo general y en particular en cada una de las distintas partes de una web habitual.

  • 10 Introducción a la teoría del color

    Comenzamos a explicar la teoría del color, una parte fundamental de cualquier diseño gráfico y de la estética de la web en particular. Naturaleza del color y su percepción.

  • 11 Modelos de color

    Descripción de los sistemas o modelos de color conocidos y utilizados en el diseño, computación y electrónica: RGB, CMYK, HSV, Pantone.

  • 12 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: Colores fríos y cálidos, claros y oscuros, tonos pastel o gamas de grises.

  • 13 Propiedades de los colores

    Los colores tienen unas propiedades inherentes que les permite distinguirse de otros: saturación, tono, brillo. Ello nos permite hacer grupos de colores como cromáticos, complementarios, cercanos, triadas, etc. Analizamos también el contraste...

  • 14 Estudio de algunos colores

    En este capítulo describiremos las sensaciones que producen algunos colores básicos como el rojo, el verde y el azul, amarillo, naranja, violeta, marrón, gris... así como su posible uso y su significado en una web.

  • 15 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, abordando a continuación paletas de color seguras: Websafe y Reallysafe

  • 16 El problema del color en las imágenes para la web

    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.

  • 17 Colores y partes de una página

    Es importante saber escoger los colores que definirán cada parte de la página, atendiendo a su objetivo. Veremos qué colores son los más apropiados para cada sección del sitio.

  • 18 Elección de la paleta para un sitio web

    Es necesario escoger colores acordes con el objetivo global para el que se construye el sitio, así como la imagen corporativa del cliente. En este capítulo vamos a ver relaciones posibles para conseguir la funcionalidad esperada y al final vamos...

  • La tipografía

    Pasamos a analizar el siguiente pilar fundamental del diseño gráfico en general y el diseño web en particular. Se trata de la tipografía, fuentes o tipos de letra. Explicamos cuáles son las características y conceptos que se deben tener en cuenta en el trabajo con tipografías y cómo usar tipografías en un sitio web. Además explicamos los conocimientos generales que se deben aplicar para mejorar la legibilidad de los textos en una página.

  • 19 Introducción a la tipografía

    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 la tipografía. Hablaremos sobre qué es tipografía, su historia y cuáles son las medidas...

  • 20 Familias tipográficas

    Vamos a conocer las familias tipográficas y sus grupos y clasificaciones. Estudiamos las partes de una legra para identificar las características de una tipografía y luego vemos las familias principales.

  • 21 Tipografía digital, impresión y pantalla

    Tratamos la tipografía digital de manera general. Vemos técnicas y tipos de fuentes tipográficas para tipos de resoluciones de pantalla e impresión y cómo administrar las fuentes en un ordenador.

  • 22 Tipografía y diseño web

    Qué debemos de tener en cuenta para el uso de tipografías en diseño en general y en diseño web en particular. Qué es una paleta de tipografías y qué tipografías son seguras para usar en la web.

  • 23 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.

  • Los gráficos digitales

    Hemos hablado de muchos elementos que forman parte de un diseño, pero nos quedaba abordar las imágenes, componentes visuales esenciales en la comunicación y en la parte estética de un sitio. En esta parte se explican todos los conocimientos básicos sobre gráficos en el diseño en general y en la web en particular, tipos de gráficos, sus resoluciones, optimización, etc.

  • 24 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.

  • 25 Gráficos de mapas de bits

    Vemos uno de los tipos de gráficos digitales: los mapas de bits. Conocemos sus particularidades y las características como son las resoluciones y dimensiones, viendo cuáles son las adecuadas para los distintos trabajos.

  • 26 Gestión del color en mapas de bits

    Estudiamos los modos de color, que es la cantidad máxima de colores de la paleta de un mapa de bits, su profundidad y paletas de color.

  • 27 Peso y optimización de ficheros gráficos

    Peso y optimización. Explicamos cómo se calcula el peso de un archivo gráfico y también 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.

  • 28 Gráficos vectoriales

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

  • 29 Metaficheros gráficos

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

  • Descargas

  • Libro electrónico del curso de diseño web

    El Manual del Curso Práctico de Diseño Web lo puedes descargar como libro electrónico para llevarlo en tus dispositivos y leerlo desde cualquier lugar. Tienes disponibles varios formatos para descargar el que mejor te venga.

    Archivos disponibles: PDF, ePup, Mobi (Kindle)

    Páginas: 253 (Referencia por el archivo PDF)

Parte 2:

Curso práctico de diseño web, parte II

Segunda parte de nuestro manual de diseño web, que trata temas más avanzados dentro de los que debe conocer un diseñador de páginas web. Veremos asuntos más prácticos y directamente relacionados con el mundo de la web, desde la digitalización de imágenes, los formatos gráficos de las aplicaciones y los soportados por navegadores, los elementos gráficos de una web y las interfaces de usuario presentes en todo sitio web.

Artículos Descargas
  • Artículos del manual

  • Digitalización de imágenes

    Comenzando explicando los distintos medios de obtención de imágenes digitales, con explicaciones detalladas de cada uno de ellos. Desde los escáneres a cámaras digitales. Además analizamos los programas de edición gráfica en sus distintas variantes, desde los que podemos construir nuestros propios gráficos o editar los obtenidos por medio de cámaras, escáneres, tabletas, etc.

  • 1 Introducción a la digitalización de imágenes

    Vemos los tipos, tratamiento y formas de almacenamiento de las imágenes digitales.

  • 2 El escáner

    Definimos el escáner, los elementos que lo forman. Cuáles son los tipos de escáner, su resolución, y el modo de trabajo con un escáner de sobremesa.

  • 3 Digitalización de imágenes. Los tipos de escáneres

    En este capítulo trataremos sobre los modelos de escáneres, sus características, ventajas y desventajas y precios entre otras cuestiones.

  • 4 Digitalización de imágenes. Resolución de un escáner

    Hablamos de las distintas resoluciones de un escaner y recomendamos las más indicadas según el tipo de imágen.

  • 5 Digitalización de imágenes. Trabajando con el escáner

    Cómo empezar a trabajar con un escáner de sobremesa, instalación, configuración, y características.

  • 6 Fotografía digital

    Nos adentramos en el mundo de la fotografía digital, analizando características de las cámaras digitales, mecanismos, tipos, resoluciones, etc.

  • 7 Digitalización de imágenes. Mecanismo de una cámara digital

    Describimos detalladamente el funcionamiento de una cámara digital.

  • 8 Digitalización de imágenes. Resolución de la cámara y calidad de la captura

    Explicamos cuales son los factores que influyen en mayor medida en la calidad de las imágenes.

  • 9 Digitalización de imágenes. Los pros y los contras

    Dos pequeñas listas con las posibles ventajas e inconvenientes de las cámaras digitales.

  • 10 Digitalización de imágenes. Programas gráficos

    Vemos los tipos de programas gráficos para el tratamiento de las imágenes escaneadas.

  • 11 Digitalización de imágenes. Programas de pintura o retoque

    Pequeña descripción de los mejores programas de retoque y pintura existentes en la actualidad en el mercado y mención de sus herramientas más básicas.

  • 12 Programas de diseño gráfico

    Programas esenciales para diseño gráfico, descritos y enumerados en grandes grupos: Pintura o retoque, Programas de ilustración, creación de animaciones vectoriales.

  • 13 Digitalización de imágenes. Programas de creación de animaciones vectoriales

    Seguimos con el curso de digitalización de imágenes explicando un poco sobre el programa de animación vectorial Macromedia Flash.

  • 14 Tabletas digitalizadoras

    Para finalizar el tema de digitalización de imágenes, vamos a estudiar un poco otra de las herramientas de que dispone el diseñador gráfico y el diseñador web para sus trabajos: las tabletas digitalizadoras.

  • 15 Introducción a los formatos gráficos

    Introducción teórica de los formatos gráficos en general.

  • Formatos gráficos

    Completa descripción de características y usos recomendados de los distintos formatos gráficos con los que podemos trabajar en el diseño gráfico para la web.

  • 16 Formatos gráficos en general y nativos de aplicaciones de diseño

    Introducción a los formatos gráficos. Vemos diferentes tipos de formatos gráficos así como sus compatibilidades.

  • 17 Formatos gráficos para las imágenes de la web

    Formatos gráficos disponibles para usar en páginas web, soportados por los navegadores. Descripciones y características de los archivos jpg, gif, png, bmp.

  • 18 Elección y optimización del formato gráfico

    En este artículo comparamos los diferentes tipos de formatos gráficos y te explicamos cómo se pueden optimizar para que ocupen menos y por tanto tu web se descargue antes.

  • 19 Formatos gráficos y gestión de ficheros. Optimización de gráficos

    Diferentes formas de optimizar las imágenes de una página web.

  • 20 Otros formatos gráficos para web

    Describimos otros tipos de formatos gráficos no tan comunes en las páginas web, pero wue tienen importancia.

  • Gestión de ficheros gráficos

    El diseñador debe manejar grandes cantidades de ficheros gráficos y para ello necesita herramientas que le permitan gestionar toda esa cantidad de recursos, así como seguir unas pautas de organización de las carpetas de los proyectos. Sobre estos asuntos versan los próximos artículos.

  • 21 Gestión de ficheros

    Pautas para el almacenamiento y localización de las imágenes para el diseño web.

  • 22 Soportes de almacenamiento externo

    Diferentes soportes de almacenamientio para las imágenes de una web.

  • 23 Gestión de ficheros gráficos: software y almacenamiento

    Distintas aplicaciones para la gestión de ficheros gráficos y soportes para el almacenamiento externo.

  • Elementos gráficos en el diseño web

    Nos introducimos en un área de alto contenido aplicable de manera general a cualquier diseño web, ya no es tanto sobre cuáles son las técnicas de trabajo del diseñador o sus herramientas, sino los elementos gráficos con los que se va a comunicar. Todo diseño comunica un mensaje y lo hace por medio de elementos como gráficos, textos y animaciones. Son elementos que forman parte de cualquier trabajo de diseño y a los que se les aplica una estética para la comunicación visual agradable.

  • 24 Elementos gráficos para el diseño

    Introducción a los elementos gráficos que podemos encontrar en los diseños en general y el diseño web en particular: ilustraciones, textos, logotipos

  • 25 Elementos gráficos para el diseño II

    Comentamos las diferentes caracteristicas de los textos con imágenes y los logotipos.

  • 26 Elementos gráficos para el diseño. Fotografías

    Detallamos la suma importancia de la fotografía en el diseño gráfico, así como las características de la misma.

  • 27 Elementos gráficos para el diseño. Iconos y botones gráficos

    Los iconos son uno de los elementos gráficos más usados en diseño web en general y los botones gráficos son parte fundamental de toda aplicación web.

  • 28 Elementos gráficos para el diseño. Botones gráficos

    Son elementos exclusivos de las aplicaciones informáticas y son muy comunes en las páginas web.

  • 29 Elementos gráficos para el diseño. Banners

    Los banners son los anucios que se colocan en las páginas de internet.

  • 30 Elementos gráficos en diseño: Cliparts, Dingbats y animación

    Continuamos con elementos gráficos para el diseño web explicando los clipart, dingbats y otro recurso tan importante como las animaciones.

  • 31 Elementos gráficos para el diseño. Animaciones

    Un recurso muy utlilizado en el diseño de páginas web.

  • 32 Capturas de pantalla e imágenes de fondo

    Pasos a seguir para realizar capturas de pantallas asi como establecer imágenes de fondo.

  • 33 Otros elementos gráficos

    Otros elementos que podemos utillizar en el diseño de nuestra página web.

  • 34 Componentes de una interfaz web. Introducción

    Una introducción a los componentes de una interfaz web para luego profundizar más en estos componentes tan importantes para el buen diseño web.

  • Componentes de una interfaz web

    Llegamos al último punto de nuestro Curso Práctico de Diseño web con una completa relación de los componentes y tipos de interfaces de usuario usados para la web. Los elementos gráficos que hemos visto anteriormente rara vez están solos en un diseño, sino que forman parte de entidades mayores que sirven para la comunicación o la interacción con el usuario. Ellas son las interfaces web que iremos describiendo a lo largo de los próximos artículos.

  • 35 Introducción a las Interfaces de usuario

    Qué son las interfaces de usuario, o interfaces gráficas, como una agrupación de elementos de diseño en una entidad. Revisamos y entendemos también las interfaces web.

  • 36 El dintel

    En general, el dintel es un elemento común en las páginas web que bien utilizado se convierte en un elemento identificador del sitio, aportando al mismo un estilo propio que lo distingue e identifica.

  • 37 Los sistemas de navegación

    Los sistemas de navegación son los elementos de una interfaz que permiten la navegación por las diferentes secciones y páginas que componen el sitio web.

  • 38 El cuerpo de una página

    El cuerpo es la parte de la página web donde se presenta al usuario toda la información referente a los contenidos de la página.

  • 39 El pie de página

    El pie de página es el elemento de una intefaz web situado en la parte inferior de la misma, bajo el cuerpo de página.

  • 40 Los espacios en blanco

    Explicamos la importancia de los espacios en blanco de una interfaz asi como sus distintas usabilidades. Aunque no lo parezca los espacios en blanco son un componente más del diseño de la página web.

  • 41 Interfaz web: La publicidad

    Las distintas localizaciones de la publicidad que se pueden dar en el diseño de una página web.

  • 42 Las barras de desplazamiento

    Un elemento más a tener en cuenta en las interfaces web son las barras de desplazamiento o scroll, situadas en la zona lateral derecha (barra de desplazamiento vertical) y en la zona inferior de una página web (barra de desplazamiento...

  • Descargas

  • Curso Práctico de Diseño Web para descarga

    El Curso Práctico de Diseño Web (parte 2) se encuentra disponible para descarga. Tenemos varios formatos de libros electrónicos que puedes obtener, según tus necesidades.

    Archivos disponibles: PDF, ePup, Mobi (Kindle)

    Páginas: 159 (Referencia por el archivo PDF)