Aprenda a crear prototipos o esquemas de sus sitios web en Adobe Muse.

Nota:

Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte Página de fin de servicio de Adobe Muse.

Además de ser muy intuitivo de usar, Adobe Muse le ayuda a crear rápidamente prototipos de proyectos web que se pueden ver en línea. La capacidad de crear sitios de prueba significa que puede compartir los vínculos con los clientes potenciales, de forma que puedan revisar los prototipos en línea utilizando los mismos navegadores que aparecerán en la versión final del sitio. Esto ayuda a los clientes a comprender cómo se verá el sitio completo.

fig01.wireframe.b720
Los esquemas incluyen marcadores de posición para especificar la ubicación de los elementos de la página.

Continúe leyendo para obtener más información sobre cómo diseñar esquemas, crear una vista de plan estructurada y crear elementos de marcador de posición para el sitio. Puede sustituir los elementos de marcador de posición por elementos de página reales cuando finalice el diseño del contenido.

Trabajo con esquemas

Los esquemas muestran los diseños de página del sitio y le permiten hacer clic en los vínculos para ver cómo fluye el sitio. Después de interactuar con los esquemas, visite el sitio final activo para comparar los esquemas con la versión completa. Tenga en cuenta la forma en que se volvieron a colocar los elementos que tenían marcador de posición en los esquemas con los gráficos en la versión final del sitio.

Si desea ver cómo se construyeron los esquemas, descargue los archivos de ejemplo (ZIP, 4,5 MB). Descomprima el archivo ZIP, abra la carpeta y localice el archivo KevinsKoffeeKartWire.muse. Haga doble clic en él para abrir los esquemas en Adobe Muse. Utilice la vista Plan para aprender cómo se organizan las páginas en los distintos niveles para crear el mapa del sitio. Haga doble clic en las páginas individuales para abrirlas en la vista Diseño y explorar cómo están diseñadas.

Adobe Muse ofrece muchas funciones para ayudarle a crear esquemas:

  • La vista Diseño incluye una cuadrícula de columna opcional que ayuda a alinear elementos de diseño.
  • Las herramientas flexibles de dibujo facilitan la creación de formas de marcador de posición para gráficos.
  • El panel Activos incluye funciones que ayudan a actualizar imágenes de marcador de posición.
  • Adobe Muse optimiza, crea sectores y exporta todos los archivos de imagen cuando se publica o exporta un sitio.
  • Los encabezados de texto y los estilos de párrafo permiten crear páginas estructuradas y cambiar el formato de texto fácilmente.
  • El comando Colocar le permite guardar el logotipo de su cliente directamente desde el navegador y, a continuación, colocarlo en su archivo Adobe Muse.
fig02.wireframe.b720
Elija Archivo > Colocar para añadir rápidamente elementos de personalización a los esquemas.

Diseño de esquemas para el proceso de aprobación del cliente

Tras una primera reunión con el cliente, puede crear un boceto de esquema del sitio que describa la posición y funcionalidad de los elementos de la página, desprovisto de los gráficos del sitio definitivo y el formato de texto. El objetivo de un esquema es replicar el esqueleto de cada página, creando una simulación de la presentación web sin la distracción de los colores o el contenido visual. Los rectángulos se utilizan como marcadores de posición para marcar la ubicación de las imágenes y las fuentes manuscritas o genéricas se utilizan para mostrar las áreas de la página que contienen contenido de texto.

Los esquemas ofrecen las siguientes ventajas:

  • Permiten a los clientes centrarse en la estructura de un sitio y comprender los diseños de la página.
  • Proporcionan una experiencia interactiva en vivo, ayudando a los clientes a revisar y aprobar los sitios.
  • Actúan como una herramienta de comunicación para clarificar el diseño y la funcionalidad del sitio.

