Au cours des dernières années, les livres sur HTML et CSS ont presque disparu de mes étagères de studio. Je les ai remplacés par des livres sur la direction artistique, la rédaction et la conception graphique.

Récemment, je parcourais un nouvel ajout à ma bibliothèque et j'ai été captivé par un magazine. J'ai adoré la façon dont son concepteur a combiné de manière ludique images et typographie pour créer un design plein d'énergie et de mouvement. Pour me rappeler de revoir ce design, j'en ai pris une photo avec mon iPhone.

Quand j'ai vu ce design frappant pour la première fois, je n'avais pas entendu parler du designer qui l'avait créé, né à Brooklyn Otto Storch. Bien qu'il ait été un graphiste primé, contrairement à beaucoup de ses contemporains, Storch et son travail ont été largement ignorés.

Storch a amassé un vaste corpus d'œuvres, et c'est une honte incroyable que son travail ne soit pas plus largement connu , en particulier en ligne. Il n'y a pas de page Wikipédia consacrée à Storch, et personne n'a publié un livre sur lui ou son travail.

Je suis non seulement influencé par le travail d'Otto Storch, mais aussi par le fait qu'il était un designer prolifique avec une forte éthique de travail . Je suis inspiré par la façon dont il a pris ce qu'il avait appris d'Alexey Brodovitch, l'a combiné avec son approche du design et a créé un travail distinctif et engageant. J'espère que je peux le faire aussi.

Je n'ai jamais entendu le nom d'Otto Storch mentionné lors d'une conférence sur le design ou je l'ai vu référencé dans un livre sur la conception Web. Mais le découvrir m'a donné envie de sensibiliser plus de gens à l'homme et à son travail.

Il m'a aussi fait réfléchir au rôle de la créativité dans une industrie qui est axée sur les affaires, qui évolue rapidement et qui a des aspects pratiques aussi bien que techniques. contraintes. La publication peut être une entreprise à couper le souffle et les magazines sur lesquels Storch travaillait n'étaient pas de la haute couture. Ce qu'il a fait n'était pas de l'art, mais cela ne voulait pas dire qu'il n'était pas créatif. Storch a compris que les idées sont aussi essentielles à une communication efficace que les images et l'écrit. Tout au long de sa carrière, Storch a travaillé dur pour inclure des idées malgré les limites de son médium. C'est une approche qui est aussi essentielle sur le Web aujourd'hui qu'elle l'était dans les magazines des années 1960.

Précédemment dans «Inspired Design Decisions»

Plus de la série «Inspired Design Decisions»

1. Inspired Design Decisions: Avaunt Magazine
2. Inspired Design Decisions: Pressing Matters
3. Inspired Design Decisions: Ernest Journal
4. Inspired Design Decisions: Alexey Brodovitch
5. Inspired Design Decisions: Bea Feitler
6. Inspired Design Decisions: Neville Brody

Inspired Par Otto Storch

Otto Storch est né en 1913, et durant les années 1930, il a commencé sa carrière dans l'art oublié de la retouche photographique pré-numérique. Pendant les années 1950, Storch a suivi des cours du soir et a étudié le design avec Alexey Brodovitch qui l'a encouragé à trouver un emploi dans un magazine.

York l'a embauché comme directeur artistique adjoint. McCall a publié plusieurs titres, dont Popular Mechanics, Blue Book et Red Book, et McCall’s Magazine lui-même. Storch a déménagé au McCall's Magazine où il a tiré parti de ce qu'il avait appris de Brodovitch et de son expérience dans la conception de matériel publicitaire, de couvertures d'albums, de couvertures de livres et de magazines.

«Une bonne direction artistique ne vient pas d'une personne incertaine. Je suis capable de ressentir intensément et j'étais prêt à perdre un concours de popularité auprès des rédacteurs en chef lorsque cela était nécessaire. La responsabilité visuelle du magazine était la mienne. »

– Otto Storch

Comme Bea Feitler, Storch a perpétué l'héritage d'Alexey Brodovitch en matière de mise en page de magazines imaginatifs. Il a compris que la double page était une toile créative et en a fait une caractéristique de son travail, parfois en permettant aux éléments de circuler entre les pages. D'autres fois, Storch a fait de la gouttière une partie intégrante de sa conception.

