Heute möchte ich mit einem kleinen Webseiten-Tutorial beginnen, in dem ich Schritt für Schritt die einzelnen Arbeitsprozesse bei der Entstehung einer Webseite beschreibe. Denn natürlich hilft es sehr, die neusten Tools und Webdesign-Trends zu kennen. Doch sich selbst an die Arbeit zu machen, ist noch einmal eine ganz anderes Kapitel ;-) Daher hoffe ich, dir mit meinem Tutorial jede Menge Tipps und Inspirationen für die Gestaltung deiner eigenen Webseite geben zu können.
Die Webseiten-Idee
Da Kaffee und Muffins ein wahres Dreamteam sind, und ich diese beiden Kandidaten auch gerade vor mir stehen hatte, musste ich nicht lange überlegen, zu welchem Thema ich eine neue Webseite gestalten möchte. Die Idee zur Webseite »My Coffee Love« war geboren.
1. Inspirationen sammeln
Als erster Schritt bei der Entstehung einer neuen Webseite steht erst einmal die Recherche, Inspiration und Ideensammlung an. Man kann eigentlich so ziemlich überall nach Inspirationen suchen. Du kannst z.B. die Google-Bildersuche, Flickr, Delicious oder StumbleUpon nutzen. Auch Webseiten-Galerien wie BestWebGallery oder MakeBetterWebsites sind sehr hilfreich. Manchmal ist es natürlich auch bereichernd mit einer Digicam ausgestattet durch die Stadt oder die Natur zu streifen, um Eindrücke zu sammeln.
1.1. Das Imageboard
Als Ergebnis der Inspirations-Phase hilft es, wenn du dir ein Imageboard anzulegst. Ein Imageboard ist eine Collage, auf der du deine Ideen sammelst. Du kannst so während des Design-Prozesses immer wieder Bezug auf deine Ideen-Sammlung nehmen.
Mein Webdesign soll eine Kombination aus der bunten, Cupcake-Candy-Welt und Elementen aus der alten Kaffeehändler-Kultur in Sumatra oder Java, wie z.B. alten Landkarten, Fotografien oder Kupferstichen werden.
1.2. Inspirierende Webseiten
Bei der Planung einer neuen Webseite sollte man sich natürlich immer anschauen, was andere Webdesigner schon zum Thema gestaltet haben. So kannst du Inspirationen sammeln und gleichzeitig besser erkennen, was du selbst anders machen möchtest.
Für meine Idee einer Café-Webseite, haben mich folgende Webseiten besonders inspiriert.
Marie Catribs
Der großzügige Header, die von Hand geschriebenen Texte, und die Texturen haben mir bei dieser Webseite besonders gefallen.
Art in My Coffee
Bei Art in My Coffee finde ich das Logo und die Aufteilung der Webseiten-Elemente besonders gelungen.
Cake Spy
Die Farben und Produkte im Shop haben mich auf dieser Webseite inspiriert.
Weitere Inspirationen zum Thema Kaffee findest du auch in den Artikeln »25 kreative Logos zum Thema Kaffee« und »16 inspirierende Kaffee-Webseiten«.
2. Material für das Webdesign sammeln
2.1. Muster, Texturen und Photoshop-Pinselsets und Photoshop-Actions
Bevor es mit der Gestaltung der Webseite los geht, kannst du dir hilfreiches Material für die Arbeit in Photoshop oder Illustrator zusammen stellen. Für meine Café-Webseite habe ich nach grungy Photoshop-Pinseln, Papiertexturen, Mustern, und natürlich Kaffeetassen-Abdrücken gesucht.
Photoshop-Muster (.pat Dateien)
Nahtlose Photoshop-Muster sind besonders praktisch, um Hintergründe für eine Webseite zu erstellen.
(DeviantART crazykira-resources)
(Seamless Paper Patterns von Webtreats)
Eine riesige Muster-Sammlung findest du auch auf dem Speckboy-Blog.
Papier-Texturen (als jpg-Dateien)
(Paper Stock Texturen von crazykira-resources)
(Restained Paper via Bittbox)
Photoshop-Pinselspitzen
(High Res Grungy Texture Photoshop-Pinsel via Bittbox)
(Cup Stains via Brushking)
Photoshop-Actions
(Photoshop-Action: Aged Type Effect via GoMediaZine)
Pinsel, Actions und Patterns kannst du übrigens für Photoshop installieren, indem du in deinem Photoshop-Programmordner unter Presets die Dateien einsortierst, und sie dann im jeweiligen Fenster (z.B. Pinsel) unter Optionen / Pinsel laden aufrufst.
2.2. Farben auswählen
Hast du genug Texturen und Pinsel für dein Webdesign ausgewählt ist es außerdem hilfreich, ein Farbschema für die Gestaltung anzulegen. So kannst du später leichter auf die Farbwerte zugreifen und die Farbauswahl hilft dir, dein Design stimmig durch zu gestalten.
Die Café-Webseite möchte ich in den Farben Braun, Altrosa und Hellblau gestalten.
Hilfreiche Farb-Tools für die Zusammenstellung eines Farbschemas sind u.a. der Colorschemedesigner oder Colorblender. Weitere interessante Tools findest du auch in der Auflistung »10 praktische Online-Tools für Webdesigner«.
2.3. Auswahl der Schriften
Als letzten Schritt der Materialsammlung für dein Webdesign solltest du dir Gedanken machen, welche Schriften du für das Logo, die Überschriften und den Fließtext deiner Webseite verwenden möchtest. Natürlich ist diese erste Sammlung nur ein Anhaltspunkt, und du solltest während des Designs noch andere Schriften ausprobieren. Es hilft aber dennoch sehr, sich vorab schon ein paar Gedanken zur Schriftauswahl zu machen.
Für das Café-Wedesign habe ich mir folgende Schriften zusammen gestellt.
Schrift für das Webseiten-Logo
Pupcat
Fontleroy Brown
Garton
Schriften für die Überschriften
Droid Serif
Old Standard TT
Goudy Bookletter 1911
Überlegungen zum Fließtext
Times New Roman oder Georgia
Jetzt haben wir wirklich schon jede Menge Material für das Webdesign gesammelt. Im nächsten Teil des Tutorials geht es dann weiter mit der Skizzen-Phase des Webseiten-Layouts.
Ich hoffe dir hat der erste Teil der Serie gefallen, und du hast ein paar neue Ideen für die Phase der Inspiration und Materialsammlung eines Webdesigns bekommen. Über deine Tipps und dein Feedback freue ich mich sehr!
Schöner Artikel. Vielen Dank!
Hallo Caro,
vielen Dank für dein Feedback. Es freut mich sehr, dass dir der Artikel gefallen hat :-)
Viele Grüße
Ellen
Schöner Artikel, macht - wie bei dem Maskottchen-Making-Of echt Spaß mal zu sehen wie andere an die Sache rangehen. Bin auf die Fortsetzung gespannt!
Hallo Justus,
vielen Dank für dein tolles Feedback :-) Du hast Recht, jeder Designer geht ja immer ein bisschen anders an den Design-Prozess heran und ein bisschen kommt es sicher auch auf das Thema der Webseite und das Projekt an.
Die Fortsetzung folgt auf jeden Fall noch diese Woche :-)
Viele Grüße
Ellen
Mein erster Gedanke als ich die Überschrift gelesen habe:
»Eine neue Webseite entsteht« … und wiso nicht meine?
Es ist sehr interessant zu lesen wie andere an die Problematik eines lehren Blatt papiers (oder einer leeren Datei) rangehen. Wo man anfängt, etc.
Ich wundere mich jedoch, wiso du dir zu beginn die Webseiten der Mitbewerber anschaust? Ich habe die Erfahrung gemacht, dass wenn man sich erst anschaut wie andere das gemacht haben, dass die eigene Kreativität massiv einschränkt. Warum? Weil man dann schon unterbewusst den Gedanken hat: »So muss eine Webseite aussehen die sich mit XYZ beschäftigt«.
Ich bin an mein eigenes Design so rangegangen, dass ich erstmal drauflos gebastelt habe, und erst als das Grundgerüßt stand mich mit anderen meiner Branche verglichen habe (und beschlossen habe, meine Arbeit wäre nicht gut genug - aber das ist ein anderes Kapitel :) )
Grüße
Edward
Hallo Edward,
vielen Dank für dein tolles Feedback :-) Ich finde deine Frage, warum ich mir erst andere Webseiten anschaue sehr interessant.
Natürlich hat da jeder Designer seine eigene Vorgehensweise. Meiner Meinung nach ist es sehr hilfreich wenn man sich anschaut, wie andere Designer quasi die gleiche Aufgabe gelöst haben. So kann ich mich orientieren und in die Thematik einleben, und anschließend von dieser Ausgangsbasis meine eigenen Ideen und Entwürfe entwickeln.
Dein Argument, dass dich diese Vorgehensweise in deiner eigenen Kreativität einschränkt, ist natürlich nicht unberechtigt. Ich denke, dass es wichtig ist sich erst inspirieren zu lassen. Anschließend kann man diese Anhaltspunkte wieder loslassen, um dann mit seiner eigenen Arbeit und dem kreativen Prozess zu beginnen. Aus meiner Erfahrung kann man sich so viel unnötige Arbeit sparen und effektiver arbeiten.
Ich hoffe meine Antwort hilft dir dabei, meine Arbeitsweise im Tutorial etwas besser nachvollziehen zu können :-)
Vielen Dank noch einmal für dein ausführliches Kommentar, viele Grüße
Ellen
Vielen Dank für den Artikel!
Habe ihn zwar bisher nur überflogen, aber schon jetzt viele hilfreiche Ressourcenquellen entdeckt… Wenn meine Prüfungen vorbei sind, werde ich mir das alles nochmal ganz genau anschauen und ich freue mich schon auf Teil 2!
Viele Grüße
Hallo Codebold,
vielen Dank für deinen netten Kommentar. Es freut mich sehr, dass du meine Tipps und Inspirationsquellen hilfreich findest :-)
Ich wünsche dir ganz viel Erfolg bei deinen Prüfungen :-)
Viele Grüße
Ellen
eventuell habe ich die falschen Kunden ;) doch zu 90% sind entweder die Schriften oder die Farben oder oder bereits fix vorgegeben - soviel Freiheit habe ich zu 90% nur bei eigenen Projekten -
leider!
Hallo Monika,
vielen herzlichen Dank für deinen Kommentar :-)
Ja, da hast du natürlich Recht! Bei Kundenprojekten sind Schriften, Farben das Logo etc. leider schon oft im CI festgelegt. Doch manchmal hat man auch Glück und ein Kunde wünscht sich etwas Frisches, Neues oder er/sie gründet gerade erst eine neue Firma. Dann kann man sich oft ein wenig mehr austoben ;-)
Viele Grüße
Ellen
Wunderbarer Artikel. Ich habe nun auch schon einige Webseiten »auf dem Buckel« und weiß wie schwierig es sein kann, im Vorfeld eines Webprojekts die notwendige Ruhe zu finden, um Inspirationen den Eingang ins Hirn zu erleichtern. Ich selbst verzettel mich zu schnell in Details. Um so angenehmer ist es deinen Artikel zu lesen, denn aus ihm strahlt das gewisse Maß an konstruktiver Gelassenheit, welche ich mir immer wieder für mich selbst wünsche.
Ich freue mich auf die Fortsetzung …
Viele Grüße vom Bodensee
Jörg
Hallo Jörg,
vielen herzlichen Dank für dein wunderbares Feedback. Deine Worte haben mich wirklich sehr gefreut :-)
Ja, das stimmt. In der Welt des Webdesigns, mit so vielen Inspirationsquellen und ständig neuen, spannenden Trends ist es oftmals schwer, sich auf das eigene Projekt zu konzentrieren.
Bei einem neuen Projekt versuche ich daher immer erst eine grobe Idee im Kopf zu haben. Dann suche ich nach passenden Inspirationen für diese Idee, sammele Materialien etc. Und wenn ich einmal mit dem Designprozess begonnen habe, schaue ich eigentlich keine anderen Webseiten oder Inspirationen mehr an, um mich nicht verunsichern oder von meinem Konzept abbringen zu lassen.
Ich freue mich auch schon sehr darauf, mit dem Tutorial weiter zumachen :-)
Viele Grüße,
Ellen
Moin erstmal,
ich muss sagen, ich bin sehr auf die nächsten Teile gespannt.
Als angehender Mediengestalter habe ich mir noch keinen Stil angeeignet wie ich eine Homepage erstelle, daher ist das Tutorial absolut hilfreich. Ich finde derzeit noch die Umsetzung in HTML/ CSS noch am schwierigsten - daher die Spannung auf die nächsten Teile.
Ausserdem kämpfe ich mit der Umsetzung in ein System - hast du in diesem Tutorial vor darauf einzugehen?
Greetinx Nick
Hallo Nick,
vielen herzlichen Dank für dein Feedback zum Tutorial. Es freut mich, dass du schon auf die nächsten Teile gespannt bist :-)
Sicher ist der Arbeitsprozess jedes Webdesigners ein wenig anders und jeder entwickelt mit der Zeit eine gewisse Routine, wie er/sie am effektivsten arbeitet. Ich hoffe jedoch, dass ich mit meinem Tutorial einige hilfreiche Tipp & Tricks geben kann :-)
Da wir unsere Projekte meist mit WordPress umsetzen, plane ich später im Tutorial darauf einzugehen.
Viele Grüße
Ellen
Vielen Dank für diesen inspirierenden Artikel. Die Idee, eine Serie zu diesem Thema zu schreiben, finde ich super :)
Einen Punkt finde ich noch wichtig (vielleicht hast du dieses Thema bewusst nicht angesprochen): Noch bevor ich mit dem Sammeln von Inspiration und Materialien beginne, setze ich mich jeweils mit Papier und Bleistift (oder einem Word-Dokument) hin und notiere mir, welche Ziele ich mit der Website erreichen möchte. Welche Zielgruppe soll sie ansprechen? Etc. Gerade bei eigenen Projekten hilft diese Vorgehensweise sehr, wenn man nicht zehnmal von vorne beginnen möchte. Bei Kundenprojekten sind diese Ziele oft schon vorgegeben, aber auch dann sollte man sie beim Recherchieren im Hinterkopf haben.
Wie Monika schon geschrieben hat, gibt es leider viele Kunden, die einem nicht die volle Freiheit lassen. Manche sind aber auch froh, wenn man mitdenkt und Ideen liefert.
Hallo Barbara,
vielen herzlichen Dank für dein Feedback zum Tutorial :-) Dein Punkt, die Zielgruppe bzw. Ziele der Webseite zu analysieren ist natürlich super wichtig. Vielen Dank das du dies ergänzt hast.
Hier im Tutorial wollte ich besonders auf den Designprozess eingehen. Daher bin ich auf den Punkt der Projektplanung und Analyse (der natürlich als allererstes kommt) nicht mehr speziell eingegangen. Ich finde das Thema aber eine super Idee für einen weiteren Artikel. Vor einiger Zeit haben wir bei Elmastudio einen Projekt-Fragebogen angelegt, indem wir vor Projekt-Beginn die wichtigsten Aspekte eintragen, und so besser analysieren können. Diese Vorgehensweise hat sich auch bei Kundenprojekten schon sehr bewährt :-)
Viele Grüße
Ellen
Meine Meinung ist das eine Webseite leben muß.
Falls sich auf der Seite gar nichts tut vergißt man diese schnell.
Wenn man auf der statischen Seite ( Anfangsseite ) einen Blog einfügt und dieser ergänzt wird ist die Seite für mich intressant und lebt
Auch die Seite Gertis Pc Tricks ist intressant weil immer wieder neue Sachen erklärt werden …und durch Kommentare ergänzt wird
Tip: Mit Googlesites läßt sich eine Webseite bauen und wäre vielleicht auch ein Thema für Gerti
schöne Grüße aus dem Emsland
Hallo Alois,
vielen herzlichen Dank für dein Feedback :-) Ja, da hast du vollkommen Recht, eine Webseite muss spannend sein und immer wieder neue Inhalte bieten. Daher bin ich auch ein riesen Blog-Fan :-) Die Möglichkeit von Google Sites kannte ich ja noch garnicht. Das will ich mir unbedingt mal anschauen!
Auf Gertis-Blog plane ich in der nächsten Zeit kleine Tutorials zur Blog-Einrichtung mit Tumblr oder Posterous zu realisieren. Was hältst du von dieser Idee?
Viele Grüße
Ellen
Hallo Ellen mit dem Mikroblogging Programm Tumblr habe ich bisher noch nicht gearbeitet.
Die Idee von dir einen Posterous Blog einzurichten gefällt mir
Posterous Blogs habe ich für Schüler eingerichtet und sind für mich in der Handhabung sehr einfach. So kann ich einfach neue Beiträge vom e mail Account hochladen.
Wenn man Analytics von Google nutzt sieht man wieviele Leute die Seite anklicken und woher die Leute kommen
Viel Spaß beim basteln
Alois
Habe mal versucht Links mit einzubauen
http://de.wikipedia.org/wiki/Tumblr
http://sites.google.com/site/hosikurse/google/analytics .…
Gibt es diese Funktion auf dieser Seite oder habe ich ein Zeichen übersehen ..?
Hallo Alois,
vielen Dank für dein Feedback. Ja, die Microblogging-Tools möchte ich auf jeden Fall möglichst bald ausprobieren. Für Tumblr würde ich gerne einen kleinen Foto-Blog starten…mal schauen was draus wird. Auf jeden Fall werde ich auch Tutorials für Gertis-Blog über diese tollen Blog-Tools machen.
Das mit den Links hat übrigens super geklappt. Es hatte sich nur ein kleiner Tipp-Fehler eingeschlichen, ich hab’s gerade korrigiert.
Viele Grüße
Ellen
Liebe Ellen,
leider habe ich keine Ahnung vom Webdesign, dennoch finde ich es interessant zu lesen, wie so eine Seite entsteht. Auch als Laie wird durch Deine schrittweise Erläuterung des Planungs-und Vorbereitungsprozesses deutlich, was alles bei der Gestaltung von Webseiten bedacht werden muss.
Auf jeden Fall werde ich die weitere Entstehung der Coffee Seite weiterverfolgen.
Hallo Reinhold,
es freut mich, dass du mein Webseiten-Tutorial interessant findest. Ja, es ist mir besonders wichtig, die einzelnen Arbeitsschritte bei der Entstehung einer Webseite Schritt für Schritt zu beschreiben. Denn natürlich hat jeder Webdesigner seine eigenen Vorgehensweisen, ich hoffe dennoch, dass ich mit meinem Tutorial hilfreiche Tipps und Anregungen geben kann :-)
Viele Grüße
Ellen
Die Serie macht wirklich sehr viel Spaß, vielen Dank dafür. Ich bin schon sehr gespannt, was bei mir am Ende herauskommt.
Hallo Susanne,
vielen herzlichen Dank für dein Feedback zum Tutorial. Es freut mich, dass dir die Serie so gut gefällt :-) Ich wünsche dir ganz viel Spaß mit den weiteren Teilen und sag einfach bescheid, falls eine Frage auftaucht.
Viele Grüße,
Ellen
Vielen Dank für die Tutorial-Reihe. Ich habe noch nicht alles gelesen, aber da ich in absehbarer Zeit selbst eine Seite bauen möchte, nehme ich die Artikel als Inspiration und Leitfaden.
Hallo Ellen,
eine super tolle detaillierte Beschreibung, das sollte man mal den Kunden im Detail vorlegen, wenn sie wieder mal auf den kostenlosen 1und1 Baukasten hinweisen :-) (die TV Kampagne sagt ja alles kostenlos und über 200 unterschiedliche Templates für alle Berufsgruppen). Als ich Deinen Artikel gelesen hab ist mir selber erst mal klar geworden, was ich eigentlich immer so nebenbei leiste ohne das zu fakturieren $$:-) , an Dich einen herzlichen Dank für diese tolle Beschreibung des Arbeitsablaufes!
// gefällt mir // Herzliche Grüße, Birgit
Dies ist ein richtig toller Blog mit sehr guten Beiträgen! Ein ganz großes Lob an euch beide, Ellen und Manuel. Ich hab noch nirgendwo eine so wertvolle Sammlung an Tipps und Tutorials gefunden, wie hier. Bin total begeistert!
Viele Grüße
Christina