Der heutige Artikel über die grundsätzlichen Gestaltungsregeln von Logos kommt von unserer Gastautorin: Jennifer von twago

Ein gutes Logo ist unverwechselbar, angemessen, praktisch, grafisch gut umgesetzt, einfach in der Form und vermittelt eine eindeutige Botschaft. Klingt einfach, ist aber ein ganzes Stück Arbeit. Freelancer im Bereich der Logogestaltung wissen darüber bestens Bescheid. Es gibt fünf wichtige Punkte, die du beachten solltest, damit dein Logo in den Köpfen bleibt.

1. Halte es simpel

Ein gutes Logo-Design erkennst du an seiner Einfachheit, Vielseitigkeit und Einprägsamkeit. Gute Logos besitzen etwas Einzigartiges, ohne überzogen zu wirken. Besonders einfach lässt sich dies mit dem KISS( „Keep it simple, stupid“)-Prinzip erklären. Jeder Außenstehende sollte es deuten können.

2. Es muss einprägsam sein

Nach dem Prinzip der Einfachheit kommt dass der Einprägsamkeit. Ein wirksames Design sollte unvergesslich sein und das erreicht man mit einem einfachen, aber entsprechendem Logo. Der Kunde sollte beim Anblick sofort eine Beziehung zum Unternehmen herstellen können. Und ein kurzer Name oder ein unverwechselbares Bild sind hier von großem Vorteil. Als Beispiel kann man Unternehmen, wie MC Donalds anführen. Dieses Logo kennen die kleinen, aber auch die großen unter den Fastfood-Liebhabern ganz genau.

3. Zeitlosigkeit

Ein wirksames Logo sollte zeitlos sein - das heißt, frei von Trends und gerade aufkommenden neuen Gestaltungslinien. Die Frage ist, wird das Logo noch in zehn, zwanzig oder sogar 50 Jahren noch wirken? Wahrscheinlich das beste Beispiel für ein zeitloses Logo ist das Coca-Cola-Logo. Es existiert seit 1885 und hat sich eigentlich kaum verändert und das entspricht allem, was ein tolles Logo ausmacht.

4. Achte auf Reproduzierbarkeit

Ein wirksames Logo sollte in einer Vielzahl von Medien und Anwendungen reproduzierbar sein. Daher sollte es funktional gestaltet werden und am besten in einem Vektor-Format designt, um sicherzustellen, dass es auf jede Größe skaliert werden kann. Das Logo sollte in der Lage sein, sowohl in horizontaler als auch vertikaler Form die gleiche Bedeutung aufzuweisen. Folgende Fragen sollten daher stets mit ja beantworten werden: Ist dein Logo noch wirksam, wenn es nur in einer Farbe gedruckt wird? Wenn es auf die Größe einer Briefmarke gedruckt wird? Wenn es so groß wie eine Plakatwand gedruckt wird? Oder wenn es negativ gedruckt wird? Wenn man mit der Gestaltung in schwarz und weiß beginnt, kann man diese Fragen locker umgehen. Dies erlaubt es, sich auf das Konzept und die Form, anstatt die Farbe zu konzentrieren. Man muss auch bedenken, das die Druckkosten – je mehr Farben verwendet werden – langfristig gesehen sehr teuer sein werden.

5. Dem Zweck für angemessen gestalten

Ein Logo sollte sich immer an dem dafür vorgesehenen Zweck orientieren, zum Beispiel bei dem Entwurf eines Logos für Kinderspielzeug. Da wäre es natürlich sinnvoll, eine kindliche Schrift-und Farbgestaltung zu verwenden. Dies wäre nicht so geeignet für eine Anwaltskanzlei. Es ist auch wichtig, festzuhalten, dass ein Logo nicht immer zeigen muss, was ein Unternehmen verkauft oder als Dienstleistung anbietet. Es muss nicht unbedingt ein Auto im Logo vorhanden sein, um für ein Automobilkonzern zu stehen. Ein Logo ist rein für die Identifizierung.

