CSS Design-Wettbewerb: Newsletterbox Designideen

Werbung

as lässt sich aus einer HTLM-Datei zaubern? Wer hat die besten Ideen? Die Aufgabe bestand darin einer simple HTML-Datei via CSS ein Gesicht zu verleihen. 42 Webdesigner haben mitgemacht.

Die Screenshots basieren auf der Darstellung im Browser Firefox 2.0. Live-Beispiele für Browsertests und eventuelle Effekte oder Animationen wurden verlinkt. Manches sieht im Original vielleicht schicker aus. Mitunter ist auch Kreatives dabei, das in ihrem Browser möglicherweise nicht korrekt dargestellt werden kann.

Einige Teilnehmer haben ihre Grafiken in Unterverzeichnisse gepackt, aber in ihren ZIP-Dateien keine entsprechenden Pfadangaben berücksichtigt. Ich habe das in einigen Fällen bemerkt und korrigiert, aber vielleicht nicht immer. Beim nächsten mal bitte daran denken oder einfach auf Unterverzeichnisse verzichten. Beim Download der ZIP-Dateien daran denken.

Nun aber zur Abstimmung. Was ist stimming? Wer hat technisch am meisten heraus geholt? Und was sieht am besten aus? Vieles ist sicherlich Geschmackssache. Insgesamt aber zeigen die 42 Beispiele eine Menge her. Erstaunlich was man aus ein und derselben Vorlage alles herausholen kann.

Die Abstimmung erfolgt direkt über die Kommentare. Einfach die drei besten Entwürfe benennen. Weitergehende Kommentare sind erwünscht und von den Designern gern gesehen. Die ausgesetzten Preise gehen an die Teilnehmer mit den meisten Namensnennungen. Die Aktion läuft bis einschließlich Montag, den 11.12.2006. Bitte nur einmal mitmachen und keine Tricks versuchen.

Die Einsendungen wurden nach Farbe sortiert. Wobei der Formularfarbentrend klar nach Grün weist, weshalb wir damit beginnen.

Christoph Bach – OriginalentwurfZIP

Screenshot

Stephan Kroppenstedt – OriginalentwurfZIP – Abbildung mit Hovereffekt

Screenshot

Michael Baumann – OriginalentwurfZIP

Screenshot

Nicole Broß – OriginalentwurfZIP

Screenshot

Raoul – OriginalentwurfZIP

Screenshot

Dirk Jaster – OriginalentwurfZIP

Screenshot

David Bongard – OriginalentwurfZIP

Screenshot

Christian Kler – OriginalentwurfZIP

Screenshot

Björn Scholl – OriginalentwurfZIP

Screenshot

Dominik Menke – OriginalentwurfZIP – Abbildung mit Hovereffekt

Screenshot

Kajetan Schwarzmeier – OriginalentwurfZIP – Abbildung mit Hovereffekt

Screenshot

Alexander Jaus – OriginalentwurfZIP

Screenshot

Tilman Schläger – OriginalentwurfZIP

Screenshot

Sebastian Löw – OriginalentwurfZIP

Screenshot

Lars Burgstahler – OriginalentwurfZIP

Screenshot

Christian Simeoni – OriginalentwurfZIP

Screenshot

Samuel Reis – OriginalentwurfZIP

Screenshot

Reinhard Hiebl – OriginalentwurfRAR

Screenshot

Karin Uhlig – OriginalentwurfZIP

Screenshot

Daniel Daxl – OriginalentwurfZIP

Screenshot

Sebastian Günther – OriginalentwurfZIP

Screenshot

AG – Originalentwurf – ZIP

Screenshot

Sebastian Gumpp – OriginalentwurfZIP

Screenshot

Klaus Oppermann – OriginalentwurfZIP

Screenshot

Julian – OriginalentwurfZIP

Screenshot

Sebastian Majstorovic – OriginalentwurfZIP

Screenshot

