Ah bonne trouvaille ! Je viens de poster quelque chose là-bas. S'il vous plaît, votez pour tout le monde !

Je viens de commencer à jouer avec Gatsby et ça a l'air super. Je voulais quelque chose pour écrire facilement des fichiers statiques dans d'autres formats en plus de la démarque. Voici un stylo que j'ai fait il y a quelque temps avec un style typographique autour de "The Great Gatsby" si cela aide à stimuler le processus. http://codepen.io/Gajit/pen/Qyjpoy

Logo sympa !

Je ne pense pas que je veux une référence au livre lui-même cependant. Il n'y a qu'un lien lâche entre le livre et le projet. Je viens de le choisir parce que j'aime le nom + il était ouvert sur NPM :-)

Ma contribution :danseuse:

Juste une note: @renatorib J'aime la façon dont vous avez brisé les couleurs dans le dernier style, style 70's. :RÉ

Mes 2 centimes: essayez de ne pas être trop proche des couleurs Phenomic https://phenomic.io/ (qui est un autre générateur de site Web statique React/webpack)

@MoOx pourquoi ? Sont des couleurs.

@renatorib c'est super ! Transformons ce fil en fil de logo - obtenons un tas d'idées, puis choisissons-en une pour le site Web à venir, les propriétés sociales, etc.

Je ne suis pas doué pour la conception de logo moi-même, mais je serais heureux de faire avancer les choses et de fournir des commentaires. @KyleAMathews que pensez-vous que le logo devrait évoquer ? D'autres logos de projets que vous aimez ?

@renatorib bien que je pense que le logo de lettrage que vous avez créé est superbe, peut-être voulons-nous rester à l'écart du livre et du thème rétro ? De plus, je ne sais pas à quel point le lettrage serait lisible à des tailles plus petites?

Sans faire directement référence au livre ou au film, peut-être y a-t-il des éléments que nous pourrions tirer de la conception visuelle du film ?

De plus, quoi que nous obtenions, ce serait formidable d'avoir quelque chose qui soit facilement utilisable comme logo favicon/icône/carré.

@SachaG J'aime ça de la conception du film :

En dépit de cela, cela peut ressembler à un symbole de freemansory.

@SachaG Je

Pour le moment, je n'ai pas de sentiments forts pour ou contre m'inspirer du livre/film. Je n'ai pas choisi le nom à cause d'eux en soi, nous n'avons donc pas nécessairement besoin de nous en tenir à son esthétique, mais cela étant dit, l' Art déco est cool et le choisir car notre esthétique simplifierait le choix des polices, des dessins, etc. profitez de l'association entre notre nom et le logo/design.

https://fonts.google.com/specimen/Poiret+One par exemple est une très belle police de style art déco qui se trouve sur Google Fonts. Nous pourrions l'utiliser pour nos en-têtes et peut-être nos logos.

Quelques autres polices qui s'intègrent dans le moule Art Déco :

• https://typekit.com/fonts/anisette-std
• https://typekit.com/fonts/futura-pt
• https://typekit.com/fonts/brandon-grotesque
• http://www.dafont.com/andes.font
• https://www.thedesignersfoundry.com/products/neue-droschke

Ok, je me suis un peu mis dans l'esprit :-)

Voici les Andes :

Poiret Un :

Anisette :

Italique gras Futura :

En regardant les autres générateurs de sites statiques open source, beaucoup d'entre eux utilisent leurs initiales comme icône (H pour Hexo, MM pour Middleman, etc.). Alors peut-être devrions-nous faire quelque chose autour du « G » ? Alors un monogramme G art-déco en quelque sorte ?

Ouais, ça pourrait marcher. Essayez des trucs et jetez des échantillons !

@KyleAMathews J'aime le style de police Poiret One . J'en ai aussi le G magnifique en tant que lettrage autonome (pour l'icône).

Voici une première idée :

Laissez-moi savoir ce que vous pensez!

@SachaG sympa !

De quelles polices s'agit-il ?

C'est Futura Bold.

Ne visez pas les fruits à portée de main : oui, bien sûr, le livre et le film sont une association évidente. Mais qu'est-ce qu'il y a de commun entre l'outil et le film ? Une façon d'accéder au logo est de démarrer à partir de moto.

Brandon Grotesque est une autre excellente option pour une police - inspirée de Futura et d'autres polices de style géométrique populaires dans les années 20-30. L'une des polices Web les plus populaires du moment. Serait idéal pour les en-têtes ou le corps sur place.

https://typekit.com/fonts/brandon-grotesque

@SachaG J'adore ce simple G pour le logo carré !

@rgbkrk a accepté ️

@SachaG tu as un peu de temps pour jouer avec le design ? Je pensais qu'un bon endroit pour essayer votre design serait notre avatar Twitter qui est actuellement assez hideux. Que pensez-vous de prendre votre monogramme et de le coloriser un peu et je le mettrai sur Twitter ? Je vais commencer sur le site cette semaine et je vais donc jouer avec quelques idées de design que je vais partager.

@SachaG Wow, j'adore ce logo.

OK, je vais travailler sur quelque chose :)

