Ernest Journal

Lorsque vous travaillez dans le design pour une durée indéterminée, il est naturel de créer des habitudes. Il n’est pas inhabituel de suivre un processus prévisible ou d’utiliser des schémas familiers. Cette répétition peut être fabuleuse pour votre productivité, mais lorsque chaque conception ressemble beaucoup à votre dernière, vous pouvez rapidement commencer à vous sentir blasé. Rester curieux est le meilleur remède contre ce sentiment.

Après avoir dirigé un petit studio pendant dix-huit ans, ma fatigue était devenue accablante. Je redoutais chaque nouvelle notification par courrier électronique et chaque appel téléphonique. Alors que les projets clients offraient la possibilité d’être créatifs, ils épuisaient également mes réserves d’énergie et ma capacité à proposer des idées.

Pour quelqu'un dont les affaires – et l’estime de soi – reposaient sur ce que j’avais imaginé, c’était dévastateur. J’ai avoué à ma femme que j'étais épuisée, que je n'avais plus rien à donner et que je ne pouvais plus continuer car les affaires que nous avions lancées ensemble étaient devenues un fardeau. Je devais me ressourcer, renouer avec ma créativité et raviver mon enthousiasme pour le travail en design.

Quand une entreprise à Sydney m’offrait un poste intérimaire, je n’hésitais pas. Ils semblaient accueillants, le travail était intéressant et je voulais vivre en Australie. Plus important encore, le temps passé m'a permis d'explorer des aspects du design qui étaient nouveaux pour moi, loin des pressions accablantes que j'avais ressenties lorsque je dirigeais mon entreprise.

Travailler en Australie signifiait trouver des moyens créatifs de vendre les produits et les produits de la société. services, ainsi que l'exploration de nouvelles approches pour la conception des produits eux-mêmes. J'étais curieux de savoir si le graphisme et la narration visuelle pouvaient rendre un produit numérique plus convaincant.

Comme j'avais étudié les beaux-arts et non la direction artistique ou le graphisme, je connaissais très peu ses principes, ses noms célèbres ou son histoire. J'avais hâte d'apprendre et, avec la pression exercée par la gestion de mon entreprise, je disposais de l'énergie et du temps nécessaires pour étudier. J'ai commencé une collection de magazines, étudié des livres sur la direction artistique et le graphisme, et découvert des directeurs artistiques, notamment Alexey Brodovitch, Neville Brody, Bea Feitler et Tom Wolsey. Leur travail m'a fasciné et je me demandais pourquoi nous voyons si peu la même chose en ligne.

Cette curiosité m'a emmené dans des directions inattendues et ma tête a rapidement débordé d'idées. Alexey Brodovitch et Bea Feitler ont appris à combiner les images et le texte de manière plus excitante. J'ai recueilli des conseils sur la façon de donner plus d'impact à mes conceptions typographiques de Neville Brody, et Tom Wolsey m'a appris à rendre plus intéressant même le plus petit élément de conception. J'ai étudié les principes de mise en page et de mise en page de magazines et au lieu de les copier, j'ai trouvé le moyen de les adapter pour le Web afin de rendre les présentations de produits et de sites Web plus attrayantes.

Time away m'a permis de retrouver mon enthousiasme pour le design. Bien que tomber dans des schémas prévisibles – de comportement et de conception – reste tentant, depuis que je suis rentré chez moi, je me suis rendu compte de l’importance de rester curieux, d’étudier d’autres médias et de garder l’esprit ouvert aux leçons que nous pouvons en tirer. 19659010] Revues du magazine Ernest Journal « />

Curiosity garde l'esprit créatif ouvert à de nouvelles possibilités, et c'est en cela que réside le magazine Ernest Journal – l'inspiration de ce numéro.

Andy Clarke
de juillet 2019

1. Décisions de conception inspirées: Avaunt Magazine
2. Décisions de conception inspirées: Des questions pressantes
3. Décisions de conception inspirée: Ernest Journal

Ernest Journal: Curiosity And Adventure

Malgré son format plus petit, lors de ma dernière visite dans mon magasin de magazines préféré, j'ai été attiré par Ernest Journal. Ernest est «un journal pour les esprits curieux. C'est fait pour ceux qui aiment les voyages surprenants et sinueux, stimulés par la curiosité plutôt que par l'adrénaline et guidés par des rencontres fortuites. "

