Wireframe Toolkit para Keynote permite que casi cualquier persona con conocimientos básicos de cómo usar el software de presentación cree rápidamente maquetas de interfaz de usuario para iOS y la web. Si no tiene Keynote, no se preocupe, ¡también se incluye una versión de Powerpoint!
Hoy le daremos un recorrido súper rápido de cómo utilizar el kit de herramientas Wireframe para Keynote para crear un diseño de aplicación web básico. Si puedes copiar y pegar, puedes hacer esto!
Lo que obtienes
Su descarga de Wireframe Toolkit le brinda una lista considerable de plantillas de Keynote y Powerpoint. Como puede ver en la siguiente captura de pantalla, se le presentan cuatro versiones diferentes de las plantillas: Keynote '08, Keynote '09, Keynote para iPad y Powerpoint.
Cada carpeta viene con varios kits de herramientas diferentes destinados a proporcionarle los elementos de interfaz que necesitará para diseñar para el iPhone, el iPad y, por supuesto, la web antigua. También hay algunos ejemplos completos que puede abrir para tener una idea de cómo funciona todo.
Diapositivas vs. diapositivas maestras
Para comenzar, encuentre el kit de herramientas con el que desea trabajar y duplíquelo en el Finder. Trabajar con un duplicado le permite arruinar todo en serio sin afectar su original.
Voy a abrir la web? Plantilla para nuestro proyecto. Si no está familiarizado con la forma en que funciona Keynote, es muy similar a Powerpoint, pero generalmente es incluso más intuitivo. Inmediatamente debe notar una tira de diapositivas en el lado izquierdo de la pantalla. Esta tira se divide en dos áreas: Diapositivas (parte inferior) y Diapositivas maestras (parte superior).
Las diapositivas maestras en el kit de herramientas contienen todos los elementos preconstruidos, lo que significa que son esencialmente lo que estás pagando. Cada una de las diapositivas maestras incluidas tiene una categoría específica que describe los elementos de la interfaz de usuario dentro de: formularios, navegación, datos, estilos de texto, etc.
En su mayor parte, dejará las Diapositivas maestras solo y no las cambiará directamente. En su lugar, copiará y pegará elementos de las diapositivas maestras en las diapositivas normales. Esto deja los elementos de la plantilla original sin cambios para que pueda reutilizarlos una y otra vez.
Por supuesto, si desea realizar un cambio global que afecte todo, editaría una diapositiva maestra existente o incluso crearía una nueva. Por ejemplo, si desea una versión azul reutilizable de un botón, puede duplicar el botón existente en la Diapositiva maestra y cambiar su color a azul.
Creando una nueva diapositiva
Para comenzar, haga clic en la ayuda de instrucción actual en? Diapositivas? y luego presione Comando + Mayús + N para crear una nueva diapositiva. A continuación, usaremos uno de los estilos de guía 960.gs incluidos para obtener un ancho general para nuestro contenido. Para hacer esto, arrastre una diapositiva maestra 960 a su diapositiva normal, que aplicará la diapositiva maestra como fondo.
Añadir alguna navegación
Comenzaremos con algo que se adapta a todas las necesidades de las páginas web: navegación. Si echa un vistazo a la diapositiva maestra de navegación, encontrará bastantes opciones. Encuentra el que más te guste y simplemente cópialo y pégalo en tu diapositiva. Bam, ahora tenemos navegación! ¿Ves que fácil fue eso?
Como puede ver, el ancho de navegación ya está configurado para coincidir con el de las guías que hemos elegido. Ahora que tiene el elemento en su diapositiva, puede personalizarlo como desee utilizando el rico conjunto de herramientas de Keynote. Cambia los colores, cambia el texto, ¡todo depende de ti!
Utilice Keynote Tools para agregar un contenedor
Ahora, recuerde que no está restringido a los elementos que se encuentran en el kit de herramientas. Keynote y Powerpoint tienen herramientas de dibujo básicas que pueden ayudar mucho con su estructura general. Como ejemplo, amplié un poco mi página agregando un relleno de fondo y dibujando un cuadro simple debajo de la navegación como contenedor para el resto del contenido.
Redimensionar objetos
Una de las cosas que realmente aprecio de este kit de herramientas es lo bien que están construidos los objetos para la personalización. Por ejemplo, digamos que quería agregar algunos widgets a mi maqueta, así que agrego un calendario y un menú de acordeón. El problema es que no tienen el mismo ancho, y para la consistencia visual, me gustaría que lo fueran.
Al mirar el menú de acordeón, puede ver que es un objeto complejo e instintivamente pensar que estirarlo horizontalmente será un dolor. Seguramente arruinará todos esos elementos anidados, ¿no? ¡Incorrecto! Todo lo que tienes que hacer es estirarlo como quieras y todo se mantiene proporcional y hermoso.
Terminando la maqueta
Por ahora, debería tener el proceso básico hacia abajo. Desde aquí, todo lo que tiene que hacer es copiar y pegar los elementos del kit de herramientas según sea necesario. En poco tiempo, tenemos una maqueta de excelente apariencia que podría usarse fácilmente para el desarrollo de un CMS o plataforma de blogs.
Honestamente, la primera vez que abrí el kit de herramientas, ¡pude averiguar el proceso y crear el diseño de arriba en aproximadamente diez minutos! Ahora que sé lo que estoy haciendo, podría hacer algo similar en unos tres minutos. Y no soy realmente mucho de un usuario de Keynote.
Esta es realmente una herramienta fantástica para crear esquemas y maquetas rápidas. Definitivamente podría hacer la imagen de arriba en Photoshop, ¡pero ciertamente me hubiera llevado mucho más tiempo construir esos elementos desde cero!
Más ejemplos
La demostración anterior apenas roza la superficie no solo de lo que puede hacer con este kit de herramientas, sino también de lo que está incluido. Echa un vistazo a estas maquetas de aplicaciones para iPad y iPhone, creadas en su totalidad con Wireframe Toolkit para Keynote.
Una cosa a tener en cuenta es que los botones de estas versiones se han convertido en enlaces a otras diapositivas. ¡Eso significa que realmente puede ejecutar un prototipo de la navegación al ver la presentación de diapositivas y hacer clic en los botones! ¿Cuan genial es eso?
¿Para quien es esto?
Wireframe Toolkit for Keynote es útil para cualquier persona involucrada en el desarrollo web o de aplicaciones en cualquier nivel. Si no eres diseñador, es una excelente manera de mostrarle a tu diseñador una idea general de lo que estás buscando sin tener que recurrir a tus habilidades de MS Paint.
Si eres un diseñador, es una forma asombrosa e increíblemente rápida de pensar en la mecánica de un diseño. Podría pensar que el kit de herramientas lo restringiría, pero en realidad es bastante liberador poder romper un alámbrico tan rápido antes de ingresar a Photoshop o CSS y construir los elementos con el estilo específico que busca. De hecho, si no te gusta el estilo de ninguno de los elementos, como dijimos anteriormente, ¡son fáciles de cambiar!
Genial, ¿Dónde puedo conseguirlo?
El kit de herramientas Wireframe para Keynote está disponible en cualquier momento en Keynotekungfu.com por $ 12. Confía en mí, eso es realmente barato por la cantidad de valor que obtendrás de esto.
El sitio web también tiene mucha más información sobre lo que está incluido y cómo usarlo. Incluso hay un par de videos instructivos realmente geniales que contienen consejos útiles sobre cómo sacar el máximo provecho de Keynote para wireframing.