Aviez-vous une couleur spécifique en tête ? Que diriez-vous quelque chose comme ça?

Edit : version PNG recadrée ici : https://cl.ly/hboi

SVG :

• https://cl.ly/hbTv
• https://cl.ly/hbjr

Essayer des couleurs similaires au film pourrait être sympa. Cette page a de bonnes choses
http://vintagedancer.com/1920s/fabrics-and-colors/
Le mer. 28 sept. 2016 à 18:41 Sacha Greif [email protected]
a écrit:

SVG :

• https://cl.ly/hbTv
• https://cl.ly/hbjr

-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/gatsbyjs/gatsby/issues/408#issuecomment -250348924,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AAEVh3Dmlxhhi5oymDM46nXELO_EpgBkks5quxdRgaJpZM4JuuKY
.

J'y ai pensé mais j'ai pensé qu'il vaudrait peut-être mieux utiliser l'esthétique propre et moderne de la "bibliothèque JS" (https://facebook.github.io/react/, http://horizon.io/, etc.) plutôt que d'y aller tout sur le style rétro.

Bien que je suppose qu'un mélange de bruns/roses/oranges pourrait fonctionner s'il n'est pas trop lourd ? En fait, j'utilise un schéma de couleurs similaire sur http://stateofjs.com

Juste mes deux cents ici. Je pense que @SachaG a raison avec l'esthétique épurée. Gatsby devrait bien s'intégrer aux autres parties de l'écosystème (à savoir React, Webpack et GraphQL). Dans tous les cas, si nous devions opter pour un look vintage, une police plus rétro aurait plus de sens.

Voici une palette de couleurs plus rétro (pas nécessairement pour ces couleurs spécifiques, mais juste pour une idée générale) :

Au fait, en ce qui concerne la police du logo, je pense que nous devons rester avec Futura, sinon cela ne correspondra pas au "G" du monogramme.

Cela ne signifie pas que nous ne pouvons pas utiliser une autre police pour le corps du texte. Par exemple j'aime bien Montserrat :

https://fonts.google.com/specimen/Montserrat

f92672 sur #21232d pourrait aussi être joli

Que diriez-vous d'utiliser une police à espacement fixe pour le corps du texte ? Gatsby sera principalement utilisé pour les blogs et les sites de documentation. La police utilisée par iA Writer est époustouflante.

J'aime les polices à espacement fixe pour les titres, mais elles ne sont pas très lisibles pour le corps du texte à mon humble avis. Vous remarquerez qu'iA n'utilise pas de police à espacement fixe pour son blog, même s'il l'utilise dans l'application.

Essayer :-) https://twitter.com/gatsbyjs/status/781360858467213312

Voici une version légèrement modifiée avec des couleurs plus contrastées :

Et PNG de la seule version orange : https://cl.ly/hbRC

BTW c'est drôle, d'une manière ou d'une autre mes conceptions finissent toutes avec le même schéma de couleurs orange et beige… voir http://sachagreif.com/ , http://www.communitybuildingguide.com/ et http://www.patternify .com/

Je suppose que c'est bien d'avoir un style :)

Je ne sais pas si nous devons conserver l'esthétique de React, etc. Je n'ai pas l'impression qu'une tonne de réflexion a été consacrée à leur image de marque et il y a aussi beaucoup de valeur à avoir quelque chose de distinctif. Gatsby est déjà un nom / une esthétique assez distinctif, alors je dis continuons à courir avec.

@SachaG sympa ! Je vais le télécharger à nouveau sur Twitter pour une définition plus élevée.

J'ai l'impression que https://middlemanapp.com/ est un bel exemple d'un schéma de couleurs plus discret et moins "startupy" avec leur couleur moutarde. Vous avez changé d'avis, je pense que cela vaut la peine d'explorer cette direction aussi :) Il a définitivement plus de personnalité.

Plus d'inspiration ;)

@SachaG ouais :-) c'est amusant/efficace d'entrer dans un bosquet et de rouler avec pendant un moment.

Sur les polices, totalement cool avec Futura. Typewolf propose comme appariement de polices, la Nouvelle-Calédonie que j'aime assez. Cela nous coûterait 140 $ pour les polices 400/400i/700/700i, mais nous pourrions utiliser de l'argent OpenCollective pour cela - https://opencollective.com/gatsby

@f0rr0 J'aime beaucoup Space Mono parmi les monos https://medium.com/google-design/introducing-space-mono-a-new-monospaced-typeface-by-colophon-foundry-for-google-fonts-84367eac6dfb#. h1cyt77cq

Anonymous Pro est cool aussi par le même designer derrière Proxima Nova https://www.typewolf.com/site-of-the-day/fonts/anonymous-pro

Oui, j'ai utilisé Space Mono pour https://crater.io/ et http://stateofjs.com/. Convenez qu'Anonymous Pro a l'air bien aussi !

En fait voici un site jumelant Futura et Anonymous Pro : https://www.typewolf.com/site-of-the-day/per-sandstrom

@SachaG ouais - j'aime beaucoup Middleman aussi. Quelque chose d'un peu décalé et avec plus de personnalité conviendrait à mes goûts.

