Mise en page créative pour les concepteurs de sites Web et d'interfaces utilisateur ► Finies les mises en page ennuyeuses | Muhammad Ahsan Pervaiz | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Mise en page créative pour les concepteurs de sites Web et d'interfaces utilisateur ► Finies les mises en page ennuyeuses

teacher avatar Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Quel de ce cours ?

      2:28

    • 2.

      Les bases de la conception de mise en page

      8:59

    • 3.

      Le contenu définit la mise en page

      7:44

    • 4.

      Quelles sont les grilles, la goutte et les marques,

      8:24

    • 5.

      Comment combiner des colonnes dans des grilles

      4:46

    • 6.

      Principes de base et rythme vertical

      11:55

    • 7.

      Les blocs verticaux pour espacer ► Secret

      9:12

    • 8.

      Équilibrer votre mise en page avec des blocs

      10:39

    • 9.

      Équilibrer vos exemples de mise en page

      10:20

    • 10.

      Mise en page centrée par une seule colonne pour les applications Web et mobiles

      9:33

    • 11.

      Conception de mise en page centrée

      2:33

    • 12.

      Mise en page deux colonnes avec des exemples

      9:55

    • 13.

      Projet ► 2 colonnes

      2:15

    • 14.

      Mise en page multicolonnes dans Web UI Design UI

      8:51

    • 15.

      Projet de ► multicolonne

      2:01

    • 16.

      Mise en page des fleurs ► Secret

      7:03

    • 17.

      Projet ► Mise en page de fleurs

      1:37

    • 18.

      La maçonnerie dans le design Web et la conception d'applications mobiles

      9:59

    • 19.

      Tuer avec des combos pour pourcentages dans la conception de mise en page

      9:14

    • 20.

      Utilisation créative des marques dans le design de mise en page

      10:50

    • 21.

      Projet de l'ordre créatif

      1:13

    • 22.

      Méthode de superposition hors boîte et superposée dans la conception de mise en page

      7:30

    • 23.

      Exemples de conception Web et d'applications mobiles hors boîte de boîte à partir de boîte à des exemples

      11:14

    • 24.

      Conception de superposition de superposition

      1:27

    • 25.

      Utiliser l'accent dans la conception de mise en page

      10:59

    • 26.

      Utiliser des mouvements dans la conception de mise en page

      7:15

    • 27.

      Consigné avec une technique de conception de mise en page d'alignement gauche

      15:18

    • 28.

      Merci tout le monde

      0:37

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

2 577

apprenants

38

projets

À propos de ce cours

La mise en page est l'une des choses qui raconte l'histoire de votre design. La conception de votre site Web ou votre application mobile déroule l'histoire, tout dépend de la mise en page. Si votre mise en page est géniale, votre engagement des utilisateurs se will comme l'éruption du erupting

C'est l'un des domaines de conception où la plupart des concepteurs Web et les concepteurs d'interface utilisateur ont beaucoup de difficulté. J'ai mis quelques techniques de conception de base et que j'ai avancées, que j'ai compris après le poinçonnage et l'analyse des centaines de nombreuses techniques d'application mobile différentes conceptions Web et mobiles par de nombreux grands designers

Ne pas rester lié avec des mises en boîte ennuyeux de l'ennuie des mises en page de boîtes à l'ennuyeux

Les choses que vous apprendrez dans ce cours, sont

  • Conception de mises en page plus attrayante et puissante

  • Ne concevrez pas des mises en page d'ennuyantes similaires comme d'autres concepteurs UI

  • Pourquoi nous créons des mises en page (leur objectif)

  • Quelles sont les grilles, des gouttières et marques,

  • Comment utiliser une mise en page, une à deux ou plusieurs colonnes

  • Quelles sont les mises en page de fleurs et quand les utiliser

  • Qu'est-ce qu'une mise en page de la grille de maçonnerie ?

  • Comment utiliser des marges créatives dans des mises en page de site Web ou d'applications mobiles dans les marques de sites Web ou de l'application mobile.

  • Comment utiliser des méthodes hors hors boîte et superposées dans la conception de mise en page

  • Définir une règle simple qui peut rendre votre mise en page superbe

avec des tonnes d'exemples et des exemples de mises en page. J'essaie d'expliquer chaque principe de conception de mise en page en termes simple afin que vous puissiez digérer plus facilement. J'ai 5 projets pour que vous puissiez maîtriser cette compétence de conception de mise en page

Alors let's et commencons à concevoir de superbes mises en page maintenant maintenant

Rencontrez votre enseignant·e

Teacher Profile Image

Muhammad Ahsan Pervaiz

UI UX Visual Designer 15+ Years

Enseignant·e

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... Voir le profil complet