Auch unser Design-Unternehmen Pixxelpassion hat Mitte letzten Jahres einen Logo-Relaunch durchgeführt. Die Gründe, die Entwicklungsschritte und natürlich auch das finale Logo, können Sie einem ausführlichen Bericht auf unserem Webblog entnehmen.

Und noch ein Trick mit CSS und IE. Nachdem ihr ja nun bereits gelesen habt, wie man Objekte selbst im IE6 drehen kann und für alle Browser automatisch skalierende Hintergrundbilder realisieren kann, geht es nun an die Geschichte mit Transparenzen.

Transparenzen auch ab IE5

Im Firefox und Co. kein Problem dank opacity-Befehl. Aber auch selbst der IE5 lässt sich mit einem simplen Workaround dazu hinreissen, Objekte durchsichtig scheinen zu lassen. Dazu hilft wieder mal ein Filter, wie im unteren Beispiel:

.selector {
filter: alpha(opacity=50); /* internet explorer 5~7 */
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
-khtml-opacity: 0.5; /* khtml, old safari */
}

Statt .selector könnt ihr natürlich jedes beliebige Element einsetzen. Viel Spass beim probieren!

Der Internetexplorer gibt sich ja bekannterweise manchmal sturer als ein polnischer Ochse, wenn es um neuere Standards geht. CSS3 hat nun transform-Befehle eingefügt, mit denen es möglich ist, Objekte zu beliebig drehen. Ab der 9-er Version funktioniert das auch für den Internet Explorer. Doch was mit den Versionen davor? Nun, auch dafür gibt es Tricks und Kniffe:

Auch der IE kann Elemente drehen

Anbei mal ein Beispiel für eine 180Grad Drehung, welche in allen Browsern funktioniert.

<style>
	img {
		transform:
			rotate(180deg)
			scale(-1, 1);

		/* für Opera */
		-o-transform:
			rotate(180deg)
			scale(-1, 1);

		/* für Firefox, Safari, Chrome */
		-webkit-transform:
			rotate(180deg)
			scale(-1, 1);
		-moz-transform:
			rotate(180deg)
			scale(-1, 1);

		/* für IE */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

	}
</style>

Selbst der IE dürfte damit keinerlei Probleme haben. Einziger Wermutstropfen: es sind auf diese Weise nur Drehungen im 90Grad Winkeln möglich. Dafür könnt ihr aber mit dem Mirror-Befehl eure Bilder sogar spiegeln. Natürlich lassen sich die Transform Befehle auch auf andere Elemente wie zum Beispiel div-Container oder p-Absätze anwenden. Probiert’s einfach mal aus und schreibt eure Erfahrungen.

Sommerpause? Nööö, natürlich war Pixxelpassion auch in den letzten Wochen nicht untätig. Die aktuellen Projekte drehen sich unter anderem um Schuhe – ganz viele Schuhe! Aber dafür welche der ganz besonderen Art: leicht, beschwingt und mit einer Sohle, welche dem Barfuß-Laufen Konkurrenz garantiert – das sind die bequemen Treter von Senmotic Shoes. Das darauf basierende Branding sollte zudem noch eine wertige und moderne Wirkung haben. Unten seht ihr nun eine kleine Gallerie, was daraus bisher entstanden ist.

Ihr dürft auf weitere Ergüsse gespannt sein, denn das noch junge Franchise-Unternehmen ist in stetiger Wachstumsphase. Da wird sicherlich noch so einiges kommen.

Die neue plakative und edle Website von Senmotic Shoes - mit den Produkten im Mittelpunkt

Auf diesem Farb- und Gestaltungskonzept beruhen auch die Flyer und weiteres Werbematerial

... auch das Packaging Design für Schuhkartons und Tragetaschen hat Charme und Wiedererkennungswert

Plakate und Leuchtreklame für die lokalen Shoe-Stores

Diese kleine Gallerie wird bestimmt bald mit weiteren Produkten gefüllt – schaut einfach mal wieder rein.

