7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Web Design

Cómo construir un wireframe de un sitio web promocional para una aplicación de iPhone en Fireworks

Scroll to top
Read Time: 19 mins

Spanish (Español) translation by Rosario (you can also view the original English article)

Los wireframes (prototipos) son parte útil del proceso de diseño de un sitio web. Es muy bueno separar esta etapa de planificación y tener el posicionamiento de la página, el espacio, el diseño y otros elementos como el tamaño del texto y el tono resuelto antes de entrar en Photoshop para añadir color, textura, imágenes y efectos a fin de pulir tu diseño.

Fireworks es una gran herramienta para crear un wireframe y aunque no funciona perfectamente con Photoshop, puedes exportar al mismo y luego construir tu wireframe. Vamos a cubrir el proceso de diseño de la creación de un wireframe para un sitio web de una aplicación de iPhone en Fireworks. Para aquellos que no estén familiarizados con este programa, será un buen punto de partida para comenzar a utilizarlo a la hora de crear un wireframe de sus proyectos de diseño web. ¡Esta es la primera parte de una serie de varias partes y será divertida!

Vista previa de la imagen final

Abajo se muestra el wireframe con el que trabajaremos y puedes ver la versión de tamaño completo aquí. ¿Quieres acceder a los archivos fuente completos y a copias descargables de todos los tutoriales, incluido éste? Únete a Vector Plus por sólo $9 dólares al mes.

Detalles del tutorial

  • Programa: Fireworks CS4
  • Dificultad: Intermedia
  • Tiempo estimado de ejecución: 1 hora
finalfinalfinal

Ventajas del wireframing

La creación de wireframes como una etapa separada en el proceso de diseño de tu sitio web tiene numerosos beneficios. He aquí algunos de ellos:

  • Los wireframes son excelentes para crear diseños, planificar la funcionalidad y organizar la información de tu sitio web.
  • Los wireframes permiten explorar rápidamente numerosos posicionamientos, opciones funcionales y cómo funcionarán los elementos juntos en la página (o entre páginas).
  • Los wireframes ayudan a asegurar que la funcionalidad se explora antes de realizar un trabajo de perfección de píxeles que requiere mucho tiempo.
  • Los wireframes limitan las opciones y focalizan tu atención, lo que mejora tus diseños. La ausencia de opciones como el estilo y el color te ayuda a centrarte en aspectos como el posicionamiento, el tamaño y la jerarquía.
  • Los wireframes te permiten elaborar el diseño básico de las páginas. Puedes decidir la posición de los elementos, el tamaño del texto y el tono (claro u oscuro) antes de trabajar en otros detalles del diseño.
  • Los wireframes ayudan a garantizar que los diseños, la funcionalidad y otros elementos se aprueben antes de pasar a un diseño perfecto de píxeles que requiere mucho tiempo.

Elección de la herramienta de creación de wireframes

Hay bastantes programas que los diseñadores web pueden utilizar para la creación de wireframes de sitios web. Algunos criterios de elección de un programa para utilizar en un proyecto determinado son: tu familiaridad con el programa, tu capacidad de trabajar rápidamente en él, la funcionalidad de los programas dados, su adaptabilidad al proyecto en cuestión, su capacidad para almacenar elementos reutilizables, y su flexibilidad para hacer ediciones.

Es posible que quieras usar un programa fuera de la familia Adobe, como Omni Graffle, y por supuesto también hay otros. Si vas a utilizar un programa dentro de la suite de Adobe para la creación de wireframes, Fireworks es el mejor.

Podrías utilizar Photoshop, aunque es más lento para trabajar en la creación de wireframes, ademas de carecer de la funcionalidad multipágina y otras características que hacen que Fireworks sea rápido para planificar sitios web grandes o pequeños. A principios de 2008 escribí un artículo sobre el uso de Illustrator para la creación de wireframes (más una prueba de concepto que una recomendación). Aunque es posible utilizarlo para este propósito, carece de las herramientas que tiene Fireworks para el wireframing. Recomiendo el uso de Fireworks en la mayoría de los casos para el wireframing. Está realmente bien construido para este propósito.

