Webdesign in Affinity Designer für Anfänger:innen und Fortgeschrittene | Dawid Tuminski | Skillshare

Playback-Geschwindigkeit


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

Webdesign in Affinity Designer für Anfänger:innen und Fortgeschrittene

teacher avatar Dawid Tuminski

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

88 Einheiten (7 Std. 28 Min.)
    • 1. Web-Design im Affinity Designer Promo Video

      2:08
    • 2. Einführung in den Kurs

      1:49
    • 3. Was ist Affinity Designer und wie man es für das Webdesign einrichtet

      3:11
    • 4. Die Fähigkeiten des Webdesigners von Affinity Designer

      8:43
    • 5. Die 10 besten Grundsätze des guten Webdesigns

      3:53
    • 6. Die 10 besten Grundsätze des guten Webdesigns – weiter

      4:34
    • 7. Der wichtigste Faktor, der in Betracht gezogen werden sollte, bevor die Farben gewählt werden

      4:06
    • 8. So mischen Sie Farben für das bestmögliche Benutzererlebnis

      4:36
    • 9. So wählst du die „psychologisch korrekten“ Farben

      4:37
    • 10. 7 einfache Tools zur Auswahl fehlersicherer Farbschemata

      6:32
    • 11. Eine super kurze Geschichte der Web-Typografie

      2:41
    • 12. So mischen Sie Farben für das bestmögliche Benutzererlebnis

      5:18
    • 13. So wählst du die richtigen Schriftarten für Überschriften

      3:37
    • 14. So mißt du Schriften für Überschriften und body

      4:18
    • 15. Die perfekte Schrift für das Design von Benutzeroberfläche

      2:35
    • 16. Sektionen von Header, Branding, Navigation und Held

      3:52
    • 17. Der Mittelpunkt und die unteren Abschnitte deines Website-Designs

      4:13
    • 18. Was sind Gitter und wie man sie nutzt

      3:08
    • 19. So entwirf ich dein eigenes Raster

      4:09
    • 20. 7 Webdesign-Trends, die die web regeln

      8:58
    • 21. Wo finde ich die richtige Inspiration für dein nächstes Design

      2:28
    • 22. Jedes Website-Design braucht Gerüste

      3:13
    • 23. Aufbau deines eigenen wireframe Designer

      4:41
    • 24. Wir bauen die Bibliothek weiter

      10:08
    • 25. So verwenden Sie die Assets zum Erstellen eines wireframe

      11:19
    • 26. Wireframing online

      4:28
    • 27. Lass uns über Bilder und Icons sprechen

      5:53
    • 28. So erstellen Sie Schriftarten in Affinity Designer

      4:00
    • 29. Die Design

      6:01
    • 30. Lassen Sie uns die Color erstellen

      4:05
    • 31. Lassen Sie uns die Textstile erstellen

      2:34
    • 32. Werfen wir einen Blick auf die Bilder und Icons

      2:34
    • 33. Erstelle das Logo zuerst

      3:25
    • 34. Bauen wir die Menu

      4:04
    • 35. Fügen wir die Social Media Icons hinzu

      8:05
    • 36. Beginne mit dem Hinzufügen des Hauptbilds

      6:41
    • 37. Beginne mit dem Hinzufügen des Hauptbilds

      3:02
    • 38. So kann ich das Bild schnell ändern

      3:02
    • 39. Machen wir das Bild ein bisschen dunkler

      3:14
    • 40. Fügen wir den Haupttext hinzu

      5:04
    • 41. Fügen wir die Slider Navigation hinzu

      3:47
    • 42. Beginnen wir mit der Erstellung des ersten präsentierten Secion

      3:35
    • 43. Fügen wir die ausgewählten Artikel hinzu

      10:07
    • 44. Fügen wir den zweiten Abschnitt zum Featured Item hinzu.

      5:40
    • 45. Beginne Creatig den Blog

      8:13
    • 46. Ersetzen wir die Bilder

      3:05
    • 47. Beginnen wir mit dem Aufbau der Bildergalerie

      7:13
    • 48. Erstelle die erste Spalte des Footer

      4:13
    • 49. Beenden wir das Design und den gesamten Footer

      3:56
    • 50. Bereitstellung des Designs an den Kunden

      3:39
    • 51. Die Datei an den Entwickler

      2:30
    • 52. So verwenden Sie die Export um die Assets in Masse zu exportieren

      2:29
    • 53. Danke für das Ansehen des Kurses

      0:52
    • 54. 1Let's Entdecken Sie den Wireframe für das Design

      6:08
    • 55. 2Let's Entdecken Sie das Blog-Design

      5:30
    • 56. 3Werfen wir einen Blick auf unsere Vermögenswerte

      6:06
    • 57. 4So erstellen Sie das Logo und Nav

      7:38
    • 58. 5Let's Füge die Social Media Icons hinzu

      6:18
    • 59. 6Let's Füge die ersten Bilder hinzu

      7:22
    • 60. 7Lass den Schatten zu den Bildern hinzufügen

      7:57
    • 61. 8Fügen wir die Navifation Buttons hinzu

      5:24
    • 62. 9Lassen Sie uns einen Container für den Blog-Beitrag erstellen

      5:16
    • 63. 10Fügen wir die ersten Textstücke hinzu

      4:29
    • 64. 11Fügen wir die Remining des Textes hinzu

      6:07
    • 65. 12Beginnen wir mit der Erstellung des Blog

      5:57
    • 66. 13Lassen Sie uns die erste Blog erstellen

      5:19
    • 67. 14Fügen wir die verbleibenden Karten hinzu

      6:35
    • 68. 15Let's Füge den Link zu älteren Beiträgen hinzu

      4:17
    • 69. 16Lassen Sie uns das Sidebar erkunden

      2:37
    • 70. 17Lassen Sie uns die Suchbox erstellen

      3:54
    • 71. 18let's Erstellen des Abschnitts Über mich

      6:37
    • 72. 19Lassen Sie uns den Textabschnitt der Sidebar erstellen

      4:48
    • 73. 20Let's erstellen den ersten Container für die beliebtesten Beiträge

      4:06
    • 74. 21Let's Erstellen Sie die Liste der beliebtesten Blog-Beiträge

      6:29
    • 75. 22Lassen Sie uns den Ads erstellen

      2:50
    • 76. 23Lassen Sie uns die Zeichnung des Footer erstellen

      4:07
    • 77. 24Let's erforsche verschiedene Footer

      2:35
    • 78. 25let's beenden das Projekt und erkunden das nächste

      7:08
    • 79. 26Let's Explore the Single Post Design

      3:13
    • 80. 27Lassen Sie uns das Featured Image und den Post erstellen

      5:47
    • 81. 28Let's den Titel des Blog-Beitrags

      6:21
    • 82. 29Fügen wir die Paragraphen und Bilder hinzu

      10:11
    • 83. 30Let's Füge die Icons für die sozialen Medien hinzu

      7:18
    • 84. 31Let's fügen Sie die 31Let's Beitrag Navigation

      8:26
    • 85. 32Let's den Abschnitt für die zugehörigen Beiträge hinzufügen

      7:21
    • 86. 33Beginnen wir mit der Erstellung des Comments

      4:46
    • 87. 34Lassen Sie uns die Texte für die Kommentare erstellen

      5:55
    • 88. 35Let's Erstellen des Kommentarformulars

      9:02
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

1.134

Teilnehmer:innen

2

Projekte

Über diesen Kurs

Dieser Kurs dreht sich um die Verwendung von Affinity Designer für das Webdesign. Wenn du die Software nicht zu vertraut hast, lernst du zuerst schnell, was es um das geht und wie du es für das Webdesign einst.

Bevor wir mit der Entwicklung etwas in Affinity Designer beginnen, werfen wir einen Blick auf die Konzepte des Webdesigns und gute Praktiken. Du lernst, wie du Farben für dein Design auswählen und wo du Farbinspiration und fertige Farbthemen findest

Du lernst auch die grundlegende web die nicht nur für gutes Webdesign sehr wichtig ist, sondern im Allgemeinen für gutes Design. Du lernst alles über body Überschriften und wie du sie für eine großartige Benutzererfahrung kombinierst.

Dann werfen wir einen Blick auf die Struktur einer typischen Website selbst, design-wise natürlich. Wir werden über Logos, Navigationen, Seitenleisten und alle Bausteine der anderen Website sprechen.

Danach werden wir darüber sprechen, was in der Welt des Webdesigns ist und was sich gerade nicht in der Welt des Webdesigns befindet. Wir suchen auch nach einigen Inspirationen für das Webdesign im Internet.

Mit all dem Wissen und Fähigkeiten gehen wir zum design des Kurses weiter. Und bitte beachten Sie, dass du mindestens einige grundlegende Fähigkeiten haben musst, um dich mühelos zu verfolgen

Dieser Kurs geht nicht darum, alles zu lernen, was es über die Fähigkeiten des Designers zu wissen ist. Wenn du das brauchst, schau dir meinen Kurs in Affinity Designer für Anfänger an.

Am Ende dieses Kurses solltest du in der Lage sein, selbständig Websites mit Affinity Designer zu entwerfen.

Triff deine:n Kursleiter:in

Teacher Profile Image

Dawid Tuminski

Kursleiter:in

Designer, coder and educational entrepreneur.
Adobe Certified Expert in Illustrator whose courses were listed in the Udemy's TOP 10 best reviewed courses.

Creating online courses on design tools like Adobe Illustrator and Adobe Photoshop, logo design, web design, graphic design freelancing, online teaching and digital marketing .

Teaching +30k students in 160 countries worldwide.

Loves the freedom of creating courses and prides in his teaching method, which is straight to the point and with a smile.

His motto: Boring instructors are worse than boring topics!

