mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 08:06 Benutzername: Passwort: Auto-Login

Thema: Der erste ernsthafte Versuch von detroit. vom 27.01.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Artwork Showcase -> Der erste ernsthafte Versuch von detroit.
Autor Nachricht
detroit
Threadersteller

Dabei seit: 22.01.2012
Ort: Mittelhessen
Alter: 25
Geschlecht: Männlich
Verfasst Fr 27.01.2012 22:12
Titel

Der erste ernsthafte Versuch von detroit.

Antworten mit Zitat Zum Seitenanfang

Hallo liebe User von Mediengestalter.info,
Vorerst einmal zitiere ich meine Vorstellung aus meinem anderen Thread
Zitat:
Mein Name ist Robin, ich komme aus Hessen, bin 13 Jahre jung und interessiere mich für Mediengestaltung vorallem in Punkto Webmedien bzw. Webseiten. Ich besuche die achte Klasse eines Gymnasiums.
Das ist alles was man über mich wissen muss, denke ich. Wenn dennoch fragen aufkommen, schreibt mir einfach eine Nachricht.

Ja, heute war es soweit und ich habe mir mal nach der Schule die Zeit genommen einen halbwegs ernsthaften Entwurf zu machen und diesen umzusetzen. Angefangen habe ich mit einer einfachen Zeichnung (eben einem Scribble). Nachdem ich circa 10 Blätter zerknüllt, zerrissen oder anderweitig entsorgt hatte, kam ich dann endlich mit einem halbwegs zufrieden stellendem Ergebniss raus. Das habe ich dann kurzerhand in Photoshop als eine Art "Boxmodell" umgesetzt und mich dann nach und nach den einzelnen Boxen (mal intesiver, mal eben nicht) gewidmet. Das Design ist villeicht sehr sehr simpel, aber auf die Umsetzung habe ich "ein wenig mehr" Wert gelegt. Schwerpunkte lagen hier darauf:
- CSS 3 Eigenschaften & Gradients statt Bildern
- Saubereres CSS als ich es sonst praktiziere (variable Eigenschaften mittels dem style="" Attribut in HTML umsetzen, anstatt jedesmal in CSS einen Selektor zu erstellen sobald sich etwas ändert)
- W3C Validität zumindest beim HTML (PASSED!)
Wodrauf ich so gar nicht geachtet habe ist Crossbrowserumsetzung. Die Seite wurde mit dem Firefox erstellt und funktioniert auch in eben diesem so wie sie soll. CSS3 ist Pflicht, sonst wird die Seite hässlich (villeicht findet ihr sie ja ohnehin hässlich, wer weiss?)
Beim Folgenden benötige ich noch einiges an Hilfe, wie es auch leicht ersichtlich ist:
- Content Seitenfüllend verwenden
- Design Ideen
Und naja nun bitte ich um euer Feedback und hoffe dabei nicht allzuschlecht wegzukommen. Auch solltet ihr beachtet das ich mir all das selbst beibringen musste und auch keine professionelle Ausbildung oder gar ein Studium habe (NOCH nicht *zwinker*). Deswegen messt mich bitte nicht an den Maßstäben der Profis.
Hier nun die lang erwartete Seite:
m1nt.info
Domain & Webspace gehören nicht mir.
Liebe Grüße,
Robin.[/list]
  View user's profile Private Nachricht senden
Vektorpate

Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht: Männlich
Verfasst Fr 27.01.2012 23:03
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo Robin,

ich finde es gut, dass du dich mit Webtechnologien und Design befasst.
Für den Anfang ist das doch schon recht ordentlich.

detroit hat geschrieben:
CSS3 ist Pflicht, sonst wird die Seite hässlich


Das stimmt allerdings nicht so ganz. CSS3 gibt dir zwar mehr Möglichkeiten
in punkto Webdesign als CSS2, aber Pflicht es nicht zwingend.
Viele gute Webdesigner benutzen immernoch hauptsächlich Bilder
und setzen CSS3 sehr dezent ein.

Als allgemeinen Tipp kann ich dir geben, vielleicht mal eine Seite
zu einem bestimmten Thema zu konzipieren.
Suche dir ein Thema, welches dich interessiert und mach dir dazu
mal Gedanken, wie das Design das Thema unterstreichen könnte.

Gruß
  View user's profile Private Nachricht senden
Anzeige
Anzeige
detroit
Threadersteller

