UNIDAD 1: PLANIFICACIÓN DE INTERFACES
GRÁFICAS.
Módulo profesional: Diseño de interfaces Web
1
Índice
Tabla de contenido
Índice .............................................................................................................................................. 2
Introducción ................................................................................................................................... 7
Caso introductorio ......................................................................................................................... 8
Elementos del diseño. Percepción visual. ...................................................................................... 9
Ley de la proximidad ................................................................................................................ 11
Ley de la similitud..................................................................................................................... 11
Ley de la buena continuidad .................................................................................................... 12
Ley del movimiento común o ley de la buena dirección ......................................................... 12
Ley de la experiencia ................................................................................................................ 13
Ley de contraste ....................................................................................................................... 13
Ley de clausura o cierre. .......................................................................................................... 13
Ley de la inclusividad. .............................................................................................................. 14
Ley de simetría. ........................................................................................................................ 15
Ley de la pregnancia................................................................................................................. 15
Ley de la compleción................................................................................................................ 16
Ley de la buena forma.............................................................................................................. 16
Relación entre fondo y figura .................................................................................................. 16
Elementos del diseño web conceptuales................................................................................. 17
El punto. ............................................................................................................................... 18
La línea ................................................................................................................................. 19
La forma total ....................................................................................................................... 21
El cuerpo .............................................................................................................................. 21
Extremidades ....................................................................................................................... 22
El plano. ................................................................................................................................ 22
El volumen............................................................................................................................ 22
2
Conceptos formales o Elementos del diseño (Visuales) .......................................................... 22
Forma ................................................................................................................................... 22
Medida ................................................................................................................................. 23
Color ..................................................................................................................................... 23
Textura ................................................................................................................................. 25
Elementos de relación: dirección, posición, espacio, gravedad. ............................................. 25
Dirección .............................................................................................................................. 25
Posición ................................................................................................................................ 26
Espacio ................................................................................................................................. 26
Gravedad o equilibrio .......................................................................................................... 26
Elementos prácticos: representación, significado, función. .................................................... 26
Representación. ................................................................................................................... 26
Significado. ........................................................................................................................... 26
Función. ................................................................................................................................ 27
Color, tipografía, iconos ............................................................................................................... 27
El color...................................................................................................................................... 27
Psicología del color................................................................................................................... 29
La psicología del rojo............................................................................................................ 30
La psicología del amarillo ..................................................................................................... 31
La psicología del naranja ...................................................................................................... 31
La psicología del verde ......................................................................................................... 31
La psicología del azul ............................................................................................................ 32
La psicología del morado ..................................................................................................... 32
La psicología del marrón ...................................................................................................... 33
La psicología del negro ......................................................................................................... 33
La psicología del blanco ....................................................................................................... 34
La psicología del gris ............................................................................................................ 35
La psicología del rosa ........................................................................................................... 35
3
Colores primarios, secundarios y terciarios. ........................................................................ 35
Qué son los colores primarios: Definición y características ................................................ 36
Colores primarios, secundarios y terciarios. ........................................................................ 37
Colores fríos y colores cálidos. ............................................................................................. 38
Colores complementarios, análogos y monocromáticos. ................................................... 39
Los colores en la web. .......................................................................................................... 40
¿Cómo usar los códigos de colores HTML? .......................................................................... 41
2.2 Tipografía ........................................................................................................................... 45
2.3 Iconos ................................................................................................................................. 48
Interacción persona-ordenador ................................................................................................... 49
Interpretación de guías de estilo. Elementos .............................................................................. 51
Elementos de la guía de estilo. ................................................................................................ 52
Hoja de color. ....................................................................................................................... 52
Fuentes. ................................................................................................................................ 52
Cuadrícula y diseño de la página web. ................................................................................. 53
Estructura de navegación y organización de los materiales. ............................................... 53
Imágenes .............................................................................................................................. 53
Uso de otros elementos gráficos. ........................................................................................ 54
Patrones de diseño web ............................................................................................................... 54
Generación de documentos y sitios web ..................................................................................... 55
¿Cuándo necesito un gestor?................................................................................................... 57
Componentes de una interfaz web .............................................................................................. 59
Componentes de una interfaz web:......................................................................................... 60
Elementos de identificación:................................................................................................ 60
Elementos de navegación: ................................................................................................... 60
Elementos de contenidos: ................................................................................................... 60
Elementos de interacción: ................................................................................................... 60
El menú de secciones: .......................................................................................................... 60
4
Breadcrumbs o migas de pan:.............................................................................................. 61
Elementos de regreso a la página de inicio: ........................................................................ 61
Contenedor .......................................................................................................................... 62
Logotipo ............................................................................................................................... 62
Navegación ........................................................................................................................... 63
Contenido ............................................................................................................................. 63
Footer ................................................................................................................................... 63
Espacio Negativo .................................................................................................................. 63
Lenguajes de marcas .................................................................................................................... 64
Tipos de marcados ................................................................................................................... 64
Marcado de presentación .................................................................................................... 64
Marcado de Procedimiento ................................................................................................. 64
Marcado descriptivo o semántico........................................................................................ 64
Lenguaje de marcas HTML ....................................................................................................... 64
Versiones de HTML .................................................................................................................. 66
HTML 2.0 .............................................................................................................................. 66
HTML 3.2 .............................................................................................................................. 66
HTML 4.01 ............................................................................................................................ 67
HTML 5, HTML 5.1, HTML 5.2 .............................................................................................. 67
CREACIÓN Y VISUALIZACIÓN DE DOCUMENTOS HTML ........................................................... 68
Mapa de navegación. Prototipos ................................................................................................. 70
Mapa de navegación ................................................................................................................ 70
Prototipo .................................................................................................................................. 70
Wireframe y Mockup ........................................................................................................... 73
Otras herramientas de prototipado web: ............................................................................ 73
Aplicaciones para realizar mockups: .................................................................................... 74
Maquetación web. Elementos de ordenación. Marcos, tablas y capas ...................................... 74
Plantilla de diseño. ....................................................................................................................... 82
5
Resumen final............................................................................................................................... 85
Glosario ........................................................................................................................................ 86
Bibliografía y Webgrafía ............................................................................................................... 89
6
Introducción
Tras cualquier trabajo creativo, existe todo un abanico de mecanismos que
tienen que ver con la psicología humana y con cómo funciona nuestro
cerebro. ¿Qué hace, por ejemplo, que una web comunique algo mientras
otra no lo hace y pasa desapercibida? ¿Porque una imagen o un anuncio nos
llama más la atención y nos proporcionar la idea que deseamos de nosotros,
mientras que otro no lo hace y cae pronto en el olvido? La teoría de la
Gestalt nos puede ayudar a entender estos mecanismos.
Imagen 1: Cuántas patas tiene el elefante
¿Cuántas patas tiene este elefante?
Imagen 2: Perro dálmata
¿Por qué ves a un perro en la imagen anterior?
Quizás esté viendo a un perro dálmata, pero si lo piensas…. ¿no son sólo
puntos?
Es tu cerebro quien interpreta que hay un dálmata en lugar de ver manchas
negras. Esta interpretación tiene su base en las leyes de cierre y
proximidad, según los cuales nuestra mente interpreta un conjunto de
formas próximas y une las líneas formando una imagen.
7
SABÍAS QUE…
Las leyes de cierre y proximidad, provienen de la psicología,
más concretamente de la rama de psicología de la
percepción.
Y afinando más aún tiene que ver con la teoría de la Gestalt.
Caso introductorio
En el día de hoy, los trabajadores de la empresa de páginas web y
programación “Ideas Web” se reúnen para comentar y planificar los nuevos
proyectos, e intercambiar ideas sobre los que están trabajando
actualmente.
Durante la reunión se les traslada que tienen un nuevo cliente que tiene un
pequeño negocio dedicado a la elaboración de pan artesanal, y que desea
darse a conocer en internet, por lo que ha contratado los servicios de la
empresa para que hagan el desarrollo de su página web.
El comercial, plantea la conversación mantenida con el cliente de la que se
desprende el trabajo a realizar, que en principio, es algo sencillo donde se
quiere dar prioridad al aspecto visual de sus productos, algo que llame la
atención, indicando el cliente que desearía que la página principal tuviera
una animación o un video acerca de cómo elaboran el pan, así como dibujos
o fotografías que reflejasen este hecho.
a realizar es muy sencillo, en el que tendrán que dar prioridad al aspecto
visual ya que los clientes
Marta, se sonríe al oír esto ya que sabe que será su labor, José y Juan se
ofrecen para recabar la información necesaria, ir a la empresa, tomar fotos,
grabar el video, y demás información necesaria sobre los productos que
desean incluir los clientes en la página para que Marta pueda comenzar a
trabajar lo antes posible.
A Marta le parece estupendo, pero ella también quiere ir a la empresa para
verlo en persona, ya que eso le dará más ideas.
Antonio y María se pondrán inmediatamente a realizar unos bocetos previos
que cumplan con los requerimientos del cliente y le dirán a Sebastián toda
la información que se deberá incluir en la guía de estilo.
Pero Sebastián, los mira como si estuvieran locos y se plantea para qué es
necesario una guía de estilo si la web tan sólo va a constar de dos páginas
como mucho, le parece una pérdida de tiempo.
8
Marta le hace comprender la importancia de crear una guía de estilo, ya que
eso facilitará la labor, y en caso de que en un futuro el cliente quisiera
ampliar la web, sería muy necesaria para tener en cuenta la estructura que
se usó, como se colocaron los contenidos, los tipos de letra que se usaron,
cuáles son los colores corporativos, etc.
Finalmente, Sebastián comprende que es muy necesario hacer una guía de
estilo tanto para el trabajo actual como para poder recurrir a ella en un
futuro.
Ya todos están listos para ponerse con las ¡manos en la masa!
Elementos del diseño. Percepción visual.
A través de los sentidos somos capaces de percibir el mundo que nos rodea,
la percepción es el proceso por el cual se recoge y se realiza el tratamiento
de la información sensorial.
La percepción visual es un proceso cerebral mediante el cual se transforma
la información en forma de luz captada por el ojo en una realidad de forma
que así, interpretamos la información que nos rodea.
SABÍAS QUE…
La percepción es una interpretación significativa de las
sensaciones.
Desde la psicología surge la teoría Gestalt que trata sobre la percepción y
estudia la forma en que nuestro cerebro puede decodificar la información
que recibe a través de las distintas asociaciones que se producen en el
momento de la percepción. La Psicología de la Gestalt es una corriente de la
psicología moderna, surgida en Alemania a principios del siglo XX (1920)
Esta teoría, explica como nuestra mente configura, mediante ciertas leyes,
los elementos que le llegan a través de los canales sensoriales, lo que
conocemos como percepción, o a través de la memoria.
Las teorías de la Gestalt iniciaron una nueva forma de percibir las figuras y
formas, algo que también se puede aplicar en el momento de componer una
imagen, o en nuestro caso una web.
9
Gestalt niega que exista un "todo" perceptivo que esté compuesto por el
conjunto de datos que van llegando a nuestro cuerpo, Gestalt entiende que
el todo es más que la suma de las partes, lo que nos desvela los principios
de la teoría de esta corriente: es decir, por qué el cerebro humano tiende a
interpretar un conjunto de elementos diferentes como un único mensaje, y
como nuestra mente agrupa las informaciones que recibimos en categorías
mentales que nosotros mismos hemos establecido.
La escuela de Max Wertheimer (máximo exponente de la Gestalt) se ha
encargado de establecer una serie de leyes que, no actúan de forma
separada, sino que lo hacen de forma conjunta para hacernos percibir una
información que podría ser una imagen, por ejemplo.
Si logramos comprender cómo funciona la percepción humana, sabremos
cómo configurar una imagen para lograr la sensación que deseamos, y este
es el secreto de un buen diseño, con lo que tendremos mejores
herramientas para poder elaborar nuestro mensaje y transmitirlo de forma
efectiva.
Toda percepción es una búsqueda de significado y, por tanto, es un acto de
comunicación o de su propia búsqueda. Por tanto, el acto de percibir no es
la recepción pasiva de información visual, sino que implica buscar,
seleccionar, relacionar, organizar, establecer conexiones mentales,
recordar, identificar, establecer jerarquías, evaluar, aprender e interpretar
la percepción globalmente.
Como ya hemos mencionado, tras un trabajo creativo – ya sea para
imprenta, para la web o audiovisual – existirán un plan y una idea que no
son secundarios en el resultado del trabajo final.
Pensemos por ejemplo en la también conocida y famosa psicología del color
que explica y nos sirve de guía sobre cómo escoger las tonalidades en base
al mensaje que queremos trasmitir, al público al cual nos estamos
dirigiendo y a la idea que queremos que estos tengan de nosotros, también
explica cómo combinar de forma correcta los colores, cuestión también
estudiada por la psicología y que no hay que desatender en nuestros
diseños.
En el ámbito del diseño gráfico, este estudio de la percepción es
fundamental a la hora de analizar como el ojo humano lee un determinado
esquema, como distingue las formas y los elementos que lo componen, así
como la unidad del mensaje y su significado.
Las personas que se dedican al diseño son comunicadores visuales y por
ello, deben conocer al público, sus necesidades e inquietudes, sólo así
podrán lograr que el mensaje visual llegue de manera eficaz a sus
receptores.
10
La palabra Gestalt viene del alemán y significa literalmente “forma”, y es
que la forma y también el fondo son la base de sus leyes, y en general de
nuestra percepción sobre las cosas que vemos.
RECUERDA...
La percepción humana no es la suma de los datos
sensoriales que recibimos, sino que estos pasan por un
proceso de reestructuración en nuestro cerebro.
Algunas de las leyes de la Gestalt que debemos conocer para realizar un
buen diseño son:
Ley de la proximidad
Se tiende a percibir los elementos próximos entre sí como si formaran parte
de una unidad, es decir, agrupando los elementos que se encuentren más
cercanos para crear, una cierta uniformidad.
Al diseñar una interfaz web podemos aplicar este principio a un grupo de
botones, que, por poner un ejemplo, ejecuten ordenes similares, o
relacionadas.
Imagen 3: Ley de proximidad
Fuente:http://crecimiento-personal.innatia.com/c-psicologia-gestalt/aleyes-gestalt-ii.html#ley-de-semejanza
Ley de la similitud
Los elementos que son parecidos se perciben como si tuvieran la misma
forma.
Nuestra mente agrupa los elementos similares en una entidad. La
semejanza depende de la forma, el tamaño, el color y otros aspectos
visuales de los elementos. A mayor semejanza entre dos elementos, mayor
será la fuerza cohesiva entre ellos.
11
Imagen 4: Ley de similitud.
Fuente: http://crecimiento-personal.innatia.com/c-psicologia-gestalt/a-leyes-gestalt-ii.html
Ley de la buena continuidad
Los elementos que mantienen un patrón o dirección tienden a agruparse
juntos, como si fueran uno, es decir, percibimos elementos continuos,
aunque exista cierta discontinuidad entre ellos. Si están colocados formando
un flujo orientado hacia alguna parte, se percibirán como un todo.
Seguir una buena continuidad en un sitio web, hace que se visualicen mejor
los menús y sus elementos principales.
Imagen 5: Ley de continuidad
Fuente:
http://www.psyciencia.com/wp-content/uploads/2014/10/ley-decontinuidad.png
Ley del movimiento común o ley de la buena dirección
Se tiende a agrupar a aquellos elementos que vayan en la misma dirección.
12
Imagen 6: Ley de la buena dirección
Fuente:
http://leticiamendoza.files.wordpress.com/2009/02/buenacontinuidad.jpg
Ley de la experiencia
La experiencia visual que tiene el sujeto es importante para que todas las
formas y elementos de la imagen se agrupen para formar una imagen.
Ley de contraste
Se distinguen elementos por la diferencia de tamaño, color, posición…
Imagen 7: Ley de contraste
Fuente: http://www.uv.es/asamar4/exelearning/ley_inclusividad.jpg
Ley de clausura o cierre.
Nuestra mente añade los elementos que faltan para completar una figura.
Existe una tendencia innata a concluir las formas y los objetos que no
percibimos completos. Una forma se percibe mejor cuanto más cerrado está
su contorno para facilitar el orden de la imagen. Un ejemplo claro podría ser
visualizar una línea curva y asociarla a un círculo.
13
Imagen 8: Ley de clausura o cierre.
Fuente:
http://eltamiz.com/elcedazo/wp-content/uploads/2009/02/cierre.jpg
Ley de la inclusividad.
Es un tipo de camuflaje que tiende a homogeneizar la figura y el fondo.
Provoca desconcierto en el observador, porque la configuración de la
imagen trata de obstaculizar que algo sea percibido. Este principio suele
utilizarse en el área militar, en la publicidad y se da espontáneamente en la
naturaleza.
Imagen 9: Ley de inclusividad
Fuente: http://www.uv.es/asamar4/exelearning/ley_inclusividad.jpg
En esta imagen se puede percibir una copa o dos caras según lo que
percibamos como fondo, y es por ello que puede llegar a causar cierto
desconcierto en el observador y según quien vea la imagen podrá ver una
cosa u otra.
14
Ley de simetría.
Las imágenes simétricas son percibidas como iguales, como un solo
elemento, en la distancia.
Imagen 10: Ley de simetria
Fuente:
https://albertocv.files.wordpress.com/2010/11/ley-de-la-simetria1.jpg
Ley de la pregnancia
Tendencia a agrupar diferentes formas y elementos para establecer una
organización lo más clara y sencilla posible.
Imagen 11: Ley de pregnancia
Fuente:
https://s-media-cacheak0.pinimg.com/236x/34/ff/c6/34ffc6f886862add5db2d6511b806938.jpg
15
Ley de la compleción
Una forma abierta tiende a percibirse como cerrada.
Ley de la buena forma.
La ley más importante que nos indica la idea sobre la lógica por la que se
rige la generación de percepciones como un todo es la ley de la buena
forma, que dice que, que percibimos mejor aquellas formas más completas,
pero, al mismo tiempo, más simples o simétricas. Tendencia a organizar los
elementos pictóricos por formas lo más simétricas posibles. Se relaciona
con otras leyes ya que se prefieren figuras cerradas, mejor enfocadas y
organizadas en la misma dirección.
Relación entre fondo y figura
Afirma que cualquier campo perceptual puede dividirse en figura y fondo. La
figura se distingue del fondo por características como: tamaño, forma,
color, posición, etc. No podemos percibir una misma forma como figura y a
la vez como fondo de esa figura. El fondo es todo lo que no se percibe como
figura.
En una web, el sistema de ventanas en cascada usa la organización figurafondo para facilitar la distinción por parte del usuario de que la ventana que
resalta más, es la que se encuentra activa actualmente.
Imagen 12: Relación fondo-figura
Fuente:
http://25.media.tumblr.com/tumblr_m54vd2tzHz1r52aggo1_1280.jpg
Como se puede apreciar por las definiciones, estas leyes se interconectan y
juntas producen una sinergia: la Gestalt.
16
RECUERDA...
En resumen, la teoría de la Gestalt propone un
enfoque psicológico donde la persona tiene un papel
activo en el cual construyen unidades de significación
sobre sus experiencias y que, además, es permite
reestructurar sus "formas" mentales para obtener
puntos de vista más útiles y orientar mejor tanto la
toma de decisiones como los objetivos.
Elementos del diseño web conceptuales
Se tiende a ver el diseño, como la rama que simplemente hace que las
imágenes publicitarias, fotografía, webs, etc, se vean bonitas, En parte esto
es así pero no es la única función que tiene.
Mirando nuestro entorno, vemos un gran número de objetos con grandiosos
diseños, pensemos por ejemplo en una silla de oficina, ergonómica, con
aspecto de coche deportivo, etc. este diseño no solo está para adornar, por
ejemplo, una oficina, su función va más allá de eso, además de ser algo
bonito, llamativo y ofrecer una apariencia externa agradable, debe de
cumplir con otras funciones como: ser duradero, cómodo, etc.
Lenguaje visual y verbal, pueden descomponerse en unidades de
información mínimas con significado. Conocer bien estas unidades nos
ayuda a planear un mejor concepto de diseño y poder realizar un análisis de
una composición determinada muy detallado.
SABÍAS QUE…
El diseño web se dedica al diseño de páginas web y sitios
web y es una rama del diseño, donde existen una serie
de elementos conceptuales que son la base de todo.
Estos elementos conceptuales del diseño no son reales, sino elementos
teóricos que nos sirven como herramientas para reproducir el entorno.
Cada elemento conceptual del diseño web tiene unas determinadas
características que le permite desempeñar una determinada función dentro
de un conjunto o composición. Son los elementos base del diseño y sobre
ellos se asientan los demás elementos del diseño.
17
COMPRUEBA LO QUE SABES:
“Los elementos conceptuales no son visibles, no
existen de hecho, sino que parecen estar presentes”
Wucius Wong, fundamentos del diseño, Editorial GG.
El punto.
El punto es un elemento que representa el principio y fin de cualquier línea.
No tiene largo ni ancho.
Es, sin duda, el icono más simple, aun así, su simplicidad no excluye su
importancia y la influencia plástica de este elemento. No tiene volumen, y
es la unidad mínima de expresión gráfica o comunicación visual estando
muy relacionado con la superficie.
Es un elemento de suma importancia y se puede intensificar a través del
color, tamaño y su posición en el plano. Por el principio de agrupación se
pueden construir formas, contornos, tonos o colores (por ejemplo las
imágenes creadas con tramas tienen puntos para su composición).
Un punto nos indica una posición, además según el lugar donde situemos el
punto en el espacio podremos recrear sensaciones:
•
Centro: Ayuda a captar la atención, dando la sensación de orden y
equilibrio.
•
Extremo: Sensación de fuga y movimiento, e inestabilidad por las
áreas vacías desiguales alrededor del punto.
•
Dos puntos: Si vemos dos puntos Imaginaremos la existencia de una
línea en una dirección, bien recta ascendente, descendente, vertical u
horizontal.
•
Tres o más puntos: Dará a nuestra mente la sensación en la
configuración de una forma.
18
Imagen 13: Significado de la ubicación de un punto.
Fuente:http://mimente.com.mx/blog/wpcontent/uploads/2013/03/00_conc
eform_conce_punto.png
La simplicidad que tiene un punto hace que tenga una naturaleza que
transciende a la propia materialidad del medio de la representación en el
que se expresa y a la forma misma de esa expresión, es el centro de
atención y centro geométrico de una superficie, en especial si esta es
regular. Aunque no esté señalado físicamente condiciona el espacio en el
plano porque es uno de los centros de atención; La característica más
importante del punto es principalmente su naturaleza dinámica.
La línea
La línea también forma parte del diseño web, siendo esta la unión de
muchos puntos uno tras otro. La línea tiene una dimensión: largo y
dirección, pero no tiene ancho. Es también el espacio entre dos puntos, por
lo que una línea se puede definir con dos puntos.
La línea, elemento fundamental del diseño web también puede delimitar
formas cuando un conjunto de ellas se sucede y conforman un elemento
cerrado.
En el momento en que un punto se mueve, el recorrido que proyecta se
transforma en una línea o puede considerarse también una sucesión de
puntos, posee una sola dimensión, Largo. Crea vectores direccionales,
relaciones entre los elementos de composición y, lo más importante,
condiciona la estructura de la imagen.
Cuando la línea se multiplica crea volúmenes, planos y texturas, además es
capaz de representar una dirección de ascenso o descenso como curvas
19
formando ondas o la representación del palpitar de un corazón. Están
representadas de manera invisible en los textos, justificando a la izquierda
o a la derecha, creando columnas…en definitiva, rigen un orden.
Es un elemento que se hace indispensable en el diseño, tiene en el gráfico
la misma importancia que la letra en el texto. Sus principales elementos
son, por tanto: la dirección con respecto a la página, su longitud, su ancho,
grosor o espesor, su forma recta o curva, y su color.
El Punto y la línea son dos de los elementos fundamentales desde los que
parte cualquier diseño, Conocerlos bien y un correcto análisis permitirán la
elaboración de un concepto gráfico acorde a las necesidades del cliente.
En Diseño, emplearás la línea por su expresividad en el campo del Diseño
Gráfico. También la utilizarás en el Diseño Industrial cuando quieras definir
la forma del objeto, y en Diseño de Interiores para delimitar los espacios.
En el Diseño de Modas la línea definirá la forma de la prenda, así como el
patrón.
La línea es, por tanto, un elemento expresivo, y según su trayectoria
obtendremos líneas:
•
Rectas
•
Curvas
•
Onduladas
•
Quebradas
•
Mixtas
Imagen 14: Tipos de líneas
Fuente:
http://www.lostipos.com/wp-content/uploads/Tipos-de-l%C3%ADneas.jpg
20
Por su posición respecto a un punto, a otra línea o a un plano, pueden ser:
•
Paralelas
•
Divergentes
•
Convergentes
•
Perpendiculares
•
Oblicuas
•
De acuerdo a su trazo
•
Continuas o Discontinuas
•
Insinuadas o Completamente Cerradas
•
Gruesas o Finas
•
Grosor Uniforme o Grosor Variable
Las líneas rectas son líneas que van hacia una única dirección y pueden ser
horizontales, verticales o diagonales.
Las líneas horizontales dan la sensación de reposo y tranquilidad; las
verticales de equilibrio y elevación; las diagonales ofrecen la sensación de
movimiento.
Las líneas curvas son aquellas que no tienen tramos rectos y dan la
sensación de profundidad cuando están cerradas, y de dinamismo y
movimiento cuando son variables.
Las líneas mixtas combinan rectas y curvas,
características de ambos tipos de líneas.
también
adoptan
las
Forma total, el cuerpo y sus extremidades: Puede ser curva, recta, circular,
ondulada. Los bordes del cuerpo van a ser lisos o paralelos y también
pueden ser afilados y regulares.
La forma total
Se refiere a su apariencia general, que puede ser descrita como recta,
curva, quebrada, irregular o trazada a mano.
El cuerpo
Cuando la línea tiene un ancho, su cuerpo es el contenido entre ambos
bordes. Las formas de estos bordes y la relación entre ambos determinan la
forma del cuerpo. Normalmente, los bordes son lisos y paralelos, pero no
tiene porque ser así, a veces pueden dar la sensación de que el cuerpo de la
línea parezca afilado, nudoso, sinuoso o irregular.
21
Extremidades
Las extremidades no se aprecian si la línea es muy delgada, pero si es
ancha, pueden ser cuadradas, redondas o puntiagudas.
El plano.
El plano se define por dos líneas que se intersectan, también como una
línea desplazándose en una dirección diferente, y tiene ancho y largo pero
no grosor.
El plano, como elemento icónico, tienen una naturaleza espacial, e implica
otros atributos como son los de superficie material llamada a recibir el
contenido como el color y la textura
Un plano puede ser paralelo a la superficie, desviarse y dar sensación de
espacio, distancia, lejanía…etc., puede ser sólido, transparente, perforado,
texturizado, etc.
El volumen
El volumen se define por un plano que se desplaza en una dirección
diferente a la que le es natural, también por la unión de dos planos con
límites, uniendo los vértices de cada uno de los planos con el otro.
El volumen es un objeto gráfico que crea un espacio 3D con sus
características de ancho, altura y profundidad. Se crea por medio de planos
en movimiento y también perspectivas variando el tamaño, todo ello de
manera ilusoria.
Cuando a un plano le das movimiento, lo desplazas o clonas infinitas veces,
se genera un volumen. Posee tres dimensiones largo, ancho y profundidad.
Por tanto, se podría decir que el volumen es el espacio que ocupa un
cuerpo.
Conceptos formales o Elementos del diseño (Visuales)
Los elementos visuales, son la parte más importante del diseño, porque es
lo que realmente vemos. De esta forma, cuando los elementos conceptuales
se vuelven visibles y tienen forma, medida, color y textura, pasan a ser
elementos visuales.
Forma
“Todo lo que pueda ser visto posee una forma que aporta la identificación
principal en nuestra percepción” Wucius Wong.
Todo lo visible tiene una forma que el ojo percibe e identifica como objeto.
Todo aquello que vemos, posee una forma que empleamos para identificar
en nuestra percepción, es, por tanto, la apariencia externa de las cosas.
Según la clasificación de las formas, estas pueden ser:
22
•
Básicas o geométricas
Son formas que responden a una fórmula o construcción matemática.
Un ejemplo puede ser el cuadrado, el triángulo, el círculo...
•
Orgánicas o naturales
Son las que se inspiran en la naturaleza. En diseño las puedes
emplear cuando quieres transmitir sensualidad, movimiento o
dinamismo.
•
Artificiales.
Son aquellas que están creadas por el hombre, como el diseño de
una silla, de un coche...
Medida
Las formas tienen un tamaño, que es relativo, es grande, mediano,
pequeño…según con lo que lo comparemos y físicamente mensurable.
Porque la medida es relativa, un mismo elemento puede parecer grande o
pequeño según donde situación en el espacio, el color y los elementos que
le tenga alrededor.
Color
Una forma se distingue de sus cercanías por medio de un color. El color se
utiliza en su sentido más amplio, incluyendo los tonos neutros y las
variaciones cromáticas.
El color es energía luminosa visible para el ojo humano, lo podemos
relacionar con las emociones y por ello, está cargado de información, y
constituye una valiosa fuente de comunicación visual.
El color nos permite distinguir las formas, aunque, no sea una cualidad
permanente, ya que cambia con la luz ambiental.
Los diseñadores emplean los
sentimientos, emociones, etc.
colores
para
transmitir
determinados
El color y su contraste con otro color en particular, se usa también para
llamar la atención sobre una parte determinada de la imagen.
El ojo humano puede distinguir entre 10000 colores no solamente color del
espectro solar, RGB, sino también negro, blanco y grises, además de todas
sus variaciones cromáticas según nuestra propia percepción y sus
propiedades materiales: tono, saturación y brillo.
El color se debe a las radiaciones de luz que son absorbidas por la
estructura molecular de los cuerpos que son iluminados, así mismo también
23
depende de las longitudes de onda que los cuerpos reflejan. Así, el color se
percibe a través del sentido de la vista.
Existen dos tipos de colores: los colores luz y los colores pigmento.
•
Los colores luz
El color luz es el que se produce por las radiaciones luminosas sean del tipo
que sean (focos de luz, rayos catódicos de la televisión, LED de un
monitor...), los colores primarios son tres: rojo (Red), verde (Green) y azul
(Blue), cuando se mezclan los tres se obtiene el color blanco, lo que se
llama mezcla aditiva. A partir de los colores de luz primarios se obtienen los
colores de luz secundarios que son el amarillo, magenta y cian.
•
Los colores pigmento
Los colores primarios pigmentos son el cian, magenta y amarillo y cuando
se mezclan entre sí producen el negro, esto se denomina mezcla
sustractiva, porque al mezclarse pierden la luminosidad.
El color en la imagen gráfica está compuesto por pigmentos, mediante un
método sustractivo utilizado por la imprenta y artes gráficas en general. Se
denomina sistema CMYK (cian, magenta, amarillo y negro) o CMYK.
Sin embargo, el color en la imagen digital es de tipo RGB, este es el color
que trabajan tecnologías como el monitor de tu ordenador, una cámara de
fotos o tu televisión.
La gama de color
La gama de color es un grupo de colores con un vínculo entre sí. Existe la
gama cálida donde los rojos están siempre presentes y la gama fría donde
el color azul es siempre el protagonista.
Observa este vídeo atentamente y podrás comprender mucho mejor cómo
nacen los colores secundarios y cómo se crea una gama cálida o una gama
fría.
En el siguiente vídeo verás los colores pigmento
 https://youtu.be/RDZRyS2kOzs