Además de ser una herramienta de diseño de sitios web, Adobe Muse es excelente para proyectos con prototipos. Puede crear inmediatamente una dirección URL de prueba activa y enviarla a sus clientes en un mensaje de correo electrónico, simplificando así el proceso de aprobación. Pero no es la única ventaja de crear bocetos de esquemas con Adobe Muse.

Los esquemas de Adobe Muse llevan la productividad un paso más allá que otras herramientas de diseño, porque las completas posibilidades de edición de imágenes y los estilos de párrafo editables facilitan a los diseñadores web la rápida actualización del archivo .muse y la conversión de los esquemas aprobados en la versión final activa. En vez de obtener el visto bueno del cliente, tirar los esquemas y empezar de cero a construir el proyecto, puede empezar inmediatamente a actualizar los esquemas aprobados, añadir el contenido web real y generar la versión final. En el proceso, puede publicar un número ilimitado de sitios de prueba para documentar las iteraciones y compartir los vínculos con sus clientes a medida que evolucione el diseño del sitio.

Puede crear sitios con esquemas utilizando este flujo de trabajo básico:

  • Se construyen los esquemas y se publica una prueba gratuita.
  • El cliente examina el sitio activo navegando por las páginas.
  • El cliente solicita cambios o pide aclaraciones sobre el diseño.
  • Después de haber realizado las revisiones necesarias, el cliente otorga el visto bueno a los esquemas.
  • Se actualiza el sitio de los esquemas añadiendo elementos gráficos y colores.
  • Se actualizan los estilos de párrafo para dar formato al contenido de texto existente.
  • El cliente revisa la versión actualizada del sitio y solicita más cambios.
  • Se realizan los cambios solicitados.
  • El cliente aprueba la versión completa.
  • Se actualiza el sitio, se configura el dominio y se inicia el sitio final.

Examen de la estructura del sitio con la vista Plan en Adobe Muse

Para ver cómo se colocan las páginas del sitio en una jerarquía que defina los niveles superiores y subniveles de los vínculos de navegación, abra el archivo .muse de los esquemas en Adobe Muse para analizarlo. Cuando el proyecto se abra, se ve la vista Plan, que muestra todas las páginas del sitio.

fig03.wireframe.b720
Las páginas de los esquemas aparecen en la vista Plan.

Tenga en cuenta que hay dos niveles, un nivel superior y un subnivel, que representan la jerarquía del mapa del sitio. En cualquier momento durante el desarrollo o mantenimiento de un sitio, puede hacer clic y arrastrar estas páginas para reubicarlas dentro de la estructura del sitio.

Para crear nuevas páginas:

  1. Haga clic en el signo más (+) situado a la derecha o debajo de las páginas existentes y, luego, haga clic en el campo del nombre de página para escribir su nombre. 

    Sea tan descriptivo como pueda con cada uno de los nombres de página.

  2. Haga clic con el botón derecho del ratón en una miniatura de página y utilice las opciones de menú que aparecen para duplicar, eliminar o cambiarle el nombre.

    Como alternativa, pase el puntero sobre una página y haga clic en el icono X que aparece en la esquina superior derecha para eliminarlo.

  3. Si va a seguir adelante, intente añadir, ubicar y eliminar páginas para modificar el mapa del sitio. Elija Edición > Deshacer si desea devolver el sitio de los esquemas a la forma en la que estaba.

    La interfaz de la vista Plan es intuitiva de usar y Adobe Muse sigue todos los nombres de página y mantiene los vínculos que aparecen en los widgets de menú. Los cambios que realice se actualizan automáticamente para garantizar que los vínculos no se rompan.

Uso de estilos gráficos para crear elementos de marcador de posición que compartan atributos

Como el software de Adobe Illustrator y Adobe Photoshop, Adobe Muse le ayuda a crear estilos gráficos siempre que desee crear una apariencia uniforme y aplicarla a un conjunto de elementos. Esto resulta útil para crear esquemas (así como diseñar páginas) ya que puede cambiar un estilo gráfico existente para actualizar rápidamente todos los otros elementos de la página que tengan ese estilo aplicado. También puede copiar los estilos existentes para crear variaciones de ellos.