Aussi plus stratégique - j'ai l'impression que Gatsby peut trouver beaucoup de traction au-delà de la foule des premiers utilisateurs de React.js. Les designers, agences web, développeurs hobby du monde. Quelque chose qui n'est pas si "Je suis une bibliothèque JS" serait plus accessible et convivial.

Poppins (une police Futura-esque) et Anonymous Pro sont jolis ensemble - essayez-les sur http://kyleamathews.github.io/typography.js/

Oooh j'adore les nouvelles couleurs @SachaG et la marque, très jolie 👍

Je pense qu'une police à espacement fixe est peut-être trop technique, mais vous devez alors être capable d'écrire Markdown pour utiliser Gatsby, alors c'est peut-être une hypothèse juste…

@mxstbr avec la nouvelle couche GraphQL, vous pourrez écrire des articles dans des CMS hébergés comme Contentful ou même simplement utiliser Wordpress, etc. https://github.com/gatsbyjs/gatsby/issues/420

Nous pourrons également faire des choses folles comme utiliser Trello comme CMS https://changelog.com/trello-as-a-cms/

Ah oui, alors je n'irais certainement pas avec une police monospace pour ne pas invoquer ce sentiment de code-y.

@KyleAMathews Anonymous Pro a fière allure si nous décidons d'utiliser le monospace, imo, cela a l'air technique car nous avons l'habitude de voir des polices monospace et de les associer à du code. Pour une personne non technique, cela ressemblerait à une autre police et une police soignée.

Ceci est Brown - il a l'air convivial et accessible tout en restant traditionnel à certains égards https://lineto.com/The%20Fonts/Font%20Categories/Text%20Fonts/Brown/

@ArchieHicklin J'ai tellement aimé ça. Vous pouvez mettre un effet de contour comme celui-ci

Playfair Display pour les en-têtes + Futura pour la police du corps est plutôt sympa.

Et ajouter une police à espacement fixe au mélange est également cool. C'est Space Mono :

Ca a l'air sympa ! Je serais curieux de voir à quoi ça ressemble avec la palette rétro aussi.

que diriez-vous de plus mignon? ??

@SachaG

@ArchieHicklin haha ! As-tu dessiné ça ? Ce serait hilarant de le voir apparaître tout au long de la conception. Un petit complément fantaisiste.

Ou peut-être un peu dans le cadre de petites légendes utiles – il pourrait être le majordome ou tout autre élément donnant des indices.

Voici le svg http://imgh.us/gatsbysvg.svg - peut-être peut-être même ajouter un feu vert sur un quai de l'autre côté de la baie 😂 @KyleAMathews oui vient de le faire dans Sketch lors d'une pause déjeuner.

un feu vert à coup sûr.

Les couleurs de

@ArchieHicklin J'adore le personnage ! Je peux tout à fait le voir apparaître sur tout le site offrant des conseils utiles :)

@SachaG Haha - merci ! J'adore la façon dont http://emberjs.com/ fait ça ! Fournit une belle voix de conception

Ajusté les couleurs pour le code à nouveau ce matin pour s'assurer qu'elles étaient suffisamment contrastées (4.5 est la ligne directrice générale - utilisez http://leaverou.github.io/contrast-ratio/#%23b55021-on-white pour tester). Une bonne façon de le faire est de manipuler la luminosité des couleurs dans l'espace colorimétrique LAB (correspond à la façon dont les humains perçoivent les couleurs mieux que les autres espaces colorimétriques) - en utilisant http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker pour cela.

Je vais bientôt créer une première version pour l'essayer en direct. Je peux donc le reproduire : fontSize : 16, lineHeight : 1,42, scaleRatio : 2,5, playfair display, futura, space mono, headerGray : 20, bodyGray : 30, link color : #367f8a, code background : rgba (246, 224, 196 , 0,38), chaîne hljs : #b55021.

Quelque chose que je me demandais - devrions-nous utiliser ce blanc cassé couleur orange comme l'arrière-plan pour la chose? Ou garder un fond blanc ?

Nous pourrions l'essayer à coup sûr - une chose intéressante à propos de l'utilisation de https://www.netlify.com/ pour l'hébergement (comme je prévois de le faire) est que lorsque vous faites un PR, il reconstruit le site avec vos modifications, donc c'est facile d'essayer quelque chose d'expérimental et de le partager pour obtenir des commentaires. Je pense que je vais commencer par le blanc mais oui, je serais curieux de voir si un fond coloré fonctionne. Ember fait ça et ça marche.

Oh c'est plutôt cool. J'utilise Heroku et maintenant GH Pages pour mes sites statiques, mais je vérifierai Netlify la prochaine fois.

J'avais juste une idée, peut-être pourrions-nous utiliser le nouveau Figma pour faire une session de conception collaborative en direct autour de l'identité/page d'accueil de Gatsby ?

Je serais d'accord pour ça ! La semaine prochaine est assez libre pour moi.

Si vous souhaitez vous joindre à nous, choisissez des moments où vous seriez disponible — http://doodle.com/poll/tnf6tyu3my7ez3y6

Assurez-vous de changer votre fuseau horaire si vous n'êtes pas en PST.

Planifions le mercredi de 19h à 20h PST.

J'ai créé une toile Figma pour que nous puissions utiliser https://www.figma.com/file/cdetTt0bxTyIYVJMJdNZKVm1/Gatsby Fill gratuitement pour commencer à ajouter des trucs avant mercredi :-)

Je vais créer un lien Google Hangout et le poster ici avant que nous puissions l'utiliser pour parler.

amusement nostalgique
En outre , comme l » idée de la mascotte @ArchieHicklin Mackey mc, garder le cœur léger

J'ai ajouté une police de caractères art-déco au tableau figma

Voici le lien des hangouts - je serai dans une heure et demie environ https://hangouts.google.com/call/4ro2xvkn6rco3avensilb77nlue

Super! S'agit-il d'un lien de Hangout public ? Ce serait génial de le diffuser en direct dans le monde :)

