Comment j’ai créé un thème WordPress populaire et inventé le terme «section héros» (sans s’en rendre compte)

Je ne sais pas comment c’est pour les autres designers, mais quand je commence un nouveau projet, il y a toujours ce moment où je m’assois juste là et regarde. Rien. Aucune idée. Vide.

Les gens pensent souvent que la «créativité» est une sorte de magie qui sort soudainement de nulle part, comme une foudre du ciel. Mais je peux vous dire que ce n’est pas comme ça que cela fonctionne – du moins pas pour moi. J’ai appris à «pirater» ma créativité. Ce n’est plus aléatoire mais plus comme un processus. Et une partie de ce processus m’a amené à créer ce que nous appelons maintenant la «section des héros».

La naissance de la section des héros

Si je suis honnête, je ne sais même pas exactement comment j’ai trouvé le nom de «héros». Cela ressemblait plus à une révélation qu’à une décision consciente. À l’époque, je travaillais sur le thème de Brooklyn et Bootstrap gagnait en popularité. Je n’étais pas un grand fan de bootstrap, non pas parce que c’est mauvais, mais parce que j’ai trouvé plus compliqué de travailler avec mon propre CSS. Quatre-vingt-quinze pour cent du CSS et du HTML à Brooklyn sont écrits sur mesure, dépourvus de tout cadre.

Mais il y avait une partie de bootstrap qui m’a collé: le Classe Jumbotron. Le nom était un peu étrange, mais j’ai compris son but – pour créer quelque chose grand et attirant l’attention. Cela m’a laissé l’esprit, et comme la foudre, le mot «héros» m’est venu.

Pourquoi Héros? Un héros est un chiffre qui exige l’attention. C’est audacieux, fort et mémorable, ce que je voulais que la section d’intro de Brooklyn soit. Au début, j’ai envisagé un «bouton de héros». Pourtant, j’ai réalisé que le concept pourrait être beaucoup plus large: il pourrait englober toute la section d’introduction, Enfiler le ton du site Web et Dessiner la concentration du visiteur sur le message le plus important.

Le terme «bannière» était une autre option, mais il semblait générique et sans inspiration. UN Hérosen revanche, est une force avec laquelle compter. Donc, je me suis engagé à l’idée.

De la bannière à la section héros

En 2013, la plupart des sites Web ont qualifié leurs sections d’introduction de «bannière» ou «en-tête». Au mieux, vous verriez une seule image avec un titre, peut-être un sous-titre et un bouton. Les curseurs étaient également populaires, faisant du vélo à travers plusieurs bannières avec un contenu différent. Mais je voulais que l’intro de Brooklyn soit Plus qu’une simple bannière – il devait faire une impression durable.

Donc, je l’ai redéfini:

• Structure HTML
  J’ai nommé la section <section class="hero">. Ce n’était pas seulement une bannière ou un curseur; C’était une section de héros.
• Personnalisation CSS
  Tout dans la section a suivi le concept de héros: .hero-slogan, .hero-title, .hero-description, .hero-btn. J’ai tout codé à partir de zéro, en m’assurant qu’il avait une identité cohérente et distincte.
• Langue marketing
  Je ne me suis pas arrêté au code. J’ai utilisé le mot «héros» partout, y compris la documentation de Brooklyn, la description du thème, la page de destination et les images en vedette.

À l’époque, Brooklyn attirait Des dizaines de milliers de visiteurs par jour Sur ThemeForest, qui est la vitrine que j’utilise pour rendre le thème disponible à la vente. Il est rapidement devenu un grand vendeur, vendant comme des hotcakes. Naturellement, les gens ont commencé à demander: «Qu’est-ce qu’une section de héros?» C’était un nouveau terme, et j’ai adoré expliquer le concept.

La section des héros était devenue un peu comme un crochet qui a rendu Brooklyn plus séduisant, et nous avons vendu beaucoup de copies du thème à cause de cela.

Ce que je ne savais pas de l’avenir du héros

À l’époque, j’ai intentionnellement utilisé le terme «héros» dans le code et le marketing de Brooklyn parce que je voulais qu’il se démarque. Je me suis assuré que c’était partout: dans le <section> Tags, dans les noms de classe comme .hero-title et .hero-descriptionet sur la page de destination de Brooklyn et la description du produit.

