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.
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.
Typographie
Intitulé et styles de texte.
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.
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.
Liste Nav, Modal, Images
Un contrôle de la liste de navigation, une boîte de dialogue modale et diverses formes d'images factices.
Vignettes, Carousel
Une boîte de vignette et un contrôle carrousel.
Icônes d'amorçage
246 vecteur Bootstrap icônes, créés à l'origine par Dave Gandy.
1170 Grille
Une diapositive de modèle avec une grille de Bootstrap 1170px en arrière-plan.
940 Grille
Une diapositive de modèle avec une grille de Bootstrap 940px dans le fond.
724 Grille
Une diapositive de modèle avec une grille de Bootstrap 724px dans le fond.
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:
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:
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:
J'espère qu'elle vous plaira. Wireframing heureux!
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.
Typographie
Intitulé et styles de texte.
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.
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.
Liste Nav, Modal, Images
Un contrôle de la liste de navigation, une boîte de dialogue modale et diverses formes d'images factices.
Vignettes, Carousel
Une boîte de vignette et un contrôle carrousel.
Icônes d'amorçage
246 vecteur Bootstrap icônes, créés à l'origine par Dave Gandy.
1170 Grille
Une diapositive de modèle avec une grille de Bootstrap 1170px en arrière-plan.
940 Grille
Une diapositive de modèle avec une grille de Bootstrap 940px dans le fond.
724 Grille
Une diapositive de modèle avec une grille de Bootstrap 724px dans le fond.
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:- Ajouter une forme de bouton à la diapositive et sélectionnez-le.
- Aller au ruban "Insertion" et cliquez sur "Action".
- Sélectionnez "lien hypertexte vers:" et choisissez la diapositive à sauter lorsque le bouton est cliqué.
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:
- Ajouter une forme de bouton à la diapositive.
- Ajouter une forme de menu déroulant à la diapositive et sélectionnez-le.
- Aller au ruban "Animations", cliquez sur "Ajouter Animation", et choisissez «apparaître».
- Cliquez sur "Trigger" → "lors du clic sur", puis sélectionnez le nom de la forme du bouton.
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:
- Basculer vers le ruban de PowerMockup.
- Cliquez sur le bouton "Importer des fichiers".
- 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,
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