Linktipps: Designdetails und Techniktricks

tempa wrote this 02:52:

Designdetails:

Techniktricks:

Weitere Links werden folgen, wenn diese mir über den Weg laufen.

Linktipps: Intensivkurs CSS

tempa wrote this 00:34:

Wer sich intensiv in CSS einarbeiten möchte, dem seien die folgenden Links ans Herz gelegt:

  1. 70 Expert Ideas For Better CSS Coding
  2. 53 CSS-Techniques You Couldn’t Live Without vom letzten Jahr
  3. Und 50 Powerful CSS-Techniques For Effective Coding in diesem Jahr
  4. Chic Chic, 32 Tipps zur Gestaltung von Tabellen
  5. 25 Linktipps: CSS für Formulare

Mit bester Empfehlung des Smashing Magazins. 😉

[Nachtrag]

  1. Teil: 101 CSS techniques of all times
  2. Teil: 101 CSS techniques of all times

Nun kann man sich frage wer von wem … baer generell gilt, dass diese Links im Netz schwirrenudn wer seine Bookmarks einmal leert wird vermutlich ähnliche Listen zusammenstellen können. Einiges ist definitiv doppelt, das bleibt nicht aus. Ein Dankeschön geht also auch an Noupe.com für die Zusammenstellung.

[/Nachtrag]

Was den @import ./. link des Stylesheets anbelangt, so ist das Argument der alten Browser reichlich hinfällig. Wo in der freien Netzwelt wird der Netscape 4 noch verwendet? Allenfalls die Möglichkeit ältere CSS-Versionen vorrätig zu halten, wie z.B. Saisonale Stylesheets , und für alle HMTL-Template diese an einer Stelle auszutauschen überzeugen mich vom @import, wobei es auch ein umtaufen der Stylesheets täte …

In Bezug auf den @import url(style.css) ist die Liste @import-Hacks sicher von Interesse.

Generell gilt, je weniger Hacks, desto besser.

via Vandelay Design Weekly Links

Nachtrag: Hacks:

Wenn man meint es zu brauchen … ich persönlich verzichte lieber auf Hacks und suche alternative Lösungen ohne Hack. Nur manchmal … manchmal eben 😉

Excessiv: Übersicht der Methoden für runde Ecken … (Bestandteil der Liste oben. Aber gesondert erwahnenswert, wei ich finde.)

Ich ich bin noch am Ordnen und Sortieren meiner Feeds und der extrem vielen Tipps darin. Es sind so viele, dass ich primär hier einen Washout mache. Es folgen in Kürze weitere Listen nach Themen sortiert. Nicht verzweifeln … ich habe sie auch nur grob gescannt und was mir nützlich erschien auf die Platte gezogen und vermutlich wandert es unsortiert auf eine CD. Ich muss dringend meine Spielwiese auf Vordermann bringen, denn nur so werde ich die vielen, vielen Techniken und Tipps auch abrufbar haben. Aber immerhin ich habe es gesehen und wenn es CSS ist, dann wird mir dieser Beitrag helfen, es wieder zu finden. Sind ja nur rund 150 Links 😀 Um eine kleine Vorstellung zu haben: Ich hatte heute ca. 200 Fenster offen und zuletzt im Feedreader 150 Beiträge auf „Keep new“ ohne ansurfen … Ich nenn das den totalen Overload und ich erinnere mich, warum ich den Feedreader zuletzt nur noch selten aufgesucht habe. Ich fühlte mich von der Menge schlicht erschlagen. Nicht mangelnde Güte der Beiträge machte mir zu schaffen, sondern die Beiträge so für mich zu verarbeiten, dass ich mit der Info noch etwas anfangen kann. Leiden wie gemeinsam.

Ein handgezeichnetes Flashformular

tempa wrote this 14:43:

Smashingmagazine stellt Websites vor, die Handzeichnungen für Webdesign-Elemente verwenden. Hierbei handelt es sich überwiegend um Flashsites. Und zugegeben die Zeichnungen sind schön, es macht Spaß die Seiten abzuklappern. Mel Kadel zeichnet herrlich (übrigens keine Flashsite, sonder iFrame und Javascript). Auch (diesmal Flashsite) Heather Sloane macht Spass. Preise für gutes Webdesign habe ich bisher aber noch nicht gesehen (ich habe nicht alle angesehen, manche Vorschau reizt mich schlicht nicht). Gute Zeichner sind nicht notwendigerweise gute Webdesigner. In meinem persönlich favorisierten Fenster 1280×1024 begeisterte mich das Kontaktformular von Christian Sparrow:

Formular gezeichnet

Wie bei einer Flashsite so üblich keine Direktverlinkung möglich, was aber nicht das schlimmste Übel ist, denn das Formular hielt dem Screenshot 1024×768 nicht stand:

Formular wie eine Kinderpapptheaterbühne gestaltet

Wie man nur unschwer erkennen kann ist nun der Sendbutton hinterm Horizont verschwunden. Auch wenn ein Klick auf das kleine Hochhaus neben dem spitzen Hochhaus vermutlich die Sendefunktion noch beinhaltet, so ist das Formular damit im Grunde untergegangen. Hier fehlt für kleinere Auflösungen definitiv eine Skrollfunktion oder aber (schließlich ist es eine Flashsite) ein Zoomfaktor.

Wie dem auch sei, das Formular selbst in seinem schlichten gezeichneten Stil ist etwas, das man wohl getroßt auch ins eigene Repertoir aufnehmen kann. Auch Packpapier bzw. brauner Zeichenkarton als solches ist nicht so ungewöhnlich, dass man sich schämen müsste, macht man ein eigenes Design damit. Zeichenelemente als solches sind auch nicht so abwegig. Allein die Idee des gebastelten Kindertheaters mit den Wolken am Bändel und das ganze drum und dran, ist so unique und schön, es fiele mir nicht im Traum ein, das zu plagiatieren. Das finde ich einfach klasse. Fast perfekt, (mehr …)

Addi, der Blitz-Zeichner oder Wie man ein Foto in eine Zeichnung verwandelt

tempa wrote this 08:26:

Blitzskizze mit Ebene und Filtern (Dammhirsch von aboutpixel.de User Stormpic)

Fast schon dachte ich, ich hätte eine dritte Methode entdeckt, wie man aus einem Foto eine Zeichnung macht, aber dann beim Test bedurfte es doch wieder einer der alten Methoden, um die Umrisse hervorzuheben.

Wovon ich spreche? Von einem ziemlich alten Beitrag, bei dem ein Foto in eine Comiczeichnung umgewandelt wird im alten templaterie blog. Dort werden zwei Methoden gegenüber gestellt.

Die neue Methode, die ich nun auf Tutorial-Place.com fand, verwandelt ein Foto 4 Schritten und mittels drei Ebenen in eine Zeichnung. Als ich die Methode am Hirsch von Rainer Storm testete, war das Ergebnis nicht zufriedenstellend. Aber ich konnte mir mit einem der alten Tricks helfen. Und so verwandelt man das Foto vom Hirsch in eine Zeichnung vom Hirsch:

  1. Foto 4 mal dublizieren und bis zur vierten Ebene Desaturieren (STRG+U)
  2. Ebene 5: Opacity 60%, Ebenen-Filter: Color ODER: Opacity 100%, Ebenen-Filter: Color Burn oder Multiply für kräftigere Farben
  3. Ebene 4: Opacity 85%, Ebenen-Filter: Color-Dodge, Invertieren (STRG+I), Gaussian-Blur ca. 3px
  4. Ebene 3: Opacity 20%, Filter Artistic Brushes/Crosshatches Default oder ein wenig gespielt mit den Filtern
  5. Ebene 2: Opacity 70%, Ebenen-Filter: Multiply, Invertieren, Filerset-Blur/Smart-Blur (Radius 50, Threshhold 100, Quality high, Overlay Edge), invertieren

Wer noch den angefressenen Rand möchte, kann in einer neuen Ebene einen 10-12 Pixel breiten Papierfarbenen Rand erzeugen (STRG+A, Edit/Stroke: ca. 10px Location inside, Filter/Blur/Gaussien blur 3,0, Ebene-Filter: Dissolve).

Bildquelle aboutpixel.de Hirsch von stormpic aka Rainer Storm