Dabei seit: 22.01.2012
Ort: Mittelhessen
Alter: 25
Geschlecht: Männlich
Verfasst Fr 27.01.2012 23:39
Titel

Antworten mit Zitat Zum Seitenanfang

Vektorpate hat geschrieben:
Hallo Robin,

ich finde es gut, dass du dich mit Webtechnologien und Design befasst.
Für den Anfang ist das doch schon recht ordentlich.

detroit hat geschrieben:
CSS3 ist Pflicht, sonst wird die Seite hässlich


Das stimmt allerdings nicht so ganz. CSS3 gibt dir zwar mehr Möglichkeiten
in punkto Webdesign als CSS2, aber Pflicht es nicht zwingend.
Viele gute Webdesigner benutzen immernoch hauptsächlich Bilder
und setzen CSS3 sehr dezent ein.

Als allgemeinen Tipp kann ich dir geben, vielleicht mal eine Seite
zu einem bestimmten Thema zu konzipieren.
Suche dir ein Thema, welches dich interessiert und mach dir dazu
mal Gedanken, wie das Design das Thema unterstreichen könnte.

Gruß

Guten Abend Vektorpate,
die Aussage, dass CSS3 Pflicht sei, war auf die Kompabilität meiner Seite bezogen. Nicht etwa auf die Allgemeinheit, ich habe keine Alternativen zu dem CSS3 im Stylesheet angegeben, so wird die Seite mit einem Browser, der kein CSS3 unterstützt, leider ziemlich hässlich. Hier mal ein Screenshot von Browsershots, der mit dem Avant Browser gemacht wurde, welcher kein CSS3 Unterstützt:
Klick
Hingegen jedoch der aktuelle Firefox:
Klick 2
Man merkt hierbei, dass die "Hauptfont" im Logo fehlt, habe diese mit @font-face eingebunden, was eben ältere Browser leider nicht unterstützen. Ebensp fehlen die oberen 2 Verläufe, die ebenfalls mit CSS3 gemacht wurden. Einfacher hätte ich auch Bilder mit 1px Breite und der Höhe des Verlaufes nehmen können, diese in einem div mit 100% width packen und dann einfach als background-image setzen und den background-repeat auf X einstellen, damit eben nur die X-Achse wiederholt wird. Das ist Crossbrowserfähiger, richtig?
Und Vektorpate leider habe ich nur wenige Ideen zu Seiten, die ich gerne erstellen würde. Und diese sind meistens so schnell umgesetzt, dass es relativ wenig Spaß macht.
Hmm...Ich wünsche euch allen eine Gute Nacht.

