Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
detroit
Threadersteller
Dabei seit: 22.01.2012
Ort: Mittelhessen
Alter: 25
Geschlecht:
|
Verfasst Fr 27.01.2012 22:12
Titel Der erste ernsthafte Versuch von detroit. |
|
|
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 ). 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]
|
|
|
|
|
Vektorpate
Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Fr 27.01.2012 23:03
Titel
|
|
|
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ß
|
|
|
|
|
Anzeige
|
|
|
detroit
Threadersteller
Dabei seit: 22.01.2012
Ort: Mittelhessen
Alter: 25
Geschlecht:
|
Verfasst Fr 27.01.2012 23:39
Titel
|
|
|
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
|
|
|
|
|
Vektorpate
Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Sa 28.01.2012 09:03
Titel
|
|
|
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.
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
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
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 28.01.2012 09:46
Titel
|
|
|
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.
|
|
|
|
|
detroit
Threadersteller
Dabei seit: 22.01.2012
Ort: Mittelhessen
Alter: 25
Geschlecht:
|
Verfasst Sa 28.01.2012 12:31
Titel
|
|
|
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
|
|
|
|
|
Vektorpate
Dabei seit: 05.09.2006
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Sa 28.01.2012 12:54
Titel
|
|
|
Vielen Dank für deine Richtigstellung, Amselm Hannemann.
Gruß
|
|
|
|
|
Struwwelpeter
Dabei seit: 25.08.2005
Ort: Stuttgart
Alter: 37
Geschlecht:
|
Verfasst Sa 28.01.2012 15:16
Titel Re: Der erste ernsthafte Versuch von detroit. |
|
|
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
|
|
|
|
|
|
|
|
Ä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
|
|
|
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.
|
|