Der Grundgedanke

Nach langem Hin und Her und einigen zaghaften Versuchen kommt es dieses Jahr endlich zu einem Contest im Bereich Webdesign.

Die Idee ist nicht neu und einige kreative Leute im Netz haben so ähnliche Geschichten schon veranstaltet. Ganz weit vorn ist natürlich Zen Garden.

Nichtsdestotrotz: Wir ziehen das hier durch und haben Spaß dabei. Eingeladen ist jeder, der sich zutraut, ein Layout überwiegend mit CSS zu gestalten.

Diese Veranstaltung soll Spaß machen und läuft nach dem olympischen Motto: "Dabei sein ist alles."

Wir hoffen natürlich, dass am Ende des Tages ein paar fesche CSS-Layouts entstehen. Vielleicht kann der Eine oder die Andere sie ja auch für eigene Projekte als Idee nutzen.

 

P.S. Ach ja, für alle, die es nicht pünktlich schaffen. Diese Sache ist OpenEnd. Nach dem 02.04.2011 eingereichte Entwürfe nehmen nur nicht mehr am Voting teil. Ich stelle sie aber noch online. D

CSS Contest 2011

Aufgabe: Gestalte diese vorgegebene html-Seite mit Hilfe von CSS.

Start: 20.02.2011; 10:00 Uhr

Abgabe: 02.04.2011; 17:00 Uhr (spätester Zeitpunkt)

Ab 03.04.2011 geht die Seite mit den Werken online.

Feedback, Austausch und... ist noch viel wichtiger als "Sieger" zu ermitteln und kann bei pst-tutorials gegeben werden.

Ablauf:

  1. Lade dir die notwendigen Dateien hier runter.
  2. Nimm dir Zeit zum Nachdenken! (Schnellschüsse unerwünscht)
  3. Erstelle eine style.css und die für dein Design notwendigen Grafiken.
    Maximale Gesamtdateigröße der CSS-Datei und der Grafiken: 200kb
  4. Probiere, teste1,knüll zusammen, fang neu an, probiere, teste... sei zufrieden!
  5. Erstelle einen Screenshot für das Votingmodul.
  6. Schicke mir eine PM und ich sage dir wohin mit den Daten2.

1Browser: Firefox 3.6, Safari 5.03, IE8 (wenn also mit CSS3 gearbeitet wird, sollte es im IE wenigstens bedien- und erkennbar sein). Es geht aber NICHT um die Erstellung mehrerer CSS um alle Browser abzudecken. (Das machen wir nächstes Mal.) Schwerpunkt sind moderne Browser. Zeige die Möglichkeiten von CSS eben…

2- die CSS-Datei: style.css ;
- eine Textdatei in der nur dein (Nick)name steht: name.txt ;
- eine Textdatei in der die Adresse deiner Webseite (http://deineseite.de) oder die Adresse zu deinem Profil auf psd-tutorials.de steht: webseite.txt (Kein html!);
- eine Textdatei in der ein Satz über dich steht: person.txt (Kein html!);
- eine Grafik 50*50px / 20kb, dein Bild oder Avatar: avatar.jpg (nur jpg als Format zugelassen)

Voting: Ab dem 03.04.2011 kann bis zum 10.04.2011 gevotet werden. Etwa eine Woche vorher öffne ich den Votingbereich, um die Screenshots hochzuladen. Damit erscheint dann deine Teilnahme in deinem Profil bei PSD-Turorials.de.

Bewertung: Da das Voting ein Uservoting ist und somit seinen eigenen Gesetzen folgt, zählt wohl mal der erste Eindruck, Farbgebung, Layout, Idee und dann sollte das CSS auch noch valide sein. (Die CSS-Dateien können auf der Präsentationsseite eingesehen werden.)

Feedback: Kann im Thread abgegeben werden. So lange die gängigen Feedbackregeln eingehalten werden, ist es natürlich erwünscht.

PSD-tutorials.de

PSD-Tutorials.de bietet dir eine umfassende und qualitativ hochwertige Sammlung an Tutorials und Video-Trainings zu 2D-, 3D-, Web-, Vektor-, Video- und Layoutprogrammen und hält für dich in allen Bereichen eine Vielzahl an ergänzenden Downloadpaketen wie etwa Photoshop-Presets, Texturen, Homepagevorlagen, 3D-Modelle und Arbeitsdateien vor. Im Forum kannst du dich austauschen und in den Contests dein Können beweisen. Bei so vielen Inhalten und Interaktionsmöglichkeiten ist es schon einmal möglich, die Orientierung zu verlieren. Nutze unsere Sitemap, um einen Überblick über alle Kategorien und Bereiche zu erhalten, die für dich auf PSD-Tutorials.de bereitstehen.

Sitemap - PSD-Tutorials.de

cebito

ava

Ich habe absichtlich für diesen Contest zwei flexible Designs gewählt, um den Leuten zu zeigen, das flexible Designs nicht langweilig sein müssen. Zwar funktionieren die Mediaqueries und die damit erzeugten flexiblen Spalten nicht im IE<9, das ließe sich jedoch mit ein wenig JavaScript (was hier leider nicht erlaubt war) ändern.
Mit einer selbst erstellten HTML-Struktur wäre hier sicher noch einiges mehr drin, aber gerade darin lag ja der Sinn dieses Contests, aus gegebenem Material das Beste zu zaubern. In dem Sinne würde ich mich freuen, wenn der ein- oder andere hier ein paar Anregungen für seine zukünftigen CSS-Styles mitnehmen kann.