//NACHTRAG
Mir ist aufgefallen das ich einen Linux-Screenshot vom Firefox verwendet habe, da ich aber einfach nur zu faul war, noch die Verdana font in meinen Ordner mit reinzupacken, habe ich dafür nicht extra eine font-face ins CSS mit aufgenommen. Komplett richtig und 100% wie gewollt sieht die Seite so aus:
Ein letztes mal Klicken (:


Zuletzt bearbeitet von detroit am Fr 27.01.2012 23:41, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Vektorpate

Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht: Männlich
Verfasst Sa 28.01.2012 09:03
Titel

Antworten mit Zitat Zum Seitenanfang

detroit hat geschrieben:

ich habe keine Alternativen zu dem CSS3 im Stylesheet angegeben, so wird die Seite mit einem Browser, der kein CSS3 unterstützt, leider ziemlich hässlich. Hier mal ein Screenshot von Browsershots, der mit dem Avant Browser gemacht wurde, welcher kein CSS3 Unterstützt:
Klick


Also erstmal finde ich die so sogar besser und nicht hässlich, das liegt aber daran,
dass ich Verläufe grundsätzlich nicht mag. Grins
Und wie ich bereits sagte: hier wäre ein Bild mit Verlauf angebrachter, welches du einfach repeatest.
Dann klappt der Verlauf auch in jedem Browser!
Und wenn das Bild sagen wir mal 5px breit und 50 hoch ist, hast du vielleicht maximal 2kb.


detroit hat geschrieben:

Das ist Crossbrowserfähiger, richtig?


Genau *zwinker*


detroit hat geschrieben:

leider habe ich nur wenige Ideen zu Seiten, die ich gerne erstellen würde. Und diese sind meistens so schnell umgesetzt, dass es relativ wenig Spaß macht.


Dann scheinst du dich wohl mehr für die Technik als für das Design zu interessieren - was ja auch völlig OK ist.
Für mich klingt das nach dem Berufsbild eines Frontend Entwicklers, der meistens Layouts für das Web umsetzt
mit entsprechender Technik. Wobei du ja auch noch jung bist und man sich noch nicht wirklich festlegen muss.

Achso und noch was zum Logo.. Grundsätzlich ist davon abzuraten ein Logo mit Webfonts zu erstellen.
Dieses sollte man eher mit dem Schriftrepertoire seines Rechners, und natürlich basierend auf einer Grundidee gestalten.


Zuletzt bearbeitet von Vektorpate am Sa 28.01.2012 09:10, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 28.01.2012 09:46
Titel

Antworten mit Zitat Zum Seitenanfang

Vektorpate hat geschrieben:
Und wie ich bereits sagte: hier wäre ein Bild mit Verlauf angebrachter, welches du einfach repeatest.
Dann klappt der Verlauf auch in jedem Browser!
Und wenn das Bild sagen wir mal 5px breit und 50 hoch ist, hast du vielleicht maximal 2kb.

Achso und noch was zum Logo.. Grundsätzlich ist davon abzuraten ein Logo mit Webfonts zu erstellen.
Dieses sollte man eher mit dem Schriftrepertoire seines Rechners, und natürlich basierend auf einer Grundidee gestalten.


Naja. Aber jeder wie er will. Nur mag ich diese Pauschalaussagen überhaupt nicht. Und nein, deine (Vektorpate) ist nicht die optimale Herangehensweise.
Und ich kann, wenn ich möchte, durchaus mit Webfonts ein Logo machen, sehr individuell sogar. Gewusst wie ist das sogar im IE6 möglich.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
detroit
Threadersteller

Dabei seit: 22.01.2012
Ort: Mittelhessen
Alter: 25
Geschlecht: Männlich
Verfasst Sa 28.01.2012 12:31
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank für euer Feedback bis jetzt.
Wie würdet ihr, wenn ihr in meiner Situation wärt, den Content auf der Seite platzieren? Ich würde ihn so wie den Text (der so schlecht wie ich ihn geschrieben habe locker als Blindtext durchgehen könnte!) in einem Div das etwa bis zum dritten Menüpunkt geht und den gleichen Seitenabstand wie das Logo / die Font hat. Die Gradients werde ich noch überarbeiten müssen, hat jemand eventuell eine gute Erklärung zu den Fallbacks für ältere Browser parat? Danke im Voraus,
Robin.

Nachtrag:
Hmm also Chrome stellt die Seite fast wie gewollt da, aber da spinnt das background-image von meinen spotLight <div>s.
Siehe:



Das schafft doch sogar der IE7 (mit IETester zumindest)...was soll der Mist denn jetzt schon wieder?
Wieso gibt es nicht einfach einen Browser, mit dem jeder zufrieden ist, den jeder verwendet und den jeder sich erweitern kann...welcome to Utopia.


Zuletzt bearbeitet von detroit am Sa 28.01.2012 12:43, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Vektorpate

Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht: Männlich
Verfasst Sa 28.01.2012 12:54
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank für deine Richtigstellung, Amselm Hannemann.

Gruß
  View user's profile Private Nachricht senden
Struwwelpeter

Dabei seit: 25.08.2005
Ort: Stuttgart
Alter: 37
Geschlecht: Männlich
Verfasst Sa 28.01.2012 15:16
Titel

Re: Der erste ernsthafte Versuch von detroit.

Antworten mit Zitat Zum Seitenanfang

detroit hat geschrieben:

- Saubereres CSS als ich es sonst praktiziere (variable Eigenschaften mittels dem style="" Attribut in HTML umsetzen, anstatt jedesmal in CSS einen Selektor zu erstellen sobald sich etwas ändert)


Das Separieren von HTML und CSS hat schon seinen Grund und oft seine Richtigkeit.
Gerade deine Navigation kann man sehr viel eleganter lösen. [z.B.]


Zuletzt bearbeitet von Struwwelpeter am Sa 28.01.2012 15:16, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen [PS] Erste ernsthafte Signatur
Detroit's beste Arbeit bis dato.
webdesign versuch
web 2.0 versuch HP ! -> update <-
[Schrift] Ein Versuch
Mein Versuch
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Artwork Showcase


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.