Storch a souvent utilisé de gros titres et des images pour unifier ses diffusions. Pour «En épi ou en dehors», c'est un épi de maïs qui coule du beurre sur les deux pages. Pour une autre fonctionnalité, «Le plan de réduction des quarante clins d'œil», il a permis à son sujet de s'étirer, reposant sur un lit de texte en cours d'exécution. Cette copie coule sous le poids du modèle endormi.

Le grand graphique en noir et blanc dans «Pourquoi les mariages d’adolescents s’effondrent» ne se limite pas à une seule page. Au lieu de cela, il occupe trois colonnes sur quatre sur la propagation et domine donc la conception. La gravité d'un titre au milieu de ces cercles concentriques attire l'œil vers lui.

Dans ‘Girls Are Silly, Aren’t Boys Awful,’ Storch plaça deux enfants front contre front avec la gouttière entre eux. Il a souligné cette tension en alignant son texte dans des directions opposées.

Storch a rendu la combinaison d'images et de texte évidente et sans effort, mais les résultats qu'il a obtenus sont venus d'années d'expérience et de pratique. le texte bien emballé s'intègre parfaitement dans un compartiment dans la boîte de peinture d'un artiste. Les modèles de cette propagation pour les modèles de McCall tiennent également à l'intérieur de la boîte. L'utilisation ludique et inattendue de l'échelle de Storch ajoute encore une autre dimension à ce design.

Storch croyait que dans la conception éditoriale, une idée forte, une copie, des images et une typographie font partie intégrante. Je pense que la même chose est vraie dans la conception Web, malgré ses différences apparentes à imprimer.

Storch comprenait que la typographie pouvait faire bien plus que présenter un contenu lisible et il avait le don de transformer le type en objets graphiques. Dans la conception d'impression pour les langues de gauche à droite, la page de gauche est appelée «verso» et la droite est appelée «recto». Pour l'extrait de McCall d'un livre intitulé «Le premier à savoir», Storch a mis en miroir les pages recto et verso, puis a placé son texte dans un cercle qui reflète le cadran de téléphone circulaire.

Il y a beaucoup d'Otto Storch, et ses créations peuvent nous enseigner le travail que nous faisons sur le Web aujourd'hui. Comme Alexey Brodovitch, Storch maîtrise sa toile et ne se limite pas à elle; il a utilisé ses pages pour présenter le contenu d'une manière qui le rendait non seulement compréhensible, mais aussi plus attrayant. Cet appel est important, car il relie les gens à une marque, un produit ou une histoire, et qui importe à toute entreprise, quel que soit le support.

Otto Storch pourrait être un nouvel ajout à ma liste de designers inspirants, mais ses créations

Shape up

Le module de formes CSS du W3C, niveau 1, est une recommandation recommandée par les candidats depuis 2014, et tous les navigateurs de bureau et mobiles contemporains ont mis en œuvre sa forme extérieure, sa marge de forme et sa forme. propriétés de seuil d'image.

[src="http://www.smashingmagazine.com/shape.png"]  {
flotteur: gauche;
forme-extérieur: url (shape.png);
marge de forme: 20 pixels; } 

Les concepteurs de sites Web ne sont pas conscients du potentiel créatif offert par CSS Shapes, et qu'il n'y a plus de raison de ne pas les utiliser. Il est également possible que les développeurs Web pensent que les formes sont mal prises en charge par les navigateurs. Pourtant, avec tous les navigateurs contemporains prenant désormais en charge les formes – et leurs propriétés se dégradant gracieusement dans les navigateurs hérités – il n'y a actuellement aucune raison de ne pas les utiliser.

Faites plus avec les formes

Cette conception par Otto Storch a été l'une des premières à obtenir mon attention. J'ai admiré la simplicité structurelle de ses deux colonnes de copie justifiées et comment le placement de ses images – avec du texte enroulé autour pour créer des formes organiques – a rempli la page d'énergie et de mouvement de manière ludique.