Ein Problem welches sich bei einigen Projekten bislang stellte: skalierende Hintergrundbilder. Also praktisch solche, die sich der Größe des Browserfensters von selbst anpassen und automatisch mit skalieren. Klar: es gibt im Netz unzählige Lösungen mit Javascript. Aber es geht auch wesentlich einfacher. Die Zutaten dafür sind lediglich: ein div-Container, Position-Angaben und Z-index. Das war’s schon! Ganz ohne dirty Tricks und Javascript-Workarounds – und das allerbeste: es funktioniert sogar im IE. Grund genug es mit euch zu teilen…

So wird’s gemacht

Auf der HTML Seite reichen zwei div-Container. Einer enthält die eigentliche Website mit allem Content, der andere das Hintergrundbild welches über einen Image-Tag eingebunden wird. So sieht’s im Code aus:

<div class="content">
    <p>Hier kommt euer Inhalt hin</p>
</div>
<div class="background">
    <img class="scale" src="URL des Hintergrundbildes" alt="" />
</div>

Das nötige CSS sorgt dafür, dass der Background-Container absolut positioniert wird und sich mit 100% der Breite und Höhe des Browserfensters flexibel anpasst. Das darinliegende Image wird anhand dessen automatisch skaliert. Hier das CSS:

.content {
    position: relative;
    width: 760px;
    z-index: 10;
}

.background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:2;
}

 .scale {
     width: 100%;
     height: 100%;
}

Damit war’s das schon. Euer Hintergrund dürfte sich nun dem Browserfenster anpassen! Keine weiteren Arbeiten nötig.

Alternative: Nur in Breite oder Höhe skalieren

Möchtet ihr das Bild nur an der Höhe des Browsers ausrichten reicht einfach die Höhenangabe:

.portrait {
     height: 100%;
}

Ebenso an der horizontalen Breite des Browserfensters, dann mit Breitenangabe:

.landscape {
    width: 100%;
}

Bei den beiden letzten Beispielen mit “portrait” und “landscape” müsst ihr natürlich noch die Klasse des Bildes im HTML-Code entsprechend anpassen.

Viel Spass beim konstruktiven Basteln. Konstruktive Kritik dagegen ist in den Kommentaren gut aufgehoben und stets willkommen.

Seit dem letzten Artikel über den fragwürdigen Status des Nutzers bei Google Buzz hat sich natürlich die Google Produktspirale in erstaunlichem Tempo weitergedreht.

Pionier in digitalem Neuland

Das neueste Kind in der Familie des Branchenriesen heisst Google+. Seit dem ich vor ein paar Wochen das erste Mal dieses digitale Neuland betrat, hat es mich fasziniert. Und das nicht unbedingt wegen der transparenteren Sicherheitsbestimmungen, innovativer Usability-Lösungen wie Circle oder der vielfältigen Multi-Chat Funktionen. Nein, viel mehr das Feeling.

Du stehst auf einem Jahrmarkt – früh am Morgen wenn es noch ganz still ist. Ein paar wenige Passanten begegnen dir – wenige Leute welche du selbst eingeladen hast. Nur die engsten Freunde oder zumindest die, welche genauso neugierig auf das neue soziale Netzwerk sind wie du. Digitale Pioniere unter sich! Ihr tauscht euch aus – ein zwei konstruktive Kommentare, danach wieder Stille. Eine Freundesliste von nur ein paar dutzend Personen. Es tut gut.

Ruhe vor dem Sturm

Nach der lauten und überfüllten Pinnwand von Facebook ist Google+ angenehm zurückhaltend. Keine sinnlosen Freundschafteinladungen, keine Glücksnüsse nicht zigtausend Anfragen irgendwelcher Spiele. Es ist Testphase und die Attraktionen des Jahrmarktes Google+ haben noch nicht geöffnet – noch schlummert er still vor sich hin. Sicher, in den nächsten Wochen werden die Firmenpages zugeschalten, die Integration von Spielen ist auch in Planung und irgendwann wird die große Masse genauso hereinschnuppern wie damals von den VZ-Netzwerken zu Facebook.

