WebZap est un plugin Photoshop génial pour aider les concepteurs à créer des maquettes de conception de sites Web haute fidélité plus rapidement que vous n'auriez jamais cru possible. En combinant des actions simples en un clic avec des options de personnalisation robustes, cet outil rend le processus de mise en page complet non seulement simple, mais amusant.
Suivez l'évolution de WebZap et testez-la pour voir comment elle fonctionne. Je vous promets que c’est le plug-in Photoshop le plus cool que vous ayez vu pour les concepteurs Web depuis GuideGuide.
Qu'est-ce que WebZap?
Lorsque vous téléchargez WebZap, vous recevez un package d’extension Adobe sur lequel vous cliquez deux fois pour installer (CS5 ou version ultérieure uniquement). Une fois que vous avez terminé la procédure d’installation rapide dans Adobe Extension Manager, vous voudrez ouvrir Photoshop et aller à Fenêtre> Extensions> WebZap.
Cela fera apparaître un nouveau panneau Photoshop qui ressemble à celui ci-dessous. Ce panneau convivial et attrayant contient l’ensemble des fonctionnalités de WebZap.
Ça a l'air simple ici, et ça est simple du point de vue de la convivialité (à peu près tout nécessite un seul clic), mais il y a une tonne de puissance cachée et de complexité qui font que l'extension gagne son prix. Voyons comment cela fonctionne avec un exemple de workflow.
Disposition
L'essentiel du panneau WebZap est qu'il est divisé en quatre onglets principaux: Disposition, Interface utilisateur, Style et Aperçu. Ceux-ci sont représentés par les grandes icônes près du sommet.
Nous allons parcourir chacun de ces points rapidement pour voir comment ils fonctionnent. Pour commencer, passons à la mise en page. La première chose à faire est de décider si nous voulons que notre navigation soit centrée horizontalement en haut de la page ou sur le côté gauche de la page. Pour notre exemple de projet, choisissons l'option centrée.
Ce choix affecte presque tout après. Toutes les options de mise en page se conformeront automatiquement au format que vous avez choisi de développer. En fait, je suis vraiment étonné de la polyvalence de WebZap. Il semble que vous preniez toujours une décision qui affectait d’autres options, et cela se répercutait sans encombre, sans jamais déranger ni vous donner des résultats étranges et inattendus.
La navigation
Maintenant que nous avons choisi une disposition centrée, nous passons à autre chose et choisissons parmi les 14 options de navigation intégrées. Tout ce que vous avez à faire pour en créer un est de cliquer dessus. C'est aussi simple que ça!
Cliquer sur une option de navigation revient essentiellement à lancer une action Photoshop. Vous vous asseyez et sirotez votre café pendant que Photoshop construit automatiquement le menu de navigation complet (cela ne prend que quelques secondes). Quand c'est fini, vous devriez avoir quelque chose comme ça:
N'oubliez pas que WebZap ne vous lance pas un plat. Il s'agit en fait de créer un fichier PSD entièrement en couches et facilement personnalisable.
Fait intéressant,? Navigation? est un peu abusif ici. Ce que vous obtenez réellement est le cadre de base pour la page entière. Cela inclut à la fois la navigation en haut et un pied de page en bas. Autant que je sache, le pied de page est identique pour chacune des 14 options de mise en page.
Comme vous pouvez le constater, j’ai choisi une option agréable et minimale avec un logo, un champ de recherche et quelques éléments de navigation. Ces éléments de navigation sont du texte actif et peuvent être facilement modifiés pour répondre à vos besoins.
Principale
Après avoir choisi la disposition de votre navigation, il est temps de sélectionner une "fonction", "pli" ou les deux. La fonctionnalité est fondamentalement une sorte de grande glissière d'image avec un texte et / ou une disposition de vignettes.
Encore une fois, un clic plus tard et ma mise en page arrive tout de suite. N'oubliez pas que je n'ai effectué que trois ou quatre clics de souris jusqu'à présent. Tout le reste a été complètement automatisé.
Plier
À partir de là, il suffit de faire mousser, de rincer et de répéter. La dernière section de notre mise en page s’appelle "Plier". ce qui signifie qu'il sera probablement généralement sous le pli hypothétique (point de défilement). Nous avons ici deux onglets d’options différents, l’un occupant toute la largeur de la page, l’autre occupant la moitié de la page.
Avant de vous en rendre compte, vous avez une mise en page entière! Vous avez le choix parmi de nombreuses options de mix and match afin que vous puissiez éventuellement suivre le même processus cinquante fois de plus et obtenir des résultats uniques à chaque fois.
UI
Vous avez maintenant une idée de la progression du flux de travail. Passons donc rapidement en revue des fonctionnalités plus impressionnantes. Le prochain onglet principal plein de fonctionnalités est l'onglet d'interface utilisateur. Vous y trouverez divers boutons, éléments de formulaire et curseurs.
Une chose que j’aime vraiment ici est la possibilité de choisir la couleur de votre bouton lorsque vous le créez. Cela peut économiser beaucoup de temps de personnalisation plus tard.
Style
L'onglet Style est l'endroit où vous pouvez commencer à modifier certaines des décisions de conception qui ont été prises automatiquement pour vous. Il y a trois sections ici: Cadre, Diviseur et Texte. Chacun est expliqué dans l'image ci-dessous.
Voici ce qui se passe lorsque je jette un cadre sur la mise en page que j'ai construite jusqu'à présent. Notez que je peux choisir la couleur de mon choix et même changer de couleur à plusieurs reprises à l’aide de la petite roue de couleurs située à droite.
Les options de remplacement de texte sont réellement très robustes. Vous pouvez choisir de personnaliser les en-têtes (h1, h2, h3, etc.), le texte du paragraphe et les liens. Vous choisissez simplement l'élément que vous souhaitez modifier, choisissez une couleur et utilisez le menu de remplacement de police qui apparaît.
Aperçu
L'onglet principal final est? Preview ,? qui transforme automatiquement votre page Web en une maquette élégante qui se trouve soit dans une fenêtre de navigateur, soit dans un cadre de périphérique mobile.
Certaines d'entre elles peuvent sembler un peu fantaisistes, mais elles sont vraiment agréables à utiliser et vous offrent un excellent moyen d'exposer vos idées à la dernière minute sans aucun effort.
Mini ensemble d'outils
Le dernier ensemble d’outils dont nous allons parler est le "Mini Toolset". qui se trouve en haut à droite du panneau WebZap. Il contient quatre boutons:
Les deux premiers boutons ici sont assez explicites. Le premier génère un nouveau document afin que vous puissiez commencer une nouvelle page et le second crée des guides basés sur la disposition du système de grille 960. Le troisième bouton est extrêmement pratique. Il saisit le groupe de calques que vous avez sélectionné, le recadre et le jette dans un nouveau document. Cela facilite grandement le découpage et la sauvegarde de vos images. Même en tant que plugin autonome, cette fonctionnalité serait très utile.
Enfin, le quatrième bouton génère des paragraphes d’espace réservé remplis de lorem ipsum. Comme pour les autres éléments de présentation, vous pouvez choisir parmi une variété d’options différentes.
Comment c'est?
Des applications Web et des infrastructures de développement aux modèles Keynote et Powerpoint, il existe une multitude de produits sur le marché pour vous aider à créer rapidement des maquettes de conception de pages Web. WebZap est le seul que j'ai utilisé qui me fasse sourire. C'est tellement facile et puissant que vous ne pouvez vous empêcher d'être impressionné par son potentiel. J'aime pouvoir construire de si belles maquettes avec si peu d'effort.
Est-ce que tous mes sites se ressemblent?
En un coup d'œil, vous pourriez penser que l'utilité de WebZap est limitée. Après tout, si vous utilisiez cela dans vos dix prochains projets, tout votre travail ne commencerait-il pas à se ressembler?
A cette protestation, ma réponse est «seulement si vous êtes paresseux». S'il s'agissait d'une application Web, vous seriez en fait assez coincé dans les mises en page, les styles, etc. qui vous sont fournis. Cependant, rappelez-vous qu'il s'agit d'un Photoshop brancher. Cela signifie que vous pouvez faire absolument tout ce que vous voulez pour la sortie générée par WebZap.
Pensez à WebZap comme un point de départ qui vous aide à générer d’abord des idées de mise en page brutes, puis à fournir une structure solide que vous pouvez ajouter et personnaliser pour un design totalement unique.
De cette manière, cela ressemble beaucoup à une version Photoshop de Twitter Bootstrap, utilisée quotidiennement par des milliers et des milliers de concepteurs. Avec Bootstrap, les concepteurs peuvent créer un site attrayant en utilisant les styles par défaut, mais sans trop d'effort, vous pouvez sortir du moule et créer des conceptions qui vous correspondent tout en exploitant l'ensemble d'outils utiles. La même logique s'applique à WebZap.
Caractéristiques que j'aimerais voir
Comme vous pouvez le constater, cet outil me passionne beaucoup et je pense vraiment qu'il se démarque comme l'un des meilleurs plugins Photoshop pour la conception Web que j'ai jamais utilisés. Lorsqu'il est utilisé correctement, il peut considérablement accélérer votre flux de travail sans vous enfermer dans un système trop strict.
Cela étant dit, il y a certaines fonctionnalités que j'aimerais vraiment voir ajoutées à l'avenir. En voici quelques unes qui me viennent à l’esprit.
Options de disposition du pied de page
En ce moment, le pied de page est vraiment ajouté après coup à la navigation. Il mérite certainement son propre module qui vous permet de choisir parmi plusieurs mises en page différentes, tout comme avec les autres éléments de mise en page.
Info-bulles
Sauf si vous avez entièrement lu la documentation (ce qui est génial), il n’ya vraiment aucun moyen de savoir exactement ce que fait un bouton tant que vous n’appuyez pas dessus. Certes, les actions sont faciles à annuler, mais si cela est possible, il serait bon que des info-bulles apparaissent en survol pour vous aider à comprendre ce qui va se passer. Cela serait particulièrement utile dans la section Mini Toolset.
Arrangements et styles personnalisés
De nombreuses options de personnalisation sont déjà intégrées à WebZap, mais il va sans dire que j'en veux encore plus. Plus cet outil devient polyvalent (tout en maintenant sa facilité d'utilisation), plus nombreux sont les concepteurs qui l'adopteront facilement. Je sais que c'est un défi de taille, mais j'aimerais pouvoir enregistrer mes propres dispositions, couleurs de boutons, etc.
Va le chercher!
Si vous passez vos journées à créer des modèles de conception Web dans Photoshop, vous devez absolument essayer cet outil. Il combine la facilité d'utilisation de Rapidweaver et les nombreuses possibilités d'utilisation de Photoshop. Chapeau à Norman Sheeran et à UI Parade pour avoir créé un outil aussi formidable.
Rendez-vous sur le site Web WebZap pour voir des vidéos de l'extension en action. Compte tenu du temps que cela vous fait gagner, je pense que les 15 $ en valent bien la peine.