24
En estos videos comprenderás mejor la teoría del
color.
https://www.youtube.com/watch?v=TVC1VFfdhb4
https://www.youtube.com/watch?v=Wo35qegBE5I
https://www.youtube.com/watch?v=meufdvLOcIU
https://www.youtube.com/watch?v=XcpfQB1bI6Q
Textura
Es un elemento visual que imita las cualidades del sentido del tacto. Una
textura puede ser plana o decorada, suave o rugosa, adecuada para atraer
los sentidos de vista y tacto. También hace referencia al tipo de material
utilizado y al efecto que se consigue, puede atraer tanto al sentido del tacto
como a la visual.
La textura es, por tanto, la propiedad superficial de una forma y permite
dotar de una identidad diferente al objeto o forma que representa.
Existen varios tipos de textura:
•
Textura visual: Su percepción es mayormente de carácter visual.
•
Textura táctil: En su percepción interviene, el tacto.
•
Textura natural: aquellas que provienen de la naturaleza.
•
Textura artificial: manipuladas por el hombre.
•
Textura orgánica: responden
encontramos en la naturaleza.
•
Textura geométrica: son aquellas relacionadas con el mundo de la
geometría, polígonos, poliedros...
a
formas
similares
a
las
que
Elementos de relación: dirección, posición, espacio,
gravedad.
Según como relacionemos las formas utilizadas darán una interpretación y
significado a un diseño.
Dirección
La dirección depende de cómo esté relacionada con el receptor, el marco
que lo contiene y las otras formas que estén a su alrededor.
25
Posición
Depende de la estructura u otro elemento que la contenga. La posición del
objeto será un factor a tener en cuenta a la hora de diseñar. Por ejemplo,
una imagen evoca pesadez cuando los elementos están concentrados en la
zona inferior, sin embargo, da la sensación de equilibrio cuando se sitúan en
el centro.
Espacio
Todo ocupa un lugar, un espacio y puede ser visible e ilusorio dando una
sensación de profundidad que realmente no hay. Lo crean la ubicación, el
tamaño, posición, color... que se les da a las formas.
El espacio que surge de tu diseño se debe de tener en cuenta. Cuando
hagas una tarjeta de presentación, un folleto ... usarás un formato
determinado que a su vez generará un espacio sobre el que vas a colocar
todos los elementos del diseño. Las formas que pongas en él, pueden
ocupar todo el espacio, una parte o dejar vacíos, además puede ser liso o
plano, o en perspectiva (ilusorio) con la intención de crear profundidad.
Gravedad o equilibrio
Este elemento de relación es muy potente ya que este efecto puede crearse
visualmente como por medio de la psicología, aportando connotaciones de
estabilidad o inestabilidad.
La sensación de gravedad es psicológica, no visual, ya que tenemos
tendencia a aplicar cualidades tales como pesadez, ligereza, estabilidad o
inestabilidad, tanto a las formas individuales como a los grupos de formas.
Elementos prácticos: representación, significado, función.
Representación.
¿De qué forma has realizado el diseño? Quizás sea un diseño realista,
estilizado, abstracto, cubista… Siempre que creamos un nuevo diseño se
han de tener en cuenta muchísimos factores, algunos ya los hemos visto en
apartados anteriores, todo ello para entender la génesis visual de una
creación visual. Cuando logramos ordenar todos los elementos y vemos
viable la producción del objeto o cosa a crear, entonces, el producto ya está
listo para ver la luz. Eso es lo que significa la representación, la forma
bidimensional o tridimensional ya creada para ser vista por el espectador.
Significado.
El significado es lo que da identidad al diseño, puede ser consciente o
subconsciente pero finalmente posee un mensaje. Toda producción
transmite, y quiere decir algo, según quien lo vea, y eso también dependerá
de cómo hayamos puesto los diferentes elementos que configuran el diseño.
Por tanto, cualquier diseño tiene un significado, y por tanto, un mensaje.
26
Función.
La función es la razón por la cual hemos creado un diseño y toma presencia
cuando este cubre el propósito para el que fue creado.
Estos fundamentos del diseño gráfico también son aplicados al diseño web.
Ya que el fin del diseño es crear un elemento estéticamente adecuado, pero
al mismo tiempo funcional, práctico junto con una composición que ofrezca
un mensaje.
Color, tipografía, iconos
El color
El diseño de una página web es una composición de las formas, así como
también es una combinación de colores. Los publicistas coinciden en lo
importante que es la forma en que se asocian los colores a la marca y lo
fuerte que es esta asociación, de forma que combinarlos mal puede llevar al
fracaso
Debemos escoger bien los colores, pues el cliente rápidamente decide si
permanece o no en nuestra web por las sensaciones que le produce el
resultado final de toda nuestra composición.
Aunque no hay reglas
concretas, existen algunas directrices que nos pueden ayudar a realizar un
diseño armónico.
Hay muchos aspectos relacionados con el color y la psicología, por ello, es
importante elegir bien los colores según el público potencial al que
queremos llegar, ya que los colores se asocian con determinados grupos o
tipos de personas. La página web debe ser atrayente y poder convencer a
las personas que la visitan, por ello tendremos que hacer una buena
selección de los colores con los que nuestro objetivo potencial, es decir
nuestros visitantes se sientan identificados
Así, si nos queremos dirigir a los hombres usaremos tonos grises o colores
oscuros, marrones oscuros o negros, también colores fríos como azules y
verdes. Las mujeres se identifican en general con otro tipo de colores como
los tonos morados o violetas, sin embargo si nos dirigimos a un público
joven los colores a elegir son más agresivos y llamativos como rojo,
naranjas o tonos verdosos.
Los colores transmiten sensaciones, sentimientos, es una de sus principales
características ya que son capaces de estimular ciertas zonas del cerebro
evocando sensaciones como tranquilidad, seguridad, confianza, alegría,
tristeza, etc. Este efecto que provocan los colores es de gran interés en
áreas como la publicidad y el marketing, ya que sólo con el color adecuado,
se consigue convencer sin necesidad de argumentaciones sobre las
propiedades y lo bueno que puede ofrecer un producto o servicio, porque
simplemente los colores del mismo describen estas propiedades, por
27
ejemplo, un Ferrari, es rojo, esto demuestra deportividad, velocidad,
agresividad de su motor, etc.
Pero…debemos ser cautelosos, ya que muchas de estas asociaciones tienen
un fundamento cultural, como sabrás vestir de negro es ir de luto en
nuestra sociedad, mientras que en otros países el color del luto es el blanco.
Por ello, debemos tener en cuenta estas asociaciones si queremos que
nuestra web tenga presencia internacional. Otro aspecto a tener en cuenta
al escoger los colores de nuestra marca y nuestra web es el equilibrio y la
armonía de colores, esto guarda relación con que el diseño sea más
efectivo.
¿Pero cuáles son los colores que debemos seleccionar? En
general, se debe, como recomendación seguir una de estas dos reglas:
•
Colores de la misma gama cromática; o lo que es lo mismo,
diferentes
tonos
de
un
mismo
color.
Imagen: 15 Colores de igual gama cromática.
Fuente: https://www.arturogarcia.com/wp-content/uploads/mismagama-cromatica.jpg
•
Colores opuestos o complementarios: son los que se hayan
situados al lado opuesto de la gama cromática y favorecen el
contraste.
Imagen 16: Colores complementarios u opuestos
Fuente:
http://3.bp.blogspot.com/CWzMCXuhx7M/UXdUou_i8sI/AAAAAAAAAKE/hvXLs6bDKa4/s640/colo
res+complementarios.png
28
Imagen 17: Modelo RGB y Tradicional
Fuente:
https://upload.wikimedia.org/wikipedia/commons/7/7a/Colores_opue
stos.png
Otra cuestión a tener en cuenta es que no debemos de abusar de los
colores: no más de dos o tres resultan suficientes y se recomienda que
exista un color que predomine.
El contraste en el color se produce cuando se combinan dos colores que no
tengan relación. Esto nos permite resaltar textos o imágenes, podemos
combinar colores claros con colores oscuros para crear este tipo de efecto
visual.
Psicología del color
El color tiene un gran poder, ya que no solo influencia los sentimientos, sino
también las acciones de las personas.
29
SABÍAS QUE…
Conocer la psicología del color nos puede ayudar a que
nuestra marca sea más efectiva y así poder conseguir
ventas y guiar a los clientes a páginas o a acciones
concretas dentro de nuestra web.
Muchos estudios han mostrado que las personas se deciden por un producto
en menos de minuto y medio y que el 90% de esa decisión se basa en el
color. Si comprendemos cómo el color afecta a las personas, tendremos una
gran herramienta de trabajo que podremos usar en nuestro beneficio.
Mostraremos aquí algunos conceptos básicos acerca del significado de los
colores:
La psicología del rojo
El color rojo es capaz de aumentar las pulsaciones y acelerar la respiración,
provoca emoción, pasión, amor, energía, calor y movimiento. También
puede tener connotaciones negativas, como agresividad, guerra, violencia,
fuego y el peligro.
Se usa el rojo para llamar la atención y expectación sobre algo. Puede ser
adecuado su uso en temas como la comida, moda, entretenimiento,
deportes, servicios de emergencia y seguros de salud. No es recomendable
su uso en proyectos relacionados con la naturaleza ni para páginas de
carácter profesional
Imagen 18: Ferrari rojo
Fuente:
https://cdn.morguefile.com/imageData/public/files/a/alvimann/preview/fldr
_2009_04_29/file5451241022212.jpg
30
La psicología del amarillo
El amarillo es uno de los colores más luminoso. Se relaciona con
sensaciones como la competitividad, felicidad, alegría, optimismo y
juventud. En su aspecto negativo se relaciona con cobardía, engaño y la
vulgaridad. En nuestra web podemos usar un amarillo fuerte para animar o
crear una sensación de felicidad a los visitantes, puede dar resultados
satisfactorios en los botones de llamada a la acción. Tenemos que tener
cuidado al usarlo, porque en exceso resulta cargante y cansa la vista, por lo
que debes usarlo con moderación.
Imagen 19: Imagen Porche Amarillo
Fuente:
https://cdn.morguefile.com/imageData/public/files/a/alvimann/preview/fldr
_2008_11_07/file0001122459970.jpg
La psicología del naranja
El naranja es un color lleno de energía y vida, se relaciona con diversión,
felicidad, energía, calor, ambición, emoción y entusiasmo. Podemos usarlo
cuando queramos llamar la atención en alguna acción como compras o
suscripciones, ventas u otro contenido que deseemos que llame la atención.
Es una buena elección en el caso de tiendas de automoción, tecnología,
entretenimiento, comida y cuidado de niños. Tampoco debemos abusar de
este color porque igualmente que el amarillo también puede resultar
cargante.
La psicología del verde
El verde da sensación de armonía, crecimiento, salud, naturaleza, bienestar,
dinero, calma, masculinidad, generosidad, fertilidad, envidia, buena suerte,
paz y energía. Es el color que mejor procesan los ojos, por eso dicen que es
un color bueno para estudiar, y las pizarras son verdes. Es una opción para
webs sobre ciencia, medicina, recursos humanos, medioambiente, turismo,
y sostenibilidad. No resulta adecuado para contenidos para un público
adolescente ni para artículos de lujo.
31
Imagen 20: Paisaje verde
Fuente:
https://cdn.morguefile.com/imageData/public/files/a/alvimann/preview/fldr
_2008_11_07/file000648615137.jpg
La psicología del azul
El azul está relacionado con lo masculino, la eficacia, calidad, calma,
sabiduría, lealtad, fuerza, productividad, seriedad, fortaleza, confianza y
seguridad. El azul fuerte es refrescante y energético. Suele asociarse con
empresas grandes y bancos reflejando seriedad. Es bueno en webs
relacionadas con salud, medicina, ciencia, tecnología, políticos y servicios
públicos. Si abusamos de él podemos hacer que nuestra página tenga un
aspecto de frialdad y que no resulte atractiva al público que la visita.
Imagen 21: Cielo azul playa.
Fuente:https://cdn.morguefile.com/imageData/public/files/n/natigamorin/0
2/l/1392938265v1cia.jpg
La psicología del morado
El morado se asocia con lo místico, y con la realeza, transmite creatividad,
imaginación, autoridad, sofisticación, poder, riqueza, prosperidad, misterio,
sabiduría y respeto. Se usa para dar sensación de lujo y riqueza. El morado
32
es muy adecuado en productos de belleza, masaje, astrología, yoga, salud,
espiritualidad. Usar tonos oscuros puede hacer que una página sea distante.
Imagen 22: Billete 500
Fuente: http://www.abc.es/media/economia/2016/05/04/billete-500euros-620x349.jpg
La psicología del marrón
El marrón asociado con la tierra, natural y cálido que también representa,
fiabilidad, estabilidad, amistad y naturaleza. Suele estimular el apetito,
pensemos, por ejemplo, en un café o en el chocolate, lo que lo hace
apropiado para el contenido alimentario. Normalmente se emplea para
fondos. Puede resultar aburrido y demasiado conservador, y no es útil para
llamar la atención.
Imagen 23: Chocolate
Fuente:
https://cdn.morguefile.com/imageData/public/files/a/andreeautza/09/l/144
3603055i06yi.jpg
La psicología del negro
El negro se asocia con lo sofisticado, elegante, con el poder, la estabilidad,
la fuerza y la formalidad. También tiene connotaciones negativas como la
muerte, el misterio, y la maldad. Dependiendo de los colores con los que lo
combines, puede ser elegante y tradicional, o moderno y puntero, como por
ejemplo combinado con el naranja. El negro también puede ser amenazante
33
o malvado, y hacer que nos sintamos asustados, como por ejemplo las
páginas webs de Hackers, que tienen todas estas connotaciones.
Imagen 24: Gato negro
Fuente:https://cdn.morguefile.com/imageData/public/files/a/alvimann/previ
ew/fldr_2011_04_12/file8101302629488.jpg
La psicología del blanco
El blanco se relaciona con la pureza, limpieza, felicidad, sinceridad y
seguridad.se asocia a los médicos, y en general al personal sanitario, por lo
que es un buen color para este tipo de páginas web relacionadas con la
industria médica. Combinado con el color oro, plata o gris, se asocia con
bienes de lujo. Su efecto depende sobre todo de los colores con los que se
combina, en teoría puede usarse para cualquier tipo de página.
Imagen 25: Médicos de bata blanca.
Fuente:https://cdn.morguefile.com/imageData/public/files/c/clarita/preview
/fldr_2004_05_24/file0001205588090.jpg
34
La psicología del gris
El gris se asocia con la tristeza, así como la formalidad. Es perfecto para
páginas profesionales, bienes de lujo, o para crear un efecto calmante de
equilibrio. No es un buen color para llamar la atención de la gente.
Imagen 26: Cielo gris
Fuente:https://cdn.morguefile.com/imageData/public/files/a/alvimann/previ
ew/fldr_2008_11_07/file0001293281321.jpg
La psicología del rosa
El rosa representa la sofisticación, sinceridad, romance, amor y puede ser
bastante apacible. Es un color adecuado para productos o páginas dirigidas
a mujeres. El rosa fucsia suele ser muy chillón, y los tonos más claros
pueden ser muy dulces o sentimentales para algunas páginas.
Imagen 27: Rosas
Fuente:https://cdn.morguefile.com/imageData/public/files/a/alvimann/previ
ew/fldr_2009_11_11/file1771257953052.jpg
Colores primarios, secundarios y terciarios.
La teoría de los colores primarios se remonta al libro Opticks (1704) de
Isaac Netwon. Desde entonces, han surgido varias líneas de investigación, y
es un tema en constante evolución, aunque actualmente se distinguen
varios modelos de color con sus colores primarios según su contexto.
35
Qué son los colores primarios: Definición y características
Los colores primarios o colores básicos son los que no se pueden conseguir
por la mezcla de otros y con ellos se puede mezclar una mayor gama de
tonos. Son singulares entre sí y diferentes ya que no tienen matices en
común.
Aunque existen varios modelos de color los que predominan son los
modelos con tres colores primarios, debido a la visión tricromática del ojo
humano que consta de tres tipos de receptores los cuales responden a unas
longitudes de onda de la luz concretas.
Las teorías del color tradicional y moderna no se ponen de acuerdo sobre
cuáles son los colores primarios. La teoría del color moderna, como ya
hemos visto anteriormente distingue entre colores luz y pigmento.
Podemos decir entonces que según el contexto estos son los colores
primarios:
Colores primarios luz (Modelo RGB): Rojo, verde y azul.
Imagen 28: Colores primarios
Colores primarios pigmento (Modelo CMY): Cian, magenta y amarillo.
36
Imagen 29: Colores pigmento
Fuente:
https://as2.ftcdn.net/jpg/00/27/57/69/500_F_27576973_2251wXRgDyg56
YAyAnSIvlvvx4zBWN0P.jpg
Existen otros modelos de color primario, aunque en desuso:
•
Colores primarios tradicionales (Modelo RYB): Rojo, amarillo y azul.
Este modelo está obsoleto y ya no se usa.
•
Colores primarios psicológicos: Rojo, amarillo, verde y azul.
Puedes aprender más sobre los colores visitando la Wikipedia:
https://es.wikipedia.org/wiki/Color_primario
Colores primarios, secundarios y terciarios.
Los colores primarios son la pieza principal sobre la que se construye el
círculo cromático también conocido como rueda de color. En primer lugar se
sitúan los colores primarios en posiciones equidistantes, mezclando dos
colores primarios surge un color secundario, y de la mezcla de un color
primario con su secundario obtendremos un color terciario.
37
AMARILLO + AZUL = VERDE
AZUL + ROJO = VIOLETA
ROJO + AMARILLO = NARANJA
Imagen 30:color secundario
Colores fríos y colores cálidos.
Un color es cálido o frío según la sensación psicológica de temperatura que
transmita.
Colores cálidos
Los colores cálidos son aquellos que van del rojo al amarillo, pasando por la
gama de naranjas, marrones y dorados. Cuanta más mezcla de rojo tenga
un color en su composición, más cálido será.
Son los colores del fuego, de la pasión, del atardecer, de las hojas en
otoño... Este tipo de tonos, además de la sensación térmica, parecen
avanzar y extenderse. También se les conoce como Colores Activos y
transmiten cercanía, intimidad, energía, calidez, etc.
Imagen 31: Colores cálidos
Colores fríos
Los colores fríos son la gama de color que va desde el azul al verde pasando
por los morados.
38
Cuanta más mezcla de azul tenga un color, más frío será. Son los tonos que
asociamos con el agua, al hielo, la luz de la luna, el invierno, la noche, los
mares y lagos, etc., parecen retroceder y contraerse. También se les conoce
como Colores Pasivos.
Imagen 32: Colores fríos
Colores fríos y cálidos se complementan, observa la siguiente rueda de
color.
Imagen 33: Colores fríos y cálidos se complementan.
Estas cualidades que se les atribuyen a los colores es lo que se ha
denominado "Temperatura del color".
Colores complementarios, análogos y monocromáticos.
Color complementario es el produce el mayor contraste de tono con
respecto a otro color.
En un círculo cromático son colores complementarios los que están en
lugares opuestos.
39
Imagen 34: Círculo cromático
Para entender el efecto complementario de los
colores prueba a fijar la mirada en una superficie de
un color plano y saturado durante al menos treinta
segundos y a continuación mira una superficie
blanca plana como pueda ser un folio o una pared.
Verás una ilusión óptica con la misma forma pero
en su color complementario que se produce para
compensar la fatiga ocular.
Podrás descubrir más cosas sobre los colores en la
siguiente web:

http://www.fotonostra.com/grafico/colorescalifrios.htm

Los colores en la web.
En un entorno gráfico digital, por lo general los colores se forman a partir
de los tres básicos, rojo, verde y azul, llamados componentes. Se expresan
en números hexadecimales del 00 al FF (0-255) por cada componente, así
por ejemplo, el rojo sería #FF0000, siendo rojo la máxima intensidad y
ausencia de colores verde y azul.
40
Para que quede más claro, los dos primeros números en hexadecimal del
código de color HTML hacen alusión a la intensidad del color rojo, siendo 00
el menos intenso y FF el más intenso. El segundo par de números
hexadecimales es la cantidad de verde, y el tercero la del azul. Así, con esta
combinación de la intensidad del rojo, verde y azul podemos mezclar
cualquier color.
¿Cómo usar los códigos de colores HTML?
Establecer color HTML para el color de fondo del sitio web:
<body style="background:#80B00F">
Establecer color HTML para configurar el color de la fuente/texto:
<span style="color:#8000FF">
Establecer color HTML para el color de fondo de las tablas:
<table style="background:#8FBFFF">
Establecer color HTML para enlaces:
<a style="color:#80B00F">
Para saber el color en hexadecimal que queremos poner, nos podemos
ayudar de herramientas disponibles en aplicaciones como Photoshop,
escogiendo un color en el selector de colores, nos dirá cuál es su color en
formato hexadecimal.
En los siguientes enlaces podrás pinchar en los colores deseados para que
nos indique el color en hexadecimal como puedes ver en la figura:
Imagen 35: Color codes
Fuente: http://html-color-codes.info/#Html_Color_Chart
41
Imagen 36: Color Picker
Fuente: http://html-color-codes.info/#HTML_Color_Picker
Los SAFE-colors, es decir colores que se ven en todos los navegadores, esto
es importante para que la página web se vea igual que la planeamos en
todos los navegadores.
En el siguiente enlace verás los SAFE-colors
http://html-color-codes.info/web-safe-colors/

