Este documento presenta las etapas clave para el diseño de un sitio web utilizando Adobe Muse, incluyendo la planificación, maquetación, diseño de páginas maestras y de contenido, uso de estilos, etiquetas y metadatos, y exportación del sitio. Se enfatiza la importancia de claridad de objetivos, jerarquía de información, y desarrollo coordinado de versiones de escritorio y móvil.

1. NOTAS
TALLER DE DISEÑO WEB CON ADOBE MUSE

2. 1. PLANEACIÓN
 Antes de iniciar un proyecto de Diseño Web, se tiene que tener claro que se quiere
comunicar a la audiencia potencial que visitara el sitio.
 Esto nos permitirá visualizar cuantas paginas contendrá nuestro sitio y que tipo de recursos
y widgets emplearemos en el sitio.
 El contenido del sitio web depende totalmente de la información aportada por la
organización, antes de iniciar el sitio se debe contar con los textos, imágenes, vínculos y
gráficos que serán incluidos en nuestra web.

3. 2. MAQUETACIÓN
 Ya teniendo claro que tipo de
contenido se va a incluir, se debe
definir cuantas paginas va a
contener nuestro primer diseño.
 Es importante considerar trabajar
con pocas paginas al iniciar el
sitio (3 o 4 páginas),
inevitablemente el sitio crecerá
conforme se vaya actualizando el
sitio.

4. 3. DISEÑO - INICIO
 Siempre que iniciemos el diseño de
nuestro sitio es importante comenzar
a trabajar en las paginas maestras.
 Recordando que la paginas
maestras contienen elementos que
será replicado en las páginas de
contenido y que los elemento aquí
colocados son los elementos que se
modifican con menos frecuencia.
 En las paginas maestras colocamos
los diseños originales para:
 HEAD (Cabeza)
 BODY (Cuerpo)
 FOOTER (Pie)

5. 3. DISEÑO – PARTES DE LA PÁGINA
 Siempre que diseñamos para web nuestro diseño se divide en tres grandes secciones que
son:
 HEAD (Contiene el Logo, Menú principal, opcionalmente redes sociales y diseños)
 BODY (Contiene el contenido susceptible a modificarse frecuentemente, es la información que
vamos a comunicar a nuestra audiencia potencial)
 FOOTER (Su diseño es variado pero tradicionalmente contiene la autoría del diseñador así como
del mismo sitio y los años desde su producción inicial.)

6. 3 DISEÑO - RECOMENDACIONES
 Cuando diseñamos para web es
importante tener en cuenta los colores
que vamos a utilizar, por lo general los
colores se eligen siguiendo los tonos
originales que maneja la organización,
estos colores regularmente los
encontramos en el logotipo y es
recomendable utilizar combinaciones
de 2 o 3 colores como máximo en el
diseño, el utilizar más colores no es
recomendable por que distrae y
obstaculiza la identificación de nuestra
marca frente a la audiencia potencial.

7. 3. DISEÑO - RECOMENDACIONES
 Del mismo modo que el color, se recomienda no utilizar
más de 2 fuentes web en nuestro sitio, las tipografías
elegidas deben ser legibles y deben de tener un
interlineado que no canse la vista durante su lectura.
 Desafortunadamente los diseños variados de las
tipografías no permiten estandarizar una medida para la
fuentes, sin embargo la opción seria igualar el tamaño de
un arial 14 o 16 con las fuentes que elijamos. Una fuente
cercana a esta medida asegura una lectura fluida.
 El caso de la versión móvil es similar, se debe seleccionar
una fuente que permita la lectura en dispositivos móviles,
incluso se puede considerar la posibilidad de aumentar la
fuente 2 puntos más debido a que los navegadores
móviles modifican reduciendo los diseños para
adaptarlos a los distintos teléfonos.

8. 4. ESTILOS DE PARRAFO
 Los estilos de párrafo son una característica fundamental
para el ahorro de tiempo durante el proceso de diseño.
 Estos estilos permitirán estandarizar la tipografía a lo largo de
nuestro sitio, lo que le dará uniformidad y estética.
 También nos permite jerarquizar la información mediante las
etiquetas H1, H2, H3 … que son reconocidas por los
navegadores para que la audiencia pueda llegar a
nuestros artículos con mayor facilidad.

9. 5. ETIQUETAS DE TITULO Y SUBTITULO
 Las etiquetas de título, subtitulo y párrafo jerarquizan la
información de la siguiente manera:
H1 – La Información más importante del sitio
H2 – La información de segunda importancia, puede servir
como subtitulo de articulo
H3 - Información de tercera importancia, puede servir
como subtema
Tradicionalmente las etiquetas H1 tienen un tamaño de
tipografía mayor que H2 y H3.

10. 5. ETIQUETAS DE TITULO Y SUBTITULO
H1. Título 40 p
H2. Subtitulo 32 p
H3. Subtemas 28 p
Parrafo 18 p
 Este ejemplo muestra las etiquetas H1, H2 Y H3 con una variación en el tamaño de la
tipografía según la importancia que se le dará a los artículos.

11. 6. METADATOS
 Los metadatos son descripciones que
agregamos a nuestros sitios web que
aparecerán en los navegadores de
búsqueda y que permiten a la audiencia
saber el contenido del sitio antes de hacer
click en el vinculo.
 Esta información debe ser una descripción
puntual de nuestro sitio web, también
incluye el logotipo a menor escala
conocido como iconfav

12. SINCRONIZACIÓN DE CONTENIDOS
 Para ahorrar tiempo durante las
actualizaciones, es importante etiquetar
los cuadros de texto en la ventana
CONTENIDO antes de vaciar los
contenidos a la versión móvil, esto
simplificara y sincronizara dichos
cuadros de texto en ambas versiones
durante la actualización de las
secciones.

13. VERSIÓN MÓVIL
 Para desarrollar la versión móvil de nuestro sitio
web es importante completar la versión de
escritorio, ya que el proceso de desarrollo
consiste en el vaciado de información al
formato para dispositivos móviles.
 Maquetar la versión móvil es prácticamente
sencillo ya que el espacio reducido nos exige
trabajar de manera descendente en el espacio
de trabajo.
 La maquetación de la pagina web para
móviles mantiene las secciones de HEAD, BODY
Y FOOTER.

14. GUARDAR Y EXPORTAR
 Tenga precaución a la hora de guardar su proyecto de diseño web, no lo confunda con
la opción exportar.
 La opción exportar procesa el proyecto y desarrolla los códigos y archivos necesarios que
posteriormente serán subidos a la nube para su publicación.
 Es recomendable tener una carpeta por cada proyecto web y dentro de esta una
denominada PROYECYO, otra denominada ARCHIVOS y otra denominada WWW; esto
facilitara el manejo y administración del proyecto.

15. GUARDAR Y EXPORTAR
 ARCHIVOS: Contiene todos los archivos
originales que conforman el sitio: textos,
imágenes, gráficos, informes sonidos, etc.
 PROYECTO MUSE: Contiene el proyecto en
formato .muse, aquí se encuentra la
información que trabajamos en la plataforma
de diseño, si este archivo se pierde perdemos
todo el trabajo.
 WWW: Contiene el código exportado junto con
los archivos que conforman el diseño pero en
lenguaje html5 y CSS3