Aber bis dahin hat Google+ etwas angenehm … elitäres. Und obwohl Ruhe freilich nicht der Sinn eines sozialen Netzwerkes ist, fällt es mir in Zeiten schnellebiger Tweets, Feeds und Co. angenehm auf.

Ich genieße es nochmal, bevor ich wieder im lauten und schnelllebigen Pulk meiner Facebook Pinnwand versinke…

Wir melden uns zurück – dieses Mal in eigener Sache. Was vielleicht den einen oder anderen bekannt vorkommt: nachdem ein wenig Zeit ins Land verstrichen ist, merkt man oft, wie das eigene Unternehmen nach außen hin wahrgenommen wird und welche Erwartungshaltung die Kunden an die Agentur und dessen Dienstleistungen stellen. In dieser Hinsicht ist zunehmend aufgefallen, dass nicht nur Webdesigns und Website-Relaunches gewünscht sind, sondern meist in diesem Zug damit die komplette Unternehmensphilosophie überdacht wird.

Allumfassender Service

Pixxelpassion ist in letzter Zeit öfter als Dienstleister für komplette Corporate Design-Ausarbeitungen aufgetreten. Das frische und neue Design der Website zog sich dann nach und nach durch das komplette Erscheinungsbild der Kundschaft. Rollups, Packagings, Visitenkarten, Geschäftsdrucksachen, Flyer und viel mehr folgten im neuen Look and Feel. Deswegen sehen wir uns mit unserer Agentur zunehmend als Komplett-Dienstleister für Firmen. Zwar immer noch mit dem Schwerpunkt Webdesign – jedoch decken wir auch alle anderen Kommunikationswege zum Kunden ab.

Und genau dieser Kommunikationsgedanke soll sich auch in einem neuen, frischen Logo wiederspiegeln. Doch bevor ein paar erklärende Worte folgen, lasst es am besten erst einmal selbst auf euch wirken.

Neues (unten) und altes (oben) Logo von Pixxelpassion im Vergleich

Die eckigen Formen weichen runden und modernen Zügen – als visuelle Anpassung an Web2.0 und modernen Kommunikationsstrategien. Das “PP” von PixxelPassion findet sich aber auch hier wieder – diesmal umeinander verschlungen. Auch deutbar als Anführungsstriche, was ja wiederum für Kommunikation steht.

Feedback frei!

Dieses Logo ist ein Vorschlag – noch nicht umgesetzt. Wir möchten gerne eure Meinung dazu wissen, bevor es eventuell Pixxelpassions neues Aushängeschild wird. Was haltet ihr davon?

Pixxelpassion freut sich besonders über einen neuen Kunden: I2SE – Dienstleister und Entwickler rund um hochwertige Mikrocontroller-Systeme möchte einen Relaunch der ursprünglichen Website.

Die Anforderungen dabei waren recht schnell klar: die Unternehmenspräsentation sollte zum einen technischer wirken und die Produkte dominanter in den Vordergrund rücken. Zum anderen war auch eine Neustrukturierung und visuelle Gliederung nötig um den Interessenten geschickter von Interest-Spot zu Interest-Spot zu führen.

Optische Komplettrestaurierung

Das Ergebnis ist eine komplette Umkrempelung der Website. Die sowieso zweitrangigen Informationen zur Firma selbst rücken dezent in den Hintergrund und die einzelnen Dienstleistungen und Produkte werden dagegen fast ausschliesslich auf der Startseite aufgezeigt. Clean und übersichtlich! Doch macht euch besser selbst ein Bild von den Entwürfen und lasst den ein oder anderen konstruktiven Kommentar dazu hier.

Homepage-Entwurf für I2SE - technisch und strukturiert soll es wirken

Unterseite für I2SE, Produkt- und Galleriebilder werden natürlich noch ausgetauscht

Druckfrisch: Messe-Rollups für I2SE - Designed by Pixxelpassion, Webdesign aus Leipzig