Ala verschlechtert

tempa wrote this 19:40:

Mathew James Taylor zählt zu den Predigern des all liquid und hat einen Beitrag herausgebracht, wie er meint, dass man A List Apart verbessern sollte. Doch das Mockup ist eine klare Verschlechterung des Designs von A list apart. Mathew James Taylor berücksichtigt nicht, dass es Menschen gibt, die auch bei hohen Auflösungen mit vollem Fenster surfen und die Zeilenlänge dann die Lesbarkeit erheblich beeinträchtigen.

A List apart hat diesen Umstand berücksichtigt und deren Entscheidungen schlüssig und sinnvoll begründet. (Ala4.0)

Mag sein, dass man den Aufbau noch elegnater hinbekommt und den einen oder anderne Hack vermeiden könnte, doch da häng ich mich dann nicht rein. Schließlich ist jede Seite immer nur so gut, wie es die Zeit, in der sie erstellt wurde, zulässt. Ich sage nur Panta rei oder so.

Mein erster Pinup-Toon (ala Twiggy)

tempa wrote this 00:37:

Website-Entwurf mit vier twiggy-artigen Pinup-Toon gereiht wie die Matryoshka-Püppchen

Nach dem ich schon mit Buntstiften beschäftigt war, da könnte ich schließlich ja auch noch das Figurenzeichnen ein wenig üben … wobei ich mich am Ende dann doch nicht ernsthaft drangesetzt habe, denn mit den Händen hinter dem Rücken verschränkt, gilt das nicht und die Beine einfach als zwei Ovale und ein Trapez ist dann auch nicht wirklich geübt. Nagut ein wenig schon, denn ich finde die Proportionen stimmen und Standbein und Spielbein sind ein Detail, da beachtet sein will. Die meisten Frauen stehen wie die Pelikane mit nur einem Bein auf dem Boden und das andere angewinkelt, wenn auch vielleicht nicht so extrem. Der Körper ist etwas überstreckt, das schafft erst den Pinup-Effekt und wird für die Navigation gebraucht. Das größte Pinuptoon geht über ca. zwei Monitor-Längen bei den gängigsten Auflösungen. *seufz* So langsam sollte ich mich dann doch vom Photoshop zum HMTL & CSS begeben mit einigen der Entwürfe. Wobei ich im Moment noch die Entwürfe, die ich letztes Jahr um ca. diese Zeit hier einstellte noch auf Ansichten mit 1016×640 Pixel via Thickbox umstelle und hier noch eine Weile im Beschäftigt bin. Es sind eine ganze Menge nun schon in diesem Weblog zusammen gekommen. (Ich muss es noch einmal prüfen, aber ich denke die meisten haben nun schon den Tag Webentwurf, so dass man alle Designs schon recht bequem durchblättern kann. Bei Gelegenheit werde ich mir dann noch die Galerie-Plugins ansehen und hier eine kleine Galerie einrichten … )

[Nachtrag]
Diese Figur wäre auch sehr schön für eine Pornoseite, bei der auch Nicht-Interessierte kein Problem haben wenn Sie auf der Eingangsseite landen und sie hätte Witz:

Website-Entwurf für Hardcore-Anbieter mit Verständnis für Nicht-Interessierte

Website-Entwurf für kindernahe Dienstleistungen

tempa wrote this 17:21:

Website-Entwurf für Tagesmütter und andere kindernahe Dienstleister

Für einen solchen Entwurf, hätte ich ja immer schon gern einen Illustrator gehabt, der dann die Katze auf verschiedene Templates wie in einem Comic in Aktion bringt, oder auch andere Motive ergänzt. Vielleicht sogar auf der Seite wie Javascript einen ganze Comic erzählt, der sollte Javscript deaktiviert sein, ersatzweise auf einer weiteren Seite abgerufen werden könnte. Dass ich aus der Übung bin kann nur allzudeutlich an den Bulldoggenbeinen der Katze erkennen. Den Entwurf finde ich herrlich auch und gerade weil die Katze nicht so perfekt ist und Bulldoggenbeine hat.