En ocasiones, parece más fácil aprenderse, o incluso escribir el nombre de
un color en lugar de su código HTML, en el siguiente enlace puedes ver los
nombres que tienen los colores HTML.
Por poner algunos ejemplos:
•
Rojo: red
•
Rosa: Pink
•
Rojo oscuro: Dark red
•
Naranja osuro: OrangeRed
En el siguiente enlace encontrarás los nombre de los colores
usados en html.
http://html-color-codes.info/color-names/
42
En el siguiente enlace encontrarás un editor web por
si quieres probar.
http://html-color-codes.info/html-editor/

ColorPix es una herramienta que puedes descargar para obtener también
los colores en hexadecimal pasando el ratón por un color ColorPix lo
transforma en su hexadecimal correspondiente y en otros formatos de
color.
Busca en internet y prueba esta valiosa y sencilla
herramienta.
 https://colorpix.softonic.com/
Whats its color es una web donde puedes encontrar el color complementario
de una imagen que subas, o desde una url que escribas. De esta manera,
podremos crear cualquier tipo de diseño, desde trípticos, hasta diseños
web, que vayan a juego con la imagen subida.
Prueba en el siguiente enlace Whats its color:
https://whatsitscolor.com/
43
Imagen 37: Whatcolorisit.com
Fuente: https://whatsitscolor.com/
Color Schemer Designer, es otra herramienta que nos ayuda a encontrar los
colores adecuados que se complementan bien con uno que hayamos
escogido del que queramos partir para realizar nuestro diseño.
Comprueba en el siguiente enlace como funciona Color Schemer
Designer.
 http://colorschemedesigner.com/csd-3.5/
44
Imagen 38: Color Scheme Designer
Fuente: http://colorschemedesigner.com/csd-3.5/
2.2 Tipografía
El texto, es la base de todo sitio web, y mediante la tipografía transmitimos
la información, la fuente hace referencia al tipo de letra que usamos, es
importante saber que no todas las tipografías están disponibles o pueden
verse tal cual se crearon en una web.
Cada sistema operativo tiene sus propias fuentes, algunas coinciden y otras
no, por ello si escogemos una fuente en particular debemos asegurarnos
que sea visible en el mayor número de dispositivos posible, aunque los
navegadores son capaces de descargar las fuentes también tienen sus
limitaciones. Además de esto, a la hora de escoger una fuente también
juega un papel importante el buen gusto.
Para ver las fuentes que están instaladas en el sistema operativo Windows o
incluso para incluir nuevas fuentes, debes dirigirte al panel de control y
buscar “Fuentes”
45
Imagen 39: Panel de control
Fuente: propia.
Accediendo a “Fuentes” verás las que están instaladas en tu sistema
operativo.
Imagen 40: Fuentes
46
En el siguiente enlace podrás ver algunas tipografías
adecuadas para una web con sus descripciones.
https://es.jimdo.com/2014/12/12/elige-latipograf%C3%ADa-adecuada-para-transmitir-elmensaje-correcto-en-tu-p%C3%A1gina-web/

