[{"data":1,"prerenderedAt":76},["ShallowReactive",2],{"i-material-symbols:language":3,"i-material-symbols:person":8,"i-mdi:instagram":10,"i-mdi:youtube":12,"i-ri:linkedin-fill":14,"i-ri:twitter-x-line":16,"i-ri:facebook-fill":18,"post-pattern-library":20,"i-material-symbols:person-outline":68,"i-material-symbols:calendar-month":70,"i-mdi:schedule":72,"i-simple-icons:xing":74},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12.013 2t3.875.788t3.175 2.15t2.15 3.175t.787 3.875t-.787 3.887t-2.15 3.188t-3.175 2.15t-3.875.787t-3.888-.787M12 19.95q.65-.9 1.125-1.875T13.9 16h-3.8q.3 1.1.775 2.075T12 19.95m-2.6-.4q-.45-.825-.787-1.713T8.05 16H5.1q.725 1.25 1.813 2.175T9.4 19.55m5.2 0q1.4-.45 2.488-1.375T18.9 16h-2.95q-.225.95-.562 1.838T14.6 19.55M4.25 14h3.4q-.075-.5-.112-.987T7.5 12t.038-1.012T7.65 10h-3.4q-.125.5-.187.988T4 12t.063 1.013t.187.987m5.4 0h4.7q.075-.5.113-.987T14.5 12t-.038-1.012T14.35 10h-4.7q-.075.5-.112.988T9.5 12t.038 1.013t.112.987m6.7 0h3.4q.125-.5.188-.987T20 12t-.062-1.012T19.75 10h-3.4q.075.5.113.988T16.5 12t-.038 1.013t-.112.987m-.4-6h2.95q-.725-1.25-1.812-2.175T14.6 4.45q.45.825.788 1.713T15.95 8M10.1 8h3.8q-.3-1.1-.775-2.075T12 4.05q-.65.9-1.125 1.875T10.1 8m-5 0h2.95q.225-.95.563-1.838T9.4 4.45Q8 4.9 6.912 5.825T5.1 8\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M9.175 10.825Q8 9.65 8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12t-2.825-1.175M4 20v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"currentColor\" d=\"m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"currentColor\" d=\"M6.94 5a2 2 0 1 1-4-.002a2 2 0 0 1 4 .002M7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"currentColor\" d=\"M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"currentColor\" d=\"M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z\"\u002F>",{"postType":21,"id":22,"author":23,"date":26,"modified":27,"title":28,"slug":29,"seoTitle":30,"seoDescription":31,"excerpt":32,"trimmedExcerpt":33,"content":34,"readingTime":35,"featuredImage":36,"postCategory":41,"relatedPosts":46},"post",34295,{"id":24,"name":25},"author-0301142015","Canto","2020-04-23T18:00:10","2025-12-10T13:56:16","Pattern Library – 3 ausführliche Möglichkeiten, wie Sie Ihre Webseite optimieren können","pattern-library","Pattern Library – 3 Tipps für Ihre optimierte Webseite","Eine Pattern Library führt visuelle Elemente einer Webseite auf und enthält Angaben zu ihrem visuellen Aufbau. Lesen Sie hier, wie Sie sie optimal nutzen.","Die Implementierung einer Pattern Library hat Auswirkungen auf die ästhetische Konsistenz einer professionellen Webseite. Die folgenden drei Grundprinzipien müssen Sie für die richtige Handhabung einer Pattern Library verstehen. Was ist eine Pattern Library? Eine Pattern Library, auch Musterbibliothek genannt, ist eine vollständige Aufstellung präziser Informationen, wie Designelemente auf einer Webseite dargestellt werden. Im Wesentlichen handelt […]","Die Implementierung einer Pattern Library hat Auswirkungen auf die ästhetische Konsistenz einer professionellen Webseite. Die folgenden drei Grundprinzipien müssen Sie...","\u003Cp class=\"wp-block-paragraph\">Die Implementierung einer Pattern Library hat Auswirkungen auf die ästhetische Konsistenz einer professionellen Webseite. Die folgenden drei Grundprinzipien müssen Sie für die richtige Handhabung einer Pattern Library verstehen.\u003C\u002Fp>\u003Ch2 class=\"wp-block-heading\" id=\"toc-1--was-ist-eine-pattern-library\">Was ist eine Pattern Library?\u003C\u002Fh2>\u003Cp class=\"wp-block-paragraph\">Eine Pattern Library, auch Musterbibliothek genannt, ist eine vollständige Aufstellung präziser Informationen, wie Designelemente auf einer Webseite dargestellt werden. Im Wesentlichen handelt es sich dabei um einen Bauplan für Designelemente einer Benutzeroberfläche. Visuell setzt sich eine Webseite aus verschiedenen Designelementen zusammen, die durch die Musterbibliothek vorgegeben sind.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Ein gutes Beispiel für eine Musterbibliothek wäre ein Film. Jeder Film besteht aus verschiedenen Elementen, wie z.B. Kulissen, Schauplatz, Textzeilen, Requisiten und Tageszeit. All diese Elemente sind im Drehbuch aufgeführt. Es enthält das Layout aller Elemente, aus denen sich der Film zusammensetzt. Um zu verstehen, wie ein Film auf der Leinwand aussehen soll, muss man das Drehbuch heranziehen. Eine Pattern Library ist wie das Drehbuch für die Darstellung einer Webseite. Die Designelemente entsprechen hierbei den Texten, Requisiten und Kulissen.\u003C\u002Fp>\u003Cfigure class=\"wp-block-image aligncenter wp-image-44471 size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"599\" height=\"400\" src=\"\u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191900\u002FPattern-library_DE-1.jpg\" alt=\"Zwei männliche Kollegen und eine weibliche Kollegin arbeiten mit verschiedenen Computern an der Erstellung von Grafiken.\" class=\"wp-image-44471\" srcset=\"\u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191900\u002FPattern-library_DE-1.jpg 599w, \u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191900\u002FPattern-library_DE-1-450x301.jpg 450w\" \u002F>\u003Cfigcaption class=\"wp-element-caption\">Pattern Libraries gleichen einem Filmdrehbuch dahingehend, dass sie Anleitungen für Projekte geben.\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 class=\"wp-block-heading\" id=\"toc-2--machen-sie-ihre-musterbibliothek-zentral-verf-gbar\">Machen Sie Ihre Musterbibliothek zentral verfügbar\u003C\u002Fh2>\u003Cp class=\"wp-block-paragraph\">Eine zentrale Musterbibliothek ist für Webdesigner und andere am Aufbau der Webseite beteiligte Teammitglieder von großem Vorteil. Dieser Schritt trägt zur Wahrung der Konsistenz bei und reduziert zusätzlichen Zeitaufwand. So lassen sich gemeinsame Bibliotheken erstellen, auf die ganze Teams zugreifen und aus denen sie Elemente ziehen können. Über eine zentrale Pattern Library lassen sich alle neu erstellten Logos oder sonstigen Designs mit allen Beteiligten teilen. Sie steht auch danach für alle Projekte zur Verfügung.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Die Vorteile einer zentralen Musterbibliothek lassen sich am besten anhand eines Beispiels verdeutlichen: Ein Teammitglied entwickelt eine dynamische neue farbige Schriftart, die sich hervorragend für die aktuelle Webseite eignet. Ohne eine zentrale Musterbibliothek wäre diese Schrift nicht für jeden zugänglich. Unter Umständen müssten andere Abteilungen sie sogar neu erstellen. Dank der gemeinsamen Bibliothek ist gewährleistet, dass jeder sie nutzen kann und die Webseite kann die Schriftfarbe präzise und einheitlich darstellen.\u003C\u002Fp>\u003Cfigure class=\"wp-block-image aligncenter wp-image-44473 size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"\u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191900\u002FPattern-library_DE-2.jpg\" alt=\"Zwei Mitarbeiterinnen sitzen an einem Tisch neben einem Laptop und überprüfen Grafiken für eine Pattern Library.\" class=\"wp-image-44473\" srcset=\"\u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191900\u002FPattern-library_DE-2.jpg 600w, \u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191900\u002FPattern-library_DE-2-450x300.jpg 450w\" \u002F>\u003Cfigcaption class=\"wp-element-caption\">Zentralisieren Sie Ihre Pattern Library, um alle Beteiligten auf dem aktuellen Stand und informiert zu halten.\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 class=\"wp-block-heading\" id=\"toc-3--machen-sie-ihre-musterbibliothek-zug-nglicher\">Machen Sie Ihre Musterbibliothek zugänglicher\u003C\u002Fh2>\u003Cp class=\"wp-block-paragraph\">Damit Ihr gesamtes Unternehmen eine Pattern Library über alle Abteilungsgrenzen hinweg nutzen kann, muss sie hoch funktional und für alle Kompetenzstufen zugänglich sein. Um das zu realisieren, gibt es viele verschiedene Möglichkeiten.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Die erste Möglichkeit besteht in der Implementierung von Systemen, mit denen die Entscheidungen für die Teammitglieder grundlegender werden. Fällt man beispielsweise die Entscheidung für die Erstellung eines Entwurfs anhand von Vorlagen und gegen eine komplexe Kodierung, dürfte das ganze Projekt langfristig reibungsloser ablaufen.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Eine weitere Maßnahme für besseren Zugang besteht darin, bestimmte Anwendungen und Funktionen der Musterbibliothek frei wählen zu können. Damit könnte man die Optionen für die Beteiligten auf Elemente oder Projekte eingrenzen, die ihnen vertraut sind oder an denen sie derzeit beteiligt sind.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Angenommen, sie entscheiden sich für ‘medizinische Güter’, wählen dann ‘Geschäftsvereinbarungen’ und anschließend eine Komponente aus diesem Unterabschnitt, wie z.B. ‘Kreditkartenauthentifizierung’. Den Weg, den sie auf der Website genommen haben, könnte man ihnen visuell veranschaulichen und skizzieren.\u003C\u002Fp>\u003Cfigure class=\"wp-block-image aligncenter wp-image-44475 size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"\u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191900\u002FPattern-library_DE-3.jpg\" alt=\"Ein junger Mann recherchiert Bilder und Designs für eine Pattern Library an einem PC.\" class=\"wp-image-44475\" srcset=\"\u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191900\u002FPattern-library_DE-3.jpg 600w, \u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191900\u002FPattern-library_DE-3-450x300.jpg 450w\" \u002F>\u003Cfigcaption class=\"wp-element-caption\">Schaffen Sie mit Ihrer Musterbibliothek einen besseren Zugang.\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch2 class=\"wp-block-heading\" id=\"toc-4--konsistentes-webseitendesign-mit-der-musterbibliothek-sicherstellen\">Konsistentes Webseitendesign mit der Musterbibliothek sicherstellen\u003C\u002Fh2>\u003Cp class=\"wp-block-paragraph\">Wenn eine Webseite größer wird, werden ihre einzelnen Seiten erweitert und ihre Unterseiten weiterentwickelt. Mit jeder neuen Ergänzung und Unterseite wächst auch das Risiko möglicher ästhetischer Abweichungen. Das liegt daran, dass die verschiedenen Erweiterungen in der Regel von unterschiedlichen Abteilungen vorgenommen werden. Eine Webseite muss jedoch auf allen ihren Seiten durchgängig konsistent bleiben, um ihr professionelles Erscheinungsbild zu wahren.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Eine Musterbibliothek stellt eine Lösung für dieses Problem dar, da sie es Unternehmen ermöglicht, sämtliche Designelemente einer Seite zu kopieren und sie problemlos in alle neu erstellten Teile einer Webseite zu übernehmen. Damit ist gewährleistet, dass bei jeder neuen Ergänzung durch einen Benutzer das konsistente Muster der Elemente der Originalseite erhalten bleibt.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Um diese Problematik weiter zu vereinfachen und das Leistungspotenzial Ihrer Musterbibliothek zu erhöhen, sollten Sie ein \u003Ca href=\"\u002Fde\u002Fdigital-asset-management\u002F\">Digital Asset Management\u003C\u002Fa>-System implementieren. Dadurch unterstützen Sie Ihre Mitarbeiter, indem Sie Dateien wie z.B. visuelle Elemente, Logos und andere Medien an einem zentralen Ort speichern. Darüber hinaus verbessert es auch die Kommunikation im Team während des gesamten Aufbaus der Webseite.\u003C\u002Fp>\u003Cp class=\"wp-block-paragraph\">Mit einer Pattern Library konsolidieren Sie den professionellen Anspruch Ihrer Website. Sie gewährleistet Konsistenz und Übersichtlichkeit für Ihre Designelemente.\u003C\u002Fp>",3,{"url":37,"url_md":38,"alt":39,"height":40,"width":40},"https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191859\u002FPattern-library_DE-Feature.jpg","https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fde\u002F2020\u002F04\u002F19191859\u002FPattern-library_DE-Feature-450x450.jpg","Ein Stapel wild übereinander gestürzter Bücher.",800,[42],{"id":43,"slug":43,"title":44,"path":45},"marketing-technology","Marketingtechnologie","\u002Fpost-category\u002Fmarketing-technology\u002F",[47,54,61],{"featuredImage":48,"postId":49,"slug":50,"title":51,"description":52,"path":53},"https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fde\u002F2022\u002F11\u002F28143112\u002Fmarketingportfolio-feature-450x263.jpg",62651,"marketingportfolio","Das beste Marketingportfolio für 2026: KI-gestützte Technologien für skalierbares Wachstum","So schaffen Sie 2026 das perfekte Marketingportfolio mit KI, DAM und Marketing-Automatisierung, für effizientere Kampagnen und messbares Wachstum.","\u002Fblog\u002Fmarketingportfolio\u002F",{"featuredImage":55,"postId":56,"slug":57,"title":58,"description":59,"path":60},"https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fde\u002F2021\u002F09\u002F19185006\u002FBinary-large-object_DE-Feature-450x296.jpg",59241,"binary-large-object","Binary Large Object: So speichern Sie große Datenmengen","Ein Binary Large Object dient der adäquaten Speicherung von Dateien in Ihrem Unternehmen. Hier erfahren Sie, wie Sie solche großen Dateien am besten handhaben.","\u002Fblog\u002Fbinary-large-object\u002F",{"featuredImage":62,"postId":63,"slug":64,"title":65,"description":66,"path":67},"https:\u002F\u002Fwww.canto.com\u002Fcdn\u002Fde\u002F2020\u002F05\u002F19191804\u002FVideo-tagging-software_DE-Feature-450x280.jpg",32106,"video-tagging-software","Video Tagging-Software – Die Vorteile automatischer Labels","Video Tagging-Software ist unverzichtbar für alle, die große Mengen Videos hochladen. Erfahren Sie, wie sie funktioniert und warum sie so effektiv ist.","\u002Fblog\u002Fvideo-tagging-software\u002F",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":69},"\u003Cpath fill=\"currentColor\" d=\"M9.175 10.825Q8 9.65 8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12t-2.825-1.175M4 20v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20zm2-2h12v-.8q0-.275-.137-.5t-.363-.35q-1.35-.675-2.725-1.012T12 15t-2.775.338T6.5 16.35q-.225.125-.363.35T6 17.2zm7.413-8.587Q14 8.825 14 8t-.587-1.412T12 6t-1.412.588T10 8t.588 1.413T12 10t1.413-.587M12 18\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":71},"\u003Cpath fill=\"currentColor\" d=\"M12 14q-.425 0-.712-.288T11 13t.288-.712T12 12t.713.288T13 13t-.288.713T12 14m-4.712-.288Q7 13.426 7 13t.288-.712T8 12t.713.288T9 13t-.288.713T8 14t-.712-.288M16 14q-.425 0-.712-.288T15 13t.288-.712T16 12t.713.288T17 13t-.288.713T16 14m-4 4q-.425 0-.712-.288T11 17t.288-.712T12 16t.713.288T13 17t-.288.713T12 18m-4.712-.288Q7 17.426 7 17t.288-.712T8 16t.713.288T9 17t-.288.713T8 18t-.712-.288M16 18q-.425 0-.712-.288T15 17t.288-.712T16 16t.713.288T17 17t-.288.713T16 18M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V2h2v2h8V2h2v2h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":73},"\u003Cpath fill=\"currentColor\" d=\"M12 20a8 8 0 0 0 8-8a8 8 0 0 0-8-8a8 8 0 0 0-8 8a8 8 0 0 0 8 8m0-18a10 10 0 0 1 10 10a10 10 0 0 1-10 10C6.47 22 2 17.5 2 12A10 10 0 0 1 12 2m.5 5v5.25l4.5 2.67l-.75 1.23L11 13V7z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":75},"\u003Cpath fill=\"currentColor\" d=\"M18.188 0c-.517 0-.741.325-.927.66c0 0-7.455 13.224-7.702 13.657c.015.024 4.919 9.023 4.919 9.023c.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22c.089-.151.089-.346-.009-.536l-4.879-8.916a.02.02 0 0 1 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0zM3.648 4.74c-.211 0-.385.074-.473.216c-.09.149-.078.339.02.531l2.34 4.05q.006.014 0 .021L1.86 16.051a.52.52 0 0 0 0 .529c.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609l-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648z\"\u002F>",1789479953826]