Je vois rarement des mises en page avec ce genre d'énergie en ligne, donc ma conception comprend quatre coccinelles aux couleurs vives, chaque Volkswagen étant placée sous un angle contrastant avec les deux hautes colonnes de texte. Je n'ai besoin que de deux éléments structurels pour mettre en œuvre cette conception inspirée de Storch; l'élément principal et un côté. Chacun de ces éléments contient des paragraphes de texte en cours, plus deux éléments d'image qui me permettent d'échanger de petites images pour des images plus grandes:

… 
… 
… 
… 
… 
… 
… 
… 19659061]… 
… 
… 
… 
… 
… 

Ces éléments d'image s'adaptent aux bords des petits écrans, mais j'ai toujours besoin d'espaces blancs des deux côtés de mes paragraphes de course copie. En utilisant des unités de largeur de fenêtre, cet espace reste toujours proportionnel à ces écrans:

 p {
marge droite: 10vw;
marge gauche: 10vw; } 

L'élément d'image est l'un des ajouts les plus utiles au HTML. En combinant des requêtes multimédias avec plusieurs images, un navigateur peut sélectionner une image qui convient le mieux à une mise en page.

J'utilise la propriété de média et la valeur de largeur minimale le plus souvent, et bien que cette conception ne nécessite que deux images par élément d'image, il est possible d'ajouter plus d'images et même de combiner des valeurs de média pour créer des requêtes complexes:

Les images de ces images contiennent des versions recadrées de mes Beetles qui conviennent le mieux aux petits écrans. J'applique la même largeur à toutes mes images, puis j'ajoute une marge de forme pour préparer les formes CSS qui viennent ensuite:

 picture {
largeur: 160px;
marge de forme: 20 pixels; } 

Je trouve les formes à partir d'images plus faciles et plus rapides à mettre en œuvre que l'utilisation de coordonnées polygonales. Pour développer une forme à partir d'une image, il lui faut un canal alpha totalement ou partiellement transparent. Lorsque les images sont partiellement transparentes, la propriété shape-image-threshold peut contrôler les zones qui forment la forme.

Je peux utiliser la même image pour plusieurs formes. Même si ma conception comprend quatre voitures de couleurs différentes, je n'ai besoin que de deux images de forme:

 image principale: première du type,
côté image: premier du type {
flotteur: gauche;
forme-extérieur: url (forme-1-sm.png); }

image principale: dernier de type,
côté image: dernier de type {
Flotter à droite;
forme-extérieur: url (forme-2-sm.png); } 

Une fois la conception de mon petit écran terminée, j'introduis des images plus grandes pour des écrans de taille moyenne ainsi que des images de forme adaptées. J'applique de nouvelles largeurs pour que les images s'adaptent à des écrans plus grands:

 @media (min-width: 48em) {

image principale: première du type {
largeur: 290px;
forme-extérieur: url (forme-1-lg.png); }

image principale: dernier type {
largeur: 230px;
forme-extérieur: url (forme-2-lg.png); }

côté image: premier du type {
largeur: 230px;
forme-extérieur: url (forme-3-lg.png); }

côté image: dernier de type {
largeur: 290px;
forme-extérieur: url (forme-4-lg.png); }
} 

Bien que ma conception pour des écrans plus grands puisse sembler complexe à première vue, la disposition ne pourrait pas être plus simple, et ces éléments principaux et secondaires forment deux colonnes symétriques:

 @media (largeur min: 64em) {

corps {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr; }
} 

Les espaces blancs jouent un grand rôle dans cette conception de grand écran. Avec ces colonnes introduites, les marges horizontales de 10vw que j'ai appliquées à mes paragraphes précédemment signifient que les espaces blancs représentent 40% de cette mise en page.

Tout comme Otto Storch a utilisé ses pages pour présenter le contenu de manière à le rendre attrayant et compréhensible, ce le design ne raconte pas seulement l'histoire de la Volkswagen Beetle, sa disposition indique à quel point cette petite voiture emblématique était amusante à conduire.

Rendre le texte délicieux