Mais honnêtement, je ne savais pas juste Quelle est la taille le terme deviendrait. Je ne pensais pas à le sculpter en pierre ou à le réserver comme quelque chose d’unique à Brooklyn. Ce genre de réflexion avant n’était pas sur mon radar à l’époque. Tout ce que je voulais, c’était attirer l’attention et faire ressortir Brooklyn.

Au fil du temps, nous avons continué à ajouter de nouvelles variations à la section Héros. Par exemple, nous avons introduit le Vidéo de hérospermettant aux utilisateurs d’ajouter des arrière-plans vidéo à leurs héros – quelque chose qui semblait audacieux et innovant à l’époque. Nous avons également ajouté le Curseur de hérosun curseur d’image simple dans la section des héros, donnant aux utilisateurs plus de flexibilité pour créer des intros dynamiques.

Brooklyn avait même un petit constructeur de héros intégré directement dans le thème – quelque chose que je crois est toujours unique à ce jour.

Avec le recul, il est clair que j’ai raté l’occasion de cimenter la section des héros en tant que fonctionnalité de signature de Brooklyn. Une fois que j’ai vu d’autres auteurs adopter le terme, j’ai cessé de mettre l’accent sur le rôle de Brooklyn dans le vuplement. Je pensais que le concept parlait de lui-même.

Comment le héros est devenu grand public

L’une des choses les plus fascinantes à propos de la section des héros est la rapidité avec laquelle le terme a pris de l’ampleur. La popularité de Brooklyn a donné une exposition massive à la section des héros. Les concepteurs et les développeurs ont commencé à le remarquer, et bientôt, d’autres auteurs de thème ont commencé à adopter le terme dans leurs produits.

Brooklyn n’était pas seulement un autre thème. C’était l’un des meilleurs vendeurs de Themeforest, le plus grand marché mondial pour les biens numériques, avec des millions d’utilisateurs. Et je n’ai pas seulement utilisé le terme «héros» une ou deux fois – je Je l’ai utilisé partout: descriptions, des images en vedette et de la documentation. Je me suis assuré que les gens l’ont vu. Avant longtemps, j’ai remarqué que de plus en plus de thèmes utilisaient le terme pour décrire de grandes sections d’introduction dans leur travail.

Aujourd’hui, la section des héros est partout. C’est Une norme dans la conception Web Reconnu par les concepteurs et les développeurs du monde entier. Bien que je ne puisse pas dire que j’ai inventé le concept, je suis fier d’avoir joué un rôle clé dans l’introduire dans le courant dominant.

Leçons de la construction d’un héros

La création de la section des héros m’a beaucoup appris sur le design, la créativité et le marketing. Voici les principaux points à retenir:

• Démarrer simple: La section des héros a commencé comme une idée simple – un moyen de concentrer l’attention. Vous n’avez pas besoin d’un plan complexe pour créer quelque chose d’impact.
• Engagez-vous dans vos idées: Une fois que j’ai décidé du terme héros, je me suis engagé dans le code, la conception et le marketing. La cohérence l’a fait coller.
• Les noms audacieux comptent: Nommer la section «héros» au lieu de «bannière» lui a donné une personnalité et un but. Les noms peuvent définir comment les utilisateurs perçoivent une conception.
• Évoluer constamment: L’ajout de fonctionnalités telles que le héros vidéo et le curseur de héros a gardé le concept frais et adaptable aux besoins des utilisateurs.
• N’ignorez pas votre rôle: Si vous présentez quelque chose de nouveau, possédez-le. J’aurais dû continuer à promouvoir Brooklyn en tant que pionnier du héros pour solidifier son héritage.

L’inspiration n’est pas magique; C’est un travail difficile

L’inspiration vient souvent de endroits inattendus. Pour moi, cela est venu de remettre en question un nom de classe bootstrap et de le réinventer en quelque chose de nouveau. La section des héros n’était pas seulement un produit d’une brillance créative – c’était le résultat de persistance, expérimentationet un peu de chance.

Quel est le seul élément que vous avez créé dont vous êtes le plus fier? J’adorerais entendre vos histoires dans les commentaires ci-dessous!

(GG, YK)