<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Grafik-Design Blog von Bendesign</title>
	
	<link>http://www.bendesign.eu/blog</link>
	<description>Grafiker, Grafikdesign, Webdesign und Werbung</description>
	<lastBuildDate>Fri, 27 Nov 2009 23:17:25 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/grafiker" /><feedburner:info uri="grafiker" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><creativeCommons:license>http://creativecommons.org/licenses/by-nc-nd/2.0/</creativeCommons:license><feedburner:emailServiceId>grafiker</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>Die Theorie von gutem Webdesign 4 (Typographie)</title>
		<link>http://feedproxy.google.com/~r/grafiker/~3/8kIhxlvDI6I/webdesign-typographie-theorie</link>
		<comments>http://www.bendesign.eu/blog/webdesign-typographie-theorie#comments</comments>
		<pubDate>Thu, 26 Nov 2009 22:27:20 +0000</pubDate>
		<dc:creator>Stephan</dc:creator>
				<category><![CDATA[Webdesign]]></category>

		<guid isPermaLink="false">http://www.bendesign.eu/blog/?p=132</guid>
		<description><![CDATA[Stilvolle Typographie im Webdesign
Typographie ist mehr als Schriftsatz
Typographie gehört eigentlich mit zum Bereich Layout. Typographie ist aber nicht nur die reine Schriftgestaltung. Man unterscheidet zwischen Makro- und Mikrotypographie. Makrotypographie bezeichnet daß, was wir umgangssprachlich als Layout bezeichnen. Also die Einteilung des Seitenformats, Satzspiegel usw.

Erst die Mikrotypographie bezeichnet die klassische Schriftgestaltung. Viele Menschen meinen meist nur [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fwebdesign-typographie-theorie"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fwebdesign-typographie-theorie" height="61" width="51" /></a></div><h2>Stilvolle Typographie im Webdesign</h2>
<h3>Typographie ist mehr als Schriftsatz</h3>
<p>Typographie gehört eigentlich mit zum Bereich Layout. Typographie ist aber nicht nur die reine Schriftgestaltung. Man unterscheidet zwischen Makro- und Mikrotypographie. Makrotypographie bezeichnet daß, was wir umgangssprachlich als Layout bezeichnen. Also die Einteilung des Seitenformats, Satzspiegel usw.</p>
<p><span id="more-132"></span></p>
<p>Erst die Mikrotypographie bezeichnet die klassische Schriftgestaltung. Viele Menschen meinen meist nur den Bereich der Mikrotypographie, wenn von Typographie die Rede ist.<br />
Beim  Einsatz von Typographie geht es wieder darum die zu übermittelnden Informationen oder die „Botschaft“ immer feiner zu untergliedern und dadurch noch besser lesbar, findbar und intuitiv greifbar zu machen.</p>
<div id="attachment_133" class="wp-caption aligncenter" style="width: 336px"><img class="size-full wp-image-133" title="Typographie im Webdesign" src="http://www.bendesign.eu/blog/wp-content/uploads/leseweite.jpg" alt="leseweite" width="326" height="367" /><p class="wp-caption-text">Erhöhter Zeichendurchschuss verbessert die Lesbarkeit.</p></div>
<p>Das obere Beispiel lässt sich gut lesen. Der Kontrast bleibt gewahrt, der Zeilenabstand sorgt für gute Lesbarkeit. Das Lesen im Internet ist nicht so leicht und die wenigsten Menschen haben die Zeit dafür. Deswegen sollte man das Auffinden der für Sie relevanten Informationen  immer so einfach wie möglich gestalten.</p>
<h3>Gliederung von Web-Text</h3>
<p>Gliedern Sie die Informationen Ihrer Texte in inhaltlich zusammenhängende Sinn-Abschnitte und heben Sie diese thematisch getrennten Blöcke voneinander ab.<br />
Falls es das Thema hergibt bauen Sie Aufzählungslisten in Ihr Layout mit ein. Nichts wird im Internet so gerne gelesen wie Listen.</p>
<div id="attachment_134" class="wp-caption aligncenter" style="width: 335px"><img class="size-full wp-image-134" title="typographie_webdesign" src="http://www.bendesign.eu/blog/wp-content/uploads/typographie_webdesign.jpg" alt="typographie_webdesign" width="325" height="318" /><p class="wp-caption-text">Gliedern Sie Ihre Texte, sonst liest sie keiner.</p></div>
<h3>Die Überschrift im Webdesign</h3>
<p>Eigentlich selbsterklärend. Trotzdem wird immer wieder mißachtet, daß Texte sinnvoll  mit Zwischenüberschriften gegliedert werden sollten. Der Website-Besucher überfliegt den Text wahrscheinlich ersteinmal. Durch Zwischenüberschriften hat man hier die Möglichkeit dem Leser Anhaltspunkte zu bieten.  Gut getextete Headlines können vielleicht seine Aufmerksamkeit gewinnen, so daß er den folgenden Absatz liest oder mindestens etwas genauer scannt.</p>
<p>Bei einem Text-Layout fallen einem Leser in der Regel zunächst die Headlines auf. Sie sollten gut gemacht sein und sich grafisch vom Hintergrund und vom übrigen Text deutlich abheben. (z.B. durch Farbe, Größe, Textauszeichnung (Fett, kursiv, Condensed), Laufweite, Zeilenabstand, Schatten, Licht, usw.), Ein mit Überschriften und Zwischenüberschriften optimiertes Dokument ist gut zu überblicken und verführt zum weiterlesen. Auch Suchmaschinen-Robots mögen Dokumente die mit den unterschiedlichen Überschriftauszeichnungen (&lt;H1&gt;,&lt;H2&gt;,&lt;H3&gt; usw…) untergegliedert sind.</p>
<div id="attachment_135" class="wp-caption aligncenter" style="width: 350px"><img class="size-full wp-image-135" title="ben_suchmaschinenrobot" src="http://www.bendesign.eu/blog/wp-content/uploads/ben_suchmaschinenrobot.jpg" alt="Robots mögen untergliederten Text." width="340" height="261" /><p class="wp-caption-text">Der Google-Bot bevorzugt gegliederte Texte</p></div>
<h3>Die richtige Schriftart</h3>
<p>Im Webdesign gibt es für eine Schrift spezielle Anforderungen.  Natürlich muß Sie nicht nur thematisch passen, sondern am Bildschirm gut lesbar sein. Bei kleinen Textgrößen empfiehlt sich der Verzicht auf Serifen. Es gibt einen kleinen Konsens aus Systemschriftarten, die die meisten Leute installiert haben. Diese Schriften nennen sich „web-safe“ Schriftarten, weil jeder Computer die Schriftart annähernd gleich anzeigen kann.</p>
<p>Seit  CSS3 besteht allerdings die Möglichkeit eigene Schriften zu hinterlegen, die der Browser nachlädt. Ein hilfreicher Service ist beispielsweise Typekit. Der Anbieter hat Hunderte verschiedenster Schriftarten auf dem Server hinterlegt. Eine Zeile HTML Code im eigenen Webdesign reicht aus um darauf zurückzugreifen. Möchte man den Service auf mehr als einer Website verwenden muß man eine jährliche Gebühr zahlen.</p>
<div id="attachment_137" class="wp-caption aligncenter" style="width: 145px"><img class="size-full wp-image-137" title="typekit" src="http://www.bendesign.eu/blog/wp-content/uploads/typekit.jpg" alt="Typekit bietet hunderte Schriften &quot;on the go&quot;" width="135" height="150" /><p class="wp-caption-text">Typekit bietet Schriften - on the go</p></div>
<p><a title="Typekit" rel="nofollow" href="http://typekit.com/">http://typekit.com/</a></p>

<p><a href="http://feedads.g.doubleclick.net/~a/V1cpye8gV7B96crb6IhXMobRDw4/0/da"><img src="http://feedads.g.doubleclick.net/~a/V1cpye8gV7B96crb6IhXMobRDw4/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/V1cpye8gV7B96crb6IhXMobRDw4/1/da"><img src="http://feedads.g.doubleclick.net/~a/V1cpye8gV7B96crb6IhXMobRDw4/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.bendesign.eu/blog/webdesign-typographie-theorie/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.bendesign.eu/blog/webdesign-typographie-theorie</feedburner:origLink></item>
		<item>
		<title>Die Theorie von gutem Webdesign 3 (Farbgestaltung)</title>
		<link>http://feedproxy.google.com/~r/grafiker/~3/IHXDcUcPah8/webdesign3-farbgestaltung</link>
		<comments>http://www.bendesign.eu/blog/webdesign3-farbgestaltung#comments</comments>
		<pubDate>Sun, 22 Nov 2009 14:27:38 +0000</pubDate>
		<dc:creator>Stephan</dc:creator>
				<category><![CDATA[Webdesign]]></category>

		<guid isPermaLink="false">http://www.bendesign.eu/blog/?p=63</guid>
		<description><![CDATA[Die richtige Farbwahl spielt eine erhebliche Rolle bei effektivem Webdesign. Anhand von praktischen Beispielen können Sie sehen, wie sich die Wahl von guten Farben auf den Betrachter auswirkt. Ich habe in diesem Blog-Eintrag einmal die wichtigsten Faktoren für die richtige Farbwahl zusammengestellt, die für ein erfolgreiches Webdesign ausschlaggebend sind.]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fwebdesign3-farbgestaltung"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fwebdesign3-farbgestaltung" height="61" width="51" /></a></div><h2>Farbgestaltung und Bildauswahl für Websites</h2>
<h3>Die Farbwahl</h3>
<p>Die Wichtigkeit der richtigen Farbwahl beim Webdesign wird immer wieder unterschätzt. Es ist schon soviel darüber geschrieben worden. Deswegen fasse ich es einfach  mal kurz zusammen. Farben beeinflussen als wichtiger Faktor die Stimmung der Website. Die Farbwahl spielt eine erhebliche Rolle bei einem guten und erfolgreichen Webdesign.Die Farbwahl sollte sich natürlich an der Zielgruppe orientieren.  Verwenden Sie zum Beispiel gedämpfte Farben für edle Produkte, elegante Farben für hochpreisige Seiten, bunte Farben für verspieltere Seiten, usw.</p>
<p><strong> </strong><br />
<div id="attachment_71" class="wp-caption alignnone" style="width: 370px"><strong><strong><img class="size-full wp-image-71" title="weisse_website02" src="http://www.bendesign.eu/blog/wp-content/uploads/weisse_website021.jpg" alt="Weissräume und silberne Verläufe sorgen auf apple.com für schlichte Eleganz." width="360" height="238" /></strong><strong> </strong></strong><p class="wp-caption-text">Weissräume und silberne Verläufe sorgen auf apple.com für eine schlichte Eleganz.</p></div></p>
<p><span id="more-63"></span></p>
<div id="attachment_73" class="wp-caption alignnone" style="width: 370px"><strong><strong><img class="size-full wp-image-73" title="black_site" src="http://www.bendesign.eu/blog/wp-content/uploads/black_site2.jpg" alt="Dunkle Websites rücken gezielte Bereiche in den Fokus der Aufmerksamkeit. Dunkle Bereiche geben Halt und schonen das Auge des Betrachters. Viel negativer Text ist eher schlecht zu lesen." width="360" height="238" /></strong></strong><p class="wp-caption-text">Dunkle Websites rücken gezielt einzelne Bereiche in den Fokus. Dunkle Bereiche geben Halt und schonen das Auge des Betrachters. Viel negativer Text ist eher schlecht zu lesen.</p></div>
<p><strong> </strong></p>
<p><strong> </strong></p>
<div id="attachment_75" class="wp-caption alignnone" style="width: 370px"><strong><strong><img class="size-full wp-image-75" title="blaue_seite02" src="http://www.bendesign.eu/blog/wp-content/uploads/blaue_seite021.jpg" alt="Eine farbige Website. Blau wird von vielen Menschen als besonders angenehm empfunden. Im Beispiel vermitteln die Blautöne die Farben der Großstadtnacht. Die Stadt die nicht schläft." width="360" height="238" /></strong></strong><p class="wp-caption-text">Farbige Website. Blau wird von vielen Menschen als besonders angenehm empfunden. Hier vermitteln Blautöne die Farben der Großstadtnacht. Die Stadt die nicht schläft. Hier werden die Geschäfte gemacht.</p></div>
<p><strong> </strong></p>
<p><strong> </strong></p>
<div id="attachment_84" class="wp-caption alignnone" style="width: 399px"><strong><strong><img class="size-full wp-image-84" title="corporate_website2009_gesammelt" src="http://www.bendesign.eu/blog/wp-content/uploads/corporate_website2009_gesammelt.jpg" alt="Grosse Corporate Design Websites " width="389" height="190" /></strong></strong><p class="wp-caption-text">Grosse Corporate-Design Websites setzen heutzutage auf viel Weissraum in Kombination mit einzelnen Schmuckfarben</p></div>
<p><strong> </strong></p>
<p>Grundsätzlich empfehle ich für ein gelungenes Layout eher dezente Farben einzusetzen. Mit sorgfältig ausgewählten Eyecatcher Farben können Sie dann im zweiten Schritt die richtigen Akzente setzen, um die die Aufmerksamkeit Ihrer Leser weiter zu kanalisieren.<strong> </strong></p>
<p>Ein tolles Tool zur Planung einer zukünftigen Farbdarstellung ist das Programm Adobe Kuler, welches Sie sich kostenlos herunterladen können.</p>
<div id="attachment_90" class="wp-caption alignnone" style="width: 370px"><img class="size-full wp-image-90" title="kuler_website" src="http://www.bendesign.eu/blog/wp-content/uploads/kuler_website1.jpg" alt="kuler.adobe.de Hilft bei der stimmigen Farbabstimmung." width="360" height="238" /><p class="wp-caption-text">kuler.adobe.de Hilft bei der stimmigen Farbabstimmung.</p></div>
<div id="attachment_85" class="wp-caption alignnone" style="width: 180px"><img class="size-full wp-image-85" title="kuler01" src="http://www.bendesign.eu/blog/wp-content/uploads/kuler01.jpg" alt="Farbzusammenstellungen auf Basis eines raufgeladenen Bildes erstellen" width="170" height="90" /><p class="wp-caption-text">Farbzusammenstellungen auf Basis eines hochgeladenen Bildes erstellen</p></div>
<div id="attachment_86" class="wp-caption alignnone" style="width: 180px"><img class="size-full wp-image-86" title="kuler02" src="http://www.bendesign.eu/blog/wp-content/uploads/kuler02.jpg" alt="Austausch mit der Adobe Community" width="170" height="90" /><p class="wp-caption-text">Austausch mit der Adobe Community</p></div>
<div id="attachment_87" class="wp-caption alignnone" style="width: 180px"><img class="size-full wp-image-87" title="kuler03" src="http://www.bendesign.eu/blog/wp-content/uploads/kuler03.jpg" alt="Stimmige Farbzusammenstellungen anhand einer Farbe erstellen" width="170" height="90" /><p class="wp-caption-text">Stimmige Farbzusammenstellungen anhand einer Farbe erstellen</p></div>
<div id="attachment_88" class="wp-caption alignnone" style="width: 180px"><img class="size-full wp-image-88" title="kuler04" src="http://www.bendesign.eu/blog/wp-content/uploads/kuler04.jpg" alt="Tausende schöner Farbzusammenstellungen warten nur darauf erforscht und in eigenen Designs ausprobiert zu werden." width="170" height="90" /><p class="wp-caption-text">Tausende schöner Farbzusammenstellungen warten darauf erforscht und in eigenen Designs ausprobiert zu werden.</p></div>
<p><a title="Adobe Kuler Farbmanagement" href="http://kuler.adobe.com/">http://kuler.adobe.com/</a></p>
<p>Mit Farbabstufungen und Komplementärfarben werden die Informationen weiter nach Wichtigkeit sortiert und immer feiner untergliedert. Besonders wichtige Elemente werden mit einer auffälligen Farbe ausgezeichnet. Diese besondere Farbe sollte wirklich ausschließlich für die Auszeichnung von wichtigen Dingen reserviert werden. (Eyecatcher) Andernfalls verheizt man nur Ihre Wirkung und der Besucher wird keinen Zusammenhang mehr zwischen Farbe und Bedeutung herstellen.</p>
<h4>Das Umfeld</h4>
<p>Farben werden durch ihr Umfeld beeinflusst. Dies macht die Sache nicht unbedingt einfacher. Jede Farbe entfalltet letztendlich erst durch den Kontext, in welchem sie steht ihre volle Wirkung. Eine Stimmung entsteht also erst in der Kombination. Eine einzelne Farbe ist wie eine Note. Ein Design ist wie ein Akkord.</p>
<div id="attachment_91" class="wp-caption alignnone" style="width: 130px"><img class="size-full wp-image-91" title="einzelne_farbe" src="http://www.bendesign.eu/blog/wp-content/uploads/einzelne_farbe.jpg" alt="Die Farbwirkung wird durch Ihr Farb- Umfeld beeinflusst." width="120" height="120" /><p class="wp-caption-text">Die Farbwirkung jeder einzelnen Farbe wird durch Ihr Farb- Umfeld beeinflusst.</p></div>
<div id="attachment_92" class="wp-caption alignnone" style="width: 130px"><img class="size-full wp-image-92" title="einzelne_farbe2" src="http://www.bendesign.eu/blog/wp-content/uploads/einzelne_farbe2.jpg" alt="Aua! (Keine schöne Farbwirkung.)" width="120" height="120" /><p class="wp-caption-text">Aua! (Keine schöne Farbwirkung.)</p></div>
<div id="attachment_93" class="wp-caption alignnone" style="width: 130px"><img class="size-full wp-image-93" title="farbzusammenstellung" src="http://www.bendesign.eu/blog/wp-content/uploads/farbzusammenstellung.jpg" alt="Farben beeinflussen sich in Ihrer Wirkung gegenseitig" width="120" height="120" /><p class="wp-caption-text">Farben beeinflussen sich in Ihrer Wirkung gegenseitig</p></div>
<h4>Der Kontrast</h4>
<p>Lesbarkeit hat natürlich viel mit Typographie zu tun. Die richtige Farbwahl ist aber auch wichtig. Zur guten Nutzund Lesbarkeit sollte man vor allem auf einen guten Kontrast achten. Vergewissern Sie sich, daß genug Kontrast zwischen Text und Hintergrund besteht. Nach meiner Erfahrung sollten Sie mindestens eine Luminanz „Helligkeit“ mit mindestens 28% Unterschied wählen.</p>
<p>Der größte Kontrast besteht bei den Druckfarben (CMYK) übrigends nachgewiesenermaßen nicht zwischen Schwarz und Weiss, sondern zwischen Gelb und Blau.</p>
<p><a title="Farbkontrast" href="http://web.uni-weimar.de/medien/umgebungen/index.php5/Farbkontraste">http://web.uni-weimar.de/medien/umgebungen/index.php5/Farbkontraste</a></p>
<h4>Die Wichtigkeit</h4>
<p>Die Farbe steuert im gesamten Kontext die Wahrnehmung. Durch auffallende Farbzuordnung zu Schlüsselelementen wird die Wahrnehmung gezielt auf einzelne besonders wichtige Elemente gelenkt. Wenn man geschickt vorgeht lässt sich so die Aufmerksamkeit steuern. In der Praxis geschieht dies, indem man geschickt auf die Bereiche des „Call to action“ verweist. Amazon hat diese Technik perfektioniert.</p>
<p><strong> </strong></p>
<div id="attachment_94" class="wp-caption alignnone" style="width: 240px"><strong><strong><img class="size-full wp-image-94" title="beispiel-amazon" src="http://www.bendesign.eu/blog/wp-content/uploads/beispiel-amazon.jpg" alt="Amazon verwendet für den &quot;Call to Action&quot; auffallende Farben" width="230" height="271" /></strong></strong><p class="wp-caption-text">Amazon verweist mit auffallenden Farben auf den &quot;Call to Action&quot;</p></div>
<p><strong> </strong></p>
<p>Mehr zum Thema „Call to action“:<br />
<a title="call to action" href="http://boagworld.com/design/10-techniques-for-an-effective-call-to-action"> http://boagworld.com/design/10-techniques-for-an-effective-call-to-action</a></p>
<h3>Bildwahl</h3>
<p>Bilder haben einen großen Einfluß auf das Feeling einer Seite. Man kann bei der Auswahl der richtigen Bilder nicht vorsichtig genug vorgehen. Falsch gewählte Bilder ziehen die Qualität der ganzen Website nach unten. Nicht nur die einer einzelnen Seite! Schlechte Qualität oder falsch gewählte Kompressionsstufen hinterlassen einen negativen Beigeschmack.</p>
<p>Geeignete Bilder  oder Videos sind das A und O einer erfolgreichen Website, denn Sie visualisieren das Thema und unterstützen oder erweitern die Aussage. Ein gutes Bild, eine Grafik oder ein Video zum Thema interessieren Ihre Besucher. Sorgfältig ausgewählte Bilder eignen sich daher hervorragend um eine Dienstleistung oder ein Produkt zu verkaufen.</p>
<div id="attachment_96" class="wp-caption alignnone" style="width: 370px"><img class="size-full wp-image-96" title="bilder_webdesign05" src="http://www.bendesign.eu/blog/wp-content/uploads/bilder_webdesign05.jpg" alt="Bild als &quot;Hinkucker&quot;" width="360" height="238" /><p class="wp-caption-text">Bilder unterstützen die Imagewirkung</p></div>
<div id="attachment_97" class="wp-caption alignnone" style="width: 370px"><img class="size-full wp-image-97" title="bilder_webdesign06" src="http://www.bendesign.eu/blog/wp-content/uploads/bilder_webdesign06.jpg" alt="Beispiel 2" width="360" height="238" /><p class="wp-caption-text">Bilder erzeugen Stimmung auf der Website.</p></div>
<div id="attachment_98" class="wp-caption alignnone" style="width: 370px"><img class="size-full wp-image-98" title="bilder_webdesign03" src="http://www.bendesign.eu/blog/wp-content/uploads/bilder_webdesign03.jpg" alt="Bilder können polarisieren. Machen Sie sich Ihre Wirkung lieber vorher klar." width="360" height="238" /><p class="wp-caption-text">Bilder in der Werbung können polarisieren. Machen Sie sich Ihre Wirkung deswegen lieber vorher klar.</p></div>
<div id="attachment_99" class="wp-caption alignnone" style="width: 370px"><img class="size-full wp-image-99" title="bilder_webdesign02" src="http://www.bendesign.eu/blog/wp-content/uploads/bilder_webdesign02.jpg" alt="Das Thema dieser Seite wird sofort verstanden." width="360" height="238" /><p class="wp-caption-text">Das Thema dieser Seite wird sofort verstanden.</p></div>
<div id="attachment_100" class="wp-caption alignnone" style="width: 370px"><img class="size-full wp-image-100" title="bilder_webdesign01_apple" src="http://www.bendesign.eu/blog/wp-content/uploads/bilder_webdesign01_apple.jpg" alt="Auch bei Apple ist man sich über die Wirkung von guten Bildern im klaren. Nahezu jeder Bereich wird durch entsprechende Bilder visualisiert." width="360" height="238" /><p class="wp-caption-text">Auch bei Apple ist man sich über die Wirkung von guten Bildern im klaren. Nahezu jeder Bereich wird durch entsprechende Bilder visualisiert.</p></div>
<p><strong><br />
</strong><br />
<script type="text/javascript"><!--
google_ad_client = "pub-9861478338864858";
/* bendesign blog 336x280, für einzelartikel */
google_ad_slot = "1927116501";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>

<p><a href="http://feedads.g.doubleclick.net/~a/ccZyEVR_QRhVUNY9Z0IHtiXzRA8/0/da"><img src="http://feedads.g.doubleclick.net/~a/ccZyEVR_QRhVUNY9Z0IHtiXzRA8/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/ccZyEVR_QRhVUNY9Z0IHtiXzRA8/1/da"><img src="http://feedads.g.doubleclick.net/~a/ccZyEVR_QRhVUNY9Z0IHtiXzRA8/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.bendesign.eu/blog/webdesign3-farbgestaltung/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.bendesign.eu/blog/webdesign3-farbgestaltung</feedburner:origLink></item>
		<item>
		<title>Die Theorie von gutem Webdesign 2 (Navigation)</title>
		<link>http://feedproxy.google.com/~r/grafiker/~3/lOwmUzcITnU/die-theorie-von-gutem-webdesign-2-navigation</link>
		<comments>http://www.bendesign.eu/blog/die-theorie-von-gutem-webdesign-2-navigation#comments</comments>
		<pubDate>Wed, 21 Oct 2009 21:15:19 +0000</pubDate>
		<dc:creator>Stephan</dc:creator>
				<category><![CDATA[Webdesign]]></category>

		<guid isPermaLink="false">http://www.bendesign.eu/blog/?p=51</guid>
		<description><![CDATA[Effektive Navigation im Webdesign
Je nach inhaltlicher Ausrichtung und Publikum der Website gibt es verschiedene Möglichkeiten eine Navigation einzurichten.
Mögliche Navigationslinien
1.) Die Ein-Linien Navigation . Ein Beispiel für ein einfaches Thema oder eine Präsentation:
(Der User navigiert anhand von einem vorgegebenen Pfad. Diese Art der Benutzerführung hat sich in der Praxis bei logischen Abfolgen oder einfachen Themen bewährt.)

2.) [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fdie-theorie-von-gutem-webdesign-2-navigation"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fdie-theorie-von-gutem-webdesign-2-navigation" height="61" width="51" /></a></div><h2>Effektive Navigation im Webdesign</h2>
<p>Je nach inhaltlicher Ausrichtung und Publikum der Website gibt es verschiedene Möglichkeiten eine Navigation einzurichten.</p>
<h3>Mögliche Navigationslinien</h3>
<p><strong>1.) Die Ein-Linien Navigation</strong> . Ein Beispiel für ein einfaches Thema oder eine Präsentation:<br />
(Der User navigiert anhand von einem vorgegebenen Pfad. Diese Art der Benutzerführung hat sich in der Praxis bei logischen Abfolgen oder einfachen Themen bewährt.)</p>
<div id="attachment_53" class="wp-caption alignnone" style="width: 310px"><img class="size-full wp-image-53" title="einliniennavigation01" src="http://www.bendesign.eu/blog/wp-content/uploads/einliniennavigation01.jpg" alt="Die Navigation erfolgt nach einem vorgegebenen Pfad." width="300" height="81" /><p class="wp-caption-text">Die Navigation erfolgt nach einem vorgegebenen Pfad.</p></div>
<p><span id="more-51"></span></p>
<p><strong>2.) Zentrale Navigation</strong> (Verschachtelte Navigation)<br />
(Von einer Startseite ausgehend kann der User wählen, welche Seiten er weiter besuchen möchte. Er hat mehrere Möglichkeiten zur Auswahl.)</p>
<div id="attachment_54" class="wp-caption alignnone" style="width: 310px"><img class="size-full wp-image-54" title="zentrale-navigation" src="http://www.bendesign.eu/blog/wp-content/uploads/zentrale-navigation.jpg" alt="Von einer Startseite aus gibt es mehrere Auswahlmöglichkeiten" width="300" height="249" /><p class="wp-caption-text">Von einer Startseite aus gibt es mehrere Auswahlmöglichkeiten</p></div>
<p><strong>3.) Netz Navigation</strong><br />
Seiten sind komplett untereinander vernetzt. Jede Seite kann dabei eine mögliche Startseite sein. Diese Art der Navigation hat für versierte User viele Vorteile, da durch die weitreichende Vernetzung gezielt bestimmte Informationen angesprungen werden. Unbedarfte User sind aber schnell überfordert und empfinden aufgrund der Fülle an Informationen eine Art Streß. Wenn es sich nicht um überaus komplexe Website handelt (z.B. Wikipedia) wiederhole ich lieber an entsprechender Stelle nochmal kurz einen Satz von einer anderen Seite anstatt intern komplett alles zu verlinken.</p>
<div id="attachment_55" class="wp-caption alignnone" style="width: 249px"><img class="size-full wp-image-55" title="kreisnavigation" src="http://www.bendesign.eu/blog/wp-content/uploads/kreisnavigation.jpg" alt="In der Netznavigation gibt es keinen &quot;Anfang&quot; und kein &quot;Ende&quot;." width="239" height="248" /><p class="wp-caption-text">In der Netznavigation gibt es keinen &quot;Anfang&quot; und kein &quot;Ende&quot;.</p></div>
<p><strong>4.) Such Navigation</strong><br />
Der Besucher ruft über eine Abfragemaske eine auf seiner Anfrage basierte generierte Seite ab) Die Informationen werden bedarfsgerecht geliefert. Eine solche Informationsgewinnung bietet natürlich ein Höchstmaß an Flexibilität. Ein großer Nachteil ist jedoch, daß der User sich selbst im klaren sein muß, was er sucht. Dies erfordert aktive Anstrengung.</p>
<p><img class="alignnone size-full wp-image-56" title="suchbegriff" src="http://www.bendesign.eu/blog/wp-content/uploads/suchbegriff.jpg" alt="suchbegriff" width="300" height="87" /></p>
<p>Bei den anderen Navigationsmöglichkeiten bekommt er jeweils mehrere Vorschläge zur Wahl. Hier muß er selbst aktiv werden. In der Praxis ist Ihr Besucher bereits aktiv geworden um den Weg zu Ihnen zu finden. (Über die URL, einen Suchbegriff oder einen Link) Es geht vor allem darum seine Erwartung zu kennen und bestmöglich zu erfüllen und ihn nicht mit Auswahlmöglichkeiten zu verwirren.</p>
<h2>Orientierung anhand der Site-Navigation</h2>
<p>Eine Navigationsstruktur ist grundlegend für jede Website, die aus mehreren Seiten besteht. Sie muß so einfach und intuitiv wie möglich zu bedienen sein, denn mit Ihrer Hilfe soll der User selbstständig über die Website navigieren. Im Idealfall behält der Besucher  den Überblick und sieht gleichzeitig zu jedem Zeitpunkt, an welcher Stelle er sich gerade aufhält. Eine einfache und beliebte Möglichkeit über die Navigation zu zeigen, wo man sich gerade aufhält ist es beispielsweise, den Link zu Highlighten.</p>
<div id="attachment_57" class="wp-caption alignnone" style="width: 489px"><img class="size-full wp-image-57" title="link-gehighligted" src="http://www.bendesign.eu/blog/wp-content/uploads/link-gehighligted.jpg" alt="Die Position wird über das Menü angezeigt" width="479" height="49" /><p class="wp-caption-text">Die Position wird über das Menü angezeigt</p></div>
<p>Pfadanzeigen, die sogenannten „Breadcrumbs“ (Brotkrumpen) helfen bei verschachtelten Menüs und großen Websites den Überblick zu behalten.  Der Name Brotkrumpen kommt vom Märchen „Häsel und Gretel“. Die beiden Kinder markieren Ihren Pfad um sich nicht zu verirren, indem Sie alle paar Schritte einen Brotkrumpen fallen lassen. Anders als im Märchen futtern im Netz keine Tiere Ihre Markierungen weg und die User können jederzeit erkennen, wo sie sich in der Site-Struktur befinden und gezielt einzelne Schritte zurückspringen oder weitergehen.</p>
<div id="attachment_58" class="wp-caption alignnone" style="width: 495px"><img class="size-full wp-image-58" title="breathcrumbs" src="http://www.bendesign.eu/blog/wp-content/uploads/breathcrumbs.jpg" alt="Breathcrumb Navigation" width="485" height="91" /><p class="wp-caption-text">Breathcrumb Navigation</p></div>
<h3>Intuitive Navigation im Webdesign</h3>
<p>Grafik- und Webdesign muß klar, einfach und leicht zu verstehen sein. Das ist die Essenz von gutem Design. Jedes Haus würde einstürzen, wenn man es auf weiches Fundament baut. Gimmicks können also sinnvollerweise erst dazukommen, wenn die Basis solide steht. Das Navigationsmenü und damit die Auswahl der Möglichkeiten sollte allerdings auffallen und sich optisch soweit von der Seite absetzen, daß Sie gut wahrgenommen wird. Jedoch ohne abzulenken. Die Navigation ist lediglich Mittel zum Zweck. Kein Selbstzweck.  Sie muß als dezentes Werkzeug zur Verfügung stehen und auf keinen Fall die eigenen Inhalte dominieren. Da gehört viel Fingerspitzengefühl dazu, denn gleichzeitig muß das Menü soweit auffallen, daß es intuitiv wahrgenommen wird oder idealerweise Spaß macht. Wichtig ist hier eine klare Abgrenzung zwischen den Bereichen. Das Festlegen von einzelnen Farbwiedergaben für unterschiedliche Bereiche kann hilfreich sein.</p>
<div id="attachment_59" class="wp-caption alignnone" style="width: 410px"><img class="size-full wp-image-59" title="farbbereiche-navigation" src="http://www.bendesign.eu/blog/wp-content/uploads/farbbereiche-navigation.jpg" alt="Website Bereiche können durch Farben symbolisiert werden." width="400" height="56" /><p class="wp-caption-text">Website Bereiche können durch Farben symbolisiert werden.</p></div>
<h3>Die Benennung der “Buttons”</h3>
<p>Wichtig ist natürlich eine klare, sinnvolle und beschreibende Benennung der einzelnen Navigationselemente. Idealerweise sollte man einzelne Worte verwenden oder sogar Piktogramme. (Der User muß sofort erkennen was sich hinter dem Button verbirgt) Keiner hat Lust über einen Button nachzudenken, bevor er klickt. Wenn man einmal klickt und keine zufriedenstellende Antwort auf sein Interesse findet kann es bereits zu spät sein. Es geht darum die relevanten Informationen möglichst schnell zu finden. Konzentrieren Sie sich daher auf das wesentliche.</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-9861478338864858";
/* bendesign blog 336x280, für einzelartikel */
google_ad_slot = "1927116501";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>