Lorsque vous ouvrez Ernest Journal pour la première fois, vous êtes immédiatement attiré par son contenu, plutôt que par son contenu. conception. Il existe de belles photographies et des graphismes saisissants qui sont souvent présentés assez grands pour s'étendre d'une page à l'autre.

Le dessin d'Ernest Journal est simple, mais pas minimal. Il tire le meilleur parti d'un petit nombre d'actifs, en particulier de ses deux polices de caractères dominantes, Freight Big Pro et Gill Sans Nova.

Freight Big Pro est une police de caractères à contraste élevé conçue par Joshua Darden – le fondateur de la fonderie de caractères Darden Studio – qui a également conçu Jubilat et Omnes, deux polices que j'utilise régulièrement. Freight Big Pro est une famille de douze styles et comprend de nombreuses fonctionnalités OpenType, notamment de superbes ligatures, une fonctionnalité utilisée par Ernest Journal pour les titres et même son logotype. Bien que Gill Sans n’ait jamais été un de mes favoris, les concepteurs d’Ernest Journal l’utilisent bien dans les titres d’actualité et d’autres détails typographiques.

L’agencement d’Ernest Journal se compose principalement de deux et trois colonnes, mais c’est leur utilisation réfléchie. , ce qui aide le design dans l’ensemble à se sentir connecté, malgré la diversité des contenus et des styles du magazine.

Ernest Journal est un excellent exemple d'utilisation de la couleur et de la typographie pour créer de la cohérence dans l'ensemble d'une publication. En même temps, en choisissant des couleurs à partir de graphiques et de photographies à utiliser pour les titres, les citations à tirer et d’autres détails, leurs concepteurs associent cette conception globale à des histoires individuelles. Ernest Journal raconte des histoires encore plus engageantes.

Magazine Anatomy

Le groupe de travail sur la technologie des applications hypertextes Web (WHATWG), dont le nom n'est pas si simple, a interrogé des milliers de sites Web avant de choisir des noms pour de nouveaux éléments, notamment en-tête et pied de page. Les magazines ont leur propre terminologie pour des parties d'une page que vous pouvez utiliser pour nommer des composants de produit ou de site Web:

La prochaine fois que vous passez devant un magasin, visitez un magasin d’Ernest Journal. Il est peut-être petit, mais vous le trouverez plein d'idées à utiliser pour votre prochain projet.

Inspiré de Ernest Journal

De nombreuses personnes attribuent à des frameworks, y compris Bootstrap, les mises en page homogènes que nous voyons trop souvent sur le Web, mais le problème vient de notre façon de penser, pas du cadre. La vérité, froide et dure, est que Bootstrap ne crée pas de conceptions sans imagination. Les concepteurs fainéants le font.

La majeure partie du contenu d'Ernest Journal est placée à l'aide d'une grille symétrique qui peut facilement être reproduite pour le Web à l'aide des douze colonnes d'un cadre. Le contenu est simplement présenté en utilisant un mélange de deux et trois colonnes. Cependant, contrairement à de nombreux sites Web construits à l’aide d’un cadre, les pages d’Ernest Journal sont intéressantes et variées. Il n’ya aucune raison pour que les cadres ne puissent pas être utilisés pour créer des mises en page aussi attrayantes que Ernest Journal. Il suffit de comprendre le schéma de configuration et l’imagination.

La variété est un élément essentiel du succès du design d’Ernest Journal, et c’est une leçon que nous pouvons appliquer aux produits et aux sites Web. Les concepteurs de livres utilisent des colonnes individuelles depuis des générations et les conceptions qui en découlent paraissent classiques. Les grilles avec deux colonnes symétriques se sentent bien. Ils peuvent contenir une quantité énorme de contenu sans devenir écrasant. Combinez un espace vide avec trois colonnes ou plus et vos conceptions prennent immédiatement une impression éditoriale rappelant une publication imprimée de qualité, comme Ernest Journal.

Designing With Frameworks

