Webdesign für Code-Muffel

Webdesign für Code-Muffel

4. Dezember 2011 - Adobe «Muse» verspricht den Bau von individuell gestalteten Websites, ohne sich um HTML, CSS oder gar jQuery kümmern zu müssen. Wir haben die Beta getestet.
Artikel erschienen in IT Magazine 2011/12
Es gibt heute verschiedene Wege, um zu einem anständigen Webauftritt zu kommen, ohne auch nur den Hauch einer Ahnung von HTML, CSS und Co. zu haben. Wordpress oder Blogger etwa bieten Möglichkeiten, auch WYSIWYG-Editoren wie Microsoft Expression oder Adobe Contribute erlauben den relativ unkomplizierten Bau einfacher Auftritte, und dann finden sich noch Lösungen wie den Web-o-Mat bei Hostpoint und Tools wie iWeb für Macs, mit denen sich Webauftritte ohne grosse Mühen zusammenklicken lassen. All diese Lösungen setzen jedoch Templates voraus, damit die Sites erstellt werden können – entsprechend ist man an die verfügbaren Design-Vorlagen gebunden und der Individualität sind Grenzen gesetzt.

Einen relativ neuen Ansatz hat nun Adobe mit «Muse» (Codename) lanciert. Die Lösung ist im Herbst dieses Jahres als Beta erschienen und kann während dieser Beta-Phase kostenlos getestet werden. Mit «Muse» richtet sich Adobe explizit an Designer, die HTML-Websites publizieren wollen, ohne sich mit Code beschäftigen zu müssen. Im Gegensatz zu den verfügbaren, eingangs erwähnten Werkzeugen erlaubt es «Muse», Website-Designs nach dem eigenem Gusto zu erstellen. «Swiss IT Magazine» hat sich die «Muse»-Beta 3 im Detail angesehen und im Rahmen dieses Tests versucht, eine neue Website für eine Rockband zu bauen. Das Anforderungsprofil an diese Site: Sie sollte über eine News- und eine Konzert-Sektion verfügen, die man ohne grossen Aufwand aufdatieren kann, Videos abspielen und Bildergalerien anzeigen, Musik wiedergeben können und schliesslich auch Plattformen wie Facebook integrieren.
Neue Seiten, basierend auf der zuallererst erstellten Master-Seite, generiert man in der optischen Sitemap mittels Mausklick. Nach einem Doppelklick auf eine Unterseite findet man sich sofort im Menüpunkt Design und kann die Seite mit Inhalten befüllen.
Einen Button kann man problemlos in Photoshop erstellen und dann in «Muse» integrieren, wobei verschiedene Mauszustände über Ebenen in Photoshop definiert werden.
Beim pixelgenauen Platzieren von Elementen helfen Hilfslinien und Abstandsangaben, die automatisch während des Drag&Drop von Elementen in der Design-Ansicht erscheinen.
Das Platzieren einer Lightbox kann bisweilen etwas kompliziert und umständlich sein – hier darf Adobe bis zum Final-Release gerne noch etwas arbeiten.
Externe Inhalte – hier etwa die Like Box aus Facebook – lassen sich via Copy&Paste eines Stückchen Codes in eine «Muse»-Seite integrieren.


Lesen, dann loslegen

Nach dem Start von «Muse» erfolgt gleich einmal die erste kleine Ernüchterung: «Muse» braucht Einarbeitungszeit, und einige Vorkenntnisse in der Webentwicklung schaden keinesfalls. So muss man beispielsweise gleich zum Start bei den Seiteneinstellungen Werte wie Breite und minimale Höhe der Site, die Anzahl Spalten («Page Width», «Min Height», «Columns», «Column Width») und Werte wie «Gutter», «Margins» oder «Padding» eingeben. Wer nun nicht weiss, für was Gutter oder Padding steht, muss sich hier wohl oder übel mit einer Google-Suche helfen.

Sind die Grundeinstellungen einmal gemacht, findet man sich quasi auf einer optischen Sitemap wieder. Hier folgt dann der nächste Schritt: Das Erstellen einer Master-Seite, auf der sämtliche Elemente platziert werden, die auf jeder Seite des Webauftritts vorkommen sollen – sprich beispielsweise das Header- oder das Footer-Element oder das Hauptmenü. Das Platzieren von Elementen ist ein Kinderspiel. Bilder werden beliebig auf der Seite platziert, wobei es sich empfiehlt, zuerst das Grunddesign in einem Programm wie Photoshop oder Illustrator zu erstellen. Auch bei den Menübuttons kommt idealerweise Photoshop zum Einsatz, wo die Buttons und die verschiedenen Button-Zustände über Ebenen erstellt werden und dann über den Befehl «Place Photoshop Button» in die Seite integriert werden können. Ist die Master-Seite einmal erstellt, können mittles Knopfdruck neue Top- und Sub-Level-Seiten zur Sitemap hinzugefügt und eine Seitenstruktur erstellt werden. Um die einzelnen Seiten dann individuell mit Inhalten zu bestücken, genügt ein Doppelklick auf die jeweilige Seite in der Sitemap-Übersicht.
 
Seite 1 von 3

Neuen Kommentar erfassen

Anti-Spam-Frage Wieviele Zwerge traf Schneewittchen im Wald?
Antwort
Name
E-Mail
SPONSOREN & PARTNER