Uso de Fireworks

Utilizamos Fireworks para este proyecto porque es rápido de trabajar. Además, con Fireworks puedes construir fácilmente cuadros, posicionarlos, añadir texto, añadir vértices redondeados y construir rápidamente diseños. Está configurado para el desarrollo web y la creación de prototipos. Cuando dibujas cuadros, se ajustan automáticamente a los píxeles. Todo ello sin necesidad de recurrir a las funciones más avanzadas del programa.

También es posible exportar a Photoshop cuando has terminado de crear el wireframe, lo cual es un flujo de trabajo ideal cuando tu diseño final tendrá detalles mejorados en Photoshop. Hay algunos problemas que me gustaría que Adobe abordara en su próxima versión en cuanto a la integración del flujo de trabajo de Fireworks en Photoshop.

Ahora vamos a empezar con el proceso de planificación de nuestro proyecto y la construcción de nuestro wireframe.

Paso 1 - Define el alcance de tu proyecto

Antes de entrar en Fireworks y empezar a construir un sitio web hay que seguir algunos pasos. El primero, por supuesto, es definir el proyecto, el contenido que tendrá, su propósito, etc. Una vez que hayas resuelto esto con el cliente, o reducido tu enfoque si se trata de un proyecto personal, entonces es el momento de hacer algo de investigación.

Para este proyecto ficticio estamos creando una página web promocional de la aplicación Aurora para iPhone, que es una hipotética aplicación para iluminar tu iPhone con patrones de luz de Aurora boreal. Se supone que se trata de una página de un proyecto más amplio para una empresa que vende múltiples aplicaciones para iPhone. En este tutorial nos centraremos en esta página.

Paso 2 - Investigación visual y funcional

Como diseñadores, nos preocupamos por el estilo desde el principio. Es posible que quieras tomar notas sobre los estilos que encuentres en tu investigación visual o construir un tablero de inspiración. Nuestro enfoque principal en la creación de un wireframe sin embargo es la definición de nuestro diseño y funcionalidad (sin preocupación por el color o el estilo en este punto).

Para este proyecto miré un montón de sitios de aplicaciones para iPhone. Me di cuenta de que hay algunos elementos comunes de la funcionalidad que creo que ayudarían a vender una aplicación. Encontré algunos diseños que me gustaron. Aquí están algunos de ellos:

Me gustó el menú secundario de Tapulous. Había algunos otros sitios que tenían múltiples iconos de aplicaciones en vertical, lo que tiene la ventaja de que podrían añadir un número ilimitado de aplicaciones y el menú se ajustaría, pero me gustó mucho el fácil acceso de tenerlo en horizontal hacia la parte superior, como es el caso de este sitio.

tapuloustapuloustapulous

El sitio Tapbots tiene bastantes elementos que son comunes en muchos de los sitios de promoción de aplicaciones de iPhone más exitosos. Tiene una imagen grande de iPhone con un archivo de vídeo incrustado mostrando la aplicación en acción. Tiene una lista clara de características, testimonios y otros contenidos en una cuadrícula organizada, enlaces en miniatura, capturas de pantalla más grandes, y un enlace a la tienda de aplicaciones para iPhone que se destaca en negrita.

tapbotstapbotstapbots

El sitio de Sonico Mobile también tiene una navegación secundaria hecha de iconos horizontales que me gustó. También me gustó mucho el uso que hicieron del espacio promocional y cómo el iPhone dispuesto en forma vertical rompió el espacio promocional horizontal. La forma en que separaron los precios del espacio promocional también está bien hecha.

sonicosonicosonico

Estoy seguro de que podría encontrar más sitios que influyeron en el diseño, pero esos son los que realmente destacaron para el diseño básico del sitio. En este momento tengo en mi mente una buena idea de cómo quiero que sea el sitio. Ahora tengo que plasmarlo en papel.