<p><a href="http://feedads.g.doubleclick.net/~a/-kz7Xb6Ktjqw-KrQ4lAgbbKE_Uk/0/da"><img src="http://feedads.g.doubleclick.net/~a/-kz7Xb6Ktjqw-KrQ4lAgbbKE_Uk/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/-kz7Xb6Ktjqw-KrQ4lAgbbKE_Uk/1/da"><img src="http://feedads.g.doubleclick.net/~a/-kz7Xb6Ktjqw-KrQ4lAgbbKE_Uk/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.bendesign.eu/blog/die-theorie-von-gutem-webdesign-2-navigation/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.bendesign.eu/blog/die-theorie-von-gutem-webdesign-2-navigation</feedburner:origLink></item>
		<item>
		<title>Die Theorie von gutem Webdesign 1 (Layout)</title>
		<link>http://feedproxy.google.com/~r/grafiker/~3/n8zOWRBD1mc/die-theorie-von-gutem-webdesign</link>
		<comments>http://www.bendesign.eu/blog/die-theorie-von-gutem-webdesign#comments</comments>
		<pubDate>Tue, 20 Oct 2009 11:35:38 +0000</pubDate>
		<dc:creator>Stephan</dc:creator>
				<category><![CDATA[Webdesign]]></category>

		<guid isPermaLink="false">http://www.bendesign.eu/blog/?p=44</guid>
		<description><![CDATA[Gutes Webdesign hat mit Erfahrung, Gespür und Kentniss der elementaren Design-Grundlagen zu tun. Der erste Teil über die "Theorie von gutem Webdesign" behandelt die Möglichkeiten der Layoutgestaltung.]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fdie-theorie-von-gutem-webdesign"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fdie-theorie-von-gutem-webdesign" height="61" width="51" /></a></div><h2>Die Theorie von gutem Webdesign</h2>
<p>Gutes Webdesign ist ein komplexes Thema.  Es hat mit Erfahrung, Gespür und Kentniss der elementaren Design-Grundlagen zu tun. Nachfolgend möchte ich einen kleinen Überblick über die Hintergründe geben.</p>
<h2>Teil 1: Das Layout.</h2>
<p><strong>Schauen wir uns zuerst das Thema Layout an:</strong></p>
<p>Den Besuchern einer Website geht es vorrangig darum die relevanten Informationen<strong> </strong>schnell zu finden. Zeit ist schließlich kostbar! Es gibt ein Überangebot an Informationen. User bleiben daher nicht auf unübersichtlichen Seiten hängen, sondern surfen schnell weiter.</p>
<p><span id="more-44"></span>Informationen in Website Dokumenten müßen möglichst relevant sortiert, geordnet und gegliedert werden um dem User das Finden der gewünschten Informationen so einfach wie möglich zu machen. Dies gilt im Übrigen auch, wenn Sie über Ihre Website verkaufen möchten. Bevor der Entschluß  zum Kauf eines Produktes gefasst wird informieren sich Ihre Kunden in der Regel über das angebotene Produkt oder eine Dienstleistung. Ein großer Teil der Käufer verwendet zur Recherche das Internet.</p>
<h3>Layout von Webdesign</h3>
<p>Es gibt eine Vielzahl möglicher Layouts  um ein neues Webdesign Projekt erfolgreich zu machen.  Layouts können sehr verschieden sein und trotzdem jedes für sich genommen wunderbar funktionieren. Hier gibt es keine allgemeingültige Regel.</p>
<p>Je einfacher ein Design ist, desto leichter ist es für den User seine Funktion intuitiv zu verstehen. Und je schneller der User den Sinn und die Funktion einer besuchten Seite versteht, desto zufriedener ist er, weil er umso schneller die gesuchten Informationen findet.</p>
<p>Erst wenn die Basis stimmt und eine intuitive Bedienung gewährleistet ist kommen weitere Design-Elemente dazu, welche die Seite optisch einzigartig machen und den Besuch zu einem Erlebnis werden lassen.</p>
<p>Wie schon gesagt, es gibt keine Musterlösung für ein gutes Layout. (Wäre auch langweilig) Trotzdem gibt es einige verbindliche Elemente, die gute Layouts gemeinsam haben:</p>
<h3>Farbflächen</h3>
<p>Bei der anfänglichen Aufteilung von Flächen zu einem Webdesign Layout kommt es immer vor allem auch auf die freien Flächen an. Sie geben den Elementen erst den Raum zum „atmen“. Jedes Design braucht Platz um sich zu entfalten. Je mehr Raum um ein Element ist, desto mehr Bedeutung bekommt es und umso auffälliger wird es wahrgenommen. Auch wenn man diese freien Bereiche des Layouts nicht bewusst  sieht sind sie doch essentiell für ein gutes Layout. Flächen bauen Spannung auf und halten letzlich das Design zusammen. Für die richtige Anordnung ist vor allem Erfahrung und ein gutes ästhetisches Gespür notwendig.</p>
<div id="attachment_45" class="wp-caption alignnone" style="width: 435px"><img class="size-full wp-image-45" title="weissraum" src="http://www.bendesign.eu/blog/wp-content/uploads/weissraum.jpg" alt="Farbflächen geben Elementen im Design Raum zum &quot;atmen&quot;" width="425" height="290" /><p class="wp-caption-text">Farbflächen geben Elementen im Design Raum zum &quot;atmen&quot;</p></div>
<p>Durch den Weissraum und die ungewöhnlichen Positionen entsteht ein besonderer Eindruck.</p>
<h3>Lesefluß</h3>
<p>Der Lesefluß eines Dokuments ist die Art und Weise wie der Besucher über das Dokument navigiert. Die wenigsten Menschen lesen einzelne Websites komplett. Der User überfliegt ein Dokument mit seinen Augen. Seine Aufmerksamkeit richtet sich dabei auf ganz bestimmte Elemente.</p>
<p>Dieses Verhalten kann man bereits bei seinem Webdesign Layout. Es geht natürlich darum, den User sinnvoll und schlüssig über den Seitenaufbau jeder einzelnen Seite zu leiten.</p>
<p>Einfluß wird dabei ausgeübt durch unterschiedliche Elemente. Z.B:  die Elementgröße, Bild, Farben, Flächen, Typographie, Context usw. Wichtige Elemente werden optisch hervorgehoben. Details oder unwichtigere Informationen treten in den Hintergrund.</p>
<p>Der natürliche Lesefluß eines Dokuments orientiert sich an verschiedenen Faktoren. Grundsätzlich: von oben nach unten, von links nach rechts. Dieser Lesefluss wird jedoch beeinflusst durch  Anordnung, Farbe, Größe, Inhalt usw. Jedes einzelne Element kann Einfluß ausüben und den natürlichen Lesefluss ablenken. Daraus ergibt sich ein neuer Lesefluß.</p>
<div id="attachment_46" class="wp-caption alignnone" style="width: 210px"><img class="size-full wp-image-46" title="lesefluss" src="http://www.bendesign.eu/blog/wp-content/uploads/lesefluss.jpg" alt="Mit verschiedenen Elementen steuert der Webdesigner den Lesefluß." width="200" height="304" /><p class="wp-caption-text">Mit verschiedenen Elementen steuert der Webdesigner den Lesefluß.</p></div>
<p>Ein Logischer Lesefluß leitet den Leser sinnvoll über die Website.  Die aufeinander Aufbauenden Informationen werden sinnvoll wahrgenommen. Ein roter Faden führt schlüssig von einem Element zum nächsten.</p>
<h3>Anordnung / Aufteilung</h3>
<p>Eine optimale Anordnung der einzelnen Design-Elemente helfen dabei einen guten Lesefluß zu gewährleisten. Informationen können leicht erfasst und relevante Textpassagen einzeln gelesen werden.<br />
In einem guten Layout lässt sich immer eine Ordnung erkennen. Manchmal erst auf den zweiten Blick. Um den Überblick zu behalten haben sich verschiedene Spaltensysteme bewährt. Eines der beliebtesten ist das „<a title="960 Grid System" href="http://960.gs/demo.hml">960 Grid System</a>&#8220;.</p>
<div id="attachment_47" class="wp-caption alignnone" style="width: 488px"><img class="size-full wp-image-47" title="960grid" src="http://www.bendesign.eu/blog/wp-content/uploads/960grid.jpg" alt="Ordnung schaffen mit Spaltendesign. Als Beispiel, das 960 Grid System." width="478" height="263" /><p class="wp-caption-text">Ordnung schaffen mit Spaltendesign. Als Beispiel, das 960 Grid System.</p></div>
<h3>Seitenteilungsverhältniss &#8211; Der goldene Schnitt</h3>
<p>Ein bewährtes Verhältniss der Seitenaufteilung ist der goldene Schnitt. Der goldene Schnitt bezeichnet eine besondere Harmonie zwischen zwei Seitenverhältnissen. Zahlreiche große Künstler vergangener Jahrhunderte verwendeten diese natürliche Ästhetik bewusst oder unbewusst in Ihren Meisterwerken aus Malerei, Bildhauerei, Architektur usw.<br />
Die Aufteilung nach den Regeln des goldenen Schnitts findet sich sichtbar oder unsichtbar hinter zahllosen großartigen Designs. Eine Kentniss über dieses Format ist daher essentiell.  Talentierte Zeichner, Fotografen, Designer oder Maler verwenden diese bestimmte Formel aber sowieso unbewusst.</p>
<p>Ich gehe bei einem neuen Design so vor, daß ich mir ein Design ansehe und erstmal ein paar Sekunden auf mich wirken lasse. Wenn es sich einerseites ausgewogen anfühlt und gleichzeitig eine eigene Spannung hat ist es gut für mich. In der ein oder anderen Form kommt dabei auch immer der goldene Schnitt vor. Es lohnt sich durchaus über sein eigenes Design nachzudenken und sich nicht damit abzufinden nur das Werkzeug zum Zweck zu sein.</p>
<div id="attachment_48" class="wp-caption alignnone" style="width: 290px"><img class="size-full wp-image-48" title="goldener-schnitt" src="http://www.bendesign.eu/blog/wp-content/uploads/goldener-schnitt.jpg" alt="Der goldene Schnitt." width="280" height="278" /><p class="wp-caption-text">Der goldene Schnitt.</p></div>
<div class="wp-caption alignnone" style="width: 412px"><img title="Der goldene Schnitt" src="http://www.bendesign.eu/images/goldenerschnitt.jpg" alt="Eine Art theoretisches Universalmaß der Ästhetik" width="402" height="24" /><p class="wp-caption-text">Eine Art theoretisches Universalmaß der Ästhetik</p></div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-9861478338864858";
/* bendesign blog 336x280, für einzelartikel */
google_ad_slot = "1927116501";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>

<p><a href="http://feedads.g.doubleclick.net/~a/lXbCXjYUaiG339nvUYm30QOZ92o/0/da"><img src="http://feedads.g.doubleclick.net/~a/lXbCXjYUaiG339nvUYm30QOZ92o/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/lXbCXjYUaiG339nvUYm30QOZ92o/1/da"><img src="http://feedads.g.doubleclick.net/~a/lXbCXjYUaiG339nvUYm30QOZ92o/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.bendesign.eu/blog/die-theorie-von-gutem-webdesign/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.bendesign.eu/blog/die-theorie-von-gutem-webdesign</feedburner:origLink></item>
		<item>
		<title>Logos mit Helvetica</title>
		<link>http://feedproxy.google.com/~r/grafiker/~3/6vZVzJndZ-w/logos-mit-helvetica</link>
		<comments>http://www.bendesign.eu/blog/logos-mit-helvetica#comments</comments>
		<pubDate>Mon, 12 Oct 2009 08:32:48 +0000</pubDate>
		<dc:creator>Stephan</dc:creator>
				<category><![CDATA[Grafik Design]]></category>

		<guid isPermaLink="false">http://www.bendesign.eu/blog/?p=29</guid>
		<description><![CDATA[Über 60% aller Printerzeugnisse verwenden die Schrift Helvetica. Hier sind 40 Logos, die ebenfalls mit der Helvetica erstellt wurden.]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Flogos-mit-helvetica"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Flogos-mit-helvetica" height="61" width="51" /></a></div><p>Die beliebteste Schrift überhaupt dürfte Helvetica sein. 60% aller Printerzeugnisse verwenden Sie. Webdesignerdepot hat eine Reihe von Logos erstellt, die ebenfalls mit der alterwürdigen Helvetica erstellt wurden.</p>
<p><span id="more-29"></span>Darunter sind u.a. Crate &amp; Barrel, American Airlines, Staples, die deutsche Lufthansa etc. Mehr unter:</p>
<div id="attachment_40" class="wp-caption alignnone" style="width: 410px"><img class="size-full wp-image-40" title="helvetica-logos" src="http://www.bendesign.eu/blog/wp-content/uploads/helvetica-logos.jpg" alt="Logodesign mit Helvetica" width="400" height="452" /><p class="wp-caption-text">Logodesign mit Helvetica</p></div>
<p><a title="Excellent Logos created with helvetica" href="http://www.webdesignerdepot.com/2009/03/40-excellent-logos-created-with-helvetica/" target="_blank">Logos mit Helvetica</a>.</p>
<p></p>

<p><a href="http://feedads.g.doubleclick.net/~a/pgsDqwsHoNaf1DtBDIazRRpxoF8/0/da"><img src="http://feedads.g.doubleclick.net/~a/pgsDqwsHoNaf1DtBDIazRRpxoF8/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/pgsDqwsHoNaf1DtBDIazRRpxoF8/1/da"><img src="http://feedads.g.doubleclick.net/~a/pgsDqwsHoNaf1DtBDIazRRpxoF8/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.bendesign.eu/blog/logos-mit-helvetica/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.bendesign.eu/blog/logos-mit-helvetica</feedburner:origLink></item>
		<item>
		<title>Logodesign Trends 2009</title>
		<link>http://feedproxy.google.com/~r/grafiker/~3/vh813_jLJRo/logodesign-trends-2009</link>
		<comments>http://www.bendesign.eu/blog/logodesign-trends-2009#comments</comments>
		<pubDate>Sun, 11 Oct 2009 21:19:16 +0000</pubDate>
		<dc:creator>Stephan</dc:creator>
				<category><![CDATA[Grafik Design]]></category>

		<guid isPermaLink="false">http://www.bendesign.eu/blog/?p=21</guid>
		<description><![CDATA[Die Logodesign Trends 2009 wurden von Bill Gardner ansehnlich zusammengefasst.]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Flogodesign-trends-2009"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Flogodesign-trends-2009" height="61" width="51" /></a></div><p>Bill Gardner hat sich wieder viel Arbeit gemacht und bei der Vorbereitung für das neue LogoLounge-Buch die Logodesign Trends 2009 untersucht. Als Grundlage dafür dienen ihm die 35.000 Logos auf logolounge. Bill beobachtet einen Trend zur Verwendung von knappen Worten im Firmennamen. Beschreibende Zusätze werden nahezu  komplett weggelassen. Außerdem findet allgemein eine Entwicklung hin zu einer größeren Farbvielfalt statt.</p>
<p><span id="more-21"></span></p>
<p>Die 15&#215;15 Pixel großen Favicons zeigen ebenfalls ersten Einfluß auf das Logodesign. Mehr und mehr Logodesigner überlegen bereits im Vorfeld, also bei der Erschaffung eines neuen Corporate-Design Logos, wie dieses auch reduziert als Favicon mit 15&#215;15 px noch gut aussehen kann. Hier muß das übliche Format abgewandelt werden. Je einfacher das Logo aufgebaut ist, desto leichter ist ein abstrahiertes Favicon auf das Logo zurückzuführen. Manchmal funktioniert das schon über eine besondere Farbkombination im Logo.</p>
<div id="attachment_38" class="wp-caption alignnone" style="width: 410px"><img class="size-full wp-image-38" title="logotrends2009" src="http://www.bendesign.eu/blog/wp-content/uploads/logotrends20092.jpg" alt="Logodesign Trends 2009" width="400" height="471" /><p class="wp-caption-text">Logodesign Trends 2009</p></div>
<p><a title="Logodesign Trends 2009" href="http://www.logolounge.com/logotrends/" target="_blank">Logodesign Trends 2009</a></p>
<p></p>

<p><a href="http://feedads.g.doubleclick.net/~a/dB_99SiL47s3if5XrE8Z2q7GAys/0/da"><img src="http://feedads.g.doubleclick.net/~a/dB_99SiL47s3if5XrE8Z2q7GAys/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/dB_99SiL47s3if5XrE8Z2q7GAys/1/da"><img src="http://feedads.g.doubleclick.net/~a/dB_99SiL47s3if5XrE8Z2q7GAys/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.bendesign.eu/blog/logodesign-trends-2009/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.bendesign.eu/blog/logodesign-trends-2009</feedburner:origLink></item>
		<item>
		<title>So kommen Sie leicht auf die erste Seite bei Google</title>
		<link>http://feedproxy.google.com/~r/grafiker/~3/3jJXZtWGruU/so-kommen-sie-leicht-auf-die-erste-seite-bei-google</link>
		<comments>http://www.bendesign.eu/blog/so-kommen-sie-leicht-auf-die-erste-seite-bei-google#comments</comments>
		<pubDate>Mon, 05 Oct 2009 19:03:01 +0000</pubDate>
		<dc:creator>Stephan</dc:creator>
				<category><![CDATA[Video Produktion]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[video]]></category>
		<category><![CDATA[video produktion]]></category>

		<guid isPermaLink="false">http://www.bendesign.eu/blog/?p=9</guid>
		<description><![CDATA[Jeder möchte mit seinem Keyword bei Google auf die erste Seite kommen. So schwierig ist das gar nicht. ]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fso-kommen-sie-leicht-auf-die-erste-seite-bei-google"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fso-kommen-sie-leicht-auf-die-erste-seite-bei-google" height="61" width="51" /></a></div><p>Jeder möchte mit seinem Keyword auf der ersten Google Seite landen. So schwierig ist das nicht.</p>
<p><span id="more-9"></span></p>
<p>Webverantwortliche denken bei der Suchmaschinenoptimierung oft nur an eine Optimierung für die regulären Suchtreffer und stecken daraufhin sehr viel Zeit in die Onpage Optimierung.</p>
<p>Google und andere Suchmaschinen bieten allerdings neben den normalen &#8220;Web&#8221; Treffern zusätzliche Daten in den Suchergebnissen an. (AdWords, Lokal, Videos, Pics usw.) Das Web ist voll von irgendwelchen Bildern und Videos. Die meisten sind leider relativ zusammenhanglos eingebettet und schlecht bis überhaupt nicht verschlagwortet. Es gibt durchaus Keywords, bei denen sie z.B. mit gut platzierten <a title="Bilder" href="http://www.bendesign.eu/bildbearbeitung.html" target="_blank">Bildern</a> in der Bildersuche mehr Klicks erhalten als über ein gut platziertes Treffer Website-Suchergebniss.&#8221;</p>
<p>Je breiter Sie ihre Website darstellen, desto größer wird die Chance unter den ersten Treffern zu landen. Mit Videos unter die ersten Treffer zu kommen ist bei den meisten Keywords nicht sehr schwierig. Die Produktion eines guten <a title="Videoproduktion" href="http://www.bendesign.eu/foto-video-produktion.html" target="_blank">Imagevideos</a> für das Internet lohnt sich in den meisten Fällen. Über 80% der deutschen Internetnutzer suchen regelmäßig auch bei den großen Videoportalen. (Youtube, Vimeo, MyVideo usw.)</p>
<p>Für ein Imagevideo gibt es viele mögliche Einsatzmöglichkeiten. Beispielsweise eine Darstellung der eigenen Firma, des Betriebsfeldes oder eine Erklärung Ihres Produkts. Vor der Kaufentscheidung möchte sich Ihr Kunde ohnehin im Web orientieren. Die <a title="Videoproduktion" href="http://www.bendesign.eu/foto-video-produktion.html" target="_blank">Videoproduktion</a> einer Firmendarstellung für das Internet kann sehr preiswert durchgeführt werden.</p>
<p></p>

<p><a href="http://feedads.g.doubleclick.net/~a/TFXkxzB_yMFeC5CqHMJoCNLE90k/0/da"><img src="http://feedads.g.doubleclick.net/~a/TFXkxzB_yMFeC5CqHMJoCNLE90k/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/TFXkxzB_yMFeC5CqHMJoCNLE90k/1/da"><img src="http://feedads.g.doubleclick.net/~a/TFXkxzB_yMFeC5CqHMJoCNLE90k/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.bendesign.eu/blog/so-kommen-sie-leicht-auf-die-erste-seite-bei-google/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.bendesign.eu/blog/so-kommen-sie-leicht-auf-die-erste-seite-bei-google</feedburner:origLink></item>
		<item>
		<title>Grafikdesigner Blog</title>
		<link>http://feedproxy.google.com/~r/grafiker/~3/xWlAQIEj5W4/grafikdesigner-blog</link>
		<comments>http://www.bendesign.eu/blog/grafikdesigner-blog#comments</comments>
		<pubDate>Mon, 05 Oct 2009 16:16:41 +0000</pubDate>
		<dc:creator>Stephan</dc:creator>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[wordpress blog grafiker münchen]]></category>

		<guid isPermaLink="false">http://www.bendesign.eu/blog/grafikdesigner-blog</guid>
		<description><![CDATA[Grafiker Blog gestartet.
Herzlich Willkommen auf dem Bendesign Grafikdesigner Blog aus München .
]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fgrafikdesigner-blog"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.bendesign.eu%2Fblog%2Fgrafikdesigner-blog" height="61" width="51" /></a></div><h3>Grafiker Blog gestartet.</h3>
<p>Herzlich Willkommen auf dem Bendesign Grafikdesigner Blog aus München .</p>

<p><a href="http://feedads.g.doubleclick.net/~a/E_gPAc9OAQxjBNDZs4zJb5nBERU/0/da"><img src="http://feedads.g.doubleclick.net/~a/E_gPAc9OAQxjBNDZs4zJb5nBERU/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/E_gPAc9OAQxjBNDZs4zJb5nBERU/1/da"><img src="http://feedads.g.doubleclick.net/~a/E_gPAc9OAQxjBNDZs4zJb5nBERU/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.bendesign.eu/blog/grafikdesigner-blog/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.bendesign.eu/blog/grafikdesigner-blog</feedburner:origLink></item>
	</channel>
</rss>