Bonne idée! Voici un lien de diffusion en direct — ignorez le précédent https://hangouts.google.com/call/kzovtzb4urdx7cijeiwft6z6mqe

Quel est le lien public si les gens veulent juste regarder mais pas participer ?

Ceci (je pense) http://youtu.be/uGQ3YCvK3fM

Pour info, ce lien fonctionne.
??

Le mercredi 5 octobre 2016 à 21h34, Kyle Mathews [email protected]
a écrit:

Ceci (je pense) http://youtu.be/uGQ3YCvK3fM

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/gatsbyjs/gatsby/issues/408#issuecomment-251845766 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AALns0S8BCn1Ze2VDJueQHi3pJNeL3O-ks5qxFAUgaJpZM4JuuKY
.

David Landry

participer : https://hangouts.google.com/call/ammh5lzslbfyjdpkf6gk5v4p54e

voir : http://youtu.be/BY9Jv1gWFwY

Salut tout le monde! Je voulais juste partager une idée que j'avais pour le logo. Mon idée est d'avoir la lettre 'G' avec des icônes représentant le processus de construction (Fichiers -> Webpack -> Loaders -> Static HTML) intégrée dans le chemin du G. J'ai créé une image rapide pour mieux transmettre l'idée, avec les cercles représentant où les icônes iraient.

Je pense que cela a l'air futuriste et transmet Gatsby rapidement.

Il s'agit d'une itération sur le logo flèche/futura G.
Je ne suis pas douée pour la couleur alors j'ai juste choisi le rouge/orange pour l'instant.

Je pense que la police de caractères « Brown » pourrait bien aller avec ce qui précède

http://www.colorhunt.co/ une excellente ressource pour les mélanges de couleurs