La Fiat 500 d’origine était une minuscule voiture qui impression sur l'industrie automobile. Il était extrêmement populaire et est devenu le modèle pour une génération de petites voitures. Pour cette conception de l'ascension de cette petite voiture emblématique, je souhaite faire la même impression en remplissant un grand panneau avec un titre et une image. Ce panneau occupe les deux tiers de la largeur de ma page – huit de mes douze colonnes. Le texte courant de droite occupe quatre colonnes et sa largeur est identique à celle du premier paragraphe opposé, équilibrant ainsi cette composition asymétrique.

En utilisant une variété de mises en page connectées mais variées, vous pouvez rendre les histoires plus attrayantes et garder les lecteurs intéressés. Ma conception suivante est basée sur cette même grille de douze colonnes mais est complètement différente. Ici, la grande image occupe six colonnes, la moitié de la largeur et toute la hauteur de ma page. Le texte est divisé en deux colonnes au centre, et les informations à l'appui, y compris une chronologie des modèles Fiat 500, correspondent à sa largeur, même si je le place dans un panneau beaucoup plus large.

Je sais que certains d’entre vous se demanderont comment adapter de telles conceptions à des écrans plus petits. Les colonnes de texte proportionnellement étroites n’ont pas de sens quand l’espace est limité, alors j’utilise toute la largeur de l’écran. Au lieu de demander aux gens de survoler une grande image, je place la Fiat 500 à côté d'un panneau de défilement horizontal.

Même en n'utilisant que deux ou trois colonnes symétriques, vous pouvez créer une variété surprenante de dispositions. Pour que votre conception se sente connectée et familière sur toutes ses pages, développez un système vous expliquant comment utiliser ces colonnes. Vous pouvez utiliser trois colonnes pour faire défiler le texte, ce qui donne à votre conception une impression éditoriale, et deux colonnes pour les images

Vous pouvez également utiliser des colonnes de texte jumelées pour une impression ordonnée et trois colonnes pour des images. Cette répétition accrue des formes aide la composition à se sentir plus dynamique.

Modifier le mode de positionnement des images sur trois colonnes constitue un moyen simple de varier l'aspect et la convivialité d'un dessin. Ma conception suivante définit une grande image sur les deux tiers de la page et une petite image dans le tiers restant. Mais les proportions des images ne sont pas aussi intéressantes que la position de la gouttière entre les images et la manière dont elle compense la gouttière entre les colonnes de texte en dessous.

Il reste encore de la place sur les écrans de taille moyenne pour une juxtaposition excitante de deux et trois colonnes. Mais qu'en est-il des petits écrans?

Des colonnes doubles de texte en cours n’auraient aucun sens avec une largeur aussi étroite, mais vous n’êtes pas obligé de sacrifier les avantages de l’espace, même réduit. Pour cette conception en petit écran, je place les images dans un panneau à défilement horizontal. Ensuite, j’utilise une colonne étroite pour mettre en retrait le texte en cours.

Conception de maquettes connectées

Dans le dernier numéro, je vous ai présenté l'artiste et typographe suisse Karl Gerstner, ainsi que le «réseau mobile» qu'il avait conçu pour présenter le contenu du magazine Capital de manière cohérente. et sans restrictions. Ces mêmes principes s'appliquent lorsque vous insérez un contenu inspiré d'Ernest Journal.

Un seul module – remplissant toute la largeur de la page – ralentit les gens et les encourage à s'attarder sur son contenu. Il n'est pas nécessaire d'utiliser chaque pixel, et je consacre un quart de cette composition à l'espace blanc pour donner à ce design une impression de luxe.

Quelque chose de rassurant à propos de la structure d'une disposition à deux colonnes, alors pour cette conception, je donne un espace égal à ces voitures classiques. Pour éviter que cette conception ne devienne prévisible, j'utilise des colonnes supplémentaires pour les voitures plus grandes et des gouttières pour décaler le début de mes titres et paragraphes.

Il est possible de pomper de l’énergie dans la structure d’un modèle symétrique à trois colonnes. Pour cette conception suivante, j'utilise ces trois colonnes de deux manières différentes, d'abord avec une vue de haut en bas de la Fiat 500, puis avec un module plus petit pour chacune des voitures restantes.

Grand aperçu )