Algunas de las fuentes más usadas y compatibles son: Sans Serif, Verdana,
Arial, Helvetica, Times New Roman, Courier, CourierNew, entre otras. De
todos modos, la mayoría de programadores web usan las llamadas
“tipografías seguras”, definiendo un listado de tipografías en el código
separado por comas que se usarán en el orden establecido si están
disponibles o no en el ordenador del usuario, es decir, si la primera fuente
no está disponible, la segunda fuente será la que se use y así
sucesivamente.
Los grupos de fuentes más utilizados son los siguientes:
Verdana, Geneva, sans-serif, Georgia, Times New Roman, Times, serif,
Courier New, Courier, monospace, Arial, Helvetica, sans-serif, Tahoma,
Geneva, sans-serif, Trebuchet MS, Arial, Helvetica, sans-serif, Arial Black,
Gadget, sans-serif, Times New Roman, Times, serif, Palatino Linotype, Book
Antiqua, Palatino, serif , Lucida Sans Unicode, Lucida Grande, sans-serif, MS
Serif, New York, serif , Lucida Console, Monaco, monospace, Comic Sans
MS, cursive
Además de la tipografía utilizada, tenemos que definir su tamaño.
Normalmente, especificado en píxeles, se suele trabajar con 11 o 12 píxeles
ya que facilita la lectura en casi todos los tipos de letra, tamaños menores
hacen que sea menos legible.
Además de trabajar en pixels también, podemos definir el tamaño de letra
como un porcentaje de la tipografía "media" definida en el ordenador del
usuario.
Respecto a los efectos en la tipografía que podemos escoger en cualquier
texto web son:
•
Color.
•
Normal, negrita, cursiva, subrayado...
•
Alinear a derecha, izquierda, centro, justificado
47
•
Tamaño de fuente. En pixeles o %.
•
Espaciado de palabras, espaciado de no es una opción válida para
todos los navegadores web)
•
Otros
Otras limitaciones del texto en la web son su comportamiento del texto con
bloques.
Otro problema con el que nos podemos encontrar a la hora de diseñar
nuestra web es que el texto se puede adaptar de forma automática
alrededor de una imagen o un bloque rectangulares que estén alineados a la
derecha o a la izquierda, sería muy complicado que el texto se adaptase
alrededor de formas no rectangulares de forma automática, en caso de
tener que hacerlo, el texto se debería de presentar como una imagen, por lo
que es mejor diseñar teniendo en cuenta las limitaciones.
Texto
Texto
alineado a la forma, Texto alineado a la forma
alineado a la forma
Texto alineado a la forma
Texto alineado a la forma
2.3 Iconos
Un icono, es una imagen gráfica pequeña que suele representar acciones en
una web, por ejemplo, un icono en forma de sobre para indicar que si
pinchamos accedemos a la acción de enviar un correo electrónico, por lo
que el icono está ligado o representa la acción que contiene. Existen
algunos iconos que son estándares de facto, como por ejemplo la imagen de
un disquete para indicar la acción de guardar, o la lupa para buscar, etc.
Nos ahorran escribir texto y hacer la página web más visual e incluso
intuitiva a golpe de vista, por ello es muy importante escoger el icono
adecuado para poder comprender su significado, y tener en cuenta las
costumbres de los usuarios, por lo que, a lo mejor, innovar demasiado
puede repercutir en una mala comprensión de la acción a la que se refiere
el icono. Los iconos son subjetivos, es decir, que quizás no todos los
usuarios que accedan a nuestra web entiendan el mismo significado de los
mismos, por lo que se hace a veces necesario realizar varios diseños y
testearlos con los usuarios que van a a usar la web.
48
La mayoría de estos iconos son imágenes pequeñas con extensión .ico o
.png
Un icono debe contener la menor cantidad de detalle posible, únicamente lo
imprescindible para su comprensión (significado).
En las páginas web que están en el siguiente enlace
podrás acceder a páginas con iconos gratuitos para
agregar a tus páginas web.
https://hipertextual.com/archivo/2013/10/10paginas-con-iconos-gratis/
http://www.flaticon.es/

Sets de iconos:
Famfamfam: http://www.famfamfam.com/lab/icons/
Pinvoke: http://p.yusukekamiyamane.com/
Sweetie: Con licencia Creative Commons e incluye los ficheros de
Photoshop. http://sublink.ca/icons/
IconFactory: Algunos son de pago. http://iconfactory.com/
Glyphlab: Iconos con mucho detalle. http://glyphlab.com/
Buscadores de iconos:
Iconfinder: https://www.iconfinder.com/
Interacción persona-ordenador
La Interacción Persona-Ordenador, también conocida como IPO, es la
disciplina que estudia cómo se intercambia información entre personas y
ordenadores. El principal objetivo es que el intercambio sea eficaz y
eficiente, minimizando los errores e incrementando la satisfacción del
usuario.
Sus orígenes (IPO/HCI) vienen de la rama de la Psicología Aplicada que
estudia la Interacción que hay entre Persona-Ordenador. Surge de dos
disciplinas, la IPO/HCI también llamadas "Human Factors" y Ergonomía.
49
La Psicología es la ciencia que estudia la percepción, la adquisición de
habilidades, memoria, la resolución de problemas, el movimiento, las tareas
de juicio, la adquisición de habilidades y también el aprendizaje, la
resolución de problemas, las tareas que implican el juicio, las de búsqueda
o procesamiento de información así como la comunicación, como ves, todos
son procesos que necesitamos conocer para poder diseñar adecuadamente
sistemas de interacción con el usuario. Aunque esta ciencia lleva poco
tiempo hay muchas evidencias que se basan en resultados empíricos que
permiten el desarrollo de la IPO/HCI y, con ello, el desarrollo de sitios web
adaptados a cualquier tipo de usuario. Por lo que la IPO es muy importante
en el concepto que trataremos más delante de Usabilidad.
Licklider y Clark ya hacia 1962, crearon una lista con 10 problemas que se
deberían resolver para así hacer más sencilla la interacción personasordenador.
•
Compartir el tiempo de uso de los ordenadores entre muchos
usuarios.
•
Sistemas de entrada-salida que permitan la comunicación usando
tanto datos simbólicos como gráficos.
•
Sistemas interactivos de procesamiento de las operaciones en tiempo
real.
•
Sistemas que permitan el almacenamiento masivo de información, así
como su rápida recuperación.
•
Sistemas que permitan la colaboración entre personas tanto en
diseño como en la programación de grandes sistemas.
•
Reconocimiento de la voz, de la escritura manual y también de la
introducción de información a partir de escritura manual directa por
parte de los ordenadores.
•
Comprensión del lenguaje natural, tanto de forma sintáctica como
semánticamente.
•
Reconocimiento de la voz de varios usuarios por el ordenador.
•
Simplificación, desarrollo y nuevos descubrimientos de las teorías de
algoritmos.
•
Programación heurística o mediante los principios generales.
el
En 1971, Hansen hace la primera enumeración de principios para el diseño
de sistemas interactivos:
50
•
Conocer al usuario
•
Hacer que haya que memorizar menos cosas, para ello se sustituye
la entrada de datos por la selección de ítems, o por ejemplo, usando
nombres que sustituyan cadenas de números, asegurándose un
acceso rápido a la información y un comportamiento predecible.
•
Optimizar las operaciones haciendo que exista una rápida ejecución
de operaciones comunes, que la consistencia de la interfaz sea
homogénea y organizando la estructura de la información basándose
en la observación de cómo se usa el sistema.
•
Facilitar mensajes de error que sean claros y concisos, crear diseños
para evitar los errores habituales, permitiendo deshacer acciones
realizadas y pudiendo garantizar la integridad del sistema ante un
fallo de software o hardware.
Algunos de estos planteamientos aún no han sido resueltos a día de hoy, y
encontramos webs absolutamente ilegibles.
En el siguiente enlace encontrarás más información.
https://eva.fing.edu.uy/pluginfile.php/48332/mod_resourc
e/content/0/materiales/Nexo_2012/NEXO__Interaccion_Persona_Computadora_--_Que_es.pdf
Interpretación de guías de estilo. Elementos
Antes de hacer nuestro diseño web, existe la necesidad de crear una Guía
de Estilo, que no es más que un documento que establece el “estilo” o
formato estándar para tu página web, donde se establecen las directrices
que se establecerán para el formateo de textos e imágenes, uso de colores
y fuentes, y las variaciones de logotipo que se pueden utilizar, etc.
Una página web no debería ser creada sin una guía de estilo que la
respalde, incluso en algunas empresas grandes de diseño es algo
imprescindible. En definitiva, es un documento de comunicación que ajusta
las expectativas de todas las personas implicadas en el proyecto, y una
51
forma de asegurarse de que no haya sorpresas al final, ya que se han
seguido una serie de criterios preestablecidos en el diseño.
Antes de comenzar con el código a editar nuestra web, deberíamos coger
papel y lápiz y preparar nuestros esquemas de la web, y sus las directrices
a seguir, que nos ayudarán a mantener cierta coherencia en todas las
páginas, desde los estilos de botón, tipografías a usar, colores e incluso la
estructura de navegación. También sirve para asegurarse que partes
separadas del sitio web sean consistentes y creen una experiencia al final
que sea cohesiva.
Por otra parte, sirve de guía cuando son varias las personas que trabajan en
un mismo documento, así tendrán una referencia común.
Elementos de la guía de estilo.
Hoja de color.
Tonos que te gustaría utilizar, combinación de colores de tu página web,
cómo será el fondo, colores de las letras, etc. Empieza estableciendo cuáles
serán los colores primarios que predominaran solamente deben incluir tres
tonos. Necesitarás colores secundarios e incluso terciaros para crear tu
interfaz de usuario, ¿cuáles? Además, sería interesante incluir colores
neutrales como el blanco, gris y negro para hacer que los colores primarios
resalten.
Fuentes.
Por lo general no son necesarias más de tres. Busca las combinaciones de
fuentes adecuadas. Decide qué tipo de letra que vas a utilizar para los
títulos, subtítulos, encabezados y el texto principal. Si determinados textos
irán en negrita o cursiva, cómo serán los títulos, etc.
Establece una jerarquía e identifícala. Define los tipos de titulares: h1, h2,
h3, h4, h5 y h6, el cuerpo, negrita y variaciones de cursiva. Piensa en las
fuentes que serán usadas para links cortos, texto de introducción, etc.
Ofrece fuentes, colores y tamaño.
52
Imagen 41: Header tipos
Cuadrícula y diseño de la página web.
Define dónde se colocarán los elementos. Diseña algunas plantillas. Una
buena cuadrícula es clave para un buen diseño web, que nos aportará
coherencia.
Estructura de navegación y organización de los materiales.
Realiza un Mapa de la información que deseas mostrar, en esta fase es
donde le daremos nombre a las opciones del menú. Las opciones del menú
pueden incluir encabezados, como inicio, acerca de, contacto, galería,
portfolio, e incluso subcategorías, enlaces y comentarios.
Debemos plantearnos también si vamos a usar una página a modo de
introducción, o si nuestra web irá en español o en otros idiomas.
Este mapa nos ayudará mucho a estructurar mejor la web e incluso nuestra
mente a la hora del diseño, y nos facilitará la colocación de los elementos
de la misma.
Imágenes
Imágenes que mostraremos, necesidad de títulos para las imágenes, saber
si están listas para subir a la web o requieren algún tipo de retoque o
compresión.
Decidiremos cómo se mostrarán las imágenes, si van a ir con un marco o tal
cual. Si vamos a poner una galería de fotos cómo las vamos a mostrar.
Las imágenes hablan más que mil palabras y recrean miles de sensaciones
y sentimientos. Asegúrate de incluir imágenes que definan el estilo, valores
de la marca y su misión.
53
Uso de otros elementos gráficos.
Considera si es necesario el uso de elementos gráficos, cómo y cuándo
serán incorporados, y cómo y dónde será integrado el logotipo de la
empresa.
En ningún caso este documento es inamovible, siempre podemos hacer
cambios y actualizarlo cuando sea necesario.
Para que te sirva de referencia en el siguiente enlace verás la
Guía de estilo web del portal “Universidad de Cádiz”
http://www.uca.es/recursos/doc/Unidades/Gab_Com_Mar
k/465200059_19420109123.pdf

Otras guías de estilo:
http://inesby.com/data/documents/D363C-Manualde-Estilo-Web-II.pdf
http://www.biblioteca.org.ar/libros/210390.pdf
http://ofiweb.ugr.es/pages/guiaestilos/guia_estilos_u
gr/

Patrones de diseño web
El patrón de diseño web es un aspecto del diseño visual por el que se
determina la disposición de los elementos del sitio web en el área de
visualización determinado por el navegador. Algunas de las técnicas
empleadas son:
•
Ancho fijo
Donde el contenido se ajusta a un ancho determinado y crece de forma
vertical.
Este método es el más habitual, y un estándar bien soportado incluso por
dispositivos móviles de pantalla pequeña (móviles, tablets, etc), cuyos
navegadores detectan este patrón y permiten ampliar por áreas la página
presentada.
54
El ancho más utilizado está adaptado a pantallas de 1024 puntos de ancho,
y la columna que forma el contenido suele estar centrada, y en menor
medida con alineación a la izquierda.
•
Diseño web líquido
El contenido aquí ocupa toda el área visual disponible acorde al tamaño de
pantalla y las dimensiones de la ventana del navegador.
Tiene un gran impacto visual un poco limitado ya que por definición las
proporciones de los elementos que lo componen son variables, surgiendo
espacios vacíos entre ellos.
•
Patrón de diseño web híbrido
Cuando se combinan áreas con ancho fijo y otras con ancho variable.
•
Diseño web para móviles
Cuando realicemos un diseño para dispositivos móviles o tablets, tendremos
que considerar el patrón de diseño y otros aspectos, como la forma en que
se disponen los contenidos, la cantidad de ellos, criterios de accesibilidad, el
peso de imágenes y archivos para que se carguen correctamente, etc.
Generación de documentos y sitios web
Los documentos web normalmente se crean a partir del código html, junto
con otros como css, javascript, etc, pero no siempre tendremos que partir
de cero a la hora de crear un nuevo documento, ya que actualmente
disponemos de herramientas CMS (content management systems), gestores
de contenidos, que facilitan bastante todo el proceso de creación, como por
ejemplo, Joomla, PrestaShop, Magento, OpenCMS, Wordpress o Drupal,
donde ya disponemos de plantillas prediseñadas listas para generar
contenido sin preocuparnos mucho de aspectos de diseño, aunque también
lo podemos modificar a nuestro gusto partiendo de una plantilla.
Los gestores de contenidos poseen una interfaz que controla una o varias
bases de datos donde se aloja el sitio web, donde se puede acceder
mediante una serie de roles como administrador, editor o participantes sin
necesidad de dar un formato nuevo a los contenidos que se vayan
añadiendo.
55
Imagen 42: Gestor de contenidos funcionamiento.
Fuente: Neosoft.
Esta herramienta nos permite fácilmente crear contenidos, editarlos,
eliminarlos, ordenarlos… y publicarlos en nuestra web siempre que
queramos desde un ordenador conectado a internet y sin depender de nadie
para ello.
Imagen 43: Funcionamiento CMS
Fuente: NEosoft
56
Este gestor en realidad es una página o aplicación web que a la que se
puede acceder con un usuario y una contraseña. Una vez dentro de la
aplicación podremos acceder a las diferentes secciones y modificar los
contenidos de nuestra página.
¿Cuándo necesito un gestor?
Si vas a actualizar los textos de la página habitualmente, si tienes una
sección dinámica, bien de noticias o bien de interacción con el usuario o una
muestra de productos con stock que va cambiando, y sobre todo si no
quieres depender de nadie para modificar tus contenidos.
Existen diferentes tipos de CMS.
•
A medida, creadas específicamente según nuestras necesidades.
•
Genéricas, como Joomla o Wordpress, el inconveniente es que no
permiten grandes cambios.
•
Gestores de Cursos. Plataformas de estudio como Moodle, que
posibilitan la creación de cursos, contenidos, evaluaciones…
•
Tiendas online. Gestores que nos permiten poner a la venta
productos o servicios con espacios para catálogos, pasarelas de
pago…
•
Gestores de mapas. Gestión que nos permite la creación de mapas,
rutas, vuelos virtuales….
•
Gestores de envío de boletines y mailings. Creación sencilla de
boletines y mailings para el envío de información a usuarios
registrados.
•
Gestores de incidencias. Control interno de incidencias con acceso
de usuarios, tiempos de resolución…
Hoy en día se encuentran en el mercado entre 250 y 300 programas
diferentes, que van desde simples sistemas modulares para blogs a
gestores más completos para el ámbito profesional, sus ámbitos de
aplicación son tres, Web Content Management, Blog Publishing/News y
Social Publishing/Communities, importante para decantarnos por un tipo de
CMS u otro, para ello es necesario tener claro el contenido y el objetivo del
proyecto.
Uno de los CSM más conocidos y usado es Wordpress, se instala fácilmente,
y se administra y gestiona también de forma sencilla.
57
Accede a Worpress y trastea un poco:
https://wordpress.com/