Salut tout le monde! Je parcourais vos plans de travail (ou l'analogue Figma des plans de travail) et je me demandais comment était l'expérience globale avec Figma et en particulier le processus d'exportation. Est-ce comparable à Sketch ?

@f0rr0 Je n'ai pas encore essayé d'exporter quoi que ce soit, mais dans l'ensemble j'ai beaucoup aimé Figma ! Très intuitif, assez rapide, et l'aspect live/collaboratif le rend idéal pour le brainstorming.

J'aime l'esthétique de https://github.com/gatsbyjs/gatsby/issues/408#issuecomment -250372331 bien que la police me fasse immédiatement penser à Google, mais cela m'a donné une idée que quelqu'un pourrait vouloir essayer de mettre en œuvre.

Cette pièce derrière le G devrait ressembler à des papiers en désordre, puis à l'intérieur, la pièce horizontale du G pourrait être utilisée comme rebord pour contenir une pile de papiers. Je ne suis pas sûr que cela fonctionnerait comme une icône plate, vous devrez peut-être créer le G 3D et modifier l'angle de vue.

@SachaG pouvez-vous partager la version vectorielle de votre logo ? j'aimerais essayer quelques variantes - excellent travail !

@eliwilliamson voir https://github.com/gatsbyjs/gatsby/issues/408#issuecomment -250348924

Et si vous mélangeiez la couleur de ce https://cloud.githubusercontent.com/assets/1271434/19060757/b23e3c1c-899f-11e6-8541-b08564309ce4.png
Avec le caractère gentleman et utilisé la police futura ?

@mdxprograms

@ArchieHicklin oui !!! c'est exactement ce que je pensais. bon travail

Salut l'équipe, je voulais me présenter correctement et parler un peu d'un concept de teaser de site v1 dont @KyleAMathews a discuté l'autre jour. Je m'appelle Eli et je suis le directeur créatif de @netlify - chez Netlify, nous pensons qu'il est important de soutenir les projets open source de toutes les manières possibles. Comme je n'ai pas le talent en arrière-plan que Kyle et d'autres ont, j'ai pensé que je pourrais contribuer au design. Kyle et moi nous sommes rencontrés l'autre jour pour discuter de choses et nous avons tous les deux convenu qu'avec la sortie de Gatsby 1.0 au coin de la rue, nous devrions obtenir une simple page d'accroche - en plus, une bibliothèque de documents pour une référence facile. En discutant avec Kyle, nous avons découvert que nous pouvions continuer avec ce motif des années 20 dans la page teaser. Nous nous sommes spécifiquement inspirés des anciennes publicités de voitures Packard Co.. Cela dit, je prévois de travailler sur des simulations lundi qui devraient nous préparer à lancer quelque chose très bientôt. Avant de commencer, je voulais ouvrir une discussion autour d'autres points d'inspiration. N'hésitez pas à noter certains sites ou designs qui font bien les choses que nous devrions considérer dans cette initiative. Merci!

@eliwilliamson souhaite la bienvenue à Eli ! J'attends vraiment votre aide avec impatience !

J'ai passé la matinée à préparer une première version du site Web avec les idées de coloration/typographie dont nous avons discuté dans le passé https://gatsbyjs.netlify.com/

Aimerais entendre vos pensées! N'hésitez pas à cloner le repo et commencez à jouer avec des idées. Le site se trouve sous le répertoire www sur la branche 1.0. Les pages de documents résident dans le répertoire docs .

@KyleAMathews, j'explorais ce concept rétro et je beaucoup amusé, mais j'ai trouvé la palette un peu limitée, car les sites présentant des sites nécessitent quelque chose d'un peu plus monochrome pour prendre en charge les couleurs variables d'une vignette. Après une v1 qui penchait un peu trop littéralement vers le motif des années 20, je pense que la v2 est un heureux compromis entre le logiciel moderne (la nature inhérente de gatsby) et un clin d'œil/motif rétro. Découvrez-le ci-dessous et dites-moi ce que vous en pensez! Ce qui fonctionne, ce qui ne fonctionne pas, etc.

Très cool Éli ! Cette voiture là-bas est incroyable :D Votre point de vue sur le Monogram est également très agréable. Se sent un peu plus art déco que notre actuel.

J'aime beaucoup la palette et les fonds en détresse. Je peux voir ce que vous voulez dire par le fait qu'une palette plus monochrome fait apparaître davantage les sites d'exemples, ce qui est vraiment important.

Si cela ne vous dérange pas, pourriez-vous partager votre v1 ? C'est agréable de voir toutes les idées sources car cela pourrait aider à susciter plus d'idées dans le reste d'entre nous.

Quelles polices utilisiez-vous ? Pourriez-vous essayer une révision en utilisant Futura/Playfair Display/Space Mono ? Ou que pensez-vous de leur apparence sur https://gatsbyjs.netlify.com/docs/old-readme/?

Vous pouvez laisser tomber le "Coming Soon!" — Je suis presque sûr que cela ne sera pas lancé avant le lancement de la version 1.0. Le site Web sera utilisé pour les documents 1.0 mais ne sera pas publié avant le lancement 1.0.

Veuillez également laisser tomber le "avec netlify" :-) nous apprécions vraiment votre aide mais nous ne pouvons élever aucun sponsor aussi haut. C'est aussi déroutant car Gatsby est indépendant de l'hôte. Je pense qu'il y aura une section "sponsors" plus bas sur la page pour votre logo et celui d'autres entreprises/organisations.

J'aime beaucoup la section « démarrage rapide », mais je pense que nous devrions avoir un slogan et un peu de verbe expliquant pourquoi Gatsby est cool en premier, comme le site Web de Jekyll https://jekyllrb.com/ C'est le slogan que nous avons utilisé « Transform plain texte dans des blogs et des sites Web dynamiques à l'aide des dernières technologies Web. Un générateur de site statique React.js. À déterminer si nous allons le garder, mais essayez de l'ajouter ?

J'aimerais entendre les pensées des autres! Ce n'est certainement pas mon domaine d'expertise :-)

Excellents commentaires @KyleAMathews par votre demande voici ma v1 qui n'avait pas tout à fait un bon équilibre à mon

J'utilisais Futura (moyen et gras) pour les cas de logo et d'utilitaires, signpainter pour les commentaires des années 20 (...les genoux d'abeille, etc.), Big Caslon pour plus de polices d'affichage dans le contenu, et enfin ma police mono système pour les cas de code. Je vais essayer une version avec les polices que vous avez mentionnées ci-dessus.

Je m'assurerai de supprimer le commentaire "à venir", de déplacer la promotion de netlify ailleurs et d'ajouter le texte de présentation gatsby au-dessus de la section "démarrage rapide".

Restez à l'écoute...

@KyleAMathews découvrez cette dernière itération. Je pense que cela ressemble plus à ce que vous recherchez. J'ai également inclus une alternative qui montre la même maquette en utilisant simplement les polices que vous avez suggérées. TBH, j'étais fatigué que playfair soit un peu trop ludique pour une police utilitaire, mais il _fait_ bien comme police d'affichage pour la copie d'introduction IMO.

V3

V3 avec les polices sélectionnées par kyle

s'il vous plaît laissez-moi savoir quelle composition vous préférez et s'il y a d'autres changements de fin. Si tout va bien, je traduirai ce langage de conception en une simple page de documentation. donne moi juste le

Joli! Ouais, allons-y avec Playfair - c'est l'un de mes préférés et notre budget de polices pour ce site était déjà consommé pour Futura :-) (bien que Libre Caslon soit sympa aussi)

