Archiv der Kategorie: Webdesign

Webdesign Infobox

Ein sehr gutes Beispiel von einem klaren, reduzierten Design stellt die neue Infobox zu den Aufnahmeinformationen auf dem Bilderportal flickr dar:

Infobox Digitalkamera

Infobox Digitalkamera

Weiterlesen

Google Wetter Design

Google hat mit der strukturierten Datendarstellung bereits während der Suche das nächste Ziel erreicht: die Darstellung der Wettervorhersage. Natürlich kann man die Absichten des Unternehmens nachvollziehen – je länger der Benutzer auf Seiten der Suchmaschine verweilt, umso höher sind die Einnahmen aus der Werbung. So einfach ist das. Weiterlesen

Internationales Landing Page Design

Bei der Online Vermarktung eines gleichen Produktes auf internationalen Märkten ist es eine spannende Frage, wie (und ob überhaupt) die großen Konzerne auf die kulturellen Unterschiede eingehen. Als ein Musterkandidat eignet sich Google insbesondere durch zwei Faktoren: eine enorme weltweite Präsenz und der Gewissheit, dass die optischen Unterschiede nicht durch Zufall entstehen, sondern durch konsequentes Testing.

Beim Testing können wir ausgehen, dass unterschiedliche Layouts, bzw. jedes Element wie Buttons, Grafiken und Texte auf die bessere Performance optimiert wurden.

Als international sehr verbreitetes Produkt von Google eignet sich der Browser Chrome insbesondere dadurch, dass dessen Verbreitung sehr im Sinne der Konzern-Strategie steht. Auch das spricht dafür, dass beim Screen-Design der Download Pages es nichts dem Zufall überlassen wird.

Vergleich Screen-Design:

Es gibt ein Standard-Design mit der Sprach-Einstellung „Englisch-International“. Hier werden folgende Vorteile dargestellt: Geschwindigkeit, Anpassung, Preis (kostenlos). Und nur auf dieser Seite werden weitere Produkte angeteasert: Devices, Web Store, Google+ und Chromebooks.
landing-page-design-chrome-int-englisch  Weiterlesen

Dateiformat WebP für Webdesigner

Google quelloffenes Bildformat WebP (liebevoll „weppy“ gennant) zielt auf das inzwischen bei Webdesignern beliebtes PNG Format. Denn neben der verlustfreien Komprimierung, bietet PNG als einziges Format Transparenzen, und das entweder bei Millionen von Farben oder wie auch bei GIF mit nur 256 Farbtönen. Als Hauptargument gegen PNG sprechen run 28% kleinere Dateien.

  • Dateibezeichnung: WebP („weppy“)
  • Kompression: verlustfreie
  • Transparenz: wird unterstützt
  • Lizenz: kostenfrei und quelloffen
  • Animation: ja
  • ICC Color Profile: ja
  • XMP meta-data: ja Weiterlesen

Firefox soll schneller weiterentwickelt werden

Firefox soll viel schneller weiterentwickelt wie bisher. Die Entwicklungszyklen sollen deutlich verkürzt werden und im neuen „rapid release development cycle“ abgewickelt werden. Das ist auch dringend notwendig. Chrome verbreitet sich gerade recht schnell und insbesondere unter Entwicklern und Webdesignern wird immer beliebter. Nicht nur die Geschwindigkeit und die Usability spielen dabei eine Rolle. Weiterlesen

Screenshots erstellen

Nicht nur für jeden Webdesigner ist es überlebenswichtig das CSS in unterschiedlichen Browsern und auf unterschiedlichen Betriebssystemen oder Rechnern zu testen. Will man oder muss man es sogar sehr gewissenhaft machen, dann können mitunter unzählige Test-Kombinationen entstehen (wenn z.B. die Bildschirmauflösung als ein zusätzliches Kriterium dazu kommt). Es gibt da allerdings ein kostenloses Online-Tool, mit dessen Hilfe solchen Testing Screenshots erstellen lassen kann. Und das mit wesentlich mehr Auswahlmöglichkeiten. Achtung, die Seite ist extrem mit Werbung beladen, dafür bietet sie aber einen sehr nützliche Funktionen.

Weiterlesen

Flash Design Awards