Paso 3 - Boceto

Puedes ver el boceto a continuación. A menudo hago varios bocetos para probar diferentes diseños, lo que es realmente rápido de hacer cuando se trabaja en bruto con un lápiz y papel, pero en este caso me gustó el primer intento, así que estaba listo. Fíjate que abordo el problema tanto visual como verbalmente, tomando notas y enumerando las características que quiero ver.

Ten en cuenta que está bien que las cosas cambien a medida que pasas del boceto al wireframe en Fireworks, pero el boceto ayuda a plasmar tus ideas principales y a elaborar tus pensamientos iniciales.

sketchsketchsketch

Paso 4 - Configuración del documento

Ahora que sabemos lo que vamos a crear, vamos a configurar nuestro documento. He decidido utilizar el Sistema de cuadrícula 960 como base para el diseño. Ahora no importa necesariamente si ese framework (esquema de trabajo) se usa para codificar a la postre, es una cuadrícula que ya está establecida, es fácil de trabajar, y sé que cabe en la mayoría de los monitores, así que a menudo la uso para diseñar.

Descarga el Sistema de cuadrícula 960. Descomprímelo, dentro de esa carpeta selecciona templates > fireworks y abre el documento "960_grid_12_col.png" en Fireworks (el PNG es un archivo de Fireworks con capas).

Ve a Modificar > Lienzo > Tamaño del lienzo y cambia el tamaño del lienzo a 1060px de ancho por 1500px de alto. Ahora haz clic en la carpeta de capas "12 Col Grid" en la paleta de capas. Desbloquéala, luego selecciona todas las columnas rosas, estíralas hasta la longitud total del documento y vuelve a bloquear la carpeta de capas.

Ahora ve a Archivo > Guardar, elige dónde colocarlo y nómbralo "wireframe.png".

doc_setupdoc_setupdoc_setup

Paso 5 - Organización de las carpetas

Ahora vamos a configurar nuestras capas para ayudar a mantener nuestro archivo organizado. Haremos cambios a medida que avancemos, pero este es un buen comienzo. Observa la captura de pantalla de abajo. Ten en cuenta que "Web Layer" no es algo que vayamos a utilizar en este proyecto, pero no se puede eliminar de Fireworks.

layers_setuplayers_setuplayers_setup

Paso 6 - Comienza a construir el diseño

La creación de un diseño wireframe es un proceso un poco orgánico. Consulta tu boceto y comienza con los elementos más grandes primero. Empezaremos por colocar los fondos de nuestras secciones principales. Algunas secciones van a utilizar el fondo del sitio.

Utiliza la herramienta Rectángulo (U) para crear los fondos "header" (80px de altura) y "bottom" (360px de altura), que abarcan todo el ancho de nuestro sitio. Crea también nuestra área de fondo de "promotion" (dejando espacio para nuestra navegación secundaria) y que tenga 940px de ancho (el tamaño de nuestra área de documento principal con márgenes de 10px en cada tamaño) por 280px de alto.

begginning_layoutbegginning_layoutbegginning_layout

Una de las ventajas de trabajar con Fireworks es el inspector de Propiedades. A este cuadro le he dado una redondez del 10% desde el inspector, que queda bien. Recuerda que no debes modificar manualmente el tamaño de los cuadros redondeados, ya que esto alterará la curvatura del mismo. Utiliza los campos de anchura y altura en el inspector de propiedades para ajustar el tamaño.

box_propertiesbox_propertiesbox_properties

Paso 7 - Añade la navegación

Empecemos con las áreas "header" y "secondary_nav". Gran parte de estas áreas conforman la navegación principal y la navegación secundaria, y algunos otros detalles también. En primer lugar, coloca el nombre del sitio alineado en el lado izquierdo de nuestro "header". Este es un marcador de posición para el diseño final del logotipo.