Angeregt wurde ich von einer Meisterin. Olga Linville hat mit ihrer Armorkatze mein Herz bewegt. 😀 Sie ist zum Piepen. Eine Olga Linville-Website müsste man dann mit Olga Linville klären. Würde mich in jedem Fall reizen, hier mit Künstlern zu arbeiten. *seufz* Sollte vielleicht mal fragen.

Denkbar wäre es auch hier für ein solches Template die Kinderbilder der Kinder der Tagesmutter zu verwenden.

Zur Technik: Die grafiken des Rahmens um die Inhalte sind bereits so anglegt, dass diese sich dem Umgang des Inhaltes in der Länge anpassen. Die Navigation könnte sich als schwieriger erweisen. Eventuell müsste man hier die zweite Ebene in den Inhalt an die obere Kante nehmen. Ich würde jedoch zunächst in jedem Fall versuchen, ob ich nicht auch die Navigation gedehnt bekomme. Beim Zeichnen habe ich darauf geachtet, dass meine Hand, bzw. mein kleiner Finger wie eine Zeichenschine an der Blockkante entlangfuhr. Damit habe ich die leicht krackelige Linie einer relativ freien Handbewegung, die Kachel-Bedingungen erfüllt.

Achja und technisch (CMS-mäßig) gedacht, gibt es in diesem Entwurf überhaupt keine Probleme.

Wenn jetzt ein Maler mit Künstlerkommune vorbei käm …

tempa wrote this 21:00:

Website-Entwurf mit Franz Marc Photoshop-Brush

Die Arbeit hat den Flair eines japanischen Holzdruckes. Schlicht und einfach. Die Illustration steuerte Franz Marc (1880-1916) bei, von dem ich ein Tempera-Bild erst mit Strg-U desaturierte, dann die Kontraste erhöhte und die Helligkeit nachjustierte so dass es eine schöne Photoshop-Werkzeugspitze (Brushes) ergab. Wenn ich auch hier in Editland denke, dann bedarf es ein ganz klein wenig Schulung bezüglich der javscript gesteuerten Mousetooltitles und in dem Design ist noch nicht definiert, wie der aktive Link und das Mouse-Over aussehen könnte. Derlei Dinge kommen bei mir oft erst mir der Umsetzung. Gesperrt wollte ich das in keinem Fall machen. Das wäre definitiv zu anfällig für eine Springbock-Navigations, bei der die Links wild hin und her springen und einen Meschugge machen.

Website-Entwurf für eine Zeichenschule

tempa wrote this 17:36:

Website-Entwurf für eine Zeichenschule

Kein geringerer als Giovanni Battista Tiepolo (1696-1770) stiftete das Material zur Dekoration der Website. Der Entwurf verwendet sieben Grafiken für das Basisdesign, zwei gekachelt, der Rest positioniert, wobei ich noch am überlegen bin in wie weit ich die Sepiamotive ‚relative‘ oder besser ‚absolute‘ positioniere und prozentual oder über feste Pixelwerte einbinde und ob ich den Rechten oder den Linken Rand als Ausgangspunkt nehme. Eines ist sicher, das Haus wird sich in einer 800-Umgebung in irgendeiner Form bewegen müssen. Einfach nur die Navigation mit Hintergrund darüberschieben wäre die Alternative, aber so recht will mir diese billige Lösung nicht gefallen. Ahnliches gilt für den Busch unten rechts. Ebenso fände ich es schade, würde die Navigation in der großen Auflösung immer noch am rechten Rand kleben. Nur eine Dekografik hat schon einen festen Platz die Papierverschmutzung in der rechten unteren Ecke.

Die Navigation ist in Editland so noch nicht vorhanden und hier wird noch ein Plugin programmiert werden, wobei ich schon die Basis dafür geschaffen habe. Es könnte genau diese Notwendigkeit der Pluginprogrammierung sein, die mich dann letztendlich erst in Bewegung versetzt, wenn zum Entwurf sich ein Kunde meldet (öhm und natürlich kann so etwas auch Editland-Unabhängig umgesetzt werden.). 😉 Oder aber sich die „wer steht bei wem in der Pflicht“-Situation wieder verkehrt, gell … erst aber werde ich wohl hierfür noch ein paar grafische Designs für meine Lieblingsprogrammiererin entwerfen müssen.