Varions un peu la taille du texte à gauche comme http://harpjs.com/

Remplacez la première section par « Créer des blogs et des sites Web dynamiques à l'aide des dernières technologies Web » et agrandissez-la.

À quoi pensiez-vous que le reste de la page d'accueil ressemblerait ? Conserver la couleur aquaish comme arrière-plan plus bas ? Passer à un fond blanc ? Cela vaut peut-être la peine d'explorer cela un peu plus.

Remplacez "sites sur gatsby" par "site utilisant gatsby". Vous n'avez probablement pas besoin de "afficher" dans le cadre de ces vignettes. Je suppose que ceux-ci cliqueraient sur une page avec des mini-études de cas sur le site. Vous avez également l'impression que la section des sites pourrait utiliser un peu plus d'espace entre elle et les éléments ci-dessus ? Peut-être. Semble un peu encombré.

Complétons également un peu le guide de démarrage rapide pour le rendre plus réaliste, par exemple

npm install -g gatsby
gatsby nouveau my-sweet-site
cd mon-sweet-site
gatsby développer

J'attends avec impatience votre avis sur la page des documents !

Lorsque vous publiez votre prise de page de documentation, pourriez-vous également publier le fichier de croquis ? Vous voulez essayer de convertir la v0.0.01 que j'ai créée vers vos nouvelles conceptions.

Il semble que nous manquions de temps pour une maquette de page de documentation aujourd'hui, mais je pense que la typographie, le remplissage et la palette de couleurs peuvent être extraits de la maquette de la page de destination (voir ci-dessous). Dans cette version, j'ai ajouté playfair à la place du présentoir. J'ai également mis à jour la description (à la fois en copie et en taille) et les commandes « démarrage ». Enfin, j'ai nettoyé la section « sites utilisant gatsby » pour qu'elle soit un peu plus propre et pour l'étendre sur un fond sombre (agréable et expansif pour ajouter des sections supplémentaires sur la route).

télécharger le fichier de croquis

Bon travail! J'aime la mise en page mais je dois admettre que je ne suis pas un grand fan de l'arrière-plan éclaté. Je choisirais probablement un fond uni avec une couleur plus claire, quelque chose de moins agressif. Je pourrais m'y essayer plus tard :)

Premier essai

Bonjour à tous, voici ma première tentative de logo. Je suis toujours à la recherche d'une police qui va avec l'ensemble de l'esthétique. Faites-moi savoir si je dois continuer dans cette direction.

À votre santé,
Yogesh

le g me rappelle google pour une raison quelconque mais j'aime la simplicité et la couleur

J'adore le jaune/or sur le fond noir de la dernière maquette, bien que je convienne que la section bleue semble un peu gênante. Je pense que le logo que @SachaG a fait est parfait. Il a une ambiance intemporelle. Je ne suis pas un grand fan de Playfair associé à Futura. Je recommanderais quelque chose de style didoni. En voici un que j'ai un peu creusé : https://fonts.google.com/specimen/Prata

@gregcorby Prata est sympa ! https://prata--gatsbyjs.netlify.com/docs/old-readme/ par rapport à l'affichage Playfair existant https://gatsbyjs.netlify.com/docs/old-readme/

Prata :

Jouer franc jeu:

Un autre didot open source est Computer Modern Serif (conçu pour Tex et utilisé partout dans les articles mathématiques/scientifiques) http://checkmyworking.com/cm-web-fonts/

Salut tout le monde! Voici une autre contribution au logo Gatsby. (Écrit à la main/calligraphié dans Illustrator)
Ce n'est qu'un brouillon et a besoin de quelques réglages. Laissez-moi savoir ce que vous pensez

Salut les amis, dans le cadre de la préparation d'une nouvelle version majeure (alpha 11) qui prolongera mes ~2 derniers mois de travail, j'ai pris une autre chance de jouer avec la typographie/les couleurs du site Web. J'aimerais entendre ce que vous en pensez!

https://unist-graphql--gatsbyjs.netlify.com/docs/old-readme/

Je suis assez content maintenant de la typographie. J'ai récemment utilisé https://www.typographychecklist.com/ sur certains sites clients et l'auteur désapprouve l'utilisation de Futura comme police de corps. J'ai donc déplacé cela pour être la police d'en-tête et utilisé pour la police de corps TeX Gyre Schola - une renaissance open source de Century Schoolbook - un serif moderne du début du 20e siècle qui se marie bien avec Futura. https://www.fontsquirrel.com/fonts/TeX-Gyre-Schola

Bien que je sois un peu compétent maintenant en typographie, je ne fais que m'amuser avec les couleurs. J'ai utilisé http://davidjohnstone.net/pages/cubehelix-gradient-picker#23 ,8,1.11,1.12,1,0.1,0.95 pour choisir différentes couleurs mais j'aimerais que quelqu'un d'autre essaye de choisir les couleurs pour les divers éléments.