Martin Zurowietz – OriginalentwurfZIP

Screenshot

Jochen Adolph – OriginalentwurfZIP

Screenshot

Bastian Schwabe – OriginalentwurfZIP – Abbildung mit Hovereffekt

Screenshot

Martin B. – OriginalentwurfZIP

Screenshot

Felix de Ruiter – OriginalentwurfZIP

Screenshot

Malte Schwarzer – OriginalentwurfZIP

Screenshot

Orkun Ergovan – OriginalentwurfZIP

Screenshot

Gerd Reuter – OriginalentwurfZIP

Screenshot

Gabriele von der Ohe – OriginalentwurfZIP

Screenshot

Berthold KrayerOriginalentwurfZIP

Screenshot

Lars Krahl – OriginalentwurfZIP

Screenshot

Michael Schneider – OriginalentwurfZIP – Abbildung mit Hovereffekt

Screenshot

Henriette Zirl – OriginalentwurfZIP

Screenshot

Xel – OriginalentwurfZIP

Screenshot

Sebastian Dubbel – OriginalentwurfZIP

Screenshot

Nachträgliche Änderungen der Einsendungen sind nicht möglich.

Weitere Beiträge:

Über Sven Lennartz

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH.

,

158 Kommentare zu CSS Design-Wettbewerb: Newsletterbox Designideen

  1. Christoph 11. Dezember 2006 at 00:48 #

    Dominik Menke
    Lars Krahl
    Jochen Adolph

    find ich gut…

  2. Dominik 11. Dezember 2006 at 08:32 #

    Stephan Kroppenstedt
    Lars Krahl
    Tilman Schläger

  3. jule_ 11. Dezember 2006 at 10:14 #

    1. Daniel Daxl
    2. AG
    3. Gabriele

    Guter Wettbewerb, tolle Einsendungen!

  4. Christoph 11. Dezember 2006 at 10:58 #

    Stephan Kroppenstedt’s Formular geht zwar im IE 7, aber der Hovereffekt sieht leider total versetzt aus und die Hover-Hintergrundfarbe ist auch anders als im FF 2.0…

  5. Steffi Meyer 11. Dezember 2006 at 11:32 #

    Stephan Kroppenstedt

  6. Axel 11. Dezember 2006 at 11:34 #

    Stephan Kroppenstedt find ich am besten!(kommt leider beim Screenshot nicht so gut rüber :( )

  7. Steffen 11. Dezember 2006 at 12:06 #

    Stephan Kroppenstedt / Lars Krahl

  8. Lothar Baier 11. Dezember 2006 at 13:25 #

    Meine Favoriten sind:

    1. Sebastian Majstorovic
    2. Jochen Adolph
    3. Sebastian Dubbel

  9. Volker 11. Dezember 2006 at 12:59 #

    1. AG
    2. Berthold Krayer
    3. Lars Burgstahler

  10. Mario 11. Dezember 2006 at 13:09 #

    1. Klaus Oppermann
    2. Jochen Adolph
    3. Stephan Kroppenstedt

  11. MadS 11. Dezember 2006 at 13:28 #

    1.) Alexander Jaus
    2.) Björn Scholl
    3.) Sebastian Gumpp

  12. Arthur 11. Dezember 2006 at 13:31 #

    Stephan Kroppenstedt

  13. Christian 11. Dezember 2006 at 14:46 #

    Stephan Kroppenstedt

  14. Philipp 11. Dezember 2006 at 14:52 #

    Ganz klar:

    1) Stephan Kroppenstedt
    2) Michael Baumann
    3) Lars Krahl

  15. Ralf 11. Dezember 2006 at 15:22 #

    Schöne Dinger dabei, touché!

    1. Jochen Adolph
    2. Sebastian Günther
    3. Sebastian Majstorovic

    Sonderpreis für Kreativität (würde ich nicht live erleben müssen, aber sehr nette Idee):
    - Lars Krahl

  16. Eckert 11. Dezember 2006 at 15:25 #

    Der von Jochen Adolph, wobei ich mir darüber im Klaren bin als Aqua-Hu** abgestempelt zu werden ;)

  17. kas_ls 11. Dezember 2006 at 15:28 #

    Christoph Bach

  18. Christian 11. Dezember 2006 at 15:30 #

    Meine Favoriten:

    1. Stephan Kroppenstedt
    2. Sebastian Majstorovic
    3. Sebastian Dubbel

  19. kuat 11. Dezember 2006 at 15:32 #

    Jochen Adolph
    Björn Scholl

  20. .carsten 11. Dezember 2006 at 16:34 #

    Meine ersten drei sind:

    1. Jochen Adolph
    2. Reinhard Hiebl
    3. Alexander Jaus

    War aber bei der Menge sehr schöner Vorschläge nicht leicht.

  21. Phil 11. Dezember 2006 at 16:05 #

    1. Sebastian Majstorovic
    2. Stephan Kroppenstedt
    3. AG

  22. DerNachdenker 11. Dezember 2006 at 17:29 #

    Es hat den Anschein, als ob hier versucht wird, einen bestimmten Kandidaten mit unfairen Mitteln zu begünstigen. Ich habe folgendes beobachtet:

    Die Stimmverteilung für Stephan Kroppenstedt lag in den ersten beiden Tagen bei 25-30%, wobei ca. 70% aller abstimmenden Weblog-Leser in diesem Zeitraum ihre Stimme abgegeben haben. Auffällig ist, daß seit Samstag die Stimmenverteilung für Stephan Kroppenstedt um 73% auf 43-50% angestiegen ist, wobei in diesem Zeitraum nur 30% aller Weblogleser ihre wertenden Beiträge geschrieben haben.
    (Berücksichtigt sind alle Beiträge bis einschließlich Nr. 128)

    Ich halte es für äußerst unwahrscheinlich, daß es hier mit rechten Dingen zugeht und fordere deshalb die Redaktion von Dr. Web auf, bei der Stimmenauszählung genau zu überprüfen, ob Manipulationen vorliegen. Wenn ja, ist der betreffenden Teilnehmer selbstverständlich zu disqualifizieren.

    DerNachdenker

  23. Jost Florian 11. Dezember 2006 at 17:30 #

    1. Stephan Kroppenstedt
    2. Björn Scholl
    3. Christoph Bach

  24. Mari 11. Dezember 2006 at 17:48 #

    1. Christian Simeoni

    dann lange nix und danach

    2. Björn Scholl
    3. Lars Burgstahler

  25. Daniel Weihmann 11. Dezember 2006 at 17:51 #

    Zu meiner Bewertung:

    1. Lars Krahl
    2. Sebastian Löw
    3. Stephan Kroppenstedt

  26. Stephan Kroppenstedt 11. Dezember 2006 at 18:33 #

    Hallo,
    und vor allem an den Nachdenker sind folgende Worte gerichtet ;)
    Hast dich ja ordentlich mit Mathematik bewaffnet und das so recherchiert. Ich kann dir aber sagen, dass ich hier sicherlich nicht mit unlauteren Mitteln agiere.

    Vielleicht ist dir entgangen, dass man vor allem bei meinem Formular erst einmal genau hin schauen muss, damit man die Feinheiten entdeckt. Der FadeIn beim Mouseover ist auf dem Screenshot nicht erkennbar. So kann ich es mir gut vorstellen, dass die Leute die vor allem später abgestimmt haben – und ja auch nicht durchgängig für mich – sich erst einmal in Ruhe alle Details angesehen haben.

    Aber wenn du meinst das hier mit unlauteren Mitteln der Wettbewerb verzerrt wird, dann ist das deine Meinung. Ich teile diese nicht.

    Ansonsten möchte ich nun auch einmal eine Wertung abgeben zu den Einsendungen:

    Sebastian Majstorovic – leider wird im FF 1.5 die Darstellung so stark manipuliert, dass man keine Eingaben tätigen kann.
    Sebastian Günther – Angedeuteter Aqua Effekt und sonst auch schlicht gehalten ( die Schrift könnte besser gewählt werden)

    AG – Hat auch eine FadeIn und find ich auch klar und einfach zu überschauen.

    Ansonsten wünsch ich hier allen die noch abstimmen viel Spaß.

  27. Georg 11. Dezember 2006 at 18:40 #

    Ich stimme für

    Christoph Bach,
    Michael Baumann und
    Klaus Oppermann

  28. Fredy 11. Dezember 2006 at 19:33 #

    Meine Favoriten:

    Sebastian Dubbel
    Sebastian Majstorovic
    Christian Simeoni

  29. Thomas 11. Dezember 2006 at 20:54 #

    Ich find das von Julian super!

  30. Dominik 11. Dezember 2006 at 19:59 #

    AG
    Julian
    Samuel Reis

  31. rtauchnitz 11. Dezember 2006 at 20:09 #

    So…

    Bewertung + Kommentar vor mir

    1. Stephan Kroppenstedt – auch wenn es unter Linux FF 2.0 nicht ganz so aussieht, wie es aussehen soll – Name und eMail sind über den Textfeldern und der Submit-Button ist kleiner. Ich mag den Screenshot und die Idee. :)

    2. AG – schön schlicht. Ich mag es.

    3. Gabriele von der Ohe – n bissel kitschig, aber sonst find ich es stylisch. Hat was – man merkt, das die Frau sich Mühe gegeben hat.

  32. Lennie 11. Dezember 2006 at 20:58 #

    1. Stephan Kroppenstedt
    2. Julian
    3. Jochen Adolph

  33. Chris 11. Dezember 2006 at 21:00 #

    Stephan Kroppenstedt

  34. Rolf 11. Dezember 2006 at 21:05 #

    Die Auswahl der Favoriten rihtet sich bestimmt bei den einzelnen Personen danach, wie gut das Formular in die eigenen Homepage passt, oder?

    Ich werde mir bestimmt kein dunkles, rotes oder gelbes Formular in meine in grün und grau gehaltenen Seite einfügen. Im Content- und Sidebarbereich habe ich auf farbe verzichtet, also kommen für mich nur weiße und graue Formulare ins Spiel und es würde hier imho niemand für ein Formular stimmen, das nicht zu seiner Seite passt?!

  35. Rolf 11. Dezember 2006 at 21:15 #

    Ach ganz vergessen meine Bewertung:
    Sebastian Günther & Julian
    Beide würden sich gut in mein Design einfügen, wobei das von Julian den vorteil hat, dass es schmaler ist und besser in die Sidebar passen würde.
    Wie gesagt, ich bin ehrlich und sagen, wonach ich entschieden habe.

  36. ~~~d(o.o)b~~~ 11. Dezember 2006 at 22:08 #

    LOL…

    Yeah, gib`s ihm!… ROFL…

    Have Phun
    ~~~d(o.o)b~~~

  37. Rolf 11. Dezember 2006 at 22:10 #

    Wenn du meinst, aber ich wette, jeder hat im Hintergrund ah ein bisschen darauf geachtet, wie viel kann ich nciht sagen, aber es haben bestmmt nicht viele für ein Formular gestimmt, dass vollkommen nicht passt.

    Trotzdem finde ich die oben von mir genannten Formulare am besten.

  38. Christoph 11. Dezember 2006 at 22:22 #

    Mein Gefühl sagt:

    1. Stephan Kroppenstedt
    2. Sebastian Majstorovic
    3. Jochen Adolph

  39. Christoph 11. Dezember 2006 at 22:33 #

    @Malefiz: (Beitrag 144)
    Ich möchte deinen Beitrag nicht als Schwachsinn bezeichnen …
    Ein herzbetontes, menschennahes Einfühlungsvermögen ist in keiner Weise für mich spürbar … !

  40. Christoph 11. Dezember 2006 at 22:43 #

    @Malefiz: (Beitrag 149)

    Ich wünsche mir, daß dir noch weitere Menschen die Stirn bieten … !

  41. emiglio 11. Dezember 2006 at 23:02 #

    Jochen Adolph

  42. Malefiz 11. Dezember 2006 at 23:09 #

    Zu Christoph (Beitrag 150): Warum wünschst Du Dir denn das? Weil ich direkt die Wahrheit gesagt habe? Ich gebe zu, dass ich freundlicher hätte sein können. Weißt Du, ich bin eigentlich immer sehr freundlich zu jedem. Leider bin ich im Laufe meines Lebens zu der Erkenntnis gelangt, daß es nichts nützt freundlich zu sein – schon gar nicht zu Deppen. Sie können Freundlichkeit nicht begreifen, sie interpretieren Freundlichkeit als Schwäche. Ich habe viel überlegt, was man tun kann, damit sich das Mittelmaß in unserer Gesellschaft nicht weiter ausbreitet. Ich habe keine andere Lösung gefunden als dreinzuschlagen.

  43. Christoph 11. Dezember 2006 at 23:21 #

    @Malefiz: (Beitrag 151)
    Meine persönliche Richtung geht dahin, daß ich mein Ohr erst den “eigenartig” reagierenden, agierenden und erst dann evtl. noch den “eklig” reagierenden Menschen öffne … !
    Eigenart hat Kraft, auch wenn sie im ersten Moment, anscheinend “unaufgeräumt” oft irritiert … !
    Schade, daß Du deiner Einleitung mit dem Schlußsatz eine neue negative Spitze hast folgen lassen … !

    Ich wünsche dir und Rolf eine gute Zeit, fern kommerzgeschwängerter Abläufe.

  44. Bjoern 11. Dezember 2006 at 23:31 #

    1. Stephan Kroppenstedt
    2. Dominik Menke
    3. Jochen Adolph

    Sind wirklich sehr schöne Arbeiten dabei. Mein Respekt an alle Teilnehmer!

  45. Slash 11. Dezember 2006 at 23:46 #

    1. Stephan Kroppenstedt
    2. Jochen Adolph

  46. Sven Lennartz 12. Dezember 2006 at 00:21 #

    hier geht nun nichts mehr. auswertung folgt….

Trackbacks

  1. VisualBlog - das VisualOrgasm-Weblog » Formularformatierung mittels CSS - 7. Dezember 2006

    [...] Im Dr. Web Weblog gab es eine nette Aufgabe für CSS-Könner. Ein HTML-Formular sollte mittels CSS schick gemacht werden. Es gibt zahlreiche gute Einsendungen, über die nun abgestimmt werden kann. Ein nette Fundgrube um zu sehen, was mit CSS so machbar ist. Tags:CSS [...]

  2. björn | scholl | medien | web | design | privates » Blog Archive » Dr. Web CSS Design-Wettbewerb - 7. Dezember 2006

    [...] Vor einer Woche startet auf Dr.Web ein CSS Design-Wettbewerb. Die Aufgabe bestand darin, ein fest vorgegebenes Newsletter-Anmelde-Formular mittels CSS nach den eigenen Vorstellungen zu entwerfen. Der Einsendeschluss ist abgelaufen und nun kann man die eingereichten Entwürfe ansehen. Insgesamt sind es 42, zum Teil sehr unterschiedliche, Designs. Neben Screenshots findet man dort auch die Quelldateien. Sehr praktisch also nicht nur als Inspirations- sondern auch als Informationsquelle für CSS Design. Mein Vorschlag ist ebenfalls dort zufinden. [...]

  3. Phil Marx - just a boy - 7. Dezember 2006

    Unglaublich!…

    Mich als Webcoder und auch ein bisschen -designer sprach der Designcontest von Dr.Web besonders an.Aufgabe war, daseinfache Newsletterformular mit CSS \"ein bisschen\" optisch ……

  4. BloggingTom - 8. Dezember 2006

    Schicke Formularfelder mit CSS…

    Dass Formulare nicht immer langweilig gestaltet sein müssen, zeigt der CSS Design-Wettbewerb bei Dr. Web. Die Aufgabe bestand darin, ein vorgegebenes Formular mittels CSS möglichst schön zu gestalten. Und die Ergebnisse der 42 Teilnehmer können si…

  5. EGM Weblog » Wundersames CSS - 8. Dezember 2006

    [...] Selbst das Team von Dr.Web war erstaunt, wieviel man mit CSS aus einer simplen HTML-Vorlage für ein Newsletter-Formular herausholen kann. Es fällt schwer, einen der 42 Einträge zum entsprechenden CSS-Wettbewerb als “den Besten” herauszufiltern. Sehenswert sind alle. | | | Ernst | 10:39 | HTML,CSS & Co., Faszinierend | 0 Views | (Keine Bewertung bisher)  Loading … [...]

  6. Inspiration für Formulargestaltung mit CSS at divblog - 8. Dezember 2006

    [...] Letzte Woche startete drweb.de einen Formular-Design Wettbewerb. Aufgabe war es ein Anmeldeformular für einen Newsletter rein nur mit CSS und Bildern zu gestalten. Was heraus kam ist interessant; Ein Formular und 42 Variationen. Leider kam ich nicht dazu mich auch daran zu beteiligen, aber das Ergebnis inspiriert mich jedenfalls für eigene Gestaltungsarbeiten an Formularen. [...]

  7. webtagebu.ch - markus blogt » Dr. Web CSS-Design-Wettbewerb - 8. Dezember 2006

    [...] Die bekannte deutsche Webdesign-Seite “Dr.Web” hat zu einem CSS-Desing-Wettbewerb und gestern die Ergebnisse dazu vorgestellt. [...]

  8. Abstimmen bitte! | Dr. Web Weblog - 11. Dezember 2006

    [...] Noch 23:59h ist Gelegenheit die schönsten Formular-Entwürfe zu nominieren.  Popularity: 1% [...]

  9. CSS Wettbewerb Gewinner | Dr. Web Weblog - 12. Dezember 2006

    [...] Zuerst einmal ein Dankeschön an alle die beim Dr. Web Wettbewerb mitgemacht haben – an die Webdesigner und die abstimmenden Leser. Die Auszählung der Stimmen ergab folgende Reihenfolge und Gewinner (auf die Bilder klicken, um die Originale zu sehen): [...]

  10. MIEO Blog » CSS Design-Wettbewerb - 18. Dezember 2006

    [...] Dr. Web hat vor kurzen einen CSS Design-Wettbewerb ins Leben gerufen. Dabei ging es um das Design einer Newsletterbox. Die XHTML Datei wurde von Dr. Web vorgegeben und die Teilnehmen mussten dann mit Hilfe von CSS ein möglichst kreatives Design für die Newsletterbox erstellen. Das Verändern des XHTML Codes war dabei nicht erlaubt. [...]

  11. Best of 2006 | Dr. Web Weblog - 20. Dezember 2006

    [...] Dezember Der erste Dr. Web CSS-Wettbewerb. Noch etwas holprig, aber mit sehenswerten Ergebnissen Popularity: 7% [...]

  12. css form mit float - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign) - 24. Oktober 2008

    [...] Hab Dir mal ein kleines Beispiel gebastelt. Ideen f

Hinterlasse eine Antwort

Bitte bei weiteren Kommentaren per Email benarichtigen! Auch möglich: Abo ohne Kommentar.

Spam protection by WP Captcha-Free