Comme Brodovitch, Otto Storch excellait dans la combinaison d'images avec du texte, et il sculptait souvent la copie dans des formes qui les reflétaient. Dans cette conception, Storch a créé un délicieux bloc de texte en forme de verre. Nous trouvons rarement des techniques comme celle-ci utilisées en ligne, mais elles peuvent aider à attirer les lecteurs dans une histoire quel que soit le support. Inspiré par Storch, pour mon prochain design, j'ai sculpté ma copie pour refléter la forme d'une Volkswagen Beetle.

Ma conception comprend trois dispositions alternatives. Une seule colonne de contenu défilant pour les petits écrans, une grille 2×2 pour les écrans moyens et une conception grand écran avec une zone de contenu défilant horizontalement.

Il y a quatre éléments structurels nécessaires pour implémenter ces trois conceptions, un élément principal pour mon contenu , ainsi que de grandes images de trois coléoptères aux couleurs vives. Je joins ces éléments avec une section, puis j'ajoute une division de présentation décorative qui représente une route goudronnée:

 Mordez par le bug 








 

Je n'ai pas besoin que mon panneau à défilement horizontal apparaisse sur de petits écrans, alors n'ajoutez que des styles et des formes de fondation qui sculptent mon texte en forme de coccinelle. Je commence par aligner le texte du paragraphe au centre et le mettre en majuscule. Bien que je ne définisse pas normalement le texte sur un bloc entier de texte de cette façon, les formes majuscules pleines aident à souligner la forme Beetle:

 p {
alignement du texte: centre;
transformation de texte: majuscule; } 

Les premières versions de la spécification CSS Shapes incluaient une propriété shape-inside qui nous aurait permis de placer du texte à l'intérieur des formes comme Storch. Je suis déçu que le W3C ait reporté cette fonctionnalité jusqu'au CSS Shapes Module Level 2 qui est toujours un Draft Editor. Vous pouvez obtenir des effets similaires en utilisant la forme à l'extérieur, mais moi, pour ma part, je ne peux pas attendre jusqu'à ce que nous puissions utiliser le type de manière créative comme Otto Storch en ligne.

Grand aperçu )

J'ajoute deux images de forme à mon paragraphe. Du texte coulera entre ces images pour refléter le visage d'un scarabée:

…
 

Je spécifie les dimensions de ces deux images et je mets leur opacité à zéro car je ne veux pas qu'elles soient vues par un spectateur:

 p img {
largeur: 100px;
hauteur: 125px;
opacité: 0; } 

Ces images sont purement de présentation et ne véhiculent ni contenu ni signification, donc pour en supprimer toute sémantique, j'ajoute des attributs de rôle. Pour les retirer de l'arborescence d'accessibilité, j'ajoute également des attributs aria-cachés à ces deux images:

Pour sculpter mon texte dans la forme de l'emblématique Volkswagen, j'applique la forme à l'extérieur en utilisant les deux mêmes images, flottant le première image à gauche et deuxième à droite:

 p img: nième type (1) {
flotteur: gauche;
forme-extérieur: url (forme-l.png); }

p img: nième type (2) {
Flotter à droite;
forme-extérieur: url (forme-r.png); } 

Je ne veux pas non plus que ma division de présentation soit visible par les technologies d'assistance, j'ajoute donc ces mêmes rôles et attributs aria-cachés:

Comme je ne le fais pas besoin que la division soit visible pour les personnes utilisant de petits écrans, j'ai défini sa propriété d'affichage sur aucune:

 div {
affichage: aucun; } 

Mon petit écran est élégant, comme le Beetle, mais l'espace supplémentaire disponible sur les écrans de taille moyenne me permet de placer mon texte sculpté à côté des images qu'il imite.

Avant d'implémenter une conception, je crée un storyboard pour décider comment réorganiser les éléments à mesure que la taille de l'écran change. Pour les écrans de taille moyenne, j'organise mes quatre éléments dans une grille de colonnes symétriques 2×2. En utilisant des valeurs minmax pour dimensionner ces colonnes, je m'assure qu'elles remplissent tout l'espace disponible, mais leur largeur ne se réduit jamais en dessous de 400 px:

 @media (min-width: 48em) {

section {
affichage: grille;
grille-modèle-colonnes: minmax (400px, 1fr) minmax (400px, 1fr);
écart de grille: 2vw;
align-items: end; }
} 