Comienza colocando el texto de navegación en la capa "header" con la herramienta Texto (T) y utiliza una fuente estándar sans-serif como Helvetica, Myriad Pro, o cualquier fuente que prefieras. Es recomendable que utilices tipos de letra aptos para la web. Yo puse el tipo de letra en 13pt, con un color negro, y lo puse en negrita. Luego agregue cuadros redondeados de 26px de altura y un ancho adecuado. Ajusta el espaciado como creas conveniente y alinea los cuadros a la línea guía de la derecha como se muestra. Observa cómo la navegación seleccionada se representa con un fondo oscuro y un texto blanco.

Ahora añade cuadros para la navegación secundaria. Crea cada cuadro de icono de aplicación de 57px por 57px con una redondez fuerte. Deja espacio para otro cuadro de 90px de ancho por 100px de alto para que encaje detrás de la navegación de iconos con un espacio adecuado entre cada uno. Añade los nombres debajo de cada icono ajustado a 10pt, en negro y en negrita. Además, añadí un gráfico de marcador de posición para un botón estándar de la App Store alineado a la derecha, que añade una llamada a la acción y cierta legitimidad.

main_navmain_navmain_nav

Paso 8 - Acabado de la zona de promoción

El primer paso aquí es crear dos cuadros utilizando los mismos métodos descritos anteriormente. El grande de la derecha representa un espacio donde irá la imagen de un iPhone, al que se le podría añadir un vídeo en la pantalla. El cuadro inferior es nuestra principal llamada a la acción.

Ahora este botón es del mismo tamaño que el botón estándar de la App Store y ambos enlazan con el mismo lugar (cumplen una función similar). Esto puede parecer excesivo en el wireframe, pero con el color y otros detalles puede funcionar una vez que creamos el diseño final. No obstante, hay que tenerlo en cuenta.

Mi sensación es que el botón Estándar añade un poco de credibilidad, y podemos tratar el otro botón estilísticamente de manera que destaque más y atraiga realmente la atención, como la principal llamada a la acción.

Observa cómo estos cuadros se superponen con el fondo del área promocional. Este tipo de diseño hace que estos dos elementos destaquen en la página.

promo_boxespromo_boxespromo_boxes

Vamos a crear un área para colocar el precio de la aplicación. Primero crea un cuadro usando la herramienta Rectángulo (U). Mientras creas el cuadro mantén presionada la tecla Mayús para que sea un cuadrado perfecto. Hazlo de 170px de ancho por 170px de alto.

Ahora pulsa Comando + T, mantén pulsada la tecla Mayús y gira el cuadrado hasta un ángulo de 45 grados. A continuación, alinéalo como se muestra a continuación para que quede uniformemente colocado sobre el fondo del área promocional. Ahora copia (Comando + C) el fondo del área promocional y pega (Comando + V), con lo cual en Fireworks se pega automáticamente una copia en su lugar.

Ahora selecciona el cuadrado y el fondo, luego ve a Modificar > Combinar trazados > Intersectar. Y te queda la forma que queremos.

price_1price_1price_1
price_2price_2price_2
price_3price_3price_3
price_4price_4price_4

Ahora agrega todo el texto como lo hicimos antes. Puedes explorar varias opciones de texto en este punto. En este wireframe me centré sobre todo en el tamaño, el grosor y la posición, en el diseño final trabajaré en el estilo y las fuentes. También el precio se crea pulsando Comando + T, manteniendo Mayús, y girando el texto 45 grados. A continuación, cambia el espaciado y el tamaño hasta que se vea bien.

Añade también una regla horizontal debajo del texto más grande (rectángulo de 1px de altura). Luego activa las guías presionando Comando + tecla Dos puntos. Asegúrate de que todo lo que has creado se alinea como se muestra a continuación.

promo_areapromo_areapromo_area

Paso 9 - Añade la información del cuerpo