En el siguiente enlace encontrarás tutoriales y videos
con los que empezar:
https://es.support.wordpress.com/videotutoriales/

Imagen 43: Wordpress
Fuente: https://es.support.wordpress.com/video-tutoriales/
Aunque no lo creas, muchas webs conocidas
Wordpress, por ejemplo spotify.com
están
realizadas
con
58
Videos de ejemplo con Wordpress
https://www.youtube.com/watch?v=HvU78E35rA0
Imagen 44: Spotify
Fuente: https://www.spotify.com
En el siguiente enlace encontrarás más ejemplos sobre
otras empresas que también usan Wordpress.
https://neliosoftware.com/es/blog/75-ejemplosde-marcas-organizaciones-que-usan-wordpress/

Componentes de una interfaz web
Una interfaz web es una estructura formada por una serie de elementos
gráficos e hiperenlaces que permiten a los usuarios acceder a los contenidos
de un sitio web. Para que el diseño web sea correcto es necesario cuidar
mucho la interfaz web, la cual debe permitir a los usuarios poder navegar
fácilmente y de forma cómoda y eficaz por nuestro sitio.
59
Un sitio Web debe ante todo accesible, intuitiva y agradable, para mantener
a los usuarios en ella. La organización inicial es muy importante para poder
utilizar eficazmente las herramientas y tomar decisiones oportunas.
Los componentes de una página web son: imágenes, textos, contenidos
multimedia, hiperenlaces… Las diferentes secciones se encuentran
enlazadas de forma que el usuario pueda navegar de una página a otra
utilizando hipervínculos, el concepto de interactividad surge de esta forma
con el fenómeno Internet.
Componentes de una interfaz web:
Elementos de identificación:
Son los elementos que identifican un sitio web. El usuario al verlos sabe a
qué sitio a accedido. Ejemplos de ello son: logos, título de la página,
nombre de dominio, banderas, etc.
Elementos de navegación:
Son elementos fundamentales en el diseño web. Estos elementos permiten
a los usuarios del sitio navegar por todas sus páginas web. Por lo que están
presentes en todas las páginas web del sitio y deben ser muy intuitivos.
Habitualmente los elementos de navegación de un sitio se sitúan en la barra
de navegación superior y/o en una barra de navegación lateral.
Normalmente el logo del sitio web nos traslada directamente a la página
web de inicio. Por lo que es un componente de identificación y navegación.
Elementos de contenidos:
Son las zonas donde se muestra el contenido o información relevante de
cada página web de nuestro sitio. Se subdivide en título y contenido
propiamente dicho.
Elementos de interacción:
Son las partes de la web que permiten interactuar al usuario. Por ejemplo:
un formulario de contacto, una caja de búsqueda, un selector de idiomas,
un botón, etc.
Para crear correctamente una página web, en el sistema de navegación del
sitio no pueden faltar una serie de elementos:
El menú de secciones:
El menú de secciones es la columna vertebral del sitio web. A través de el,
se debe poder acceder a todas las páginas del sitio. Por lo que debe
aparecer en todas las páginas del sitio y localizado siempre en la misma
posición, para que sea lo más fácil e intuitiva la experiencia de navegación
del usuario.
60
Este menú se sitúa normalmente en la parte superior de la página, por
debajo de la cabecera. Aunque en ocasiones también se coloca en un
lateral de la página.
Está formado por las diferentes secciones que forman parte del sitio web, y
en ocasiones cada sección está dividida en subsecciones.
Breadcrumbs o migas de pan:
Las migas de pan o breadcrumbs indican en que página estamos y por qué
páginas hemos pasado hasta llegar a nuestro destino actual. Por ejemplo:
Inicio > tratamientos > masajes
En el ejemplo queda patente que estamos en la página masajes. Y que para
llegar hasta ella, hemos pasado por la página tratamientos.
En algunas páginas es posible hacer “click” sobre los breadcrumbs para
acceder directamente a la página seleccionada, es decir, funcionan como
hipervínculos. En nuestro ejemplo, si hacemos click sobre la palabra
“tratamientos” accederíamos a dicha página directamente.
Elementos de regreso a la página de inicio:
Cuando nos encontramos en una página del sitio web, es muy útil poder
tener un acceso para volver a la página de inicio con un solo “click”.
Habitualmente esta función la cumple el logo, ya que suele estar presente
en todas las páginas del sitio y cuando hacemos “click” sobre él podemos
volver a la página de inicio. Como hemos comentado anteriormente,
también podemos implementar esta característica sobre el breadcrumbs.
61
Imagen 45: Componentes web
Fuente: apuntes html
Contenedor
Esto es lo que se define dentro de la regla Body o dentro de algún div que
forma parte de nuestra estructura. Dentro del contenedor irán todos los
elementos que corresponden al sitio; texto, módulos, videos, contenidos de
audio, imágenes, etc.
Este contenedor podrá tener un ancho fijo o fluido; el ancho será el mismo
para todos los navegadores y dispositivos, en el caso del fluido, este se
adaptará según el ancho de nuestra ventana. Si usamos web responsive,
todo esto se manejará con CSS sin ningún tipo de problemas.
Logotipo
El logotipo es la imagen de la empresa, y será lo que identifique la marca
dentro de todo el sitio web. Puede ser el logotipo de la empresa o su
nombre. Suele estar en la parte de arriba, y acompañara la navegación por
todas las páginas del sitio web permitiendo así el reconocimiento de la
marca.
62
Navegación
La forma de navegación y el menú que lo permite son muy importantes.
Normalmente se usa el menú horizontal, ya que es la forma más aceptada y
fácil, y permite tener a mano las opciones más importantes de nuestra web,
como por ejemplo, el acceso a diferentes páginas con secciones concretas,
como información de la empresa, productos, precios, contacto, etc.
Los menús verticales pueden usarse como complemento o también como
sub menús, de los horizontales, y siempre es importante que estén
cercanos a la línea horizontal del menú principal, además, estos deben ser
visibles en el momento de entrar en la web.
Contenido
El contenido es el aspecto más importante y el fundamento de una buena
página, ya que mantiene al visitante interesado en lo que está viendo,
leyendo o escuchando, y por ello, permanecerá más tiempo en nuestra web.
Si el contenido es malo y resulta poco o nada interesante, el usuario
abandonará la página en cuestión de segundos. Por ello, debe estar
centralizado, enfocado y en primer plano. El mejor lugar de nuestra página
web debe ser para los contenidos. Para Google, el contenido es lo más
importante, ya que actualmente sus búsquedas se basan en los contenidos
y en lo novedosos que son, lo que ayudará en cierta forma posicionamiento.
Footer
El footer se localiza al final del sitio, en la parte de abajo, por norma
general, es donde se pone información como el Copyright, cuestiones
legales o menús secundarios. Aunque de un tiempo a esta parte, también
es usado para información acerca de redes sociales, direcciones, incluso
noticias.
Espacio Negativo
Esto es igual de importante que el espacio positivo. Es el espacio en blanco,
es decir, todo aquello que no tiene información. , pero que también cumple
un rol muy importante para la web, ya que permite tener espacios de
respiración, que ayudan a equilibrar y balancear todo el diseño. Si tu
cliente es ignorante o nosotros somos novatos en esta materia, lo más
seguro es que tratemos de llenar todos los espacios, y con ello lo único que
conseguimos es crear una saturación de contenidos, dejando una web
ilegible, que no tendrá el efecto deseado en nuestro usuario, los contenidos
y el uso del espacio debe aportar claridad y cierto orden en la web.
63
Lenguajes de marcas
Los lenguajes de marcado suelen confundirse con lenguajes de
programación, pero no tienen nada que ver, ya que el lenguaje de marcado
no tiene funciones aritméticas o variables, está basado en etiquetas que
tienen una clara acción, sin embargo, los lenguajes de programación sí
poseen funciones aritméticas, variables, funciones, etc.
Un lenguaje de marcado o lenguaje de marcas es la forma de codificar un
documento que, junto con el texto, incorpora etiquetas o marcas que
contienen información adicional acerca de la estructura del texto o su
presentación.
Tipos de marcados
Marcado de presentación
Indica el formato del texto, es decir cómo ha de presentarse el documento.
Las etiquetas de marcado suelen estar ocultas al usuario. Ejemplo:
Microsoft Word.
Marcado de Procedimiento
También enfocado hacia la presentación del texto, pero, las marcas que
formatean el texto si son visibles para el usuario y permiten procesamiento
(realizar un conjunto de acciones) según el tipo de etiqueta. Ejemplo:
LaTeX, HTML
Marcado descriptivo o semántico
Utiliza las marcas o etiquetas para describir los fragmentos de texto.
Ejemplo: XML
Lenguaje de marcas HTML
Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un
documento que, junto con el texto, incorpora etiquetas o marcas que
contienen información adicional acerca de la estructura del texto o su
presentación. Por ejemplo, en el caso de HTML, XML y XHTML, las etiquetas
de formato son de este tipo ‹ y ›. El texto que está incluido dentro de uno
de los delimitadores es parte del lenguaje de marcado y no del del texto
anotado. Por ejemplo
‹ p › por ejemplo, este párrafo de texto está escrito en HTML ‹ /p ›
64
El lenguaje de marcas más extendido y usado es el HTML (HyperText
Markup Language, lenguaje de marcado de hipertexto), fundamento del
World Wide Web (entramado de comunicación de alcance mundial).
La gran mayoría de las páginas web están escritas en HTML. HTML define
cómo se muestran imágenes, multimedia y texto en los navegadores web.
Incluye elementos que permiten vincular los documentos (hipertexto) y que
permiten cierta interactividad de los documentos web con el usuario.
HTML es un lenguaje de marcado estándar, desarrollado por el World Wide
Web Consortium (W3C), y basado en SGML (Standard Generalized Markup
Language). Es un lenguaje que utiliza etiquetas que definen la estructura de
un texto. Elementos y etiquetas se definen dentro de los caracteres menor y
mayor ‹ y ›.
Pero HTML no es el único estándar, existen otros que también permiten el
desarrollo web. Con el tiempo HTML ha ido desarrollándose, y se han
añadido nuevas etiquetas que lo hacen un poco más complicado, así las
etiquetas de estilo y contenido se unieron con el tiempo en un solo
lenguaje.
Finalmente, el W3C decidió que era necesaria la separación entre el estilo
de una página web y el contenido. Pese a esto, se mantienen algunas
etiquetas que definen el contenido por sí solo, como H1, pero para etiquetas
que definen estilo, como las de las fuentes, han quedado obsoletas desde
que surgió HTML 4.01 en favor de las hojas de estilo, CSS.
La nueva versión de HTML es HTML5. HTML5 añade más funciones en HTML
y elimina parte de la rigidez que le fue impuesta por XHTML. Sin embargo,
HTML5 aún es un lenguaje de marcas.
En la página web de w3cschools, puedes encontrar la
definición del estándar HTML, su uso, las etiquetas
obsoletas y las que están en uso, así como ejemplos
que aclaran su uso
 https://www.w3schools.com/html/default.asp
Incluso te puedes certificar en varios lenguajes, las
certificaciones son muy apreciadas en el ámbito
laboral.
https://www.w3schools.com/cert/default.asp
65
En el siguiente video podrás ver un ejemplo con
lenguaje de marcas HTML
https://www.youtube.com/watch?v=ea8bOU33ia4
Más información sobre los lenguajes de marcas:
http://www.ticarte.com/contenido/que-son-loslenguajes-de-marcas
https://es.wikipedia.org/wiki/Lenguaje_de_marcad
o