Pour les écrans plus grands, j'ai également besoin de deux lignes. Ils doivent être de hauteur égale et occuper tout l'espace vertical disponible:

 @media (min-width: 64em) {

corps {
affichage: grille;
grille-modèle-lignes: 1fr 1fr; } 

Une grande zone de contenu à défilement horizontal domine cette conception et est plus large que la fenêtre d'affichage. Le panneau comprend quatre colonnes – trois pour les images et une pour ma copie sculptée – et chacune a une largeur minimale de 400 pixels. En définissant la largeur maximale de la fenêtre et en autorisant le défilement uniquement sur l'axe horizontal, tout contenu qui se trouve en dehors de la fenêtre est masqué mais toujours accessible:

 section {
grille-modèle-colonnes: répéter (4, minmax (400px, 1fr));
largeur max: 100vw;
overflow-x: scroll; } 

Ci-dessous mon contenu est une division de présentation qui représente la route sous les roues de mes formes Beetle. Cet élément est invisible sur les petites tailles d'écran, donc pour le rendre visible, je change la propriété d'affichage de none à block, puis ajoute une couleur de fond gris clair. Les propriétés de la grille que j'ai précédemment définies sur l'élément body définissent la hauteur de cette division:

 div {
bloc de visualisation;
couleur de fond: # a73448; }
} 

Dave Hyatt de Webkit avait initialement proposé des réflexions CSS dès 2008, mais jusqu'à présent, elles n'avaient pas été implémentées dans d'autres moteurs de rendu de navigateur. Les réflexions CSS ne sont actuellement prises en charge que par Google Chrome.

Comme vous pouvez l'imaginer, les réflexions créent une copie d'un élément. Un reflet peut apparaître au-dessus, en dessous ou à gauche ou à droite. Tout comme dans le monde physique, lorsqu'un élément change d'une manière ou d'une autre, sa réflexion suit.

Il existe trois propriétés expérimentales disponibles pour CSS Reflections. Sa direction et un décalage optionnel qui contrôle la distance entre un élément et sa réflexion. Vous pouvez également appliquer un masque à n'importe quelle réflexion pour changer son apparence, par exemple, en utilisant un masque de dégradé pour atténuer progressivement l'intensité d'une réflexion.

Les réflexions CSS ont un support limité dans les navigateurs, mais elles peuvent toujours ajouter une dimension supplémentaire à une conception pour les navigateurs qui les ont mis en œuvre. Je souhaite ajouter des réflexions uniquement lorsqu'un navigateur les prend en charge et lorsque l'écran est suffisamment grand pour les utiliser pleinement.

Pour obtenir le résultat que je recherche, j'utilise des médias imbriqués et des requêtes de fonctionnalités qui testent d'abord la largeur minimale d'une fenêtre, puis si un navigateur prend en charge -webkit-box -réfléchir: ci-dessous . J'ajoute les reflets et change la couleur de ma division de présentation du rouge au gris:

 @media (min-width: 64em) {
@supports (-webkit-box-reflète: ci-dessous) {

section {
-webkit-box-reflect: en dessous de 0 gradient linéaire (transparent, blanc); }

div {
couleur de fond: # f0f0f1; }
}
} 

Symétrie miroir

Cette étonnante diffusion en noir et rouge des motifs de McCall est l'un des designs les plus distinctifs de Storch. Il y a une symétrie rassurante dans sa mise en page et comment Storch a utilisé les mêmes couleurs sur ses deux pages. J'ai été immédiatement attiré par sa conception et je veux obtenir un effet similaire.

Le code HTML dont j'ai besoin pour implémenter cette conception ne pourrait pas être plus simple. Juste deux éléments structurels, un principal et un côté, qui contiennent tous deux des éléments d'image:

… 
… 

Ces éléments principal et côté contiennent également chacun un paragraphe de texte. Pour obtenir les rotations nécessaires à cette conception, j'encapsule chaque ligne de texte à l'intérieur d'un élément span. Je souhaite qu'il y ait une meilleure alternative, plus sémantique à ces éléments de présentation, mais sans styles supplémentaires, ils ne perturbent pas la lisibilité de mes paragraphes:

 Bien que 
 conçu dans les 
 années 1930, en raison de [19659153] Seconde Guerre mondiale, 
 Coccinelles civiles 
 n'ont commencé à 
 être produites qu'en 
 en nombre significatif 
 d'ici 
 à la fin des années 40. 
 

Je commence par appliquer une couleur de fond gris foncé à l'élément body:

 body {
couleur de fond: # 262626; } 

Ensuite, une hauteur minimale garantit que mes éléments principal et latéral remplissent toujours la hauteur de la fenêtre d'affichage. Pour centrer leur contenu à la fois horizontalement et verticalement, j'applique les propriétés de la boîte flexible et définit leur direction sur la colonne:

 main,
de côté {
affichage: flex;
flex-direction: colonne;
justifier-contenu: centre;
align-items: centre;
min-hauteur: 100vh;
rembourrage: 2rem 0;
dimensionnement de la boîte: border-box;
couleur: #fff; } 

Je veux que la couleur de mon Beetle principal soit assortie au panneau suivant, j'ai donc mis sa couleur d'arrière-plan au même rouge:

 de côté {
couleur de fond: # a73448; } 

Alors que les longs passages de texte en majuscules sont généralement plus difficiles à lire que ceux mis en casse mixte, les majuscules conviennent aux pièces plus courtes et peuvent créer un look élégant:

 p {
marge: 0 2rem;
alignement du texte: centre;
transformation de texte: majuscule; } 

Dans ma conception à petit écran, les éléments principal et latéral s'empilent verticalement et leurs hauteurs correspondent à celles de la fenêtre d'affichage. Pour les écrans de taille moyenne, je réinitialise la hauteur minimale de ces éléments pour remplir la moitié de la fenêtre d'affichage:

 @media (min-width: 48em) {

principale,
de côté {
min-hauteur: 50vh;
rembourrage: 2rem; } 

L'espace supplémentaire disponible sur les écrans de taille moyenne me permet de styliser mes paragraphes en modifiant le mode d'écriture, de sorte que leur texte s'affiche verticalement et se lit de droite à gauche:

 p {
hauteur max: 12em;
marge: 0;
alignement du texte: gauche;
mode d'écriture: vertical-rl; } 

La modification de la propriété d'affichage de ces éléments span pour bloquer divise mon paragraphe en plusieurs lignes. Ensuite, la hauteur de ligne ajoute de l'espace entre les lignes, ce qui laisse de la place pour mes rotations:

 p span {
bloc de visualisation;
hauteur de ligne: 2; } 

Les transformations, notamment la rotation, la mise à l'échelle et la traduction, font partie de CSS depuis près de deux décennies. L'utilisation de la transformation implique l'ajout d'une fonction de transformation comme la rotation, puis d'une valeur entre parenthèses.

Pour obtenir l'effet que je recherche; Je fais pivoter les six premières lignes de mon texte dans le sens inverse des aiguilles d'une montre de quinze degrés. Les six dernières lignes tournent de la même valeur mais dans le sens horaire. Toutes les lignes restantes restent inchangées:

 p span: nth-child (-n + 6) {
transformer: tourner (-15deg); }

p span: nième enfant (n + 12) {
transformer: tourner (15 degrés); } 

À l'avenir, vous pourrez utiliser des fonctions telles que rotation indépendamment de la propriété transform, mais au moment où j'écris ceci, seul Firefox a implémenté des transformations individuelles.

Pour faire de la place pour mon texte pivoté, j'ajoute marges à deux de mes lignes:

 p span: nth-child (6) {
marge gauche: 1em; }

p span: nième enfant (12) {
marge droite: 1em; }
} 

Cette conception devient plus frappante avec l'espace disponible sur les grands écrans. Pour eux, j'applique des valeurs de grille à l'élément body pour créer deux colonnes symétriques de hauteur égale:

 @media (min-width: 64em) {

corps {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr; } 

J'applique une grille symétrique à trois colonnes aux éléments principal et latéral qui s'étendent tous les deux jusqu'à la hauteur totale de la fenêtre d'affichage:

 main,
de côté {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr 1fr;
écart grille-colonne: 0;
rembourrage: 2rem;
min-hauteur: 100vh; } 

J'étale l'image principale sur les deuxième et troisième colonnes, et l'image de côté dans les première et deuxième colonnes:

 image principale {
grille-colonne: 2 / -1;
grille-ligne: 1;
rembourrage: 0 5vw; }

à côté de l'image {
grille-colonne: 1/3;
rembourrage: 0 5vw; } 

Je place les paragraphes dans les colonnes restantes et en donnant à tous les éléments le même numéro de ligne, ils resteront sur la même ligne quel que soit l'ordre source:

 main p {
grille-colonne: 1;
grille-ligne: 1; }

côté p {
grille-colonne: 3; } 

Dans cette version de ma conception, le texte doit s'exécuter de haut en bas au lieu de droite à gauche, je remets donc le mode d'écriture à l'horizontale, de haut en bas, puis j'aligne le texte à droite:

 main p,
côté p {
hauteur max: aucune;
mode d'écriture: horizontal-tb; }

travée principale {
alignement du texte: à droite; } 

Enfin, je remplace les valeurs de rotation et les marges sur mes lignes de texte pour mieux convenir à cette conception grand écran:

 plage de p principale: nième enfant (-n + 6) {
transformer: tourner (10deg); }

durée p principale: nième enfant (n + 12) {
transformer: tourner (-10deg); }

durée p principale: nième enfant (6) {
marge: 0 0 15px; }

durée p principale: nième enfant (12) {
marge: 15px 0 0; }

côté p span: nième enfant (-n + 6) {
transformer: tourner (-10deg); }

côté p span: nième enfant (n + 12) {
transformer: tourner (10deg); }

côté p span: nième enfant (6) {
marge: 0 0 15px; }

côté p span: nième enfant (12) {
marge: 15px 0 0; }
} 

Colonnes de portée

Pour bon nombre de ses créations les plus mémorables, Otto Storch a permis à de grandes images et éléments typographiques de s'étendre sur deux pages. Cette technique a créé des écarts frappants, y compris celui-ci où il a placé un épi de maïs au beurre sur deux colonnes de texte justifié.

Je veux un effet tout aussi frappant pour ma conception finale basée sur Beetle, et pour la mettre en œuvre, je n'ai besoin que de trois éléments structurels; un en-tête – contenant un logo SVG, un titre et une photo de ma Volkswagen jaune – puis des éléments principaux et secondaires:

 Faites-vous mordre par le bug 

… 



… 
 

Un écoulement normal plus quelques styles de fondation sont tout ce dont j'ai besoin pour implémenter la version petit écran de cette conception. Tout d'abord, j'ajoute un fond sombre et spécifie du texte blanc:

 body {
rembourrage: 2rem;
couleur de fond: # 262626;
couleur: #fff; } 

Pour placer le titre au centre de la page, j'applique des marges, définit sa largeur maximale à l'aide d'unités textuelles, puis aligne ses mots majuscules au centre:

 h1 {
marge: 0 auto 1.5rem;
largeur max: 8rem;
alignement du texte: centre;
transformation de texte: majuscule; } 

Au lieu de redimensionner les images, afin qu'elles tiennent dans une fenêtre étroite, je leur permets souvent de s'étendre au-delà et d'ajouter un panneau à défilement horizontal. Cette technique est l'un de mes dispositifs de conception de petit écran préférés.

Cette figure contient une image qui est plus large que la fenêtre et contient le profil complet de la voiture, y compris ses roues. En ajoutant overflow-x: scroll; à la figure, je rend accessibles des parties de l'image en dehors de la fenêtre d'affichage:

 figure {
overflow-x: scroll; } 

Bien que les écrans de taille moyenne héritent d'un grand nombre de ces styles de fondation, lorsque plus d'espace devient disponible, je veux souligner l'axe vertical dans la conception en créant une colonne étroite de texte à l'aide de larges marges basées sur les fenêtres. J'ai également réinitialisé le débordement des éléments de la figure pour rendre tout son contenu visible:

 @media (min-width: 48em) {

figure {
débordement-x: visible; }

p {
marge droite: 25vw;
marge gauche: 25vw; }
} 

La plus grande version de ma conception est la plus complexe. Il place non seulement une grande image de mon scarabée au-dessus de deux colonnes de texte en cours d'exécution, mais ce texte s'enroule autour de ses roues. Je commence par appliquer des propriétés de grille pour des écrans plus grands à l'élément body pour créer une grille symétrique à deux colonnes:

 @media (min-width: 64em) {

corps {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr;
rembourrage: 4rem; } 

Mon en-tête s'étend sur les deux colonnes, puis les valeurs de grille imbriquées organisent le logo VW, le titre et l'image de mon Beetle. Dans cette grille imbriquée, les deux colonnes externes occupent tout l'espace disponible restant, tandis que la colonne centrale se redimensionne automatiquement pour accueillir son contenu:

 header {
grille-colonne: 1 / -1;
affichage: grille;
grille-modèle-colonnes: 1fr auto 1fr;
grille-écart de ligne: 4vh; } 

Je place le logo et le titre dans cette colonne centrale:

 svg,
h1 {
grille-colonne: 2; } 

Ensuite, ajoutez des marges entre les paragraphes:

 p {
marge droite: 1rem;
marge gauche: 1rem; } 

L'élément d'image pour cette conception comprend deux images. Le premier est complet avec des roues pour les petits et moyens écrans, et le second est une voiture qui manque ses roues pour les grands écrans. Pour boulonner les roues sur ce Beetle, j'utilise : avant les pseudo-éléments à l'intérieur des éléments principaux et latéraux. Ensuite, j'ajoute une marge de forme pour ajouter de l'espace entre eux et le texte en cours d'exécution à proximité:

 main: avant,
à part: avant {
bloc de visualisation;
marge de forme: 10px; } 

En utilisant le contenu généré, j'ajoute la roue arrière avant l'élément principal et je fais flotter cette roue vers la droite. La propriété shape-outside enveloppe ensuite le texte autour de cette roue:

 main: before {
contenu: url (shape-l.png);
Flotter à droite;
forme-extérieur: url (forme-l.png); } 

J'applique des valeurs similaires à avant l'élément apart, cette fois en flottant la roue à gauche:

 apart: avant {
contenu: url (shape-r.png);
flotteur: gauche;
forme-extérieur: url (forme-r.png); }
} 

Le texte en cours d'exécution s'enroule maintenant autour des roues de la Coccinelle, ce qui rend mon design plus attrayant sans sacrifier la lisibilité ou la réactivité.

Conclusion

Otto Storch a créé de nombreux designs mémorables, mais je suis triste que lui et son travail ont été largement oubliés. Il n'y a pas de page Wikipédia consacrée à Storch, et personne n'a publié de livre sur lui ou son travail. Les conceptions de Storch ont beaucoup à offrir aux designers qui travaillent sur le Web, et j'espère que plus de gens le redécouvriront.

Son travail montre également à quel point nous pouvons réaliser plus en ligne en utilisant Shapes. Bien qu'elle soit désormais bien prise en charge, cette propriété CSS a été négligée presque autant que Storch lui-même. Les formes offrent bien plus qu'un simple habillage de texte, et leur plein potentiel reste à réaliser. J'espère que cela changera, et bientôt.

Plus de la série «Inspired Design Decisions»

1. Inspired Design Decisions: Avaunt Magazine
2. Inspired Design Decisions: Pressing Matters
3. Inspired Design Decisions: Ernest Journal [19659016] Décisions de conception inspirées: Alexey Brodovitch
4. Décisions de conception inspirées: Bea Feitler
5. Décisions de conception inspirées: Neville Brody

NB: Les membres de Smashing ont accès à un PDF magnifiquement conçu du magazine Andy's Inspired Design Decisions and full exemples de code tirés de cet article.

(vf, ra, yk, il)