Für das richtig gute Design im Flash braucht vermutlich jeder Designer von Zeit zur Zeit hochkarätige Inspirationsquellen. Diese kann man zugenüge bei diesen sehr guten Flash Design Awards Seiten vorfinden. Tauchen Sie in die aktuellsten Beispiele des Flash und CSS Designs im Web:

Website-Awards-www thefwa com

Favourite Website Awards – Web awards at the cutting edge
www.thefwa.com

Weiterlesen

Rapid Webdesign Development

Nach dem das Rapid Development die Entwicklerszene im Sturm erobert hat, ist es Zeit gekommen auch das Webdesign auf die Hochgeschwindigkeit zu bringen. Natürlich geht es nur wie auch in allen anderen Fällen mit dem strengen Einhalten der vorgegebener Richtlinien, bzw. Frameworks. Im Fall von „960 Grid System“ bedeutet es eisernes Durchhalten von 12 oder 16 Spalten und maximaler Breite von 960 Pixeln. Das ganze kann man als Framework für Rapid Web Development verstehen, angefangen bei den Skizzen zur neuen Webseiten und beendet bei einer sehr aufgefeilten CSS-Vorlage, die bereits alle möglichen Kombinationen von Boxen und DIVs beinhaltet. Weiterlesen

Code Schnipsel speichern und weitergeben

Programmiercode speichern, weitergeben und veröffentlichen bei pastie.org

Programmiercode speichern, weitergeben und veröffentlichen bei pastie.org

Jeder, der sich ernsthaft mit Webdesign und Development beschäftigt hat, dürfte dieses Problem kennen: man schickt jemanden einen Code-Schnipsel weiter, damit der gute Freund oder auch Unbekannte aus dem Netz ihn ausprobieren, verbessern oder einfach debuggen sollte, doch die Formatierung des Codes kommt total verfremdet und zerschossen an. Genau für diese Problemlösung gibt es einen kostenlosen Dienst namens pastie.org. Man trägt einfach den Programmiercode in ein Fenster ein, wählt neben der Optik der Darstellung auch die Art der Programmiersprache aus und nach dem Speichern ensteht eine MIni-Content Webseite mit dem Code zum Weitergeben. Immer im schön sauber formatierten und farbig gehighlightetem Zustand. Zu erreichen bleibt dieser Schnipsel immer unter dieser URL und man erhält sogar einen javascript code zum embedden des Source Codes auf eigener Seite oder in Foren. Sehr praktisch!

Zur Übersicht aller neu eingestellten Codes: http://pastie.org/pastes

Neuen Code schreiben und veröffentlichen: http://pastie.org/pastes/new

Zur Zeit unterstützte Formate:

  • C/C++
  • CSS
  • Diff
  • HTML (ERB / Rails)
  • HTML / XML
  • Java
  • Javascript
  • Objective C/C++
  • Pascal
  • Perl
  • PHP
  • Plain text
  • Python
  • Ruby
  • Ruby (on Rails)
  • Shell Script (Bash)
  • SQL
  • YAML

Preise fürs Webdesign

Eine interaktive Preistabelle für das Webdesign eines kompletten Internetauftrittes wurde auf www.webkalkulator.com umgesetzt. Es bietet eine sehr große Orientierungshilfe an, in welchen Preisklassen man sich ungefähr bewegt, denn die gesamte Kalkulation bleibt einfach untransparent. Doch die Bedienung ist sehr einfach und für jeden verständlich aufgebaut: Der gesamte Prozeß der Webseitenerstellung ist in 7 Hauptbereiche wie „Struktuelles“, „Ziele“, „Informationsgewinn“ usw. untergliedert mit vielen Punkten wie „Logo“, „Corporate Identity“, „Steigerung des Images“ usw. Die Preisbestimmung findet über 4 Optionsfelder neben jedem Punkt statt. Folgende Auswahlmöglichkeiten gibt es: „Bestand“, „Ja“, „Nein“ und „Später“. Insgesamt macht es dann doch Spaß die unterschiedlichen Kombinationen auszuprobieren, wobei der Preis bei beiden Optionen „Ja“ und „Später“ immer der gleiche blebt, damit könnte man diese Auswahl auch ruhig auslassen können.