PS.: Neben der bald fertigen Website wollen noch weitere Produkte in Zukunft im neuen I2SE-Corporate Design glänzen. Natürlich stelle ich diese dann zu gegebenen Zeitpunkt hier auch zur Diskussion für euch. Schaut am besten regelmäßig hier vorbei.

Zunächst erst einmal zur Klärung: Blueprint ist ein CSS-Framework. Dank vorgefertigter Klassen für die gängisten Layouts und die nötigsten grafischen Elemente, reduziert sich die Entwicklungszeit und der Aufwand erheblich.

Webdesign mit sofort-loslegen

Das erste was dir auffallen wird: die verblüffende Einfachheit! Blueprint offeriert dir eine solide Basis für deine Website. Dank eines kinderleicht zu bedienenden Blueprint-Generators erstellst du dir das benötigte Gitterlayout. Gesamtbreite, Anzahl der Spalten, Zwischenräume – alles lässt sich pixelgenau und mit wenigen Klicks festlegen. Heraus kommt am Ende eine recht schlanke blueprint.css, welche als Grundlage für dein Projekt dient.

Der nächste Vorteil: Hast du diese CSS einmal in deine Website eingebunden und schaust sie dir genauer an, wirst du festtellen, dass die Selektoren für einen Browserreset bereits enthalten sind. Somit hast du browserübergreifend eine solide Ausgangsbasis und legst sofort ohne mühselige Vorbereitungen los.

Hast du dir im Generator zusätzlich die Gitter-Grafik heruntergeladen, kannst du dir dein Gestaltungsraster bequem mit der CSS-Klasse “showgrid” im Hintergrund anzeigen lassen und deine Elemente bequem anhand dessen ausrichten und positionieren. Alle Befehle dazu gibt es übersichtlich in diesem Cheatsheet.

Die restlichen Entdeckungen und Aha-Effekte möchte ich dir überlassen. Und da gibt es noch einige! Nur soviel: das leidige und zeitintensive Thema “verschobenes Layout im IE6″ gehört dank Blueprint auch der Vergangenheit an. Denn die Blueprint-Konstrukte sind nicht nur valide und ermöglichen geordnete, semantische Strukturen sondern halten auch browserübergreifend.

Vorteile im Überblick

• Anders als andere CSS-Frameworks offeriert Blueprint eine schlanke – auf Wunsch auch komprimierte – CSS-Datei
• CSS-Reset, dass die Abweichungen in verschiedenen Browsern beseitigt.
• Eine festes Raster, welches in seinen Maßen komplett konfigurierbar ist.
• Voreinstellungen für professionelle Makro- und Mikrotypographie
• Styles für Formulare und Feedbackmeldungen
• Druckansicht deiner Websites
• Browserübergreifende Layouts
• Modifikationen für fluide Layouts
• Plugins für Schaltflächen, Registerkarten und Sprites.
• Großer Support durch Tools, Editoren, Cheatsheets und Vorlagen für beinahe jeden Schritt im Workflow.

Wer jetzt von CSS-Frameworks zum ersten Mal Blut geleckt hat, aber gerne über den Tellerrand nach Alternativen Ausschau halten möchte, dem leg ich diesen Artikel ans Herz. Hier werden neben Blueprint noch über zwei dutzend weitere CSS-Frameworks verglichen und mit ihren Vorzügen aufgelistet.

Und welches CSS-Framework nutzt du?

Google News ist einer der besten, bekanntesten und vorallem schnellsten Publisher für deine eigenen Blogbeiträge. Wenn du regelmäßig unique Content mit thematischer Relevanz schreibst und dein Blog sowohl von Struktur als auch Optik lesenwert ist, solltest du ihn auf jeden Fall mal den Google Moderatoren vorschlagen.

Hier kannst du deinen Blog einreichen: Google News Submission.

Checkliste für deinen Weblog

Eine Garantie für eine Aufnahme gibt es sicherlich nicht, mit dieser Checkliste steigerst du jedoch die Wahrscheinlichkeit enorm.