His students value his courses for their conciseness, professionalism and actionable tips and techniques they can apply in their day-to-day design tasks and online education businesses.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Web-Design im Affinity Designer Promo Video: Wenn Sie darüber nachdenken, als Webdesigner Freelancer zu beginnen, haben Sie wahrscheinlich versucht, Foto-Shop irgendwann in der Vergangenheit nutzen, und ich kenne den Schmerz, den ich Abendessen habe. Ich erinnere mich, dass ich Tage für Tage verbrachte, sogar Wochen nach Wochen, versuchte, sich an bestimmte Werkzeuge und Effekte zu erinnern. Aber zum Glück leben wir in Zeiten, in denen Sie als Webdesigner Freelancer starten wollen. Aber Sie können einfach Fotoshop beiseite legen. Hallo, mein Name ist David Tyminski, und in diesem Kurs erfahren Sie, wie Sie eine Flosse in Designer verwenden, um Websites von A bis Z zu entwerfen . Dieser Kurs ist voll mit wertvollen Informationen. Jeder Web-Designer Rookie sollte wissen, wie Sie die besten Farben und Mittel für Ihre Websites wählen. Was macht eine professionell gestaltete Website aus? Was sind die modernen Webdesign-Trends, über die Sie wissen sollten? Und das ist nur die Einführung, denn das echte Brot und Butter des Diskurses ist in seinen praktischen Teilen. Wir werden unsere Hände schmutzig und erkunden Sie alle Werkzeuge und Techniken professionelle Waffen und weigern sich, eine Website innerhalb Affinität Designer zu entwerfen, die Gebäude Drahtrahmen und Körnungen umfasst , die die Bausteine von jedem sind -Website, indem Sie Assets verwenden, um den Designprozess ultraschnell zu gestalten und Textstile zu erstellen, mit denen Sie Geld im Handumdrehen ändern können. Und natürlich, natürlich, eine Website entwerfen, werden Sie lernen, wie Sie sie vom Öffnen der Datei über Ort und Bilder, Hinzufügen von Text und Hintergründen bis hin zum Export in das Design, das Sie letztendlich ausgeben würden an einen Kunden. Wir haben eine Menge von den guten Sachen zu decken in diesem Kurs, und ich glaube wirklich, dass es Ihnen enorm helfen wird, erstaunliche Websites innerhalb einer passend zu Designer zu entwerfen , so würde ich gerne, Sie innen zu sehen. 2. Einführung in den Kurs: In diesem Kurs geht es darum, eine Passform in Designer für Webdesign zu verwenden. Wenn Sie zuerst mit Software nicht allzu vertraut sind, erfahren Sie schnell, worum es geht und wie Sie sie für das Webdesign einrichten. Bevor wir anfangen, etwas in Afinitor zu entwerfen, wird Designer einen Blick auf Web-Design-Konzepte und bewährte Praktiken werfen. Sie lernen, wie Sie Farben für Ihr Design wählen und wo Sie Farbe, Inspiration und fertige Farbthemen finden . Sie werden auch grundlegende Waffen und Topographie lernen, die nicht nur für ein gutes Web-Design, sondern für gutes Design im Allgemeinen extrem wichtig ist, um alles über Körper besteuerte Überschriften zu lernen und wie Zehe sie für eine große Benutzererfahrung paaren. Dann werden wir einen Blick auf eine typische Website-Struktur werfen. Design weise, natürlich. Wir werden über Logos, Navigationen Side Kriege und alle anderen Websites Bausteine sprechen. Danach werden wir darüber reden, was drin ist und was nicht in den Waffen auf der Welt drin ist. Wir werden auch im Web nach einigen Inspirationen für Webdesign suchen. Mit all diesen Kenntnissen und Fertigkeiten gehen Sie zum Entwurfsteil des Kurses, wenn die entstandenen Entwürfe einen Blick auf die Fertigstellung Ihrer Arbeit werfen, werden Sie lernen, wie Sie richtig speichern und für verschiedene Dateiformate exportieren. Es gibt eine ganze Menge gutes Zeug zu decken, und ich glaube wirklich, dass, sobald Sie den Kurs abgeschlossen und auf eigene Faust praktiziert haben, werden Sie anfangen, erstaunliche Website-Designs in einem fit in Designer in kürzester Zeit zu erstellen. Also lasst uns direkt in den Kurs springen und mit den Grundlagen beginnen. 3. Was ist Affinity Designer und wie man es für das Webdesign einrichtet: Wenn Sie völlig neu sind, um den Designer zu beleidigen, hier sind ein paar Fakten darüber. Zuallererst ist die Beleidigung des Designers in erster Linie eine Faktorgrafik-Design-Anwendung. Aber das bedeutet nicht, dass es nicht für Scream und Geräte Design geeignet ist. In der Tat ist es eine großartige Kombination aus Werkzeugen und Fähigkeiten, die für On- und Off-Screen-Arbeit gedacht sind. Zuerst war es nur für Mac OS verfügbar, aber seit Ende 2016 können Sie es auch nur Windows Machine installieren. In diesem Kurs werde ich eine PC-Version von der Software verwenden. jedoch Wenn SiejedochDesigner auf einem Mac installiert haben, sollten Sie keine Probleme haben, alleine zu folgen. Denken Sie daran, dass, wenn ich den Steuerungsmodifikator beibehalten verwende, Sie die Befehls-Modifikatortaste verwenden müssten. Und wann immer ich den Olt Modifikator Keep verwende, müssten Sie die Optionsmodifikatortaste auf Ihrer Tastatur verwenden. Die Umschalttaste ist für beide Betriebssysteme gleich. Was ist großartig an Designer in Bezug auf Interoperabilität ist, dass es Ihnen erlaubt, an verschiedenen Dateiformaten zu arbeiten und zu exportieren, die von Standard-Vektor, einmal wie V G und E. P s bis einmal wie V G und E. zu einem Standard-Raster-Dateien wie J. P, G, P und G und Geschenk. Es ermöglicht Ihnen, Standard-PSD und A. I Dateien zu öffnen , und es macht den Job wirklich gut. Es kann auch Ihr Kunstwerk in Dateiformate exportieren, die von anderen Design-Software wie Dobie Photo Shop und Adobe Illustrator gelesen werden können . Also, wenn Sie Ihre Arbeit als PDF-Tiff oder sogar PSD speichern müssen, können Sie das in Affinity Designer tun. Wenn Sie also irgendwann Ihren Entwurf an einen Entwickler senden, können Sie dies mit einer Standard-PSD-Datei tun, und Sie müssen sich keine Sorgen machen, dass der Entwickler die Datei nicht öffnen kann. Sie haben Affinität Designer unterstützt, Ebenen, Symbole, Fotoshop wie Effekte, Führungen und Körnung, und praktisch alles, was Sie brauchen, um Websites mit ihm zu entwerfen. Ich muss dir sagen, dass alles nur ein Tipp vom Eisberg ist. Ich meine, die Software kann so viele Dinge tun, und es gibt einige Aspekte, die es etwas zu machen als Illustrator oder Photoshopped. Für bestimmte Arten von Designaufträgen ist es wirklich ein One-Stop-Shop für Design-Anforderungen. Sie können Logos mit ihm Websites Visitenkarten zu entwerfen, praktisch alles, was Ihr Kunde vielleicht entworfen werden möchte. Aber in diesem Kurs geht es nicht um das Lernen. Alles, was man wissen muss, um einen Designer in Ohnmacht zu machen. Wenn Sie das brauchen, werfen Sie einen Blick auf meine, wie Sie schnell mit Affinity Designer-Kurs beginnen können, wo Sie alles, was zu wissen ist lernen. Die Software in diesem Kurs konzentriert sich auf die Verwendung des Programms in einem Web-Design-Szenario, daher denke ich, dass wir einen Blick auf die Web-Design-Fähigkeiten von Designer werfen können jetzt. 4. Die Fähigkeiten des Webdesigners von Affinity Designer: Afinitor Designer ist für große Sie eingerichtet. Ich entwerfe Erfahrung direkt aus der Box. Es gibt wirklich nicht viel, was Sie tun müssen, um alle seine Web-Design-Fähigkeiten zu nutzen , die einen Blick auf jetzt nehmen. Zuallererst, beleidigt. Der Designer unterstützt Layer, was sehr wichtig ist, wenn Sie Ihr Design ordentlich organisieren möchten. Es ist immer eine gute Idee, Ihre separaten Elemente, die separate Teile eines Website-Designs erstellen, auf verschiedenen Ebenen zu platzieren . Elemente, die den Header enthalten, sollten auf einer separaten Ebene gehen. Elemente, die die Seitenleiste enthalten, sollten auf einer separaten Ebene gehen usw. Es ist eine gute Produktionstechnik, um die Schichten richtig zu benennen. Anstatt ihre generischen Namen, wie z. B. Layer 1 Layer usw., zu belassen , sollten Sie sie umbenennen und ihnen logischere beschreibende Namen geben, die sich auf den Layer-Inhalt beziehen würden . Zum Beispiel, Hatter Food ER Sidebar Artikel, etc. Ich würde sogar einen Schritt weiter gehen und Creed Sub-Layer wert logisch beschreibende Namen, zum Beispiel, die Sub-Layer für nur die Navigation oder Brandon Blöcke in der Hatter-Ebene erstellen . Es gibt wirklich nichts Bezeichnenderes für ein schlampiges Design und Designer, das all seinen Inhalt auf nur einer einzigen generischen Schicht hält . Wenn Sie ein Fan von Schatten, Grady INts und Unschärfen sind , werden Sie glücklich sein zu hören, dass Designer eine Vielzahl von Effekten bietet, die Sie zu Ihrem Kunstwerk beenden können . Sie sind zerstörungsfrei, was bedeutet, dass sie das Kunstwerk nicht dauerhaft verändern, sondern dynamisch zu seinem hinzugefügt werden und jederzeit geändert werden können. Es wäre viel schwieriger, Website-Designs ohne unsere Boards zu erstellen. Sie sind der beste Weg, um nicht nur mobile Versionen der Website zu entwerfen, sondern auch um Ihre Arbeit zu präsentieren. Das Wichtigste, was er beim Erstellen von Websites in Designer berücksichtigen muss , ist, dass Sie standardmäßig, wenn Sie eine neue Datei erstellen, keine Kunsttafel erstellen. In Richtung Süden können Sie wählen, ob Sie ein Kunstwerk erstellen oder einfach als Standardseite verlassen möchten. Denken Sie daran, dass, wenn Sie in unserem Bericht erstellen möchten, wenn Sie Ihre Datei erstellen möchten, aktivieren Sie die Option „Kunst an Bord erstellen“. Natürlich, wenn Sie es einfach vergessen oder Ihre Meinung ändern, können Sie die Kunst immer an Bord nutzen. Noch eine Art Board Website Designs brauchen Pixel-Perfektion zu erstellen, und Sie können Designer, ganze Familie von Werkzeugen und Optionen verwenden . Nur dafür. Was ist großartig an dieser Funktion ist, dass Sie einfach eine Sie I design Fangvoreinstellung wählen und sicherstellen können, dass die Fangoptionen perfekt für Webdesignzwecke aktiviert sind . Es aktiviert auch die Force-Pixelausrichtung und Verschiebung durch Halten Pixel, nur um sicherzustellen , dass alle Objekte richtig gefangen und bewegt werden. Wenn Sie das Fangen haben. aktiviertem Design wird angezeigt, wenn die Objekte ausgerichtet sind, aber auch der Abstand zwischen bestimmten Objekten in Pixeln angezeigt. Die von U I entworfene Fangvoreinstellung wird auch dazu führen, dass Ihr Kunstwerk zwei Hilfslinien schnappt und am Raster rastet . Also, wenn es sie in Ihrem Workflow verwendet, Sie Ich habe Fangvorgabe entworfen, können Sie das Kunstwerk perfekt mit ihnen ausrichten. Und wenn Sie das Raster noch nie benutzt haben, weil es zu verwirrend war, werden Sie sich freuen zu hören, dass Designer ein automatisches Raster bietet, das selbst die besten Einstellungen findet. Du musst nicht alles alleine zählen. Das Raster ändert sich je nach dem von Ihnen festgelegten Zoomer-Wert. Natürlich, wenn Sie möchten, können Sie das Raster manuell ändern und Ihre eigenen Werte eingeben. Sie können auch den Guides Manager verwenden, um Ihre Guides genau dort zu platzieren, wo Sie sie wollen . Afinitor Designer ist in erster Linie ein Faktor-Design-Programm, aber es ermöglicht Ihnen, die Pixel-Umgebung zu imitieren, in der Ihre Website-Designs letztendlich leben werden . Für Webdesign-Zwecke können Sie die Standard-Pixelansicht und eine Retina-Ansicht mit hoher Pixeldichte verwenden. Auf diese Weise können Sie eine Vorschau anzeigen oder entwerfen, als ob es vollständig aus Pixeln gemacht wurde. Eine Website kann nicht ohne Text leben. Es ist so wichtig, dass viele Designer es zum Mittelpunkt ihrer Entwürfe machen so Manny grafische Elemente wie möglich entfernen. Und es ist wirklich einfach, mit Steuerdesigner zu arbeiten. Zusätzlich zu den Standardzeichen- und Absatzoptionen können Sie Textstile erstellen, die den Geldwechsel beschleunigen. Im Rahmen Ihres Designs. Sie können Dutzende und Dutzende von verschiedenen Textstile haben, und Sie können praktisch jeden Aspekt von ihnen ändern. Designer zählt mit der Möglichkeit, Ihre eigenen Bibliotheken aus Assets zu erstellen, die Sie beim Entwerfen von Websites verwenden können . Es kommt mit ziemlich finden Iowa 10 Assets, die Sie einfach auf die Paste Board Assets ziehen können waren Art von Symbolen. Der Unterschied zwischen Assets und Symbolen besteht darin, dass Sie Bibliotheken aus Assets erstellen können , die exportiert oder in ein bestimmtes Dokument eingebettet werden können. Und Sie können das nicht mit Symbolen genug in Designer tun. Sagen Sie also, Sie bauen einen Drahtrahmen für Ihre Website. Sie würden nur die schematischen Elemente für das Recht wollen? Erstellen Sie einfach Ihre eigenen Darstellungen eines Logo-Navigationssystems. Block verfügt über etcetera, dann ausgewählt, und aus dem Bedienfeldmenü, wählen Sie und aus der Auswahl. Das Element wird direkt in die Asset-Bibliothek gehen und auf Sie warten. Sollten Sie es noch einmal verwenden wollen. Beleidigen Sie den Designer kommt mit diesem separaten Arbeitsbereich, der nur für den Export von Elementen Ihres Designs gedacht ist. Es wird zur Exportpersona genannt, und es ist eine gute Möglichkeit, geschnittene Teile Ihres Designs zu exportieren. Sie können einfach das Slice-Werkzeug erteilen, ein Slice aus einem bestimmten Designelement erstellen und als separate Dateivertretung exportiert. Es gibt eine Menge von Tools und Optionen, mit denen Sie wunderschöne Website-Designs in einer Passform in Designer-Tools und Panelisten wie die Ebenen in Richtung Fangen erstellen können. Manager etcetera wird Ihnen helfen, Ihre eigenen Websites zu erstellen. Aber glaub mir, dass wir hier nur die Oberfläche abgeschwächt haben. Es gibt so viel mehr zu entwerfen Websites mit Beleidigung für Designer und Sie werden alles entdecken , wenn der Kurs fortschreitet. Ich denke, an dieser Stelle könnten wir direkt in die Erstellung unseres ersten Designs springen, aber ich möchte, dass dieser Kurs etwas mehr ist als nur ein Schaufenster von Designtechniken und -prozessen. Ich wollte Thora Wissen über zeitgenössisches Webdesign gewinnen. Als nächstes werden wir einen Blick auf die Prinzipien des guten Webdesigns werfen, gefolgt von praktischen Informationen über Farben, Typografie und Elemente, die verwendet werden, um eine Website zusammenzustellen. 5. Die 10 besten Grundsätze des guten Webdesigns: Wenn Sie ein beginnender Webdesigner sind, kann die Fülle von Informationen, die Sie entdecken und lernen müssen, Ihre Hände drehen es. Deshalb habe ich eine Liste von 10 wesentlichen Prinzipien aus gutem Web-Design zusammengestellt, die Ihnen bei den Einstieg helfen wird. Schauen Sie sich jedes dieser Prinzipien ist eine Art Richtlinie, aber keine absolute Regel, die Sie nicht banden können. Wenn Sieihnen folgen, ihnen folgen, besonders wenn Sie gerade erst anfangen, können Sie viele Rookie-Fehler vermeiden. So gutes Webdesign kümmert sich immer um den Endbenutzer. Schließlich ist das Design, wie Steve Jobs es ausdrückte, wie Steve Jobs es ausdrückte,nicht so, wie es aussieht, sondern wie es funktioniert. Und es muss einwandfrei in Bezug auf den Dienst der Besucher in der bestmöglichen Weise arbeiten, müssen Sie die Website mit seinem Zweck im Auge zu gestalten. Sie müssen denken, wie der Benutzer denken würde, wenn er oder sie würde die Website besuchen, denken, was die Besucher erwarten, auf der Website Informationen, Unterhaltung, vielleicht Produkte zu finden Unterhaltung, . Was lockt das in Bezug auf Design und gestaltet die Seite dann entsprechend? Dieser hier ist äußerst wichtig, und ich muss zugeben, dass ich eine Art persönliche Voreingenommenheit gegenüber schlecht ausgeführten Text auf der Seite habe. Ich spreche nicht von spezifischer Topographie, sondern von besteuerter Komposition. Der Benutzer möchte die Informationen schnell und mühelos finden und konsumieren. Deshalb ist es so wichtig, Ihre Absätze korrekt zu erstellen. Schön zusammengesetzter Text hat Überschriften, kurze Absätze und Aufzählungszeichen zum einfachen Lesen. Ich denke, dass bis auf die Länge von Absätzen für informationsorientierte Designs von entscheidender Bedeutung ist. In den letzten Jahren hat sich das mobile Copyright im Internet verbreitet, so dass die gesamten Absätze so kurz wie ein Satz sind. Eine gute Anzahl von Sätzen in Absätzen ist in der Regel 2 bis 3. Es ist allgemein einig, dass Sinnesserifen-Schriften, also die ohne dekorative Endungen auf Buchstaben, leichter auf digitalen Bildschirmen zu lesen sind. Ich würde es nicht als Dogma betrachten, aber ich würde dringend raten, nicht mehr als zwei verschiedene Schriftarten in Ihrem Design zu verwenden . Ob Sie für Sand Saref oder Serif Typefaces gehen, ist eine Tochtergesellschaft, um in Ihrer Fondswahl während dieses Designs zu bleiben . Wenn du dich entschlossen hast, Sarah-Überschriften und eine serifenartige Leiche zu suchen, bleib einfach bei ihnen. Das Layout Ihrer Website sollte den Besuchern dabei helfen, die Informationen zu finden, anstatt sie frustrierend danach zu suchen. Deshalb ist es wichtig, das Design zu konstruieren, das es dem menschlichen Auge ermöglicht, den Inhalt leicht von oben nach unten und von links nach rechts von wichtiger zu weniger wichtig zu navigieren . Bald erfahren Sie mehr über die Farbtheorie und wie Sie sie im Webdesign verwenden. Aber im Moment, denken Sie daran, dass die Farben, die Sie wählen, Ihre Komposition machen oder brechen können. Es ist wichtig, Farbschemata zu erstellen, die den Benutzern helfen, die Botschaft der Website zu verstehen und die Informationen zu finden, die sie suchen, während das Design ästhetisch ansprechend macht . 6. Die 10 besten Grundsätze des guten Webdesigns – weiter: Bilder können Sie in Knoten helfen, nur machen die Website schöner zu betrachten, sondern auch, um eine Geschichte zu erzählen. Sie können die Benutzer auf einer tieferen Ebene ansprechen, wenn sie richtig ausgewählt und gut mit dem Farbschema Sites kombiniert werden, sie werden Ihnen enorm helfen, ein schönes und nützliches Design zu schaffen. In letzter Zeit wird es viel häufiger, Kundenfotografie zu verwenden, anstatt nur kitschig stecken Fotos aus dem Web heruntergeladen. Denken Sie daran, die Bilder zu optimieren, wenn Sie das Design an einen Entwickler übergeben, und optimieren Sie Mittel, um die Bilder so zu komprimieren, dass sie kleiner sind. Größe hilft, die Website schneller zu laden. Die meisten modernen Websites basieren auf Gittern, und die am häufigsten verwendete ist das 12-Säulen-Raster. Betrachten Sie es als unsichtbare Linien von Siri, die Ihnen helfen, Ihr Website-Design zu strukturieren und es symmetrisch und einfacher zu programmieren. Diese Linien sind eine große Hilfe beim Platzieren der Elemente über dem Design. Das sind nur die Hauptcontainer. Alek Off Alignment ist sehr auffällig und erzeugt einen schlampigen Eindruck. Partituren erfahren Sie mehr über Körnungen und wie Sie Ihre eigenen erstellen können. Das ist selbstverständlich, dass Ihr Design auf mobilen Geräten gut aussehen muss. Tatsächlich könnten Sie sogar Ihre Entwürfe in erster Linie für mobile Geräte, insbesondere Smartphones,erstellen , insbesondere Smartphones, und dann Desktop-Designs aufbauen. Es wird Mobile First Approach genannt und ist ein Design als Reaktion auf die Tatsache, dass Benutzer viel öfter online gehen mit ihren Smartphones, nicht mit Desktop-Computern. In jedem Fall muss Ihr Design bereit sein, auf jedem Bildschirm angezeigt zu werden. Es gibt nichts zerstörerischeres für ein Design und dann ein Klappern. Halten Sie Ihr Layout einfach, damit sie leicht verdaulich sind. Das bedeutet, die richtige Menge an Farben zu wählen, die normalerweise nicht mehr als fünf beträgt. Es bedeutet, konsistent über die gefundene Wahl zu sein. Aber es bedeutet auch, die Interaktion zwischen Website-Elementen leicht zu verstehen, den richtigen Raum und ist aus einem Hauptgrund wichtig. Es macht den Konsum von Inhalten einfach und angenehm. Es gibt verschiedene Arten von Raum, und Sie können nutzen und müssen bewusst sein, off in Ihrem Design. Leerzeichen zwischen den Linien. Off-Text muss nicht zu klein sein, damit sich die Textzeilen nicht überlappen, aber auch nicht zu groß sind. Das menschliche Auge geht also nicht verloren. Ich kann auch mit Leerzeichen zwischen den Charakteren herumspielen. Aber ich würde für große Überschriften verlassen, wenn Sie für mehr von einem künstlerischen Ansatz in Web-Design und Entwicklung Welt gehen wollen , gibt es auch spezielle Arten von Räumen genannt padding und Randmuster ist der Raum zwischen den Teilen des Inhalts innerhalb eines Containers, und Ränder sind Leerzeichen zwischen Containern. allgemeine Regel ist das. Teile von Inhalten sollten sich nie berühren, und Sie sollten immer etwas Abstand zwischen ihnen haben. Gutes modernes Webdesign kann nicht ohne eine anständige Menge an Leerraum leben. Leerraum bedeutet Leerraum zwischen Objekten und ist notwendig für ein sauberes, modernes Aussehen. Leerraum kann ein bestimmtes Design auf eine bestimmte Weise lenken. Verwenden Sie es aufwändig, wenn Sie für eine gehobene Art von einem raffinierten Look Ihres Designs gehen . Das sind also die 10 wesentlichen Prinzipien des guten Webdesigns. Es gibt natürlich andere Prinzipien, die zu berücksichtigen sind, wie eine klare Navigation, die Verwendung des goldenen Verhältnisses oder der Ladezeit. Aber die allgemeine Idee ist immer das. Sie sollten für den Benutzer entwerfen und, wenn Sie Ihre Kunden objektiv im Auge haben, diese Prinzipien als Richtlinien für ästhetische und erfolgreiche Entwürfe verwenden 7. Der wichtigste Faktor, der in Betracht gezogen werden sollte, bevor die Farben gewählt werden: nur in der richtigen Farbe Haut für Ihre nächste Website. Design ist zusammen mit Typografie. Am wichtigsten ist, dass die Farben, die Sie wählen, das erste, was die Aufmerksamkeit des Besuchers auf sich ziehen wird und, wenn sie richtig gewählt werden, nicht ihre Augen verletzen lassen und Finger schnell nach dem Schließknopf suchen. Der Grund für Ihre Farbwahl kann nur die Tatsache sein, dass Sie es mögen. Es ist ein Teil der gesamten Strategie, die hilft, die Nachricht zu senden, die Ihr Kunde senden möchte . Das mag seltsam klingen, aber denken Sie daran, dass Sie die Website nicht für sich selbst gestalten. Du entwerfst es nicht mal für deinen Klienten. Sie entwerfen es für Ihre Kunden. Und das bedeutet, dass die Autos von der Website müssen den Besuchern helfen, zu verstehen, worum es auf der Website geht. Durchsuchen Sie die Website ohne das Gefühl der Verwirrung und finden Sie die Inhalte, die sie suchen . Wie wählt man also tatsächlich die besten Farben für einen bestimmten Webdesign-Job? Es gibt nur sehr wenige Dinge, die Sie berücksichtigen müssen. Dies wird Ihnen helfen, die Nachricht zu verstehen, die die Website senden soll, und verstehen, was die Besucher erwarten zu erleben. Zunächst einmal müssen Sie wissen, was ist, dass Ihr Kunde tut, Ob es eine High Street Company, eine Mutter und Pop-Shop, eine Wohltätigkeitsorganisation, Sie müssen dieses Geschäft verstehen. Du würdest nicht dasselbe Farbschema für eine Finanzgesellschaft wählen, wie für einen Spielwarenladen , richtig? Wir werden vorerst etwas später über die Farbpsychologie sprechen. Notieren Sie sich auch, auch, dass Farben Emotionen vermitteln und entzünden, und es ist äußerst wichtig, die richtigen anzuzünden. Manchmal von Unternehmen in gewisser Weise zwingen in gewisser Weisedie Verwendung bestimmter Farben. Zum Beispiel, wenn Sie eine Website für einen Bio-Lebensmittel-Eck-Shop erstellen, höchstwahrscheinlich würden Sie für Erdtöne gehen, und wenn Sie eine Kindergarten-Website erstellen würden, würden Sie für einige bunte und gefundene Farbe -Paletten. Zweitens, wenn das Unternehmen bereits ein Logo hat oder es neu gestaltet, müssen Sie seine Farben berücksichtigen. Dies bedeutet nicht, dass alle Farben innerhalb der Website genau die gleichen sein müssen wie die im Logo verwendet, aber sie müssen sich definitiv ergänzen. Drittens, hören Sie auf Ihren Kunden, aber erliegen Sie nicht eindeutig schlechten Ideen. Ich meine, es gibt einen Grund, warum der Kunde Sie angeheuert hat, anstatt es selbst zu tun oder ihren Neffen zu bitten , seine Website zu gestalten. Aber natürlich müssen Sie nicht übermäßig schematisch sein, wenn Ihr Kunde in irgendeiner Weise auffallen möchte. Und wenn Sie einen Blick auf seine Konkurrenten Webpräsenz nehmen, können Sie ein wenig mit Farbschemata experimentieren. Wenn zum Beispiel Sie zum Beispieleine Website für eine moderne Umwelt ein Unternehmen entwerfen, müssen Sie nicht für dunkelblau und grau gehen, sondern streuen Sie die Dinge mit dem hellbraun oder grün. Schauen Sie sich die Website des Kunden earth dot org an. Dies kann nicht das beste Design der Welt sein, aber es zeigt deutlich, dass die Botschaft und Emotionen Arm oder wichtig als Kragen Korrektheit bei der Entscheidung über ein Auto Schema Sie in das Design verwenden möchten. Denken Sie daran, welche Art von Unternehmen Ihr Kunde ist und über die Benutzer, die es auf der Website besuchen werden. Als nächstes werden wir über praktischere Aspekte bei der Auswahl von Farben für Ihre Designs sprechen. Wir werfen einen Blick auf die Vorbereitung der Farben für die beste Benutzererfahrung 8. So mischen Sie Farben für das bestmögliche Benutzererlebnis: Es gibt viele Designer, die ihre Augen über eine bestimmte Farbe oder Farbpalette beurteilen lassen wird gut für einen bestimmten Web-Design-Job sein. Aber das Problem mit diesem Ansatz ist die Tatsache, dass so viele Farben schön aussehen können. Und so maney Farbpaletten scheinen für dieses spezifische Design angemessen. Also, wie Sie sagen, ob Ihr Halsband Wahl gut ist? Gibt es eine Möglichkeit, die Farbkombinationen zu beurteilen, die Sie gewählt haben? Nun, wahrscheinlich Learys. Aber wir müssen einen Blick auf einen Aspekt aus der Farbtheorie werfen, aber ich verspreche, dass es so praktisch wie möglich sein wird. Grundsätzlich können wir über vier Arten von Farbschemata sprechen, monochromatisch, kostenlos und die Logos und versuchen Dachboden. Lassen Sie uns also über diese für ein zweites Modell sprechen. Chromatisches Farbschema verwendet eine Grundfarbe und verschiedene Tönungen Schattierungen und Situationen aus es. Es ist die beste Wahl, wenn Sie ein kohäsives Design benötigen, aber Sie können mit einem langweiligen Farbschema in eine Falle fallen. Hier zusammengesetzte Farbschemata, manchmal als split-frei bezeichnet werden, basieren zusammengesetzte Farbschemata,die manchmal als split-frei bezeichnet werden,auf zwei Farben von der entgegengesetzten Größe aus dem Farbrad. Wenn Sie Ihr eigenes komplementäres Farbschema erstellen möchten, werfen Sie einen Blick auf das Farbrad und stellen Sie sich vor, dass Sie eine Sanduhr darauf zeichnen. Im Wesentlichen nehmen Sie zwei Farben von gegenüberliegenden Enden aus dem Farbspektrum, was Ihrem Design mehr Freiheit gibt als die motorischen chromatischen Schemata. Wenn es Konsistenz ist, die Sie in Ihrem Design sind, gehen Sie für und Logos Farbschema. Werfen Sie einen Blick auf das Farbrad und wählen Sie drei benachbarte Farben. Diese Themen können ein einheitliches Feld erstellen, ohne als die monochromatische Farbe Askew geboren zu werden. Um ein versuchen Dachboden Farbschema zu erstellen, zeichnen Sie ein Dreieck, dessen Seiten die gleiche Länge haben und wählen Sie die Farben an den Dreiecken. Endpunkte. Dadurch entsteht ein vielfältiges, aber ausgewogenes Farbschema mit gleichermaßen lebendigen Farben. Abgesehen von diesen Haupttypen von Farbschemata gibt es einige weitere Faktoren, die Sie bei der Auswahl von Farben für Ihr Design berücksichtigen müssen . Ich spreche von Komplementierung, Kontrast und Lebendigkeit. Farben, die sich gegenseitig ergänzen, sitzen auf den gegenüberliegenden Endpunkten außerhalb des Farbspektrums da sie sich optisch signifikant unterscheiden. Es ist einfacher für das menschliche Auge, sie zu unterscheiden. Das ist, warum Menschen neigen dazu, Teig zu mögen, die leicht zu betrachten sind, was bedeutet, dass sie eine gewisse Balance bieten und das Auge nicht zwingen, nach leichten Unterschieden zwischen den Farben zu suchen . In einem monochromatischen Schema wird die Komplementierung in den trias und zusammengesetzten Farbschemata verwendet. Eine gute Benutzererfahrung kann nicht ohne die richtige Verwendung von Kontrast leben. Die wichtigste Wahl, wenn es um Kontrast geht, ist natürlich die große Grund- und Textfarbe. Wenn Sie sich nicht sicher sind, welche Farben Sie verwenden sollen, empfiehlt es sich, eine sehr helle Farbe für den Hintergrund und eine sehr dunkle Farbe für den Text selbstzu wählen dunkle Farbe für den Text selbst oder umgekehrt. Vibrancy ist die emotionale Seite des Farbschemas. Hellere, lebendigere Farben provozieren energetische Gefühle, während dunklere, ruhige, alle Farben die Besucher entspannten, was ihnen hilft, sich auf andere Dinge zu konzentrieren. Dies sind die wichtigsten theoretischen Werkzeuge, die Ihnen helfen sollten, mehr, gut vierte Entscheidungen für Ihre Farbschemata zu machen . Natürlich gibt es viel mehr Werkzeuge und Ideen zu verwenden und in Bezug auf die Auswahl der Farben zu wählen . Aber wenn Sie sich mit den von uns abgedeckten vertraut machen, sind Sie auf dem richtigen Weg zum professionellen Farbhandling im Grafikdesign. Da wir Emotionen erwähnt haben, die durch Farben hervorgerufen wurden, denke ich, dass es ein guter Zeitpunkt ist, über Farbpsychologie zu sprechen, was nicht nur im Webdesign, sondern auch im Designim Allgemeinen äußerst wichtig nicht nur im Webdesign, sondern auch im Design ist. 9. So wählst du die „psychologisch korrekten“ Farben: die Farben, die Sie für Ihr Design wählen, schaffen Sie eine bestimmte Stimmung. Sie müssen die Psychologie hinter bestimmten Farben verstehen. Farbpsychologie mag übermäßig wissenschaftlich klingen, aber es beschreibt einfach die Gefühle und Bedeutungen, die Menschen oft mit bestimmten Farben assoziieren . sie sorgfältig auswählen, können Sie die Gesamtnachricht einer Website verstärken. Werfen wir einen Blick auf einige der Grundfarben, die Sie am ehesten beim Entwerfen Ihrer Websites verwenden . Rot ist die lebendigste und aggressivste Farbe. Es ist die 1. 1, die Männeraugen anzieht, je nachdem, welche Farben es damit macht, Macht und Mut, aber auch Liebe und Leidenschaft vermitteln können . Da es in vielen Verkehrsschildern verwendet wird, es häufig auf Websites verwendet, um den Benutzer zu alarmieren, über Gefahren zu informieren. Daher ist es ein Fehler, es für Ihren Aufruf zu Aktionen zu verwenden. Solch ein Spartaner oder Links Orange ist eine der angenehmsten Farben zu betrachten. Es ist schwer zu verpassen, und es kann Spaß und energische Atmosphäre hervorrufen. Gelb ist die Farbe aus, die etwas Wärme und Sommerzeit. Es ist auch die sichtbarste Farbe im Spektrum, also nicht zu viel zu verwenden. Viele Menschen werden zu viel Gelb irritierend finden. Es ist besonders auffällig, wenn es mit Weiß oder Schwarz kombiniert wird, da es sich um Sicherheitsausrüstung , Schulbusse und Taxis handelt. Wenn Sie Leute nach ihrer Lieblingsfarbe fragen, sagen sie höchstwahrscheinlich blau. Es ist angenehm, seine unauffällig zu betrachten und macht Sie sich wohl fühlen. Vielleicht liegt es daran, dass es die Farbe des Himmels ist. Es ist auch die Farbe aus Wasser, so dass die Menschen verbinden blau mit Erfrischung und Reinigung blau, vor allem dunkelblau, ist die professionellste. Farbe schließlich die ist schließlich dieFarbe des Präsidentenanzugs. Verwenden Sie diese Farbe, wenn es Professionalität ist, die Sie vermitteln möchten. Mit Ihrem Design ist Grün die Farbe der Natur. Wenn Ihre Augen schmerzen, wenn Sie länger auf einen Computerbildschirm schauen, schauen Sie sich das Grün an. Es ist eine perfekte und offensichtlichste Wahl für organische, umweltfreundliche und gesunde Produkte, obwohl es eine Farbe des US-Dollarist US-Dollar . Wenn Sie eine Website für eine Finanzgesellschaft erstellen, gehen Sie nicht mit Grün über Bord. Stattdessen halten Sie sich an Dunkelblau, Dunkelgrau, Weiß und Schwarz, um Vertrauen und Professionalität zu vermitteln. Purple ist historisch mit dem Royalty verbunden, was es perfekt für Luxusmarken macht. Auch, wenn es mit anderen Farben kombiniert wird, wird es etwas von seinem königlichen Erbe verlieren. Mit Rot, kann es intim und romantisch fühlen. Mit Weiß und Rosa wird es spielerisch und kindlich. Warum es Reinheit und Unschuld bedeutet. Aber es wird auch verwendet, um Minimalismus und Raffinesse zu schaffen, die Sie am ehesten auf Websites sitzen . Konzentrieren Sie sich auf Hochzeiten, Gesundheitswesen und Schilder sowie auf modernes, minimalistisches Blog-Schwarz ist zweifellos die ultimative elegante Farbe. Es kommt nie aus der Mode. Es impliziert Stärke, Luxus, Böse, Tod und Vermeidung. Denken Sie daran, dass Sie entscheiden können, welche Emotionen die Besucher fühlen, wenn Sie sich die Website ansehen , die Sie entworfen haben, so dass Sie eine wichtige Rolle als Designer spielen. Außerdem können Farbbedeutungen zwischen Kulturen und Regionen dramatisch variieren, daher ist es besser zu überprüfen, ob die Farbe Joe's in einer bestimmten Kultur angemessen ist. Jetzt wissen Sie etwas über die Farbtheorie, und ich gebe zu, dass es sich überwältigend anfühlt. Glücklicherweise gibt es Werkzeuge, die Ihnen bei der Auswahl des richtigen Farbschemas sehr helfen können. Also als nächstes wird einen Blick auf sieben einfache Werkzeuge für die Auswahl fehlersicherer Farbschemata 10. 7 einfache Tools zur Auswahl fehlersicherer Farbschemata: Wahl Farben für Ihr nächstes Design kann ein langer und sogar entmutigender Prozess sein. Für mich dauert es immer viel zu lange, um die richtige Kombination zu finden, aber wahrscheinlich kann ihr ganzer Prozess mit einigen Online-Farbschema-Generatoren beschleunigt werden. Werfen wir einen Blick auf sieben einfache Werkzeuge für die Auswahl unserer Proof-Farbschemata. Fangen wir mit Kohler hex a dot com an. Dieses Zeichen ist großartig, wenn Sie ein Farbfanatiker sind. Alles, was Sie hier tun müssen, ist eine beliebige Farbe, Wert oder Farbnamen eingeben, um eine riesige Menge von Informationen im Besitz dieser Farbe und natürlich natürlich verschiedene Farbschemata zu erhalten. Sie werden auch Beispiele für verschiedene Verwendungen aus dieser bestimmten Farbe erhalten, zusammen mit Alternativen dafür. Und wenn Sie irgendwelche von den Alternativen bevorzugen, können Sie einfach darauf klicken, um alle notwendigen Informationen und Farbschemata zu sehen. Das zweite Werkzeug, Farbpunkt genannt, ist wirklich lustig und einfach zu bedienen. diesem Werkzeug können Sie schnell ein Farbschema erstellen, indem Sie die Maus nach links und rechts ziehen um den Farbton zu ändern, ziehen Sie nach oben oder unten, um die Helligkeit zu ändern, und scrollen Sie nach oben oder unten, um ihre Sättigung zu ändern . Wenn Sie mit der Farbe zufrieden sind, klicken Sie auf, um sie zu speichern und wiederholen Sie den Vorgang mit einer anderen Farbe. Das Werkzeug zeigt nur Farben an, die gut mit dem von Ihnen gewählten passen, bevor Sie den Vorgang so oft wiederholen können , wie Sie möchten. Die nächsten beiden, genannt Palatable, macht besonders Spaß zu bedienen. Sie können Ihre eigene Farbe wählen oder auf die Schaltfläche „Abneigung“ klicken, damit das Programm die Farben für Sie wählt . Wenn es Ihnen gefällt, klicken Sie auf „Gefällt mir“ und „Seve“, die nächste Farbe, die der vorherigen entsprechen soll, entspricht Ihrem Geschmack. Sie können auch eine bestimmte Farbe entfernen, um die gesamte Palette auf Farbe zu verkleinern. Verstand. Sie können Ihre eigenen Farbfelder auswählen, und wenn Sie sie mögen, können Sie sie sehen und treffen. Generieren Sie für das Programm zu finden, stellen Sie sich Farben zu denen vor, die Sie gewählt haben. Das Besondere an diesem Hocker in Bezug auf Web-Design ist, dass Sie die Website-Farben Option und Wasserpalette wählen können , die auf eine Dummy-Webseite angewendet wird. Materialpalette wurde erstellt, um hauptsächlich zum Zweck der Verschmelzung von Materialdesignfarben in Ihren Entwürfen. Also, was ist Materialdesign? Nun, es ist Google-Konzept-Design, das User Experience orientiert ist. Es ist speziell entwickelt, um am besten auf mobilen Geräten zu arbeiten und Materialpalette ist hier, um Ihnen bei der Auswahl der Farben zu helfen. Wenn Sie nach den Materialdesign-Prinzipien entwerfen möchten, müssen Sie hier nur zwei Farben auswählen und das Programm das schwere Heben für Sie durchführen lassen . Es wird nicht nur ein Farbschema für Sie schaffen, sondern auch größer. Eine Vorschau des Schemas, das auf eine mobile Benutzeroberfläche angewendet wurde, haben Sie wahrscheinlich von Can Va gehört ? Aber haben Sie von seiner Farbpalette zu Ihnen gehört? Es kann verwendet werden, um Farbschemas aus importierten Bildern zu erstellen. Dragon Bild auf die Schnittstelle und lassen Sie das Programm nehmen die Farben von diesem Bild. Und last but not least, ist mein Lieblings-Farbschema-Generator. Das ist völlig anders in der Art und Weise, wie es denkt, Paletten zu erstellen. Anstatt die Namen der Farben einzugeben, Bilder hochzuladen oder die Maus zu ziehen, um Farbfelder zu erstellen, geben Sie das Theme-Ereignis oder ein beliebiges Wort ein, das Ihr Design beschreibt. Nach ein paar Sekunden erhalten Sie Farbschemata, die mit diesem Schlüsselwort verknüpft sind. Ziemlich süß, was? Alle diese Farbgenerierungswerkzeuge sind eine bescheidene Darstellung eines Bereichs von Werkzeugen, die Sie online finden können . Die meisten von ihnen werden so ziemlich auf die gleiche Weise funktionieren. Also, wenn Sie nur Ihre ein oder zwei Favoriten finden, das ist wirklich alles, was Sie brauchen. Als Nächstes lernen Sie die Grundlagen der Topographie im Webdesign kennen, also gehen Sie nicht weg. 11. Eine super kurze Geschichte der Web-Typografie: im Vergleich zu der mehr als 25 Jahre langen Existenz des Internets. True Web Typografie sieht aus wie ein Kindergartener. Es ist erst ein paar Jahre alt. Selbstverständlich enthielten auch die frühesten Webseiten Text. In der Tat war die erste Website überhaupt nichts über Text, aber die Wahl des Telefons war begrenzt, gesagt. Vor der Geburt aus. True Web-Topographie-Designer konnten aus fünf verschiedenen Schriftarten wählen, aber nur zwei von ihnen, Verdana und Georgia, wurden speziell für die Webnutzung erstellt. Die anderen Mittel, nämlich Aerial, Helvetica und Times New Roman, wurden aus dem Betriebssystem des Computers gezogen und in eine Website geladen. Natürlich bedeutet dies nicht, dass Designer und Entwickler höflich dem zu begrenzten Konzept zugestimmt haben, nur fünf verfügbare Schriften zu haben. Die einfachste Alternative war, Bild zu verwenden, wie Text Wünsche konnten die Mittel auf ihren Computern installiert verwenden , ohne zu viel Sorge, zu gebildet Lizenz in. Aber es gab zwei große Nachteile dieser Methode. Zunächst einmal, um das volle Bilddesign in eine Website zu verwandeln, mussten Sie es in eine lächerliche Anzahl von Bildern in einem Stück Software wie Photo Shop schneiden . Vergessen Sie auch nicht, dass dies die Zeit frei war. Nicht so schnelle Internetverbindung. Die Zeit, die es brauchte, um eine Seite voller Bilder zu laden, war also deutlich länger. Alles änderte sich in der 2010, als Google eine eigene Bibliothek aus Web-Fonds erstellt. Sie sind kostenlos, meist gut gemacht und definitiv einfach zu bedienen, sowohl für Designer als auch für Entwickler. Dies hat die Welt der Web-Typografie verändert. Heutzutage finden Sie webspezifische Mittel in allen wichtigen Typografie-Gießereien, und es ist schwer vorstellbar, Websites zu entwerfen. Ohne sie. Der Aufstieg von Responsive Webdesign hat ihre Typografie durch eine neue Art von Transformation gehen lassen. Die Tatsache, dass Ihre Arbeit auf verschiedenen Geräten betrachtet wird, macht es unmöglich, vorherzusagen , wie ein bestimmter Fonds auf einem bestimmten Gerät aussehen wird. jedoch Es gibtjedocheinige Grundregeln für die Auswahl der richtigen Mittel für die richtigen Arten von Arbeitsplätzen, und wir werden darüber als nächstes sprechen 12. So mischen Sie Farben für das bestmögliche Benutzererlebnis: richtig gewählt. Typografie für das Projekt bedeutet, dass es hilft, die Nachricht von der Website zu senden. Es ist auch wichtig, sich daran zu erinnern, dass Schriftarten, genau wie Farben, bestimmte Arten von Emotionen hervorrufen können. Deshalb ist es wichtig, Ihre Freunde sorgfältig und mit dem Leser im Auge zu wählen. Benutzer, die die Website ansehen, werden die meiste Zeit damit verbringen, den Textkörper zu lesen. Deshalb ist es eine gute Idee, zuerst den Fonds für den Körpertext zu wählen. Die Schriftart, die Sie wählen, muss unauffällig Leiste ein ble und lesbar sein. Es gibt ein paar Möglichkeiten, Mittel mit diesen Eigenschaften zu wählen, aber ich habe versprochen, es so regelmäßig Designer freundlich wie möglich zu halten. Ich meine, nicht jeder Designer ist begeistert von Topografie. Was sind die Funktionen von unaufdringlichen und lesbaren Mitteln für Ihre Website-Designs? Ein lesbarer Fund hat Lose von X Höhe, das ist das vertikale Maß eines Kleinschreibung X. Je kürzer die X Höhe, desto kleiner wird die letztere erscheinen, was dazu führen kann, dass der Typ unleserlich wird. Auf der anderen Seite kann zu viel X Höhe die Buchstaben M und H schwer zu unterscheiden machen. Werfen Sie einen Blick auf das gleiche Wort in Lotto geschrieben und offene Söhne, um ihre Ex-Höhen zu vergleichen. Das zweite, was man sich notieren muss, ist, wie offen die Öffnungen sind. Aber was unsere Öffnungen Öffnungen sind die Lücken in Buchstaben wie ein C oder s. Je offener sie sind, desto lesbarer werden die Buchstaben. Sie müssen auch die Aufmerksamkeit auf die A. Absender und D-Zentren der Passagiere des letzteren zahlen, sind die Striche, die sich über die mittlere Linie erstrecken , und D-Zentren sind die Striche, die sich unterhalb der Basislinie erstrecken. Je unterscheidbarer sie sind, desto lesbarer wird der Text. Die meisten Saref-Schriften sind oft die ideale Wahl, um längere Textpassagen zu lesen. Aufgrund der spürbaren Striche in ihren A-Sendern und D-Absendern. Ihre Körpersteuerschriftart sollte mindestens vier verschiedene Stile enthalten. Reguläre Kursivschrift. Fett und fett kursiv. Wenn die Schrift keine kursiv formatierte Schriftart enthält, werden die Browser gewaltsam schräg. Und wenn es keine fett formatierte Version enthält, verdoppeln die Browser die reguläre Version der Vorderseite, was den Text schwer für die Augen macht. Das letzte, was Sie bei der Auswahl von Schriftarten für ihren Textkörper eine Notiz abnehmen sollten, ist der Kontrast zwischen dünnen und dicken Linien innerhalb von Buchstaben. Wenn Sie einen Blick auf Schriften wie Play for display werfen, werden Sie einen riesigen Kontrast zwischen dicken und dünnen Linien in separaten Platten bemerken. Schriftarten wie diese können in Überschrift Designs für Mode-Blogs gut aussehen, aber sie funktionieren nicht gut als Körper besteuert. Jetzt wissen Sie, was die fünf entscheidenden Merkmale von Schriftarten, die gut als Textkörper funktionieren. Diese Schriften haben großzügige X Höhe, offene Öffnungen, unterscheidbare Ass und D Absender, mindestens vier Stile und Gewichte und einen kleinen Kontrast zwischen Linien innerhalb von Leitern. Nein, es ist alles gut und gut über die Hauptfrage bleibt immer noch unbeantwortet. Und diese Frage ist: Wie groß sollte der Textkörper sein? Nun, die kurze Antwort ist 16 Punkte. Es ist die Textgrößen-Browser standardmäßig angezeigt. Es ist die Textgrößen-Browser sollen angezeigt werden. Im Allgemeinen funktioniert diese Größe gut für Laptops, Desktops und Telefone. Und was ist mit der Zeilenhöhe, was natürlich den vertikalen Abstand zwischen Textzeilen bedeutet. Eine gute Faustregel ist es, sechs Punkte auf die Körper-Text-Telefongröße hinzuzufügen Wenn Sie also 16 Wichtigkeit als Körper-Text Telefongröße verwenden, gehen Sie mit 22 Punkten als Zeilenhöhe . Natürlich können Sie mit anderen Linienhöhenwerten experimentieren. In der Tat verwenden viele moderne Blutdesigns großzügigere Linienhöhen, also haben wir den Körper bekommen. Textschriftart ist ziemlich gut abgedeckt. Wenn Sie all diese Regeln befolgen, werden Sie den Benutzern einen großen Gefallen tun, indem Sie das Lesen Ihrer Website zu einem angenehmen Erlebnis machen. Sie sparen sich immer viel Zeit und vermeiden Schriftarten. Sie sind es nicht wert, in Ihrem Design zu landen. Als nächstes wir einen Blick auf das Basteln von Aufmerksamkeitsgrabbern. Wir reden über Rubriken. 13. So wählst du die richtigen Schriftarten für Überschriften: gute Überschriften und Unterüberschriften sind die Elemente einer Website von Design, die Benutzer anziehen und die weitere Lektüre fördern. Deshalb ist es wichtig zu lernen, wie man sie richtig erstellt. Wenn Sie sich nicht sicher sind, mit der Schrift in Gefahr mit dem Körperfonds zu verwenden, gehen Sie einfach für die gleiche Telefonfamilie. zum Beispiel für Wenn Sie sichzum Beispiel füroffenen Sand als Körperfonds entschieden haben, Sie eine kühne und vergrößerte zwei oder sogar eine dreifache Version davon für Ihre Rubriken. Dies wird das Design Luke harmonisch machen und die Zeit reduzieren, die benötigt wird, um die Website zu laden. Das ist der schnelle und einfache Weg, aber die Chancen stehen, dass früher oder später Ihr Designer so durchsetzen wird und Sie auffordern, verschiedene Schriften zu mischen . Sie sollten einen Fonds für Body-Tags und weitere vier Überschriften verwenden, wenn Sie das Beste aus beiden Welten wollen . Ich meine, wenn du auf der sicheren Seite bleiben willst und die Topographie deiner Website noch ein bisschen aufgerissen hast, kannst du in einer Superfamilie bleiben. Zum Beispiel können Sie Droiden-Söhne für die Rubriken und Droidenserif wählen. Für Text im Textkörper. Sie werden einige gute super Familien unter Google-Telefonen finden, zum Beispiel Roboto und Roboto Slab Merryweather und Merryweather Sands oder Noto Santas und Noto Saref. Die nächste große Frage ist, wie groß sollten die Überschriften sein? zunächst daran, dass Ihre Seite eine maximale Anzahl von sechs Überschriften verwenden wird. Nicht alle müssen notwendigerweise in das Design einbezogen werden. Ich meine, typische Designs gehen nicht unter die Überschrift für, aber es ist eine gute Praxis, eine Reihe von Größen für alle Überschriften zu entwickeln, um sie zu setzen. Einfache Überschriften sind Titel von den Website-Komponenten Überschrift eins ist in der Regel für die Sehenswürdigkeiten Branding reserviert , so technisch muss es nicht Text überhaupt sein. Es kann das Firmenlogo umfassen, die Überschriften, die die meisten Ihrer Entwürfe auf unsere Rubrik Zwei verlassen werden. Das sind deine Blocktitel, Titel im Hauptbereich usw. Ich würde empfehlen, sie mindestens 32 Punkte groß zu machen, was doppelt so groß ist wie eine typische Textgröße. Auch hier gilt der Zeilenhohe Troll, um sechs Punkte zur Schriftgröße hinzuzufügen. Alle anderen Überschriftengrößen variieren je nach Aufgabe, die sie innerhalb des Entwurfs ausführen. Zum Beispiel wird Überschrift drei normalerweise als Titel von Cyber-Elementen verwendet. Daher muss seine Größe gut mit dem gesamten Designkonzept funktionieren, anstatt nur ein Prozentsatz oder eine Art von einer Ableitung von den anderen Überschriften zu sein. jedoch Wenn Ihr Designjedochtief nach unten als Kopf in sechs geht, würde ich nicht empfehlen, es kleiner als die Textgröße selbst zu machen. Ich meine, kleiner als der Körper sich selbst angreift. Das ist einfach urkomisch, nicht wahr? Jetzt wissen Sie, wie Sie Schriftarten sowohl für Textkörper als auch für Überschriften auswählen können. Jetzt ist es an der Zeit, sie miteinander zu mischen. Machen wir das als Nächstes. 14. So mißt du Schriften für Überschriften und body: Glück für uns. Es gibt eine Tonne von Ressourcen und auf Linsen für leichter für die Eltern. Werfen wir jetzt einen Blick auf einige von ihnen. Die 1. 1 ist ein Tool, das direkt in Google Fonds selbst integriert ist. Wenn Sie eine Schrift wählen, sagen wir offene Sand und klicken Sie auf Siehe Exemplar. Sie werden eine Panne von der Vorderseite sehen. In der unteren linken Ecke sehen Sie eine Liste von beliebten Front-Paarungen. Alles, was Sie tun müssen, ist ein vorderes Paar zu wählen. Und was sollte auf das Stück Text auf der rechten Seite angewendet werden? Sie können auch mit der Vorderseite überprüfen wird wie Überschrift und als Textkörper aussehen. Aber es gibt einen großen Nachteil dieses Werkzeugs. Sie erhalten nur eine bescheidene Vorschau auf die Gelder in Aktion. Es ist schwer vorstellbar, wenn man sich diese Textstücke anschaut, wie sie in verschiedenen Szenarien aussehen werden . Zum Beispiel, bei einem Aufruf von Action Sliders Karten etcetera, um einige weitere Vorderpaare zu sehen. Zusammen mit erweiterten Beispielen, gehen Sie zu Telefon starten große einfache dot io. Hier finden Sie ein paar ungewöhnliche Google aus Paris finden Sie bei der Gestaltung Ihrer nächsten Website eine von der größten und meistbesuchten Fondsmutter, ALS, ist Front Pair dot co. Hier finden Sie eine umfangreiche Bibliothek abseits der Vorderseite Paare, die in bestimmte Kategorien unterteilt sind. Übermitteln Sie eine beliebige Kombination aus Saref, San Serif und Kursivfonds, und wenn Sie eines der vorderen Paare mögen, können Sie es einfach mit einem einzigen Klick herunterladen. Sie erhalten eine ZIP-Datei, die Sie benötigen, um Telefone zu entpacken und zu installieren, die sich darin verstecken. Aber natürlich ist das größte Repository von Google Front-Paaren Google selbst. Ich meine, wenn Sie nur Google Google-Telefonpaare, finden Sie Tom's und Thomas aus Artikeln über die fertige aus Birnen für Sie zu wählen und zu verwenden. Wenn Sie also immer mit sich selbst diskutiert werden, welche Mittel zu verwenden sind, ist es eine gute Idee, die Vorschläge anderer Designer zu betrachten, die diesen mühsamen Prozess erfolgreich durchlaufen haben. Ein Wort der Vorsicht hier Wenn Sie eine Wortanzeige in einem Schriftartnamen bemerken, bedeutet das, dass es für Überschriften gedacht ist, nicht für Körper besteuert. Also, wenn ein Fondspaar eine Anzeige Art Fonds für Körpertext vorschlägt, ist das nur schlechte Ratschläge und Ignoranz. Seien Sie also vorsichtig, dass dies die gebräuchlichsten Wege und Tools sind, um große Google-Telefonpaare zu finden . Sie können eine gute Möglichkeit, eine einzigartige Website zu entwerfen, nur sehr daran denken, dass Sie nicht nur nach der künstlerischen Wirkung, sondern auch nach Lesbarkeit. Als Nächstes werden wir diesen Abschnitt kurz zusammenfassen und uns auf die drei wichtigsten Aspekte aus gut ausgewählten Mitteln für Ihre Website-Designs konzentrieren . 15. Die perfekte Schrift für das Design von Benutzeroberfläche: Lassen Sie uns wissen, etwas ist los und werfen Sie einen Blick auf drei wichtige Aspekte aus jedem Fonds, der dankbar sein wird Ihre Web-Designs. Ich denke, dass Sie mittlerweile gut genug verstehen, dass Ihre Entwürfe Ihren Kunden Publikum dienen sollten . Wenn ein Benutzer die von Ihnen entworfenen Websites besucht und diese nach ein paar Sekunden verlässt, weil er nichts lesen kann, ist das ein Zeichen für ein schlechtes Design. Die besten Indikatoren für die Lesbarkeit sind klare Unterscheidungen zwischen Buchstaben, die ähnlich aussehen könnten . Zum Beispiel, Capital I und Kleinbuchstaben L gut gewählte Typografie bleibt außerhalb der Benutzer. Warten Sie, sozusagen. Ich meine, es macht den Lesevorgang einfacher. Aber Lesen ist nicht nur für die Anzeige von Blockbeiträgen. Es ist auch für das Lesen von Produktbeschreibungen, Lesen genannt Toe Aktionen auf Tasten über mich Abschnitte von Websites. Daher ist Typografie ein Mittel, um den Benutzer so schnell und so echt wie möglich von Punkt A nach Punkt B zu bringen. So abhängig von der Website Ziel, ob es Verkauf, Abonnieren oder Informieren leicht zu absorbieren Topographie kann stark helfen oder behindern Region dieser Ziele, und schließlich, gut Sie ich Schriftart funktioniert gut über verschiedene Bildschirmgrößen, egal welches Gerät oder Website auftaucht auf der Typografie Masse lesbar bleiben. Einige Leute behaupten, dass Sarah-Fonds auf Smartphone-Bildschirmen schwieriger zu lesen sind, dann serifenfreie Telefone. Und in der Tat könnten Menschen mit Lese- oder Sehstörungen eine kleinere Serifensteuer schwerer zu lesen finden . Aber wenn eine serifenwebschrift gut komponiert ist, sollte sie leicht zu lesen sein, auch auf kleineren Schrauben, auch für Menschen mit Leseverfahren, die jemals gefunden haben, zu wählen. Denken Sie daran, dass der Zweck aus jedem Text auf Ihrer Website verwendet, um Ihre Benutzer zu helfen, ihre Ziele zu erreichen . Berücksichtigen Sie den gesamten Kontext, anstatt sich bei Ihrer Entwurfsentscheidung nur auf eine Reihe von Regeln zu verlassen. Bisher haben wir einiges über Farben und Typografie im Webdesign gelernt. Jetzt ist es an der Zeit, einen Blick auf die Bausteine einer typischen Website zu werfen. 16. Sektionen von Header, Branding, Navigation und Held: Beim Entwerfen von Websites müssen Sie sich an bestimmte Blöcke erinnern, die sie bauen. Einige von ihnen werden immer im Design vorhanden sein, aber einige von ihnen sind optional. Werfen wir einen Blick darauf, wie eine typische Website aufgebaut wird. Wir werden eine Website sezieren, beginnend von oben und nach unten. Der allererste Baustein einer Website wäre frisst Hutmacher. Es ist ein Container, der normalerweise die Brandon-Informationen wie das Logo und Slogan enthält, eine Art Navigationssystem und manchmal Kontaktinformationen, einschließlich Social Media Flügel. Viele Website-Designs, einschließlich Suchfeld in der Kopfzeile als auch. Typischerweise der Brandon auf der linken Seite und die Navigation auf der rechten Seite. Das optionale Kontaktinformations- und Suchsystem kann auch rechts, oberhalb oder unterhalb der Navigation angezeigt werden. Aber das ist nur eine Möglichkeit, den Hutmacher zu präsentieren. In einigen Designs, vor allem modernen Blutdesigns, der Heller Inhalt oft zentriert, wird der Heller Inhalt oft zentriert, so dass das Logo in der Mitte und die Navigation geht darunter, und er ist auch zentriert. Ich denke, es macht das Design noch besser organisiert und leichter zu verstehen. Was unter der Heidekraut geht, ist optional. Ich meine, du kannst etwas einschließen, das als Helden-Sektion bezeichnet wird. Also, was ist das? Grundsätzlich ist es eine Komponente, die wichtige Inhalte auf Ihrer Seite präsentiert. Sein Hauptzweck ist es, schnell die Aufmerksamkeit des Benutzers zu erregen und zu erklären, worum es auf der Website geht . Sie können es oft auf den Markteinblicken sehen, wo Sie aufgefordert werden, Ihre E-Mail-Adresse einzugeben um ein kostenloses e-Buch zu erhalten. Ooh, ein Bericht oder so etwas. In der Regel enthält Hero Abschnitt ein vollständiges Hintergrundbild oder ein Video mit überlagernden Inhalten, die Topographie groß und fett ist, und meistens finden Sie hier auch eine Art von Call to Action. Manchmal wird das vollständige Hintergrundbild zwischen den Header- und Heldenabschnitten als Reaktion auf Versionen des Designs geteilt , besonders bei Mobiltelefonen, kann ein Heldenbereich in etwas völlig anderes verwandeln. Das Hintergrundbild kann ersetzt oder sogar vollständig entfernt werden, wodurch das Design leichter wird. Eine andere Idee für den Heldenbereich ist, den Schieberegler zu verwenden , der ein Schaufenster von Bildern oder eine Kombination aus Bildern und Text ist. Diese Bilder sind interaktiv und ändern sich automatisch oder auf Benutzerinteraktion. jedoch Heutzutage beginnen Schiebereglerjedochüberflüssig zu werden. Zunächst einmal sind sie nicht zu s yo freundlich. Zweitens sind sie zu schwer und ein bisschen sinnlos auf den kleinen Smartphone-Bildschirmen. Aber der gesamte Heldenbereich ist wirklich optional. In einigen Fällen kann es tatsächlich den gesamten Zweck der Website behindern, und ich spreche von Blockdesigns. Eine Blondine dreht sich hauptsächlich um die Artikel, so dass Benutzer, die eine Website besuchen, mit dem, was er erwartet, hier zu finden , was genau die Artikel sind. Natürlich können die Artikel in einer interessanteren Weise präsentiert werden als nur Klappertext, aber wir werden über und über andere Abschnitte sprechen, die unter dem Helden im nächsten Video gehen . 17. Der Mittelpunkt und die unteren Abschnitte deines Website-Designs: Lassen Sie uns nun über die Kopfzeile und die Heldenabschnitte und stoppen Sie die Artikel und Seitenleisten . Diese Abschnitte werden nicht nur wegen Ihrer Designwahl anders aussehen, sondern vor allem wegen der Art der Website. Sie werden anders aussehen für eine blawg verschiedene kostenlose Corporate oder persönliche Website. Jährliche C-Variationen innerhalb dieser Konzepte, um die Dinge einfach zu machen. Wenn es sich nicht um ein Blawg handelt, sieht der Abschnitt unter dem Hero-Bild wie horizontale Kästchen aus, getrennt durch Inhalte und Farben, können sie Mixe-Off Icons, Textbilder und Links enthalten . Der Hauptgrund für die Erstellung dieser Abschnitte auf eine bestimmte Weise besteht darin, sie auf mobilen Geräten leicht lesbar zu machen . Der Schlüssel hier ist, um das Desktop-Design auf dem mobilen Design zu erstellen. Alles, was auf einem Smartphone gut aussieht, sollte bei Blockdesigns auch auf einem Desktop-Computer gut aussehen. Diese Abschnitte werden höchstwahrscheinlich die Artikel umfassen, und sie können auf verschiedene Arten präsentiert werden. Aber ein gemeinsamer Nenner ist, dass sie immer die Artikel Titel sie können auch vorgestellte Bilder präsentieren, blockieren Post Auszüge, Links und andere Informationen. Manchmal, wenn es sich um eine E-Commerce-Website, Artikel können Produktfotos enthalten, Beschreibungen Preise auf einer anderen Website Baustein, die neben den Abschnitten oder Artikeln sitzen kann , ist eine Seitenleiste. Eine typische Sidebar enthält Informationen, die in gewisser Weise die Hauptnachricht außerhalb der Website ergänzen. Es könnte die Autoren-Info des Blogs sein. Social-Media-Feed neueste Beiträge, Tags Aufruf zu Aktionen , verwandte Produkte, etc. Interessant an Seitenleisten ist, dass sie auf der rechten Seite der Seite auf der linken Seite oder auf beiden Seiten gleichzeitig sitzen können . Der letzte zentrale Baustein einer Website ist seine Fußzeilen sind im Laufe der Jahre aus einfachen einzeiligen Abschnitten gewachsen , die hauptsächlich das Urheberrecht in Folk enthalten. Sie haben sich zu anspruchsvollen Boxen mit vielen zusätzlichen Daten entwickelt. Fußzeilen und Kopfzeilen sind auf jeder Website gleich und enthalten Informationen, die sich nicht ändern. Egal, welche Seite der Benutzer gerade ansieht, sie sind ein One-Stop-Shop für alle wichtigen Informationen, die der Benutzer benötigen könnte. Deshalb sehen Sie in den Fußzeilenabschnitten Quick BIOS oder Über mich Links zu den wichtigsten Seiten oder aktuellen Angeboten. Eine aktuelle Commons Social-Media-Flügel oder ganze Unterabschnitte mit Social-Media-Feeds wie Instagram-Fotos. Fußzeilen sind in der Regel durch die Verwendung von Kontrast in Farben in Bezug auf die gesamte Website leicht zu unterscheiden . Wenn sie richtig gemacht werden, lassen sie die ganze Website professionell und sauber aussehen. Um die Dinge zusammenzufassen, enthält eine typische Website einen Header. Ein Held Abschnitt Abschnitte mit Artikeln, manchmal Seitenleisten und immer f Fußzeile. Jetzt, da Sie wissen, wie Sie eine Website strukturieren, ist es an der Zeit, sich Raster anzusehen. Sie könnten zunächst beängstigend aussehen, aber sie helfen, eine symmetrische und einfacher zu codierende Websites zu erstellen, also werfen wir einen kurzen Blick auf sie als nächstes. 18. Was sind Gitter und wie man sie nutzt: Also, was ist ein Gitter? Betrachten Sie es als ernsthafte unsichtbare Linien, die Ihnen helfen, Ihr Website-Design zu strukturieren und es symmetrisch und einfacher zu programmieren. Diese Linien sind eine große Hilfe beim Platzieren der Elemente Ihres Designs, nicht nur der Hauptcontainer. Ein Mangel an Ausrichtung ist sehr auffällig und erzeugt einen sinkenden Eindruck. Ein typisches Gitter besteht aus Einheiten, Dachrinnen und Säulen. Werfen wir einen kurzen Blick auf diejenigen, die ein 12-Säulen-Raster als Beispiel verwenden. Einheiten sind die grundlegenden Bausteine von jedem Gitter. Sie sehen aus wie lange, ein bisschen schmale Säulen mit etwas Platz auf jeder Seite von ihnen. Dachrinnen sind Räume, die auf der linken und rechten Seite jeder Einheit sitzen . Es spielt keine Rolle, ob es sich um ein Zentrum für rechte oder ganz linke Einheit handelt. Es gibt immer die gleiche Menge an Ghadir auf beiden Seiten von ihnen. Die Spalten haben den verwirrendsten Namen aus allen Körnungen Bausteine. Grundsätzlich sind sie Cluster von ähnlichen Inhalten, verteilt auf eine bestimmte Anzahl von Einheiten und bekam ihre. Das gebräuchlichste und vielseitigste Gitter ist ein 12-Säulen-Git Es ist ein großer Gemeinsamkeiten. Für Designer und Entwickler ist es der größte Vorteil, dass es leicht in verschiedene Gruppen von Einheiten unterteilt werden kann . beispielsweise Sie könnenbeispielsweisevier Spalten aus drei Einheitenclustern erstellen, sechs Spalten aus zwei Einheiten-Blastern usw. Das Schöne an diesem System ist, dass Sie Säulen miteinander mischen können. Zum Beispiel, auf der linken Seite, können Sie eine acht Einheiten Putz und auf der rechten Seite, eine vier Einheiten Cluster und so weiter. Der Trick hier besteht darin, das Gitter in Spalten zu teilen, deren einige immer 12 sein werden. Sie können Spalten auch horizontal erstellen, sozusagen. Ein Abschnitt kann in zwei Spalten unterteilt werden, ein anderer in vier, ein anderer in drei und so weiter. Ich würde raten, das Gitter die ganze Zeit zu benutzen. Anfangs mag es ein bisschen peinlich sein, aber nach einer Weile lieben Sie die Gitter. Sie werden Ihnen enorm helfen, zusammenhängende, ästhetisch ansprechende Designs zu schaffen . Wenn es einfacher für Sie ist, können Sie einfach eine PSD-Version eines 12-Säulen-Rasters herunterladen und es einfach im Inneren verwenden. Affinitäts-Designer. Sie können nur googeln 12 Spalten Körnung und Sie werden viele und viele Beispiele finden, aber ich denke, dass, um es ein bisschen besser zu verstehen, was unsere eigenen entwerfen würde, lassen Sie uns das im nächsten Video tun. 19. So entwirf ich dein eigenes Raster: Lassen Sie uns Designer öffnen und ein neues Dokument erstellen, das das Webprofil für die Seitenvoreinstellung verwenden wird . Ich werde mit Full HD gehen und ich werde die Creat Art an Bord Option überprüfen. Ich lasse alle anderen Optionen intakt. Bevor ich mit dem Erstellen von irgendetwas beginne, stelle ich sicher, dass in der U I design Fangvoreinstellung aktiviert ist. Dies wird mir helfen, ein großes Pantoffel-Faktenraster zu schaffen. Beginnen wir mit der Erstellung eines grundlegenden rissigen Winkels, der 1200 Pixel breit sein wird. Dies ist wichtig, weil wir Designs erstellen werden, die auf einem 1200 Pixel-Raster mit und 1200 Pixel sind die typischste mit zeitgenössischen Websites. Stellen wir sicher, dass das Rechteck genau in der Mitte der Kunst an Bord ist, und jetzt können wir die ersten Führer herausbringen. Unterdrückt das Steuerelement, sind Tastenkombination auf meiner Tastatur und bringen zwei Führungen heraus, die auf beiden Seiten aus dem Rechteck schnappen wird . Unser Raster wird den Bootstrap-Richtlinien folgen. Wenn Sie nicht wissen, was Bootstrap ist, lassen Sie mich Ihnen einfach schnell sagen, dass es ein Web-Entwicklungsframework ist, das es in der W W W W Welt weit angepasst ist. Es verwendet ein 12-Säulen-Gittersystem, bei dem alle Spalten 15 Pixel aus klopfen auf beiden Seiten haben . Deshalb werde ich jetzt das Rechteck von 12 mit diesem Transformationsfeld göttlichen, und ich werde sicherstellen, dass zum Transformationsbeginn auf der linken Seite sitzt. Danach subtrahiere ich 30 Pixel vom Ergebnis in Rechteck, da 15 Pixel plus 15 große Slips auf jeder Seite 30 Pixel betragen. Das letzte, was zu tun ist, ist, die Spalte um 15 Pixel nach rechts zu verschieben, und die Basiseinheit ist bereit. Lassen Sie uns nun auf der ersten Spalte nach rechts klonen, indem Sie die Strg-Taste gedrückt halten bis die geklonte Spalte mit dem Original einrastet. Danach müssen wir den Kerl nur um 30 Pixel nach rechts bewegen. Nun, wenn wir nur in der zweiten Spalte auf der rechten Seite klonen, wird der Designer uns den Abstand zwischen den Spalten zeigen und sie an Ort und Stelle einrasten, wenn die Entfernungen gleich sind. Alles, was noch zu tun ist, ist die Steuerung plus J auf der Tastatur zu drücken. Um die letzte Transformation zu duplizieren, die Klonen und Verschieben war. Wir müssen es noch neun Mal machen, bis wir alle 12 Spalten haben. Jetzt haben Sie Ihr ganz eigenes maßgeschneidertes 12-Säulenraster für ein Website-Design. Wenn Sie möchten, können Sie die Farbe von den Spalten ändern, ihre Transparenz und natürlich ihre Größe ändern. Sobald das Design in der Höhe wächst, wenn wir zum eigentlichen Entwurfsteil des Kurses übergehen, werden Sie dieses gleiche Raster in Aktion sehen. Aber bevor wir das tun, werfen wir einen Blick auf das, was gerade in Bezug auf Web-Design ist. Lassen Sie uns die neuesten Webdesign-Inspirationen entdecken. 20. 7 Webdesign-Trends, die die web regeln: In den nächsten Videos werden wir einen Blick auf moderne Webdesign-Trends werfen. Dies wird Ihnen helfen, das Design von Mustern zu verstehen, die Designer heutzutage folgen . Beginnen wir mit Menüs, die beim ersten Glenn's versteckt sind. Sie verstecken sich in der Regel hinter drei Chorizo NITEL Bars genannt Hamburger-Handbuch. Klicken Sie einfach auf sie, um ein vollständig geblitztes Navigationssystem zu sehen. Wenn Sie denken, dass dies eine Möglichkeit ist, die mobilen APP-Menüs nachzuahmen, haben Sie absolut Recht. Da immer mehr Menschen surfen im Web mit ihren Smartphones, macht es Santa, einige dieser Erfahrung auf die Desktop-Website zu übertragen. Die Entwürfe, einer der Vorteile der versteckten Navigation, ist, dass es mehr Platz auf der Hauptseite schafft. Es ermöglicht, Hauptinhalte stärker hervorzuheben. Ein weiterer Vorteil seines Namensmenüs ist die Tatsache, dass Sie es mit einem traditionellen Menü kombinieren können , wenn dieses Design es braucht. Wenn Sie viele Orte haben, an denen Sie den Benutzer mitnehmen können, können Sie einige davon unter einem Menü ausblenden und andere im sichtbaren Menü anzeigen. Design weise mobile Menüs oft verwendet Hintergrundfarben kontrastieren mit dem Gesamtfarbschema der Website, so dass es sich von den anderen abheben. Der Text verbindet Farbkontrast mit dem Hintergrund für eine einfache Navigation. Es scheint, als hätten Benutzer daran gewöhnt, Navigationssysteme als einfache drei Zeilen zu sehen, die gesammelt werden müssen, um zu sehen, was sich darunter versteckt. Deshalb können Sie frei mit Hamburger experimentieren. Manu ist in deinen Entwürfen. Zeitgenössische Benutzererfahrung verschiebt sich langsam von visuellen zwei Wörtern. Deshalb spielt die Typografie eine größere Rolle als je zuvor. Aber was bedeutet große und mutige Typografie? Nun, es bedeutet sicherlich nicht, dass Sie unbedingt nur fett formatierte Versionen der Schrift verwenden und sie auf die höchstmögliche Größe setzen müssen. Es bedeutet, dass viele Designs eine ordentliche Menge an Platz für sauberen und prägnanten Text direkt in der Mitte eines bestimmten Abschnitts haben. Das offensichtlichste Beispiel dafür sind natürlich die Handlungen des Helden. Mit großen Typografie über Spur Hintergrundbilder, die moderne UX verschiebt sich in Richtung Slogans, die sauber von Größe und nützlich sind, was bedeutet, dass in der Zukunft, Typografie ist Rolle im Design wird größer als je zuvor. Die Smartphone-Revolution hat sich zweifellos geändert. Die Art und Weise, wie Menschen mit der Internet-Welt interagieren. Aber es gibt einen Aspekt dieser Revolution, der oft weggelassen wird, und das ist wirklich wichtig für US-Designer. Bis vor kurzem wurde das Hauptbetriebssystem verwendet, um mit Microsoft Windows online zu gehen. Aber jetzt ist es Googles Android, und Google hat sich mit ihrem Designsystem, genannt Materialdesign und Materialdesign Licht kommen . Deshalb Designer, die eine nahtlose erstellen möchten, die Sie erleben, für die Benutzer Hand Material Design Visuals verwenden. Ideen in den Web-Designs. Materialdesign ist nicht weg in einem Hanson flachen Design. Es konzentriert sich auch auf die Einfachheit, fügt aber einen Hauch von Dreidimensionalität. Wenn Sie es in Ihren Designs verwenden möchten, werden Sie glücklich sein zu hören, dass es mit einem ganzen Spektrum von Ihnen y Tools, Farben, Topographie, Interaktionen usw. kommt , Farben , Topographie , Interaktionen . Sie können sie auf dem Material überprüfen, das ich schulde. Webseite. Es ist nicht zu leugnen, dass das schnellste Wachstum und die Entwicklung in der Welt mobiler Geräte ist . Es hat erhebliche Auswirkungen für Web entwickelt, um, mit dem Schwerpunkt auf das Wort Design. Visuelle Kommunikationsverschiebung, die durch das mobile APP-Design begonnen wird, macht seinen Weg zum Webdesign als auch, und alles begann mit Instagrams Logowechsel. Modernes Design verwendet oft mehr und hellere Farben. Zusammen hat er Grady INts zurück, aber sie sind Sendungen und etwas subtil. Sie werden oft mit einfachen flachen Designsymbolen und prominenter Typografie gebetet. Was ist interessant? Radiance machen seinen Weg Zehe-Icon und Logo-Design als auch. Aber wie immer, im Fall von Grady INTS, müssen Sie wirklich vorsichtig sein, nicht mit ihnen über Bord zu gehen. Glücklicherweise gibt es Online-Tools, die Ihnen helfen können, schön aussehende Zutaten für Ihre Web-Designs zu erstellen . Das beste Beispiel ist ein Werkzeug namens U I Grady ints dot com. Hier finden Sie eine fantastische Sammlung von schönen Grady INTS, zusammen mit den Farbcodes für Easy Implementation, eines der am schnellsten wachsenden Elemente im Website-Design. Ost. Die Verwendung off-Video von Vollbild-bewegten Bildern oft als Hintergründe anstelle von Bildern verwendet , um Pop-ups und eingebettete Videos von Social Media Video ist ein Muss, wenn es um Inhalte geht . Die am weitesten verbreitete Verwendung von Video ist, dass es als Hintergrund in den Hero-Abschnitten von Websites angezeigt wird . Der beste Weg, Video in diesem Format zu verwenden, ist es, die Nachricht zu ergänzen und einen Call to Action, die über das Video gestellt werden. Aber manchmal, besonders auf persönlichen Websites, sind Videos von jeglichen visuellen Elementen frei. Sie sind freundlich aus Präsentation vom Eigentümer der Website. Es gibt auch Videos, die in gewisser Weise Standbilder nachahmen. Die Bewegung des Geländes ist begrenzt. Stellen Sie sich vor, Wind weht in den Bäumen, so dass sie perfekt als Hintergrundvideos, aber fügte hinzu, dass extra besondere etwas, um das Design, ohne abzulenken. Internet sagt, dass Video heutzutage König ist. Es ist durchaus möglich, dass an einem gewissen Punkt Ihres Designs Karriere gebeten wird, eine Website zu entwerfen, die Video in irgendeinem Format verwenden wird. Deshalb ist es eine wirklich gute Idee, diesen Trend genauer zu betrachten. Immer mehr Designer akzeptieren die Tatsache, dass sie wirklich darüber nachdenken müssen, dass ihre Designs häufiger auf Smartphone-Bildschirmen als auf Laptops angesehen werden. Das bringt eine totale Verschiebung in der Entwicklung ihrer Entwürfe mit sich. Die Desktop-Version der Website wird Onley, ein Derivat seines mobilen Originals. Dieser Designer muss ihn oder sich selbst fragen. Eine grundlegende Frage wird es nur Smartphone gut aussehen. Aber die Frage kann sich in Zukunft mit der Entwicklung von Wearables ändern. Vielleicht ist es Zeit, uns zu fragen, es auf einer Smartwatch gut aussehen wird? Was uns zur letzten Miete auf unserer Liste bringt, die Karten, die Sie entwerfen. Die Idee hinter Karten ist, den Inhalt in kleine Behälter zu stopfen, um es geräteübergreifend zu machen . Von Smartwatches bis hin zu großen Desktops. Jeder Container ist ein Cluster von Informationen über eine bestimmte Idee. Die Schnittstelle ist vereinfacht und leicht verständlich. Dieser Ansatz wird auch in vielen modernen Blog's verwendet, wo ein Artikel auf der Zielseite ein eigenes Modul hat. Dies sind die sieben wichtigsten Trends im Webdesign heute. Es ist eine gute Idee, sich dessen bewusst zu sein, da es sich nicht nur um Visuals handelt, sondern vielmehr um ganze Konzepte von effektiver Inhaltsbereitstellung an die Benutzer. Als nächstes werden Sie einen Blick auf ein paar Orte rund um das Web werfen, wo Sie einige großartige Web-Design-Inspirationfinden können Web-Design-Inspiration 21. Wo finde ich die richtige Inspiration für dein nächstes Design: In diesem Video wir einen Blick auf ein paar Orte rund um das Web, wo Sie große Inspiration für Ihr nächstes Web-Design-Projekt finden . Die erste Website, die ich empfehlen würde, heißt ein Wort dot com mit einem dreifachen Doppel Sie für www buchstabiert . Hier finden Sie viele verschiedene Designbeispiele, die in Kategorien wie Illustration, Corporate Bloggen usw. gesammelt wurden Corporate Bloggen . Wenn Sie ein bestimmtes Design mögen, können Sie die Quell-Website besuchen und einen Blick darauf werfen, wie sie aufgebaut sind. Was, wenn überhaupt, Trends gibt es folgende und einfach lernen von der besten zweiten Website, die ich empfehlen würde ist ein WordPress-Theme Marktplatz namens Thema Wald dot net. Hier finden Sie nicht nur WordPress-Themes, sondern auch HTML-codierte Seitendesigns. Es ist ein riesiges Repository aus verschiedenen Designs Für Ihre Inspiration. Sie können aus vielen verschiedenen Kategorien wählen, und Sie können auch eine Vorschau anzeigen, wie ein bestimmtes Design in der realen Welt funktioniert. Sie können auch Webdesign inspiration dot com hier besuchen, auch nur bestimmte Tags und Kategorien, nach denen Sie ihre Designs sortieren möchten. Es ist eine große Ressource aus verschiedenen Designs. Ich denke, es ist die Vielfalt, die der wichtigste Aspekt aus diesem Web-Design-Repository viele und viele von Web-Design-Inspiration Repositories rund um das Web ist. Wenn diese drei sind nicht genug für Sie, obwohl ich denke, dass für den Anfang sie gut tun werden, können Sie nur Google Web-Design, Inspiration und immens sich in der Web-Design-Welt. Ich denke, dass Sie jetzt gerade genug keine Liste haben, um mit Ihren eigenen Entwürfen zu beginnen. Sie kennen die Prinzipien, die Sie kennen, die Trends und wo Sie nach Inspiration suchen können. Der nächste Teil besteht darin, Affinity Designer zu verwenden, um Ihre Ideen zum Leben erwecken zu lassen. 22. Jedes Website-Design braucht Gerüste: aus einem typischen eifrigen Designern Sicht. Das Erstellen eines Drahtrahmens für ein Website-Design ist ebenso langweilig wie redundant. Nun, das ist nicht wahr. In der Tat kann ein Drahtrahmen dabei helfen, Ihren Workflow enorm zu beschleunigen, und es kann Ihnen viel Zeit sparen. Viele Ideen, die in Ihrem Kopf großartig erscheinen, wenn Sie sie sich vorstellen, neigen dazu, schlecht aussehen wenn sie auf einem Computerbildschirm gestellt werden. Und vertrau mir, ich weiß das aus Erfahrung, aber was ist ein Drahtrahmen, und warum mache ich so eine große Sache darüber? Drahtrahmen sind schematische Versionen von Websites, die Ihnen bei der visuellen Darstellung der Website-Bausteine helfen . Es gibt eine Tonne aus Plug Ins, Online-Tools und Ressource ist bezahlt und kostenlos, dass Sie bei der Erstellung von Drahtrahmen zu helfen. Aber in nur einer Sekunde werden wir unsere eigene Drahtrahmen-Bibliothek oder zumindest die wesentlichen Elemente eines Drahtrahmens entwerfen , und dann werden wir sie in unsere Asset-Bibliothek importieren. Aber zuerst, lassen Sie uns die Idee des Drahtrahmens und seiner praktischen Anwendung sezieren. Zunächst möchten Sie vielleicht einfache Boxen erstellen, die den Website-Elementen entsprechen würden. Es ist eine gute Idee, es gegen eine gute Sie bereits vertraut mit dieser vorläufigen Phase ist der grundlegendste Weg weg. Erstellen einer Website Gerüst Denken Sie daran ist ein einfaches Doodle, das Ihnen zeigen soll ob das, was in Ihrem Kopf ist, gut auf Papier oder Bildschirm aussehen wird. Die typischsten Boxen würden eine Brandon Element Navigationshelden Abschnitt, Bild, Banner, Fußzeile usw. darstellen , Bild , Banner , Fußzeile . Der nächste Schritt wäre, um die Informationshierarchie mit dem Typ zu erstellen. In diesem Stadium ist Ihre Schriftart nicht so wichtig wie die Verwendung unterschiedlicher Fondsgrößen, um die Unterschiede in der Bedeutung der Website-Elemente zu zeigen . Regel derRegelwerden die wichtigsten Elemente für die Verwendung in einer größeren Schriftgröße dargestellt, und die weniger wichtigen Elemente werden mit einer kleineren Schriftgröße dargestellt. nächste Schritt bei der Betonung der Bedeutung der Website-Elemente ist die Verwendung verschiedener Grautöne. Die allgemeine Regel besagt, dass dunklere Farben mawr bedeuten. Wichtige Elemente und hellere Farben bedeuten weniger wichtige Elemente. So sieht ein typischer Drahtrahmen aus. Ich denke, es ist eine gute Idee, eine eigene Drahtrahmen-Bibliothek zu haben, damit Sie sie immer verwenden können, wenn Sie eine Website entwerfen. Affinity Designer ermöglicht es Ihnen, Ihre eigenen Drahtrahmenelemente zu erstellen und sie in separate Gruppen von Assets zu platzieren . Werfen wir einen Blick auf den Prozess des Zusammenbaus dieser Elemente in Affinität. Designer. 23. Aufbau deines eigenen wireframe Designer: Wenn Sie Ihr eigenes Drahtrahmensystem erstellen, sollten Sie mit den Elementen beginnen, die Sie wahrscheinlich in einem typischen Webdesign-Szenario verwenden . Ich meine, wenn du willst, kannst du ein Glaubensbekenntnis, all die Elemente, die du dir vorstellen kannst. Aber ich denke, wenn Sie zuerst die wesentlichen Elemente erstellen, haben wir eine großartige Basis für den Bau und die Erweiterung von Drahtrahmen. Aber was sind diese wesentlichen Elemente? Ich denke, wir werden mit einer Marke in Block eine Navigation beginnen, zusammen mit einem Hamburger-Menü, einem Helden Abschnitt Block rühmen, einem horizontalen Text und Hintergrund-Teiler. Icahn Sidebar und eine Fußzeile. Heutzutage ist es vielleicht eine gute Idee, aus Gründen, mit denen Sie bereits vertraut sind, einen Videodraht von Elementen zu erstellen . Lassen Sie uns also unsere wesentliche Drahtrahmen-Bibliothek bauen. Ich möchte, dass Sie es als Ausgangspunkt für den Bau Ihrer eigenen Bibliothek betrachten. Ich möchte, dass Sie den Prozess und die Logik dahinter lernen. Dies ermöglicht es Ihnen, Ihre eigenen umfangreichen Drahtrahmen zu erstellen. Ich habe bereits ein einfaches Full-HD-Dokument erstellt, aber ehrlich gesagt, alle Dokumente, Zeichen, die mir erlauben würden, Ihr Kunstwerk bequem zu erstellen, werden in Ordnung sein. Beachten Sie jedoch, jedoch, dass ich mich nicht dafür entschieden habe, ein Kunstboard für diese Art von Skizzenarbeit zu erstellen. Ich glaube nicht, dass ein Kunstbrett notwendig ist. Ich werde auch sicherstellen, dass die U I Snap in voreingestelltem Osten eingeschaltet ist. Ich werde damit beginnen, einen Bildblock zu erstellen. Dieser wird in vielen Elementen verwendet werden, also denke ich, dass es ziemlich logisch ist, damit zu beginnen. Ich werde nur das Rechteck-Werkzeug greifen und ein Rechteck im Transformationsfenster erstellen. Ich werde 16 für mit und 94 Höhe eingeben, und ich tue dies, weil 16 mal neun Verhältnis das typischste Bildschirm-Seitenverhältnis ist. Und Bilder auf einer Website werden in der Regel auf diese Weise angezeigt, ebenso wie die Videos. Natürlich ist es viel zu kleine Röhre verwendbar, also werde ich ihre Proportionen im Transformationsfeld betrachten und die Größe vom Rechteck vergrößern . Aber die Tatsache, dass wir mit den 16 mal neun Pixel begonnen haben, wird das neue Rechteck Feind dieses 16 mal neun Seitenverhältnis machen . Ich möchte nicht, dass wir einen Schlaganfall haben, aber ich möchte ein ziemlich dunkleres Grau haben, Phil, sobald es erstellt ist, werde ich zwei sich schneidende Linien zeichnen, die darauf hinweisen, dass dies tatsächlich ein Bildelement ist. Also werde ich den Stift Tal greifen und ihn in den Linienzeichnungsmodus stellen. Ich werde Freude, Einfache Linie, die einen einen Punkt weißen Strich haben wird. Und kein Phil, natürlich, ich lasse die Deckkraft auf etwa 25 bis 30% fallen. Schließlich kopieren wir die Zeile und stützen sie zurück in. Dann lassen Sie es horizontal drehen, indem Sie das Kontextfenster verwenden. Alles, was noch zu tun ist, ist es in unsere Asset-Bibliothek zu bringen. Übrigens, wenn Sie die Asset-Bibliothek nicht aktiviert haben, gehen Sie einfach zur Ansicht und dann Studio und wählen Sie Assets im Assets-Bedienfeld aus. Ich erstelle eine neue Kategorie, die ich als Drahtrahmen umbenennen werde. Jetzt kann ich einfach das Bild auswählen und aus dem Panel-Menü auswählen und aus der Auswahl beginnen, ihre Bibliothek zu bauen. Und genau so haben wir das erste Element erstellt, und wir haben bereits begonnen, die Bibliothek zu bauen. Lassen Sie uns jedoch im nächsten Videofortfahren jedoch im nächsten Video 24. Wir bauen die Bibliothek weiter: Ich werde damit beginnen, ein Video Frau Ring Element zu erstellen. Und dafür werde ich das Bildelement klonen und die inneren Linien loswerden. Lassen Sie uns nun ein Play-Schaltflächen-Symbol dafür erstellen. Lassen Sie uns ihr Dreieck Werkzeug greifen und erstellt Dreieck, dass wir haben, um zu drehen und wieder Größe ein wenig. Wenn das erledigt ist, wird es einen weißen Phil geben. Legen Sie die Deckkraft auf 25% ab und richten Sie sie am Rechteck aus. Lassen Sie uns diese Jungs gruppieren, damit wir sie jetzt zu unserer Drahtrahmen-Bibliothek hinzufügen können, genau wie wir das Bildelement hinzugefügt haben. Jetzt werden wir ein Bild und Text kombiniertes Element erstellen. Auch hier werde ich das Bild wiederverwenden, das ich bereits habe, aber ich werde einen Titel und Auszüge hinzufügen. Dafür werde ich das Rahmentext-Werkzeug greifen und ein Textfeld zeichnen, das als Zweig wie das Bild sein wird. Ich werde keinen Text in korrigieren, aber ich werde stattdessen die Option „Füllstoff einfügen“ verwenden. Natürlich ist es eine gute Idee, den Titel wie eine echte Überschrift aussehen zu lassen, also werde ich die Schriftart zusammen mit ihrer Größe und ihrem Stil ändern. Ich werde es jetzt klonen und die Frontfamilie ändern, Sonnys Stil und die Führung auch. Also mit diesem Teil kann mehr wie ein Blawg Post Auszug aussehen. Der Vorteil, dieses Element auf diese spezifische Weise zu erstellen, besteht darin, dass ich es nicht ändern kann, nachdem ich es in eine Gruppe und dann in ein Asset verwandelt und es dann auf die Seite gezogen habe, die Größe nicht ändern und die Software die Textrahmen mit Text füllen lassen kann. Und trotzdem, wenn ich möchte, kann ich die Größe der Textrahmen ändern, sowohl den Titel als auch den Textauszug verkleinern oder erweitern, und das ist ziemlich praktisch. Nächstes Element wird erstellt ist, dass sie wieder Logo. Ich werde das Bildelement verwenden, aber dieses Mal werde ich es in ein Quadrat verwandeln. Ich füge auch ein Wort auf der rechten Seite hinzu. Jetzt werde ich diese Kerle gruppieren und sie in einen Vermögenswert verwandelten . Als nächstes wird ein Navigationssystem zu erstellen. Nun, das ist so am einfachsten in einem Stück Texteditor, dann duplizieren. Sie machen Spaß, für das Manual Inc zu verwenden, sollte nicht zu groß noch mutig sein. Lassen Sie uns auch ein Hamburger-Menü erstellen. Und das sind diese drei horizontalen Linien, die den Hauptmann abdecken. Erinnern Sie sich? Ok, großartig. Lassen Sie uns greifen den Stift tal und dann stellen Sie sicher, dass es im Linienmodus hat eine einfache Linie erstellt , die einen Zwei-Punkt jemand zu dunklen Strich und keine Phil haben wird. Wenn das erledigt ist, duplizieren wir die Zeile zweimal und verwandeln unser Hamburgerhandbuch in einen Vermögenswert. Unser nächster Auftrag ist die Schaffung eines Heldenabschnitts, und dies wird uns tatsächlich die Möglichkeit geben, eine ziemlich große Flexibilität zu nutzen wenn es darum geht, Assets innerhalb eines Designers zu erstellen. Ich war mit der Ausleihe des Bild-Asset und in großen stecken, und es ziemlich viel. Als nächstes erstellen wir eine große und fett gedruckte Überschrift, die im Kontrast geschrieben wird, in heller Farbe, gefolgt von etwas kleinerem Textkörper. Der letzte Akzent hier wäre, einen Aufruf zur Aktion hinzuzufügen. Lassen Sie uns also eine Schaltfläche mit dem Rechteck-Werkzeug und dem Type-Werkzeug erstellen, natürlich, das die Schaltflächenelemente gruppiert und dann alte Stücke mit Ausnahme des Hintergrunds gruppiert , aber eine Linie alles schön in die Mitte des Hintergrundbildes. Wenn wir wissen, Gruppe alle diese Elemente schwächen, verwandeln Sie sie in einen Helden Drahtrahmenelement, aber wenn wir sie getrennt halten, können wir sie auf die Vermögenswerte separat eingeben, was uns erlaubt, ein Held Asset und separate Elemente wie eine untere Überschrift jedes Stück aus Körper besteuert. Nun, das ist ziemlich praktisch, findest du nicht? Mit all diesen Elementen können wir nun ein Feature-Element erstellen. Sie können das Bild-Asset auf die Einfügeplatte ziehen, dann die Überschrift und deren Körper besteuert werden. Jetzt ist es nur eine Sache aus, das Bildelement in ein Quadrat zu drehen und in der Vorderseite der Überschrift und des Körpers zu ändern besteuert, um dies so zu machen, während Rahmenelement funktioniert. - Nein , wir haben so ziemlich alle Elemente, die wir brauchen, um einen Website-Drahtrahmen zusammenzustellen. Gelegentlich müssen wir das Rechteck-Werkzeug verwenden, um eine Ebene durch Erteilung zu erstellen, und wenn Sie möchten, können Sie rechteckige Drahtrahmenelemente erstellen. Aber ich werde mich an die wesentlichen Blöcke halten und Hintergründe erstellen, während ich gehe. Also lasst uns das wirklich machen. Werfen wir einen Blick auf das Hinzufügen von Draht aus Elementen, um eine schematische Vision unserer Website zu erstellen 25. So verwenden Sie die Assets zum Erstellen eines wireframe: Sobald alle Ihre Assets erstellt sind, sind sie bereit und warten darauf, dass Sie sie verwenden, um Ihren Drahtrahmen zu bauen. In diesem Video werden wir einen Blick darauf werfen, wie Sie Ihre Assets praktisch verwenden, um einen Drahtrahmen zu erstellen. Der Prozess ist super einfach und angenehm. Ich würde empfehlen, ein Gitter als Basis für Ihren Drahtrahmen zu verwenden. Es empfiehlt sich, beim Erstellen eines Drahtrahmens ein echtes Webdesign-Szenario zu simulieren. jedoch Wenn es sichjedochum einen sehr, sehr vorläufigen Drahtrahmen handelt, wenn Sie nur das Gefühl vom Projekt bekommen möchten, müssen Sie das Gitter nicht unbedingt verwenden. Beginnen wir mit der Erstellung des Header-Abschnitts. Ich bringe die Brandon- und Navigationsblöcke über und positioniere sie richtig, so dass eine ziemlich große Menge an Leerraum oben und unten bleibt. Nein, es ist schnell erstellen Sie einen hellen Hintergrund für unsere Hatter zuerst alle Gruppierung der Kopfzeilenelemente und initialisiert die Option Einfügen hinter Auswahl in der Symbolleiste. nun anfange, Wenn ichnun anfange,einen aufrechten Winkel zu erstellen, der sich über die ganze Seite erstreckt, können Sie sehen, dass er hinter den schwereren Elementen eingefügt wird. Das letzte, was zu tun ist, wäre, alles gut an der mittleren Gruppe alle Elemente auszurichten und sie in Header Nr. umzubenennen. Lassen Sie uns den Heldenbereich der Website betreten. Wahrscheinlich wird dieses Asset etwas Feinabstimmung benötigen. Zum Beispiel möchten Sie erweitern oder kontrahieren. Vielleicht möchten Sie die Position der Elemente und vielleicht auch die Größe des Telefons ändern . Das Schöne an der Arbeit mit Assets in effin in Designer ist, dass Sie einfach Elemente innerhalb von Gruppen auswählen können , indem Sie darauf doppelklicken und sie so ändern, wie Sie normale Objekte ändern würden . Ich beginne den nächsten Abschnitt, indem ich eine weitere Überschrift und eine Unterüberschrift hinzufüge. Diese Jungs benötigen möglicherweise auch etwas Tweeting, je nachdem, wie Sie sie früher erstellt haben. Möglicherweise müssen sie ihre Fondsfarbe geändert werden. Größe angepasst. Vielleicht wollen wir die Ausrichtung von links zu Mitte dort wirklich flexibel und effektiv ändern. Wenn Sie sich entscheiden, dass Sie sie möglicherweise in der Frame-Assets-Bibliothek Ihrer Frau benötigen, können Sie sie einfach gruppieren und zum Assets-Panel hinzufügen. Ja, Sie können verschiedene Assets aus bereits vorhandenen Assets erstellen. Niemand springt einige vorgestellte Artikel. Ich werde zwei Zeilen mit vier Elementen in jeder von ihnen erstellen Ich werde in einem der vorgestellten Artikel bringen und es optimieren, bis es genau so aussieht, wie ich es wollte. Und da ich vier hintereinander haben möchte, darf ein Artikel drei Spalten unseres großen nicht überschreiten. Sobald es erstellt ist, werde ich es einfach nach rechts duplizieren und dann alle einmal nach unten versuchen. Schließlich werde ich alle Stücke auswählen, gruppieren und einen Hintergrund unter ihnen zeichnen, indem ich die gleiche Technik wie mit dem Hintergrund für die Kopfzeile verwende. Jetzt kann ich diesen Abschnitt umbenennen und ihn so etwas wie vorgestellten nennen. Aber Sie können es alles benennen, was diesen Abschnitt leicht erkennbar machen würde. Der nächste Abschnitt, den wir erstellen können, könnte ein von unserer Blawg-Art eines Abschnitts sein. Also lassen Sie uns in der Abschnittsüberschrift und angepasst von ihm für den Block rühmt, können wir entweder die vorgestellten Elemente, Elemente oder blawg Artikel verwenden . Dies ist nur ein weiterer Beweis dafür, wie flexibel dieses Programm ist. Ich meine, Sie können den vorgestellten Gegenstand greifen, das Bild auf der linken Seite und den Text auf der rechten Seite machen, während int als Asset beibehalten wird. Ich möchte nur Features in jeder Zeile blockieren müssen, so dass ein Beitrag sechs Spalten nicht überschreiten kann. Ich will auch die Prahle