{"id":3433,"date":"2013-08-27T09:35:48","date_gmt":"2013-08-27T08:35:48","guid":{"rendered":"http:\/\/www.zeichenschatz.net\/?p=3433"},"modified":"2013-08-27T09:35:48","modified_gmt":"2013-08-27T08:35:48","slug":"webdesign-schritt-fur-schritt-entstehungsprozess-einer-website","status":"publish","type":"post","link":"https:\/\/zeichenschatz.net\/en\/webdesign\/webdesign-schritt-fur-schritt-entstehungsprozess-einer-website\/","title":{"rendered":"Webdesign Schritt f\u00fcr Schritt \u2013 Entstehungsprozess einer Website"},"content":{"rendered":"<p class=\"leadin\">Wie entsteht ein Website? Welche Schritte folgen auf einander? Wo passieren Fehler und wie kann man diese vermeiden? Nat\u00fcrlich f\u00fchren viele Wege zur fertigen Website, meinen pers\u00f6nlichen m\u00f6chte ich hier erl\u00e4utern. Dieser hat sich aus den Erfahrungen der letzten Jahre als Webdesigner ergeben und hilft anderen vielleicht weiter.<\/p>\n<p>Mein Prozess ist nicht in Stein gemei\u00dfelt, eher mit Kreide aufgemalt, damit er laufend optimiert werden kann. In den kommenden Beitr\u00e4gen werde ich auf die einzelnen Schritte im Detail eingehen. Doch zuerst einmal ein \u00dcberblick:<\/p>\n<h3>Drei Phasen<\/h3>\n<p>Ich gliedere die Geburt einer Website in drei gro\u00dfe Phasen, die wiederum jeweils in drei Einzelschritte unterteilt sind:<\/p>\n<ol>\n<li><strong>Vorbereitung<\/strong> \u2013 <a title=\"Analyse einer Website \u2013 Webdesign beurteilen\" href=\"https:\/\/zeichenschatz.net\/en\/blog\/web\/analyse-einer-website-webdesign-beurteilen.html\/\">Analyse<\/a>, <a title=\"Analyse einer Website \u2013 Webdesign beurteilen\" href=\"https:\/\/zeichenschatz.net\/en\/blog\/web\/analyse-einer-website-webdesign-beurteilen.html\/\">Briefing<\/a> und Konzept<\/li>\n<li><strong>Gestaltung<\/strong> \u2013 Contenterstellung, grafische und technische Gestaltung<\/li>\n<li><strong>Umsetzung<\/strong> \u2013 Zusammenf\u00fchren, testen, Launch<\/li>\n<\/ol>\n<p>Wichtig ist, dass diese Phasen und Schritte <strong>nicht in sich abgeschlossen<\/strong> sind. Auf dem Weg zur fertigen Website bewege ich mich vor und zur\u00fcck. Es werden manche Schritte \u00fcbersprungen, andere kommen hinzu oder werden genauer gemacht. Auch die Reihenfolge kann sich \u00e4ndern. Dieses Modell zeigt eine Idealsituation, die es so nur selten gibt. Es wichtig f\u00fcr jedes Projekt ein individuell passendes Vorgehen zu finden.<\/p>\n<h3>Vorbereitung<\/h3>\n<p>Hier wird der Grundstein von allem gelegt. Diese Phase ist wohl noch am ehesten in sich abgeschlossen, wobei es nat\u00fcrlich m\u00f6glich ist, das im Zuge der Umsetzung auch das Konzept etwas angepasst wird.<\/p>\n<h4>1. <a title=\"Analyse einer Website \u2013 Webdesign beurteilen\" href=\"https:\/\/zeichenschatz.net\/en\/blog\/web\/analyse-einer-website-webdesign-beurteilen.html\/\">Analyse<\/a><\/h4>\n<p>Nicht immer ist die <a title=\"Analyse einer Website \u2013 Webdesign beurteilen\" href=\"https:\/\/zeichenschatz.net\/en\/blog\/web\/analyse-einer-website-webdesign-beurteilen.html\/\">Analyse<\/a> notwendig, doch wenn es sich um das Redesign einer bestehenden Website handelt oder es um das Beurteilen der Websites der Konkurrenz geht, ist diese sehr praktisch.<\/p>\n<h4>2. <a title=\"Website-Briefing: Vorgehensweise und Fragebogen\" href=\"https:\/\/zeichenschatz.net\/en\/blog\/web\/website-briefing-vorgehensweise-und-fragebogen.html\/\">Briefing<\/a><\/h4>\n<p>Das <a title=\"Website-Briefing: Vorgehensweise und Fragebogen\" href=\"https:\/\/zeichenschatz.net\/en\/blog\/web\/website-briefing-vorgehensweise-und-fragebogen.html\/\">Briefing<\/a> bildet den Ausgangspunkt von allem. Hier lernt man das Projekt kennen, Ziele und Zielpublikum werden definiert. Je genauer man es macht desto mehr \u00c4rger und Fragen erspart man sich sp\u00e4ter im Prozess.<\/p>\n<h4>3. Konzept<\/h4>\n<p>Nach einem ausf\u00fchrlichen Briefing mit klarer Zieldefinition kann man sich an die Konzeption der Seite machen. Hier werden der <strong>Aufbau<\/strong> der Website mittels einer Sitemap, die <strong>Navigationsstruktur, Seitenelemente<\/strong> und <strong>Contentarten<\/strong> definiert. Das ganze wird mittels <a title=\"Praktisch um kostlenlos Mockups zu erstllen\" href=\"https:\/\/moqups.com\/\">Mockups<\/a> schematisch skizziert.<\/p>\n<h3>Gestaltung<\/h3>\n<p>Sobald Ziele und Konzept stehen geht es an die Gestaltung, womit nicht nur die grafische gemeint ist. Es geht um das Erstellen von Inhalten, Design und Code, den Bausteinen einer jeden Website.<\/p>\n<h4>4. Contenterstellung<\/h4>\n<p>Auch ohne das fertige Design kann und sollte mit der Erstellung des Inhalts angefangen werden. Der <strong>Inhalt ist das Wichtigste<\/strong> einer Website, denn wegen diesem wird sie besucht. Der Content sollte qualitativ hochwertig, sinnvoll, auf den Punkt gebracht und f\u00fcr Suchmaschinen optimal sein. Mit Content sind nicht nur Texte gemeint, auch Fotos, Grafiken, Videos, Audiofiles, etc..<\/p>\n<h4>5. Grafische Gestaltung<\/h4>\n<p>Anstatt gleich das Aussehen der fertige Website zu designen arbeite ich oft noch vor einem konkreten Entwurf Moodboards oder <a title=\"Erkl\u00e4rung zu Style Tiles\" href=\"http:\/\/styletil.es\">Style Tiles<\/a> aus. Auf Basis dieser erstelle ich das Design der Website anhand von <strong>zwei bis drei Beispielseiten<\/strong> noch in Photoshop oder Fireworks. Wenn das Design freigegeben wurde wird das Grunddesign in HTML und CSS umgesetzt. Die weiteren Schritte des Designs erfolgen dann im Browser.<\/p>\n<h4>6. Technische Gestaltung<\/h4>\n<p>Schon vor der Fertigstellung des grafischen Designs kann das Content Management System (CMS) aufgesetzt werden um fr\u00fch die Eingabe der Inhalte zu erm\u00f6glichen. Auf Basis des Konzepts lassen sich auch die wesentlichen Funktionen der Website programmieren. Ziel ist es bald einen <strong>klickbaren Prototyp<\/strong> zu haben. Das Design und die Inhalte m\u00fcssen hier noch nicht vollst\u00e4ndig vorhanden oder intergriert sein.<\/p>\n<h3>Umsetzung<\/h3>\n<p>Content, Code und Design werden vereint, getestet und die Website geht an die \u00d6ffentlichkeit. Diese Phase ist eine eigene Herausforderung, da alles auf einmal konkret wird. Vor allem den Atem zu behalten ist hier manchmal schwierig.<\/p>\n<h4>7. Zusammenf\u00fchren<\/h4>\n<p>Sp\u00e4testens jetzt sollten Inhalte in das CMS eingegeben und das Design optmiert werden. Fehlende Inhalte, Templates und Designelemente werden erstellt und umgesetzt. Die Website kann dabei mit dem echten Content beurteilt werden.<\/p>\n<h4>8. Testphase<\/h4>\n<p><strong>Qualit\u00e4tssicherung<\/strong>\u00a0von Content, Code und Design. Hier werden technische Fehler (Bugs) behoben und der Text lektoriert. Im Idealfall wird die Seite von Testpersonen mit bestimmten Aufgabenstellungen durchgeklickt (Usability Testing). So wird alles so lange optimiert, bis man zufrieden ist.<\/p>\n<h4>9. Launch<\/h4>\n<p>Die Website ist bereit ver\u00f6ffentlicht zu werden. Vorher sollte alles noch <strong>ein letzte Mal durchgecheckt<\/strong> werden. Falls m\u00f6glich startet man nicht vor gro\u00dfer \u00d6ffentlichkeit, sondern eher im Hintergrund, denn Fehler k\u00f6nnen auch hier noch passieren. Sobald die Seite online ist sollte man nach ein paar Wochen mit gesammelten <strong>Erfahrungen und Feedback<\/strong> schauen, was man noch verbessern sollte. Dieser Schritt ist fortlaufend. Au\u00dferdem kommen oft neue Inhalte dazu, die vielleicht wieder Anpassungen ben\u00f6tigen. Das Spiel spielt man so lange, bis die Website den gegeben Anforderungen nicht mehr entspricht oder schlicht visuell bzw. technisch angepasst werden muss. Dann sehen uns wieder bei Schritt 1.<\/p>\n<h3>Wie geht ihr vor?<\/h3>\n<p>Wie ist euer Prozess zur Erstellung einer Website? Welche Phase ist f\u00fcr euch am herausfordernsten und wo w\u00fcrdet ihr noch etwas erg\u00e4nzen? Ich bin auf eure Kommentare gespannt!<\/p>","protected":false},"excerpt":{"rendered":"<p>Wie entsteht ein Website? Welche Schritte folgen auf einander? Wo passieren Fehler und wie kann man diese vermeiden? Nat\u00fcrlich f\u00fchren viele Wege zur fertigen Website, meinen pers\u00f6nlichen m\u00f6chte ich hier erl\u00e4utern. Dieser hat sich aus den Erfahrungen der letzten Jahre als Webdesigner ergeben und hilft anderen vielleicht weiter. Mein Prozess ist nicht in Stein gemei\u00dfelt, [&hellip;]<\/p>","protected":false},"author":3,"featured_media":3441,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-3433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"_links":{"self":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/3433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/comments?post=3433"}],"version-history":[{"count":0,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/3433\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media\/3441"}],"wp:attachment":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media?parent=3433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/categories?post=3433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/tags?post=3433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}