Level: All Levels

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Quel de ce cours ?: le design est juste comme une histoire. Ainsi, chaque fois que vous racontez une histoire à vos utilisateurs via la conception, votre mise en page va décider comment cette histoire va se dérouler. Comment vous allez orteils. Dites à l'utilisateur la première partie de l'histoire, la deuxième partie de l'histoire, puis les rebondissements ou partie intéressante de l'histoire ou caractéristiques de votre produit Donc votre design va se dérouler d'une manière très agréable et créative. Si votre mise en page en ligne droite est la plus importante, retirez votre application mobile, concevez votre site Web, concevez votre conception de page de destination, quelle que soit votre conception de mise en page va jouer un rôle essentiel dans la décision comment votre histoire va être racontée à vos utilisateurs. Donc, ce cours va vous aider à comprendre et à mettre un vase créatif sur le déroulement cette histoire et comment vous allez orteil, euh, mettre en place différents modèles gentils et comment différentes mises en page créatives est qui vont pour vous aider à vous démarquer de la foule. Donc, d'autres concepteurs qu'ils pourraient faire des mises en page simples. Quatre colonnes ou quatre boîtes différentes. Je vais vous montrer beaucoup de techniques qui vont vous aider à sortir de cette boîte et à créer des sorties créatives. Nous allons voir beaucoup de différents, fondamentalement, fondamentalement, des sorties. Nous allons comprendre différentes colonnes, grilles, grilles, systèmes de guidage, différents laboratoires mobiles où vous pouvez appliquer ces idées que je vais vous donner quelques exercices de maîtrise de ces compétences. Donc, si vous avez des difficultés comme moi quand j'ai commencé, conçu la partie la plus difficile pour moi WAAS conception de mise en page. Ensuite, j'ai continué à analyser différents designs et je trier, vous savez, comprendre différentes techniques, et je vais les expliquer de manière simple afin que vous puissiez implémenter ces techniques dans conception d'applications mobiles vous je conception et conception de site Web. J' espère que vous allez profiter des scores. Si vous avez des questions, vous pouvez toujours me poser, et j'espère vous voir bientôt dans les écoles 2. Les bases de la conception de mise en page: Commençons par quelques petits basiques. Maintenant, la première question, chaque fois que vous allez commencer votre conception, vous devriez demander est à quel but cette mise en page sert ? Pourquoi créez-vous cette mise en page ? Quelles sont les informations que vous transmettez à votre utilisateur ? Donc, ce sont en fait les quelques questions que vous devriez commencer par. Si votre utilisateur est incapable de comprendre ce que vous essayez de leur montrer ou ce que vous essayez de faire, vous savez, les transmettre que votre alors votre mise en page est un échec. Maintenant, j'ai vu beaucoup de designers qu'ils créent des mises en page très créatives, et ils montrent ah beaucoup de styles différents dans les mises en page. Mais le problème avec leurs conceptions est qu'il n'est pas utilisable. Donc, la première chose est que vous devez comprendre que nous créons une mise en page pour montrer l' information ou les images ou notre contenu ou notre message à nos utilisateurs d'une manière significative et digeste. Donc c'est le glaçage. La deuxième chose est, vous devez en créer quelques en quelques points dans votre mise en page, sorte que vous avez besoin orteil, avoir quelque chose qui leur montre orteil. Explorez cette mise en page un peu plus. Ok, donc ce sont les premières questions que vous devriez toujours poser à vos utilisateurs. Passons maintenant à la prochaine chose, qui est également une priorité importante. Maintenant. La deuxième question que vous allez poser à vos utilisateurs ou à vos clients ou à votre entreprise, ou que la personne pour laquelle vous concevez est la partie la plus importante de cette conception . Maintenant, c'est, Ah, question, que je pense que beaucoup de designers manquent ce que vos utilisateurs vont voir pour la première fois dans votre design. Les choses sont beaucoup. Ce sont en fait les premières impressions et l'utilisation L'utilisateur est en train de se baser sur leurs décisions sur leurs premières impressions ou la première fois quelles informations ils vont voir. Comment allez-vous commencer votre histoire de design ? Comment l'histoire va se dérouler pour que vous puissiez voir lorsque vous visionnez un film ou regardez un film. Les premières 5, 10 ou 15 minutes vont aux pieds. Créer un peu d'intérêt pour le film, alors ils vont parfois montrer quelque chose dans le futur, puis ils vont revenir en arrière et montrer cela une heure plus tard ou une heure avant, ou des choses comme ça. Donc, vous allez créer un certain intérêt pour votre étude et comment vous allez le déployer afin que vous ayez pu entendre notre terme qui s'appelle Full and Design 4 est en fait la première instance de leur conception dans la fenêtre des téléspectateurs. Par exemple, s'ils regardent avec ah, bureau, ils peuvent avoir plié. 700 pixels sont 800 pixels sur un appareil mobile. Ils ont peut-être 600 ou quelque chose comme ça. Donc ce sont en fait vos cadres. Si vous avez vu une photo, il y a un cadre qui contient cette photographie. Donc, si une image est hors du cadre, vous ne pouvez pas la voir. Vous ne pouvez pas le voir, vous devez donc penser d'une manière très prioritaire à quelle information est la plus importante. Dois-je obtenir le formulaire d'inscription en haut, ou devrais-je inclure une vidéo en haut ? Voici donc quelques questions que vous devriez poser à votre entreprise et à vos utilisateurs. Maintenant, la troisième question est de savoir quel est le type de contenu ou le support pour lequel vous concevez. Donc, si votre design doit être lu sur un appareil Kindle, ou si vos utilisateurs vont voir cette application sur un commercial sur un mobile. Tout ce qu'ils vont bout consomment ce contenu sur industriel, PC ou ordinateur portable. Donc, ce sont en fait les questions que vous allez poser avant de commencer votre conception de couche . Donc, il y a en fait deux types hors types de base, hors sites Web de contenu ou conceptions. Une conception est la conception lourde de contenu, donc nous avons beaucoup de rabais sur les taxes. Nous avons beaucoup d'images, comme un blog de sites d'actualités différents sites d'articles, des choses comme ça. Ensuite, nous avons un deuxième type, qui se concentre sur quelques produits ou un seul produit. Donc, lorsque nous avons un produit, par exemple, une application mobile ou un jeu mobile, nous avons beaucoup moins de contenu. Nous ne voulons pas, vous savez, écrire vous savez, comme des centaines de paragraphes pour ce produit. Nous allons donc nous concentrer davantage sur de très petites lignes, très peu de fonctionnalités qui vont convaincre nos utilisateurs d'acheter notre produit. Donc, ce sont deux types différents hors conceptions de couches, qui vont orteils en fonction de votre contenu. Donc le contenu va en fait la forme des orteils. Votre mise en page et autre question que je vais orteil demander à mon entreprise ou à mes utilisateurs est pour quel type de fusibles je conçois, mais qu'ils sont des utilisateurs âgés là-bas, des personnes âgées et ce sont des enfants. Ce sont des millénaires, ou les gens modernes le sont. Ils sont dans la trentaine ou la quarantaine. Comment bien, ils sont familiers avec la technologie. Voilà donc les questions. Par exemple, si je conçois pour les enfants, je vais avoir des mots plus simples de la Grande-Bretagne et, ah, couleurs très vives ou vives pour les Burtons. Et aussi je vais orteil présenter l'information dans une mise en page simple. Je ne vais pas, vous savez, déplacer autour du Seigneur et créer un endroit unique où mes enfants et les personnes âgées des difficultés à trouver l'information qu'ils veulent. C' est donc très important. Si vous avez ah, les personnes âgées sont des enfants ou des utilisateurs de type différent, vous allez avoir des conceptions différentes. Par exemple, si vous avez vu que les agences de design, elles utilisent beaucoup de créativité dans leurs sites Web ou conceptions Web parce qu'elles ont ce genre d'utilisateurs, de spectateurs ou de consommateurs. Donc, chaque fois que quelqu'un va orteil goto, une agence créative, ils vont les cacher pour un travail créatif, donc ils montrent leur créativité dans leur conception de mise en page leurs choses de site Web comme ça. C' est donc très important. Vous devez considérer le type d'utilisateur que vous concevez. Pour l'instant, la dernière conception de calque de base est fonction sur forme. C' est donc un très vieux dicton de la conception graphique. Et si vous êtes d'un fond de conception graphique, vous le savez déjà. Non, qu'est-ce que ça veut dire ? Cela signifie que si vous avez un site Web ou une application mobile ou une page de destination ou n'importe quel design, votre mise en page doit prendre en charge les fonctionnalités de votre conception que vous concevez pour d'abord les fonctionnalités de votre application, votre page Web ou de tout ce que vous sont en train de concevoir. Ensuite, la deuxième priorité va aller à l'esthétique ou vous allez, vous savez, ajouter vous savez, des couleurs ou de la créativité. Alors voici mon conseil, limitez votre créativité. La mise en page devrait d'abord servir son but. Donc, cela signifie que nous allons créer une application utilisable plutôt que inutilisable très créative sur. Donc, chaque fois que vous concevez une mise en page, vous allez aux pieds. Gardez votre créativité en échec. N' essayez pas de créer une mise en page trop déformée ou trop difficile, et elle ne prend pas en charge les fonctionnalités de l'APP par exemple, vous avez vu beaucoup d'APS. Nous comme vous passez la commande et le bouton de commande est en bas. Maintenant, il est en bas. Pour une raison quelconque, il est un peu trop convivial et facile à utiliser. Donc, si vous essayez de placer ce bouton en haut ou au milieu de votre écran, cela va créer des problèmes pour vos utilisateurs. Alors gardez cela à l'esprit que la convivialité de la fonctionnalité sur da lisibilité lisibilité ceux-ci vont orteil ont plus d'importance que votre forme ou une statique ou des choses comme ça. Donc, ça va résumer cette leçon. J' espère que vous l'avez apprécié et vous verrez bientôt dans la prochaine leçon. 3. Le contenu définit la mise en page: C' est une autre erreur que beaucoup de designers font réellement, et c'est sans votre contenu. Tout d'abord, vous ne pouvez pas concevoir un modèle que vous ne pouvez pas définir. Leurs différents éléments vont aller, comment ils vont aller les uns sur les autres ou côte à côte ou des choses comme ça. Vous ne pouvez pas décider de la mise en page si vous n'avez pas votre contenu, sorte que vous ne pouvez pas décider du nombre de blocs de contenu que vous possédez. Par exemple, nous avons un titre un sous-titre que nous avons peu d'images dans l'en-tête. Donc nous avons, comme six ou sept éléments dans notre en-tête. Voilà donc les questions. Ce sont les choses que vous devez avoir avant de commencer une conception de mise en page. Donc, si vous avez comme trois articles que vous pouvez avoir, vous pouvez les organiser. Dans trois boîtes parallèles. Vous pouvez avoir une boîte un peu plus grande et deux cases sur le côté droit, donc il y a des arrangements possibles qui seront décidés en fonction du nombre d'éléments que vous avez. Alors, obtenez le contenu de votre PDG de l'entreprise ou de l'autre client pour lequel vous concevez ou de quiconque va écrire ce contenu maintenant. contenu ne signifie pas que le texte et les images que vous possédez peuvent avoir des radios. Vous avez peut-être des illustrations. Vous avez peut-être des icônes. Alors essayez ensemble toutes ces choses avant de commencer votre conception. Vous allez demander à vos clients et les emails dont j'ai besoin ce genre d'images dont je n'ai pas besoin. Je ne veux pas de ces images de mauvaise qualité ou de choses comme ça. Vous avez également besoin d'orteil obtenir des icônes que notre petit orteil équipe similaire hors de vos images ou votre texte. Alors rassemblez toutes les données et demandez à votre client qui me donnent envoyer toutes ces images, le contenu, le taxé afin que je puisse commencer à travailler sur ma mise en page ou conception. Permettez-moi maintenant de vous montrer quelques exemples de la manière dont le contenu différent va façonner vos conceptions. Alors laissez-moi, voyons quelques exemples. Non. Voici quelques exemples. Les sites Web ont forcé ses districts CS. Il est un site Web lourd de contenu pour les développeurs Web. Bien qu'ils le soient, ils utilisent beaucoup de grandes couleurs, bonne mise en page, site Web très différent et unique. Mais il est encore un site Web lourd de contenu. Nous avons beaucoup de textos ici. Vous pouvez voir alors nous avons différents articles ici que vous pouvez voir ou entendre. Et ah, encore une fois nous avons quelques articles et en destruction. Et si nous ouvrons sur l'article, par exemple, celui-ci Donc, vous allez voir que tout est disposé pour une meilleure lecture. Donc, nous avons ah, plus facile à naviguer, plus facile à lire, plus facile à digérer dans différentes sections que vous pouvez voir ici. Donc, c'est en fait le but de ce site. Maintenant, si nous passons au prochain contenu site Harry, qui est BBC English, BBC door com et vous pouvez voir que nous avons des nouvelles, nous avons les meilleures nouvelles ici. Ensuite, nous avons ici quelques nouvelles avec quelques textes et images. Donc, il est fondamentalement heureux avec le texte et les images. Donc, vous pouvez voir ceci est en fait un autre exemple sur un site Web lourd de contenu. Nous avons beaucoup de contenu. Maintenant passons à celui-ci. Ceci est Bolivar Club sombre sietch, et vous pouvez voir ici ce n'est pas un contenu très ayant des sites Web. Si nous descendons, vous pouvez voir que nous avons un très créative sur. Le Texas a bougé un peu sur la droite et vous pouvez voir ces émissions simples. Et si nous descendons, vous pouvez voir que nous avons moins d'images, moins de lignes de texte que vous pouvez voir nous avons un paragraphe sur l'en-tête. C' est ça. Donc c'est la fin. Donc, ce n'est en fait pas un site Web lourd de contenu. Il est basé sur un service, des sarees simples ou un ou deux services et un site web très simple et unique. Si nous passons à l'exemple suivant qui est Fitbit Ah, ceci est adapté versa. Light Edition site Et vous pouvez voir que cela est réellement axé sur un seul produit. Nous avons donc une très grande image de produit avec un grand titre de produit et un magasin sans bouton. Donc encore une fois, nous avons quelques fonctionnalités ici avec l'image de fond. Encore une fois, nous avons une image et une taxe ou ici nous avons encore quelque chose de nouveau et vous pouvez voir ou entendre. Nous avons très peu de lignes de texte parce que nous nous concentrons sur un produit de sorte que vous pouvez voir cela est la construction de l'image des produits du produit dans les utilisateurs avaient. Ils montrent donc des images très puissantes. Vous pouvez voir ici qu'ils ont leur application, les requins d' écran et ensuite nous avons différentes, hum ici, différentes fonctionnalités. Encore une fois, nous avons quelques fonctionnalités à gauche et à droite. Nous avons l'image est en train de changer avec les fonctionnalités afin que vous puissiez voir quelque chose comme ça. Encore une fois, vous pouvez voir une image mortelle portant cette montre. Et peu de ponts et de lignes étaient là. Donc, vous avez eu l'idée que ce n'est pas un site Web de contenu Terry. Il est en fait allégué orteil un seul produit et se concentrant sur un seul produit. Voyons un autre. Ok, donc ici, nous avons une entreprise de design ou une agence de design ? Design d'intérieur, je suppose. Et vous pouvez voir qu'ils ont créé un simple mais unique sur. Ils ont, genre, trois colonnes 12 et trois à gauche. Ils ont peu de menus et d'attaques au milieu. Ils ont une image sur la droite. Ils ont d'autres rencontres ou des choses comme ça. Informations sur le projet. Donc, encore une fois, nous avons très peu d'impôts parce que, ici, leur travail va montrer ce qu'ils peuvent réellement faire. Donc, vous pouvez voir ici de belles images de ce design de bureau. Ceci est en fait dans votre site de conception et vous pouvez voir le prochain projet. Donc, cela se concentre en fait sur un seul service. Donc, vous avez maintenant compris ce que je voulais dire en ayant le contenu pour. Donc, si vous avez tout le contenu, par exemple, vous savez que dans le premier écran, par exemple, celui-ci ici, si vous avez tous ces textes, ces fonctionnalités, vous savez déjà que vous avez cinq caractéristiques. Ensuite, vous allez les montrer de cette façon, si vous avez comme quatre fonctionnalités, vous pouvez les afficher dans quatre cases différentes les unes sur les autres. Laisse-moi te montrer. Donc, comme si vous pouviez voir quoi ? Ici, ils ont trois caractéristiques. Donc, plutôt que de les montrer horizontalement, ils ont pris la direction verticale. Donc, c'est une autre option avec la mise en page, Donc le contenu va réellement définir votre mise en page. Combien de contenu complexe vous avez, combien de colonnes vous allez faire que vous allez les montrer dans 50 50 colonne ou vous allez orteil, avoir une autre mise en page. J' espère donc que vous n'avez pas détruit l'idée de ce contenu ayant du contenu avant de commencer une conception de couche. Alors, ils ne font pas cette erreur ? Je vous donne un conseil sincère. Passons à la leçon suivante. 4. Quelles sont les grilles, la goutte et les marques,: re concepteurs. Réutiliser les saluts orteils façonnent notre conception pour façonner notre disposition et organiser différents éléments de conception selon l'orteil de cette grille. Maintenant, pourquoi utilisons-nous des notes ? Parce que les esprits humains, nous aimons les choses organisées. Nous aimons les couches équilibrées. Nous essayons de trouver l'équilibre même avec le déséquilibre dans la nature ou les choses. Nous allons donc utiliser différentes nuances, et nous allons aligner nos différents éléments en fonction d'eux, pour façonner notre design. Maintenant, nous allons comprendre ce que réellement nos notes si vous savez déjà ce que nos notes, marges, gouttières ou des termes différents, sauter cette leçon Pour ceux qui ne savent pas, Passons à la diapositive suivante. Maintenant, vous pouvez voir que je vous montre un creed de 12 colonnes pour la conception de site Web, et il s'appelle Fondamentalement Bootstrap Bridge. Boot Shop est un cadre de conception pour les développeurs Web, alors voyons ce que nos différentes parties de cette qualité. Donc, vous pouvez voir au milieu. Nous avons 12 lignes sombres ou lignes bleutées foncées. Je dirais les lignes noires juste pour la simplicité. Ok, donc on a 12 lignes noires au milieu. Ce sont en fait d'autres colonnes, donc nos différents éléments de conception allaient les placer en deux colonnes ou trois colonnes sont quatre colonnes, selon leurs tailles et races et leur disposition au milieu. Vous voyez des lignes orange et que ce sont en fait Curtis. Ce sont en fait des espaces entre différentes colonnes. Donc en ce moment, ils sont 30 pixels et la colonne Bert est 65 images. Donc, ces espaces vont effectivement avoir une certaine marge de respiration à l'intérieur de notre contenu ou dans notre page à gauche et à droite. Vous pouvez voir ces zones bleues qui sont en fait des marges. Les marges vont aux pieds. Ayez un peu d'espace pour respirer autour de votre design. Donc les gouttières vont avoir une certaine marge de respiration à l'intérieur de votre design et les marges vont les avoir à l'extérieur. Donc, ces deux sont très, vous pouvez dire très important. Maintenant, je vais partager une ressource où vous pouvez télécharger tous les types différents sur différents systèmes de grille pour différents appareils et différents Vous avez été conçu des outils pour fig ma pour Roby X t pour la boutique pour croquis. Ce n'est pas par moi, et c'est de certains que vous êtes cabinet de design, donc je vais partager ce lien. Je les utilise normalement dans mes projets. J' ouvre cette grille et commence à construire mon design à partir de là. Alors assurez-vous que votre téléchargement que je vais orteil inclure le lien. Maintenant, laissez-moi vous montrer comment vous allez utiliser ces qualités et comment j'ai été le design simple juste pour vous montrer comment utiliser ces caisses. Maintenant, vous pouvez voir tout ici en haut. Ici, nous avons un très gros cap, qui est celui-ci et j'utilise Ah, tout le vert de celui-ci et juste au centre. En l'alignant. Donc, si vous avez un élément qui est aligné au centre ou au milieu de votre conception, vous n'allez pas vous inquiéter de vos lits d'enfant. Donc, c'est aussi la ligne centrale, et ce fardeau est également centré Ligne. Mais vous pouvez voir ou entendre que ce fardeau s'étend sur quatre colonnes ici, sorte que vous pouvez voir ce sont en fait 1234 colonnes, y compris leurs gouttières. Donc, chaque fois que vous placez ah, vos objets de conception, ils vont aux pieds. Ils vont orteils prendre comme, ensemble deux colonnes ou peut-être trois colonnes et peut-être la colonne complète 678 Mais il y a une partie parce que j'ai vu beaucoup d'étudiants qu'ils commencent à faire cette erreur. Ne limitez pas votre créativité que nous allons avoir un bouton qui va parfaitement à l'orteil . Ces quatre colonnes, vous pouvez avoir un fardeau comme celui-ci. Ok, donc tout dépend de vos propres idées. Et tu peux Tu ne vas pas toujours aux pieds. Utilisez les mots et les hauteurs de vos éléments. Selon Toa ce script, ils sont juste là pour aligner différentes choses. OK, alors passez à la suivante. Vous pouvez voir la section suivante. Nous sommes en avance ici. J' ai ce graphique à gauche, qui est une illustration, et vous pouvez voir que je l'ai. Ah, en 1234567 colonnes. Donc ça prend sept colonnes ici. Et puis j'ai laissé cette marge et j'ai commencé mon C'est fondamentalement gooder. Et puis j'ai commencé mon texte en partant découvert. Maintenant, ce que cela signifie en fait, c'est que chaque fois que vous allouez vos notes nombre de notes à un contenu, vous allez quitter les pieds. Ah, et le suivant aura une distance entre eux. Il nous faut donc une certaine distance. Nous devons donc laisser cette marge. Alors essayez de comprendre cela. Par exemple, si j'essaie orteil, , disons que j'essaie de serrer ça. Oups, j'ai essayé les orteils. Déplacez ça. Et par ici. Maintenant, vous pouvez voir que j'utilise 1234 colonnes ici. Et je laisse ces deux gouttières et ça l'appelle d'ici. Non, je ne peux pas faire quelque chose comme ça, même si je peux le faire. Mais cela signifie en fait que je prends 12345 colonnes. Donc, que vous le déplaciez ici ou là-bas, vous utilisez cinq colonnes. Donc, chaque fois que tu ne quitteras pas Ah, toute la colonne, tu vas laisser cet espace une colonne et c'est un scooter. Ok, donc maintenant, si je veux O arranger mon, vous pouvez voir les espoirs que X bouge ça. Je vais le déplacer ici. Maintenant, il faut quatre colonnes, pas cinq. Mais chaque fois que je sourit mes éléments de conception, il commence à occuper la prochaine gouttière. Il prend en fait la colonne suivante. Assurez-vous donc que vous concevez et que vous comprenez comment ceux-ci créent réellement du travail. Laisse-moi aller au magasin et te montrer ce que je voulais dire. Donc, . Donc, si je veux le presser, peut-être que je veux avoir plus d'espace. Et je veux, tu sais, rattraper sur Hit. Ok, donc maintenant vous pouvez voir. Bien que j'ai réduit la taille de ce graphique, il prend toujours 1234567 colonnes. Donc si j'essaie de le réduire un peu plus Ok. Donc ici encore, il faut sept colonnes. Si je veux que ça prenne six colonnes, j'ai les orteils éloignés de ce couteau. Maintenant, il prend 123456 colonnes. Et nous avons laissé une colonne ici. Donc, c'est en fait comprendre comment vous allez utiliser ces grilles ? Beaucoup de designers, mes étudiants, font des erreurs. Ils ne savent pas comment les utiliser. Donc je pense que ça va vous éclairer sur la vôtre. Augmenter. Si vous avez encore des questions, vous pouvez les poser. J' ai vu des étudiants qui m'ont posé, genre, 10 questions en une journée, et j'apprécie vraiment. Ok, passons à la leçon suivante et creusons un peu plus dans les notes 5. Comment combiner des colonnes dans des grilles: Maintenant. Vous avez déjà appris pour Griggs ? Non. La question est de savoir comment nous allons combiner différentes colonnes à l'intérieur d'une grille. Pourquoi devrais-je combiner quatre colonnes pour ce contenu ? Et pourquoi pas six colonnes ou la moitié des colonnes ? Cela dépendra donc du contenu que vous avez. Si vous avez peu de lignes, il se peut qu'elles s'intègrent dans trois colonnes. Si vous avez juste un logo, il peut tenir dans deux colonnes. Donc, c'est en fait la question que vous allez demander que votre type de contenu va définir vos caisses et votre mise en page. Donc c'est ce que je voulais dire. Votre contenu. Si elle est petite, elle va être en forme de remorquage. Colonnes plus petites. Nombre de colonnes. Et si nous avons une très grande image, cela pourrait prendre 12 colonnes ou même aller en dehors de cela. Permettez-moi donc de vous montrer et d'illustrer cela avec un exemple que nous avons vu dans la dernière leçon. Alors voyons maintenant. C' est le même design que je t'ai montré dans la dernière leçon. Et vous pouvez voir que j'ai un peu changé de la mise en page. Donc, vous pouvez voir que nous avons ah graphique sur la droite nous avons 123456 colonnes et la structure ici prend également six colonnes ou ici pour que vous puissiez voir ou entendre Il est jusqu'ici, mais en fait il prend six colonnes hors. Chaque fois que vous êtes développeur ou quartier, ils vont à la cour de ce site. Ils vont mettre les pieds et développer ce site web. Ils vont aux orteils. Localisez six colonnes pour les piles ici et alignez-les sur la gauche. Donc vous pouvez voir que je vous ai montré dans la dernière leçon que vous pouvez les aligner au milieu ou vous pouvez les avoir sur la gauche. Donc c'est totalement différent maintenant. Dans la section suivante, vous pouvez voir que nous avons nos services PIB, notre PIB sont ou ces icônes que nous avons donc icônes et ce texte nous avons très petit texte. C' est comme trois lignes ou maximum quatre lignes. Donc ce que j'ai fait, c'est que j'ai trouvé quatre colonnes pour chacune d'elles quatre colonnes qu'une gouttière ici. Encore une fois, nous avons, hum, quatre colonnes par ici. Encore une fois, nous sommes arrivés ici. Puis encore une fois, nous avons quatre colonnes étaient ici, donc vous pouvez voir que c'est. En fait, nous le sommes. Et c'est comme ça qu'on utilise celle d'Ingrid de Joe. Donc nous laissons ces gouttières pour que les orteils aient une certaine marge de respiration à l'intérieur de ces trois blocs de contenu , donc vous devez garder cela à l'esprit. Ce sont trois blocs de contenu et nous allons de sélectionné sur. Aussi, vous pouvez voir ici à nouveau. Nous avons deux blocs de contenu différents un et donc ce sont deux blocs principaux. Il s'agit en fait de l'introduction ou d'une sous-position. Il en va de même de la ligne de balise et puis d'un fardeau. Ensuite, à droite, nous avons une illustration. Donc, ce sont en fait deux blocs de contenu différents que nous avons. Donc, en fait, nous concevons en blocs. Ok, donc, euh, qu'est-ce que c'est d'autre ? Chaque fois que vous concevez en utilisant des grilles Ne pensez pas seulement à des nombres comme 678 Essayez de penser en pourcentages comme celui-ci est 50% et ceci est 50%. Donc, nous devons colonnes grandes colonnes qui sont 50 50% en prenant un peu 50% pour cette image ou illustration, et 50% pour le contenu. Ensuite, ici, nous avons 33% ou 33,33 t et 30 points TT. Donc c'est en fait comme ça que vous allez penser. Si vous voulez avoir un design flexible ou réactif, vous n'allez pas penser en termes. Deux colonnes, trois colonnes ou 12 colonnes de 16 colonnes ou sept colonnes. Vous allez penser en pourcentages que cette mise en page a 60% d'image et 40% de texte et des choses comme ça. Donc, c'est en fait un concept très important. C' est pourquoi j'ai créé ce design, et je l'ai échangé et le change vers le haut pour vous montrer qu'un seul contenu a plusieurs mises en page. Non, j'espère que vous avez compris le sens de ces croyances et comment vous pouvez effacer différentes mises en page. Comment vous allez penser orteil en termes de pourcentages y créer vos mises en page. Si vous avez des questions, demandez-moi. Passons à la leçon suivante. 6. Principes de base et rythme vertical: Maintenant, nous avons déjà parlé de colonnes et de systèmes de grille, mais qui sont fondamentalement horizontaux dans la direction gauche droite. Maintenant, nous allons parler de l'espacement de haut en bas, qui est appelé grade vertical ou rythme vertical. Maintenant, j'en ai beaucoup parlé dans le cours de ma typographie Gore, mais maintenant je vais le répéter à nouveau parce qu'il est très pertinent pour votre mise en page et espacement. Maintenant, si vous regardez par ici, j'ai montré cette base pour non. La première chose que vous devez établir est votre base. Quatre. La taille du baseball est en fait la quatrième que vous allez utiliser pour tous vos paragraphes ou 90 % réduction sur vos paragraphes. Ça va être la base de tous vos calculs. Maintenant, chaque fort, quelle que soit la police de caractères, vous aurez une ligne. Hauteur de la ligne est en fait la distance entre deux lignes. Vous pouvez voir le haut et le bas. Et si je clique ici, vous pouvez voir à droite. Nous avons 24 lignes espacement en ligne. Se cacher. Si j'essaie de l'augmenter, vous pouvez voir que les lignes vont orteils, s'effondrent et ont plus d'espace dedans. Maintenant, cette hauteur de ligne va jouer une règle très essentielle dans votre plus grand rythme vertical vertical vertical. Donc, ce que nous faisons est d'établir une base pour la taille qu'une hauteur de ligne, puis nous multiplions ces deux valeurs 18 multipliées par 1,3333 et il est presque plus proche 24 pixels. Maintenant, ces 24 pixels vont en fait être la base, ou vous pouvez dire unité basée sur votre grille verticale. Maintenant, je vais vous montrer la note verticale dans Adobe X D. Vous pouvez le faire dans la boutique. Vous pouvez le faire dans un croquis. Si vous me voulez, je peux créer un tutoriel YouTube sur cela pour les créer verticalement sur les trois trois vous outils de conception blanc. Ok, donc basé en bon, on a la hauteur de base. Multipliez plinthe, hauteur de ligne multijoueur. On a Baseline Creed. Il essaie de quatre pixels. Maintenant, vous pouvez voir que c'est en fait laissez-moi vous montrer comment vous pouvez le faire. Et vous pouvez voir que ce n'est en fait pas l'OTAN 18 24. Donc, c'est en fait que nous avons utilisé le téléphone basé et la hauteur de ligne de 1,33 qui va être 24. Maintenant, laissez-moi vous montrer un exemple. Laissez-moi vous montrer le même design que nous avons fait dans le passé. Et si nous allons par ici, laissez-moi cacher cette note de répétition et sur ce contenu, ou ici, vous pouvez voir que c'est la même chose que nous avons conçue. Je change un peu la disposition. Nous avons la ligne centrale, tout en haut. Et puis nous avons cette section de nos services. Maintenant, vous pouvez voir l'espacement, comment je vais. Euh, non, que ce texte ce titre et la distance entre le sous-titre doivent être donc comment je vais connaître la distance. Ah, dans une distance verticale verticale verticale entre mes différents objets. Par exemple, celui-ci Cliquez ici. Et si j'appuie sur l'art ou la touche d'option, vous pouvez voir que je peux voir la distance entre les achetés. Il est presque 88 pixels sur. Ensuite, si je clique à nouveau ici, cette 1.3 à nouveau si je clique sur la surcharge est 46. Ok, Donc une autre chose est que dans la conception web, votre hauteur de ligne fonctionne différemment. Donc vous pouvez voir que si je sélectionne celui-ci, il est 24. 36 est la hauteur de la ligne pour celui-ci et 24 est la taille. De même, nous avons 67 67 67 est cette taille pour la hauteur de ligne, qui est une hauteur de ligne 100%. Ok, donc en fait, vous pouvez voir que vous voyez de l'espace au-dessus et au-dessous de ce texte. Donc, c'est un peu de différence dans la conception web que quelle que soit la hauteur de la ligne que vous allez sélectionner, il va orteils ont tout ce bloc pour cet espace. Donc, tout ce bloc va prendre 67 pixels de hauteur. Donc, vous devez considérer que si vous cliquez ici, vous pouvez voir qu'il est 36 hauteur de ligne, donc il va prendre 36 pixels verticalement orteil, vous savez, permettant ce texte. Donc, chaque fois que vous conceviez pour des sites Web, vous pouvez voir ce qu'un clic gratuit ici Cette maison ont beaucoup d'espace en haut et en bas de la même façon, ceci et cela aussi. Maintenant, vous pouvez voir comment j'ai créé ce Bon vertical. Donc si je fais ça un peu comme ça pour que vous puissiez voir par ici si nous regardons de près, vous pouvez voir que ce texte ici il est à l'intérieur de ces X zoom dans un peu plus Il est à l'intérieur ces un orteil Voir, eso a gagné orteil voir et quatre, près de quatre niveaux de référence. Donc c'est en fait si nous voulons l'aligner, nous pouvons aussi l'aligner comme ça sur la vie. Donc si vous pouvez voir de près toute la zone de désossage est en fait dans le bleu. Donc, nous avons 12345 Donc nous avons presque cinq espaces verticaux pour cela. Ok, De même, si nous cliquons ici, vous pouvez voir ceci est notre texte. 123456 villes presque prendre six Et puis nous avons presque trois au-dessus et trois à dessous presque. Oh, Bill ! Donc, si on le déplace un peu vers le haut, vous pouvez voir maintenant qu'il va bout d'une ligne. Ce cadre de sélection va s'aligner avec ces lignes aériennes. Donc c'est comme ça que nous allons aligner nos choses sur. Maintenant, déplacons celui-ci un peu vers le bas. On a quelque chose comme ça. Donc maintenant vous pouvez voir ce bloc bleu bloc est dans cette rose quatre. Donc ce sont en fait notre rythme vertical Rose. Alors on a cette heure. Burton, si nous cliquons ici, vous pouvez voir qu'il prend aussi 12345678 espaces verticaux. Et de même, vous allez l'espace des orteils sur l'ensemble de vos conceptions. Tout va être espacé verticalement. Maintenant, il y a un truc. Si vous concevez quelque chose, évidemment quand vous avez, quand vous allez commencer un nouveau bloc d'information une nouvelle section de votre site Web un nouveau um, vous pouvez dire fonctionnalité de votre site Web ou tout ce que vous êtes la conception. Vous allez avoir plus d'espace ici. Vous pouvez voir ou entendre. On a un peu plus d'espace ici. Ensuite, nous avons entre ces fardeaux et celui-ci, vous pouvez voir que c'est bon, donc c'est très important. Plus d'espace lorsque vous démarrez une section plus d'espace lorsque vous terminez une section et moins d' espace lorsque vous êtes dans une section, donc comme vous pouvez voir ou entendre Ici, je montre les services d'en-tête de section et ensuite nous avons quelques icônes ici. Donc c'est une autre chose. Je pense qu'on va en parler. Je vais vous montrer mon processus et mon design que le dernier designer a travaillé et comment il a réellement créé. Ah, tout le système des matelas verticaux et vous pouvez dire des briques. Je les appelle normalement briques verticales. Et j'ai utilisé ces blocs verticaux ou briques orteils créer tout mon design et exprimer. C' est donc très important. Vous devez créer cette verticale. Super. Si vous voulez savoir comment créer cette grille verticale, il suffit de créer, hum, uh, rectangle de 24 pixels et de supprimer cette bordure ou ici. Changement. Je vais changer les orteils de couleur X quelque chose comme ça, et puis on va les orteils, euh, dupliquer et répliquer, et je vais supprimer tous les espaces entre eux. Je vais rendre ça un peu ennuyeux comme ça. Non, on doit les retirer. Répétez, génial , avidité créée , avidité, et nous allons le répéter comme ça. Maintenant, nous allons combler l'écart entre ces deux-là. Et ici, nous avons tout le patron. Vous pouvez également créer un patron dans un court de pour la boutique et appliquer ce motif à l' arrière-plan de votre image. Tout votre site Web Vous pouvez voir si je place ce texte ici comme moi. Déplacez un peu vers le haut comme ça. Et si je le déplace ici, vous pouvez voir en ce moment qu'il est dans toutes ces lignes. Donc c'est en fait un rythme vertical. J' ai donc 24 grandes hauteurs de ligne, donc il s'adapte parfaitement dans 1234 espaces verticaux. Donc, c'est en fait comment fonctionne le rythme vertical, et vous allez espacer les choses. Donc, par exemple, si j'ai quelque chose comme ça ou ici et que je veux créer un cap ici, maintenant, si vous regardez ici, je peux l'espacer entre ces trois lignes. Donc en ce moment, il prend en fait les trois espaces verticaux. Donc, si vous voulez le déplacer ici comme ça, vous pouvez aussi le faire. Et nous avons presque la moitié de l'espace entre ces deux-là. Voyons combien d'espace nous avons entre les deux. On a, genre, 11.3. Alors faisons-le 1000 Dean et 11. Donc, vous pouvez avoir une chose de plus, qui est appelé blocs et, par exemple, nous avons 24 pixels hors rythme vertical et 1/2 off 24 est 12 donc je peux avoir un espace de 12 entre ces conseils. Donc, c'est en fait 48 56 hauteur de ligne, et c'est 18 pixels de certains ponts et 24 hauteur de ligne, et l'espace entre eux est en fait exulte réelle est de 12 pixels. Tu peux avoir quelque chose comme ça. Donc maintenant je vais cacher ce rythme, créer, créer, et vous pouvez voir que nous avons un très bel espacement équilibré entre le titre et c'est mieux le graphique . Donc, c'est, je pense, une technique très simple, et vous pouvez dire une méthode très simple que beaucoup de designers commencent à utiliser dans leur conception. C' est pourquoi ils ont des incohérences dans leur espacement verticalement et horizontalement. Et j'espère que vous avez apprécié cette leçon. Si vous avez des questions sur la verticale, génial, je vais aller plus en détail dans les prochaines leçons pour me poser la question Passons à la leçonsuivante leçon 7. Les blocs verticaux pour espacer ► Secret: Maintenant, vous avez déjà appris sur la verticale créée. Mais maintenant je vais partager avec vous un secret. Les grands designers créent vos concepteurs, créent des concepteurs Web, et c'est en utilisant des blocs d'espace blanc ou des briques. Je les appelle des briques. Vous pouvez les appeler matelas verticaux ou blocs verticaux ou tout ce que vous avez. Tu veux les appeler. Je vais te montrer ça. Comment ? En fait, j'ai créé ce design chez moi. Partagez avec vous comment j'ai réellement créé Xheight. Ça Ok, donc c'est en fait un design hors page de destination ? Je l'ai fait récemment. Pourtant, nous travaillons sur la section de la cour de celui-ci, pour que vous puissiez voir ou entendre. C' est un design très équilibré. Vous pouvez voir l'espacement entre les différents éléments entre les différentes sections et les en-têtes et le contenu de leur section. Et c'est cohérent par ici. Vous pouvez en voir certains de la même manière ici encore dans cette section. Je vais partager ce design. Peut-être une dans les prochaines leçons. Plus parce que je dois vous montrer d'autres techniques hors alignements et Leo X. Maintenant, le secret réside dans votre espacement vertical. Maintenant cachons celui-ci, et je vais vous montrer comment j'ai le système éteint ou rigoler les espaces. Donc, à gauche, vous pouvez voir que j'ai quelques composants qui sont appelés 1 2096 70 à 64 56 48. Ce sont toutes différentes tailles de briques ou blocs verticaux. Soho. En fait, je place mes objets. Laisse-moi te montrer si on place ce 20 ici. Donc, il est de 1 20 pixels. Vous pouvez voir que c'est en fait ce sont des composants. Donc je vais expérimenter comme ça. Je vais vous montrer dans une minute mes dessins secrets. Et je pense vraiment que la plupart des gens ne l'utilisent pas comme ça. Ok, donc presque 20 y compris cette ombre comme ça. Donc ça va être ici 24 heures. Je crois qu'on en a 36 ici. Comme ça. Hum, ça va être à l'intérieur. Sonnez juste. D' accord. Donc encore une fois, 1 20 parce que nous avons une section oups, section ou ici. Vous pouvez voir comment j'utilise le système d'espacement différent entre les différents éléments ici. Je pense que ça suffit. Plus que suffisant. J' ai déjà créé beaucoup de lignes roses ici de toute façon, donc c'est en fait à quoi vous êtes système d'espacement devrait ressembler. Maintenant, vous pouvez voir que c'est en fait une technique secrète. Je suis révélateur en ce moment. J' ai vu beaucoup de dessins et je n'ai pas pu comprendre comment le monde de l'espacement différent . J' ai donc envoyé un e-mail et considéré avec deux concepteurs mawr experts et leur ai demandé comment. En fait, l'espace sont différentes sections et ils ont dit que le haut et le bas chaque section est presque égal. Donc quoi que ce soit, vous allez partir en haut comme nous avons gagné 20 photos et encore au bas nous avons gagné 20 choix est de nouveau quand une nouvelle section va commencer. J' ai 1 20 pixels en haut et je me demande des représentations est hors espace blanc en bas et vous pouvez voir entre les sections, nous avons moins de base, donc vous devez créer un système d'espacement de vos conceptions d'abord. Alors essayez orteil, obtenez ces blocs, et ces blocs vont orteils en fonction de votre ligne de base. Donc, par exemple, si j'ai une ligne de base désactivée comme, um 24 ou peut être dans un nombre pair, essayez orteil, ayez une ligne de base en nombres pairs. C' est plus facile et essayer de créer des blocs qui ont une bonne différence les uns entre les autres. Comme 24 J'ai 24 36 48 56 64 72. Je n'ai pas de choses comme 1 21 118 Parce que de cette façon, si j'essaie de créer un espace de 1 20 et 1 18 là, cette différence n'est pas perceptible. Donc, chaque fois que vous créez cela, vos blocs verticaux essayer orteil ont des blocs de différentes tailles qui ont une bonne quantité de off. Vous pouvez dire comme 25 à 30% une différence hors taille entre eux. Vous pouvez voir qu'on est là. Ici. J' utilise 36 que 24 puis 1 2120 32 Il doit être 36. En fait, je pense que j'ai peut-être raté quelques pixels ici. Donc, il est en fait 36. Ça doit être allumé. Cela doit également être cohérent avec l'ensemble de votre conception. Ensuite, j'ai sous-titre vers le contenu. 72 pixels. 1 20 Puis encore, en fait, j'ai utilisé un peu moins d'espace ici parce que je pense que ces deux sections devraient appartenir dans ah, même section donc elles sont presque liées. J' ai donc utilisé 1 20 espace, puis j'ai modifié mon espace. Autre qu'avoir 72 j'ai utilisé 56. Donc c'est un autre. Encore une fois, nous avons gagné 20 au bas de cette section 64 après cette rubrique 64 64 entre tous ces différents témoignages. Encore une fois, une nouvelle section va commencer. Donc je vais laisser 1 20 au fond et ah, pour avoir une certaine séparation entre ces deux-là. Encore une fois, nous avons 36 avant le slogan suivant ou vous pouvez voir le futur paragraphe commence que nous avons 56 entre les points de ces puces et ce paragraphe. Et puis encore une fois nous avons 48 48 40 ans et 48 répéter pour tout cela la liste des articles. Encore une fois, nous avons gagné 20. Donc c'est vraiment, vraiment important. Vous devez appliquer cette technique à l'ensemble de votre conception et de votre direction verticale. Il va aux pieds. Vous pouvez dire améliorer votre conception 200% afin que vous puissiez voir ici si nous allons à cette section et j'ai traîné ici, C'est en fait 72 en haut et 72 en bas. Donc, ça a l'air vraiment sympa. Donc, si je Si vous regardez ce design et j'essaie de le réduire quelque chose comme ça, il ne va pas être très agréable. Donc, il a moins d'espace à la porte. Plus d'espace en bas. Essayez donc d'avoir quelque chose qui ont le même haut et le bas Pour chaque section que vous concevez qu'à l'intérieur des sections, nous allons avoir un système d'espacement Define. Donc, c'est essentiellement votre système d'espacement. J' appelle ça des blocs verticaux. Je les utilise dans tous mes designs comme ça. Vous pouvez voir que c'est comment en fait, cela a été présenté de la même manière sur votre version mobile sur vos appareils mobiles. Ces blocs vont être plus petits. Donc ici vous pouvez voir si vous regardez tout ici, nous avons moins d'espace. Je crois que c'est 56 ici, je suppose. espoirs ? Hum, 56. Oui. Donc, dans ma conception mobile, ce que j'ai fait est en fait que je l'ai réduit à 56 nous avons 56 ou ici de la même façon 56 ici. Donc, vous pouvez voir que c'est en fait comment vous allez changer votre conception ou bloquer le système pour votre application mobile. Nous allons donc avoir des tailles plus petites parce que nous avons un petit écran ou de petits appareils. J' espère que vous avez appris et apprécié ce secret de mes dessins, et j'espère que vous allez les essayer dans vos dessins à Si vous avez des questions à me poser, passons à la leçon suivante. 8. Équilibrer votre mise en page avec des blocs: dans cette leçon, je vais partager et d'autres secrets qui équilibrent votre mise en page. C' est le plus difficile. Demandé à beaucoup d'entre nous, nous pensons que nous devrions avoir un équilibre symétrique entre tous les différents éléments hors de conception. Nous avons peur d'utiliser l'espace blanc. Donc, la plupart des fois que nous essayons de remplir et d'équilibrer ont été raffinés qu'ils sont ici. Nous avons l'espace vide que nous essayons de remplir. Donc c'est le, ah, beaucoup de designers. Ce sont les plus grosses erreurs qu'ils commettent. J' ai vu beaucoup de designers, même moi. Je pense qu'il y a un an ou deux ans, j'étais comme ça. Je n'ai pas compris comment fonctionne réellement l'espace blanc et comment vous allez orteils. Vous pouvez utiliser ça Ah, dans beaucoup de phase différente. Donc, ce que nous allons faire ici, c'est qu'il y a deux points que vous devez garder à l'esprit. Le premier est que chaque fois que vous équilibrez vos mises en page, vous pensez que vous avez des blocs de bois différents et que vous les mettez les uns sur les autres. C' est un moyen d'équilibrer votre mise en page Donc, comme si j'avais deux boites en bois de mandats, de dalles ou tout autre bloc en bas. Ensuite, je vais me lever un orteil, et je vais en placer un autre au sommet. Donc, ce est en fait aller orteil ont un très différemment sur. Donc je vais vous montrer quelques exemples et ensuite je vais mieux l'expliquer parce que, que, ce moment, je pense que vous pourriez imaginer comment c'est possible ? Donc, voyons et voyons quelques exemples de mises en page. Et puis on y va. Je vais vous montrer quelques exemples réels de différents sites Web ou conceptions Web. Toe, commencez avec cet équilibrage de mise en page. C' est la première mise en page que je vais vous montrer. Beaucoup de fois, vous avez peut-être vu différents magazines, différents livres, et vous les avez lus. Et vous avez vu que c'est une sorte de Léo typique Ils ont. Ils ont un grand espace blanc cassé en haut à droite en bas à gauche. Et une chose que vous allez remarquer tout ici est que nous avons plus d'espace blanc ici sur la gauche, et aussi nous avons beaucoup d'espace blanc en haut. C' est ainsi que, en fait, ce bloc d'espace blanc fonctionne. Et puis nous avons ces trois blocs ici pour le contenu. Et encore une fois, nous avons beaucoup d'espace libre. Ou vous pouvez dire bien ici pour séparer ces deux éléments d'information comme celle-ci. Ok , encore une fois, nous avons un écart sur la droite, qui s'appelle encore Marges sur la droite. Donc on a quelque chose comme ça. Et encore une fois, nous avons, ah, la marge de frontière pour tout le reste. Donc vous pouvez voir maintenant que j'ai mis en évidence l'espace vide dans cette conception, et c'est plus que tout le contenu est. Donc, chaque fois que vous avez plus d'espace blanc que le contenu, il va avoir l'air très net et propre. Donc c'est une autre façon de s'en sortir. Vous pouvez voir le contrôle. Allez, D. Donc on a ça ici, et tu peux te voir. Pouvons-nous avoir Si vous considérez que ce sont trois blocs, cela peut aussi être un espace blanc. Donc, si je supprime celui-ci dans le bloc blanc du milieu, cela peut aussi devenir un espace blanc afin que vous puissiez avoir une très longue image par ici, puis aller et attaquer par ici. Tout dépend de la mise en page que vous essayez. Il y a donc beaucoup de possibilités. Ne pensez pas que vous allez avoir trois ou quatre colonnes ou 50% pour notre image et 50% pour le texte. Il y a donc beaucoup de possibilités de différentes options pour vos mises en page. Maintenant, je vais vous montrer une autre technique qui laisse de l'espace. Et ça va avoir l'air très, vraiment sympa. Donc, c'est une technique que j'utilise quand je pose des choses. Et ah, qui est-ce que tu peux voir quoi ? Ici. Ici, nous avons un gros bloc, qui prend 12345 colonnes et j'ai volontairement laissé une colonne entre les deux. Et encore une fois, je me suis partagé. Vous pouvez voir l'image ou les informations ou les icônes en trois blocs différents. Donc j'ai que vous pouvez dire. En fait, j'ai intentionnellement créé un bloc d'espace blanc ici, donc c'est très important. De même, vous pouvez voir que nous sommes là à nouveau. J' ai fait la même chose, mais en fait je l'ai modifiée. Donc ce que j'ai fait c'est en fait que j'ai enterré les mots de mes pâtés de maisons. Vous pouvez voir qu'ils sont différents. Imaginez juste que ce sont des blocs de bois différents. Donc, si je me mets sur l'autre comme ça, ils vont s'équilibrer facilement. De même, plutôt que de vivre l'espace blanc ici, je peux faire la même chose par l'espace blanc serait ici. Donc, plutôt que d'avoir tout, je peux l'utiliser pour que tout mon design soit décalé vers la gauche et avoir plus d'espace sur la droite. De même, je peux faire la même chose en laissant un espace blanc sur la gauche et en déplaçant tout comme ça . Donc, ce sont des options différentes. Tu dois payer à sec. N' essayez pas, vous savez, penser en blocs et vous pouvez voir des blocs simples et toujours essayer de faire quelque chose comme ça . Nous n'avons pas besoin de tout remplir comme ça, alors n'essayez pas de penser de manière simple. Essayez de laisser de côté, essayez de très choses qui sont différentes et qui vont avoir ah, différentes options d'espacement pour créer un certain intérêt. Maintenant, j'ai un autre lee dehors et vous pouvez voir tout est rempli et ah, maintenant ce que je veux vraiment vous montrer est ah, combinaison de colonnes grossières. Donc, c'est en fait comment vous pouvez aller orteil créer différents combos hors de votre colonne de grille afin que vous puissiez voir en haut. J' utilise 123 blocs et chaque bloc prend quatre colonnes ici. Mais dans la partie suivante, ce que j'ai fait est en fait que je l'ai varié. Je viens de créer un bloc et un plus grand bloc pour couvrir cette zone. Donc, cela va créer un certain intérêt chaque fois que vous changez vos combos. Donc, si vous êtes ah, joueur de jeux vidéo, vous savez que si vous continuez à jouer O r avec le même gin combo et encore une fois, vous allez perdre avec votre adversaire. Cela ne va donc pas être très intéressant. Alors essayez toe créer combos comme par exemple, je peux aussi faire quelque chose comme ça. Peut-être, Ah, je fais quelque chose comme ça. Plutôt que d'avoir trois différentes trois mêmes colonnes différentes, je peux avoir quelque chose comme ça. Je peux avoir deux blocs à droite et à gauche, qui sont identiques. Et au milieu, j'ai deux blocs qui vont prendre deux colonnes. Donc, il y a beaucoup de variations que vous pouvez pâte, alors essayez de très votre conception. Peut-être qu'on peut sauter quelque chose comme ça ici et qu'on a beaucoup d'espace. Donc, il ya beaucoup de variations que vous pouvez créer votre avec différentes grandes colonnes, combinaisons Cambone et en utilisant efficacement l'espace blanc. Maintenant, ici, je vais vous montrer à nouveau comment vous pouvez combiner différentes colonnes. Vous pouvez avoir quatre éléments que vous pouvez avoir. Divisez-les en deux. Vous pouvez avoir quelque chose de centre aligné comme celui-ci sur. Vous n'avez pas à vous soucier de les combiner. Tu peux avoir ce que Richie a prévenu. Et c'est presque la mise en page. Un site Web typique que vous pouvez voir sur la droite en haut. Nous avons quelques liens ici qu'à gauche. Nous avons un logo que le titre, et puis nous avons quatre fonctionnalités ou quelque chose comme ça. Ensuite, nous avons une image. Nous sommes ici à droite et à gauche nous avons encore un texte. Il peut s'agir d'un champ d'abonnement par e-mail ou quelque chose comme ça. Je suis là. Venez combiner 3456 Sound it et quatre colonnes, puis à nouveau, 50 50. Alors essayez de très votre mise en page, par exemple. J' en ai quatre ici. Encore une fois, je dois venir ici maintenant. En fait, j'ai cassé mes utilisateurs, vous pouvez dire que vous pouvez dire utilise les yeux que vous pouvez voir En ce moment mon utilisateur voit l'espace comme celui-ci et puis je l'ai cassé à nouveau et déplacer l'espace ici. Donc, nous avons un contenu en destruction en ce moment. De même encore, je suis revenu avec ici, Donc, c'est en fait très ating votre espace blanc et ayant différent, combinaison différente de vos colonnes. Cela va orteils ont un très bon effet sur votre design. C' est le dernier exemple que je vais vous montrer. Et c'est très unique et très différemment sur et qui est en fait, j'ai vu beaucoup de sites Web, principalement des sites Web, agences opérationnelles de site Web créatives qui ont utilisé ce genre hors mise en page, qui est tout ce qui est important est aligné sur la gauche. Donc, nous avons un très gros cap ici. C' est en fait que leur logo, la SEC. C' est en fait une navigation. Il peut être en haut ou il peut être sur le côté droit et sur la gauche. Nous avons des titres très grands et audacieux, et tout le reste est un espace blanc. Donc ça va avoir un impact sur cette section ici. Donc, ça va avoir, hum, beaucoup d'importance. Quelque chose comme ça. Donc, il va orteil briller dans le noir. Donc, il est quelque chose comme ça sont vous pouvez dire sombre dans une pièce blanche. Donc, si vous placez ah table noire dans une pièce blanche et il n'y a rien d'autre, vous vous concentrerez toujours sur cette table noire de la même manière, sur la dans la section suivante, ce qu'ils font est que nous avons tête à gauche très grand titre et texte ou des informations ou des images sur la droite, et ils continuent comme ça. Donc, c'est un très joliment sur le très beau style. Vous pouvez l'essayer dans vos différents sites Web ou représenter Non, je vais vous montrer quelques exemples. Je pense que cette leçon est déjà très longue. Donc, je vais passer à la leçon suivante, et nous allons voir quelques exemples réels et comment différents espaces vides ont été utilisés sont différentes couches ont été utilisées par différents designers. Passons donc à la leçon suivante. 9. Équilibrer vos exemples de mise en page: Maintenant, le premier exemple que je vais vous montrer est cette page. Je ne me souviens pas, en fait continuer à collecter différents modèles. Donc, ce n'est pas mon design sur ce est d'autres concepteurs design. Quoi qu'il en soit, je l'aime vraiment Comment simple et élégant Il est beaucoup hors utilisation de l'espace blanc. Donc, si vous regardez de près, vous pouvez voir à gauche que nous avons beaucoup d'espace libre ici. Donc, plus de contenu commence à partir d'ici comme ça et encore en bas. Nous avons beaucoup d'espace de travail sur la droite. Nous avons beaucoup d'espace de travail, et en haut, nous avons beaucoup d'espace blanc. Donc, vous pouvez voir qu'il est typiquement notre livre lee où nous avons plus d'espace blanc sur la gauche et le bas et sur la droite et le haut, nous avons moins d'espace blanc. C' est donc une autre technique que vous devez suivre. Vous avez remorquage créer quelque chose comme ça, et il aura un effet très apaisant ou très agréable sur vos utilisateurs. Uh, juste pour s'amuser, je pense qu'ils ont en fait augmenté. Si cette image et cette ligne hors de cette boîte et dans la marge juste pour effacer un certain intérêt. Et il a l'air vraiment besoin et vraiment sympa. Donc, c'est en fait comme ça que vous allez utiliser votre espace blanc efficacement. N' essayez pas les orteils, ayez peur de l'espace blanc. Essayez de l'utiliser et cela va créer un très bon effet sur vos designs. Voyons donc un autre exemple. Ok, donc voici un autre exemple. Et ici, vous pouvez voir qu'il est une conception de sac de shopping pour le site Web de savon. Je suppose que c'est le travail d'un autre designer. Ce n'est pas mon travail. Je voulais vous montrer comment, en fait, ces marges et ces choses fonctionnent et vous pouvez voir ici sont dans cette section. Si vous regardez ici, il y a beaucoup d'espace blanc à droite et à gauche. Ok, donc encore une fois, vous pouvez voir ici cette section. Si vos yeux bougent dans la destruction, vous pouvez voir qu'il prend tout l'espace ici. Donc, c'est en fait enterrer votre ah radié de votre contenu. Donc, nous avons moins de Contador ici et beaucoup d'espace blanc que de nouveau. Nous déplaçons notre contenu dans l'espace blanc, puis de nouveau. Donc, vous pouvez voir que cela va créer un très bel effet. En fait, si vous essayez orteil, implémentez ceci. Donc, c'est très grand design à nouveau. Ils le montrent dans un livre. Formez-le à nouveau. Nous avons plus d'espace en haut et en bas, et nous avons moins d'espace blanc sur la droite. Donc, c'est en fait le livre de la forme. Je l'appelle un livre pour Mitt, et je l'aime vraiment quand vous essayez de l'utiliser dans vos sites Web ou dans vos conceptions d'applications mobiles . C' est ainsi que les espaces vides qui travaillent ici nous avons un bloc étaient ici comme ça et le bloc que nous sommes ici comme ça. Et puis on a encore un pâté de maisons ici comme ça. On a encore un pâté de maisons ici comme ça. On a un bloc ou ici comme ça. Donc, c'est en fait un peu sur la gauche. Je pense que peut-être il n'est pas aligné correctement, mais en fait, c'est un design aligné au centre, mais il a une bonne variation hors espace blanc autour. Donc, ça a l'air vraiment génial. Maintenant, je vais vous montrer un autre exemple, qui est celui-ci, et vous pouvez voir que nous sommes là. Ici. Nous avons différents blocs de différentes hauteurs. Bien que je n'aime pas les heures trop créatives, mais je pense que ça peut fonctionner. Ou ici. Donc, nous avons tout disposé horizontalement de gauche à droite. Et vous pouvez voir ici que nous avons à droite, je pense qu'une icône du Tchad. Ensuite, nous devons télécharger les boutons ici. Et puis nous avons ce bloc ici et ce bloc. Donc, si vous regardez de près, c'est en fait tout le bloc, ok ? Et puis nous avons ah, cette zone par ici, cette zone par ici et cette section par ici pour que vous puissiez voir sur la gauche. Il a Il n'a pas trop d'espace blanc, mais sur la droite, il a beaucoup d'espace blanc cassé. Donc, c'est juste comme si vous le regardez, vous pouvez voir que c'est qu'il ressemble à un pistolet. Ok, donc c'est l'arrière de la base de l'arme. C' est là que sont les balles. Comme de l'argent et du golf. Et vous pouvez voir par ici. C' est le Nosal. Donc, c'est en fait géométrique. Vous pouvez dire que certaines conceptions ou certaines mises en page sont basées sur certaines formes ou certaines géométries, donc vous pouvez également l'utiliser ici. Je voulais te montrer une chose, c' est l'espace blanc. Donc, ici, nous avons un très grand bloc de l'espace blanc. Ici, nous avons un peu plus petit bloc de l'espace blanc, et ici nous avons un mince bloc de l'espace blanc. Donc vous pouvez voir si nous regardons ici, nous avons presque un arbre très forgeron dans ces blocs d'espace blanc blanc. Ok, donc c'est en fait ce que je ne veux pas vous montrer ici et vous guider que vous pouvez aussi faire quelque chose comme ça. Il peut aussi fonctionner et tout en ce moment. Ici, il est aligné dans cette direction sur la gauche. Donc il se déplace de gauche, non ? Mais le concepteur, plutôt que d'enterrer le vice près à gauche et à droite, il fait varier les piliers de vice en bas. Donc c'est en fait ce que je voulais te montrer. C' est là que le design unique Voyons un autre exemple. Ok, donc c'est comme moi. Tu es sûr que le réel 100% de rabais sur celui-ci ? Euh, oups. Je pense maintenant à 100%. Donc, il s'agit d'un site Web appelé travail responsable. Et vous pouvez voir que c'est la mise en page que je vous ai montrée. Nous avons un très grand cap ici. Comme si vous pouviez voir ce qui a frappé. Nous avons un petit local. Nous sommes là et un petit lien par ici. C' est donc la mise en page. Un court Vous dans la dernière diapositive de dernière partie de ma dernière leçon. Et vous pouvez voir que c'est la même couche qu'il y a en utilisant Donc, à gauche encore, nous avons un cap. Et puis si nous avons déplacé, vous pouvez voir que nous avons ce contenu. Encore une fois, le titre est à gauche et vous pouvez voir du contenu est à droite. Donc c'est à gauche, à droite, à gauche, essayé. Et encore une fois, nous avons quelque chose sur la gauche. Il est virage sur la quantité d'espace blanc sur la gauche et rouler et en avoir certains que vous pouvez voir dans la création de quelqu'un. Faites confiance ici encore. Nous avons ceci et encore une fois il laisse un espace blanc brillant sur la gauche et à droite à côté sur la gauche. Et encore une fois, nous avons sur la plupart des espaces blancs surchargés et utiliser un peu grande échelle, plus petite et plus grande. Et si nous descendons, nous avons encore beaucoup d'espace blanc sur la gauche. Onda, c' est tout. Donc, je voulais vous montrer que c'est ainsi que vous pouvez utiliser les conceptions de manière créative et vous pouvez avoir beaucoup d'espace blanc ici. Cela va mettre beaucoup d'importance et de stress sur cette section ou ici, qui est leur slogan ou quoi que ce soit. Ils peuvent appeler ça juste qu'ils se dirigent. Et ah, c'est une autre façon de lire vos mises en page. Voyons un exemple de plus et puis nous allons aux pieds Aller au passage à la section suivante. Maintenant, ceci est un exemple hors Ah, tableau de bord ou une application. Ceci est une application web et vous pouvez voir ici la chose cool à propos de ce design que je veux vraiment vous montrer, est l'espace de combat. Donc vous pouvez voir que nous avons un Lord hors blanc sur la droite, et nous avons un seigneur de l'Espace Blanc entre ces deux sections. Ici, c'est la navigation de gauche et le contenu. Donc, entre le contenu et la navigation, nous avons beaucoup d'espace blanc, et je vis vraiment ce design parce que c'est il est donc vous pouvez dire si unique et propre parce que hors de ses espaces l'utiliser De même, si nous regardez en haut, nous avons de l'espace blanc, mais il est moins d'espace blanc. Donc c'est en fait et encore nous vous avons ici l'espace blanc. Mais c'est en fait la navigation que vous pouvez. Si nous avons plus de navigation, nous pouvons avoir que nous puissions remplir l'espace. Donc, j'aime vraiment comment cela a été mise en page beaucoup hors espace blanc. Vous pouvez voir par ici. Ici, nous avons en haut de cette section de contenu que de nouveau dans cette section de contenu. Puis à nouveau à l'intérieur, ici et encore vous concevez dans la section suivante se déplace à nouveau. Nous avons beaucoup d'espace blanc. Donc, c'est un autre exemple que vous pouvez avoir beaucoup de variation hors espace blanc même dans abside Web, où la créativité est limitée parce que ce web est pour la consommation de contenu. Et il a beaucoup de différentes sections différentes navigations, Donc vous ne pouvez pas créer beaucoup de off. Vous pouvez voir de manière créative. C' est en fait pour la diffusion de contenu, et vous pouvez dire que des sites Web de diffusion de données ou des applications Web basées sur des données, de sorte que vous pouvez toujours utiliser beaucoup d'espace ici et créer une mise en page qui ressemble à ceci. Donc il nous reste tout aligné ici à nouveau. Nous avons tout laissé la ligne ici, mais nous avons beaucoup d'espace blanc qui donne clarté et élégance orteil ce design. J' espère donc que vous avez apprécié cette leçon. Si vous avez des questions, demandez-moi. Passons à la leçon suivante. 10. Mise en page centrée par une seule colonne pour les applications Web et mobiles: dans cette leçon. Nous allons parler d'un autre type de mise en page et différents types hors lots, puis ils devraient être utilisés. Donc 1er 1 Je vais parler d'une seule colonne ou de ce que nous appelons ça couche centrée. Donc, tout sera principalement dans le centre aligné, et c'est un excellent moyen. Et chaque fois que vous l'utilisez, vous allez accorder beaucoup d'attention à ce qui se trouve au milieu. Donc, nous avons beaucoup d'espace blanc des deux côtés et le milieu. Quoi que tu aies, c'est un produit. C' est un fardeau. C' est un formulaire, ou peu importe ce que vous avez, ça va attirer beaucoup d'attention. Donc, si vous avez beaucoup de contenu comme quatre paragraphes, trois images, je pense que vous ne devriez pas opter pour une seule colonne. Léo. C' est bon pour mettre en évidence quelque chose qui a moins de contenu. Donc, si vous avez beaucoup de contenu, je pense que vous devriez éviter d'utiliser une seule colonne ou des sorties centralisées. Laisse-moi te montrer à quoi ça ressemble. Ici. Il est une présentation simple hors mise en page centrale la plupart du temps lorsque vous ouvrez un site Web nous avons le logo sur la gauche et nous avons la navigation en haut. Et puis en dessous, nous avons un très grand cap ici. Ok, alors nous avons un slogan ou d'autres caractéristiques, ou peut-être un paragraphe ou deux lignes ou des choses comme ça. Ensuite, nous avons une très grande vidéo ou une grande image sur le produit ou ah, forme par ici. Et puis nous avons un appel à Action Button. Mais vous devriez vous inscrire pour ce produit ou des choses comme ça. Alors on a quelque chose par ici. Peut-être que c'est sûr et sûr, et c'est juste 9,99$ par mois. Ou peut-être quelque chose comme ça, qui va orteil vous donner une garantie que c'est un adieu, ou vous devriez acheter ce produit. Donc, c'est fondamentalement une mise en page simple et centrée. La plupart du temps, ça ressemblera à ça. Vous pouvez déplacer des choses comme vous pouvez avoir quelque chose comme ici et vous diriger et penser, comme ici, c'est à vous de décider comment vous essayez réellement les orteils, bougez les choses et comment vous retirez l'attention de votre utilisateurs. Donc, cela va principalement être dans la section Haider ou héros ou la section supérieure de vos designs . Donc, tout est au sujet de centralisation. Maintenant, laissez-moi vous montrer seulement deux ou trois exemples parce que je pense que vous l'avez vu beaucoup de fois je vais vous montrer quelques exemples, donc vous obtenez l'idée écrite dans votre esprit ou vous pouvez voir gravé dans votre esprit. Voyons donc quelques exemples. Maintenant, voici quelques exemples hors centre tôt, et la plupart du temps vous allez le voir à l'en-tête parce qu'ils nous devons attirer l'attention. L' une et la seconde est que nous devons mettre l'accent sur notre produit. C' est le slogan ou ce qu'il fait. Alors on y va. Vous pouvez voir en haut. Nous avons les mêmes choses ici. On a tout au milieu. Ensuite, nous avons un slogan que nous avons ce bouton et ici nous avons un bouton plus petit. Ou peut-être pas beaucoup mis en évidence la section montre démo. Encore une fois, nous avons cette illustration en bas, qui est de nouveau au milieu. C' est ainsi que cette APRA démarre Io. Ils mettent l'accent ou ici, donc ce n'est pas une mauvaise pratique de l'utiliser je pense vraiment que si vous pouvez créer une très belle atmosphère en utilisant une typographie et des couleurs sympa , vous pouvez créer n'importe quel design. Si avec une mise en page simple. Si vous avez une mise en page très simple, vous pouvez créer un design élégant. Ne pensez pas que vous avez un très complexe hors de très créative pour raconter votre histoire. Vous pouvez raconter votre histoire avec des mises en page simples aurait en ayant un style typographique en utilisant de bonnes couleurs. Ensuite, nous avons ce site web. C' est ce qu'on appelle la même forme et vous pouvez voir ici, ils ont à nouveau quelque chose qui est envoyé tôt. Donc, très grand chemin par ici. Et je commence. Ils ont un int gourmand qui se passe dans la rubrique, ce que j'aime vraiment. Alors nous avons ce fardeau. Je pense que ça devrait être comme ça. Mais de toute façon, c'est leur propre style sur, et c'est ainsi qu'ils saisissent l'attention de leur utilisateur et le mettent sur le pied cette zone ici, alors nous en avons un autre, qui est point frontière io. Et c'est que je pense, les coûts de pièce genre hors projet, ou je ne suis pas sûr de ce que c'est de toute façon, donc vous pouvez le voir ou l'entendre à nouveau commence par la mise en page du centre. Bien qu'il soit une ligne sur la gauche, Nous allons discuter de cette technique dans les idées créatives dans la section suivante. Alors gardez ça dans votre esprit et gardez votre vous pouvez dire, euh, votre, votre, euh, niveau de curiosité élevé. Alors gardez votre niveau de curiosité élevé et nous allons parler de ça dans la prochaine leçon. instant, je vais juste te dire ce qu'est ce justaucorps. Mise en page centrée Suivant est la base du camp de base. Kim est un site web très populaire et vous pouvez voir tous entendre très grand et la direction du conseil. Ensuite, ils ont un paragraphe serait ici montrant ce qu'il fait à leurs clients. Ensuite, ils ont leur ville A ou bouton d'appel à l'action par ici. Jolie touche. Et puis ils ont encore une ligne ici. Ils ont des images au milieu. J' aime vraiment ce simple et droit et beaucoup d'accent sur ce qu'il fait. C' est donc un excellent exemple. Ok, donc ici nous en avons un autre, qui est fondamentalement un design d'emballage, et vous pouvez voir où ici ce symbole, qui est leur logo. C' est au milieu de toute cette illustration, qui met vraiment l'accent, et vous pouvez dire force à ce design. Donc, si vous le regardez encore ici, ceci est conçu dans une mise en page centrée. Tout est au milieu. Mais il est vraiment agréable parce que le concepteur a utilisé beaucoup sur créer des visages de type type , je pense, pour mourir. visages qui sont créés ici, ont été combinés comme ça. Donc bonnes illustrations, au centre, tout a l'air superbe. C' est ainsi que les créateurs de création exécutent leur conception qui ne se soucient pas beaucoup simplicité. Je pense que des conceptions simples avec de bons graphismes pourraient typographie et couleurs. Ils vont attirer plus d'attention que des mises en page complexes. Encore une fois, nous avons ce finisseur, PDG sombre, et c'est encore quelque chose. Une application. Et ici, nous avons encore cette disposition centrale. Voyons un exemple hors mise en page mobile, qui est contre l'ancre. Voici le site de Shopify, et c'est leur mobile. Vous répondez pour que vous puissiez voir ou entendre sur Mobil. Nous avons beaucoup moins d'espace, donc parfois sur nous, comme vers trois colonnes. Design essaierait de le presser dans une seule colonne ou colonne centrée afin qu'il soit utilisé. Ah, beaucoup de temps sur les interfaces mobiles sont des interfaces utilisateur pour les appareils mobiles parce que nous avons moins d'espace sur l'écran. Donc nous avons tendance à ah, vous savez, avoir un peu d'espace autour en déplaçant nos objets dans l'ordre supérieur inférieur. Donc, tout ce que la ligne centrale que vous pouvez voir ou entendre est superbe. Donc tu n'as pas de garde. L' idée de la façon dont vous pouvez utiliser le centre, aligner les mises en page et essayer de créer de l'accent dans vos conceptions. Je vais vous montrer un de mon design récent que j'ai fait et comment j'utilise la mise en page centrale orteil obtenir l' accent sur la première ou la section supérieure de cette conception. Maintenant, c'est mon récent projet que j'ai fait pour les arriérés de taxes. Aide de This est l'un de mes clients de vous aux États-Unis, et ah, vous pouvez voir ici que c'est une coutume de sérieux parce que c'est une société d'imposition. C' est donc un tiefest personnalisé. Ce n'est pas Google Tiefest. Donc, encore une fois, vous pouvez voir un très bon contraste sur le vert et les jaunes ou les oranges jaunes, couleur ambre et le design très simple. C' est encore une fois des mises en page centrales. Je veux orteil avoir l'utilisateur pour attirer l'attention sur cela. Nous avons aidé 300,000 pays à obtenir des allégements fiscaux. Donc, c'est encore une fois, je pense que vous pouvez voir début pour n'importe quel client ici. Et puis ils avaient un certain crédit. certifications sont et des choses comme ça. Donc, c'est en fait que je voulais vous montrer comment vous pouvez utiliser sur la mise en page centrale sur et créer une bonne impression. Première impression sur vos utilisateurs. J' espère que vous n'avez pas détruit le centralement. Si vous avez des questions, demandez-moi. Passons à la leçon suivante. 11. Conception de mise en page centrée: c' est maintenant le moment de votre affectation. Maintenant, votre première affectation est que vous allez créer une mise en page centrée où vous allez avoir un logo, quelque chose ou un menu en haut à droite ou une navigation ou un numéro de téléphone ou n'importe quel élément en haut. Ensuite, j'ai besoin de vous pour créer un très grand titre, texte de tableau et avec un paragraphe ou du texte d'accompagnement en bas sont fardeau et et un texte des épaules. Ici, vous pouvez utiliser une illustration en bas. Vous pouvez utiliser sur l'image avec un effet excessif comme j'ai utilisé. Ou ici, vous êtes ouvert à utiliser tout ce que vous voulez. Vous êtes ouvert à l'utilisation de n'importe quel outil de conception. Vous pouvez le concevoir en croquis. Ce sera en fait pour un illustrateur de boutique. Peu importe ce que vous avez en ce moment avec vous, vous pouvez l'utiliser et je veux voir quelque chose comme ça. Donc en ce moment, j'utilise une grille de Boucher Grid, qui est 12 colonne 30 obtenu plus 65 colonne Bert et 1 65 marges sur les sites de bord, et ma toile est en fait 14 40 vide. Donc, j'ai aussi ah ah ah vidéo sur YouTube sur la création de bottes, Sha'ab grades afin que vous puissiez vérifier mon orteil de chaîne de toute façon, Donc c'est leur conception. Je veux de vous en-tête Ah conçu avec une disposition centrée d'une disposition de colonne. Vous pouvez aussi faire quelque chose comme ça, qui est mon travail précédent retour. Il y a un an. Vous pouvez utiliser ils ont un titre un paragraphe un ce fardeau de test de démonstration et un peu texte d'accompagnement en bas. Donc, vous pouvez utiliser quelque chose comme ça aussi. Et assurez-vous que vous allez utiliser des matelas ici comme je vous l'ai dit. Le rythme vertical, Brocks. Essayez donc d'utiliser quelques blocs en haut ou en bas de celui-ci. Et aussi ici, où je vous ai montré ces blocs verticaux dans mes leçons précédentes. Alors essayez d'utiliser cette technique orteil. Avoir un bon espacement entre vos éléments. Alors assurez-vous que vous allez utiliser ces espaces verticaux et le rythme vertical aussi. Alors commencez à concevoir non et créez un en-tête génial conçu avec une mise en page centrale . Et j'espère voir votre projet bientôt. Alors faisons-le vite. Et n'oubliez pas de soumettre cette mission 12. Mise en page deux colonnes avec des exemples: maintenant, une autre disposition populaire est la mise en page de deux colonnes. Ou parfois je l'appelle 50 50 mise en page ou mise en page de magazine. La plupart du temps, lorsque vous voyez ou lisez un magazine ou un journal, nous avons principalement du contenu et des images sur les choses de gauche et de droite comme ça. Donc, c'est essentiellement diviser votre contenu en deux sections. On pourrait être des images on pourrait re taxe. Un pourrait être produit. L' un pourrait être ses caractéristiques. Donc, cela divise en fait votre mise en page maintenant. Une chose que vous devez remarquer est qu'il ne doit pas être toujours 50 50 mise en page. Vous pouvez modifier la colonne. Oiseaux. Peut-être que tu es du bon côté. Vous en avez plus sur votre colonne et celle de gauche est plus petite, donc cela dépend de vous. Il est donc plus facile de jus d'orteil avec plusieurs images et texte d'un côté à l'autre. Et si vous avez un sujet ou une section que vous pouvez facilement avoir, vous pouvez facilement avoir ah, créer lee et vous pouvez montrer vos informations facilement, et je juste que je table dans ce réglable nous à vos utilisateurs. Je vais donc vous montrer beaucoup d'exemples et comment nous pouvons créer ces différentes mises en page de deux colonnes . Alors commençons maintenant. En ce moment, je vous montre un départ très typique. Ah, mise en page de deux colonnes quand nous avons une vidéo sur la droite ou une image sur la droite ou l'image du produit ou l'écran de l'application mobile juste ici et puis nous avons sur la gauche. Nous avons un peu de cap ici que nous avons un slogan ou une ligne de traits en vedette. Ensuite, nous avons un fardeau et regarder la démo ou l'essayer maintenant ou l'essayer pendant 30 jours. Donc on a une sorte de patron comme ça. Donc, c'est une disposition très typique à deux colonnes, donc nous divisons plus la plupart du temps comme ceci. Maintenant, vous devez remarquer une chose que nous utilisons est la plupart des utilisateurs. Ils vont scanner votre site Web ou votre design de gauche à droite, donc ils vont aller. Leurs yeux vont frapper ici pour la première fois, alors assurez-vous de ce que vous voulez que l'utilisateur lise en premier. Ce sera votre sport. De même, de droite à gauche, la plupart des images et la plupart des titres et titres se trouvent de ce côté de droite. Donc c'est la chose que vous devez remarquer. Maintenant, voici une autre variation de la même 50 50. Mais vous voyez que vous étiez là. Ici. J' ai fait quelque chose de nouveau, c' est-à-dire que j'ai étendu cette image sur la droite à tout l'arrière-plan. Il sort de cette section ou frappe. Donc c'est une autre façon. Et aussi, vous pouvez avoir un formulaire ici avec le bouton Envoyer. La plupart du temps, si vous concevez une page de destination et qu'ils ont beaucoup de formulaires, vous pouvez donc avoir un formulaire sur la droite et peut-être quelques en-têtes et du texte ou des images sur la gauche . Donc, il y a beaucoup de combinaisons que vous pouvez faire. Tu peux avoir quelque chose comme ça. Et faisons de ces ponts des lignes comme ça. Et on a des lignes de sexe ici comme ça. Oups. Comme ça. Et puis nous avons essayé Non, quelque chose comme ça. Et nous avons une sorte de mise en page comme celle-ci. Donc, il ya beaucoup de choses que vous pouvez faire ici que vous pouvez changer votre mise en page, vous pouvez Vous pouvez faire beaucoup de choses. Peut-être que vous pouvez diviser vos images en deux comme ça. comme nous avons une image ou ici et une image ici ou peut-être une illustration ou quelque chose du genre . Donc, nous allouons 50 % de réduction sur cet espace pour nos images, et la gauche est essentiellement du contenu. Il y a donc, je vais montrer, vous savez, exemples sur la façon dont il peut être utilisé et comment il est utilisé par différents designers. Alors passons à autre chose et voyons quelques exemples. Maintenant, voici un exemple, et c'est un site de portefeuille par ramen, un produit. Concez-les de Barcelone et vous pouvez voir ici c'est une utilisation très simple de deux colonnes disposition de sorte que vous pouvez voir ici ses cheveux. Il a un peu de bienvenue ici Dexter, une illustration de lui. Puis il a des images en tombant dans des colonnes. Encore une fois, c'est encore une fois. Tout est en deux colonnes. C' est donc très simple, très élégant. Travail propre par Ramon. Maintenant, voici un autre beau design, qui est un jeu de deux colonnes sur. Vous pouvez voir que cet en-tête est deux colonnes sur la gauche. Nous avons quelques textes et en savoir plus bouton, et sur la droite, nous avons un produit. Donc, c'est une autre façon d'introduire un produit et si vous avez une ou deux variantes sur ce produit ou un seul produit, c'est un excellent moyen d'orteil. Obtenez un peu d'accent et donnez également un peu d'informations sur votre produit. C' est un site Web de commerce électronique très populaire, qui est Shopify, et vous pouvez voir qu'ils utilisent la même disposition de deux colonnes ici, qui est Ah, ce cap une grande cachette sur la gauche et sur l'image et ceci. En fait, c'est vraiment ici sur la droite, et encore une fois vous pouvez voir dans cette section, ils ont à nouveau une fonctionnalité. Ils racontent les fonctionnalités, Commencez votre voyage d'affaires. Et donc ils ont encore utilisé cette disposition à deux colonnes. Encore une fois. Nous avons une disposition à deux colonnes avec quelques variations à gauche et à droite et de droite et à gauche. Ceci est une bonne technique orteil obtenir variation parce que vos muses esprit ils vont s' ennuyer avec le même Badran. Donc, c'est vraiment très atant. Le motif orteil montre que ce candidat à nouveau vous pouvez voir est cette section. C' est un excellent exemple. Sur une mise en page de livre. Vous avez vu un livre. Si vous l'ouvrez comme ça, c'est un payé. C' est la page de gauche. C' est donc un excellent exemple. Et je pense que tu devrais essayer quelque chose comme ça. Je vais faire une nouvelle mission pour que vous ayez une image sur la gauche et que vous ayez du texte sur la droite et un bouton en bas. Quelque chose comme ça. Donc vous voyez que vous avez eu l'idée. Et il y a beaucoup de façons différentes que vous pouvez utiliser cette disposition à deux colonnes. Ici, nous avons l'image à gauche et la taxe à droite. En haut, nous avons du texte sur l'image de gauche à droite plutôt qu'au milieu. Nous avons quelques variations hors des textes et des images, des choses comme ça. C' est donc un excellent moyen d'utiliser votre disposition à deux colonnes. Maintenant, ici, je vais vous montrer une application très agréable fait bien conçu de Huberdeau. Je suis cette agence de design pendant un moment. Et ce que je voulais vous montrer comme cet écran sur la gauche, ce premier écran sur la gauche et vous pouvez voir que vous étiez ici. Il a une disposition à deux colonnes. Donc, si nous allons plus près ici, vous pouvez voir ces 24 options, elles sont divisées en deux colonnes égales, et cela montre très simplement. Il est plus facile de taper les orteils ici. S' ils ont comme ça pour les boutons ici, ils peuvent facilement taper dessus ici et utiliser ces fonctionnalités. Donc c'est une grande utilisation de cette colonne Ah deux ici. Ne vous limitez pas que ceux-ci peuvent être utilisés uniquement sur mobile, juste sur des sites Web. Vous pouvez aussi les utiliser dans des laboratoires mobiles . Voici un autre exemple d'application mobile, et vous pouvez voir ici dans cette section ou entendre slacked jusqu'à trois sports que vous aimez. Vous avez, hum, quatre choses ici à sélectionner, et ils ont, genre, genre, disposition de deux colonnes. Donc, c'est encore une fois un autre exemple de mise en page à deux colonnes. C' est facile à taper. C' est plus facile de naviguer. Vous pouvez descendre facilement. Ils ont beaucoup de bonne zone pour taper au-dessus. Donc c'est un autre moyen. Vous pouvez l'utiliser dans votre APS mobile. De même, vous pouvez voir que c'est le design récent que j'ai fait, et vous pouvez voir où je suis à nouveau, en utilisant une mise en page à deux colonnes pour les montrer à la vidéo côte à côte. Ce sont en fait des decks, des vidéos professionnelles et c'est une excellente façon de montrer quelque chose comme ça. De même, si vous descendez dans cette section ici, services de texte disponibles, vous pouvez la voir ou entendre à nouveau. J' utilise deux colonnes pour montrer tous ces points de puces ou services de texte. C' est donc un excellent moyen d'utiliser deux colonnes. Ne pensez pas que vous devez utiliser une image et une taxe. Vous pouvez utiliser du texte à l'intérieur de ces colonnes de sorte que de la même manière, vous pouvez voir quoi ici. J' ai utilisé la même chose ici deux colonnes, mais ici juste pour créer un certain intérêt, je change cette information qui est un peu différente des points à puces. Donc c'est encore une fois l'utilisation à gauche, droite, deux colonnes. J' espère donc que vous avez apprécié cela. Ah design. Vous pouvez dire leçon sur les mises en page et comment utiliser vos deux colonnes, licenciements, créativité avec créativité. Ah, si vous avez des questions à me poser, passons à la leçon suivante. 13. Projet ► 2 colonnes: Maintenant, je veux que vous créez une mise en page à deux colonnes en utilisant les mêmes techniques que celles que je vous ai déjà montrées . N' oubliez pas d'utiliser l'espacement vertical, à droite. Espacement vertical et mise à niveau bullsh ici, vous pouvez voir ici j'utilise le même pain bootstrap. Et ce que vous voyez est la variation de la conception terminée, qui est la conception de la ligne centrale. Et celui-ci, vous pouvez le voir, il utilise deux colonnes. Donc, ce formulaire, vous pouvez voir obtenir un concert gratuit et la cour que j'utilise à droite et à gauche. J' ai un texto. Et aussi j'utilise la technique, qui est appelée chevauchement, que vous apprendrez dans les sections suivantes au patron Techniques. Et vous pouvez voir ici, orteil Bella que j'utilise des images ou des icônes ou tout ce que vous pouvez utiliser ici. Ou peut-être Facebook comme on le voit dans les magazines ou quelque chose comme ça. Donc vous pouvez utiliser quelque chose de logos ici, quelque chose comme ça. Essayez donc de créer quelque chose comme cette mise en page à deux colonnes. Je ne veux pas que tu aies toujours un formulaire ici, parce que c'était une frénésie de prêts. Donc je bois quelque chose comme ça, laissez-moi vous montrer quelques exemples supplémentaires. Voici un autre exemple. Ce n'est pas mon design, mais vous pouvez voir que vous pouvez utiliser quelque chose comme ça et ce que je veux. que je Ceque jevoulais te montrer ici, c'est celui-là. Donc nous avons ces quelques logos ici que cet homme ou qui il est en vedette ici, par ici et par ici. Et vous pouvez utiliser quelque chose comme ça. Vous pouvez utiliser un logo ou quelque chose ici. Ensuite, essayez d'utiliser deux colonnes pour avoir votre couche comme ceci. Vous pouvez utiliser 60 40% 50 50% quel que soit le pourcentage que vous souhaitez utiliser. Je ne te presse pas d'utiliser 50 50. Vous pouvez voir. Voici mon autre design. Mon ancien, qui est il y a un an. Et vous pouvez voir par ici. J' utilise deux colonnes. Vous pouvez utiliser la même chose, et c'est également essayer de créer une mise en page à deux colonnes. Et j'ai hâte de voir toutes vos missions. Alors commencez à concevoir votre mission maintenant. 14. Mise en page multicolonnes dans Web UI Design UI: Maintenant, notre prochain arrêt est des couches à plusieurs colonnes. Si nous avons des colonnes comme trois colonnes, quatre colonnes, six colonnes, alors nous utilisons en fait une mise en page multi-colonnes. J' ai vu beaucoup de magazines en utilisant trois colonnes. C' est pourquoi j'ai écrit ici la mise en page du magazine. Bien que ce ne soit pas totalement une mise en page de magazine, mais beaucoup de médicaments utilisent trois colonnes. Lee Notre orteil montre différentes images d'action ou différents articles et histoires. Donc, si vous avez beaucoup de contenu, vous pouvez utiliser la couche de colonne T ou de quatre colonnes parce que vous devez diviser votre contenu comme nous avons quatre puces, points à puce ou trois points à puce ou trois fonctionnalités d'un produit ou quatre fonctionnalités sur un produit. On va les diviser entre. Différentes colonnes. Donc c'est en fait l'utilisation hors plusieurs colonnes Lee heures. Maintenant, je vais vous montrer quelques exemples, quelques exemples de mise en page, et nous allons aller à des exemples en direct, différents sites Web et obtenir l'idée. Qu' est-ce qui est en fait mise en page multi-colonnes. Voici maintenant un exemple ou une mise en page simple que vous pouvez faire dans le début ou l'en-tête de votre site Web. Peut-être que vous avez des images ici. Deux produits orteil, peut-être quelque chose comme ça aux boîtes. Quoi que vous ayez, ceci est en fait divisé en trois colonnes différentes. Donc, nous avons 12 et 3, donc nous pouvons avoir quelqu'un qui se tient ici avec une déclaration d'impôt. Nous avons quelques fonctionnalités ici, O r. Peut-être un avis client ici. Ensuite, nous avons un titre et un texte ici et essayons, mais ennuyez quoi que ce soit. Cela peut être fait dans beaucoup de combinaisons différentes et cela, mais cela montre que nous avons plus de trois types de contenu différents. L' un est un labyrinthe. L' un est peut-être un témoignage quand nous avons caché le titre de texte et peut-être un texte relatif et une ville ou Caldwell Chamberlain. Donc, nous avons en fait trois blocs de texte. Donc, si nous avons, comme quatre blocs de cinq blocs, nous pourrions ne pas utiliser celui-ci. Peut-être que nous pouvons juste notre contenu comme ça. Par exemple, si j'ai, genre, deux témoignages ah, je peux les obtenir comme ça. Il y a donc plusieurs façons de faire quelque chose comme celui-ci plus grand témoignage, plus petit témoignage. Nos commentaires clients pour les commentaires des clients ou entendre l'image du produit ici. Et, euh, la rubrique et l'introduction du produit et essayez-le maintenant. Mais un ici. Il y a donc plusieurs façons de faire la séquence et d'utiliser cette mise en page multi-colonnes, trois colonnes ou quatre colonnes. Les cheveux sont une autre représentation de la même disposition de trois colonnes, et vous pouvez le voir ici. J' essaie en fait d'utiliser quelques marges en haut par ici. Nous avons laissé une colonne ici, une colonne ici pour l'espacement, puis dans la section suivante, nous avons quatre caractéristiques ou quatre étapes. Étape 1234 et je les ai divisés en quatre boîtes différentes. Maintenant, pourquoi j'ai laissé cela ces marges ou la tête juste pour en créer quelques à juste point dans votre conception, si l'utilisateur voit comme d'une manière linéaire, tout est linéaire, ingénieur linéaire, ils vont obtenir ennuyé. Ils vont aux pieds. Plongez. Tu sais ce que sont les similitudes ? Même expérience encore et encore. Alors essayez de très avec votre espace blanc ici avec vos colonnes. Ici, nous avons trois colonnes et ensuite nous avons quatre colonnes à nouveau. On peut encore avoir deux colonnes, on peut avoir. Ah, la disposition du centre encore. Encore une fois, nous pouvons avoir quelque chose comme ça. Donc, c'est juste pour vous dire que j'utilise deux types différents de colonnes multiples ou ici trois colonnes et quatre colonnes en même temps. Alors n'essayez pas d'avoir peur ou d'essayer les orteils. Pensez dans un très que je devrais toujours utiliser quatre blocs ou quatre morceaux différents information et les diviser comme ça. Vous pouvez utiliser 34 sont des variations comme ceci. Voici mon design récent. Juste exemple orteil vous donne une idée. Vous pouvez voir où ici je suis en utilisant trois colonnes différentes orteils trois colonnes principales différentes . Pour montrer ces trois éléments, vous pouvez dire des fonctionnalités ou des services de confiance ou tout ce qu'ils ont. Donc, c'est en fait que j'ai avant que j'ai deux colonnes que j'ai trois colonnes. Puis ils ont envoyé tôt, laissez-moi vous montrer à nouveau. Nous avons trois caractéristiques différentes trois étapes différentes ici. Un orteil trois. Euh, par ici, vous pouvez voir que j'utilise quatre colonnes différentes. Et si vous voulez que j'allume la grille, laissez-moi penser à cette touche de raccourci. Donc voici ma grille et vous pouvez voir que c'est un grade bootstrap et vous pouvez voir que nous sommes là. J' ai laissé ces gouttières ici, et elles prennent, genre, quatre colonnes chacune. C' est centré. C' est le centre centré. Cela prend à nouveau quatre colonnes chacune. Il faut trois colonnes chacune. Et, um, c'est encore une fois la mise en page de deux colonnes sur et nous avons encore ici une mise en page de plusieurs colonnes, qui est trois colonnes l'ou deux nous avons cette colonne, cette colonne ici, qui est celle-ci. Ensuite, nous avons cette colonne ici. Et puis nous avons cette colonne ici pour que vous puissiez voir comment j'ai divisé ce pied de page en trois colonnes différentes et nous avons des liens vers le site. Nous avons un contact. Nous avons les informations sur ce site Web. Quoi ? Ce produit ? Tout ce que nous avons. Donc, c'est un excellent moyen que vous pouvez voir où ici, En fait, je l'ai divisé avec quelques couleurs au port. En fait, ce sont trois colonnes ici. Ayez un autre exemple hors. Application mobile. Tu l'étais. Vous pouvez voir ce que Ici. Ce sont des jeux différents. Je suppose que Sticker shop est un magasin d'autocollants et l'ensemble de la grille est en fait construit sur trois colonnes de sorte qu'il est créé pour rivage différents produits. Vous l'avez vu beaucoup de fois sur le commerce électronique, côté étape sur le site de vêtements. C' est un excellent moyen de montrer beaucoup de données parce que nous avons, ah beaucoup de choses à montrer, afin que nous puissions les montrer dans un grand hors trois ou quatre éléments différents. Il est plus facile de scanner pour les yeux. Donc c'est une autre façon. Maintenant, vous pouvez voir un exemple très simple et vous pouvez voir ici les morts est en fait divisé en quatre colonnes différentes. Un est plus grand, trois plus court. Et en fait, vos données de concepteur sont que les morts sont le mardi 26 février. Il faut plus avec donc ils ont Ah, encore une fois, ils ont un certain temps 7 30 B m ou un M. Donc c'est un excellent moyen de montrer le sélecteur de date. Ceci est un autre excellent exemple en utilisant trois colonnes ici afin que vous puissiez voir qu'il s'agit d'un grand design sur. Ils ont, genre, six options ici sponsors parce que les exposants de l'agenda nous contactent de la carte, donc ils utilisent trois colonnes différentes. Donc, si vous regardez de près dans cette section supérieure ici, dessous de ce titre de page d'accueil, vous pouvez voir que nous avons à nouveau ces trois colonnes. Donc, si j'essaie orteil, avoir un peu d'alignement ou de cheveux afin que vous puissiez voir ici est la première colonne que nous avons la deuxième colonne. Et puis nous avons cette troisième colonne ici quelque chose comme ça, donc vous pouvez voir un peu de gooder à l'intérieur d'eux, de la literie. Donc juste pour les séparer avec un espace blanc, et ensuite nous avons deux colonnes différentes. C' est un autre excellent moyen de montrer des informations. Ou si vous avez beaucoup d'options ou d'informations à afficher, vous pouvez les afficher dans la mise en page de colonne de thé ou la mise en page de plusieurs colonnes. Maintenant, c'est Wall Marks site, et j'aime leur conception un peu minime. Et, euh, c'est encore une fois que vous pouvez voir ici que nous avons trois colonnes différentes. Engagement gratuit de la formation de ramassage point com. Donc, la livraison gratuite. Encore une fois, nous avons cinq colonnes différentes pour montrer différentes catégories que nous avons à nouveau en utilisant la même mise en page. Cinq colonnes. Encore une fois, nous avons trois colonnes à nouveau. Nous avons trois colonnes, une gauche, une plus grande et l'orteil droit est un peu plus petit. Donc, c'est en fait l'utilisation de plusieurs colonnes, et j'espère que vous n'avez pas détruit l'idée et comment l'utiliser correctement. Si vous avez des questions à me poser, passons à la prochaine leçon. 15. Projet de ► multicolonne: Il est maintenant temps de créer plusieurs colonnes Lee ou trois colonnes quatre colonnes. Tout ce que vous voulez, vous pouvez les utiliser même cinq colonnes. Maintenant, je vais vous montrer mes dessins et quelques exemples, et vous pouvez voir ici. Je veux quelque chose comme ça ici. Donc, nous l'avons fait. Je suis sur le texte de gauche à gauche et le texte à gauche. Donc tout est une ligne sur la gauche. Gauche, gauche, gauche. Mais le tout continue au milieu. Ah, et dans le prochain, par ici, nous l'avons. Ah, ce titre à gauche. Mais tout est au milieu comme l'icône est au centre de cette carte sur aussi, ce texte est au centre. Donc, ce que j'ai besoin que vous fassiez est de créer un titre comme celui-ci, effacé au moins quatre ou t colonnes et trois en utilisant l'icône, une taxe et un lien ici et créer une mise en page multi-colonnes. Laissez-moi vous montrer un autre exemple. Maintenant, vous pouvez voir que c'est en cours de conception, qui est ma récente, qui va être ma nouvelle conception de site Web et vous pouvez voir ou entendre ici nous avons trois colonnes et je montre tous mes cours comme ça. Vous pouvez utiliser un bouton ici ou vous pouvez utiliser le titre ou autre. Donc chose de porte que vous avez toujours à placer. Tu vas au milieu. Vous pouvez utiliser la cachette à gauche et tout est au milieu. Donc c'est ce dont j'ai besoin. Je veux que vous créiez trois colonnes de quatre dispositions de colonnes et me donniez quelque chose comme ça. Donc je lis pour votre mission. Assurez-vous que vous allez aux pieds. Soumettez ceci parce que c'est ainsi que vous allez améliorer lorsque j'essaie de les examiner. Quand j'essaie de vous montrer vos erreurs et ah, dans ce processus, j'ai aussi beaucoup appris. C' est donc, vous pouvez dire, l'apprentissage mutuel et la compréhension des mystiques du design et du design. Je suis donc impatient d'avoir hâte de voir vos missions, ou de les soumettre maintenant 16. Mise en page des fleurs ► Secret: Maintenant, nous allons parler d'un type très différent de mise en page, que j'appelle un lei de fleur. Pourquoi est-ce que j'appelle ça une fleur ? Parce qu'il a une forme sur une fleur avec quelques batailles. Donc, vous pouvez voir quand vous voyez une fleur, elle a, Ah, grand milieu. Et puis nous avons cinq, six ou quatre batailles sur toute sa taille. Donc, cela s'appelle la mise en page de saveur. Maintenant, pourquoi et quand vous devriez l'utiliser ? Lorsque vous avez un élément central, vous devez vous concentrer sur un produit, par exemple, une application mobile ou une cigarette électronique ou autre chose. Donc, quel que soit le produit, il sera probablement. Il sera principalement au milieu de la mise en page au centre de la mise en évidence. Il est donc bon pour mettre en évidence différents, comme quatre, cinq, six ou sept caractéristiques différentes d'un produit. Normalement, il aura, comme vous devez avoir au moins quatre choses différentes autour de l'élément central, comme quatre fonctionnalités différentes. Remorquez-le, vous pouvez les présenter Dans cette mise en page, je vais vous montrer quelques arrangements que nous allons regarder quelques exemples Comment autres comme l'utiliser et comment je l'ai utilisé dans mes conceptions précédentes. Voyons donc quelques arrangements. Maintenant. C' est un arrangement très simple que nous avons vu de nombreuses fois, mais peut-être que vous ne le reconnaîtrez peut-être pas. Le produit est au milieu. Ça pourrait être plus au labo. Ça pourrait être un parfum ou n'importe quoi d'autre. Et puis nous avons des fonctionnalités ici. Caractéristique. 123456 Donc c'est en fait que j'utilise six batailles sur cette fleur, donc je l'appelle la disposition des fleurs. D' autres pourraient ne pas l'appeler « fleur » fort. Ils pourraient appeler ça quelque chose d'autre, mais pour la simplicité et pour comprendre l'idée hors du traîneau. Ceci est, ah, mise en page en forme de fleur, et ceci est un exemple très typique de lui. Maintenant, j'ai allumé ma colonne. Urgh mène 12 grilles de colonnes, et vous pouvez voir ou entendre comment j'ai utilisé la même chose. Un lei de fleur à mon avantage, donc nous avons une image de produit au milieu. Au sommet. On se dirige sur la droite. Nous avons des fonctionnalités sur la gauche. Nous avons deux caractéristiques avec une certaine taxe et en bas, nous avons par aucun bouton. Donc, il est encore mise en page de fleurs. Mais il a 123456 batailles. Et j'ai utilisé ma cachette et par aucun bouton dans le même arrangement sur une disposition de fleurs. J' espère que vous avez beaucoup appris et comment vous pouvez l'utiliser. Non, voyons quelques exemples. Allons de l'avant et laissez-moi vous montrer mon design d'abord. C' est un de mes vieux design que je pense avoir porté la compétition. Et c'est un concours de design. Et vous pouvez voir ici, ici, dans cette partie par ici. C' est fondamentalement une cigarette e et vous pouvez voir que j'utilise cette même disposition de fleurs. Nous avons le produit au milieu sur la gauche. Nous avons des cartouches et des piles sur la droite. Nous avons quelques fonctionnalités telles que la recharge portable arrière de voiture demises, homme de tabac traditionnel dit dans toutes ces différentes fonctionnalités sur le dessus, nous avons titre et sous-titre Tagline. Ensuite, au fond, nous n'avons par personne. Donc, cela utilise que j'utilise ici la disposition des fleurs. Vous pouvez peut-être mal juger qu'il a trois colonnes, mais il est quand même une disposition de fleurs. Nous avons comme tout arrangé autour de cet objet milieu eso Ici, nous en avons un autre. Ce n'est pas un lei de fleur. Il est fondamentalement trois colonnes, donc espère donc c'est ce que je voulais vous montrer que vous pouvez utiliser la mise en page de farine comme celle-ci ces différentes manières. Non, je vais vous montrer quelques exemples. Non, c'est le deuxième exemple. Et ah, ici vous pouvez voir ce designer qu'il a ou elle a utilisé Ah, ce design prêt de manière unique Parce que vous pouvez voir cette forme ou les cheveux étincelants est dans un format de trois d. C' est allumé dans une perspective, euh, euh, mise en page en perspective. Et nous avons encore la même chose qui se passe ici. Donc, ce produit est au milieu. Nous avons de l'agilité, la vitalité concentrée, l'énergie et des attributs de produit en bas qui font réellement une mise en page de fleurs. Bert. Ah, ici. Vous pouvez voir qu'il est un peu décalé dans cette direction. Donc, sur le dessus, nous n'avons pas de batailles ici, donc vous pouvez dire qu'il est 1/2 amoureusement dehors, mais c'est presque la disposition des fleurs au sol, que j'appelle la disposition des fleurs. Le produit est au milieu et tout le reste est autour d'elle. Donc, c'est fondamentalement une autre utilisation hors disposition de fleur à nouveau. Ceci est un autre site de certains designers russes et vous pouvez voir ici à nouveau. Nous avons un parc au milieu et tout est à gauche et à droite. Et en bas, c'est à nouveau une utilisation de plancher grimpeur tôt et vous pouvez voir ici qu'il n'utilise aucun titre en haut. Et nous avons 123456 à gauche et à droite. Et sept est le fondamentalement sur l'huile de bouton ici. Donc, c'est à nouveau la disposition des fleurs. Vous pouvez l'utiliser de bien des façons. Vous pouvez voir ou entendre, entendre. Nous avons des icônes avec du texte et jusqu'à Burton et une image. Donc c'est une autre façon. Voici un autre exemple de mise en page de farine, bien que vous ne semblez pas le reconnaître, que c'est la disposition des fleurs de plancher, mais je pense qu'il est sans saveur. Mais vous pouvez voir cette étagère. Sherlock Holmes au milieu est presque un milieu de ce design ou le point central de ce design. Ensuite, nous avons 123 autour d'elle. Ensuite, nous avons cette serrure fermée. C'est aussi le titre. Mais c'est, vous savez, autour de ce personnage principal de la série. Donc, ce concepteur, ils ont utilisé cela dans. Ah, vous pouvez dire de la créativité parce que tout est disposé d'une manière différente. Donc, vous pouvez voir ici nous avons l'image et le texte sur le texte en bas. Ce texte d'image sur l'image de gauche texte sur l'image de droite, texte sur l'image de gauche, texte sur l'image, et puis nous avons ce titre. C' est donc une autre façon créative. Je suis juste d'essayer orteil ouvrir votre esprit dans différents sorties créatives parce que cela va vous aider beaucoup pendant que vous êtes en train de concevoir. N' essayez pas de vous lier dans des grilles de remorquage de nourriture comme ça, comme quatre articles égaux. Essayez de masquer votre design. Essayez d'avoir un peu de créativité dans vos mises en page. J' espère que vous avez apprécié cette disposition de fleurs, conférence ou leçon. Si vous avez des questions à me poser, passons à la leçon suivante 17. Projet ► Mise en page de fleurs: Maintenant, il est temps de soumettre votre mission et de créer quelque chose avec de la farine. Au début, vous pouvez voir En ce moment, j'ai utilisé le verset Fitbit de l'envers et créer cette fleur simple Lay out très rapidement. Et je n'étais pas, tu sais, je l'ai créé en 10 minutes. Donc, au moins, j'attends quelque chose comme ça de ta part. Donc produit au milieu, nous avons six fonctionnalités ou ici et voici la page que j'ai prise. Ok, donc c'est la page. C' est le texte. Ce sont les choses que vous pouvez également utiliser les icônes. Je n'ai pas eu le temps de trouver toutes ces icônes. Vous pouvez les utiliser pour améliorer vos designs. Et ah, c'est le lei fleuri que je veux. Laisse-moi te montrer où on a celui-là. Ok, donc l'un est celui-là et le deuxième est celui-ci. Donc je vous ai déjà montré celui-là, qui est Ah, mon ancien design. Et vous pouvez voir que j'ai ah, presque belle dehors. Mais les choses sont différentes. Nous avons quelques fonctionnalités ici pour les fonctionnalités ici et par personne. Donc, vous pouvez soit créer quelque chose comme ça et vous pouvez avoir une application mobile, notre écran mobile au milieu et montrer quelques fonctionnalités ici. Et vous pouvez aussi avoir quelque chose de similaire à cela, comme je l'ai utilisé mais versa. Et je suis le quatre fois utilisant ou typhus que j'utilise est vraiment grand, qui est un visage de die libre. Et c'est tout. Donc, si vous pouvez créer quelque chose comme cette disposition de fleurs, j'aimerais vraiment voir vos devoirs pour commencer à faire votre mission dès maintenant. 18. La maçonnerie dans le design Web et la conception d'applications mobiles: dans cette leçon. Maintenant, nous allons parler de la grille de maçonnerie maintenant. Pourquoi il est utilisé. Si vous avez beaucoup d'images, vous avez beaucoup de produits hors produits. Vous avez, ah, beaucoup de messages. Articles que vous pouvez leur montrer en utilisant la maçonnerie cred. Maintenant, le jeûne est que si vous avez beaucoup sur le site basé sur l'article ou le contenu basé sur le site où nous avons beaucoup d'images ou d'articles de nouvelles, vous pouvez les montrer en utilisant cette année deuxième. Pourquoi c'est le nom de la maçonnerie. Parce que si vous avez vu une boule de briques Vaulx pleine de briques quand la miss et essayer de construire ce mur, ils ont un patron. Ils essaient d'adapter différentes briques dans différents styles. Ils ne mettent pas chaque brique l'une sur l'autre. Certaines pauses sont à droite sur la gauche, et elles constituent tout le mur. Donc c'est comme ça que ce nom est, comme en fait la cupidité de maçonnerie, et je vais vous montrer quelques arrangements que nous allons regarder quelques exemples. Sites Web qui les utilisent. Personnellement, je n'aime pas manquer beaucoup sont au moins d'accord que inconnu et Ingrid Donc il y a quelques manquent les notes. Si vous êtes traîné vers le bas. Ils sont Il y a du contenu apparaissant encore et encore. Et ils sont là, écran sans fin. Tu peux les appeler et Astrid. Mais Mason a convenu, n' est pas en fait une grille de défilement sans fin. C' est essentiellement Ah, le temps du concepteur de design. Ok, alors voyons des arrangements et ensuite nous allons voir quelques exemples. Ok, donc voici une avidité typique de maçonnerie. Vous pouvez voir ici, nous ici. Nous avons trois produits sur la gauche, et nous avons produit et produit au milieu qui sont gros. Ah, un peu plus gros que les boîtes de produits de gauche. Nos cartes. Vous pouvez les appeler à droite. Nous avons des produits plus petits à plus petits, et puis nous avons un très grand pour au fond. Donc, c'est manquant en fait. D' accord. Le concept est que vous allez orteils ont différentes tailles de briques, sorte que vous pouvez voir au milieu. Nous avons de très grosses pierres à gauche. Nous avons ah, Briggs standard sur la droite. Nous avons deux petites briques que nous avons utilisées. Une très grande brique. Tout dépend de vous. Vous devez créer une variété que vous devez créer, alterner quelques longueurs ou hauteurs orteil, vous savez, créer un certain intérêt pour votre mise en page. Donc c'est comme ça que vous allez utiliser la grille de maçonnerie ? Voici un autre arrangement de la même avidité de maçonnerie. Mais cette fois, j'essaie de l'utiliser d'une manière différente. Dans un créatif, vous pouvez voir que nous sommes là. Ici, nous avons Ah, horizontal. Ah, très grande image de produit en haut qui prend deux colonnes. Et nous avons à nouveau sur la bonne petite pause que nous avons un grand, Ni ici que de nouveau au milieu. Nous avons de larges pauses sur la gauche. Nous avons quelques briques rouges qui sont des tailles standard. Donc, il y a, comme, tonnes de différentes combinaisons, différentes mises en page que vous pouvez faire avec miss et regret. Donc, il est à vos idées créatives ce que vous essayez de faire afin que vous puissiez avoir un produit de fonctionnalité dans ce domaine dans le haut, où nous avons une très grande image que nous avons quelques annonces sur la droite. Peut-être une publicité, peut-être une boîte d'abonnement à gauche. Nous pouvons avoir nos articles dans différentes catégories, quelque chose comme ça. Il y a donc beaucoup de possibilités. Tout dépendra de votre contenu, vous devez donc avoir votre contenu en premier. Bout prêt. Appliquez cette conception de grille de maçonnerie. Maintenant, voyons quelques exemples et l'utilisation du temps riel hors de ces mises en page. Maintenant, c'est un exemple de cupidité de maçonnerie. Mais je n'aime vraiment pas cette couche. Pourquoi ? Il y a deux raisons. L' un est que le genre hors. Des mises en page très créatives qui sont totalement hors du chemin vont confondre vos utilisateurs. Donc au sommet, ça pourrait être bien, mais ici, c'est totalement un gâchis. Je ne peux pas dire quelle section est ou les images plus tard la résection des orteils. Que ce soit cette image est littéralement celle-là ou celle-ci. Il doit donc y avoir un écart entre ces blocs de texte et les images. Je déteste vraiment quand les designers, vous savez, essaient d'utiliser la créativité et de créer un gâchis comme celui-ci. C' est un Rubley très créatif sur, mais il est totalement utiliser moins. Pourquoi je vous ai montré ici parce que, à mon avis, la mise en page, vos couleurs, votre design visuel, tout va faciliter la fonctionnalité de votre site web. La facilité d'utilisation de votre site Web, la capacité de lisibilité et la compréhension de votre utilisateur utilisateur doivent être en mesure comprendre et de comprendre ce qu'il ou elle recherche facilement. C' est complètement foiré. Je pense que pour moi, c'est totalement, euh, cause perdue donc je ne vais jamais, euh, te dire de concevoir quelque chose comme ça, mais juste pour avoir l'idée de ce qui peut être fait avec Mason encore une fois, vous pouvez voir que nous avons un autre exemple de maçonnerie. Vous avez peut-être vu cette disposition dans Ah, fenêtre, Stan. Barre de menus. Donc pour moi, je ne l'aime pas beaucoup, parce que pour moi, c'est vraiment foiré en ce moment. Celle-ci a l'air mieux parce que nous avons des boutons ici et tout cela est à l'intérieur de toute cette boîte. Donc, ce n'est pas une lettre à l'image à droite, à gauche. Donc, chaque section est toute seule. Donc, il est un peu sont que je peux voir beaucoup mieux que celui-ci pour moi. Cette mise en page, comme vous pouvez le voir ici avec cette image, je ne peux pas savoir que cette image est ravie. Orteil le texte du bas ou le fonds supérieur. Donc, c'est un peu déroutant pour moi, donc j'ai généralement tendance à éviter ces couches hors genre. Vous devez avoir des séparations très claires entre les différentes sections de contenu. N' essayez pas d'utiliser des images comme ça. Notre orteil d'essai, ont une bordure autour d'eux, donc je peux voir que c'est une partie entière de ceci est un bloc entier. Maintenant, vous pouvez voir pour moi par ici. Je vois que c'est Look, cette personne regarde celui-là, et il regarde celui-là. Je ne sais pas si toutes ces affiches ont été ou si ce gars est lié à ce Collender ou autre chose. Donc je C'est vraiment déroutant pour moi. Alors essayez de vous éviter. Avez-vous besoin d'avoir une séparation de riel entre différents blocs de texte ou d'informations. Maintenant, voici de bonnes chaussures. Mason était d'accord. Et il est utilisé sur une bonne, juste bonne confiance ou a été juste comme vous l'appelez. Et vous pouvez voir ce que j'ai ici pour la maçonnerie, et vous pouvez voir des tonnes de regrets manquants ici. Comme celui-là, par ici. Ils ont une grande utilisation de ceux-ci et vous pouvez voir la séparation totale. Voyons celle-là. Vous pouvez voir que ces images sont totalement séparées les unes des autres avec un certain écart. Et c'est le bon usage de Mason Recruit. Donc, Mason regret est utilisé sur Pinterest et nous avons ce blog ou curio snort com et vous pouvez voir tous ces sont en fait absents Regrade forcé articles que vous pouvez voir ou entendre qu'il va continuer et continuer pour moi. Je n'aime pas ces sites qui défilent jamais qui doivent avoir une fin de toute façon, donc ici nous avons un plus complètement tous les points com Et si nous descendons, vous pouvez voir à nouveau. Nous avons un grade de maçonnerie et nous avons des postes différents. Articles même. Tu vois où ? Ici, ils ont des lignes séparées claires boîtes autour d'eux donc je peux voir que c'est un poste. C' est un autre. C' est un autre. C' est donc un autre exemple. Excellent exemple. Très simple, très unique. Très gentil. Ensuite, nous en avons un autre, qui est vanité, Dean. Et vous pouvez voir ici si je traîne vers le bas, nous avons encore le même regret de médecine. Mais le problème ici est pour moi que c'est, euh vous pouvez dire parfois que je vois des irrégularités comme nous pouvons voir le texte de l'en-tête de l'image et ah, le texte est faible ou quelque chose comme ça. Quelque chose manque dans ce design. Peut-être utilisé quelques lignes ici pour avoir une certaine séparation ou peut-être en bas, ligne juste pour montrer que c'est une séparation ou quelque chose comme ça. Mais pour cela est un autre exemple hors maçonnerie, grec. Donc celle-là est génial. Celle-ci est bonne. Celui-ci est vraiment génial. Et, hum tout est à propos de la cupidité de maçonnerie. J' espère que vous avez compris l'idée d'utiliser Mason Recgrade. Ah, et vous l'utiliserez de différentes manières créatives. Si vous avez des problèmes, faites-le moi savoir dans les questions. Ou tu peux me demander n'importe quoi. Vous pouvez me contacter personnellement. Je réponds surtout dès que je peux espérer vous voir dans la prochaine leçon. Passons donc à la vidéo suivante. 19. Tuer avec des combos pour pourcentages dans la conception de mise en page: dans cette vidéo, je vais orteil Parlez d'une méthode créative de définir votre mise en page, qui est toujours penser en pourcentages, mais jamais comme vous définissez votre note sur votre mise en page. Essayez de penser dans une certaine mesure que cela va enlever 20% de la mise en page horizontalement. Cela va prendre comme 80% de réduction sur la mise en page afin que vous puissiez définir Lee en pourcentages et allouer différentes grilles en utilisant des pourcentages. Et vos développeurs vont vous aimer parce que c'est plus facile pour vos développeurs ou équipe de développement. Citation, et vous pouvez créer différentes variations simples pour avoir un peu de créativité dans votre mise en page. Maintenant, si vous avez déjà joué à des jeux vidéo ou à des jeux de combat, il y a un terme appelé combo. Donc combo est quand vous essayez de frapper votre adversaire et continuer à les frapper avec une combinaison différente off. Il est tellement dans leur conception. Ce que je veux dire par pourcentage compose, c'est que vous allez utiliser différents combos de mise en page comme 60% et 40% campell 50 combo, 20% et 80% compulsif. Nous allons très sur la mise en page en utilisant toutes ces combinaisons différentes, alors Nous pouvons également avoir trois combos de colonnes comme 2020 et 60 com bowl 40% 30%. Donc, ils rattrapent tous 100% pour s'assurer qu'ils s'additionnent, 200% ont acheté. Essayez, vous savez, faire un combo qui va au-dessus ou au-dessous de 100%. Ensuite, nous avons 50 30 20. Donc, il y a, vous pouvez dire des tonnes hors combinaisons. Vous pouvez faire beaucoup de combinaisons différentes en faisant cela, comme vous pouvez avoir 10% ou 20% ou 30 par combo 30 70%. C' est donc une autre technique que je pense que beaucoup de designers commencent. Essayez de penser en ces termes. Essayez d'utiliser des combinaisons de pourcentage dans votre mise en page. Donc ici vous pouvez voir que je montre quelques idées sur différents combos comme vous pouvez voir en haut . Nous avons 40 60 maintenant dans la section suivante, plutôt que d'utiliser à nouveau 60 40 ou 40 60 ou de répéter mal. J' essaie de le déplacer sur la gauche, et j'ai essayé d'utiliser le combo 25% et 75%, puis sur la rangée suivante ou dans la section suivante de mon design, j'utilise 25 25 25 25 25 25. Nous avons donc quatre boîtes égales. Donc, voici comment vous allez très votre mise en page avec différents combos d'âge pour cent, plutôt que d'utiliser un moniteur sur la mise en page américaine hors 40 60 40 60 40 60 ou 60 40 ou 50 50. Cela va créer un design ennuyeux. Vos utilisateurs vont, vous savez, vos esprits. Ils ont besoin de quelque chose de différent après quelques secondes. Donc, chaque fois que vous essayez de très votre mise en page, il va créer un certain intérêt dans leur esprit, et ils vont continuer à naviguer qui enveloppe. Je n'essaie pas d'être plus créatif et d'essayer de créer des mises en page qui sont, vous savez, un problème pour les utilisateurs. Mais vous avez deux très vos combos. C' est donc une autre technique que beaucoup de designers n'utilisent pas. Maintenant, voici un tout à fait et entendre ce que j'essaie de faire est que je suis en train d'essayer de très ma mise en page et essayer l'espace de conseils orteils ici plutôt que d'avoir 2040 60 combos. Je vais avoir un peu d'espace ici, donc nous avons 6 50 % sur les cheveux, 25 % sur les cheveux et 25 % sur les blancs dans le Haider. Donc, ce que je fais est 50 25% d'espace blanc et 25%. Euh, quoi ici ? Donc tu peux faire quelque chose comme ça, aussi. Alors n'essaie pas de tout ressentir. Vous pouvez à nouveau utiliser des espaces blancs dans votre mise en page. Par ici. Comme vous pouvez le voir, nous avons nous avons environ 40% quelque chose comme ça ou ici. Je pense que vous devez diviser les 5/12. Alors retirez l'idée chaque fois que j'utilise le pourcentage. C' est 25% et ah, c'est, je pense qu'il serait divisé en 75%. Donc, peu importe ce que j'utilise, j'essaye de réaliser mon design. Et encore une fois, vous pouvez voir ici, ces quatre boîtes sont 25% mais la mise en page est différente. Il a des radiations en ajoutant de l'espace blanc ici. Maintenant, je vais vous montrer quelques exemples de l'un de mes designers préférés. Tombola demain. J' essaie de le suivre depuis beaucoup de temps, comme peut-être un an ou plus, et vous pouvez voir ici. Ceci est un design récent pour si votre encombrant et vous pouvez voir. Je veux vous montrer comment utiliser votre mise en page en pourcentages et essayer de la varier en différentes combinaisons d'entreprises. Donc ici, vous pouvez voir si vous regardez cette tête ici, nous avons, genre, genre, 65 ou 60% et 40% pour ce tabouret portail ou ce téléchargement. Parlez-en sur une vidéo ici. Alors, si vous allez dans la prochaine section que nous avons sur et cette petite information sur ce gars génial de toute façon, nous avons, genre, 30 ou 20% par 80% frais généraux d'allocation. Encore une fois, si nous allons dans ce domaine, nous avons, genre, genre, près de 50 % sur 50 %. Nous avons plus d'espace, un peu d'espace, un pourcentage pour l'espace blanc. Donc je vais l'appeler 40 60. Donc 10% est presque de l'espace blanc. Donc, c'est encore, encore une fois. Vous pouvez le voir encore ici. Il a utilisé 20 ou 80% que nous avions 25 25 25 25 25 à nouveau. 2080 25 25 %. Encore une fois, 2080. Donc, vous pouvez voir que c'est comme ça que va votre mise en page. orteil ressemble à un design plus créatif. Donc, vous avez tendance à avoir quelques gumbo, différentes combinaisons pour différentes sections. Vous pouvez voir qu'on est là. Ceci est répétitif de plusieurs façons différentes. Donc, c'est encore une fois un principal hors conception répétition Port. Essayez de très votre répétition. Alors n'essayez pas d'utiliser une chose similaire 10 fois ici. Essayez de très dans votre mise en page. Donc, c'est un excellent moyen de montrer comment vous pouvez utiliser des mises en page et créative est comme Vous pouvez voir où ici, plutôt que d'utiliser juste image vous. Il a utilisé l'image avec du texte et sur la gauche à nouveau, nous avons un bouton et l'image et cette suivante saoudienne et cette rubrique maintenant. Voyons maintenant un exemple de plus. Voici encore une autre conception de l'effort Amal. Et vous pouvez voir où ici presque nous avons plus lourd sur la gauche. Ici, nous avons l'image et ce fardeau que ce fardeau prend à l'intérieur de cela. Tu peux dire Ah, un peu briser la mise en page. Mais il a toujours l'air superbe. Il est appelé comme hors de la boîte. Plus tard. Je vais parler dans une autre leçon de toute façon, que vous puissiez voir encore ici, nous avons, genre, 70 40 ou 70 30 quelque chose comme ça. Et encore dans cette section. Ici, nous avons ici sur la gauche, 40 ou 45 35 65 ou 60% presque sur la lumière. Ainsi, vous pouvez voir que c'est une grande vidi ation et étaler à nouveau. On a des frais généraux. On a ah, 33 33%. Ou encore, dans cette section, vous pouvez voir que nous avons, genre, 30 70 à nouveau, presque similaire à ça. C' est encore une grande utilisation. Et nous avons, euh, 33% 30% 33%. C' est 100%. C' est à nouveau 33% 3 commentaires. Et ici, nous avons quelque chose de similaire. Presque cette tête par ici. Donc la disposition est qu'on a, genre, 40% par ici, ou peut-être 35% et 65 ou 60% sur la gauche. C' est donc la ventilation des différentes mises en page de grands designers, et c'est ainsi que vous allez utiliser vos combos. Et je peux vous montrer 10 et des milliers de modèles différents. Mais je pense que ça va vous expliquer tout pour vous, donc je n'ai pas besoin d'expliquer plus que ça. Ce n'est pas un sujet très scientifique ou des équations de voyage dans le temps. Donc c'est tout. Si vous avez des questions à me poser, passons à la prochaine leçon. 20. Utilisation créative des marques dans le design de mise en page: dans cette vidéo, je vais parler d'un concept très important hors étiquette design, qui utilise les espaces blancs et les marges de manière créative. Beaucoup de designers, j'ai vu que l'orteil d'essai éviter beaucoup d'espace blanc et les marges sur les côtés de leur conception. Ils ont peur, en utilisant un espace blanc ou une salle de respiration dans leur conception. Maintenant, je vais vous montrer des exemples et des idées de mise en page. Et puis je vais vous montrer comment différents designers utilisent des espaces et des marges pour créer des sorties créatives qui vont paraître ah, Seigneur meilleur que le vôtre. Dispositions habituelles où nous avons un montant égal hors marges des deux côtés. Donc, ici, nous allons discuter de deux techniques. Avoir des marges d'un côté et utiliser des blocs d'espace vocal. Maintenant, le design est une histoire. Donc, comme une histoire, vous n'avez pas à tout montrer au début. Vous avez des scènes où seule une partie du dessin est visible. Donc, voici vous pouvez voir dans cette conception que nous utilisons une grande ou lourde marge sur la droite. Nous avons beaucoup d'espace blanc dans notre première section d'en-tête sur le côté droit. Maintenant, ça veut dire qu'on laisse un gros bloc d'espace blanc par ici. De même, dans cette troisième section vivaient un très grand bloc d'espace blanc sur la gauche. Whitespace, s'il est utilisé correctement, a son bizarre. Donc, si vous essayez de faire quelque chose comme ça, vous pouvez le faire. Vous pouvez également l'appeler design asymétrique car il n'est pas correctement équilibré ou équilibré des deux côtés . Mais quand même, il est assez équilibré. Donc, si vous regardez dans la nature, vous verrez beaucoup de symétrie avec asymétrie. Si vous regardez n'importe quel arbre sur les branches et les feuilles qui sont tombées sur le sol, ils ne sont pas en symétrie, mais ils ont l'air bien parce qu'ils ne s'écartent pas trop du patron pop. Donc, si vous avez un modèle comme celui-ci et que vous utilisez des espaces blancs à gauche et à droite et que vous ne l'êtes pas, vous pouvez dire que vous utilisez les blocs vice pres dans vos notes. Votre design asymétrique ou votre design déséquilibré se sentira toujours équilibré. Donc je suis là, en utilisant beaucoup de gros blocs sur des espaces blancs ici. Maintenant, c'est un autre exemple, je l'appellerais Parfois mise en page de livre sont beaucoup de graphiques. Les concepteurs pourraient en être familiers. Si vous regardez de près, vous pouvez voir que la ligne visible qui tombe ce dessin est par ici. Donc nous avons, genre, deux colonnes. Gap par ici sur le côté gauche. Et aussi de même, vous pouvez voir ici dans le haut. Nous avons trois colonnes ici et deux colonnes par ici. Alors cachons ça. Maintenant, si on essaie de faire quelque chose comme ça, c'est comme ça que j'essaie juste d'expliquer cette idée. Maintenant, vous pouvez voir que ce genre de mise en page va orteils ont, ah marges, qui vont être mawr incliné d'un côté. Donc nous aurons de plus grandes marges d'un côté, comme vous pouvez voir que vous êtes là. Ici. Nous avons, genre, marge de trois colonnes, et à gauche, nous pourrions avoir une marge plus petite. Donc, cela va créer un très bel effet dans votre design. J' ai vu beaucoup de designers qu'ils essaient d'équilibrer le voyage basé sur les deux côtés, mais parfois si vous essayez de déséquilibrer les orteils. Essayez d'utiliser un côté plus lourd avec de l'espace blanc, il va mieux paraître. Donc, dans votre prochain design, je vous conseille d'essayer de faire quelque chose comme ça. Essayez de déplacer vos éléments de conception. Laissez deux colonnes plutôt que, vous savez, tout délimiter avec ces colonnes et essayez de tout remplir. Essaie de quitter les pieds. Ah, beaucoup d' espace, euh, euh,d'un côté et un peu moins d'espace d'un côté. Il va donc créer un très bel effet. Maintenant, je vais vous montrer quelques exemples où les marges ont été utilisées de manière créative. Vous pouvez voir si vous regardez cet écran ici à gauche. Les marges à gauche sont plus que la marge à droite. Donc nous avons plus d'espace blanc sur la gauche que nous avons plus d'espace blanc sur la droite. Donc, c'est comme ça que vous allez essayer orteil, avoir un autre type hors mise en page dans votre application mobile. Ça va avoir l'air plus créatif. Voyons voir, dit cet exemple et je vais vous montrer ce que je voulais vraiment dire. Donc si tu descends, laisse-moi te montrer, ou ici. Donc, c'est la page que vous pouvez voir cette conception entière est inclinée sur le côté droit. Il est plus lourd sur le côté droit et sur la gauche, vous pouvez voir si vous regardez de près. Il y a beaucoup d'espace blanc. Donc, si vous suivez cette conception, vous pouvez voir pourquoi. Beaucoup d'espace blanc, beaucoup d'espace blanc, beaucoup d'espace blanc. Et puis ce concepteur a changé la vue linéaire ah et inverser cela et nous avons beaucoup d' espace blanc sur la droite. Encore une fois, nous avons des manières égales de vice presque égales des deux côtés à nouveau. Beaucoup d'espace blanc sur le côté droit. C' est ainsi que vous allez utiliser vos marges ? Votre espace blanc est-il créatif ? Vous devez laisser un bloc de voix plus large sur la gauche ou sur l'orteil droit. Obtenez des mises en page créatives. De même, nous avons cette conception intelligente de vente au détail. Et si vous vous concentrez clairement sur cette conception et voyez qu'il est également presque incliné sur le côté gauche . Nous avons donc un design plus lourd sur la gauche. Nous avons Mawr espace vide sur la droite. Donc si je traîne vers le bas, tu peux voir Ok, Ok. Donc, ici, nous avons plus d'espace blanc. Tout est une ligne à gauche. Nous avons donc plus d'espace blanc ici, même dans la section. Donc, ce sont en fait des Juifs hors de l'espace blanc. Essaie orteil. Concentrez-vous que vous pouvez également avoir beaucoup ou laisser beaucoup d'espace blanc sur le côté droit ou gauche pour obtenir de meilleures idées dans la mise en page de vos points d'accès ou sites Web. Voici un autre exemple Flex plat navire fiscal plus intelligent et vous pouvez voir qu'ici, nous avons quelque chose d'une certaine utilisation créative dans cette section hors espace blanc. Vous pouvez voir que nous avons un très gros bloc de texte et nous avons une image et nous avons beaucoup d' espace blanc sous cette image. Donc je ne pense pas qu'on va partir en termes de marge. Je place sur le rire à droite. Vous pouvez également laisser un grand bloc d'espace blanc en bas. Donc, il va créer beaucoup de bon effet. Vous pouvez voir que cette image est déjà très lourde. Il est coloré, donc les utilisateurs donc il n'est pas à la recherche de déséquilibre. Nous avons beaucoup de texte ici, mais il a toujours l'air superbe. Donc, c'est juste comme une forme hors. Tu peux dire, hum ah ah Hammer ou quelque chose comme ça. Donc nous avons ah, direction verticale par ici et horizontale par ici. Alors à deux pâtés de maisons, pourriez-vous dire combinées ensemble ? De même, vous pouvez voir dans cette section, nous voyons l'inverse inverse de la disposition inverse pour cette mise en page. Donc, c'est une autre technique que je vous ai déjà montré que vous avez essayé très choses orteil obtenir une meilleure mise en page et de regarder mieux orteil ont quelques mawr dessins engageants à nouveau. Si vous regardez en haut de cette section ici, vous pouvez voir qu'il y a beaucoup d'espace libre après cela. Ah, la navigation. Donc nous avons, genre, je pense que deux ou peut-être 300 ou 350, peut-être 400 pixels de distance par ici. Donc, c'est beaucoup hors de l'écart. Je n'ai pas vu beaucoup de sites Web qu'ils essaient d'utiliser des espaces blancs comme ça. Voyons d'autres exemples ici. Nous avons un autre exemple et voici cette application et vous pouvez voir que nous avons plus de marge sur la gauche et tout est décalé sur la droite. Donc, mais Hanzal, vous pouvez voir nos enfants vers la droite et ah, toute cette information instantanément vers la droite, bien qu'elle soit alignée sur la gauche, mais tout ce que j'ai. Ah, beaucoup de marge. Ou ici, voyons encore celle-là. C' est un autre exemple. Ici encore, vous verrez clairement que nous avons beaucoup d'espace blanc sur la gauche. Donc, cela va créer un très bel effet dans vos designs. Si vous concevez pour Mobil ou des sites Web. Ne pensez pas que nous avons un très petit écran sur mobile, donc nous ne pouvons pas utiliser des idées créatives. Vous pouvez les utiliser. Ok, donc nous avons un autre exemple. Et encore une fois, vous pouvez voir ici, nous avons beaucoup d'espace blanc sur la gauche, et tout est Enfants sur la droite. Même le bouton plus est utilisé très Vice Lee. Donc, tout est la plupart du temps lourd conception sur la droite sur une bonne marge sur la gauche. Il va donc créer un look créatif dans vos designs. Donc je vais vous donner ah, et de l'exercice ou de l'affectation pour créer quelque chose d'un écran comme celui-ci. Je vais vous donner un exemple d'écran. Nous allons essayer de faire quelque chose comme ça. Peut-être quelque chose comme celui-ci. Cette semaine et nous verrons comment vous venez avec des idées différentes. J' espère que vous avez appris comment nous allons aux pieds. Utilisez les marges créatives sur le côté gauche ou droit ou même en bas. Une image pour créer des mises en page créatives et essayer orteil sortir des concepteurs normaux. Lynn. Donc, nous sortons de leur voie et nous conduisons un peu hors de la voie créative , nos voitures design. Ok, donc j'espère que vous avez apprécié cette leçon. Si vous avez des questions à me poser, passons à la prochaine leçon. 21. Projet de l'ordre créatif: Maintenant, vous avez appris à utiliser Ah, beaucoup de marge sur le côté gauche ou droit pour créer des mises en page créatives. C' est le moment où tu vas me confier une mission comme celle-ci. Je vous montre sur votre écran. Je suis en ce moment en utilisant la figure. Vous pouvez utiliser n'importe quel logiciel de conception, n'importe quel outil que vous voulez. Ce que je veux que tu fasses, c'est que tu vas laisser beaucoup d'espace à gauche ou à droite. Tout ce que vous pensez est possible pour vous. Alors maintenant, je suis toi. J' ai créé cette application abdominale appelée aliments sains ou il va manger ou autre chose. Vous pouvez concevoir quelque chose comme ça et me montrer votre écran comme ça. Essayez donc de créer une mise en page avec beaucoup d'espace blanc ou de marge sur la gauche ou la droite. Et ici, nous avons l'image rendue que vous pouvez voir ici. Donc, créez quelque chose comme ça et j'attends vos designs. Essayez de soumettre une maquette de conception où vous montrez votre design dans un téléphone mobile ou quelque chose comme ça. Voyons donc ce que vous pouvez trouver 22. Méthode de superposition hors boîte et superposée dans la conception de mise en page: dans cette vidéo, je vais parler d'une technique très différente que beaucoup de concepteurs n'utilisent pas, ou peut-être les avis qu'ils ne comprennent pas, qui est hors de la mise en page de la boîte. Maintenant, hors de la boîte est fondamentalement basé sur ce principe que chaque fois qu'un utilisateur ou des êtres humains , ils continuent à voir le même patron ou semblent similitude dans votre conception comme vous avez plus, pas propre voix. Donc, par exemple, si vous entendez de la musique, si le Sam be beat dure comme 10 minutes, vous allez vous ennuyer. Alors, quels musiciens sont là ? Essayez orteil très après toutes les 30 secondes ou après toutes les 15 secondes que vous essayez Toe Jane. Il y a des battements ou des choses comme ça. Il s'agit donc de musique. Mais chaque fois que vous concevez quelque chose, vous avez ah, mise en page. Vous devez garder l'intérêt de vos utilisateurs dans votre conception. Pour ce faire, vous devez remorquer, penser et changer. Là, vous pouvez dire la ligne de visualisation, par exemple, si elles regardent quelque chose et tout est aligné orteil une ligne sur la gauche, vous devez changer cela. Après un certain temps, peut-être son intersection. Vous essayez d'étendre l'arrière-plan à l'ensemble de l'écran ou vous essayez orteil chevaucher certains éléments dans votre orteil de conception Une autre section. Vous chevauchez deux éléments, et il va créer une mise en page très intéressante. Essayez donc de dévier des lignes de la grille. Essayez de dévier du même type monotone hors mise en page de conception. Essayez de sortir de la boîte et je vais partager avec vous beaucoup d'exemples différents et aussi différents écrans, que j'ai des échantillons d'écrans que j'ai conçus pour vous. Donc nous allons en discuter et je vais vous donner beaucoup d'idées créatives pour utiliser cette technique hors de l'emballage dans votre design Leo. Et maintenant, je vous montre le premier arrangement et vous pouvez voir que tout est aligné sur la gauche sur une seule ligne. Maintenant, si vous regardez du bon côté, je suis très en train de vivre mes races. Ah, Seigneur. Donc, dans la deuxième section ici, vous pouvez voir que j'ai étendu cela et que j'ai déplacé cette image hors de mes notes. Voici mes grilles de 12 colonnes et vous pouvez voir vos cheveux. J' utilise des grilles de 12 colonnes et je déplace cette image en dehors de Tikrit. Vous pouvez bouger ça, et peut-être qu'il va toucher vos cheveux en allant prendre tout le côté droit. Vous pouvez également faire quelque chose comme vous pouvez l'étendre dans cette direction dans les deux directions et va briser la grippe de vos utilisateurs. Je donc ils pourraient penser que tout est contenu dans ce conteneur. Mais si vous essayez de briser ce pays en conteneur 12 qualité conteneur, il va orteil faire beaucoup plus intéressant. Maintenant, voici un autre arrangement sur la technique hors de la boîte. Plutôt que d'étendre votre image, arrière-plan ou toute autre chose notre cher élément de design et de briser la note, nous sommes en fait en train de rompre la mise en page. Nous chevauchons les choses les unes sur les autres, donc nous avons l'image du contribuable en arrière-plan, et le suivant, le texte se chevauche sur l'image. Donc, c'est une autre technique, que je pense que beaucoup de gens remarqués sont de nouveaux designers. Ils n'essaient pas de l'utiliser, alors n'ayez pas peur. Tu vas avoir l'air beaucoup mieux. Vos designs vont être beaucoup mieux quand vous essayez de faire quelque chose comme ça. Alors essayez le chevauchement des orteils, l'image sur le texte ou nous avons un bloc fiscal et nous avons une image ici comme ça, et le texte se chevauche. Donc maintenant le texte est en fait un élément lisible, donc nous ne voulons pas cacher beaucoup de partie de celui-ci. Si vous voulez masquer un peu le texte que vous avez, vous devez en masquer un peu de la partie. Donc, il est encore lisible et l'utilisateur peut comprendre le sens. Alors gardez ça à l'esprit. Maintenant, vous pouvez également chevaucher l'image sur une image comme celle-ci. Nous avons beaucoup d'images. On peut aussi avoir n'importe quel Mitchell ici juste pour briser le monotone. Votre conception est une histoire que vous avez changé de remorquage. Une torsion de l'intrigue dans votre histoire est que vous avez tracé Jane la direction de votre histoire que de nouveau . Retournez au point. Ce sont donc les choses que vous devez garder à l'esprit lors de la conception créative. Maintenant, vous pouvez voir que vous pouvez créer beaucoup de combinaisons différentes ici. Vous pouvez voir que j'ai une image d'oiseau complète et que j'ai le texte qui se chevauche sur la gauche. Et il a juste une partie de la partie hors comme un chevauchement. Maintenant, dans la section suivante, vous pouvez voir que je change la direction de mon labo. Je suis allé du côté droit, et maintenant nous avons un bloc de côté droit qui se chevauche sur l'image, qui est presque au milieu. Donc, vous pouvez très ces choses dans votre mise en page. Assurez-vous juste que vous tombez quelques grilles ici. Vous pouvez voir que j'aligne les choses sur les grilles, mais cela va effacer beaucoup de disposition créative lorsque vous essayez d'implémenter des choses comme ça. C' est donc un concept très important. Je répète encore et encore. Essayez d'utiliser des sorties créatives hors de la mise en page de la boîte. Essayez les choses de chevauchement des orteils. Essayez d'échanger vos affaires hors de vos boîtes. Réfléchis hors de la boîte. Et ne vous limitez pas aux 12 colonies. La cupidité. Maintenant, voici une autre relation. Vous avez peut-être vu ça. J' ai un fond d'image complet, puis j'ai un formulaire d'abonnement en haut. Donc, j'ai vu cela et je l'ai utilisé dans beaucoup de designs. J' ai conçu quelques pages de destination où j'ai utilisé ce formulaire d' abonnement et le formulaire d'abonnement est un peu, vous savez, étendant sur cette première section d'en-tête. Donc, cela va créer beaucoup d'intérêt. Maintenant, en bas vous avez, vous voyez une section d'abonnement ici, et vous pouvez voir que nous avons ah, mal cultivé en bas et en haut. Nous avons cet abonnement. Ça va être un formulaire d'abonnement dans la direction gauche droite plutôt que de parler à l' ennui. Ça va être un formulaire d'abonnement dans la direction gauche droite plutôt que de parler à l' Donc il y aura un email ici que ah Burton ici et un peu de texture ici, quelque chose qui est tellement abonnez-vous à notre newsletter ou à des choses comme ça. Maintenant, vous pouvez voir que c'est ah, presque prendre. Il est presque au milieu de cette section ici, et c'est à droite, et il prend 12345 près de cinq colonnes. Et cela prend presque, je pense, 10 colonnes. Il y a donc beaucoup de variations que vous pouvez faire maintenant. Je vais vous montrer quelques exemples s afin que vous puissiez obtenir ce que vous pouvez réellement utiliser et ce que vous pouvez réellement, parce que dans l'inspiration va vous donner beaucoup d'idées. Nous générons des idées à partir d'autres idées. Voyons donc quelques exemples dans la leçon suivante 23. Exemples de conception Web et d'applications mobiles hors boîte de boîte à partir de boîte à des exemples: Maintenant, voyons quelques exemples hors de la mise en page de la boîte et comment vous pouvez l'utiliser. Maintenant, si vous regardez ce dessin, laissez-moi vous montrer. Ok, alors allons à cette section par ici. Donc, si vous regardez ici, nous avons ces piles ici qui prennent quelque chose comme ça. Donc, à droite, vous pouvez voir que nous avons une partie. Et si vous êtes un nouveau concepteur, vous pourriez utiliser votre fardeau quelque chose comme celui-ci. Donc, vous pourriez utiliser Vous pouvez aligner qui est de sélectionné. Vous pouvez aligner votre bouton sur le texte comme celui-ci. Donc, vous prenez tout l'espace et une autre taxe et des choses comme ça. Donc, voici, vous pouvez voir, plutôt que d'utiliser ce bouton et de le déplacer juste en dessous de l'aligner avec ce texte, ce concepteur l'a effectivement déplacé sur la gauche afin que vous puissiez voir tout est aligné ici . Le texte est une ligne, mais les éléments à droite ont des variations différentes. Donc, cela va beaucoup aider. En fait, ce concepteur a un peu déplacé ce bouton sur la gauche. Donc c'est ah une autre technique. Et ici, vous pouvez voir. Ici, nous avons ceci. Tu peux voir quoi ? Ici ? Ces images, elles sont étendues hors de cette section ou de la tête. De même, je t'ai dit que tu en avais deux. Très. Votre mise en page. Tu dois changer les choses. Par exemple, Vous pouvez voir ici cette section ici, il se termine par cette ligne hors direction. Donc, à droite, Nous avons permis de dessiner quelque chose ici, par exemple, Rectangle. Donc, en fait, c'est la direction que je me dirigeais quand on a quitté ça. Ok, donc nous devons, euh, les lignes. Le premier mouvement est celui-ci et le second, celui-ci. Donc celui-ci, il a gardé le long des éléments en mouvement. Les éléments sont alignés sur cette ligne ici, mais ici, en fait, il a tout déplacé de cette ligne. Donc, c'est comme ça que vous allez créer dans juste dans votre conception. Il suffit de regarder ces deux sections. D' accord ? Donc, vous avez l'idée comment, en fait, nous allons utiliser hors de la mise en page de la boîte de manière similaire dans l'étape suivante, et maintenant vous pouvez voir hey, effectivement essayé orteil varié ou il ou elle qui que le concepteur est ce C'est un grand design. Je crois que je l'ai eu de B Haas. Non, je ne me souviens pas où est réellement l'UL ou quel que soit le design. Ce nom est eso Ici, nous avons encore la même chose. Mais vous pouvez voir l'arrangement éteint. Les images ont été modifiées. Donc ici nous avons 12312 Et ici nous avons 12 et 3 dans la direction verticale. Donc c'est un grand changement ici. Et aussi, vous pouvez voir la mise en page en raison du changement de direction de l'image. Il semble clair de la même façon encore une fois. Nous avons quelque chose ici qui brise la mise en page de sorte que vous pouvez voir cette image étendue ici. Maintenant, la section suivante commence et prend ceci comme ça pour que vous puissiez voir que vous pouvez comprendre ce que j'essaie orteil. Dites-vous le point ici encore, vous pouvez voir ceci est étendu en dehors de la boîte sur, et c'est tout. C' est pourquoi je voulais vous montrer cet exemple. Parce que c'est un excellent exemple de varier. Votre mise en page sort de la boîte. Voyons d'autres exemples. D' accord. Donc, plutôt que de penser que vous êtes tous, n'avez pas à déplacer votre image ou vos choses hors de la boîte. Mais vous pouvez utiliser une technique similaire qui est réellement utilisée ici. Vous pouvez voir dans cette section ici. Allons zoomer un peu. Donc, dans cette section ici, vous pouvez voir que je l'appelle aussi hors de la technique de la boîte. Pourquoi ? Parce que vous pouvez voir cela montre le mouvement. Maintenant, nous avons un patron à l'arrière de cette boîte, cette image ici et elle se déplace dans la direction gauche et supérieure. Donc, il est en fait avoir quelques antécédents, un peu d'arrière-plan de ce patron ou de l'aide. Et il est aussi en train de le sortir de la boîte. Pourquoi ? Parce que vous pouvez voir que c'est la ligne hors site. Donc ici les utilisations de LA, um les yeux se déplacent dans la destruction. Mais pour briser ça, il a utilisé ce petit mécène ou ici. Donc j'ai vraiment adoré cette technique. C' est une autre technique que vous avez orteil montrer quelque chose, un peu de couleur. Un mécène. Vous pouvez utiliser un peu d'arrière-plan. Je l'ai vu beaucoup de fois. De même, ici, vous pouvez voir dans ces cheveux il a un motif. Il a quelques feuilles sur qui s'étendent hors de cette boîte. Vous pouvez voir si vous dessinez une boîte ici. Dessinons une boîte. Donc, si nous dessinons une boîte, vous pouvez voir que c'est ce congé qui sort de la boîte. C' est un autre exemple, Lexie. Peu de plus. Et ici, nous avons quelques exemples hors espoir. Apportez d'autres éléments. Ok, donc ici nous avons un autre design qui est très simple design. Et vous pouvez voir tout ce texte à bord se chevauche sur cette image. Donc, c'est une autre technique que nous avons, que je vous ai dit que le chevauchement sur d'autres éléments de conception. De même, si nous descendons ici encore, nous avons deux images qui se chevauchent. Plutôt que d'avoir du texte chevauchant l'image, nous avons une image qui chevauche l'image. Donc c'est une autre technique que je vous ai montrée. Et ah, ici, nous avons la même technique. Vous pouvez voir si nous partons d'ici. Il s'agit d'une ligne hors site. Donc c'est la boîte. Et dans la section suivante, vous pouvez voir hey déplacé sur la gauche et un espace de prise différent ici. Donc maintenant notre grand est en fait si large donc nous avons deux blocs l'un sur l'autre. L' une est une direction verticale britannique. On est un peu dans une direction horizontale. Cela fait à nouveau varier votre mise en page, avoir des mises en page différentes souvent hors de la boîte et déplacer les choses autour. Donc, cela va commencer à créer beaucoup d'intérêt pour vos conceptions. Maintenant, venant à l'APS mobile, vous pouvez pas voir beaucoup de choses ici, mais, euh, je dois vous montrer quelque chose qui se chevauche pour que vous puissiez voir ce fardeau. Vos cheveux tombent, et il a l'air vraiment sympa parce qu'il avait il chevauche la moitié de la ah, la moitié off. Le fardeau se chevauche sur cette image. C' est donc un concept très important. Vous pouvez utiliser le mangé, et il va créer beaucoup d'intérêt, même vos laboratoires mobiles. Voyons donc quelques exemples plus ici. Nous avons encore un texte qui se chevauche ici. Si vous regardez dans cette section ici, nous avons beaucoup de races différentes et des randonnées hors de différents blocs juste pour changer. Vous pouvez dire le monotone de votre design. Passons à celle-là. Ok, donc ici nous avons l'image en arrière-plan et le texte est superposé dessus. Il a l'air très agréable. Ah, effet. Et je vais juste vous montrer quelques exemples et concepts. Donc juste pour vous ouvrir l'esprit, alors nous avons encore la même chose. Et c'est un très grand design. Nous avons un bloc bleu et rouge et orange et en plus, nous avons des enquêtes est nouveau. Donc, c'est un article que vous pouvez voir ici il lire l'article ici. Vous pouvez voir à gauche la gauche ici vous pouvez voir cette image a été superposée par le bloc de piles et il est vraiment cool. Donc, c'est parfois que je l'appelle cacher et montrer ou cacher et chercher quelque chose comme ça. C' est une très belle technique. Vous avez orteil chevauchent vos éléments. Vous avez les orteils, déplacez-les comme vous pouvez le voir ici. Ces trois ici, ils ne sont pas alignés sur cette image. Ils s'éloignent de cette image. Donc ça a l'air vraiment cool ici encore, nous avons des images superposées et des images de texte qui se chevauchent sur le bloc fiscal Ici encore, nous avons la même technique que cette petite image chaque point se chevauche sur cette grande image, ces textures qui se chevauchent sur cette grande image. Donc c'est une excellente technique que vous avez orteil il l'utilise parfois. Maintenant, ici, nous avons un design très minime et vous pouvez voir à nouveau, nous voyons les mêmes clients étaient ici, ce qui se chevauche. Donc ce nouveau look creed il se chevauche sur ce là-bas, maquillage. Et, hum, tout est en 33 blocs, trois colonnes, et quand même ils essayent hum, tout est en 33 blocs, trois colonnes, et quand même ils essayentde diviser cette deuxième colonne du milieu en deux. Et ce qui est intéressant, c'est qu'ils bougent les choses de haut en bas. Donc, je vais parler du moment dans le mai être les prochaines leçons. Jusque-là, vous devez lire de toute façon, donc c'est un autre. C' est un design expérimental, mais je vais vous montrer quelques choses ici. L' un est que vous pouvez voir. C' est presque centralisé. Nous avons peu de taxes sur la gauche et d'autres sur la lettre ici. Vous pouvez voir que c'est, euh c'est derrière cette image, qui est, je pense, elfe surligneur de gelée. Quelque chose comme ça. Donc, mais je ne vous recommande pas d'engager ça. Vous cachez beaucoup de vos lettres. Peut-être qu'un ou deux sont maximum. Mais c'est une conception expérimentale. Maintenant, j'aime vraiment la façon dont toute cette boutique dans le magasin, qui est, en fait, je pense que la navigation est en destruction. Donc ça pourrait être terrible ou mobile. Quelque chose comme ça. Quoi qu'il en soit, nous avons à nouveau caché un peu le texte derrière cette image. C' est donc une mise en page qui est en fait en destruction, en se déplaçant, en destruction du haut à gauche en bas. C' est vrai ? Mais j'aime vraiment ça. C' est, euh, utiliser beaucoup de choses créatives ici de toute façon. Encore une fois, nous avons différentes tailles de blocs. Nous avons complètement bizarre. Nous avons une certaine marge à droite et à gauche, puis nous avons à nouveau au milieu. Ok, donc la chose que je voulais te montrer, c'est que ces piles se cachent derrière ça ? Donc c'est tout. J' espère que vous avez compris l'idée de chevaucher les choses et de sortir les choses de la boîte . Et j'espère que vous aimerez l'utiliser dans vos designs. Si vous avez des questions à me poser, passons à la prochaine leçon. 24. Conception de superposition de superposition: Maintenant, je vais te donner un orteil de mission. Créez une mise en page où vous alliez utiliser le chevauchement. Donc, vous pouvez voir dans cette conception cette image de fille se chevauche. Dumb Les robes ou robes court ici Le texte eso Ceci est un exemple aussi, laissez-moi vous montrer. Voici mon exemple. Je pense que vous avez déjà vu cela, que je chevauche ce formulaire ici sur les deux sections aussi, il sort du fond de cette image. Ok, donc ici nous avons un exemple ici est un autre que vous pouvez voir si vous regardez de près ici dans cette section, vous pouvez voir ceci. Ces quatre icônes de ces quatre fonctionnalités de nos services se chevauchent en fait Cette section en haut, qui est cet en-tête aussi, Je pense que laissez-moi vous en montrer un de plus. C' est un autre exemple que vous pouvez voir ici. Je chevauche l'image ici. Laisse-moi te montrer. Donc, cela se chevauche dans la section suivante ou ici. Donc, c'est juste pour créer un bon effet dans une mise en page afin que vous puissiez utiliser ou concevoir quelque chose comme ça et me montrer comment vous allez utiliser cette technique de chevauchement, vous pouvez utiliser l'image de chevauchement sur le texte ou vous pouvez utiliser le chevauchement dans une autre section. J' ai donc hâte de voir vos missions. Alors commençons à faire une technique qui se chevauche et utilisons leur technique et montrons moi vos designs. 25. Utiliser l'accent dans la conception de mise en page: dans cette leçon, je vais vraiment un hors de mes techniques secrètes, que j'ai appris à travers. Vous pouvez dire que je continue à analyser différents modèles, puis j'ai appris quelque chose qui est très unique dans la conception de couches. Donc, si vous concevez quelque chose et que vous voulez qu'il crée de l'intérêt, alors vous allez utiliser l'échelle et l'accent dans votre mise en page correctement. Donc l'échelle est en fait un hors de la conception. Vous pouvez s'asseoir techniques où vous essayez de mettre l'accent sur un ou mettre en surbrillance pour un élément plus que d'autres. Vous pouvez donc voir si vous avez, comme trois ou quatre fonctionnalités de votre AB ou quelque chose comme ça. Vous allez mettre en évidence ou en faire un hors, un hors d'eux de plus en plus grande taille. De même, si nous avons, comme quatre blocs d'impôt, nous pourrions essayer de changer l'arrière-plan d'un bloc. Donc, cela va créer un certain intérêt, et cela va avoir un effet très unique sur votre mise en page. Donc, je vais te montrer quelques choses que tu vas vraiment aimer et aimer. Alors voyons quelques modèles et ensuite nous allons aller orteils différents exemples. Supposons maintenant que nous avions quatre blocs de fonctionnalités. Oh, c' est un processus d'affaires ou quelque chose comme ça ? Non. Pour la première fois, lorsque vous essayez de concevoir quelque chose, vous obtiendrez cela ennuyeusement hors, en les divisant en quatre blocs similaires et cela va sembler vraiment ennuyeux. N' importe qui peut faire ça, même un gamin air n'importe qui. Si tu leur donnes quatre choses qui leur disent de les arranger, ils vont à la pointe. Organisez-les comme ça. Donc, au lieu de le faire, nous allons avoir quelque chose de très différent. Nous allons mettre en évidence un d'eux et nous allons changer leur mise en page. Alors voyons à quoi ils vont ressembler maintenant. Maintenant, c'est la même disposition de quatre blocs, mais nous avons changé la mise en page. Maintenant, un élément à gauche ici est d'avoir beaucoup d'accent. Que ce soit une fonctionnalité ou quoi que ce soit, nous allons la mettre en évidence. C' est la meilleure caractéristique parmi ces quatre caractéristiques, et nous voulons changer la disposition des orteils. Nous ne voulons pas que ce vieux ennuyeux pour la mise en page des blocs, donc c'est la réponse à cela. Donc, nous avons mis en évidence et à l'échelle et rendre celui-ci plus grand et sur la droite. Nous avons trois fonctionnalités qui sont répertoriées dans l'ordre de haut en bas comme ça. Donc, à part avoir vieux ennuyeux veulent 34 Brocks horizontaux de gauche, droite, nous avons changé la mise en page. C' est un concept très, très important. Si vous pouvez le comprendre et l'utiliser, cela créera Seigneur hors d'intérêt pour votre conception. De même, vous pouvez voir que j'ai comme trois articles. Par exemple, j'ai trois éléments dans ma conception. Par exemple, nous avons les trois cases en bas. Donc la première disposition qui vient au-dessus de la mienne est ces trois boîtes les divisant en trois boîtes. Donc, plutôt que de les diviser en trois cases, ce que nous allons faire, c'est de mettre en évidence l'une d'entre elles. Par exemple, c'est la direction ou quelque chose comme ça, et je vais me diriger et des cheveux textiles très gros. Je vais le rendre plus grand et certains détails ou peut-être quelques articles liés à celui-ci que je vais mettre ici. Donc, c'est un autre dans juste intéressant hors si vous avez trois éléments. Donc, j'ai mis en évidence et mis à l'échelle un hors d'eux et j'ai Ah, les deux autres qui sont un peu vous pouvez dire. Pas tellement mis en évidence. J' ai pas autant d'accent. C' est donc une excellente technique. Non. Je vais vous montrer quelques exemples qui éclaireront votre esprit comment utiliser réellement cette technique. Non, voici un design par un créateur génial. Je ne sais pas de toute façon, donc ce que je voulais vous montrer ici, c'est comme vous pouvez le voir dans cette section. On est là. La deuxième section de ce site Web. Nous avons en fait trois blocs d'objets. L' un est celui-là Ce bloc. Ensuite, nous avons ce bloc par ici. Et puis nous avons ce bloc par ici. Donc vous pouvez voir ici. Quoi ? En fait, nous utilisons. Nous utilisons l'échelle. Nous utilisons l'accent. Nous mettons l'accent sur un bloc de toute cette section et nous avons une très grande rubrique. On a un slogan sur le dessus. On a des couleurs ici. Vous pouvez voir que c'est totalement différent des styles et du texte ici sur la droite. Donc nous avons des couleurs ici, couleurs très sombres et très attrayant de la grande typographie. Et à droite, on n'a pas la même chose. Donc, ici, nous avons sur cette section, nous avons plus d'accent. Nous l'avons fait plus grande en taille. Nous avons utilisé une typographie plus grande, tailles de pont et nous avons utilisé des médecins. Donc c'est la technique dont je parlais. Laissez-moi vous montrer quelques exemples supplémentaires. Voici un autre exemple de fusion accent et dans votre mise en page, et vous pouvez voir ou entendre ce concepteur. Ils ont, genre, genre, quatre pâtés de maisons, en fait, cinq pâtés de maisons de choses par ici. L' un est le seigneur de la ville par ici. Donc plutôt que, vous savez, avoir quatre blocs en haut de la même ligne et avoir un bouton de téléchargement en bas. Ce concepteur, ce qui détestait, c'est qu'il a utilisé ce bloc très différent ici et utilise ces quatre blocs ici et un plus grand et votre habileté dans sa mise en page. Donc on en a un. Faites trois et quatre pâtés de maisons ici et un bloc plus grand par ici. On a de cinq pâtésdemaisons. Alors essayez de penser de cette façon plutôt que vous le savez, en utilisant la mise en page simple comme 1234 blocs, puis le bouton de téléchargement en bas. Vous pouvez faire quelque chose comme ça, alors essayez de très votre mise en page comme ceci, et vous serez satisfait de votre conception. D' autres, ils vont adorer. Donc, c'est en fait le point hors intérêt. Je voulais vous montrer que vous devez créer un point d'intérêt pour votre conception ou section que vous concevez. Je vais vous faire un exercice pour la même section. Tu dois concevoir quelque chose comme ça. Donc, euh donc juste pour aiguiser vos compétences, alors voyons quelques exemples supplémentaires. Ok, donc ici nous avons une autre section qui utilise la même technique que j'ai décrite, qui consiste à utiliser l'échelle dans votre conception ou votre mise en page. Vous pouvez vous voir ici. Ici, nous avons cette section, qui est Ah, un peu plus grande. Ensuite, nous avons quatre qualités ou quatre services ou tout ce que vous appelez sur le trajet. Donc, en fait, nous avons cinq sections, cinq éléments, et nous les avons arrangés en remorque comme ça plutôt que de nous diriger ici que nous avons quatre blocs ou là bas. Et nous avons un gros fardeau ici, qui va avoir une mise en page très, euh, euh,très simple, que vous avez vu beaucoup de fois. De même, vous pouvez voir dans cette section ou ici encore, ces concepteurs utilisent la même chose ici. Donc nous avons un bloc. Il s'agit également d'un orteil lié qui se chevauche et sort de la boîte. Donc, vous êtes en fait ce concepteur mélangeant deux techniques sortant de la boîte et à nouveau à la fois en utilisant des compétences. Donc nous avons un très gros élément ici que nous avons quatre pâtés de maisons à gauche comme ça. Et puis on a un pâté de maisons ici comme ça. C' est donc une grande mise en page. C' est, je pense, une grande utilisation hors conception de mise en page dans cette information affichant cette information semble créer, vous pouvez voir qu'il utilise également des icônes avec du texte. N' essayez pas de toujours penser en quatre boîtes que nous avons. Nous devons aligner tout comme ça pour que nous n'ayons pas besoin de tout aligner comme ça. Nous avons les orteils changer nos mises en page à nouveau. Ceci est un autre design de l'un de mes concepteurs de faveur de dessert que j'ai tendance à suivre. Sois Haas. Je ne sais pas quel était le nom de se battre. J' ai oublié quoi qu'il en soit, alors encore là. Vous pouvez voir que la même chose se passe. Un bloc, gros bloc. Ensuite, nous avons quatre blocs plus petits. Donc, c'est l'idée. Je pense que vous avez déjà détruit, donc je ne veux pas l'expliquer encore une fois. Mais il y a beaucoup de situations où vous pouvez l'utiliser. Il va orteils ont beaucoup d'impact sur votre design. Donc celui-ci est un autre exemple. Vous pouvez voir que c'est, ah, ah, service de lavage de voiture. Et il est conçu par les laboratoires Quantico de Pologne. J' aime beaucoup de designers polonais parce que je pense qu'ils ont beaucoup de créativité de ce côté de l'Europe. J' ai vu beaucoup de vos designers s'entendre de ce côté. Quoi qu'il en soit, euh, donc vous pouvez voir que nous avons une image et deux caractéristiques nous ont contactés et meilleur lavage de voiture. Donc, en fait, ils ont, genre, genre, quatre pâtés de maisons. Mais vous pouvez voir ici qu'il a été arrangé d'une manière totalement différente. Nous avons décidé en haut, ici, et c'est au milieu. Ensuite, nous avons l'image ici et un peu de texture. Tout ici. Ensuite, nous avons encore deux pâtés de maisons par ici. Donc trois blocs, qui sont totalement différents. J' adore cette mise en page. Donc vous je Ce que je fais normalement est que j'utilise un outil appelé Jing et je les ai capturés et les garder dans mes idées de conception de mise en page. Donc, chaque fois que j'ai des orteils design quelque chose, je l'utilise de la même façon, dans cette section une grande image sur la gauche, quatre caractéristiques comme ceci. Donc, c'est à nouveau utiliser hors échelle. Nous avons une très grande image ou ici que nous avons quatre fonctionnalités ici. Eso C'est en fait à nouveau. Si vous le regardez encore ici, la balance est utilisée. Cette image est un peu plus grande que tous ici. Et c'est une grande mise en page pour toutes ces images. Et c'est gentil hors de la maçonnerie de médecine grandement sur. Mais il a l'air superbe ici. Donc, c'est tout au sujet de cette technique. Et j'espère que vous avez apprécié cette mise à l'échelle. Et, ah, un grand accent souligne votre design dans chaque section ou votre design entier. C' est tout à propos de ça. Si vous avez des questions à me poser, passons à la liste suivante. 26. Utiliser des mouvements dans la conception de mise en page: dans cette leçon, je vais discuter d'une autre technique secrète que je vais partager avec vous, ce qui est très simple. Et vous pouvez créer beaucoup d'intérêt pour votre mise en page et votre conception en utilisant le mouvement. Alors comment vous devez faire votre mouvement. Ne pensez pas que vos boîtes ou quels que soient vos conteneurs qui continuent différents éléments sur votre page, ils sont statiques. Vous pouvez les déplacer de haut en bas. Vous pouvez les déplacer de gauche à droite. Vous pouvez les déplacer dans une vapeur diagonale, donc il y a beaucoup d'options ou de trucs que vous pouvez faire. Donc le mouvement va créer beaucoup d'intérêt dans votre journée de conception, et il va les déplacer de, um, um, vous pouvez dire des boîtes statiques ennuyeuses à quelque chose qui créent dans juste Donc je vais partager avec vous pour certains hors de la options de mise en page, puis je vais partager avec vous juste pour parier trois exemples parce que je ne suis pas en mesure de trouver plus d'exemples. Peut-être qu'ils le sont, vous pouvez dire, mais c'est dans mon dossier d'inspiration. Donc, je pense que cela éclairera votre esprit sur l'utilisation du mouvement pour votre mise en page et comment vous allez le faire pour créer juste dans votre conception. Donc vous avez commencé avec ces quatre boîtes. Maintenant, il me semble assez ennuyeux, et je pense que ça ne va pas marcher pour moi. Donc, au lieu de cela, on va le faire. Maintenant, vous pouvez voir que c'est la même conception. Mais j'ai ajouté le mouvement orteil mes boîtes plutôt que ce sont des boîtes statiques. Maintenant, ils bougent. Donc, nous avons un mouvement comme Jane mouvement qui va de haut en bas dans des directions différentes, et cela va créer un certain intérêt pour votre couche. Donc c'est une idée. Un autre pourrait être celui-ci, sorte que vous pouvez les déplacer dans la direction diagonale. Orteil. Juste ne pense pas que vous avez à les déplacer de haut en bas sont peut être de gauche à droite. Vous pouvez aller dans différentes formes comme diagonale et d'autres navires, comme un triangle. Tu peux le faire aussi. Voici une autre représentation du mouvement. Vous pouvez voir par ici. J' ai une très grande boîte ou une grande section de contenu, peut-être une image ici sur la gauche. Et j'ai deux images qui se chevauchent et des taxes sur la droite. Nous avons donc un titre et les trois lignes de quatre lignes de texte, donc il y a beaucoup de variations que vous pouvez faire. Donc, ce sont quelques astuces en utilisant votre mouvement dans votre conçu pour créer un certain intérêt. Je sais que je vais vous montrer deux ou trois exemples. Donc, nous nous améliorons à ce truc de mouvement dans notre conception. Maintenant, c'est un design par Andrew Lo matière au large de la Lettonie, et c'est un design très simple, très unique. Et tu peux voir ce que je veux te montrer. Voici le mouvement. Vous pouvez donc voir ici dans les images et le texte. Donc, le mouvement est qu'il est en fait inverser l'effet dans chaque section. Donc, nous avons l'image sera ici que nous avons la texture ici. Et puis nous avons l'image. On est là. Texte sur l'image de droite à droite, texte à gauche, image à gauche, texte à droite. Donc c'est en fait un mouvement en chaîne, mais fait comme vous pouvez voir qu'on est là. C' est comme une fortune de corde, comme ici. Et c'est dans la direction de haut en bas. Celle que je t'ai montrée Waas en direction de gauche à droite. Vous pouvez donc voir que cela va créer beaucoup d'intérêt pour votre conception. Donc, si ce designer a juste gardé toutes les images sur la droite et tout le texte sur la gauche, cela pourrait sembler très ennuyeux. Très statique. Nous devons donc créer un certain intérêt en utilisant le mouvement dans notre mise en page. De même, nous avons cette conception. Il est par plusieurs honneurs Smoove tous. Je pense que c'est une agence de design. Mais j'aime vraiment leur cette conception très minimaliste, où nous créons très script très propre et vous pouvez voir ou entendre dans cette section, vous pouvez voir bien qu'il ressemble à une fleur lei orteil me. Mais vous verrez quand même comment les icônes et les différents textes ont des mouvements différents. Donc, nous l'avons fait. Ah, cette icône en haut et ce texte en bas et à gauche. Nous avons donc fait des choses dans cette direction. Ensuite, ici, ce coureur, c'est cette Ah, la direction est là. Donc, ici, nous avons un texte. Ensuite, nous avons cette ligne de départ et elle mène vers cette icône. Donc, nous avons quitté cette direction diagonale que nous avons cela alors nous avons quelque chose comme ça. Alors on a quelque chose comme ça. Alors on a quelque chose comme ça. Donc, c'est en fait du mouvement. Ils peuvent avoir des icônes juste en haut et au milieu et au centre. Ils ont peut-être utilisé le texte, mais au lieu d'utiliser cette façon simple d'exposer les icônes et ce texte, ce concepteur a utilisé un certain mouvement dans le nuage. Donc, ils ont quelques mouvements diagonaux qui se passent dans presque toutes ces icônes et ce texte. Donc c'est Ah, une grande utilisation hors mouvement dans votre mise en page. De même, si vous regardez ce design, nous avons ces icônes ici, et ce sont toutes des icônes diagonales. C' est comme des ruches. Mais ce que je veux vous montrer ici, c'est que nous avons du mouvement ici. Donc nous avons ce mouvement de chaîne en cours. Donc c'est que je suis sur la gauche et que je suis monté en haut au milieu. Puis par ici et par ici, par ici, par ici. Donc, ce n'est pas Ah, si l'utilisateur peut. Ce concepteur peut faire la mise en page en seulement ah, neuf ou 10 boîtes. Mais ce qu'ils ont fait c'est qu'ils ont utilisé le mouvement. Pour que vous puissiez voir. Cela fonctionne vraiment bien avec même les chiffres sont. Donc, nous avons 123456789 neuf boîtes et elles sont superbes. Cette mise en page est géniale. Alors nous allons zoomer et voir. Ok, donc nous avons ces icônes. C' est donc à nouveau une grande utilisation hors mouvement dans votre mise en page. Maintenant, dans cet exemple, que je ne sais pas comment est le concepteur. Quoi qu'il en soit, c'est un grand design, et vous pouvez voir dans cette section du milieu ou ici, nous avons mère fille suggestion et vous pouvez voir ici comment ce concepteur a utilisé le mouvement ici pour créer de l'intérêt afin ils peuvent aligner ces boîtes. Mais quoi ? Cette créatrice, elle l'a regardée. Il l'est. Elle a en fait déplacé un peu vers le bas pour créer des intérêts. aussi Il y aaussicette température ici, qui est une autre technique que je vous ai montrée avant de sortir des boîtes. Donc ce timbre s'éloigne de cette section juste pour créer un peu d'intérêt ici. Donc, ce sont deux techniques que vous pouvez combiner pour créer une mise en page regardant et j'espère que cela résoudra beaucoup de vos problèmes. Si vous avez des questions à me poser, passons à la prochaine leçon. 27. Consigné avec une technique de conception de mise en page d'alignement gauche: dans cette leçon, je vais discuter d'une technique très simple et très élégante que vous pouvez mélanger et utiliser dans votre couche. Conçu pour créer beaucoup de mises en page et de designs intéressants. Beaucoup de designers qu'ils ne savent pas qu'ils peuvent utiliser ou déplacer des choses presque au milieu, en plus d'utiliser aligné à gauche avec lui. Donc, vous avez remorqué, alignez tout sur la gauche. Vous êtes tous des éléments conçus et déplacez le bloc entier presque au milieu. C' est donc une technique très simple pour créer de l'intérêt. Je vais vous montrer les orteils de ces mises en page et ensuite nous allons voir quelques exemples. Maintenant, vous pouvez voir en haut que j'ai bloc blanc, qui va être un très gros texte. Donc, n'importe quel site web que vous concevez, nous avons , genre deux ou trois lignes, un texte très gros et gras qui va montrer ce que nous faisons. Notre service et ce bloc blanc vous pouvez voir ou entendre que tout sera Votre texte sera aligné sur la gauche afin que toutes les lignes de texte commencent à partir d'ici. Et ce que nous faisons, c'est que vous pouvez voir ça a l'air vraiment bizarre, mais ça a l'air vraiment génial si vous essayez de le faire dans votre mise en page, j'ai laissé comme deux colonnes d'ici et trois colonnes d'ici. Donc, ça va marcher beaucoup. Donc, il est presque au milieu et il a laissé une ligne. Donc, essayez de déplacer les choses tout en gardant l'élément d'alignement gauche ici sont dans vos éléments de conception et il va regarder créer. Voyons voir, un arrangement de plus. Maintenant, en voici un autre. Pour que vous puissiez voir par ici. Ici, nous avons la direction. Ensuite, nous avons une ligne de sous-titre ou entendons un dext. Ensuite, nous avons quatre caractéristiques différentes ou quelque chose comme ça. N' importe quel type de fonctionnalités ou peut-être certains services. Et vous pouvez voir que nous avons une icône, un titre une ligne une icône, un titre une ligne et vous pouvez voir qu'ils sont presque au milieu. Et là, leur conteneur entier est en fait au milieu. Donc, si nous, euh, avons tout ce bloc, c'est au milieu. Mais si nous regardons individuellement chaque bloc, ils sont alignés sur la gauche. Vous pouvez voir que c'est ce que je veux dire que chaque fois que vous essayez quelque chose comme ça, vous avez remorqué. Alignez vos éléments intérieurs sur la gauche et tout le bloc bloc bloc de ces éléments au milieu. Donc, cela va créer beaucoup de confier vos designs et nous avons bouton en bas . Nous avons en-tête dans les données de texte au milieu, puis ces quatre entités, ils sont tous alignés à gauche. Mais ils sont au milieu, tout le bloc, tout le conteneur pour ces fonctionnalités ou pour ces services, ils sont au milieu. Donc, cela combine en fait la ligne centrale, plus à gauche Align. Maintenant, nous allons voir quelques exemples hors de mon travail et aussi d'autres artistes ou designers. Et nous verrons comment. En fait, cela fonctionne dans la vie réelle ou les conceptions de sites Web ou d'applications mobiles. Maintenant, voici un exemple de cette page de destination que j'ai conçue et vous pouvez voir ici. Si vous regardez cette section, c'est écouter un rial, témoignages d'allégement fiscal, et je vais passer mes notes et vous pouvez voir ces boîtes du milieu ici, elles ne correspondent pas à aucune cupidité. Au lieu de cela, ils sont au milieu de ce conteneur entier au milieu et le texte et vous pouvez voir ou entendre. Entendez. Nous avons écouté David sur et ce texte ce témoignage, c'est une ligne sur la gauche. Donc, si nous dessinons un bloc ici, vous pouvez voir qu'il est aligné comme ça. J' ai changé la couleur pour que tu puisses avoir l'idée. Donc, tout ce qui est à l'intérieur de ce conteneur est aligné vers la gauche. Mais tout le conteneur ou le bloc est au milieu. Donc c'est ce que je voulais dire. Et laissez-moi vous en montrer une de plus. Ok, donc nous avons encore le même arrangement. Tout est sur la gauche. Aligner. J' ai évoqué comme ça. Et tout ce bloc est qu'il est au milieu de ces 12 colonnes. C' est donc un autre exemple que nous. Laisse-moi te montrer celle-là. Alors cachons ça et vous pouvez voir ou entendre. Ce sont les services fiscaux disponibles et encore une fois le même concept. C' est au milieu. C' est au milieu. Encore une fois, c'est tout ce bloc est au milieu et les deux blocs. Ils sont laissés. Alignez les icônes de texte entier, ligne de gauche. Je n'utilise pas un alignement du milieu avec lui. Nous avons donc une ligne centrale plus des éléments alignés à gauche. Donc, cela va fonctionner un grand. De même, nous avons celui-là. Donc, votre prochaine affectation sera que vous devez créer quelque chose comme celle-ci une, quatre ou cinq fonctionnalités. Et vous devez utiliser quelque chose comme ça, qui va être l'alignement du milieu et la ligne centrale plus l'alignement à gauche. Donc, vous pouvez voir l'orteil supérieur ici que cette taxe et cette rubrique, c'est la ligne centrale. Et si nous allons sur cette prochaine section où nous avons différentes pénalités et taxes fait différentes offres et nous avons tout sur la gauche. Donc, toutes ces icônes, toutes les étapes qu'ils sont la ligne de gauche, mais tout le bloc en bas. Donc, si nous sélectionnons ce bloc, il est au milieu. Donc c'est une autre technique que j'ai vu beaucoup de fois, mais je pense que la plupart des designers ne remarquent pas celle-ci. Donc, nous avons ceci et j'espère que vous le comprendrez mieux. Voyons d'autres exemples. Voici un autre design par qui est-ce ? OK, donc je ne peux pas obtenir le nom de ce Christian Randall de toute façon. Donc, si vous regardez cette section par ici. C' est un design. Et si vous regardez ici, vous pouvez voir ce texte et les piles ici en rouge. C' est en fait l'alignement du milieu et la ligne de gauche. Donc, les concepteurs utilisant la ligne médiane et la ligne gauche, vous pouvez voir ici Nous avons deux colonnes qui sont restées ici. Là encore. Nous avons deux colonnes. Vous pouvez voir. Ce sont presque des lignes de grille sur qui suivent ces lignes pour cette conception. Et il a laissé deux colonnes ici. Deux colonnes par ici. Donc, il est presque au milieu, mais il a utilisé à gauche aligné avec elle. Donc, vous pouvez voir que c'est à quoi ça ressemble. Donc nous avons un pâté de maisons par ici, un pâté de maisons par ici. Des sombres ici. Et ça a l'air vraiment génial. Donc, c'est encore une fois. Si nous regardons cette section au-dessus, allons zoomer. C' est la même technique. Cela ne signifie pas toujours que vous devez aligner votre texte ou votre bloc presque au milieu de votre page. Vous pouvez le faire en le déplaçant sur la gauche pour qu'il soit à nouveau ligne de gauche. Beaucoup d'espace sur la gauche et il est en ligne de gauche, et il est superbe. Voyons d'autres exemples. Ok, donc nous avons un autre exemple. Et si vous regardez cette section où nous avons les outils dont vous avez besoin, alors nous avons tout. Une ligne sur la gauche, par ici. Donc, nous nous dirigeons au milieu. Ensuite, nous avons un petit slogan au milieu au centre. Et ce sont toutes ces fonctionnalités 123456789 fonctionnalités. Ils sont tous une ligne sur la gauche. Et une autre chose intéressante que j'ai vu ou ici ces différentes caractéristiques sont ces différents services. Ils sont en trois sections différentes. C' est la première section, l' orteil trois. Et ce que ce designer a fait, c'est , euh, voyons qui est plusieurs propriétaires. Ok, donc nous avons une agence de design ou une tête de toute façon, donc vous pouvez voir que ce texte de cette rubrique à gauche est en fait aligné à droite. Donc, il touche cette ligne. C' est la couture de cette ligne. Donc, il est vraiment, je pense que l'utilisation créative hors alignement dans votre mise en page. Voici donc quelques exemples que je voulais vraiment partager avec vous. Voyons un autre exemple qui utilise une application mobile. Donc, chaque fois que vous concevez une application mobile, je pense que vous n'avez peut-être pas remarqué une partie. La plupart d'entre eux, ils utilisent la ligne gauche avec le conteneur d'alignement du milieu. Donc nous avons vous pouvez voir comme ce carton blanc ici et tout le textile ici il est. Et le bouton Oh, ici c'est dans cette direction. Donc, nous avons tout aligné et tout ce conteneur entier qui contient tous ces éléments, il est au milieu. Nous avons donc la même marge, la droite et la gauche. Ainsi, vous pouvez voir de la même manière si vous regardez cet écran, il s'agit de l'écran d'accueil. Et ceci un prêt immobilier en ligne simple. Tout est laissé de la ligne. Tout est laissé doublure quand vous pouvez voir Oui, je vois réglementé. Il est également laissé une ligne. Mais vous pouvez voir au milieu, nous avons une boîte ou un conteneur qui est au milieu. Donc ce sont les choses que vous allez utiliser orteil dans votre vous pouvez dire dans vos mises en page pour créer , vraiment créer Lee ou donc je vais partager avec vous un de plus, Qui est celui-ci que je pense que je vous ai montré dans les leçons précédentes. Frontière. Et vous pouvez voir que j'aime vraiment comment ils ont utilisé très pauvre, très organisé, un design simple. Ce n'est rien de complexe, juste des équipes de produits. Part est un moyen visuel simple de définir les parcs proprement dits qui se traduisent par une organisation plus alignée . Ainsi, vous pouvez voir un très joli bouton, un simple lien. Mais ce qu'ils utilisent a en fait laissé la ligne avec presque une ligne médiane. Donc, ce n'est pas un purement au milieu, mais il est encore commerce sur la gauche, mais avec leur utilisation alignement gauche. Donc, cela a l'air vraiment, vraiment sympa qu'ils ont cette image qui dépense presque tout l'espace. Et puis ils ont encore utilisé cette technique à nouveau centre milieu aligné ce conteneur entier et tout est une ligne sur la gauche. Donc, je ligne les taxes sur la gauche. Il a l'air vraiment génial et simple. Voyons si nous pouvons trouver un autre exemple. Ok, donc nous l'avons encore. Ligne du milieu et le texte est laissé une ligne. Regardez de près. Je pense que tu devrais être capable de le faire maintenant, jusqu'à maintenant, et, euh, je pense que c'est tout. Si j'ai essayé de trouver un autre exemple, voyons si j'ai Ah, quelques autres exemples de mon travail précédent. Ok, donc ici j'ai mon propre site web de design, que je suis en train de redessiner en ce moment. Je ne suis pas sûr de quelle version c'est. Finale ou quoi que ce soit. Alors laissez-moi voir si j'ai utilisé Oui. D' accord. Pour que vous puissiez voir par ici. C' est en fait cachons celui-là. Cachons ça. Donc, dans cette section, hors avis des utilisateurs ou mes commentaires étudiants, vous pouvez voir ce que les étudiants disent. Donc, c'est en fait la direction britannique, qui est au milieu. Et ces tous ces témoignages. Ils sont tous une ligne à gauche, des images à gauche. Dex est une ligne sur la gauche, mais vous pouvez voir qu'il a l'air vraiment bon. Je ne veux pas, vous savez, avoir juste un milieu aligner un élément, et cela va rendre ce design très ennuyeux. Donc si j'en avais juste un comme ça au milieu, ça pourrait le faire un peu couler. J' ai donc utilisé l'alignement à gauche avec l'alignement au milieu. Um ça. Voyez si je l'ai utilisé ailleurs. Ok, donc nous l'avons encore. Ici. Vous pouvez voir cette adresse et contact. Ce bloc est presque au milieu. Je ne pense pas que c'est presque au milieu, mais un peu à droite. Mais j'utilise l'alignement gauche. C' est donc une excellente technique. Vous pouvez l'utiliser dans vos conceptions et vous pouvez créer Ah, genre vraiment intéressant hors des fonctionnalités ou des sections de témoignage ou des sections de services, des choses comme ça. De même, j'ai utilisé ici presque. Ce n'est pas une ligne au milieu, mais j'utilise tout ce bloc, qui est presque au milieu de ces six colonnes ici. Essayons d'avoir quelque chose comme ça. Donc nous avons notre grille et vous pouvez voir qu'elle est presque au milieu de cette 80 heures ici, ok ? Et il utilise la ligne gauche. Donc, ne pas tout ce que vous avez pour l'aligner au milieu de toute la page ou de tout votre design. Mais vous pouvez aussi utiliser quelque chose comme ça. J' ai d'habitude ici. Donc ça regarde Laisse-moi la dureté. Donc, ça a l'air vraiment génial si on l'a fait. Si nous essayons d'utiliser quelque chose et de faire quelque chose comme ça, voyons si j'ai utilisé ailleurs. Ok, donc nous l'avons encore. C' est dur. Ceux-ci pour que vous entendiez beaucoup de bruits de mon clavier de toute façon, donc vous pouvez voir que ce titre est sur la gauche. Encore une fois, cette section cette section de vos cours de conception est en fait au milieu, et il n'est pas en fait totalement au milieu. Il en a un. Vous pouvez voir que tout est aligné sur la gauche. Nous avons donc l'alignement du milieu ou l'alignement du centre avec combiné avec l'alignement de gauche. Donc, c'est encore une fois. Nous avons des cheveux, deux cours, et nous avons ici deux cours. Donc ça va être le nouveau design pour mon site web terre. Vous êtes excitant. Je vais aussi remanier mon logo à un autre designer, et j'espère que orteil, euh, vous montrer le bientôt je sais que je n'ai pas le temps de, vous savez, la cour moi-même. Donc je vais embaucher, j'ai déjà engagé un autre quart. Donc, euh, je pense que de la même façon que vous pouvez voir dans ce mobile mobile Laisse-moi te montrer celui-là. Donc nous avons cette interface mobile et si je descends ici, vous pouvez voir cette section ici, elle est au milieu, et c'est une ligne sur la gauche. Donc, ça a l'air vraiment bien. Donc, euh, c'est comme ça que vous pouvez utiliser cet alignement du milieu avec l'alignement gauche et créer des designs incroyables . J' espère que vous avez apprécié cette leçon. Si vous avez des questions, vous pouvez toujours me poser. Passons à la leçon suivante. 28. Merci tout le monde: merci beaucoup d'avoir suivi ce cours. Si vous avez des questions concernant le design ou concernant ce cours, vous pouvez toujours me poser la question dans la section « communauté ». Aussi, n'oublie pas l'orteil droit. Certains examinent quelques beaux mots. Donc pour moi, que je puisse, vous savez, trouver de l'inspiration pour créer plus de classes comme celles-ci. Et n'oubliez pas les orteils vérifier mes autres cours parce qu'ils le sont. J' ai beaucoup de cours sur la conception UX, la conception d'interface utilisateur et le freelance et la conception visuelle. D' ici là, on se voit bientôt dans la classe suivante.