Para utilizar estilos gráficos y aplicar atributos a las formas y crear marcadores para archivos de imagen en un sitio con esquemas:

  1. Utilice la herramienta Rectángulo para dibujar tres rectángulos en una página en la vista Diseño.

  2. Seleccione un rectángulo y edítelo para definir su color de trazo, color de relleno y ajuste de opacidad, así como para añadir efectos gráficos, como sombras.

  3. Con el rectángulo seleccionado, haga clic en Crear nuevo estilo gráfico en la parte inferior del panel Estilos gráficos. El estilo se basa en el formato del rectángulo seleccionado. Haga doble clic en el nuevo estilo gráfico y asígnele un nombre descriptivo.

  4. Seleccione una de las otras formas rectangulares y aplíquele el mismo estilo gráfico haciendo clic en el nombre del estilo. Repita este paso para aplicar el estilo al tercer rectángulo, de forma que los tres rectángulos utilicen el mismo estilo.

  5. Seleccione un rectángulo y edítelo para cambiar el estilo ligeramente. Observe que aparece un signo más (+) en el panel Estilos gráficos junto al nombre del estilo editado.

  6. Haga clic con el botón derecho del ratón en el nombre del estilo en el panel Estilos gráficos y elija Redefinir estilo. Los otros dos rectángulos se actualizan ahora para adaptarse al nuevo estilo, y el signo más (+) desaparece.

  7. Utilice estilos gráficos para dar formato rápidamente a las formas y crear esquemas coherentes y para actualizar con rapidez un conjunto de activos del sitio cuando un cliente solicite cambios.

Creación de páginas web estructuradas y aplicación de formato al texto con estilos de párrafo

Cuando se crea un sitio de esquemas, se puede utilizar la herramienta Texto para crear marcos de texto y añadir texto de marcador de posición (o lorem ipsum) que deberá reemplazar más tarde. O si su cliente tiene un sitio web previo, puede copiar el texto directamente desde el navegador y pegarlo en los marcos de texto. Después de crear elementos de texto, puede utilizar el panel Texto para aplicar formato al texto.

Usando los estilos de párrafo, se puede definir el texto del encabezado y las etiquetas de párrafo para estructurar el contenido de texto de la página:

  1. En la vista Diseño, utilice la herramienta Texto para arrastrar un marco de texto a la página. Escriba o pegue el texto en el marco de texto que se va a llenar.

  2. Utilice el panel Texto o las opciones del panel de control en la parte superior del espacio de trabajo de la vista Diseño para definir las opciones de formato, como la elección de fuente, tamaño y color de la fuente y otras propiedades.

  3. Haga clic en Crear nuevo estilo de párrafo en la parte inferior del panel Estilos de párrafo para crear un nuevo estilo de párrafo. Haga doble clic en el nombre del nuevo estilo para cambiar su nombre de manera descriptiva.

  4. Haga clic con el botón derecho del ratón en el estilo y seleccione Opciones de estilo. Utilice el menú Etiqueta de párrafo para definir el estilo de párrafo y seleccionar una etiqueta específica de HTML, como P, H1, H2 o H3.

    fig04.wireframe.b720
    Haga clic con el botón derecho del ratón en un nombre de estilo en el panel Estilos de párrafo y luego utilice el cuadro de diálogo Opciones de estilo para definir el estilo de un determinado encabezado o etiqueta de párrafo.

  5. Cree unos cuantos marcos de texto más con texto. Tenga en cuenta que si hace clic en el nombre del estilo de párrafo mientras está seleccionado un marco de texto, se aplica el formato del estilo de párrafo al marco de texto seleccionado. Si posteriormente selecciona uno de los marcos de texto con un estilo de párrafo aplicado y lo cambia, el signo más (+) aparece en el panel Estilos de párrafo junto al nombre del estilo. Esto indica que el estilo se ha modificado, con el mismo comportamiento que los estilos gráficos.

  6. Para actualizar automáticamente todos los marcos de texto utilizando el mismo estilo, haga clic con el botón derecho del ratón en el nombre del estilo en el panel Estilos de párrafo y escoja Redefinir estilo.

    Como puede ver en este ejemplo rápido, puede crear diferentes contenedores de texto y definirlos para que utilicen estilos específicos con el fin de crear un diseño coherente. Después, cuando actualice los esquemas para diseñar la versión final del sitio, será fácil actualizar los estilos en función de las peticiones del cliente. La creación de páginas web estructuradas con contenedores de texto es una práctica recomendada porque ayuda a mejorar la clasificación de optimización del motor de búsqueda.

