Blog & Design, Blog-Relaunch
Kommentare 19

DIY Blog Relaunch #1: Brainstorming, Inspiration & Mockups

Ich reiße meinen Blog bis auf die Grundmauern ein und baue ihn wieder auf. Und ich nehme Euch mit. Denn begleitend dazu schreibe ich ein Blog-DIY-Tagebuch, von der Idee über „Webdesign lernen“ bis zur fertigen responsive Website: Brainstorming, Inspiration, Konzeption und Corporate Design, DIY-Mockups, DIY-Settings und Props für die Fotos, DIY-Trailer für Tutorials, Plug-Ins, Wireframing, Testlauf, Liveschaltung, mögliche Stolpersteine und vielleicht auch gelegentliche, dezente bis mittelschwere Wutausbrüche. Einfach machen wär‘ doch langweilig! Zusammen (durch-)machen ist viel schöner! … Seid Ihr dabei?


 

Vorsicht Mammut-Beitrag: Der Inhalt auf einen Blick

Jeder Blog-DIY-Tagebucheintrag bekommt vorweg eine Kurzzusammenfassung wie diese hier. Schaut drüber und entscheidet, ob Ihr den Beitrag lesen möchtet, denn es wird ein bisschen mehr Text als üblicherweise. Ihr findet:

  • eine kurze Erwähnung des Programms, mit dem ich arbeiten werde,
  • den Start einer DIY-Blog-Bucketlist: Was will ich umsetzen? Was gehört alles dazu?
  • eine Liste an inspirierdenden Links für gestalterisch grandios umgesetzte Websites im responsive Design,
  • und einen kleinen Online-Kreativfundus für Mockups, Schriften und Stockphotos.

 


 

Los geht’s: Kleine Ideen und große Pläne …

W61A8235_fin

by Tabby | Creative Market

Alles ist voller Post-Its und die Ideen überschlagen sich … ❤ Willkommen im Wahnsinn  … der Weg zum fertigen Projekt ist doch immer der schönste! Aber der Reihe nach: Vor geraumer Zeit habe ich festgestellt, dass ich im Besitz eines Programms bin, das mir laut Beschreibung die Möglichkeit bietet, meinen Blog völlig neu und vor allem völlig frei zu gestalten, ohne dass ich eine einzige Zeile CSS- oder HTML-Code schreiben muss.<3

Bevor ich Euch den Namen verrate, das Wichtigste vorab: Ich habe keine Kooperation mit der Firma und will keine Werbung für die Produkte machen. Ich will Euch lediglich meine Erfahrungen schildern und ggf. auch direkt zeigen, wie ich damit arbeite. Es kann ja schließlich auch passieren, dass es nicht funktioniert, das Programm nicht hält was es verspricht oder ich die responsive Website komplett bauen kann, dann aber an der Liveschaltung bzw. Migration meiner Daten zu WordPress scheitere 🙂

Also… kurz und knapp: Der selbstdeklarierte Alleskönner, den ich in den kommenden Wochen und Monaten auf Herz und Nieren prüfen werde, wird von Adobe unter dem trefflichen Namen Muse CC ins Rennen geschickt. Und weil mir der Name so gut gefällt, nenne ich es in den noch folgenden Beiträgen einfach nur meine Muse

Meine Muse verspricht mir also, dass ich mich vollkommen auf die Gestaltung konzentrieren, einfach puzzeln kann und nicht programmieren muss. Für die Animationen und kleinen Features liefert Muse eine umfangreiche Widget-Bibliothek. Und durch die Möglichkeit sich Musterseiten zu bauen, muss man nicht immer von vorne beginnen. Cool soweit. Ich bin gespannt, ob das stimmt und es wirklich „intuitiv“ in der Handhabe ist 🙂

Aufgefallen ist mir das Programm übrigens nebenbei, als ich meine Creative Cloud nach Neuigkeiten und Updates durchforstet habe. Ihr könnt Euch mein Gesicht vorstellen, als der Gedanke, dass ich seit über einem Jahr mit dem Programm hätte arbeiten können, es aber bisher mit schnöder Nichtbeachtung gestraft habe, wirklich in mein Hirn gesickert ist …

 

 

