{"id":51234,"date":"2024-03-18T01:00:00","date_gmt":"2024-03-18T08:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=51234"},"modified":"2025-01-16T11:25:09","modified_gmt":"2025-01-16T19:25:09","slug":"elemente-des-webdesigns","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/","title":{"rendered":"Top 7 Grundelemente des Webdesigns"},"content":{"rendered":"\n<p>Modernes Webdesign kann sich ein wenig wie Alchemie anf\u00fchlen: die alte Praxis, aus Blei Gold zu machen. Selbst ein Anf\u00e4nger kann erkennen, <a href=\"https:\/\/www.dreamhost.com\/academy\/what-makes-a-good-website\/\" target=\"_blank\" rel=\"noopener\">was eine gute Website ausmacht<\/a>, aber wenn es darum geht, sie selbst zu bauen? Lassen Sie uns sagen, dass Gold von Grund auf zu machen, schwieriger ist, als es scheint.<\/p>\n\n\n\n<p>Das richtige Design f\u00fcr Ihre Website zu finden, kann sich wie eine magische Reise von der Vision zur Realit\u00e4t anf\u00fchlen, bei der Ideen geformt und verfeinert werden, bis sie gl\u00e4nzen. In Wirklichkeit gibt es bestimmte Prinzipien des modernen Webdesigns, die, wenn angewendet, die Chance erheblich erh\u00f6hen, dass Ihre Seite nicht nur erfolgreich ist, sondern sich in digitales Gold verwandelt.<\/p>\n\n\n\n<p>Hier wird es jedoch kompliziert: Modernes Webdesign ist mehr als nur visuelle Elemente und \u00c4sthetik. Das Design Ihrer Website beeinflusst Ihre Suchmaschinenoptimierung (SEO), wie Ihr Publikum Ihre Marke wahrnimmt und wie sich Besucher verhalten, wenn sie auf der Seite landen. Es ist nicht \u00fcbertrieben zu sagen, dass das Design und das Layout Ihrer Website Ihre gesamte Online-Pr\u00e4senz beeinflussen k\u00f6nnen.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>SEO<\/h3>\n    <p>Suchmaschinenoptimierung (SEO) ist die Praxis, das Ranking einer Website in den Suchergebnissen zu verbessern. Suchergebnisse werden aufgrund einer Reihe von Faktoren aggregiert, einschlie\u00dflich der Relevanz und Qualit\u00e4t einer Website. Die Optimierung Ihrer Website f\u00fcr diese Faktoren kann helfen, Ihre Rankings zu verbessern.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/seo\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Also, egal ob Sie von Grund auf neu beginnen oder <a href=\"https:\/\/www.dreamhost.com\/blog\/2018-website-redesign-checklist\/\" target=\"_blank\" rel=\"noopener\">eine bestehende Seite neu gestalten<\/a>, Sie sind hier genau richtig. Lesen Sie weiter, w\u00e4hrend wir einige der grundlegenden Elemente des Webdesigns erkunden, von modernen Designtrends bis hin zu M\u00f6glichkeiten, wie Nicht-Designer sich am Designprozess beteiligen k\u00f6nnen. Dabei lernen wir mehr dar\u00fcber, wie eine gut gestaltete Website ein goldenes Ticket f\u00fcr Ihr Online-Gesch\u00e4ft sein kann.<\/p>\n\n\n\n<h2 id=\"tech\" class=\"wp-block-heading\">Zuerst k\u00fcmmern Sie sich um die technischen Angelegenheiten (oder lassen Sie es von Ihrem Host erledigen)<\/h2>\n\n\n\n<p>Sie dachten, effektives Webdesign handle nur davon, die <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-man-ein-farbschema-fur-ihre-website-auswahlt\/\" target=\"_blank\" rel=\"noopener\">richtige Farbpalette<\/a> und Bilder auszuw\u00e4hlen, nicht wahr? Nun, Sie liegen nicht falsch, per se. Wir betrachten nur eine umfassendere Nutzung des Designs, um eine positive Benutzererfahrung f\u00fcr die Besucher Ihrer Website zu schaffen.<\/p>\n\n\n\n<p>Hier sind einige der technischen Probleme, die Sie sicherstellen m\u00f6chten, bevor Sie zu den sch\u00f6neren Teilen Ihres Webdesigns \u00fcbergehen:<b><\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Ladezeit der Website: <\/b>Egal, wer Ihr Publikum ist, <a href=\"https:\/\/www.hobo-web.co.uk\/your-website-design-should-load-in-4-seconds\/\" target=\"_blank\" rel=\"noopener\">Internetnutzer sind eine ziemlich ungeduldige Gruppe<\/a>. 47 Prozent erwarten, dass eine Website in zwei Sekunden oder weniger l\u00e4dt, w\u00e4hrend 40 Prozent eine Website komplett verlassen, wenn es mehr als drei Sekunden dauert, bis sie geladen ist. Schnellere Ladezeiten der Website verringern andererseits Ihre Absprungraten (die Anzahl der Besucher, die wegklicken, nachdem sie nur eine Seite gesehen haben). Wenn Sie die Ladezeiten Ihrer Website beschleunigen m\u00fcssen, <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wordpress-seitengeschwindigkeit\/\" target=\"_blank\" rel=\"noopener\">schauen Sie sich unseren Leitfaden an<\/a>.<\/li>\n\n\n\n<li><b>Verf\u00fcgbarkeit: <\/b>Das Gleiche gilt f\u00fcr Websites, die \u00fcberhaupt nicht laden. Ausf\u00e4lle von Datenzentren k\u00f6nnen ein Unternehmen durchschnittlich 9.000 Dollar pro Minute kosten, wenn seine Website nicht verf\u00fcgbar ist, laut dem <a href=\"http:\/\/www.datacenterdynamics.com\/content-tracks\/security-risk\/the-rising-cost-of-ddos\/96060.article\" target=\"_blank\" rel=\"noopener\">Ponemon Institute<\/a>. Die Wahl eines zuverl\u00e4ssigen Webhosting-Anbieters kann helfen, sicherzustellen, dass Ihre Website so oft wie m\u00f6glich verf\u00fcgbar ist. Zum Beispiel verwendet <a href=\"https:\/\/www.dreamhost.com\/de\/\" target=\"_blank\" rel=\"noopener\">DreamHost<\/a> Hochleistungs-SSD-Laufwerke in unseren Servern, die mindestens 200 Prozent schneller sind als herk\u00f6mmliche Festplattenlaufwerke. <a href=\"https:\/\/www.dreamhost.com\/de\/legal\/nutzungsbedingungen\/\" target=\"_blank\" rel=\"noopener\">Verf\u00fcgbarkeitsgarantien<\/a> sind ein weiteres wichtiges Ma\u00df, das bei der Bewertung der Zuverl\u00e4ssigkeit zu ber\u00fccksichtigen ist. DreamHost ist einer der wenigen Anbieter, die versprechen, dass Ihre Website 100 Prozent der Zeit online sein wird. Wir erstatten Ihnen sogar die Kosten f\u00fcr einen ganzen Tag Hosting f\u00fcr jede Stunde, in der Ihre Website nicht verf\u00fcgbar ist.<\/li>\n\n\n\n<li><b>Kompatibilit\u00e4t zwischen verschiedenen Browsern: <\/b>Ihre Website sollte auf allen wichtigen Browsern und Betriebssystemen korrekt dargestellt werden. Tests zur Cross-Browser-Kompatibilit\u00e4t vor der Ver\u00f6ffentlichung Ihrer Website k\u00f6nnen Ihnen helfen sicherzustellen, dass Benutzer keine Kompatibilit\u00e4tsprobleme mit verschiedenen Browsern haben.<\/li>\n\n\n\n<li><b>Zug\u00e4nglichkeit: <\/b>Zug\u00e4nglichkeit bedeutet, dass jede Person Ihre Website nutzen kann \u2013 auch wenn sie Behinderungen hat. Erfahren Sie, wie Sie eine zug\u00e4ngliche Website mit <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/\" target=\"_blank\" rel=\"noopener\">unserem ultimativen Leitfaden<\/a> gestalten k\u00f6nnen.<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1700\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility.jpg\" alt=\"zug\u00e4ngliche Websites sollten wahrnehmbar, bedienbar, verst\u00e4ndlich und robust sein\" class=\"wp-image-43568 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-964x1024.jpg 964w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-768x816.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-1446x1536.jpg 1446w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-1200x1275.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-730x776.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-1460x1551.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-784x833.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-1568x1666.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-877x932.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1700;\" \/><\/figure>\n\n\n\n<h2 id=\"key\" class=\"wp-block-heading\">7 Schl\u00fcsselkomponenten des Webdesigns<\/h2>\n\n\n\n<p>Jetzt k\u00f6nnen wir zu den spa\u00dfigen Dingen \u00fcbergehen, wie Farben, Typografie, <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-write-website-ctas\/\" target=\"_blank\" rel=\"noopener\">Call-to-Action Buttons<\/a>, Wei\u00dfraum, Navigation und andere Webdesign-Elemente!<\/p>\n\n\n\n<p>Im Folgenden werden wir sieben grundlegende Elemente untersuchen, aber denken Sie daran, dass Webdesign eine Kunstform ist, keine Wissenschaft. Sie k\u00f6nnen immer Risiken mit Ihrer Website eingehen, wenn diese berechnet und umkehrbar sind. Vielleicht setzen Sie sogar den n\u00e4chsten gro\u00dfen Webdesign-Trend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Gesamtlayout und visuelles Erscheinungsbild<\/h3>\n\n\n\n<p>Das Gesamtbild Ihrer Website ist nat\u00fcrlich ein entscheidender Bestandteil des Designs. Der erste Eindruck ist entscheidend, daher m\u00f6chten Sie Besucher beeindrucken, sobald die Seite geladen wird. Benutzer ben\u00f6tigen nur <a href=\"https:\/\/conversionxl.com\/blog\/first-impressions-matter-the-importance-of-great-visual-design\/\" target=\"_blank\" rel=\"noopener\">50 Millisekunden, um sich eine Meinung<\/a> \u00fcber Ihre Website oder Ihr Unternehmen zu bilden, die entscheidet, ob sie bleiben oder gehen.<\/p>\n\n\n\n<p>Im Folgenden werden wir einige spezifische Elemente des Layouts und des visuellen Erscheinungsbilds Ihrer Website behandeln, auf die Sie m\u00f6glicherweise mehr Zeit verwenden m\u00f6chten.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Minimalistisches Design<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1200\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism.jpg\" alt=\"Beispiel f\u00fcr Kartendesign einer Webseite, drei saubere Fotos, jedes mit einem Foto einer Le Creuset Pfanne kurzer Text  \" class=\"wp-image-43569 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism-300x225.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism-1024x768.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism-768x576.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism-1536x1152.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-600x450.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-1200x900.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-730x548.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-1460x1095.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-784x588.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-1568x1176.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-877x658.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1200;\" \/><\/figure>\n\n\n\n<p>Minimalistisches Design (oder minimalistisches Design) bedeutet, nur notwendige Elemente auf Ihrer Startseite oder Landingpage zu platzieren. Das visuelle Design sollte einfach, vertraut, intuitiv, sauber und zug\u00e4nglich sein. Minimalistisches Webdesign nutzt negativen oder wei\u00dfen Raum, um die Seite \u00fcberschaubar zu machen und die Augen der Besucher auf das Wichtigste zu lenken.<\/p>\n\n\n\n<p>Eine trendige und effektive Methode, Minimalismus auf Ihrer Website zu verwenden, ist das Karten-Design. Dies ist ein beliebter Webdesign-Stil, bei dem Text und Bilder auf einzelnen Karten gruppiert werden, wodurch Besucher h\u00e4ppchenweise Inhalte schnell aufnehmen k\u00f6nnen, ohne \u00fcberfordert zu werden.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Heldenbilder<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1080\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image.jpg\" alt=\"Screenshot der Startseite von Milk &#038; Pepper mit einem einzigen Heldenbild oben mit einem Bild von drei Hunden in Pullovern\" class=\"wp-image-43570 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image-300x203.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image-1024x691.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image-768x518.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image-1536x1037.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-600x405.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-1200x810.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-730x493.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-1460x986.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-784x529.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-1568x1058.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-877x592.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1080;\" \/><\/figure>\n\n\n\n<p>Hero-Bilder sind in modernem Webdesign beliebt geworden. Denken Sie nur daran, dass, wenn Sie ein Hero-Bild verwenden m\u00f6chten (ein gro\u00dfes Bild, das die Seite dominiert), hochwertige Bilder ein Muss sind \u2013 ebenso wie moderne Komprimierungswerkzeuge, um die Dateigr\u00f6\u00dfe zu reduzieren, sodass ein gro\u00dfes Bild die Ladezeiten Ihrer Seite nicht verlangsamt.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">E-Commerce-Elemente<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1080\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1.jpg\" alt=\"Screenshot der Startseite von Unique Vintage mit t\" class=\"wp-image-43571 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1-300x203.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1-1024x691.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1-768x518.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1-1536x1037.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-600x405.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-1200x810.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-730x493.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-1460x986.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-784x529.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-1568x1058.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-877x592.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1080;\" \/><\/figure>\n\n\n\n<p>Wenn Ihre Website f\u00fcr E-Commerce bestimmt ist, gibt es viele visuelle Elemente, \u00fcber die Sie nachdenken m\u00fcssen, aber wir konzentrieren uns auf zwei der wichtigsten: Produktbilder und <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/call-to-action-cta\/\" target=\"_blank\" rel=\"noopener\">Aufrufe zum Handeln (CTA)<\/a>.<\/p>\n\n\n\n<p>F\u00fcr E-Commerce-Websites m\u00fcssen die Desigenelemente nicht nur gut aussehen, sondern auch motivieren und den Kauf erleichtern. Hochwertige Produktbilder erm\u00f6glichen es den K\u00e4ufern, eine detaillierte und ansprechende Ansicht der angebotenen Produkte zu sehen, was sie f\u00fcr jede Website, die Online-Shopping beinhaltet, absolut unerl\u00e4sslich macht.<\/p>\n\n\n\n<p>Call-to-Action-Schaltfl\u00e4chen sind ein weiteres entscheidendes Element f\u00fcr E-Commerce-Websites. Die Schaltfl\u00e4chen sollten so gestaltet sein, dass sie auffallen, prominent platziert und klar beschriftet sind, um den K\u00e4ufern ein reibungsloses Durchlaufen des gesamten Kaufvorgangs zu erleichtern.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ikonografie<\/h4>\n\n\n\n<p>Icons k\u00f6nnen hilfreich sein, um erg\u00e4nzende Informationen bereitzustellen, aber ihr Design muss zum Rest Ihrer Website und Ihrer Marke passen. Es gibt zwei Haupttypen der grafischen Gestaltung f\u00fcr Icons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Skeuomorphes Design:<\/b> Wenn Icons mit Details, Schatten, 3-D-Effekten usw. gestaltet sind.<\/li>\n\n\n\n<li><b>Flaches oder halbflaches Design:<\/b> Wenn Icons minimalistischer oder cartoonartiger gestaltet sind, ohne Details<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design.jpg\" alt=\"Skeuomorpher Button (mit Dimension, als ob der Button von der Seite absteht) vs. flacher Button (1 Dimension)\" class=\"wp-image-43572 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>In der Vergangenheit waren skeuomorphe Symbole trendiger. In den letzten Jahren haben wir jedoch gesehen, dass sich Designtrends in Richtung flaches und halbflaches Design bewegen. Trends sollten jedoch nicht alles sein, was Sie beim Entwerfen Ihrer Symbole ber\u00fccksichtigen; \u00fcberlegen Sie, was am besten zu Ihrem Branding und dem Gesamtdesign Ihrer Website passt.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h3 class=\"wp-block-heading\">2. Farbschema<\/h3>\n\n\n\n<p>Bei der Auswahl eines Farbschemas gibt es einige Faktoren, die Sie ber\u00fccksichtigen k\u00f6nnen: Ihre Marke, Ihre Branche, Ihr Zielpublikum und demografische Daten, um nur einige zu nennen. Und mit etwa <a href=\"https:\/\/www.colormatters.com\/color-and-vision\/color-and-vision-matters\" target=\"_blank\" rel=\"noopener\">7 Millionen von dem menschlichen Auge erkennbaren Farbt\u00f6nen<\/a> haben Sie eine gro\u00dfe Auswahl.<\/p>\n\n\n\n<p>Denken Sie dar\u00fcber nach, wie Ihre Farbwahl Sie repr\u00e4sentieren k\u00f6nnte. Zum Beispiel wird Marineblau oder Waldgr\u00fcn oft von Anw\u00e4lten und \u00c4rzten verwendet, da es eine professionelle Farbe ist. Fotografen verwenden h\u00e4ufig Schwarz und Wei\u00df, weil es hilft, ihre Bilder hervorzuheben.<\/p>\n\n\n\n<p>Aber denken Sie nicht nur an Ihre Branche, denken Sie auch an Ihr Publikum und dessen Erwartungen. Wenn Ihre Hauptzielgruppe kleine Kinder sind, k\u00f6nnten sie sich zu hellen Farben wie Rot und Gelb hingezogen f\u00fchlen. Wenn Ihre Hauptkunden Teenager und junge Erwachsene sind, k\u00f6nnten kr\u00e4ftige Farben die beste Wahl sein. Wenn Sie mit \u00e4lteren Erwachsenen arbeiten, k\u00f6nnte etwas Dezenteres und Feineres ihnen ansprechen.<\/p>\n\n\n\n<p>Sobald Sie eine Hauptfarbe gew\u00e4hlt haben, kann das den Rest Ihrer Farbpalette bestimmen. Beim Entwerfen von Elementen wie Navigationskn\u00f6pfen und Symbolen ist es wichtig, eine erg\u00e4nzende Farbkombination mit dem Hintergrund Ihrer Website, den Textfarben usw. zu verwenden.<\/p>\n\n\n\n<p>Brauchen Sie weitere Hilfe? Schauen Sie sich unseren <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-man-ein-farbschema-fur-ihre-website-auswahlt\/\" target=\"_blank\" rel=\"noopener\">ultimativen Leitfaden zur Wahl der Website-Farben<\/a> an.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1736\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory.jpg\" alt=\"vier Farbr\u00e4der, die jeweils ein anderes Farbtheoriekonzept zeigen: monochromatisch, analog, komplement\u00e4r und triadisch\" class=\"wp-image-43573 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory-276x300.jpg 276w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory-944x1024.jpg 944w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory-768x833.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory-1416x1536.jpg 1416w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-600x651.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-1200x1302.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-730x792.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-1460x1584.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-784x851.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-1568x1701.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-877x952.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1736;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. Typografie<\/h3>\n\n\n\n<p>Wenn Sie dar\u00fcber nachdenken, wie die Farbpalette Ihrer Website Sie und Ihr Unternehmen repr\u00e4sentieren wird, sollten Sie dieselben Fragen zur <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/websichere-schriften\/\" target=\"_blank\" rel=\"noopener\">Typografie Ihrer Website<\/a> stellen. Sind Sie ein Profi, der eine distinguierte Serifenschrift verwenden sollte? Oder ist Ihr Gesch\u00e4ft l\u00e4ssiger und wird besser durch eine leichte und luftige serifenlose Schrift dargestellt?<\/p>\n\n\n\n<p>Unabh\u00e4ngig davon, was Sie w\u00e4hlen, der Text Ihrer Website <i>muss<\/i> leicht lesbar sein, was bedeutet, dass der Flie\u00dftext mindestens 16 Pixel gro\u00df sein sollte, Sie sollten eine erg\u00e4nzende Schriftart f\u00fcr \u00dcberschriften und Akzente verwenden, und es wird viel Kontrast zwischen Text und Hintergrund ben\u00f6tigt (keine roten Schriftarten auf gr\u00fcnen Hintergr\u00fcnden, es sei denn, Sie m\u00f6chten Ihren Besuchern Kopfschmerzen bereiten).<\/p>\n\n\n\n<p>Abgesehen davon gibt es hier jedoch einige Freiheiten. Sie k\u00f6nnen mit Ihrer Schriftart spielen, solange sie lesbar ist. F\u00fchlen Sie sich frei, Normalit\u00e4t mit Frische zu balancieren und etwas auszuprobieren, das sich von Arial oder Times New Roman unterscheidet. Sie k\u00f6nnen <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/beste-google-schriften\/\" target=\"_blank\" rel=\"noopener\">Schriften mischen<\/a>, solange sie einander erg\u00e4nzen.<\/p>\n\n\n\n<p>Bleiben Sie einfach <a href=\"http:\/\/www.comicsanscriminal.com\/\" target=\"_blank\" rel=\"noopener\">fern von Comic Sans<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1013\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings.jpg\" alt=\"Screenshots Beispiel einer Website mit zwei verschiedenen komplement\u00e4ren Schriftarten\" class=\"wp-image-43574 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings-300x190.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings-1024x648.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings-768x486.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings-1536x972.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-600x380.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-1200x760.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-730x462.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-1460x924.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-784x496.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-1568x993.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-877x555.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1013;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. Navigation<\/h3>\n\n\n\n<p>Die Navigation Ihrer Website ist kein Bereich, in dem Sie kreativ sein k\u00f6nnen.<\/p>\n\n\n\n<p>Verfallen Sie nicht der Falle von animierten Hover-Effekten und komplexen, mehrstufigen Subnavs. Navigations-Elemente \u2013 die im Header, Body und Footer einer Seite existieren k\u00f6nnen \u2013 sind dazu da, Ihre Besucher so schnell wie m\u00f6glich zu den gew\u00fcnschten Informationen zu f\u00fchren. Punkt.<\/p>\n\n\n\n<p>Das erste Navigationsmen\u00fc sollte oben auf der Seite sein, und hier steht eine polarisierende Designentscheidung an: verwenden Sie ein vertikales Navigationsmen\u00fc oder ein <a href=\"https:\/\/medium.com\/digital-experience-design\/to-hamburger-or-not-to-hamburger-aad8b4a07576\" target=\"_blank\" rel=\"noopener\">Hamburger-Men\u00fc<\/a>? Hamburger-Men\u00fcs, die ein vertikales Men\u00fc in drei parallele, horizontale Linien zusammenfassen, bieten eine \u00f6konomische M\u00f6glichkeit, Platz zu sparen, indem sie Ihr Navigationsmen\u00fc au\u00dferhalb der Website verbergen (au\u00dferdem sind sie mobilfreundlich). Allerdings kann ein Hamburger-Button wichtige Informationen verdecken \u2013 und sie neigen zu niedrigeren Klickraten, was bedeutet, dass sie f\u00fcr Besucher weniger effektiv sind.<\/p>\n\n\n\n<p>Die reibungslose Navigation geht \u00fcber den Header Ihrer Website hinaus. Bei langen, scroll-intensiven oder Einzelseiten-Designs m\u00f6chten Sie m\u00f6glicherweise Richtungspfeile einbeziehen, um den Benutzern die Navigation durch jeden Abschnitt zu erleichtern. Diese Arten von Websites <a href=\"https:\/\/www.nngroup.com\/articles\/back-to-top\/\" target=\"_blank\" rel=\"noopener\">k\u00f6nnen ebenfalls profitieren<\/a> von einer feststehenden \u201eZur\u00fcck nach oben\u201c-Schaltfl\u00e4che, die Besucher schnell zur\u00fcck an den Anfang der Seite bringt.<\/p>\n\n\n\n<p>Und schlie\u00dflich, vergessen Sie nicht, eine Navigationsleiste im Footer Ihrer Website einzubeziehen. Ein optimierter Footer kann zu <a href=\"https:\/\/icons8.com\/articles\/website-footer-design\/\" target=\"_blank\" rel=\"noopener\">bis zu 50% mehr Konversionen<\/a> f\u00fchren \u2013 besonders, wenn Sie ein Kontaktformular oder einen CTA wie einen Anmeldelink f\u00fcr Ihre E-Mail-Liste einschlie\u00dfen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation.jpg\" alt=\"Screenshot der Fu\u00dfzeilennavigation von DreamHost mit klaren \u00dcberschriften wie Produkt, Unternehmen, Ressourcen und in jeder Kategorie aufgelisteten Links\" class=\"wp-image-43575 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5. Inhalt<\/h3>\n\n\n\n<p>Genau wie Innenarchitekten nicht aufh\u00f6ren, wenn die W\u00e4nde gestrichen sind, ist Ihre Website nicht fertig, sobald das Layout, das Farbschema, die Schriftarten und andere \u00e4sthetische Elemente ausgew\u00e4hlt sind. Es ist Zeit, das Sofa zu bringen und Familienfotos an die Wand zu h\u00e4ngen \u2013 indem Sie darauf achten, wie Ihre Nachrichten mit Ihrem Design interagieren.<\/p>\n\n\n\n<p>Ihre Website-Besucher m\u00f6gen das Design bemerken, aber sie sind wegen des Inhalts da. Ist Ihre Marke vertrauensw\u00fcrdig? Erfahren? In der Lage, erstklassige Produkte und Dienstleistungen zu liefern? Klare Kommunikation ist entscheidend; Informationen sollten leicht zu finden, zu lesen und zu verstehen sein \u2013 und hier kommt der Inhalt ins Spiel.<\/p>\n\n\n\n<p>Verwenden Sie \u00dcberschriften und Anzeigetext, um Inhalte in Abschnitte zu gliedern, damit Leser schnell die Informationen finden k\u00f6nnen, die sie ben\u00f6tigen. Entfernen Sie alle Informationen, die nicht notwendig sind. Gliedern Sie lange Inhalte in Listen \u2013 denken Sie daran, dass inhaltsreiche Websites mit den Designelementen konkurrieren werden, an denen Sie so hart gearbeitet haben.<\/p>\n\n\n\n<p>Wenden Sie dieselbe Inhaltsstrategie auf jeder Seite an. Zum Beispiel sollten auch Ihre Seiten \u201e\u00dcber uns\u201c und \u201eKontakt\u201c dieselbe Markenidentit\u00e4t und denselben Ton haben und schnell die richtigen Informationen vermitteln.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Videos<\/h3>\n\n\n\n<p>Video kann eine gro\u00dfartige M\u00f6glichkeit sein, Website-Besucher zu binden, sie l\u00e4nger auf Ihrer Seite zu halten, die Absprungrate zu reduzieren und sogar die Konversionen zu erh\u00f6hen. Videos k\u00f6nnen statische Webseiten in lebendige R\u00e4ume verwandeln und bieten Ihnen ein neues Medium, um die Geschichte Ihrer Marke zu erz\u00e4hlen. Videoinhalte verbessern nicht nur das Benutzererlebnis, indem sie visuelle und auditive Reize bieten, sondern dienen auch als effektives Werkzeug zur Verbesserung der Verweildauer und der SEO-Rankings. Hier sind einige M\u00f6glichkeiten, wie das Hinzuf\u00fcgen von Videos Ihr Website-Design verbessern kann:<b><\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Erh\u00f6htes Besucherengagement: <\/b>Durch die Pr\u00e4sentation von Informationen \u00fcber visuelle Kan\u00e4le halten Videos die Aufmerksamkeit der Betrachter l\u00e4nger als Text oder statische Bilder allein. Ob es sich um ein Erkl\u00e4rungsvideo, eine Produktdemonstration oder eine fesselnde Markengeschichte handelt, Videoinhalte haben die einzigartige F\u00e4higkeit, Besucher zu fesseln und sie dazu zu bringen, mehr Zeit auf Ihrer Website zu verbringen.<\/li>\n\n\n\n<li><b>Verbesserte SEO: <\/b>Suchmaschinen bevorzugen Websites mit Videoinhalten, da dies auf eine h\u00f6here Qualit\u00e4t der Informationen und Nutzerinteraktion hinweist. Das Einbetten von Videos, die f\u00fcr Ihren Inhalt relevant sind, kann die SEO-Rankings Ihrer Site verbessern und sie f\u00fcr potenzielle Besucher sichtbarer machen. Zus\u00e4tzlich f\u00f6rdern Videos das Teilen \u00fcber soziale Medienplattformen, was die Reichweite und Sichtbarkeit Ihrer Website weiter erh\u00f6ht. Durch die Optimierung von Videotiteln, Beschreibungen und Tags mit gezielten Keywords k\u00f6nnen Sie Ihre SEO-Strategie verbessern und mehr Traffic auf Ihre Website ziehen.<\/li>\n\n\n\n<li><b>Mehr Konversionen: <\/b>Videos spielen auch eine entscheidende Rolle bei der Umwandlung von Besuchern in Kunden oder Abonnenten. Produktvideos erm\u00f6glichen es beispielsweise potenziellen K\u00e4ufern, Artikel in Aktion zu sehen, und adressieren Fragen und Bedenken auf eine Weise, die Produktbeschreibungen nicht k\u00f6nnen. Testimonial-Videos f\u00fcgen eine Ebene des Vertrauens und der Glaubw\u00fcrdigkeit hinzu, indem sie reale Erfahrungen mit Ihrer Marke oder Ihren Produkten zeigen. Durch das Einbinden klarer Handlungsaufforderungen innerhalb oder nach Videos k\u00f6nnen Sie Zuschauer dazu anleiten, einen Kauf zu t\u00e4tigen, sich f\u00fcr einen Newsletter anzumelden oder auf andere bedeutungsvolle Weise mit Ihrer Marke zu interagieren.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">7. Vergessen Sie das Mobile nicht<\/h3>\n\n\n\n<p>Puh! Endlich n\u00e4hern wir uns dem Ende unserer Webdesign-Reise mit einer schlanken, kompakten, benutzerfreundlichen Website. Bereit, alles noch einmal zu machen \u2013 aber kleiner?<\/p>\n\n\n\n<p>Der Anteil des <a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\/worldwide\/#monthly-201601-202402\" target=\"_blank\" rel=\"noopener\">mobilen Webverkehrs hat den Desktop-Verkehr vor Jahren \u00fcberholt<\/a> und zeigt keine Anzeichen einer Verlangsamung. Zus\u00e4tzlich verwendet Google nun <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-sie-ihre-website-fur-mobile-gerate-optimieren\/\" target=\"_blank\" rel=\"noopener\">mobile-first Indexierung<\/a>, um Websites in den Suchergebnissen zu bewerten, und seit 2021 hat die Suchmaschine <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/google-core-web-vitals\/\" target=\"_blank\" rel=\"noopener\">Core Web Vitals<\/a> verwendet, eine Reihe von Metriken zur Messung, wie gut Ihre Website eine qualitativ hochwertige Benutzererfahrung (einschlie\u00dflich auf mobilen Ger\u00e4ten) liefert, um zu helfen, zu bestimmen, welche Websites einen Ranking-Boost erhalten sollten.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Core Web Vitals (CWV)<\/h3>\n    <p>Core Web Vitals (CWV) wurden von Google entwickelt und repr\u00e4sentieren ein Trio von Benutzererlebnismetriken, die dazu dienen, eine schnellere, zug\u00e4nglichere und qualitativ hochwertigere Web-Browsing-Erfahrung zu schaffen. Die drei Core Web Vitals-Metriken umfassen Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/core-web-vitals\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Mit anderen Worten, mobilfreundliche Websites sind nicht mehr nur eine nette Zusatzfunktion. <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-sie-ihre-website-fur-mobile-gerate-optimieren\/\" target=\"_blank\" rel=\"noopener\">Sie sind eine Notwendigkeit<\/a>.<\/p>\n\n\n\n<p>Die meisten <a href=\"https:\/\/www.dreamhost.com\/wordpress\/how-to-find-wp-themes\/\" target=\"_blank\" rel=\"noopener\">WordPress-Themes<\/a> oder Vorlagen sind bereits f\u00fcr den mobilen Datenverkehr optimiert. Aber wenn Sie ein individuelles Design erstellen oder <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-hire-designer-to-create-custom-website\/\" target=\"_blank\" rel=\"noopener\">einen Webdesigner engagieren<\/a>, m\u00fcssen Sie sicherstellen, dass Ihre Website ebenso gut funktioniert, wenn sie von allen Ger\u00e4tetypen aus aufgerufen wird.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Responsives Design vs. Mobilfreundliches Layout<\/h4>\n\n\n\n<p>Es ist auch wichtig, den Unterschied zwischen responsivem Webdesign und mobilfreundlichem oder Mobile-First-Design zu verstehen.<\/p>\n\n\n\n<p>Wenn eine Website responsiv ist, bedeutet das, dass sie sich verkleinert, um sich der Bildschirmgr\u00f6\u00dfe anzupassen, wenn ein mobiler Nutzer darauf zugreift.<\/p>\n\n\n\n<p>Andererseits k\u00f6nnte ein mobilfreundliches Design das Layout so \u00e4ndern, dass es f\u00fcr jede Bildschirmgr\u00f6\u00dfe idealer ist, indem Spaltenlayouts oder Schaltfl\u00e4chengr\u00f6\u00dfen ge\u00e4ndert werden, um sie f\u00fcr verschiedene Ger\u00e4tetypen einfacher sichtbar und benutzbar zu machen.<\/p>\n\n\n\n<p>W\u00e4hrend ein responsives Design besser ist als eine Website, die sich \u00fcberhaupt nicht f\u00fcr mobile Nutzer anpasst, ist es nicht so ideal wie ein Mobile-First-Design, das sich an jede Bildschirmgr\u00f6\u00dfe und jeden Ger\u00e4tetyp anpasst. Ber\u00fccksichtigen Sie dies bei der Auswahl Ihres Templates oder bei der Zusammenarbeit mit einem Webdesigner.<\/p>\n\n\n\n<h2 id=\"stunning\" class=\"wp-block-heading\">Lassen Sie sich eine atemberaubende Website von Grund auf entwerfen<\/h2>\n\n\n\n<p>Nachdem Sie die Schl\u00fcsselelemente des modernen Webdesigns kennengelernt haben, ist es <a href=\"https:\/\/www.dreamhost.com\/academy\/website-building-101\/\" target=\"_blank\" rel=\"noopener\">Zeit, Ihre Website zu erstellen<\/a>!<\/p>\n\n\n\n<p>Bei DreamHost machen wir es DIYern leicht, schnell eine Website mit unserem Drag-and-Drop <a href=\"https:\/\/www.dreamhost.com\/de\/ki-website-builder\/\" target=\"_blank\" rel=\"noopener\">WordPress Website-Builder<\/a> zu starten. Wenn Sie jedoch eine polierte, benutzerdefinierte WordPress-Website suchen, die zu 100% einzigartig f\u00fcr Ihre Marke ist, sollten Sie unseren <a href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/design\/individuelles-webdesign\/\" target=\"_blank\" rel=\"noopener\">Custom Website Design Service<\/a> in Betracht ziehen.<\/p>\n\n\n\n<p>Hier ist, wie der Prozess funktioniert: Sie beginnen mit einem pers\u00f6nlichen Gespr\u00e4ch mit Ihrem Projektmanager, der Ihre Anforderungen, Inhalte und Ziele besprechen wird. Dann sammeln wir Ihr vorhandenes Logo und Branding-Materialien auf einem einfachen, einseitigen Referenzblatt, um sicherzustellen, dass Ihr Webseitendesign Ihre Marke genau widerspiegelt.<\/p>\n\n\n\n<p>Als N\u00e4chstes werden unsere professionellen Designer einen individuellen Prototyp Ihrer neuen Website erstellen. Sie k\u00f6nnen Feedback geben und sobald Sie das Design genehmigt haben, werden wir es in eine leistungsstarke WordPress-Seite umwandeln. Wir stellen sicher, dass Sie mit dem Endprodukt zufrieden sind, indem wir von Anfang an \u00dcberarbeitungen einbeziehen; Sie erhalten zwei Runden von Design- und Code\u00fcberarbeitungen f\u00fcr jede Seite Ihrer Website.<\/p>\n\n\n\n<p>Ihre fertige Website wird suchmaschinenoptimiert, mobilfreundlich sein und mit Funktionen wie einem benutzerdefinierten Blog, Kontaktformularen, Analysen und E-Commerce-Tools ausgestattet sein. Wir k\u00f6nnen sogar Produkte in Ihren Online-Shop f\u00fcr Sie hochladen, falls ben\u00f6tigt.<\/p>\n\n\n\n<p>Wenn Sie bereit sind, \u00fcber WordPress-Vorlagen hinauszugehen, werfen Sie heute einen Blick auf unseren <a href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/design\/individuelles-webdesign\/\" target=\"_blank\" rel=\"noopener\">Service f\u00fcr individuelles Webdesign<\/a>.<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      DreamHost macht Webdesign einfach\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Unsere Designer k\u00f6nnen eine wundersch\u00f6ne Website von GRUND AUF NEU erstellen, die perfekt zu Ihrer Marke und Vision passt \u2013 alles programmiert mit WordPress, damit Sie Ihre Inhalte in Zukunft selbst verwalten k\u00f6nnen.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/design\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr erfahren                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Modernes Webdesign kann sich ein wenig wie Alchemie anf\u00fchlen: die alte Praxis, zu versuchen, Blei in Gold zu verwandeln. Selbst ein Anf\u00e4nger kann erkennen, was eine gute Website ausmacht, aber wenn es darum geht, sie selbst zu bauen? Lassen Sie uns einfach sagen, dass es schwieriger ist, aus dem Nichts Gold zu machen, als es scheint. Das richtige Design f\u00fcr Ihre [\u2026] zu finden<\/p>\n","protected":false},"author":1075,"featured_media":43566,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"tech\",\"Zuerst k\u00fcmmern Sie sich um die technischen Angelegenheiten (oder lassen Sie es von Ihrem Host erledigen)\"],[\"key\",\"7 Schl\u00fcsselkomponenten des Webdesigns\"],[\"stunning\",\"Lassen Sie sich eine atemberaubende Website von Grund auf entwerfen\"]]","hide_toc":false,"footnotes":""},"categories":[14509],"tags":[],"class_list":["post-51234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Top 7 Grundelemente des Webdesigns - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 7 Grundelemente des Webdesigns\" \/>\n<meta property=\"og:description\" content=\"Modernes Webdesign kann sich ein wenig wie Alchemie anf\u00fchlen: die alte Praxis, zu versuchen, Blei in Gold zu verwandeln. Selbst ein Anf\u00e4nger kann erkennen, was eine gute Website ausmacht, aber wenn es darum geht, sie selbst zu bauen? Lassen Sie uns einfach sagen, dass es schwieriger ist, aus dem Nichts Gold zu machen, als es scheint. Das richtige Design f\u00fcr Ihre [\u2026] zu finden\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-18T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T19:25:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jennifer Le\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jennifer Le\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Top 7 Grundelemente des Webdesigns - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/","og_locale":"en_US","og_type":"article","og_title":"Top 7 Grundelemente des Webdesigns","og_description":"Modernes Webdesign kann sich ein wenig wie Alchemie anf\u00fchlen: die alte Praxis, zu versuchen, Blei in Gold zu verwandeln. Selbst ein Anf\u00e4nger kann erkennen, was eine gute Website ausmacht, aber wenn es darum geht, sie selbst zu bauen? Lassen Sie uns einfach sagen, dass es schwieriger ist, aus dem Nichts Gold zu machen, als es scheint. Das richtige Design f\u00fcr Ihre [\u2026] zu finden","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-03-18T08:00:00+00:00","article_modified_time":"2025-01-16T19:25:09+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","type":"image\/jpeg"}],"author":"Jennifer Le","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jennifer Le","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"Top 7 Grundelemente des Webdesigns","datePublished":"2024-03-18T08:00:00+00:00","dateModified":"2025-01-16T19:25:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/"},"wordCount":2867,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","articleSection":["Webdesign"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/","name":"Top 7 Grundelemente des Webdesigns - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","datePublished":"2024-03-18T08:00:00+00:00","dateModified":"2025-01-16T19:25:09+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","width":1460,"height":1095,"caption":"Top 7 Basic Elements Of Web Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Top 7 Grundelemente des Webdesigns"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf","name":"Jennifer Le","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","caption":"Jennifer Le"},"description":"Jennifer is Designer II at DreamHost and is responsible for branding, design, and UX\/UI. In her free time, she enjoys crafting, cooking, and camping. Follow Jennifer on LinkedIn: https:\/\/www.linkedin.com\/in\/nhijenniferle\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jenniferle\/"}]}},"lang":"de","translations":{"de":51234,"es":28872,"en":20576,"ru":50903,"pt":51555,"uk":51568,"pl":51613,"it":67800,"fr":69191,"nl":69236},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1075"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=51234"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51234\/revisions"}],"predecessor-version":[{"id":62728,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51234\/revisions\/62728"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/43566"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=51234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=51234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=51234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}