Las técnicas utilizadas para colocar esta información son todas básicas. Son todos cuadros básicos y texto. Así que procede a colocar la información del cuerpo como se muestra a continuación (es posible que quieras activar tus guías y la superposición de cuadrícula como se muestra en la siguiente sección). El objetivo de esta sección es añadir detalles de venta. Describimos la aplicación, lo que hace, mostramos capturas de pantalla de la misma en acción, añadimos detalles técnicos menores y proporcionamos testimonios.

bodybodybody

Activa la capa "12 Col Grid" que contiene nuestra cuadrícula superpuesta y activa nuestras guías. Observa cómo esta sección utiliza una configuración de tres columnas. Cada columna tiene 300px de ancho. La cuadrícula no es tan obvia arriba, pero puedes ver cómo el cuadro del iPhone se alinea con la tercera columna, y el texto promocional se alinea con las dos primeras columnas de la sección del cuerpo. La estructura de nuestra cuadrícula es realmente evidente ahora.

body_gridbody_gridbody_grid

Asegúrate de mantener las capas organizadas, como se muestra a continuación.

body_layers

Paso 10 - Añade la sección inferior

La imagen de abajo muestra lo que estamos creando para la sección inferior. Hay cuatro secciones, así que mantén tus capas organizadas en consecuencia. Esta sección se centra en la empresa y no en la aplicación. Muchos sitios que venden aplicaciones para iPhone tienen más de una aplicación que venden, o en algunos casos se centran en algo más que la venta de aplicaciones para iPhone. El objetivo de esta sección es promocionar la empresa, su blog, su servicio de atención al cliente y su Twitter.

Fíjate en que estamos utilizando nuestra cuadrícula de forma diferente para esta sección. Hemos optado por una configuración de cuatro columnas, lo que hace que cada columna tenga 220px de ancho.

bottom_contentbottom_contentbottom_content

La mayor parte de la construcción de esta sección es texto básico y cuadros. Los recuadros de enlace de la parte inferior de cada sección tienen el mismo tamaño que nuestra navegación principal y pueden copiarse desde allí. Veamos un par de aspectos de esta sección. Lo primero es cómo crear una línea de puntos, lo cual es sencillo de hacer en Fireworks.

Por supuesto, puedes usar la herramienta Línea (N) para crear la línea, pero yo usé la herramienta Rectángulo (U) en su lugar. Haz el tamaño de 220px de ancho por 1px de alto. No le des ningún relleno y dale un color de trazo que sea más oscuro que el fondo. Haz el tamaño de trazo 1. A continuación, haz clic en el botón junto al tamaño del trazo, que nos da opciones de línea. Ve a Guiones y luego selecciona Punteado como se muestra a continuación.

line_dottedline_dottedline_dotted

Una cosa que suelo hacer cuando diseño wireframes es pensar en los iconos que se utilizarán en el diseño final. En este caso sólo hay uno que usaremos de otro sitio. Podrías mantener el icono a todo color, pero quiero este wireframe en escala de grises y centrarme en el diseño y el espaciado, y no en el color en este momento.

Descarga el paquete de iconos Practika gratuito de Smashing Magazine. Arrastra y suelta el archivo de 64px por 64px "twitter.png" en el documento. Colócalo como se muestra y asegúrate de que el cuadro en el que está colocado es lo suficientemente ancho para que quepa. Ahora, con la imagen seleccionada, ve a Filtros > Ajustar color > Tono/Saturación, y baja la Saturación al máximo.

bird_colorbird_colorbird_color
bird_monobird_monobird_mono

De nuevo, mantengamos nuestras carpetas organizadas.

bottom_folders

Paso 11 - Adición del pie de página

Esto es muy básico. Asegúrate de añadir el nombre del sitio y el copyright. Además, coloca enlaces textuales que repitan la navegación principal del sitio. Si hay algún enlace complementario importante, puedes colocarlo aquí también. Alinea el copyright en el borde izquierdo y los enlaces en el borde derecho, como se muestra a continuación.