Nota:

cuando diseñe páginas con colores de fondo sólido, defina el color del relleno de fondo de los marcos de texto para que coincidan. Esto ayuda a que Adobe Muse publique el contenido de texto de forma más eficaz. Si el relleno de fondo es desconocido, el borde del texto publicado parece menos suave porque Adobe Muse define el color de fondo del marco de texto en transparente. Sin embargo, si el fondo de la página muestra degradados o imágenes, deje el color de relleno de los marcos de texto definido en Ninguno.

Actualización de imágenes de marcador de posición con los gráficos finales del sitio

Después de que el cliente haya aprobado los esquemas, puede actualizar rápidamente el sitio y usar los archivos reales de imagen.

  1. Seleccione un marcador de posición de imagen en la página.

  2. Abra el panel Activos para buscar el elemento de página seleccionado.

  3. Haga clic con el botón derecho del ratón en el elemento de la página. En el menú que aparece, tiene dos opciones que le ayudarán a actualizar el archivo de imagen, dependiendo del modo en que se integre el sitio de esquemas.

    Si ha creado un archivo en el software de Adobe Photoshop o Adobe Fireworks y lo ha colocado en la página, puede elegir Editar original para editar el archivo original en el producto utilizado para crearlo. Cuando se guarda el archivo maestro y se vuelve a Adobe Muse, las instancias colocadas del archivo se actualizan automáticamente en el sitio.

    Como alternativa, si ha creado marcadores para archivos de imagen en Adobe Muse con la herramienta Rectángulo, seleccione Volver a vincular todas las instancias y encuentre y seleccione un archivo que ya exista en el equipo para intercambiar un archivo de marcador con la imagen gráfica final.

    fig05.wireframe.b720
    Haga clic con el botón derecho del ratón en el nombre del activo y seleccione Editar original para abrir la página maestra de un archivo de marcador de posición en el programa de edición de imágenes que ha utilizado para generarlo.

  4. Repita estos pasos para sustituir todas las imágenes de marcador de posición de la página con archivos reales de imagen.

    Nota:

    cuando se hace clic con el botón derecho del ratón en el nombre de un activo en el panel Activos, también se puede elegir Ir a activo. Esta opción le indica a Adobe Muse que abra la página que contiene el activo seleccionado para que se pueda actualizar rápidamente.

Acceso a los archivos de imagen optimizada generados por Adobe Muse

Además de publicar los sitios de Adobe Muse que se creen en el servidor host, también puede exportar todo el sitio para obtener la carpeta de archivos sectorizados y exportados de imagen:

  1. Seleccione Archivo > Exportar como HTML.

    Aparece el cuadro de diálogo Exportar a HTML.

  2. Seleccione una ubicación en el equipo para exportar los archivos del sitio y, a continuación, haga clic en OK.

Después de completar esta operación, Adobe Muse exporta los archivos y los guarda en la carpeta local que ha especificado. Vaya a la carpeta y abra la carpeta de imágenes para acceder a los archivos de imagen optimizada. Puede reutilizar estos archivos de imagen para crear boletines electrónicos, aplicaciones para móviles, páginas de redes sociales y otros proyectos relacionados.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea