Wireframe Toolkit for Keynote permet à quiconque de maîtriser les bases du logiciel de présentation pour créer rapidement des maquettes d'interface utilisateur pour iOS et le Web. Si vous n'avez pas Keynote, ne vous inquiétez pas, une version Powerpoint est également incluse!
Aujourd'hui, nous allons vous expliquer rapidement comment utiliser Wireframe Toolkit for Keynote pour créer une présentation d'application Web de base. Si vous pouvez copier et coller, vous pouvez le faire!
Ce que vous obtenez
Votre téléchargement de Wireframe Toolkit vous fournit une liste considérable de modèles Keynote et PowerPoint. Comme vous pouvez le voir dans la capture d'écran ci-dessous, vous disposez de quatre versions différentes des modèles: Keynote '08, Keynote '09, Keynote pour iPad et Powerpoint.
Chaque dossier est livré avec plusieurs kits d’outils différents destinés à vous fournir les éléments d’interface dont vous aurez besoin pour concevoir pour l’iPhone, l’iPad et, bien sûr, le vieux web ordinaire. Il existe également quelques exemples finaux que vous pouvez ouvrir pour avoir une idée de la façon dont tout cela fonctionne.
Diapositives vs diapositives maîtres
Pour démarrer, recherchez la boîte à outils avec laquelle vous souhaitez travailler et dupliquez-la dans le Finder. Travailler avec une copie vous permet de tout gâcher sérieusement sans affecter votre original.
Je vais ouvrir le? Web? modèle pour notre projet. Si vous ne connaissez pas le fonctionnement de Keynote, il ressemble beaucoup à Powerpoint, mais il est généralement encore plus intuitif. Tout de suite, vous devriez remarquer une bande de diapositives sur le côté gauche de l'écran. Cette bande est divisée en deux zones: Diapositives (en bas) et Diapositives principales (en haut).
Les diapositives principales de la boîte à outils contiennent tous les éléments prédéfinis, ce qui signifie qu'ils sont essentiellement ce pour quoi vous payez. Chacune des diapositives maîtresses incluses a une catégorie spécifique qui décrit les éléments de l'interface utilisateur: formulaires, navigation, données, styles de texte, etc.
La plupart du temps, vous laisserez les diapositives maîtresses seules et ne les modifierez pas directement. Au lieu de cela, vous allez copier et coller des éléments à partir des diapositives principales dans les diapositives normales. Cela laisse vos éléments de modèle d'origine inchangés afin que vous puissiez les réutiliser encore et encore.
Bien sûr, si vous souhaitez effectuer un changement global qui affecte tout, vous devez modifier une diapositive principale existante ou même en créer une nouvelle. Ainsi, par exemple, si vous voulez une version bleue réutilisable d’un bouton, vous pouvez dupliquer le bouton existant dans la diapositive principale et changer sa couleur en bleu.
Créer une nouvelle diapositive
Pour commencer, cliquez sur l'aide pédagogique actuelle sous? Diapositives? puis appuyez sur Commande + Maj + N pour créer une nouvelle diapositive. Nous allons ensuite utiliser l’un des styles de guide inclus de 960.gs pour obtenir une largeur générale de notre contenu. Pour ce faire, faites glisser une diapositive principale 960 sur votre diapositive normale, ce qui appliquera la diapositive principale en tant qu'arrière-plan.
Ajouter de la navigation
Nous allons commencer avec quelque chose à peu près tous les besoins de la page Web: la navigation. Si vous consultez la diapositive principale de navigation, vous trouverez plusieurs options. Trouvez celui que vous aimez et copiez-le simplement sur votre diapositive. Bam, maintenant nous avons la navigation! Vous avez vu comme c'était facile?
Comme vous pouvez le constater, la largeur de navigation est déjà définie pour correspondre à celle des guides que nous avons choisis. Maintenant que vous avez l'élément dans votre diapositive, vous pouvez le personnaliser comme bon vous semble en utilisant le riche jeu d'outils de Keynote. Echangez les couleurs, changez le texte, c'est vous qui décidez!
Utiliser les outils Keynote pour ajouter un conteneur
Maintenant, rappelez-vous que vous n'êtes pas limité aux éléments contenus dans la boîte à outils. Keynote et Powerpoint ont tous deux des outils de dessin de base qui peuvent vous aider énormément avec votre structure générale. A titre d'exemple, j'ai étoffé un peu ma page en ajoutant un fond à l'arrière-plan et en traçant une simple case sous la navigation en tant que conteneur pour le reste du contenu.
Redimensionnement d'objets
L’une des choses que j’apprécie vraiment dans cette boîte à outils est la qualité de la création des objets pour la personnalisation. Par exemple, supposons que je veuille ajouter quelques widgets à ma maquette, alors je rajoute un calendrier et un menu en accordéon. Le problème est qu’elles n’ont pas la même largeur et, par souci de cohérence visuelle, j’aimerais qu’elles le soient.
En regardant le menu de l'accordéon, vous pouvez voir que c'est un objet complexe et penser instinctivement que l'étirer horizontalement sera une douleur. Cela va sûrement bousiller tous ces éléments imbriqués, n'est-ce pas? Faux! Tout ce que vous avez à faire est de l'étirer comme vous le souhaitez et tout reste beau et proportionnel.
Finition de la maquette
A présent, vous devriez avoir le processus de base en place. À partir de là, tout ce que vous avez à faire est de copier et coller les éléments de la boîte à outils selon vos besoins. En un rien de temps, nous avons une superbe maquette qui pourrait facilement être utilisée pour le développement d'une plateforme de gestion de contenu ou de blogs.
En toute honnêteté, la toute première fois que j'ai ouvert la boîte à outils, j'ai été capable de comprendre le processus et de créer la mise en page ci-dessus en une dizaine de minutes! Maintenant que je sais ce que je fais, je pourrais faire quelque chose de similaire en trois minutes environ. Et je ne suis pas vraiment un utilisateur Keynote.
C'est vraiment un outil fantastique pour créer des maquettes et des structures filaires rapides. Je pourrais certainement faire l'image ci-dessus dans Photoshop, mais il m'aurait certainement pris beaucoup plus de temps pour construire ces éléments à partir de zéro!
Plus d'exemples
La démonstration ci-dessus efface à peine la surface, non seulement de ce que vous pouvez faire avec cette boîte à outils, mais même de ce qui est inclus. Découvrez ces maquettes d'applications iPad et iPhone, entièrement conçues avec le Toolkit Wireframe pour Keynote.
Une chose à noter est que les boutons de ces versions ont été transformés en liens vers d'autres diapositives. Cela signifie que vous pouvez réellement parcourir un prototype de navigation approximatif en regardant le diaporama et en cliquant sur les boutons! À quel point cela est cool?
Pour qui est-ce?
Wireframe Toolkit for Keynote est utile à tous les acteurs du développement d'applications Web ou d'applications Web, quel que soit leur niveau. Si vous n’êtes pas un designer, c’est un excellent moyen de montrer à votre designer une idée générale de ce que vous recherchez sans être obligé de faire appel à vos compétences en MS Paint.
Si vous êtes un designer, c’est un moyen génial et incroyablement rapide de réfléchir aux mécanismes d’un aménagement. Vous pensez peut-être que la boîte à outils vous limiterait, mais il est en fait assez libérable de pouvoir décomposer une structure filaire aussi rapidement avant de passer à Photoshop ou CSS et de créer les éléments avec le style spécifique que vous recherchez. En fait, si vous n'aimez pas le style de l'un des éléments, comme nous l'avons dit ci-dessus, ils sont faciles à changer!
Génial, où puis-je l'obtenir?
La boîte à outils Wireframe pour Keynote est disponible à tout moment sur Keynotekungfu.com pour 12 USD. Faites-moi confiance, c'est vraiment pas cher pour la quantité de valeur que vous allez en tirer.
Le site Web contient également beaucoup d’informations sur ce qui est inclus et comment l’utiliser. Il existe même quelques très bonnes vidéos pédagogiques contenant des conseils utiles sur la façon de tirer le meilleur parti de Keynote pour la création d'images par fil.