• Thematische Relevanz: Natürlich soll dein Artikel nicht nur die Google Moderatoren überzeugen, sondern auch die spätere Leserschaft interessieren. Aktuelle Themen sind dabei genauso begehrt wie spezielle Nieschen-Fachartikel. Tipp: Schau dir zunächst einmal die Sparte der meistgeklickten Artikel an, um ein Gefühl dafür zu bekommen was gefragt ist.
• Alter des Blogs: Der Weblog, welchen du Google vorschlägst sollte schon mindestens 6 Monate auf dem Buckel haben. Je älter desto besser! Neue und wohlmöglich noch leere Blogs werden von Google ignoriert. Tipp: Warte daher lieber, bis du einiges an guten Content angesammelt hast.
• Regelmäßige Updates: Da du gegenüber Google als aktive und verlässliche Newsquelle auftreten willst, sollte dein Blog auch regelmäßig mit neuen Beiträgen versorgt werden. Es muss ja nicht gleich täglich sein – jedoch sollte einmal pro Woche schon ein neuer Artikel deine Hauptseite schmücken. Tipp: Mit mehreren Autoren lässt sich diese Frequenz gut halten.
• Inhaltliche und orthografische Qualität: Versteht sich im Prinzip von selbst: Sobald deine Beiträge bei Google erscheinen sind sie lesbar für alle Öffentlichkeit und stehen womöglich neben Fachartikeln und Pressemitteilungen. Daher solltest du stets auf korrekte Rechtschreibung und einen guten Schreibstil wert legen.
• mehrere Autoren: Google siehte es gerne, wenn mehrere Personen Informationen für den Weblog zusammentragen. 2-3 verschiedene Autoren sollten daher schon für stetigen Lesestoff sorgen. Tipp: Lade dir Gastautoren ein und schreibt euch gegenseitig Artikel, wenn das Thema ungefähr übereinstimmt .
• Eigene Autorenseite: Die Anmeldung bei Google News erfordert die Angabe einer sogenannten Autoren-Seite. Dazu reicht eine einzelne Website, welche unter eigener URL auffindbar ist. Diese listet alle am Blog beteiligten Autoren auf. Am besten mit Kontaktmöglichkeit.
• Impressum und Kontaktseite: Ein ausführliches und rechtskräftiges Impressum sowie eine generelle Kontaktseite ist nicht nur förderlich, sondern sogar von Google News gefordert.
• Valides und suchmaschinenfreundliches Webdesign: Eine barrierefreie Website mit Texten, die für Crawler leicht zugänglich sind sollen nicht zu deinem Nachteil sein. Bedenke, dass Google Textelemente innerhalb von Javascript nur schwerlich lesen kann.
• Eindeutige und permanente URL-Struktur: Dabei muss sich nicht zwangsläufig der Titel in der URL wiederfinden. Jedoch ist eine gut durchdachte und vorallem permanente Struktur sehr hilfreich. Hinter jeder URL sollte dauerhaft ein Artikel stehen. Google fordert zudem eine dreistellige, zusammenhängende Zahl (welche jedoch keiner Jahreszahl ähneln darf) innerhalb der URL als ID. Wer jetzt jedoch um seine URL-Permalinkstruktur bangt, darf beruhigt sein. Eine weitaus elegantere Alternative ist eine News-Sitemap in XML Form. Diese lässt sich entweder manuell erstellen oder bequem per WordPress Plugin automatisch generieren.

Wie bei vielen Aufnahmeverfahren bei den “begehrten Publishern” gilt jedoch: Geduld bewahren. Bei erfolgreicher Aufnahme in Google News erhältst du eine Bestätigungsmail. Wenn es beim ersten Mal nicht klappt, probier es einfach in regelmäßigen Abständen (aller 2-3 Wochen) erneut und verbessere stets Stück für Stück deine Chancen mit den obenstehenden Tipps.

Hast du vielleicht eigene Erfahrungen gemacht oder ein paar persönliche Tricks und Kniffe, welche noch fehlen? Dann freue ich mich auf ein paar konstruktive Kommentare.