Si vous voulez jouer avec le site, consultez la branche unist-graphql. La typographie et les couleurs sont définies dans https://github.com/gatsbyjs/gatsby/blob/unist-graphql/www/utils/typography.js

Le changement de nom est-il envisagé ? :)
Je ne sais pas pour vous, mais pour moi, Gatsby est souvent difficile à épeler correctement sans trop réfléchir. J'ai une idée de nom - je l'ajouterai si le changement de nom est une option.

Non... pas à ce stade. C'est un peu trop vieux et bien connu maintenant. Peut-être
ajouter un alias à votre shell aiderait?

Le samedi 25 février 2017, à 10h00, Radu Brehar [email protected] a écrit :

Le changement de nom est-il envisagé ? :)
Je ne sais pas pour vous, mais pour moi Gatsby est souvent difficile à épeler correctement
sans trop réfléchir. J'ai une idée de nom - je la jetterai si
renommer est une option.

-
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/gatsbyjs/gatsby/issues/408#issuecomment-282500773 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AAEVh5lLkQxrApWrJwzsPEMWbsMDzjLcks5rgGwsgaJpZM4JuuKY
.

Puis-je suggérer plus d'interligne pour la faute de frappe? Ou peut-être simplement plus d'espaces blancs en général ? Semble un peu à l'étroit.

Vous acceptez toujours les suggestions de logo ? Si c'est le cas, voici une approche "moderne", basée sur la notion de ligne de commande, etc.

@YoungElPaso à quoi faites-vous référence ? Le site Web ?

Tout le monde a eu d'excellentes soumissions et je suis sur mon troisième site de production Gatsby, donc je suis tellement reconnaissant pour le travail que @KyleAMathews a fait. ??

Ma suggestion pour le site (sans tout repenser) serait de le supprimer tout de suite . Le site est superbe pour l'instant mais il y a quelque chose qui cloche. J'ai l'impression (à juste titre) que tout le monde cherchait à intégrer Gatsby dans ce thème art déco avec le logo et l'identité.

Je trouve ça superbe et j'adore le logo de @SachaG . Mais j'ai aussi l'impression qu'en cours de route, l'identité du site Web est désormais liée au logo. Bien que cela semble rationnel, je ne pense pas que ce soit le cas.

Kyle a dit lui-même que Gatsby avait été choisi comme nom principalement parce qu'il n'avait pas été pris en npm. C'est un nom de dope, mais je pense que ce qui manque, c'est que l'identité du site Web devrait représenter pourquoi les gens utilisent Gatsby. Le site est une vitrine du produit.

Gatsby est minimal, il se développe rapidement et s'éclaircit rapidement. Vous pouvez montrer Gatsby à une personne non technique et elle comprendra pourquoi il est utilisé (je parle par expérience d'avoir réellement fait cela ! Essayez ceci avec d'autres frameworks lol...)

Je m'excuse d'avance car je sais que ce sera une suggestion impopulaire, mais j'abandonnerais la plupart des couleurs. Concentrez-vous sur le texte (c'est pourquoi la plupart des gens visiteront le site) et sur la façon la plus propre et la plus claire de l'afficher.

je passerais à :

Arrière-plans blancs, séparant tous les segments avec des bordures de 1px plutôt que des changements de couleur, puis un noir uni pour les titres h, un gris pour les paragraphes ou les navigations inactives, puis un orange plus vif pour les éléments actifs, les boutons et le logo.

Désolé pour le bleu et le manque d'orange - je le faisais rapidement dans les outils de développement Chrome.

Aussi - si les probs utilisent un SVG pour le logo plutôt qu'un png lorsqu'il est officiellement lancé - les visiteurs n'ont pas besoin de le mettre en cache.

Joli. Personnellement, je suis attaché au logo, mais en ce qui concerne les couleurs, je pourrais aller dans les deux sens.

@ArchieHicklin intéressant ! Je ne suis pas attaché à l'identité couleurs/polices/art déco en soi mais je veux vraiment que Gatsby ait une identité forte et unique. Mon souci de "dépouiller les choses" est qu'il est trop facile de retomber dans une sorte de look & feel minimaliste générique qui aurait l'air simple et agréable mais qui ressemblerait à tout le reste...

Souhaitez-vous faire une brève RP pour explorer davantage ce que vous pensez ?

De plus, Futura n'est pas une excellente police de corps, alors gardez ce que j'utilise ou choisissez une autre police qui va bien avec Futura et qui est plus lisible pour beaucoup de texte.

Je suppose qu'en y réfléchissant un peu plus, je serais un peu prudent avant de m'éloigner de l'Art déco. Gatsby est un nom très connu et beaucoup de gens l'associent à ce style. Nous obtenons donc un grand coup de pouce en nous associant également à ces idées de conception. Il y a beaucoup de bonnes choses sur les années 20 auxquelles nous pouvons nous associer, par exemple c'était une période de confiance et de croissance technologique rapide, etc. Les gratte-ciel en flèche étaient nouveaux ainsi que les voitures, les avions, etc. Beaucoup de motifs intéressants que nous pouvons utiliser sur le site Web et exemples de sites.

