lundi 10 juin 2013

Bootstrap ensemble libre de Wireframing pour PowerPoint

Dans les moins de deux ans depuis sa sortie, le cadre HTML / CSS Bootstrap est devenu si populaire et répandu qu'il peut déjà être considéré comme un standard de facto. Des milliers de sites dans le monde sont construits au-dessus de Bootstrap , y compris StumbleUpon, Squidoo, et Disqus. Ce n'est pas surprenant, car Bootstrap sauve développeurs web temps et les tracas en fournissant une base solide qui est bien documenté, régulièrement mis à jour et facile à personnaliser.

Bootstrap sans modèle Wireframing pour PowerPoint

La façon habituelle de commencer avec Bootstrap est d'utiliser un des exemples de mises en page du site web et ensuite jouer avec lui. Bien que cette approche est idéal pour se familiariser avec le cadre et de voir des résultats rapides, des projets sérieux doit commencer par un plan. Beaucoup de concepteurs et développeurs Web utilisent filaires comme un outil visuel pour la planification de la mise en page d'un site avant d'écrire n'importe quel code. Wireframes sont faciles à créer, rapide à modifier, et de focaliser sur les questions structurelles avant de plonger dans la conception et les détails de codage.
Comme point de départ pour wireframing votre prochain site Bootstrap basée, j'ai conçu une série de diapositives de modèle pour Microsoft PowerPoint. Il pourrait vous surprendre, mais PowerPoint rend en fait un bon outil pour fil de fer de construction. Il dispose d'un riche ensemble de fonctionnalités de dessin, prend en charge une variété de formats d'importation et d'exportation, et les fonctionnalités de diaporama sont parfaits pour la création de prototypes simples clics.
Vous remarquerez que les captures d'écran ci-dessous que le jeu de wireframing est de style comme un plan d'architecte. La métaphore de modèle peut être utile pour les clients comprennent que filaires sont sur la structure et la fonctionnalité, et non des détails de conception.
Exemple filaire
Un exemple filaire d'un site web simple Bootstrap basée.
Exemple filaire
Typographie
Intitulé et styles de texte.
Typographie
Des listes, des info-bulles, les étiquettes, les alertes, Popovers
Des listes, des info-bulles, les étiquettes, les alertes, Popovers
Les boutons, les contrôles de formulaire
Boutons dans toutes les tailles et variantes, ainsi que des contrôles de formulaires typiques tels que les boîtes de saisie et les boutons radio.
Les boutons, les contrôles de formulaire
Table, Contrôles de navigation
Un élément de table, ainsi que les différents contrôles de navigation comme des onglets, barres d'outils et les liens de pagination.
Table, Contrôles de navigation
Liste Nav, Modal, Images
Un contrôle de la liste de navigation, une boîte de dialogue modale et diverses formes d'images factices.
Liste Nav, Modal, Images
Vignettes, Carousel
Une boîte de vignette et un contrôle carrousel.
Vignettes, Carousel
Icônes d'amorçage
246 vecteur Bootstrap icônes, créés à l'origine par Dave Gandy.
Icônes d'amorçage
1170 Grille
Une diapositive de modèle avec une grille de Bootstrap 1170px en arrière-plan.
1170 Grille
940 Grille
Une diapositive de modèle avec une grille de Bootstrap 940px dans le fond.
940 Grille
724 Grille
Une diapositive de modèle avec une grille de Bootstrap 724px dans le fond.
724 Grille

Comment utiliser le modèle

En utilisant le modèle est simple: Il suffit d'ouvrir le fichier pptx dans PowerPoint, ajouter une diapositive vide, et d'assembler un fil de fer en copiant des éléments existants à partir du modèle et les coller sur la nouvelle diapositive.. Vous pouvez également faire vos wireframes interactif en ajoutant des liens entre les diapositives. Par exemple, un bouton cliquable peut être créé comme suit:
  1. Ajouter une forme de bouton à la diapositive et sélectionnez-le.
  2. Aller au ruban "Insertion" et cliquez sur "Action".
  3. Sélectionnez "lien hypertexte vers:" et choisissez la diapositive à sauter lorsque le bouton est cliqué.
PowerPoint Paramètres des actions
Il est intéressant de noter que le bouton n'est actif que lorsque PowerPoint est en mode de présentation (appuyez sur Maj + F5).
Une autre façon d'ajouter de l'interactivité dans PowerPoint est d'utiliser animations. Par exemple, vous pouvez créer un bouton qui lorsqu'il est cliqué affiche un menu déroulant:
  1. Ajouter une forme de bouton à la diapositive.
  2. Ajouter une forme de menu déroulant à la diapositive et sélectionnez-le.
  3. Aller au ruban "Animations", cliquez sur "Ajouter Animation", et choisissez «apparaître».
  4. Cliquez sur "Trigger" → "lors du clic sur", puis sélectionnez le nom de la forme du bouton.
Si vous ne connaissez pas le nom de la forme du bouton, sélectionnez la forme sur la diapositive, puis appuyez sur Alt + F10 pour afficher le volet de sélection. Cette fenêtre répertorie toutes les formes, y compris leurs noms, qui peuvent être modifiés si nécessaire.
Déclenchement de l'animation et de la sélection
Lorsque vous travaillez avec le modèle, vous pouvez vous retrouver à la nostalgie d'un moyen plus facile de rechercher et d'utiliser les éléments du modèle. Dans ce cas, je vous recommande de jeter un oeil à PowerMockup , un add-on que mon entreprise s'est développée. Il fournit une bibliothèque consultable de pochoirs filaires qui peuvent facilement être glissés et déposés sur une diapositive PowerPoint.
Depuis PowerMockup vous permet également de créer vos propres catégories et pochoirs, j'ai utilisé cette fonction pour ajouter les éléments de l'ensemble de wireframe d'amorçage et les a exportés en tant que fichiers. Pmst. Vous pouvez télécharger les fichiers pmst. puis les importer dans PowerMockup comme suit:
  1. Basculer vers le ruban de PowerMockup.
  2. Cliquez sur le bouton "Importer des fichiers".
  3. Sélectionnez les fichiers téléchargés pmst..

Obtenez le modèle

Le jeu de modèle est disponible sous forme de fichier. Pptx pour PowerPoint 2007 et supérieur. Vous pouvez le télécharger via le lien ci-dessous:
Les lames sont sous licence Commons Attribution-Share Alike 3.0 Unported Creative . Cela signifie que vous pouvez les utiliser librement dans n'importe quelle manière que vous voulez à des fins privées et commerciales, mais si vous faites vos résultats accessibles au public, vous devez le faire que sous la même licence ou similaires et de donner l'attribution appropriée pour les créateurs originaux:
  • L'ensemble du modèle a été élaboré par Andreas Wulf,
  • Les icônes inclus sont basés sur la police impressionnant police par Dave Gandy,
Voici une capture d'écran de la façon dont il va ressembler une fois que vous avez importé les fichiers dans PowerMockup:
PowerMockup
J'espère qu'elle vous plaira. Wireframing heureux!

Aucun commentaire:

Enregistrer un commentaire

Nous vous invitons ici à donner votre point de vue, vos informations, vos arguments. Nous refusons les messages haineux, diffamatoires, racistes ou xénophobes, les menaces, incitations à la violence ou autres injures. Merci de garder un ton respectueux et de penser que de nombreuses personnes vous lisent.
La rédaction

Messages les plus consultés

Inscrivez-vous à notre newsletter pour recevoir les nouveaux articles