Ich habe bisher nur mit fertigen WordPress-Templates gearbeitet und dort vielleicht mal eine Hintergrundfarbe geändert. Für einen blutigen Anfänger wie mich heißt es jetzt beim Relaunch deshalb: ab ins kalte Wasser und schwimmen, schwimmen, schwimmen. Der Schöpfer meiner Muse und unzählige Youtuber bieten zum Glück ein ganzes Bataillon an Tutorials, sodass es ein halbwegs entspanntes Learning-by-doing werden sollte. Außerdem ist mein Ehrgeiz geweckt: Ich will das jetzt auch können! Eine Eigenschaft meines Kreativ-Egos, die mir zumindest mal zum autodidaktischen Erwerb des Strick- und Nähhandwerks verholfen hat … wieso dann also nicht auch zum eigenmächtigen Web- und Grafikdesign ohne Vorkenntnisse?

Mein Plan ist es also, mir in Eigenregie ausreichende Kenntnisse im Grafik- und Webdesign anzulernen, um am Ende mit einer responsive Website ganz nach meinen Vorstellungen dazustehen. (Responsive bedeutet, dass sich die Website automatisch allen digitalen Endlesegeräten anpasst … Tablet, Smartphone etc.) Es kann daher nicht schaden, sich mal eine Checkliste zu machen, an was ich da alles denken muss.

DBBL – Meine DIY-Blog-Bucketlist:

Bucket List Mohntage Relaunch

Gut … vielleicht ist es weniger eine Liste als vielmehr ein verschriftliches Brainstorming. Aber es hilft, einfach mal alles runterzuschreiben, was – für mich und meine Vorstellungen – zu einem Blog-Relaunch dazu gehört. Die Auflistung ist fern von fertig und wird sich bis zum Ende des Projekts permanent erweitern, aber irgendwo muss man ja mal anfangen:

  • Meine Website soll responsive sein, das bedeutet, dass sie sich automatisch allen digitalen Endlesegeräten anpasst (Tablets, Smartphones usw.). Das wird nicht für alle, aber für einen Großteil aller Geräte möglich sein. Meine Muse soll’s ja angeblich möglich machen …
  • Für meine Website will ich ein einheitliches Design: Schrift, Bildsprache, Logo & Farbe. Ich muss mich also auf einen Stil und ein Farbschema einigen … ui, das wird schwer 🙂 und ich muss wahrscheinlich darauf achten, dass Schriften, Bildmaterial und Mockups mit dem Web kompatibel sind.
  • Die Website soll teilweise mit Hilfe von Mockups gestaltet werden. Denn ich mag den Stil der sogenannten Overhead Photography oder auch Knolling genannt.
  • Speziell dafür vorgefertigte Mockups sehen oft super schön aus und lassen sich auch in Photoshop oder Lightroom personalisieren. Unterschiedliche Mockups von unterschiedlichen Herstellern lassen sich allerdings nur schwer miteinander kombinieren. Manche werden hochauflösend mit Schatten geliefert, andere kommen ohne Schatten. Oft ist die Belichtung unterschiedlich, sodass man selbst über den Camera Raw Filter kein gemeinsames Level findet. Man kann zwar nachträglich einen Schlagschatten einfügen, sieht den Unterschied aber irgendwie trotzdem noch. Ich versuche deshalb einfach mal, Objekte selbst zu fotografieren und via Photoshop in Smart Objekte umzuwandeln. Vielleicht kann ich so meine eigenen Mockups bauen.
  • Wenn ich selbst Smart Objekte erstellen will, brauche ich ein entsprechendes Fotosetting: einheitliche Fotosettings sorgen für Wiedererkennungswert … Stichwort Branding 🙂
  • Wenn ich mir ein einfaches Fotosetting für Smartobjekte bastle, bastle ich doch gleich auch ein paar Fotosettings für Food- und DIY-Fotografie. Mein eigener Stil soll sich selbst im Hintergrund und in den Requisiten wiederfinden.
  • Damit ich mich bei der Erstellung von Animationen und Widgets für die Website nicht verzettle, werde ich wohl eine Weile damit verbringen mir Video-Tutorials auf YouTube anzusehen.
  • Für ein paar DIYs würde ich gerne selbst Video-Tutorials machen. Und wenn ich sowieso ein Corporate Design für den Blog aus dem Boden stampfe, dann mache ich gleich einen eigenen passenden Trailer von 1-2 Minuten mit 😀
  • Eine wichtige Erkenntnis: Ich kann das Rad nicht neu erfinden und das muss auch gar nicht sein. Ich schau einfach mal, was die anderen so machen …

 

