Vorher – Nachher: Webdesign für eine Agenturseite

Nach langer Zeit ist bin ich heute mit den Arbeiten für meine neue Agentur-Seite fertig geworden. Wie einige vielleicht schon wissen, ist eines meiner Hauptprojekte der Shop für gemafreie Musik unter www.addloops.com. Dieser Shop wird von meiner Agentur betrieben und eben jene Agentur, die auf den Namen Maranello Media hört, brauchte nun dringend auch mal einen aufpolierten Internetauftritt.

In diesem Artikel möchte ich erläutern, welche Gedanken bei der Erstellung der Internetseite für mich wichtig waren und welche Vorgehensweise für mich gut funktioniert hat.

1. So sah die Seite vorher aus

Alte Maranello Media Seite

Alte Maranello Media Seite

Wie das immer so ist. Man braucht schnell eine kleine Visitenkarte im Netz und sagt sich dann, das können wir dann später noch ausbauen.

Und dann kommen neue Projekte, die Visitenkarte staubt so langsam ein. Außer ein paar Referenzvideos und einigen Schlagworten zu unseren Dienstleistungen gab es auf der Seite nichts zu sehen.
So sollte die neue Seite mehr Platz für neuen Content bieten und sich farblich auch in eine etwas dunklere, kräftigere Richtung entwickeln.

2. Welche Anforderungen stellten wir an die neue Internetseite?

  • Klare und nicht überladene Struktur
  • Moderne und schlichte Präsentation
  • Relevante Informationen über das Dienstleistungsangebot
  • Showcase unserer Musik in Form eines Audioplayers mit Playlist
  • Referenzen inklusive Beispielvideos
  • Vorstellung der Team-Mitglieder
  • Kontaktmöglichkeit via Formular
  • Kräftigere Farben und mehr Kontrast

Aus diesen Anforderungen und einem bestehenden Logo musste also nun ein Design erstellt werden. Das Logo sieht so aus:

Maranello Media Logo

Maranello Media Logo

Da ich ein großer Fan von CSS3 geworden bin, wurde das Design zum ersten Mal nicht in Photoshop „vorgefertigt“, sondern Schritt für Schritt direkt im Browser. Meine „Waffen“ für die Erstellung der Seite waren:

  • AptanaStudio
  • HTML
  • SASS
  • jQuery

Im Rahmen dieses Artikels möchte ich die (aus meiner Sicht) interessantesten Erkenntnisse aus der Entwicklung dieser Seite zusammenfassen, da man ja doch in jedem Projekt was neues lernt.

3. Erkenntnisse aus der Arbeit an der neuen Agenturseite

3a. AptanaStudio

Da ich ja noch relativ frisch im Thema Webdesign bin, habe ich bisher dem Thema Editor noch keine erhöhte Aufmerksamkeit gewidmet. Vorher wurde das Ganze immer direkt im Texteditor geschrieben. Die ganzen Vorteile wie Syntax-Highlighting oder Auto-Format (mit entsprechend korrekter Einrückung der Tags) konnte ich so richtig erst in diesem Projekt mit AptanaStudio genießen. Bisher bin ich mit AptanaStudio sehr zufrieden. Todos im Quelltext lassen sich einfach erstellen, die Autoformat-Funktion hat mir unglaublich viel Zeit gespart und auch das erweiterbare Highlighting ist gut gelöst. Ingesamt also eine schöne neue Lösung für zukünftige Projekte. Mehr Infos direkt beim Hersteller: Aptana

3b. SASS als CSS-Generator

In diesem Projekt habe ich mich ins Thema SASS eingearbeitet. Wer es noch nicht kennen sollte: SASS ist CSS in „schön“ und wird bevorzugt in Ruby on rails Anwendungen verwendet. Doch warum nun SASS statt direkt CSS zu schreiben? Weil man Zeit spart und der Code besser lesbar ist.

Die Vorzüge von SASS sind:

  1. Variablen (z.B. für Farben, Pixelangaben etc.) können definiert und verwendet werden
  2. Keine Redundanz => Nesting (Verschachteln von zueinander gehörenden Anweisungen)
  3. Durch den Einsatz von Mixins lassen sich ganze Anweisungsblöcke an beliebiger Stelle verwenden
  4. Selektoren können Eigenschaften anderer Selektoren erben (z.B. erbt .schlimmerFehler alle Eigenschaften von .Fehler)

Da eine komplette Abhandlung über SASS hier den Rahmen sprengen würde, gibt es nachfolgend einfach mal ein Video für alle Neugierigen:

Ein schöner Screencast (ca. 30min) zum Thema Compass / SASS ist hier zu finden.

3c. jQuery und Plugins – Ein Segen für JS-DAUs
Vielleicht geht es euch auch ein wenig so wie mir. Ich habe immer mal wieder versucht, JavaScript zu lernen, aber es ist doch eine unglaubliche Herausforderung, dass mal so „nebenbei zu machen“. Ich bin dann doch eher der etwas kreativere Schlag von Mensch, der beim Coden schnelle Erfolgserlebnisse haben möchte ohne sich zu lange Einarbeiten zu müssen.

Deswegen bin ich umso dankbarer für JavaScript-Frameworks wie z.B. jQuery, die den Einstieg in die JS-Welt stark vereinfachen. So konnte ich mithilfe von jQuery und ausgewählten Plugins sowohl eine funktionierende und individualisierte Audioplayer-Lösung auf der neuen Agenturseite realisieren, als auch kleine interaktive Sliderelemente und eine funktionale Navigation. Und am wictigsten: es hat auch noch Spaß gemacht!

Die Hauptvorteile von jQuery aus meiner Sicht sind:

  1. Crossbrowser-Kompatibilität
  2. Aktive Community und viele Plugins verfügbar
  3. Verständliche und fast intuitive Syntax

Alles in allem würde ich schätzen, dass mich die Einarbeitung in jQuery nicht mal vier Stunden gekostet hat, um diese Ergebnisse auf der neuen Agenturseite zu erzielen. Aus dem Bauch heraus würde ich sagen, dass das sehr gut investierte vier Stunden waren und die Arbeit mit jQuery viel Spaß macht. Es funktioniert einfach.

4. Das fertige Ergebnis

Maranello Media Agenturseite

Maranello Media Agenturseite

Lange Rede, kurzer Sinn: die fertige Webseite ist unter www.maranello-media.de abrufbar und sieht hoffentlich auch in euren Browsern gut aus.

Alles in allem (Contenterstellung, Coding, Layout) hat die Erstellung sicherlich 30 Stunden gedauert, was nicht zuletzt der Tatsache geschuldet ist, dass ich mich in das ein oder andere Thema noch reinlesen musste. Mit aktuellem Wissensstand wäre ich wohl schneller.

Als Grundbasis für die Erstellung einer händisch gecodeten HTML Seite möchte ich für das nächste Mal Boilerplate testen. Das sieht für mich nach einem sehr guten Grundgerüst für die Entwicklung von HTML5-kompatiblen Seiten aus.

Mich interessiert natürlich eure Meinung zu diesem Projekt. Also wenn gerade ein wenig Zeit übrig ist, schaut doch mal rein. Was ist gut gelungen, was würdet ihr verbessern? Welche Tools verwendet ihr für die Entwicklung von solchen Seiten?

5 Comments on “Vorher – Nachher: Webdesign für eine Agenturseite

  1. jQuery scheint auch eine gute Sprache zu sein.
    Ist das gleichzusetzen mit Java Script ?

  2. Viele haben mit der klaren und nicht überladene Struktur, wie auch Relevante Informationen über das Dienstleistungsangebot/Produkt Probleme. Ich hasse es wenn eine Internetseite vollgeladen und es wie eine Messie-Seite ausschaut.

    Eine gute Zusammenfassung.

  3. Hallo lieber Autor, die Seite gefällt mir wirklich sehr gut. Darf ich anfragen, ob alles selbst gecodet ist, oder ein Basisprodukt modifiziert wurde. Ich nutze für meinen Shop XTCommerce. Derzeit bin ich an neuen Ansätzen interessiert, da mir WordPress gezeigt hat, wie einfach Websiten sein können. Kleine Anmerkung: „Contenterstellung, Coding, Layout hat die Erstellung sicherlich 30 Stunden gedauert“ Für 30 Stunden sieht die Seite wirklich sehr sehr vollständig aus. 30 Stunden hören sich viel an, sind aber bei solchen Projekten schnell um. Besonders wenn sowas interessantes dabei rauskommt. PS: Bin an Partnerschaften, Erfahrungsaustausch etc. interessiert.

  4. Schöne Zusammenfassung! Ich finde auch, dass es klar strukturiert sein muss und am besten in 2 bis 3 einfachen Farben. Die Videos finde ich auch sehr wichtig, weil gerade heute, sehr vieles über Videos geteilt wird.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>