Je suis tout à fait d'accord qu'il y a encore quelque chose de "off" sur le site. Je ne suis qu'un designer passable, donc je peux faire les choses plutôt bien, mais mon intuition en matière de design me fait défaut pour les 15 à 20% derniers.

Je pense que @ArchieHicklin est resté fidèle à ce que veut un utilisateur, un site propre et bien conçu axé sur le contenu plutôt que sur la marque. Le site

J'aimerais suggérer une approche qui crée de la place pour un design distinctif sur la ou les pages de destination/de marque tout en conservant un sens de la simplicité et de la subtilité dans les documents (où la fonction l'emporte vraiment sur la forme).

Ce n'est pas mon idée, je la tire de ce site qui, je pense, trouve un bon équilibre : https://www.atlassian.com/git (branding)
https://www.atlassian.com/git/tutorials/learn-git-with-bitbucket-cloud (docs)

Plus précisément, je préfère l'utilisation de la couleur dans ces blocs de code (https://cloud.githubusercontent.com/assets/71047/18999381/1ed78c30-86f2-11e6-8bcf-f06862b1fd10.png) à l'approche plus omniprésente dans la conception actuelle .

(Je refait mon site personnel à Gatsby maintenant, très excité pour la 1.0 et l'utilise pour des projets clients 👍 )

@KyleAMathews Vous avez mis le

Conservez définitivement les motifs - une excellente façon de le faire serait d'utiliser une iconographie forte avec ce style des années 1920, ou encore mieux, une iconographie moderne qui utilise les composants des années 1920 que vous avez mentionnés comme moyen d'illustrer les arguments de vente de Gatsby (c'est-à-dire les premières voitures Ford pour agir comme motif visuel pour la précache, le développement/l'architecture de gratte-ciel des années 20 comme motif visuel pour la construction avec des composants, etc.)

Je dirais que si c'est la direction dans laquelle vous voulez aller, alors allez-y et dites clairement que c'est le motif de conception. Je ne pense pas que le combo beige et type actuel ne donne pas du tout cette ambiance bien que je puisse me tromper.

@eliwilliamson était

Je ne pense pas que ce soit loin de ce que @ryandeussing suggérait avec les liens Atlassian ? C'est propre et utilise des icônes pour ajouter de l'humanisme à la documentation.

Peut-être pourrions-nous chercher à faire la même chose, mais avec des icônes sur le thème des années 1920 à la place ?

En ce qui concerne la typographie - Futura PT peut avoir l'air bien lorsqu'il est créné et espacé correctement https://www.ableton.com/en/help/ mais je suis d'accord qu'il n'a pas l'air bien comme police de corps à moins que vous ne l'utilisiez vraiment correctement.

Je ne suis pas du tout lié au design actuel. Je ne me considère pas comme un grand designer. J'aimerais voir des propositions de conception plus concrètes, par exemple créer un PR modifiant la conception. Ma seule exigence est que nous travaillions vers une marque unique et cohérente et qu'il y ait des liens avec les idées de design existantes autour de "Gatsby" et de New York des années 1920.

Nous nous approchons d'une version 1.0, donc si quelques personnes veulent se lancer et la posséder, c'est le moment !

Bon débat ! Vous savez quel est un bon symbole que les personnes plus orientées vers le design pourraient envisager, par exemple l'iconographie ou autre, et de The Great Gatsby, mais pas l'art déco : le feu vert.

https://s-media-cache-ak0.pinimg.com/originals/b6/c2/ef/b6c2ef876f35a8e15842327ecd0cfa40.jpg

Jetez simplement cela comme quelque chose à considérer pour la couleur, l'image de marque, l'icône ou autre.

Voici un croquis ultra rapide. Essayer de garder quelques idées à l'esprit : propre, minimal, ambiance années 20, évolutive. Je ne suis pas sûr d'avoir couvert tout cela, mais j'essaie de le garder libre.

NB: j'ai obtenu l'icône de l'ampoule sur https://www.autodraw.com - une ressource super sympa pour esquisser des choses.

Salut tout le monde! Je viens de terminer une grosse révision du design de gatsbyjs ! Découvrez-le sur gatsbyjs.org. A fait un numéro de suivi pour discuter de la proposition de @SachaG pour la conception de la page d'

J'aimerais toutes vos pensées! https://github.com/gatsbyjs/gatsby/issues/1173

Hé les gars, j'ai découvert Gatsby il y a quelques jours et j'ai appris à créer mon propre site Web avec. Gatsby a été super génial jusqu'à présent. Je voulais dire : la marque Gatsby et la conception du site Web (et le framework JS bien sûr) sont absolument de premier ordre, j'adore ça !! Merci pour le bon travail! ??

Ok, le travail initial de branding + logo est terminé. Excellente équipe de travail :-) Archiver ceci (travailler sur le nettoyage des problèmes) mais n'hésitez pas à créer de nouveaux problèmes pour discuter des travaux futurs pour lesquels vous souhaitez aider.

PS allez voir le design du t-shirt de https://github.com/gatsbyjs/gatsby/issues/1500#issuecomment-347031574