Pashion led us here

Unsplash

… natürlich nicht zum blinden Kopieren, sondern um sich anzuschauen, was überhaupt möglich ist, was ich mir vorstellen kann, was schick aussieht usw. Ich mag es zum Beispiel sehr, wenn die Bilder sich optisch vergrößern, sobald die Maus darüber fährt (Image Zoom). Entdeckt habe ich auch Websites, bei denen Content einfach so erscheint, während man scrollt (Appearing Content). Die schönsten Websites, die ich entdeckt habe, möchte ich deshalb gerne mit Euch teilen. Vielleicht seid Ihr ja auch auf der Suche nach Inspiration für eine Umgestaltung?

Mini-Blogroll of Awesome Design

… gefunden auf CSS Design Awards und Awwwards

Meine Top 5

  1. Scrollen macht hier richtig Spaß: Anakin
  2. Ich liebe die Interaktion von Objekten und Hintergrund beim Scrollen: Le Mugs
  3. Coole Einbindung von Videomaterial: Sweetpunks
  4. Die Aufteilung der Website ist ziemlich nah an dem dran, was ich umsetzen will: Rawww
  5. Watercolor ❤ Juraj Molnar

Andere wirklich gute Websites

 

Und jetzt noch mal kurz „uffgemockt“ …

Ihr habt sicher gemerkt, dass an meinen Bildern diesmal was „anders“ ist als sonst 🙂 Sie sind diesmal gesucht und gefunden, selbst gemacht und auch wieder nicht. Klingt komisch? Ist es aber nicht. Titelbild und Checkliste sind mit Mockups in Photoshop gebastelt (dazu erstelle ich auch eine Anleitung), die Memes sollten die meisten von Euch ja kennen. Die übrigen Bilder habe ich in zwei grandiosen Bild- bzw. Kreativdatenbanken aufgetan, die ich zufällig entdeckt habe. Und obwohl ich Einzelkind bin, wird das Gefundene natürlich geteilt! ❤

  • Unsplash bietet kostenlose, hochauflösende Bilder, die nach Themen sortiert und wirklich gut gemacht sind. Jeden Tag kommen laut Seitenbetreiber 10 neue Bilder dazu. Verwendet werden können sie einfach so … sagen License und Terms of Use.
  • Meine Mockups und die Schriften stammen aus dem Creative Market – ein digitaler Marktplatz, auf dem Kreative ihre Arbeiten verkaufen können. Jede Woche gibt es 6 Freebies zum Download, gezahlt werden kann via Paypal und von Schriftarten, über Produkt Mockups für den Onlineshop bis zu Add ons, Themes und Stockphotos bekommt Ihr dort eine unfassbare Menge an geilem Scheiß! ❤

 

So. Der Anfang ist gemacht und ich freue wirklich auf alles, was jetzt kommt. Als erstes werde ich mich wohl mit Stil und Farbe beschäftigen. Vielleicht könnt Ihr mir via Abstimmung ja wieder dabei helfen, wenn ich mich nicht entscheiden kann. Hat bei meinem Logo ja auch super funktioniert. ❤ Ich freue mich jedenfalls darauf, Neues zu lernen und das „Do it yourself“ für mich auf ein neues Level zu heben!

Wenn Ihr Fragen, Wünsche, Kritik, Ideen und eigene Erfahrungen habt, die Ihr teilen wollt, fire away! … Macht Lärm! Ihr wisst wo und wie das geht! ❤

Adventure begins.jpg

Unsplash

 

 

 

 

 

 

 

 

 