Text im Entwurf stammt von „Im Schatten der Titanen, Erinnerungen an Baronin Jenny von Gustedt“ der Authorin Lily Braun (1865-1916)

Website-Entwurf mit Figuren von Rudolf Wilke und James Wouski Gillroy

tempa wrote this 04:57:

Website-Entwurf mit Figuren von Rudolf Wilke und James Wouski Gillroy

Erst war da der Schmerzteufel der Gicht in der kolorierten Radierung von James Wouski Gillroy (1757-1815), die wie ich fand gut in eine Website passte und so Schnitt ich mir die Figur aus und noch ein zwei andere aus anderen Werken und es schien schon fast wieder so ein Monty-Pythonesqu’sche Kreation zu werden, doch alles passte nicht so recht. Ein paar verteilte Figürchen machen eben noch keinen Website-Entwurf. Also via Stichworte „kolorierte Radierungen“ nach weiteren geeigneten Motiven gesucht und da tauchte Rudolf Wilke auf, der ein Jahrhundert später lebte, von 1873-1908. Sicherlich wird das Kacheln noch etwas Arbeit machen, sowohl für den Hintergrund, als auch für die Ränder weißen Texthintergrundes, nichtds desto trotz. Ich bin zufrieden.

Man könnte noch über die Schrift debattieren. Eine Monospace wie Courier könnte sich in diesem Website-Entwurf nicht schlecht machen.

Recent Comments:

  • Silke schümann { Du warst auf dieser Seite: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau http://templaterie.de/blog/931/step1-zur-archiv-thumbgalerie-via-custom-fields-marke-eigenbau/ Hier war ich noch am Basteln. Ich fürchte meine PHP-Kenntnisse sind... } – Aug 26, 9:29 AM
  • Andreas { Hey, ich habe den Code wie oben benutzt und auch $dgal = get_posts('category=1′); on der richtigen Zeile eingesetzt nur bei mir läufts immernoch nicht. Kann... } – Aug 26, 3:20 AM
  • Fred { "wer Smarty lernt, kann tatsächlich gleich auch PHP mitmachen, ich hatte es eine zeitlang auch eingesetzt, aber jetzt mach ich es wieder auf meine art... } – Jan 06, 7:14 PM
  • Silke Schümann { Das klingt nach einem Syntaxfehler in der ersten Zeile. Anführungszeichen korrekt? Und das Plugin funktioniert nur innerhalb von Editland. Die index.php ausserhalb von Editland aufzurufen... } – Jun 18, 3:40 PM
  • Jörg { Hallo, ich habe die index.php im ersten Abschitt Nr. 3 beschrieben, angelegt. Beim Aufruf der Seite wird folgende Fehlermeldung angezeigt: Parse error: parse error, unexpected... } – Jun 18, 3:14 PM
  • Michael { Gern geschehen 😉 } – Mai 29, 2:31 PM
  • Silke Schümann { Jepp. Das war's: ES tut! Lösung ist nun in einem eigenen Beitrag: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau Fertig und betriebstüchtig! 🙂 } – Mai 29, 1:25 PM
  • Michael { Wie wäre es, wenn Du die Zeile $dgal = get_posts('category=1'); auslagerst und den Rest in eine Funktion packts, der Du $dgal übergibst. Das wäre auch... } – Mai 29, 12:45 PM
  • Silke Schümann { Ich ziehe diees Variante ebenfalls vor, dovh wenn ich Code übernehmen, dann ändere ich hierfür nicht extra. Es dürfte gehzpft wei gesprungen sein, welche man... } – Mai 29, 2:00 AM
  • Ulf { ich würde bei der Syntax für Schleifen konsequent die C-ähnliche Variante mit geschweiften klammern nehmen, nicht die alternative mit Doppelpunkt und "endwhile" bzw. "endforeach". } – Mai 29, 12:00 AM
  • Silke Schümann { Ich habe ich http://franchie.de die Thumbs in der Sidebar erfolgreich ausgelesen. Ansonsten ist die Test-Umgebung unter 1a-test dot de / blog Ich will diese Adresse... } – Mai 28, 11:37 PM