Versiones de HTML
El HTML fue desarrollado originalmente por Tim Bernes-Lee pero debido al
rápido crecimiento de la web, surgió la necesidad de crear un estándar para
que tanto los programadores como los navegadores pudieran basarse en
unas mismas normas para escribir HTML. Cada versión de HTML establece
unas normas respecto a cuáles son las etiquetas válidas y cómo se deben
escribir.
Los estándares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML 4.0, el
HTML 4.01 y el HTML 5. El HTLM 5 es la última especificación oficial y se
espera que continúe evolucionando a lo largo de los próximos años. El
XHTML, una forma más avanzada del
HTML que se suponía iba a sustituir a éste, podemos considerar que ha
quedado integrado dentro del HTML 5.
HTML 2.0
En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0
es el primer estándar oficial de HTML, es decir, el HTML 1.0 no existió como
estándar. HTML 2.0 no soportaba tablas.
Se simplificaba al máximo la estructura del documento para agilizar su
edición, donde la declaración explícita de los elementos body, html y head
es opcional.
HTML 3.2
La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de
HTML publicada por el W3C (Consorcio internacional). Esta revisión
66
incorporó los últimos avances de las páginas web desarrolladas hasta 1996,
como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.01
La última especificación oficial de HTML se publicó en diciembre de 1999 y
se denomina HTML 4.01. Desde la publicación de HTML 4.01, el W3C se
centró en el desarrollo del estándar XHTML. Por este motivo, en el año
2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por
la falta de interés del W3C en HTML y decidieron organizarse en una nueva
asociación llamada WHATWG (Web Hypertext Application Technology
Working Group) que comenzó el desarrollo del HTML 5, cuyo primer
borrador oficial se publicó en enero de 2008. Debido a la fuerza de las
empresas que forman el grupo WHATWG y a la publicación de los
borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la
actividad estandarizadora de HTML, dentro del cual decidió integrar el
XHTML.
HTML 5, HTML 5.1, HTML 5.2
El consorcio internacional W3C, después de una evolución de varios años,
liberó el HTML 5 como estándar oficial a finales de octubre de 2014. HTML 5
incorpora nuevos elementos no contemplados en HTML 4.01. Hay diversos
cambios respecto a HTML 4.01. Hay nuevas etiquetas, se introduce la
posibilidad de introducir audio y video de forma directa en la web sin
necesidad de plugins o complementos en los navegadores, y otras
novedades. El W3C irá lanzando progresivamente nuevas evoluciones del
HTML 5.
Actualmente ya está utilizándose la nueva versión de HTML, denominada
HTML 5, aunque esta no es soportada por navegadores antiguos. HTML 5 se
ha ido introduciendo progresivamente en los desarrollos web pero aún
quedan muchos años en que existirá una “convivencia” con navegadores y
webs que usan HTML 4.01.
Dentro de HTML 4 existían varias versiones Con HTML 5 esta situación ha
cambiado: HTML 5 simplifica la situación, al definir una única variante con lo
cual desaparecen las variantes Strict, Transitional y Frameset.
En un archivo HTML debemos indicar qué versión y variante estamos
usando. Para indicar esto hay que poner una línea al principio de la página
web (del archivo donde está el contenido). No es una etiqueta, por tanto, es
algo rara y no hay que cerrarla ni ponerla en minúsculas. Eso sí, debemos
ponerla en todos nuestros documentos.
67
Para HTML 5 escribiríamos:
<!DOCTYPE html>
Para HTML 4.01 Strict escribiríamos:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
"http://www.w3.org/TR/html4/strict.dtd">
HTML
4.01//EN"
Para HTML 4.01 Transitional (recomendado dentro de HTML 4.01)
escribiríamos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
EJEMPLO estructura básica QUE USA HTML 5
<!DOCTYPE html">
<html>
<body>
<p>Esto es una prueba de web creada con HTML 5 con una etiqueta de
párrafo</p>
</body>
</html>
EJEMPLO de estructura básica QUE USA HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<p>Esto es una prueba de página HTML 4.01 Transitional con una etiqueta
de párrafo</p>
</body>
</html>
CREACIÓN Y VISUALIZACIÓN DE DOCUMENTOS HTML
Con este sencillo ejemplo creamos una página HTML. Para visualizar esta
simple página web procedemos de la siguiente manera: creamos un archivo
con el editor de texto que tengamos a nuestra disposición, en nuestro caso
utilizaremos el block de notas de Windows pero puede ser cualquier editor
de texto.
Para abrirlo nos vamos a Inicio -> Todos los programas -> Accesorios ->
Bloc de notas:
68
Escribimos en el bloc de notas el código del ejemplo anterior como un
simple texto.
A continuación, en el menú Archivo elegimos la opción Guardar como… e
indicamos que queremos guardar el archivo en el directorio raíz de la
unidad C con el nombre ejemplo.html, importante poner en tipo de archivo
“todos los archivos”, y en el nombre del archivo finalizar con la extensión
.html.
Imagen 46: Guardar con extensión “Todos los archivos”
Fuente:propia
Una vez realizado todos estos pasos, abrimos el archivo creado haciendo
doble click sobre él desde el explorador de archivos de Windows. Si
tenemos un navegador web instalado se nos abrirá automáticamente la
página web que hemos creado en el ejemplo
En la siguiente web encontrarás un curso gratuito bastante
completo sobre html.
http://www.aprenderaprogramar.com/index.php?option=co
m_content&view=category&id=69&Itemid=192

69
Mapa de navegación. Prototipos
Mapa de navegación
Un mapa de navegación representa todas las diferentes pantallas del
sistema y cómo se ha de navegar entre ellas, esto es, con qué otras
pantallas están conectada cada pantalla.
Cada pantalla se representa por medio de una caja. En la caja está el
nombre y, opcionalmente, una representación gráfica de la pantalla. Las
transiciones entre pantallas se representan por medio de flechas.
No es necesario ser exhaustivo en la representación de las transiciones,
puede optarse por representar únicamente las más relevantes en el caso de
que haya muchas transiciones
Imagen 47: Esquema.
Herramientas para hacer prototipos:
•
Cmaptools
•
Mindomo
•
Smartdraw
Prototipo
Un prototipo es una primera versión de cómo va a ser un producto, y se
construye para poder evaluar si tiene las características que deseamos.
70
En informática un prototipo es un sistema que está limitado de alguna
forma, esto es, que le falta algo. Hay dos grandes tipos de prototipos:
•
De baja fidelidad: Está hecho de papel o de forma que queda claro
que no es el sistema real.
•
De alta fidelidad: Tiene el aspecto y funciona (en parte) como un
sistema acabado, pero internamente le faltan cosas.
Disponemos de herramientas de prototipado, Mockflow es una de ellas, la
cual nos permite crear borradores de la estructura de las páginas que
componen nuestro sitio web, es decir, los prototipos de las distintas
páginas.
Permite el diseño de forma rápida e intuitiva de nuestro sitio web.,
implantando una arquitectura web muy personalizada y con bastantes
complementos que nos ayudan a poder ver un prototipo que antes
hubiéramos esbozado en cualquier trozo de papel.
Disponemos de dos versiones de descarga en la web de Mockflow, una
gratuita con ciertas limitaciones, y otra de pago. La herramienta nos
permite diseñar desde cualquier tipo de plataforma, móviles o tablets, por
ejemplo, y además podemos descargar imágenes desde una tablet y
diseñar dentro de ellas cómo quedaría el diseño del prototipo.
Puedes descargar y probar esta herramienta desde la
siguiente página:
https://www.mockflow.com/

Imagen 48: Mockflow
71
Fuente: https://www.mockflow.com/
La creación de bocetos también se conoce como wireframe o schematic y
pretende organizar, de manera esquemática, la representación de una
página web.
Bien es cierto que actualmente, la mayoría de sitios web se crean sobre
CMS (WordPress, Joomla, Drupal…) lo que nos permite gestionar todo
mediante plantillas o temas ya preestablecidos. Por tanto, si este trabajo ya
está hecho de antemano ¿para qué nos molestamos en hacer un boceto?
Pese a que existan muchos temas creados por terceros, siempre es
importante tener un boceto de nuestro sitio, al menos de la página principal
para poder tener clara la estructura fundamental que queremos del sitio, y
así nos será más fácil la elección de una plantilla adecuada a nuestras
necesidades, además podemos editar su CSS o su estructura para adaptarlo
mejor a lo que necesitamos y hacerla más personal.
Imagen 49: Boceto
Fuente:Apuntes HTML
72
Wireframe y Mockup
En ocasiones vemos que se suele identificar a wireframe y mockup como si
fueran lo mismo. En realidad, existen varias diferencias, sobre todo
conceptuales. El wireframe conecta la estructura conceptual con la visual y
para hacer el diseño visual del sitio se suelen emplear mockups.
El wireframe suele ser un boceto de los que hemos llamado “de baja
calidad”. Visualmente no es más que un conjunto de cuadros grises que
organizan la información y un poco de texto que sirve para comprender
mejor qué hay en cada sección de la página. En cambio, el mockup es un
diseño de calidad media o alta, podemos visualizar colores, tipos de letra,
fondos… en definitiva, todo aquello que permita representar la estructura de
la información y demostrar las funcionalidades básicas.
Imagen 50: MOckup
Fuente: http://llops.com
Y después del mockup va el prototipo, que ya vimos que es una simulación
de la interfaz de usuario que permita interactuar con los menús y el
contenido y probar los principales vinculos de manera similar a como será
en la versión final. Para ello se suele trabajar con un conjunto de páginas
html conectadas entre si, con un conjunto de diapositivas en ppt o con
animaciones (flash especialmente) navegables.
Otras herramientas de prototipado web:
•
Adobe llustrator
•
Microsoft Visio
•
Azure
•
Cacoo
73
•
Gliffy
•
Lovely Charts
•
Lumzy
•
Pencil Project
•
SimpleDiagrams
•
Website Wireframe
•
Wireframe|cc
•
Wirify
También puedes consultar el siguiente enlace:
https://www.campusmvp.es/recursos/post/Herramie
ntas-de-prototipado-de-aplicaciones-Web.aspx