19 Kommentare

    • Cool. Das freut mich. Ich bin auch super aufgeregt… Ich hab das ja noch nie gemacht und verlasse mich auf Bauchgefühl, Intuition und Tutorials, die ich finden kann. Aber ich schreibe über jeden Schritt, den ich gehe … und auch über die Rückschritte, mal sehen 😉

      Gefällt 1 Person

  1. da les ich mit und werde oft denken. mua. halt durch. mach weiter. cool! ich bin dein fan. denn ich würde null und nimmer zeit für so ein mammut dings haben. aber toll wäres es so richtig selber richtig reinzuknieen. also. danke das ich mit darf auf deine reise.

    Gefällt 1 Person

  2. Oha, da haste dir was vorgenommen! Finde ich super! Und ich bin auch meeeegaaaa gespannt! Ich überlege ja auch immer, ob ich meinen Blog mal ein Level höher bringe… Aber mit geändertem Design (trotz wordpress.com) bin ich erstmal kurzfristig zufrieden. Bin auf jeeeeden Fall schon sehr gespannt, was du dann so zu berichten hast und ziehe schon mal den Hut, weil ich weiß dat es ne janze Menge Arbeit wird 😉 Ich drück dir die Daumen und freue mich aufs nächste Update!

    Gefällt 1 Person

    • Danke Dir! Ja, es ist ein Mammutprojekt. Aber ich hab solche Lust darauf, das zu probieren. Wenn ich wirklich nicht programmieren muss, ist es perfekt für mich 🙂 Ich bin super aufgeregt und gerade dabei den nächsten Post zum Thema Colour Design vorzubereiten 🙂

      Gefällt 1 Person

  3. Pingback: DIY Blog Relaunch #2: Blog Branding durch Farbe | mohntage | DIY

  4. Pingback: Monatsrückblick März 2016 – Sternenwind – DIY, Food & Lifestyle

  5. Pingback: DIY Blogrelaunch #3 : Font-tastisch! Ein heißer Ritt durch die Bleiwüste: Rebranding durch Typografie | mohntage

  6. hundebloghaus sagt

    Klasse, das wollt ich im Dezember vergangenen Jahres tatsächlich auch machen und dachte mir dann, boah neeeee lach!! Schön, dass Du so viel Power und Zuversicht hast, ich bin hellauf begeistert und wünsch dir und uns viel Spaß dabei! GLG Danni

    Gefällt 1 Person

    • Hey Danni, ich freue mich sehr über Dein Feedback. Habe auch direkt mal auf Deinem Blog gestöbert und Deine Illustration von Facebook wiedererkannt. 1. Deine beiden Hunde sind zuckersüß. Ich bin mit Hunden aufgewachsen und möchte definitiv wieder Hunde haben. Durch die kleine Wohnung und ein Verbot seitens der Hausgemeinschaft geht das aber momentan leider nicht. Ich gehe aber so oft ich kann im Tierheim in Mainz Gassi, um mir meine nötige Portion Hund zumindest so zu holen. 🙂 Aber sag mal, was hättest Du an Deinem Blog denn ändern wollen? Der ist super. Und Folgefrage: Woher stammen die Illustrationen? Hast Du die selbst gemalt? Liebe Grüße Yvonne

      Gefällt mir

  7. Pingback: DIY Fotobuch | 365 Mohntage in Bildern | mohntage

  8. Danke für deinen tollen Beitrag. Jetzt werde ich es versuchen mich auch zu wandeln. Leider ist mir das Programm zu teuer daher werde ich ein theme suchen. Aber bei dem Rest können deine Beiträge mich super helfen!
    Liebste Grüße Anika

    Gefällt mir

  9. Pingback: DIY Blog Relaunch #4: Step-by-step Logo Design | Die Neue, Fibonacci und der Ohrring | mohntage

  10. Hallo, irgendwie bin ich auf deinen Blog gestoßen und staune gerade ehrfürchtig: (Corporate) Design (und alles weitere, was dazugehört) ist etwas, mit dem ich irgendwie auf Kriegsfuß stehe, obwohl ich künstlerisch bin. Toll, dass du diese Reihe gestartet hast, da ich noch ganz am Anfang stehe, finde ich sowas sehr hilfreich und verschlinge und lerne. Ich schaue bestimmt öfter bei dir vorbei! Grüße, Jenny

    Gefällt 1 Person

    • Hey Jenny! Herzlich willkommen. Ich freue mich total, dass es Dir hier gefällt. Wenn Du Fragen hast, immer her damit. Wenn’s bei mir mal hängt, hilft mir der Austausch mit anderen Bloggern immer sehr 🙂 Liebe Grüße, Yvonne

      Gefällt 1 Person

Macht Lärm!

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s