{"id":10066,"date":"2026-09-05T12:13:05","date_gmt":"2026-09-05T10:13:05","guid":{"rendered":"http:\/\/bkovertretung.bplaced.net\/wordpress\/?page_id=10066"},"modified":"2026-10-04T15:52:43","modified_gmt":"2026-10-04T13:52:43","slug":"wir-erstellen-eine-eigene-homepage","status":"publish","type":"page","link":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wfh12-webdesign\/wir-erstellen-eine-eigene-homepage\/","title":{"rendered":"Wir erstellen eine eigene Homepage"},"content":{"rendered":"\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">F\u00fcr diese Aufgabenstellung kann sowohl mit einen Computer (zum Beispiel in der Schule), aber auch mit dem iPad gearbeitet werden.<\/mark><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-pink-color\"><strong>Info<\/strong><\/mark><\/h2>\n\n\n\n<p>Man kann Homepages bzw. Websites gut nach ihrem&nbsp;<strong>Hauptzweck<\/strong>&nbsp;kategorisieren. Dies ist eine m\u00f6gliche Einteilung<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Art der Homepage<\/th><th>Typische Ziele<\/th><th>Beispiele<\/th><\/tr><\/thead><tbody><tr><td><strong>1. Unternehmenswebsite<\/strong><\/td><td>Unternehmen vorstellen; Image aufbauen; Produkte\/Dienstleistungen pr\u00e4sentieren; Vertrauen schaffen; Kontaktm\u00f6glichkeiten bieten; neue Kunden gewinnen<\/td><td>Handwerksbetrieb, Versicherung, Autohaus<\/td><\/tr><tr><td><strong>2. Online-Shop \/ E-Commerce<\/strong><\/td><td>Produkte verkaufen; Umsatz erzielen; Produkte pr\u00e4sentieren; Bestellungen und Zahlungen erm\u00f6glichen; Kunden binden<\/td><td>Mode-Shop, Elektronik-Shop<\/td><\/tr><tr><td><strong>3. Informationswebsite<\/strong><\/td><td>Informationen bereitstellen; Wissen vermitteln; Sachverhalte erkl\u00e4ren; aktuelle Informationen ver\u00f6ffentlichen<\/td><td>Beh\u00f6rden, Verbraucherportale, Wikipedia<\/td><\/tr><tr><td><strong>4. Nachrichtenportal<\/strong><\/td><td>\u00dcber aktuelle Ereignisse informieren; Nachrichten verbreiten; Reichweite erzielen; teilweise Werbeeinnahmen oder Abonnements generieren<\/td><td>Zeitungen, Nachrichtensender<\/td><\/tr><tr><td><strong>5. Blog \/ Magazin<\/strong><\/td><td>Beitr\u00e4ge zu bestimmten Themen ver\u00f6ffentlichen; Erfahrungen oder Meinungen teilen; Leserschaft aufbauen; ggf. Werbung\/Affiliate-Marketing<\/td><td>Reiseblog, Technikblog, Foodblog<\/td><\/tr><tr><td><strong>6. Portfolio-Website<\/strong><\/td><td>Eigene Arbeiten und F\u00e4higkeiten pr\u00e4sentieren; Referenzen zeigen; pers\u00f6nliche Marke aufbauen; Auftraggeber oder Arbeitgeber gewinnen<\/td><td>Fotografen, Designer, Architekten<\/td><\/tr><tr><td><strong>7. Pers\u00f6nliche Website<\/strong><\/td><td>Person vorstellen; Interessen und Aktivit\u00e4ten darstellen; pers\u00f6nliche Inhalte ver\u00f6ffentlichen; Kontakt erm\u00f6glichen<\/td><td>private Homepage, pers\u00f6nliche Profilseite<\/td><\/tr><tr><td><strong>8. Vereins-\/Organisationswebsite<\/strong><\/td><td>Verein\/Organisation vorstellen; Mitglieder informieren; Termine ver\u00f6ffentlichen; neue Mitglieder gewinnen; Veranstaltungen pr\u00e4sentieren<\/td><td>Sportverein, Reitverein, NGO<\/td><\/tr><tr><td><strong>9. Schul-\/Bildungswebsite<\/strong><\/td><td>Schule\/Bildungseinrichtung vorstellen; Sch\u00fcler und Eltern informieren; Bildungsangebote pr\u00e4sentieren; Termine und Dokumente bereitstellen<\/td><td>Schule, Hochschule, Weiterbildung<\/td><\/tr><tr><td><strong>10. Landingpage<\/strong><\/td><td>Besucher zu&nbsp;<strong>einer ganz bestimmten Handlung<\/strong>&nbsp;bewegen; Produkt bewerben; Anmeldung erzeugen; Kontaktdaten sammeln; Kauf ausl\u00f6sen<\/td><td>Seite f\u00fcr ein neues Produkt oder einen Kurs<\/td><\/tr><tr><td><strong>11. Buchungs-\/Reservierungswebsite<\/strong><\/td><td>Dienstleistungen buchbar machen; Termine oder Verf\u00fcgbarkeiten anzeigen; Buchungen verwalten; Umsatz erzielen<\/td><td>Hotelbuchung, Reiseportal, Terminbuchung<\/td><\/tr><tr><td><strong>12. Community \/ Forum<\/strong><\/td><td>Menschen miteinander vernetzen; Diskussion erm\u00f6glichen; Erfahrungen austauschen; Gemeinschaft aufbauen<\/td><td>Fachforum, Hobby-Community<\/td><\/tr><tr><td><strong>13. Social-Media-Plattform<\/strong><\/td><td>Nutzer vernetzen; Inhalte teilen; Kommunikation erm\u00f6glichen; Reichweite und Interaktion erzeugen<\/td><td>Instagram, TikTok, LinkedIn<\/td><\/tr><tr><td><strong>14. Webportal \/ Serviceportal<\/strong><\/td><td>Verschiedene Dienste zentral anbieten; personalisierte Informationen bereitstellen; Prozesse online abwickeln<\/td><td>Kundenportal, B\u00fcrgerportal, Online-Banking<\/td><\/tr><tr><td><strong>15. Spenden-\/Kampagnenwebsite<\/strong><\/td><td>Aufmerksamkeit f\u00fcr ein Thema erzeugen; Unterst\u00fctzer gewinnen; Spenden sammeln; zu Handlungen motivieren<\/td><td>Tierschutzprojekt, Hilfsorganisation, politische Kampagne<\/td><\/tr><tr><td><strong>16. Veranstaltungswebsite<\/strong><\/td><td>Veranstaltung bewerben; Programm vorstellen; Besucher informieren; Tickets verkaufen bzw. Anmeldungen erm\u00f6glichen<\/td><td>Festival, Messe, Konzert, Schulfest<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u00dcbergeordnete Ziele einer Website<\/h3>\n\n\n\n<p>Unabh\u00e4ngig von der Kategorie lassen sich die Ziele noch einmal in einige&nbsp;<strong>Grundziele<\/strong>&nbsp;einteilen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Informieren<\/strong>&nbsp;\u2192 Wissen und Informationen vermitteln<\/li>\n\n\n\n<li><strong>Pr\u00e4sentieren<\/strong>&nbsp;\u2192 Unternehmen, Person, Verein oder Produkt darstellen<\/li>\n\n\n\n<li><strong>Verkaufen<\/strong>&nbsp;\u2192 Produkte oder Dienstleistungen verkaufen<\/li>\n\n\n\n<li><strong>Werben<\/strong>&nbsp;\u2192 Aufmerksamkeit und Bekanntheit erzeugen<\/li>\n\n\n\n<li><strong>Kommunizieren<\/strong>&nbsp;\u2192 Kontakt und Austausch erm\u00f6glichen<\/li>\n\n\n\n<li><strong>Interaktion erzeugen<\/strong>&nbsp;\u2192 Nutzer sollen kommentieren, teilen, bewerten etc.<\/li>\n\n\n\n<li><strong>Kunden gewinnen<\/strong>&nbsp;\u2192 Interessenten zu Kunden machen<\/li>\n\n\n\n<li><strong>Kunden binden<\/strong>&nbsp;\u2192 bestehende Kunden dauerhaft ansprechen<\/li>\n\n\n\n<li><strong>Service anbieten<\/strong>&nbsp;\u2192 Buchungen, Downloads, Formulare oder andere Funktionen bereitstellen<\/li>\n\n\n\n<li><strong>Image aufbauen<\/strong>&nbsp;\u2192 einen bestimmten Eindruck bzw. eine Marke vermitteln<\/li>\n<\/ul>\n\n\n\n<p>F\u00fcr deine&nbsp;<strong>H\u00f6here Handelsschule<\/strong>&nbsp;w\u00fcrde ich die Sch\u00fcler nicht einfach eine beliebige Homepage erstellen lassen. Interessanter w\u00e4re, ihnen unterschiedliche&nbsp;<strong>Website-Typen und Unternehmenssituationen<\/strong>&nbsp;zu geben. Dann m\u00fcssen sie zuerst&nbsp;<strong>Zielgruppe und Ziele analysieren<\/strong>&nbsp;und daraus Aufbau, Inhalte und Gestaltung ihrer Website ableiten. Das verbindet Informationswirtschaft gut mit Marketing\/BWL.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Aufgabe&nbsp;&nbsp;1 \u2013 Was macht eine gute Unternehmenswebsite aus?<\/h1>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\"><strong>Ziel:&nbsp;<\/strong>Websites untersuchen und Qualit\u00e4tskriterien entwickeln.<\/mark><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dein Arbeitsauftrag<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u00d6ffne auf deinem iPad die Internetauftritte von drei unterschiedlichen Unternehmen. W\u00e4hle m\u00f6glichst Unternehmen aus verschiedenen Branchen.<\/li>\n\n\n\n<li>\u00dcberlege: in welche Kategorie passt diese Homepage? Welche Ziele werden damit verfolgt? <\/li>\n\n\n\n<li>Untersuche bei jeder Website: erster Eindruck, \u00dcbersichtlichkeit, Navigation, Farben und Schriften, Bilder, Texte, Zielgruppe und Kontaktm\u00f6glichkeiten.<\/li>\n\n\n\n<li>Notiere <strong>zu jeder dieser Seiten<\/strong> mindestens drei Dinge, die dir gut gefallen, und zwei Dinge, die du verbessern w\u00fcrdest.<\/li>\n\n\n\n<li>W\u00e4hle anschlie\u00dfend deine beste Website aus und begr\u00fcnde deine Entscheidung mit mindestens f\u00fcnf Kriterien.<\/li>\n\n\n\n<li>Werde die Ziele der Homepage erreicht?<\/li>\n\n\n\n<li>Formuliere 8\u201310 Regeln f\u00fcr eine gute Unternehmenswebsite.<\/li>\n<\/ol>\n\n\n\n<p>Selbstkontrolle<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2610 Kann ein Besucher sofort erkennen, worum es geht?<\/li>\n\n\n\n<li>\u2610 Findet man wichtige Informationen schnell?<\/li>\n\n\n\n<li>\u2610 Wirkt die Seite auf dem iPad  \/ Rechner \u00fcbersichtlich?<\/li>\n\n\n\n<li>\u2610 Werden die Ziele erreicht?<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Arbeitsstand am Ende der Stunde<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Das habe ich heute fertiggestellt:<\/strong><\/td><td><br><\/td><\/tr><tr><td><strong>Das muss ich noch erledigen:<\/strong><\/td><td><br><\/td><\/tr><tr><td><strong>Dabei brauche ich noch Hilfe:<\/strong><\/td><td><br><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Abgabe\/Ergebnis: Vergleich von drei Websites + pers\u00f6nliche Top-5-Kriterien + gemeinsame Regeln.<\/strong><\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\"><strong>\u00dcberlege: Was ist das f\u00fcr eine Art von Homepage und welche Ziele werden damit verfolgt. Werden diese Ziele dadurch erreicht?<\/strong><\/mark><\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Dokumentiere Dein Ergebnis in Word!! Dateiname: Diff1-DeinName<\/mark><\/strong> <\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Aufgabe 2 \u2013 Wir gr\u00fcnden ein fiktives Unternehmen<\/h1>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\"><strong>Ziel:&nbsp;Eine Gesch\u00e4ftsidee und eine passende Zielgruppe entwickeln.<\/strong><\/mark><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dein Arbeitsauftrag<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Entscheide dich f\u00fcr ein fiktives Unternehmen, z. B. Caf\u00e9, Fitnessstudio, Reiseanbieter, Hundeschule, Modegesch\u00e4ft, Kosmetikstudio, Fahrradgesch\u00e4ft oder Eventagentur.<\/li>\n\n\n\n<li>Erstelle einen Unternehmenssteckbrief mit: Unternehmensname, Branche, Angebot, Standort (fiktiv), Zielgruppe und Besonderheit\/Alleinstellungsmerkmal.<\/li>\n\n\n\n<li>Beschreibe deine Zielgruppe genauer: Alter, Interessen, Bed\u00fcrfnisse und was diese Kunden von deiner Website erwarten.<\/li>\n\n\n\n<li>Lege 2\u20133 passende Unternehmensfarben fest.<\/li>\n\n\n\n<li>Entwirf ein einfaches Logo. Du kannst daf\u00fcr z. B. Canva nutzen oder selbst eine schlichte Wort-Bild-Marke gestalten.<\/li>\n\n\n\n<li>Formuliere einen kurzen Werbeslogan f\u00fcr dein Unternehmen.<\/li>\n<\/ol>\n\n\n\n<p><strong>Abgabe\/Ergebnis: Unternehmenssteckbrief + Zielgruppenbeschreibung + Logo\/Farbkonzept + Slogan.<\/strong><\/p>\n\n\n\n<p>Erg\u00e4nze dazu Dein schon vorhandenes Worddokument!!!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Selbstkontrolle<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2610 Passt die Idee zur Zielgruppe?<\/li>\n\n\n\n<li>\u2610 Sind Name, Farben und Logo stimmig?<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">Aufgabe 3: Wir konzipieren eine Homepage f\u00fcr unser Unternehmen<\/mark><\/h1>\n\n\n\n<p><strong>Ausgangssituation<\/strong><\/p>\n\n\n\n<p>Ihr habt bereits eine eigene Unternehmensidee entwickelt und zentrale Merkmale eures Unternehmens festgelegt. Im n\u00e4chsten Schritt plant ihr den Internetauftritt. Bevor eine Homepage technisch umgesetzt wird, muss genau \u00fcberlegt werden, welche Ziele sie verfolgt, welche Inhalte ben\u00f6tigt werden und wie Besucher durch die Seite gef\u00fchrt werden.<\/p>\n\n\n\n<p><strong>Wichtig:&nbsp;<\/strong>In dieser Phase wird die Homepage noch nicht programmiert bzw. mit einem Baukastensystem umgesetzt. Ihr erstellt zun\u00e4chst ein vollst\u00e4ndiges Konzept, das sp\u00e4ter als verbindliche Grundlage f\u00fcr die Umsetzung dient.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.Zielsetzung der Homepage festlegen<\/h3>\n\n\n\n<p>Beschreibt zun\u00e4chst m\u00f6glichst konkret, welche Aufgaben eure Homepage f\u00fcr das Unternehmen erf\u00fcllen soll. Formulierungen wie \u201eDas Unternehmen soll im Internet vertreten sein\u201c reichen nicht aus.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Formuliert ein Hauptziel der Homepage.<\/li>\n\n\n\n<li>Formuliert mindestens drei weitere Teilziele.<\/li>\n\n\n\n<li>Beschreibt, was ein Besucher nach dem Aufrufen der Homepage wissen, f\u00fchlen oder tun soll.<\/li>\n\n\n\n<li>Ordnet eure Ziele passenden Kategorien zu, z. B. informieren, Unternehmen pr\u00e4sentieren, Vertrauen schaffen, Produkte verkaufen, Dienstleistungen anbieten, Kunden gewinnen, Kontakt herstellen oder Kunden binden.<\/li>\n\n\n\n<li>Begr\u00fcndet kurz, warum diese Ziele zu eurer Unternehmensidee und eurer Zielgruppe passen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Zielgruppe auf die Homepage \u00fcbertragen<\/h3>\n\n\n\n<p>Nutzt eure bereits erstellte Zielgruppenbeschreibung. \u00dcberlegt nun nicht mehr nur, wer eure Kunden sind, sondern welche Folgen dies f\u00fcr die Gestaltung der Homepage hat.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Welche Informationen erwartet eure Zielgruppe auf der Homepage?<\/li>\n\n\n\n<li>Welche Sprache und Ansprache ist passend (z. B. sachlich, locker, pers\u00f6nlich, Du\/Sie)?<\/li>\n\n\n\n<li>Welche Bilder und Visualisierungen passen zur Zielgruppe?<\/li>\n\n\n\n<li>Welche Funktionen ben\u00f6tigt die Zielgruppe besonders?<\/li>\n\n\n\n<li>Welche Anforderungen ergeben sich an \u00dcbersichtlichkeit, Lesbarkeit und Bedienung?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Inhalte der Homepage planen<\/h3>\n\n\n\n<p>Legt fest, welche Inhalte tats\u00e4chlich ben\u00f6tigt werden. Nennt nicht nur Seitennamen, sondern beschreibt f\u00fcr jede Seite konkret, was dort zu sehen bzw. zu lesen sein soll.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Seite<\/strong><\/td><td><strong>Ziel der Seite<\/strong><\/td><td><strong>Konkrete Inhalte<\/strong><\/td><td><strong>Gew\u00fcnschte Aktion des Besuchers<\/strong><\/td><\/tr><tr><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><\/tr><tr><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><\/tr><tr><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><\/tr><tr><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><\/tr><tr><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><td>&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Plant mindestens die Startseite sowie die f\u00fcr euer Unternehmen notwendigen Unterseiten. Denkt \u2013 sofern passend \u2013 an Angebot\/Produkte, Leistungen, \u00dcber uns, Beratung\/Service, Kontakt, FAQ sowie rechtlich erforderliche Seiten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Sitemap \u2013 Seitenstruktur entwickeln<\/h3>\n\n\n\n<p>Erstellt eine Sitemap. Sie zeigt die hierarchische Struktur eurer Website und macht sichtbar, welche Seiten \u00fcber die Hauptnavigation erreichbar sind und welche Unterseiten dazugeh\u00f6ren.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Startseite muss den Ausgangspunkt bilden.<\/li>\n\n\n\n<li>Kennzeichnet alle Punkte der Hauptnavigation.<\/li>\n\n\n\n<li>Ordnet Unterseiten eindeutig zu.<\/li>\n\n\n\n<li>Die Navigation soll logisch, verst\u00e4ndlich und nicht unn\u00f6tig umfangreich sein.<\/li>\n\n\n\n<li>Verwendet eindeutige Bezeichnungen, die Besucher sofort verstehen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5. Startseite detailliert konzipieren<\/h3>\n\n\n\n<p>Die Startseite ist besonders wichtig. Plant sie deshalb Abschnitt f\u00fcr Abschnitt von oben nach unten.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Header: Logo, Unternehmensname und Hauptnavigation.<\/li>\n\n\n\n<li>Hero-\/Einstiegsbereich: aussagekr\u00e4ftige \u00dcberschrift, kurzer Einf\u00fchrungstext und passendes Hauptbild.<\/li>\n\n\n\n<li>USP: Was macht euer Unternehmen besonders?<\/li>\n\n\n\n<li>Wichtigste Angebote\/Produkte\/Leistungen: Welche Bereiche sollen direkt sichtbar sein?<\/li>\n\n\n\n<li>Vertrauenselemente: z. B. Beratung, Qualit\u00e4t, Bewertungen, Erfahrung, Nachhaltigkeit, regionale Herkunft oder Garantien.<\/li>\n\n\n\n<li>Call-to-Action: Welche konkrete Handlung soll der Besucher ausf\u00fchren?<\/li>\n\n\n\n<li>Kontakt-\/Serviceinformationen: z. B. Adresse, \u00d6ffnungszeiten, Telefonnummer, E-Mail.<\/li>\n\n\n\n<li>Footer: wichtige Links sowie Impressum und Datenschutz.<\/li>\n<\/ul>\n\n\n\n<p>Formuliert f\u00fcr die wichtigsten Bereiche bereits konkrete \u00dcberschriften und kurze Beispieltexte. Schreibt also nicht nur \u201eHier kommt ein Text \u00fcber das Unternehmen\u201c.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Wireframe der Startseite erstellen<\/h2>\n\n\n\n<p>Zeichnet einen Wireframe der Startseite. Ein Wireframe ist eine vereinfachte Skizze, die zeigt, wo sich die wichtigsten Elemente befinden. Es geht zun\u00e4chst um Aufbau und Benutzerf\u00fchrung \u2013 nicht um eine perfekte grafische Gestaltung.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Position von Logo und Navigation<\/li>\n\n\n\n<li>Hero-Bereich mit \u00dcberschrift, Bild und Button<\/li>\n\n\n\n<li>Anordnung der wichtigsten Inhaltsbereiche<\/li>\n\n\n\n<li>Position von Bildern, Texten, Produkt-\/Leistungskarten und Buttons<\/li>\n\n\n\n<li>Footer<\/li>\n<\/ul>\n\n\n\n<p>Beschriftet alle Bereiche eindeutig. Der Wireframe kann sauber von Hand oder digital erstellt werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Designkonzept festlegen<\/h3>\n\n\n\n<p>\u00dcbertragt das bereits entwickelte Erscheinungsbild eures Unternehmens auf die Website.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Unternehmensfarben mit konkreten Farbcodes<\/li>\n\n\n\n<li>Festlegung, welche Farbe als Haupt-, Hintergrund- und Akzentfarbe verwendet wird<\/li>\n\n\n\n<li>Schriftarten bzw. Schriftwirkung f\u00fcr \u00dcberschriften und Flie\u00dftext<\/li>\n\n\n\n<li>Gestaltung von Buttons und anderen Bedienelementen<\/li>\n\n\n\n<li>Bildstil: z. B. nat\u00fcrlich, hochwertig, technisch, modern, emotional<\/li>\n\n\n\n<li>Verwendung und Position des Logos<\/li>\n\n\n\n<li>Begr\u00fcndung, warum das Design zu Unternehmen, Zielgruppe und Zielsetzung passt<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">8. Benutzerf\u00fchrung und Funktionen planen<\/h3>\n\n\n\n<p>\u00dcberlegt, wie ein Besucher m\u00f6glichst einfach sein Ziel erreicht.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Welche Funktionen ben\u00f6tigt die Website (z. B. Suche, Filter, Warenkorb, Kontaktformular, Terminbuchung, Newsletter)?<\/li>\n\n\n\n<li>Welche Buttons\/Handlungsaufforderungen werden ben\u00f6tigt?<\/li>\n\n\n\n<li>Wie gelangt der Besucher von der Startseite zu wichtigen Angeboten?<\/li>\n\n\n\n<li>Wie kommt er jederzeit zur\u00fcck bzw. zu anderen Bereichen?<\/li>\n\n\n\n<li>Welche Inhalte m\u00fcssen auch auf dem Smartphone schnell erreichbar sein?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">9. Qualit\u00e4tspr\u00fcfung<\/h3>\n\n\n\n<p>Pr\u00fcft euer Konzept abschlie\u00dfend anhand folgender Fragen:<\/p>\n\n\n\n<p>\u2610 Ist innerhalb weniger Sekunden erkennbar, um welches Unternehmen es geht?<\/p>\n\n\n\n<p>\u2610 Passt die Homepage eindeutig zur Zielgruppe?<\/p>\n\n\n\n<p>\u2610 Unterst\u00fctzt jede wichtige Seite mindestens ein Ziel des Unternehmens?<\/p>\n\n\n\n<p>\u2610 Sind Navigation und Seitenstruktur verst\u00e4ndlich?<\/p>\n\n\n\n<p>\u2610 Sind die wichtigsten Informationen schnell erreichbar?<\/p>\n\n\n\n<p>\u2610 Gibt es klare Handlungsaufforderungen?<\/p>\n\n\n\n<p>\u2610 Ist das Design einheitlich und passend?<\/p>\n\n\n\n<p>\u2610 Ist die Website auch f\u00fcr die Nutzung auf Smartphone und Tablet gedacht?<\/p>\n\n\n\n<p>\u2610 Sind Kontakt, Impressum und Datenschutz ber\u00fccksichtigt?<\/p>\n\n\n\n<p>\u2610 Sind unn\u00f6tige Inhalte oder Funktionen vermieden worden?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">10. Abgabe<\/h3>\n\n\n\n<p>Euer Homepagekonzept muss in einer \u00fcbersichtlichen Dokumentation abgegeben werden. Es enth\u00e4lt mindestens:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Zielsetzung der Homepage mit Begr\u00fcndung<\/li>\n\n\n\n<li>\u00dcbertragung der Zielgruppenmerkmale auf die Webgestaltung<\/li>\n\n\n\n<li>Inhaltsplanung der einzelnen Seiten<\/li>\n\n\n\n<li>Sitemap<\/li>\n\n\n\n<li>detaillierte Planung der Startseite mit konkreten Textideen<\/li>\n\n\n\n<li>Wireframe der Startseite<\/li>\n\n\n\n<li>Designkonzept<\/li>\n\n\n\n<li>geplante Funktionen und Benutzerf\u00fchrung<\/li>\n\n\n\n<li>abschlie\u00dfende Qualit\u00e4tspr\u00fcfung<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00f6gliche L\u00f6sung Aufgabe 1: <\/h2>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2026\/09\/Microsoft-Word-LoesAuf1-2026.docx.pdf\" type=\"application\/pdf\" style=\"width:100%;height:600px\" aria-label=\"Embed of Microsoft Word - L\u00f6sAuf1-2026.docx.\"><\/object><a id=\"wp-block-file--media-3d0ec304-8250-44ce-8ef4-73d2fcdc4681\" href=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2026\/09\/Microsoft-Word-LoesAuf1-2026.docx.pdf\">Microsoft Word &#8211; L\u00f6sAuf1-2026.docx<\/a><a href=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2026\/09\/Microsoft-Word-LoesAuf1-2026.docx.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-3d0ec304-8250-44ce-8ef4-73d2fcdc4681\">Download<\/a><\/div>\n\n\n\n<p>M\u00f6gliche L\u00f6sung Aufgabe 2<\/p>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2026\/10\/LoesAuf2-2026.pdf\" type=\"application\/pdf\" style=\"width:100%;height:600px\" aria-label=\"Embed of L\u00f6sAuf2-2026.\"><\/object><a id=\"wp-block-file--media-994b1c7b-3632-4c68-adad-d50071fb05cb\" href=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2026\/10\/LoesAuf2-2026.pdf\">L\u00f6sAuf2-2026<\/a><a href=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2026\/10\/LoesAuf2-2026.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-994b1c7b-3632-4c68-adad-d50071fb05cb\">Download<\/a><\/div>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2026\/10\/WebDesignA3-Musterloesung.pdf\" type=\"application\/pdf\" style=\"width:100%;height:600px\" aria-label=\"Embed of WebDesignA3-Musterl\u00f6sung.\"><\/object><a id=\"wp-block-file--media-9199871e-5254-48f1-a979-5b3b53d23b0a\" href=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2026\/10\/WebDesignA3-Musterloesung.pdf\">WebDesignA3-Musterl\u00f6sung<\/a><a href=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2026\/10\/WebDesignA3-Musterloesung.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-9199871e-5254-48f1-a979-5b3b53d23b0a\">Download<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>F\u00fcr diese Aufgabenstellung kann sowohl mit einen Computer (zum Beispiel in der Schule), aber auch mit dem iPad gearbeitet werden. Info Man kann Homepages bzw. Websites gut nach ihrem&nbsp;Hauptzweck&nbsp;kategorisieren. Dies ist eine m\u00f6gliche Einteilung Art der Homepage Typische Ziele Beispiele 1. Unternehmenswebsite Unternehmen vorstellen; Image aufbauen; Produkte\/Dienstleistungen pr\u00e4sentieren; Vertrauen schaffen; Kontaktm\u00f6glichkeiten bieten; neue Kunden gewinnen &hellip; <a href=\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wfh12-webdesign\/wir-erstellen-eine-eigene-homepage\/\" class=\"more-link\"><span class=\"screen-reader-text\">Wir erstellen eine eigene Homepage<\/span> weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":8471,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10066","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-json\/wp\/v2\/pages\/10066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-json\/wp\/v2\/comments?post=10066"}],"version-history":[{"count":14,"href":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-json\/wp\/v2\/pages\/10066\/revisions"}],"predecessor-version":[{"id":10115,"href":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-json\/wp\/v2\/pages\/10066\/revisions\/10115"}],"up":[{"embeddable":true,"href":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-json\/wp\/v2\/pages\/8471"}],"wp:attachment":[{"href":"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-json\/wp\/v2\/media?parent=10066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}