Aplicaciones para realizar mockups:
•
Balsamiq
•
Gomockingbird
•
Hotgloo
•
Invisionapp
•
Mockflow
•
Moqups.com
Maquetación web. Elementos de ordenación.
Marcos, tablas y capas
LA maquetación es la distribución en el espacio disponible de los elementos
que forman nuestra web, de forma que tenga una estructura visual
determinada.
La ventaja de maquetar es poder tener separado el contenido de la página
de su presentación, es decir que no sea necesario tocar el diseño si se
modifican los contenidos, o al contrario.
74
También como ventaja podemos hacer referencia al tiempo de carga de la
página, hasta no hace mucho tiempo, las páginas se maquetaban mediante
tablas con las etiquetas <table> <tr> <td>, este tipo de maquetado
dificultaba la carga, y la búsqueda por parte de los navegadores para
analizar la estructura de la web, originando problemas de accesibilidad y de
la interpretación de los contenidos.
Ya hace unos años la maquetación mediante tablas no se usa,
sustituyéndose por las capas, usando la etiqueta <div> de HTML. Las capas
también reciben el nombre de contenedores, y su colocación en la página se
realiza mediante CSS también llamadas hojas de estilo.
En la actualidad, la propiedad float de CSS tiene un gran uso en la
maquetación de tal forma que la mayoría de los diseños web actuales serían
imposibles de construir sin float.
A pesar de lo sencillo del uso de la propiedad float, emplearla en forma
correcta requiere práctica, ya que puede comportarse en forma variable en
función del contexto en que se encuentren los elementos web sobre los que
se aplica.
La propiedad float de CSS hace que los elementos floten sobre el lado que
se indica, mientras que el resto de los elementos que no tienen esta
propiedad definida se disponen alrededor. Float puede tener tres valores:
left, right y none. El primer elemento a definir es el que fluirá hacia la
izquierda, el segundo a la derecha, mientras que el tercero anula la
propiedad.
En cualquier caso, los elementos que no tengan la propiedad float, es decir
que no hayamos definido, por defecto su valor es none.
La sintaxis es la siguiente:
float: left;
float: right;
float: none;
Es importante saber que no todos los elementos se pueden definir con la
propiedad float., y debemos diferenciar entre elementos en línea y en
bloque dentro del código HTML. Todos los que definen las propiedades del
texto (span, n, strong, i, b, etc.) y los saltos de línea (br), no permiten el
uso de float. Los elementos que sí que permiten esta propiedad son los
contenedores div, párrafos p, imágenes img, y las listas ul y ol.
75
Veamos un ejemplo:
<html>
<head>
<style>
img {
float: left;
margin: 5px 10px 5px 0; }
#caja {
width: 400px;
border: solid 1px #010;
background-color: #aaa;
padding: 5px;
font-family: arial; }
</style>
</head>
<body>
<div id=”caja”>
<img src=”foto.jpg” width=”200px” height=”200px” alt=”Foto” />
<p>La, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la.</p>
<p>La, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la, la,
la.</p>
</div>
</body>
</html>
la,
la,
la,
la,
la,
la,
la,
la,
la,
la,
la,
la,
la,
76
El resultado es el siguiente, y como puedes ver en el código CSS, este está
dispuesto en el <head>, y es donde ponemos las características de los
elementos que componen el ejemplo.
En este caso, se establece que las imágenes tendrán la propiedad float con
un valor left, lo que, hace que la fotografía aparezca flotando a la izquierda,
en cambio, el resto de los elementos, es decir el texto que está dividido en
dos párrafos mediante la etiqueta <p>, que no tienen esta propiedad, están
distribuidos en torno a la misma.
Imagen 51: Resultado 1
Fuente: propia
Si hacemos más pequeña la ventana, los contenidos se adaptan a la misma
y vemos mejor este efecto.
Imagen 51: Resultado 2
Fuente: propia
Uno de los usos más frecuentes para la propiedad float, es el diseño de
páginas web mediante dos o más columnas.
COMPRUEBA LO QUE SABES:
Explora las posibilidades de float y verás que nuestra
imaginación será el límite para su uso. Además, float
tiene muchas más características y se puede
complementar con otras propiedades.
77
Las primeras páginas web tenían un aspecto muy austero y sencillo,
normalmente con una sola columna donde se colocaba el contenido. Al
mejorar los lenguajes se mejoró también la distribución de los contenidos, y
con ello apareció la maquetación, como ya hemos comentado anteriormente
esta se realizaba mediante capas hasta la aparición de CSS y de los
contenedores div.
Las capas, reemplazaron a las tablas aportando mayor flexibilidad al diseño
web. Las capas, son como una caja contenedora donde colocar los
contenidos de la web. Tenemos que darlas una ubicación en función de
dónde queramos colocarlas. En función de los valores que se den a los
atributos de una capa, se podrá comportar de diferentes formas.
Los atributos y sus valores, se definen con las hojas de estilo CSS y son
definidos por las hojas de estilo en su identificador (id) o su clase (class).
Cuando la capa se define como elemento único, es decir, que no va a
aparecer más veces con unas determinadas propiedades, se le identifica de
forma individual en la hoja de estilos y en el documento HTML, en cambio,
si se usan varias capas que tengan los mismos atributos, se les identifica en
CSS como pertenecientes a una clase, definiéndose en la hoja de estilos y
marcando mediante un nombre cuales son las capas que pertenecen a esa
clase definiéndolas después en el documento HTML.
Veamos un ejemplo que nos clarifique un poco estos conceptos, vamos a
realizar un documento web por una parte y un documento con la hoja de
estilos, ambos podemos hacerlos desde el bloc de notas o cualquier otro
editor de código. A mí personalmente para aprender me gusta más el bloc
de notas, porque nos obliga a escribir correctamente, en cambio otros
editores como Notepad++ nos ofrecen ayudas, que, por otra parte, están
bien para simplificar y agilizar el trabajo.
Al primer documento lo llamaremos “index.html” y a la hoja de estilos
“MiEstilo.css”
Empecemos con el documento HTML:
<html>
<head>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="caja">Hola</div>
<div id="capa">Mundo</div>
78
<div class="caja">Soy Silvia Menéndez</div>
</body>
</html>
En el encabezado del documento entre <head> y </head>), hemos puesto
un link que vincula al archivo que contiene el código CSS con el de HTML.
Entre las etiquetas de apertura y cierre de body <body> y </body>) hay 3
contenedores o capas, una se llama “capa” y dos son las que pertenecen a
la clase “caja”, en cada una hemos incluido un texto a modo de contenido.
Si abrimos la web sin hacer la hoja de estilo sólo nos aparecerían las tres
frases que contienen las capas.
Vamos ahora con el CSS que guardaremos como MiEstilo.css:
/* Aquí definimos la capa que nombraremos como "capa" */
#capa {
width: 300px;
height: 50px;
background-color: #cc6500;
}
/* Ahora definiremos al grupo de capas que formarán parte de la clase
"caja" */
.caja {
width: 300px;
height: 50px;
background-color: #aa55ff;
}
Abrimos ahora la web y el contenido es el siguiente aplicándose la hoja de
estilo anterior.
79
Imagen 53: Resultado
Fuente: propia-
Algunos de los atributos que pueden modificarse en una capa son, “width” y
“heitght”, es decir, el ancho y alto del elemento. Si no se definen el ancho
ocupará todo el ancho de la página y el alto ocupará todo el alto de la
página o hasta la contigua. En caso de que la altura no quede definida, y no
tenga contenido, simplemente su altura será cero.
Estos dos atributos pueden se expresan de tres modos diferentes:
•
Valor fijo: Establecemos medida precisa en pixeles (px).
•
Porcentaje: Se establece un valor en porcentaje, entonces, la capa
tendrá diferentes dimensiones, según dónde y cómo se encuentre
ubicada.
•
Automático: Lo establecemos con la palabra auto.
Si no se marcan estas dimensiones, las capas adquieren las dimensiones del
contenido. No obstante, esto puede verse afectado por otros tres atributos
de las capas: márgenes, relleno y bordes.
Otro atributo que hemos puesto en el código CSS del ejemplo es
“background-color”, que sirve para dar color de fondo a la capa, si
queremos que la capa sea transparente, el valor que tenemos que poner es
“transparent”, en cambio, si queremos definir un color sólido podemos
hacerlo de varias formas, en este caso de nuestro ejemplo es un código de
seis dígitos hexadecimales divididos en pares, uno para rojo, otro para
verde y otro para azul precedidos por el símbolo #.
DE los atributos mencionados anteriormente, los márgenes son el espacio
que hay entre la capa y cualquier objeto que esté alrededor. El borde es la
línea que delimita la capa, y el relleno, es el espacio entre el borde de la
capa y el contenido.
80
imagen
Cada capa tiene cuatro márgenes, que por defecto tienen valor cero. En el
código CSS, los márgenes se establecen con el atributo “margin”, al que le
sigue un guión sin dejar espacio entre margin y el guión y el lado de la capa
del que determinamos el margen. También podemos definirlos todos en una
sola línea.
Ejemplo en CSS:
#identificador
{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
Para determinar el tipo de posicionamiento que tendrán las capas y
cualquier otro elemento, se emplea el atributo “position”, que tiene los
valores: “static”, “relative”, “absolute” y “fixed”. En función del valor que
pongamos, las capas adoptan diferentes posiciones. determinado el tipo de
posicionamiento escribiremos los atributos de posición, que son “top”, “left”,
“right” y “bottom” (arriba, izquierda, derecha y abajo). Estos atributos fijan
la distancia a la que se posiciona el elemento, y podemos atribuirles valores
en cualquiera de las unidades de medida de CSS, que son, el punto (pt), el
pixel (px), porcentajes (%) y la altura de la fuente del elemento (em).
Por último, además de las capas podemos maquetar con marcos o frames
en HTML con las etiquetas <frameset> o <frame>, es una forma de
insertar varias páginas web en una sola, ya en desuso por la aparición de
las capas, la idea es similar a la de las capas, solo que dentro de cada
81
marco en lugar de texto, imágenes u otras capas, lo que realmente hay es
otra página web.
Cada marco que tengamos tendrá sus propios bordes y barras de
desplazamiento,
de
forma
que
se
comportan
como
ventanas
independientes.
El posicionamiento de los marcos es un poco estático, ya que sólo se
situarán en uno de los cuatro bordes de la pantalla. Además, algunos
navegadores no son capaces de presentar correctamente los marcos
Veamos un ejemplo en el que crearemos dos marcos, uno que ocupa el
30% y el otro el 70%, a cada uno le asignamos un nombre con el atributo
name de la etiqueta frame, y añadimos la etiqueta <noframes> para que en
caso de que el navegador no sea capaz de mostrar los marcos, le aparezca
al usuario el mensaje contenido entre las etiquetas <noframes>
<html>
<head>
<title>Los frames son diferentes páginas </title>
</head>
<frameset cols=”30%, 70%>
<frame name=”índice”src=”índice.html>
<frame name=”primeraPagina”src=”primeraPagina.html>
<noframes>
<p align=”center”>Este navegador no soporta marcos</p>
</noframes>
</frameset>
</html>
Plantilla de diseño.
Para facilitar el acceso a tener y mantener páginas web, existen plantillas
web, que no son más que webs prediseñadas, listas para insertar los
contenidos específicos del usuario.
82
Es, la forma más simple y rápida de hacer una web y también
sensiblemente menos costosa que un diseño web a medida.
El uso de plantillas puede parecer una buena idea, pero el problema es que
al no estarán alineadas con el diseño del contenido que tuviéramos pensado
ni con los valores de la marca, además es una solución de comunicación
pobre, seguro que navegando por la web te habrás encontrado páginas con
una estructura similar a otras que hubieras visto antes, lo que da una
sensación de poca profesionalidad.
Un sitio basado en una plantilla no es un sitio pensado por nosotros para
nuestra marca o nuestro fin, ya que se parte de un continente ya creado
ajeno completamente a nuestro contenido, el cual tendremos que adaptar a
la plantilla prefabricada.
Por decir algo positivo sobre las plantillas, podemos crear una web sin
necesidad de saber programar, además de no ser necesario tener que
contratar a diseñadores, y se consiguen resultados en pocos minutos para
crear tanto una página web tradicional como una tienda online o blog. Las
plantillas actualmente tienen diseños web modernos y responsive, si
tenemos conocimientos son flexibles y personalizables y están optimizadas
para los últimos estándares HTML5 y CSS3.
En internet disponemos de muchas webs que ofrecen plantillas tanto
gratuitas como de pago, en estas páginas podemos encontrar muchas
plantillas generalmente ordenadas por categorías, por ejemplo, medicina,
cocina, bares, informática, tiendas, etc. Estas plantillas se adaptan a todos
los tipos de tecnologías y navegadores de ordenadores, tablets y
smartphones.
Imagen 54: 1and1
Fuente: 1and1
83
Incluso nos permiten personalizarlas, con una especie de asistente, donde
podemos ir escogiendo opciones, colores, posicionamiento de elementos,
etc
Imagen 55: 1and1
Fuente: 1and 1
En los siguientes enlaces
gratuitas para descargar:
encontrarás
plantillas
https://www.webnode.es/plantillas
https://www.templatemonster.com/es/freetemplates/
https://www.mejoresplantillasgratis.es/
http://www.misplantillas.com/plantillas-web-gratis/
84
Resumen final
En este tema hemos podido comprobar la importancia de todos los
elementos visuales de una web, hemos introducido los aspectos básicos a la
hora de planificar nuestra web y su diseño, colores, fuentes, estructuras de
navegación, etc.
Hemos aprendido la importancia de las guías de estilo, la maquetación y los
prototipos, que nos permiten conocer las reglas básicas del diseño web y
poder retomar su diseño en cualquier momento siguiendo una misma
estructura.
85
Glosario
•
Ley de la proximidad: Se tiende a percibir los elementos próximos
entre sí como si formaran parte de una unidad, es decir, agrupando
los elementos que se encuentren más cercanos para crear, una cierta
uniformidad.
•
Ley de la similitud: Los elementos que son parecidos se perciben
como si tuvieran la misma forma
•
Ley de la buena continuidad: Los elementos que mantienen un patrón
o dirección tienden a agruparse juntos
•
Ley del movimiento común o ley de la buena dirección: Se tiende a
agrupar a aquellos elementos que vayan en la misma dirección.
•
Ley de la experiencia: La experiencia visual que tiene el sujeto es
importante para que todas las formas y elementos de la imagen se
agrupen para formar una imagen.
•
Ley de contraste: Se distinguen elementos por la diferencia de
tamaño, color, posición…
•
Ley de clausura o cierre: Nuestra mente añade los elementos que
faltan para completar una figura.
•
Ley de la inclusividad: Es un tipo de camuflaje que tiende a
homogeneizar la figura y el fondo.
•
Ley de simetría: Las imágenes simétricas son percibidas como
iguales, como un solo elemento, en la distancia.
•
Ley de la pregnancia: Tendencia a agrupar diferentes formas y
elementos para establecer una organización lo más clara y sencilla
posible.
•
Le Relación entre fondo y figura: Afirma que cualquier campo
perceptual puede dividirse en figura y fondo. y de la compleción: Una
forma abierta tiende a percibirse como cerrada.
•
CMYK: Colores pigmento, cian, magenta, amarillo y negro
86
•
RGB:Colores primarios. (Red, Green, blue) rojo, verde y azul.
Sistema de color.
•
Visión tricromática del ojo humano: consta de tres tipos de
receptores los cuales responden a unas longitudes de onda de la luz
concretas.
•
RYB: Colores primarios tradicionales, rojo, amarillo y azul.
•
SAFE-colors, es decir colores que se ven en todos los navegadores.
•
Tipografía: Fuentes, tipos de letra.
•
IPO: interacción persona-ordenador
•
Guía de estilo: Documento que establece el “estilo” o formato
estándar para tu página web, donde se establecen las directrices que
se establecerán para el formateo de textos e imágenes, uso de
colores y fuentes, y las variaciones de logotipo que se pueden
utilizar, etc.
•
Patrón de diseño web: es un aspecto del diseño visual por el que se
determina la disposición de los elementos del sitio web en el área de
visualización determinado por el navegador.
•
CMS: (content management systems) gestor de contenidos web
•
Mailing: envío de información a varios usuarios mediante correo
electrónico o carta.
•
Breadcrumbs: Las migas de pan o breadcrumbs indican en que
página estamos y por qué páginas hemos pasado hasta llegar a
nuestro destino actual.
•
HTML: (HyperText Markup Language, lenguaje de marcado de
hipertexto)
•
W3C: World Wide Web Consortium
•
WHATWG (Web Hypertext Application Technology Working Group)
87
•
Prototipo: es una primera versión de cómo va a ser un producto, y se
construye para poder
evaluar
si
tiene las
características
que
deseamos.
•
Wireframe: creación de bocetos, conecta la estructura conceptual con
la visual
•
MOckup, creación del diseño visual, es un diseño de calidad media o
alta, podemos visualizar colores, tipos de letra, fondos… en definitiva,
todo aquello que permita representar la estructura de la información
y demostrar las funcionalidades básicas.
88
Bibliografía y Webgrafía
Diseño de interfaces web, Córcoles, Montero, 2012 Ed. RA-MA.
https://hipertextual.com/2015/07/teorias-de-la-gestalt
https://www.stampaprint.net/es/blog/acerca-de-la-impresion/la-teoria-lagestalt
http://www.uv.es/asamar4/exelearning/01_la_percepcin_visual.html
http://www.uv.es/asamar4/exelearning/02_la_composicin_visual.html
http://ramon-esteban.blogspot.com.es/2010/11/teoria-de-gestalt-y-lossitios-web.html
https://psicologiaymente.net/psicologia/teoria-gestalt#!
https://comunicapuntes.wordpress.com/2014/06/12/las-8-leyes-de-lapsicologia-de-la-gestalt/
http://www.mindmatic.com.ar/gestalt.pdf
https://www.psyciencia.com/2014/19/por-que-crees-que-esto-es-un-perro/
http://conceptodeimagen.blogspot.com.es/2010/12/principios-de-lagestalt-1.html
http://blogs.icemd.com/blog-bne-buscando-las-neuronas-de-laexperiencia/pura-experiencia-de-las-6-leyes-de-la-psicologia-gestalt-enmarketing-y-publicidad/
http://mimente.com.mx/blog/conceptos-formales-o-elementos-del-disenovisuales/
http://www.xn--diseowebmurcia1-1qb.es/elementos-conceptuales-diseno/
https://mimoilus.com/fundamentos-diseno-grafico/
http://www.cristalab.com/tutoriales/fundamentos-del-diseno-grafico-c126l/
89
http://www.lanubeartistica.es/Diseno/DI2_U1_T2_Contenidos_v04/index.ht
ml
http://mimente.com.mx/blog/conceptos-formales-o-elementos-del-disenoconceptuales/
https://es.jimdo.com/2012/11/13/5-reglas-sobre-el-color-el-%C3%A9xitode-un-dise%C3%B1o-web-profesional/
http://www.lanubeartistica.es/Diseno/DI2_U1_T2_Contenidos_v04/4_eleme
ntos_prcticos.html
http://arte.about.com/od/Que-es-el-arte/ss/Colores-primarios-secundariosy-terciarios.htm
https://wilmardejzapatajaramillo.wordpress.com/2012/05/20/los-coloresprimarios-secundarios-terciarios/
http://www.fotonostra.com/grafico/colorescalifrios.htm
http://www.todacultura.com/acuarelas/frios_calidos.htm
http://html-color-codes.info/codigos-de-colores-hexadecimales/
http://www.xn--guiadiseo-s6a.com/08_cont_tipografias.php
https://pixelovers.com/uso-iconos-web-302707/
https://desarrolloweb.com/articulos/1758.php
https://eva.fing.edu.uy/pluginfile.php/48332/mod_resource/content/0/mate
riales/Nexo_2012/NEXO_-_Interaccion_Persona_Computadora_-_Que_es.pdf
http://www.arcovia.com/documentacion/diseno-sitios-web/patrones-dediseno
http://www.interdigital.es/diseno-web/gestor-de-contenidos/
https://www.1and1.es/digitalguide/hosting/cms/cms-en-comparativa-losgestores-de-contenido-mas-usados/
https://hormigasenlanube.com/webs-famosas-hechas-con-wordpress/
90
https://neliosoftware.com/es/blog/75-ejemplos-de-marcas-organizacionesque-usan-wordpress/
http://www.xn--diseowebmurcia1-1qb.es/crear-una-pagina-webnavegacion/
http://disenowebakus.net/elementos-de-un-sitio-web.php
https://magazine.joomla.org/es/ediciones-anteriores/julio-2013/item/1398estructura-y-composicion-de-un-sitio-web
http://octuweb.com/introduccion-web-components/
http://www.docencia.taboadaleon.es/1-3-lenguaje-xml-estructura-ysintaxis.html
http://www.ticarte.com/contenido/que-son-los-lenguajes-de-marcas
http://josedom24.github.io/mod/lm/
http://www.aprenderaprogramar.com/index.php?option=com_content&view
=article&id=444:icuales-son-las-versiones-de-html-diferencias-entre-html4-y-html-5-significado-de-strict-cu00706b&catid=69&Itemid=192
http://www.aprenderaprogramar.com/index.php?option=com_content&view
=category&id=69&Itemid=192
http://es.medratfg.wikia.com/wiki/Prototipos_de_bajo_nivel_y_mapas_de_
navegaci%C3%B3
http://tecnologiasweb.jsenso.es/mockup-arquitectura-web/
https://bequickbedead.wordpress.com/tag/mapa-del-sitio-web/
91