Entwurf: Skin-Wizard für ContentLion

Die ContentLion-Basis dürfte seit der letzten Version relativ stabil sein. Deswegen möchte ich hiermit mein nächstes Projekt aufsetzen. Es handelt sich um die Weiterentwicklung von Applimana.com, einen Dienst zur Bewertung von Blogs.

Da ich mir für dieses Projekt keinen Zeitplan gesetzt habe, möchte ich während der Entwicklung immer wieder einzelne Schritte der Entwicklung eines Webprojektes festhalten und für auftretende Probleme eine Lösung finden und implementieren.

Der erste Schritt bei der Implementierung wird bei vielen das Erstellen des Skins sein. Zur Zeit benötigt man, wenn man kein 0815-Design haben möchte, Kenntnisse in HTML und CSS. Man muss sich erst einmal mit den Skins in ContentLion auseinandersetzen und geänderte Dateien immer an den Server übertragen.

Um unerfahrenen Benutzern den Einstieg zu erleichtern und professionelleren Benutzern die Erstellung eigener Skins zu beschleunigen möchte ich ein Tool einbauen, mit dem man sich die Basis mal eben schnell zusammenklicken kann. Dieses Grundgerüst kann man dann später wie gewohnt mit HTML und CSS bearbeiten.

Der grundsetzliche Aufbau

Irgendwie sind alle Websites ähnlich aufgebaut. Eine Sidebar links der Content rechts oder andersherum. Dann noch ein Header oder Footer und das Design zentriert, linksbündig oder in voller Breite.

Deswegen soll sich der Benutzer als erstes mal den grundsetzlichen Aufbau seiner Seite aussuchen. Ich plane hier zwölf verschiedene Basis-Layouts. Durch das Klicken auf einen Screenshot kann der Benutzer dann seinen Aufbau festlegen:

Grundgerüst aussuchen

Farbauswahl

Im nächsten Schritt soll der Benutzer die Farben seine Seite wählen könne. Hier plane ich 5 Farben in verschiedenen Helligkeiten / Kontrasten anzugeben. Um den Benutzer bei der Farbauswahl nicht ganz alleine zu lassen, werden bereits einige Farbsets vorgeschlagen:

Farbauswahl

Man soll hier schon die Farben im Zusammenhang mit dem zuvor ausfewählten Basis erkennen. Deswegen möchte ich rechts einen IFrame mit dem neuen Skin einblenden.

Schrift festlegen

Bei der Schrift sind die Schriftart und Schriftgröße interessant. Wir sollten webtypische Schriften auflisten und einen guten Standard zur Vorbelgung finden. Meiner Meinung nach macht es Sinn, Schriftgröße und -art für die Überschriften sowie Textpassagen anzugeben. Mein Entwurf:

Schriftart festlegen

Die Feinarbeit

Die Feinarbeiten können nun wie gewohnt in HTML und CSS erledigt werden – Mit Syntax-Highlighting und Vorschau. Speziell für ContentLion kann man Codeschnipsel einfügen (Menüs Content-Bereich usw). Vielleicht könnten wir an der Stelle auch noch Verweise zu HTML oder CSS-Tutorials und Referenzlisten anbieten, so dass auch unerfahrne Benutzer mal eben CSS-Eigenschaften oder HTML-Tag nachschauen können.

Code Editor

Deine Meinung…

… ist mir wichtig. Was hälst du von dem Entwurf? Welche Schwierigkeiten hast du zur Zeit beim Designen deiner Projekte und welche Punkte benötigen die meiste Zeit? Lass es mich wissen.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Dennis schrieb am 17.01.2011:

Hi Stevie, das hat aber nichts mit Applimania zu tun und ist für ContentLion, oder? Neben der Schriftgröße für "normalen Text" würde eventuell noch die Zeilenhöhe und die Schriftgröße für Text in der Sidebar Sinn machen. Das mit den CSS Tutorials ist so eine Sache. Die, die gerne manuell etwas einstellen googeln spezifische Probleme und benötigen keine Links. Diejenigen die sie benötigen könnten würden an der Stelle aber wohl keine Zeit damit verbringen wollen. Da geht es darum mit viel WYSIWYG und wenig Klicks die Seite online zu bringen. Bzgl. Applimania: Wie viel Zugriffe muss man denn haben, dass du nicht sagst: "Der Blog weist nur sehr geringe Zugriffszahlen auf."? ;-) Nimmst du da den AlexaRank? Grüße Dennis

Johann Löwen schrieb am 18.01.2011:

Hi, finde die Idee gut. Vielleicht könntest du auch so einen Dienst für alle anbieten, nicht nur für ContentLion Benutzer. Das man Online sich das Layout zusammenklickt und das ganze dann al Zip/GZip herunterladen kann. Mein Problem mit einen Theme das ich gerade habe ist folgendes: Header (oben), darunter Content (links), Sidebar (rechts), Footer (unten). Das Layout ist über die Ganze Browserbreite gestreckt. Die Sidebar sollte durchgehend sein über die ganze Höhe des Contents. Der Footer sollte unten im Browser angezeigt werden aber falls der Content länger ist sollte der Footer natürlich da drunter sein.

Johann Löwen schrieb am 18.01.2011:

Gut wäre es auch wenn man für alle Überschriften (h1 - h6) die Größe ändern könnte, genauso das Design der Links beeinflussen könnte usw. usw.

Daniel schrieb am 18.01.2011:

Für die Farbauswahl gibt es verschiedene Seiten bei dem man sich an Hand von Hintergrundbildern Farbpaletten erstellen kann. Das wäre für uns eine gute Hilfe.

Stefan Wienströer schrieb am 18.01.2011:

@Dennis: Das wird in ContentLion integriert und mit Applimana getestet ;-) Für den User hat Applimana da nichts mit zu tun. Bzgl. CSS muss ich mir nochmal was überlegen. Ich muss mir mal einen Anfänger suchen und den befragen. Bei Applimana wird die Nachricht angezeigt, wenn der Alexa-Rank schlechter als 120.000 ist. @Johann: Die Funktion wird erst einmal auf ContentLion ausgelegt. Vielleicht werde ich diese später auch als Webdienst zur Verfügung stellen. Dein Format kann ich in die Ursprungsformate integrieren. DIe Überschriften werden hinzugefügt und für die Links denk ich mir auch nicht was aus. @Daniel: Ich hab da eher sowas wie Colorblender.com im Sinn. Denn wir haben ja noch keine Bilder und müssten vorher für die Bilder die passenden Farben aussuchen.

Daniel schrieb am 19.01.2011:

Ich schlage in dem Fall http://colorschemedesigner.com/ vor. Damit kann man das auch schön hinbekommen. Erklärung: * mono: Es werden nur Varianten der Basisfarbe gezeigt. Die Varianten werden durch Veränderung von Sättigung und Helligkeit erreicht * complement: Es wird die Komplementärfarbe der Basisfarbe gezeigt, d. h. man hat immer eine warme und eine kalte Farbe. * triad: Es werden die zwei Farben neben der Komplementärfarbe der Basisfarbe gezeigt. * tetrag: Vier Farben, die sich gegenüber stehen. * analogic: drei Farben, die der Basisfarbe gegenüber stehen. * accented analogic: wie "analoic", aber ergänzt um die Komplementärfarbe

Johann Löwen schrieb am 19.01.2011:

Stefan schrieb: Die Funktion wird erst einmal auf ContentLion ausgelegt. Vielleicht werde ich diese später auch als Webdienst zur Verfügung stellen. @Stefan: bei einer Entwicklung außerhalb von ContentLion würde ich kräftig mit anpacken. Du kannst es ja dann später immer noch an ContentLion anpassen.

Stefan Wienströer schrieb am 19.01.2011:

@Daniel: Werd ich mir mal ansehen @Johann: Läuft

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project