Les conceptions utilisant des nombres impairs de colonnes et de lignes peuvent être fascinantes, en particulier lorsqu'elles sont disposées dans une grille modulaire. Cette conception demande de l’attention, non seulement parce que c’est intéressant, mais aussi parce qu’elle est très différente des autres pages. C’est un excellent choix pour interrompre le rythme de lecture et amener l’utilisateur à se concentrer sur un contenu particulier.

Contrôler le rythme de lecture

Le rythme auquel une personne navigue dans un produit ou un site Web est un facteur essentiel de son expérience. Ce principe est aussi utile sur l’écran plus petit d’un mobile que sur un écran plus grand.

La plus lente

Plus lent

Lent

Rapide

Plus rapide

Le plus rapide

Créer des liens

L'une des fonctionnalités les plus attrayantes d'Ernest Journal, et une technique que vous pouvez rapidement adapter aux sites Web que vous concevez consiste à utiliser une couleur d'accent prise à partir d'images. Vous pouvez utiliser des accents pour les titres, les guillemets, ainsi que d'autres typographies et détails pour les associer à des graphiques et des photographies.

Choisissez les éléments auxquels appliquer cette couleur d'accent, puis personnalisez-les sur votre site Web pour créer une continuité. Utilisez un seul accent – ou des teintes de cette couleur – par article pour donner à chaque style son propre style.

Dans ce premier article, je choisis un rose foncé parmi les lumières de la Fiat 500 et je l’utilise pour mon titre, mon titre, les dates de ma chronologie. Pour le deuxième article, je déguste un brun clair de la valise sur une photographie d'une autre Fiat 500. Il existe de nombreux outils disponibles en ligne pour vous aider à échantillonner les couleurs à partir d'images, mais mon préféré est toujours Adobe Color.

L'utilisation de gros blocs de couleur peut vous aider à distinguer les types de contenu, et choisir la même couleur pour les arrière-plans de panneau et les éléments typographiques tels que les lettrines permet de maintenir une connexion subtile entre eux. 19659022] J'utilise un brun foncé chaud pour ma lettrine, mon titre et ma citation, et à l'arrière-plan du panneau qui domine ces pages. Les contours jaunes dans l'illustration, les bordures et les titres dans la chronologie sont une couleur que j'utilise pour connecter plusieurs pages.

Pour la deuxième page, j'utilise également le même marron clair qu'auparavant pour créer une palette de couleurs et une cohérence homogène. all my designs.

Styles de fondations

Les couleurs permettent de créer un style de signature qui permet de rendre un dessin mémorable. La couleur relie le contenu à une marque, crée des liens entre les images et le texte. Ils définissent la personnalité d'un produit ou d'un site Web, et finalement d'une société entière, il est donc essentiel de développer une suite de couleurs à utiliser dans vos conceptions.

Mais la couleur n'est pas le seul aspect d'une conception qui puisse vous aider à la conserver. cohérence primordiale. Vous pouvez créer des éléments typographiques de signature, notamment des guillemets, des dates et des lettrines, ainsi que des styles de bordure et des traitements d'image répétés sur plusieurs pages.

Ces styles constituant le fondement de votre conception, vous serez alors libre utiliser des variations de couleur et de type pour donner à chaque article son aspect unique.

Dans cette image, une couleur d'arrière-plan couvre toute la page. Le simple fait de changer cette couleur entre les articles, tout en conservant les styles de mise en page et de typographie, ajoute de la variété et crée une série de pages qui, bien que différentes, semblent appartenir à la même unité.

À l'aide d'un outil tel que Adobe Color expérimentez des couleurs analogues et complémentaires. Créer une famille de couleurs à partir de graphiques et de photographies, et les combiner en plusieurs combinaisons, constitue un moyen simple de créer une variété de motifs pour des sections de votre site Web.

La conception d'Ernest Journal a du succès car chaque article possède ses propres éléments distinctifs qui relient le style visuel au contenu, mais ils utilisent un système de grille et des styles de base cohérents. Cette cohérence permet à Ernest Journal de se sentir comme un tout unifié et non comme une collection de morceaux séparés.

NB: Les membres de Smashing ont accès à un superbe fichier PDF du magazine Inspired Design Decisions de Andy ainsi qu'à des exemples de code complets. article.

1. Décisions de design inspirées: Avaunt Magazine
2. Décisions de design inspirées: des questions pressantes
3. Décisions de design inspiré: Ernest Journal

(ra, yk, il)