footerfooterfooter

Paso 12 - Adición de notas wireframe

En el tutorial Construir un wireframe de un sitio web en Illustrator hablo de cómo añadir notas a un wireframe, y cuál es una forma útil de hacerlo. Otra forma útil es colocar las notas entre líneas. Esto es bastante sencillo y resulta útil para comunicar características, funcionalidades o problemas a los clientes.

Me gusta colocar las notas en azul, de modo que estas se apoyen en la parte superior del wireframe y que el azul tenga una sensación de plano. El wireframe final está abajo y puedes ver la versión de tamaño completo aquí.

finalfinalfinal

Paso 13 - Configuración de nuestro archivo para exportarlo a Photoshop

Desagrupa todo lo que no quieras rasterizar cuando vaya a Photoshop. Si quieres mantener la editabilidad del texto, por ejemplo, tendrás que asegurarte de que el texto no está agrupado con nada. Aunque está bien colocar las cosas en carpetas. Esta es una de las peculiaridades de la exportación de Fireworks a Photoshop.

También puedes decidir si vale la pena llevar el texto de Fireworks a Photoshop (podrías optar por eliminarlo y luego recrearlo en Photoshop). Me ha pasado que los cuadros de texto se me hacen extraños, lo cual verás en el siguiente tutorial que toma este wireframe y crea un diseño de sitio web en Photoshop a todo color. En este caso, vamos a mantener el texto en su lugar.

Ve a Archivo > Guardar como y haz clic en Opciones. El ajuste por defecto es Mantener editabilidad sobre apariencia. Deja esta opción por defecto y haz clic en Guardar. Manteniendo la editabilidad colocaremos nuestras formas como capas de forma en Photoshop, en lugar de rasterizarlas, lo cual en este caso es preferible.

savesavesave

Conclusión

Fireworks es ideal para la creación de wireframes y prototipos de sitios web. Incluso en un diseño de una página, notarás la rapidez con la que puedes elaborar varias opciones de diseño y construir rápidamente su estructura. Una vez que empieces a trabajar con este programa para proyectos más grandes, descubrirás también una gran cantidad de herramientas. En nuestro próximo tutorial de esta serie, tomaremos este wireframe de aplicación para iPhone y terminaremos el diseño en Photoshop.

Recursos adicionales

Hay bastantes características adicionales en Fireworks, que no fueron cubiertas en este tutorial, pero que podrían ayudarte en tu próximo proyecto. A continuación hay un par de tutoriales útiles sobre el uso de Fireworks para hacer wireframing que quizás quieras consultar también. Además, si encuentras algún tutorial o recurso relevante, asegúrate de enlazarlo en los comentarios para compartirlo con la comunidad.

  • Wireframing con Fireworks CS3
    • En este tutorial se cubren numerosas funciones adicionales de wireframing de Fireworks.
    • Aprende a crear páginas, a utilizar cuadros, a crear y utilizar widgets de biblioteca, botones de "me gusta" y mucho más.
  • Diseño de una aplicación web con Fireworks CS4
    • Este tutorial cubre el proceso de wireframing en Fireworks dentro del contexto de creación de un diseño funcional. Es detallado y paso a paso.
    • Se cubren características avanzadas como el uso de páginas maestras y la exportación de PDFs interactivos. También se cubren la  herramientas y los pasos más básicos del wireframing.
  • Diseño de un sitio web en Fireworks CS4
    • Este video tutorial es realmente detallado y cubre un interesante proyecto de wireframe.
    • Cubre detalles como el uso de elementos personalizados de la biblioteca predefinida en un wireframe, guías inteligentes, configuración de cuadrículas.
    • También cubre detalles avanzados como el trabajo con múltiples páginas, la importación de archivos de Illustrator y más.

Suscríbete al canal RSS de Vectortuts+ para estar al día de los últimos tutoriales y artículos sobre vectores.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.