Webdesign

Stellt Eure in Arbeit befindlichen oder fertigen 2D-Artworks hier aus, um sie diskutieren zu lassen. Dabei spielt es keine Rolle, ob Euer Artwork in klassischen Techniken oder digital entstanden ist.
Antworten
idontlivehereanymore
Senior Member
Beiträge: 653
Registriert: 29. Mai 2006, 15:10

Webdesign

Beitrag von idontlivehereanymore » 17. Aug 2006, 17:32

Meine erste größere Auftragsarbeit. Naja nicht ganz allein meine. Das Design stammt zu großen Teilen aus der Feder meiner Freundin(müsli), die Programmierung hab ich dann erledigt.

www.asta-edderitz.de
(russisch und italienisch fehlen noch)

Konnte zwar schon vorher etwas gebrochen HTML, aber im Grunde hab ichs mir jetzt nochmal komplett neu beibringen müssen, direkt zusammen mit CSS.

Das größte Problem beim Design war wohl, dass die Firmenfarben Legosteinblau und Dudengelb sind und sich daraus irgendwie anfangs kein Design machen lassen wollte, was keinen Augenkrebs verursacht. Passend zum angepeilten schlichten, sachlichen Design wurden große Farbflächen daher direkt wegrationalisiert.

Es ist unser erster Versuch auf dem Gebiet des Webdesign, aber C&C ist natürlich wie immer erwünscht, vorallem da demnächst wohl endlich der Relaunch meiner Website ansteht :X

so long,
Bild

Benutzeravatar
IronCalf
Artguy
Beiträge: 2042
Registriert: 29. Mai 2006, 02:52
Wohnort: Salzburg
Kontaktdaten:

Beitrag von IronCalf » 17. Aug 2006, 17:55

Ich kann leider nicht viel dazu sagen, aber mir gefällts. Schön schlicht. Die Schrift ist etwas klein und mir kommt vor, dass sich das Banner, da es auch schmal ist, zu weit oben befindet.

Hast du eine gute Literaturempfehlung für html, css und co? (etwas für Einsteiger)
Vergesst niemals, dass sich auch der stärkste Mann aufs Kreuz legen lässt. Diesen Fehler machte Gott, als er auf die Erde kam.

Art must be "A" work or its not art. Art won't shine your shoes, fuel your car, or feed your cat.
Therefore: ART HAS NO REASON TO EXIST, OTHER THAN THAT IT BE WELL MADE. - Stapleton Kearns
If you work to make excellent things your style will develop on its own. - Stape, again

Mein Personal Showroom: http://www.digitalartforum.de/forum/vie ... 0&#a117960

Benutzeravatar
[MadHatter]
Newbie
Beiträge: 33
Registriert: 30. Mai 2006, 17:06
Kontaktdaten:

Beitrag von [MadHatter] » 17. Aug 2006, 19:28

Hi ßssn,

der HTML-Code ist nicht valide.

Ich kann zwar bei den bei mir installierten Browsern (FireFox 1.5.0.6, Opera 9.01, IE 5.0/
5.5/6.0) keine Darstellungsprobleme ausmachen, aber zugunsten größtmöglicher
Barrierefreiheit könnte dies noch überarbeitet werden. Soweit ich das erkennen kann,
trennen dich größtenteils nur Kleinigkeiten von sauberem HTML im Sinne des W3C.

Außerdem hast du vergessen einige Sonderzeichen zu maskieren (in Alternativtexten
beispielsweise). Mit einer zusätzlichen Angabe zur Zeichenkodierung könntest du darauf
aber auch verzichten.

Wenn die Seitenbetreiber auf direkte Druckbarkeit wertlegen, wäre ein Optimierung der
Druckversion per Stylesheet denkbar. Im Opera-Browser wird beispielweise der blaue
Hintergrund mitgedruckt.
Ubi nihil, ibi libertas.

Benutzeravatar
Herrmann
Artguy
Beiträge: 1139
Registriert: 29. Mai 2006, 01:34
Wohnort: Köln
Kontaktdaten:

Beitrag von Herrmann » 17. Aug 2006, 21:07

Hey ßssn, eine solide Seite baut Ihr da.

IronCalf hat ja schon die etwas kleine Schrift angesprochen. Die könnte tatsächlich ein oder sogar zwei Stufen größer sein. Muss aber nicht unbedingt. Was Du aber aus meiner Sicht auf jeden Fall tun solltest, ist die Zeilenhöhe etwas zu steigern. Probier zum Beispiel mal Werte zwischen

line-height: 105%;
und
line-height: 125%;

Ich denke irgendwo dazwischen wirst Du was finden, dass Dir besser zusagt, als die etwas eng zusammenstehenden Zeilen. Du müsstest beobachten können, dass es Deinen Augen dann leichter fällt, den Zeilen zu folgen.

Vielleicht würde ich mir über die Bilder auf den Seiten "Startseite" und "ßber Uns" nochmal Gedanken machen. Beide Male sieht man diese Fabrikhalle, was bei der Startseite vielleicht noch nachvollziehbar ist, aber warum dann ein Auto dazu kommt, wenn man auf "über uns" klickt, erschließt sich mir nicht so ganz. Wie wär's denn mit einem netten Gruppenfoto? Oder eine Aufnahme von den Arbeitern bei Ihrer Arbeit? Menschen halt.

Zu der Kopfzeile vielleicht noch: Die Wortmarke wirkt auf mich etwas "eingepfercht". Die stößt sich den Kopf, finde ich. Also ich würd der nach oben hin einige Pixel mehr Platz geben und das Bild entsprechend höher machen. Außerdem ist da rechts von der Marke so ein schwarzer Schatten. Kann man den etwas zurücknehmen?

Zu guter letzt: Die Rahmen um die Bilder finde ich überflüssig und sie wirken auf mich sehr hart. Entweder würde ich den Rahmen breiter machen und eine Farbe wählen, die einen geringeren Kontrast zum Hintergrund hat, etwa ein helles Grau, oder das Gelb (müsste ich sehen, um es zu bewerten) oder Du lässt die Rahmen ganz weg, wär wahrscheinlich das beste. Ein Grund einen Rahmen zu benutzen wäre für mich, wenn die Bilder sonst an den Rändern ausfransen, weil sie dort die gleiche Farbe haben, wie der Hintergrund (hier Weiß). Das obere Bild auf der "Service"-Seite ist so ein Kandidat (heller Streifen obere Bildmitte). In so einem Fall würde ich aber eher das Bild an der Stelle etwas bearbeiten oder im ganzen den Tonwertumfang etwas stutzen, als einen Rahmen drumherum zu ziehen.

fxk
Moderator
Moderator
Beiträge: 1390
Registriert: 12. Apr 2006, 00:12
Wohnort: Pirkenbrunn
Kontaktdaten:

Beitrag von fxk » 18. Aug 2006, 14:06

was ich zu dem genannten noch ändern würde ist die E-Mail Adressen zu verschlüsseln. Aktuell hast du das "Problem" dass Spam-Bots die Mail-Adressen auslesen können und die Firma garantiert mit Spams zugepflastert wird.
Zum Verschlüsseln gibt es diverse JavaScript Code-Schnipsel o.ä.

Aus Suchmaschinen-Sicht empfinde ich die Startseite als überflüssig. Die Flaggen im Layout integriert oder eine DropDown-Box würden aus meiner Sicht reichen. Die Startseite sollte dann mit einem aussagekräftigen Text bestückt werden, welche auf die Suchbegriffe/Keywords zugeschnitten ist. Es muss also analysiert werden nach welchen Begriffen Interessierte suchen würden um die Dienstleistung der Firma zu finden - und basierend auf diesen Suchbegriffen sollte dann ein Text geschrieben werden der die Keywords enthält - jedoch nicht mehr als 8 Keywords.
Apropos Keywords - was noch fehlt sind die Meta-Description und die Meta-Keywords - die zwar keine so hohe Bedeutung mehr beim Pagerank in Suchmaschinen haben - aber dennoch berücksichtigt werden. Die solltest du noch im Page-Header mit einbauen. Keywords wie bereits erwähnt nicht mehr als 8 wenn es geht - und am besten für jede Seite individuell auf den Inhalt zugeschnitten.

Visuell würde ich auf den Seite noch eine Haupt-ßberschrift (h1) einsetzen die etwas dominanter ist und sich auf den aktuellen Menüpunkt bezieht. Die aktuellen H1-Headlines (z.B. bei Leistungen) müssten dann natürlich zu H2 werden.
Auch zu beachten ist, dass die Headline-Abstufungen auch eine semantische Bedeutung haben. Die H1 ist die Hauptüberschrift, welche den Inhalt der Seite kurz umschreibt. Eine H1-Headline kann/darf es also auch nur 1mal auf einer Seite geben. H2-Headlines beschreiben Abschnitte und die restlichen H3-H6 unterteilen die Abschnitte weiter.

Die Fahnen unterm Menü finde ich etwas lieblos hingeklatscht und etwas zu dominant. Ich würde sie entweder in 1 Zeile stellen oder in den Kopfbereich mit aufnehmen. Alternativ eben ein Dropdown.

PS: soso, also durch Vitamin B hast den Auftrag bekommen ;)
I'm the great Cornholio - I need some TP for my bonghole...

Benutzeravatar
Duracel
Beiträge: 2971
Registriert: 29. Mai 2006, 10:35
Wohnort: Greven
Kontaktdaten:

Beitrag von Duracel » 18. Aug 2006, 14:30

Simple, aber effektiv. Gefällt.

Die Abkürzung der Firma ist allerdings nicht so clever ... also zumindest hierzulande assoziiert man "asta" mit "Allgemeiner Studierendenausschuss" ... najo ...
Ziel ist, woran kein Weg vorbeiführt.

müsli
Newbie
Beiträge: 21
Registriert: 3. Jul 2006, 09:04

Beitrag von müsli » 18. Aug 2006, 15:16

Auf den Firmennamen hatten wir leider keinen Einfluss :roll:

Danke für die hilfreiche Kritik und die Tipps, wir werden das Ganze dann sicher nochmal überarbeiten.

idontlivehereanymore
Senior Member
Beiträge: 653
Registriert: 29. Mai 2006, 15:10

Beitrag von idontlivehereanymore » 23. Aug 2006, 16:12

So hab jetzt ein paar Sachen verbessert, Zeilenabstand, Fahnen kleiner. Bei der Sache mit dem Rahmen kann ich Hermanns Ansicht leider nicht ganz teilen, aber vielen dank für die hilfreichen Kommentare. Die Sache mit dem W3C Standard mach ich vielleicht mal in einer ruhigen Stunde, wär etwas mehr Arbeit und scheint jetzt auch eher Formsache zu sein.

@ Dura: dazulande vielleicht, aber hier wo ich herkomme weiß kein Schwein was ein "Allgemeiner Studierendenausschuss" ist :D

so long
Bild

Necrodamos
Newbie
Beiträge: 6
Registriert: 8. Aug 2006, 09:53
Wohnort: Paderborn / Büren / Fürstenberg

Beitrag von Necrodamos » 23. Aug 2006, 23:31

sorry, aber mir gefällt die seite überhaupt nicht, ist mir schon zu schlicht / bitte nicht beachten enttäuscht sein

Benutzeravatar
Kazroth
Senior Member
Beiträge: 602
Registriert: 30. Mai 2006, 19:48
Kontaktdaten:

Beitrag von Kazroth » 24. Aug 2006, 15:11

Vom Design her gefällt mir das sehr gut. ich mag diese spartanischen und informativen "auf den Punkt" Lösungen bei Webseiten sehr. ßbersicht ist ebenfalls sehr schön und ich sehe auch keine Aufbauschnitzer in der Navigation (zu viele Punkte, zu verschachtelt etc.).

Also was das angeht finde ich die Seite wie gesagt sehr gut. Rein subjektiv hab ich immer etwas Respekt vor solchen Seiten weil es mir nie gelingt so ganz ohne SchnickSchnack und Schnörkel auszukommen, von daher auch aus dieser Sicht ein Daumen hoch von mir ;)
I made this half-pony half-monkey monster to please you. But I get the feeling that you don?t like it. What?s with all the screaming? You like monkeys, you like ponies. Maybe you don?t like monsters so much. Maybe I used too many monkeys. Isn?t it enough to know that I ruined a pony making a gift for you?

fxk
Moderator
Moderator
Beiträge: 1390
Registriert: 12. Apr 2006, 00:12
Wohnort: Pirkenbrunn
Kontaktdaten:

Beitrag von fxk » 24. Aug 2006, 20:26

ich finde die Seite gestalterisch ok, allerdings fehlt mir etwas der Zusammenhalt oder die optischer Struktur. Die Elemente brechen etwas auseinander.
Mit den untereinander stehenden Flaggen kann ich mich auch nicht anfreuden (wie ja schon mal erwähnt) - die zerklüften das Layout noch unnötig weiter. Entweder nebeneinander oder ein DropDown (mit Firefox kann man in Dropdowns sogar Icons darstellen lassen).
I'm the great Cornholio - I need some TP for my bonghole...

Benutzeravatar
top
Member
Beiträge: 58
Registriert: 4. Jun 2006, 13:47

Beitrag von top » 24. Aug 2006, 21:47

Mich überzeugt die Seite auch noch nicht.
Die gestaltung ist nicht schlecht, aber irgendwie viel zu langweilig. Mal eben ein Beispiel ergoogelt um zu zeigen in welche Richtung ich das besser finde: zum Beispiel http://www.baumo.de/
Es fehlt irgendwie das gewisse etwas, was deinen Kunden von den Mitbewerbern abhebt. :?
Aber jetzt nicht einfach nachbauen. Diese Seite hat auch ihre Schwächen. Aber um die geht es ja jetzt nicht.
Vielleicht findet ihr ja ein paar orginelle Ideen dir aber trotzdem seriös sind.


Ein paar Details die mir noch aufgefallen sind:

Leistungen: Im Text steht "Unsere Werkstatt ist mit modernster Technik ausgestattet" und auf dem Bild siht man eine Drehbank und eine Fräsmaschine die wahrscheinlich schon alt war als ich vor 18 Jahren an solchen Teilen gewerkelt habe.
Das Ersatzteillager wirkt auf dem Bild auch nicht sonderlich groß.

Kontakt: Auf der rechten Seite herrscht gähnende Leere. Viellecht sollte man die Kontaktadressen zweispaltig anlegen?

Die Schrift würde ich noch größer machen. Ich kann sie zwar noch lesen, ist aber (bei meiner viel zu hohen Monitorauflösung :D ) doch schon etwas anstrengend. (Bei den AGB kann die Schriftgröße bleiben - das liest sowieso keiner ;) )

Im Firefox springt die Seite leicht seitlich wenn die Scrolleiste nicht verwendet wird.
Dafür packe ich immer diese Kleinigkeit in die CSS-Datei:

Code: Alles auswählen

body {
overflow: -moz-scrollbars-vertical;
}
Viel Spaß,
top

Benutzeravatar
Hexodus
Senior Member
Beiträge: 682
Registriert: 8. Jun 2006, 22:00
Wohnort: Mainz-Kastel
Kontaktdaten:

Beitrag von Hexodus » 24. Aug 2006, 22:05

Das sieht auf jeden Fall grundsolide, seriös und durchweg professionell aus. Genau das, was eine Asta-Webpage braucht. Die stimmige Typo und das konsistente Layout gefallen mir gut. Einzige Bedenken kamen mir angesichts der unterschiedlichen Layouthöhen in den jeweiligen Sektionen. Von der Startseite zu den AGBs z.B. ist das ein gewaltiger Sprung - vom länglichen Querformat bis Superhochformat. Das darf auf gar keinen Fall passieren. Auf gut gestalteten Pages sollte das Format konsistent bleiben. IMO wäre es weniger schlimm, wenn die Layouthöhe immer über das Browserfenster herausrt, denn so würde man garnicht erst einen Sprung beim Umschalten bemerkten.
-~ http://www.augenpulver-design.de Illustration, 3D-Grafik, Computeranimation und 3D-Visualisierung~-
http://www.fantasybuch.de «- Alle Fantasy- und Science-Fiction Bücher auf einen Blick.

müsli
Newbie
Beiträge: 21
Registriert: 3. Jul 2006, 09:04

Beitrag von müsli » 25. Aug 2006, 10:31

Danke, für die Kritik.

Also die Schlichtheit ist Absicht. Grade heutzutage ist so viel überfüllt und unübersichtlich, dass es ruhig mehr schlichtere Sachen geben sollte.

Ja, die Flaggen sind jetzt besser als vorher, aber optimal finde ich sie auch noch nicht.
Ein Dropdown-Menü find ich ungeeignet, da man wieder einmal Text verwenden muss. Bilder, besonders Flaggen, sind viel schneller wahrnehmbar und jeder weiß sofort was gemeint ist. Ich will nicht, dass ein Ausländer die Seite verlässt, weil er seine Sprache nicht gefunden hat bzw. gar nicht wusste, dass man sie auswählen kann, so weiß ich z.B. bei einem Dropdownmenü auch nicht, wie ich für jeden (Engländer, Russen, Italiener) deutlich machen kann, dass man dort die Sprache auswählen kann, ohne es in jeder Sprache einmal drüber schreiben zu müssen.
Ausserdem sind Dropdownmenüs eher anstelle von vielen Auswahlpunkte zu gebrauchen. Für 3 Flaggen find ich den Klick auf des Dropdownmenü nicht gerechtfertigt. So viel zu Dropdownmenüs, ich werde nochmal probieren, wie man es besser machen könnte.

Danke für die baumo-Seite. Mir sagt sie jetzt allerdings nicht so zu (man kann den Header scrollen!). Vermutlich sind es die Bilder, die die Seite um einiges lebendiger machen.

Bei den Bildern bei Leistungen, da muss ich dir nach genauerer Betrachtung auch recht geben. Das Lager ist eigentlich relativ groß, bloß es ist auch leider so eng, so dass man aus keiner Ecke so richtig das ganze Ausmaß fotografieren kann. Die Fotos werden wir nochmal überdenken.

Zu der Kontaktseite: meine Rede! Bild hat schon probiert, die Kontaktdaten zweispaltig zu machen, aber es ist ihm nicht gelungen, zumal uns der Internetexplorer auch immer irgendwie dazwischen gefunkt hat.

Schrift größer haben wir schon durchprobiert und uns dann doch dagegen entschieden.

Danke für den Code für die Sachen mit dem Scrollbalken, nach sowas haben wir gesucht!

Bezüglich der stark differierenden Seiteninhalte: Die sind uns natürlich auch aufgefallen, allerdings möchte wir uns an den Grundsatz 'Form follows Content' halten und nicht umgekehrt. Jetzt also bei den kürzeren Seiten noch irgendwelchen Nonsense dazuzudichten nur damit der Text länger wird, liegt uns nicht und sollte auch nicht Sinn der Sache sein.
Was vielleicht eine ßberlgung wert wäre, die AGBs auf mehrere Seite zu verteilen. Wir werden nochmal drüber nachdenken.

Danke nochmal an alle für ihre Meinungen.
müsli

Serge_ds
Member
Beiträge: 74
Registriert: 14. Jun 2006, 23:49
Wohnort: Offenbach / Schweinfurt
Kontaktdaten:

Beitrag von Serge_ds » 25. Aug 2006, 19:54

Wenn man hoch - runter scrollt (unter kontakte z. B.) flimmern bei mir die blauen seitenbereiche.

fxk
Moderator
Moderator
Beiträge: 1390
Registriert: 12. Apr 2006, 00:12
Wohnort: Pirkenbrunn
Kontaktdaten:

Beitrag von fxk » 26. Aug 2006, 10:03

wenn eine Sprache nicht eingebunden ist macht es auch wenig Sinn die Sprachen derzeit zu verlinken. Ein Serverfehler "404 - Document not found" kommt nämlich nicht so gut.

@Dropdown
ja, schon richtig - und bei 3 Sprachen hat es auch noch nicht viel Sinn. Wie bereits gesagt könnte ich mir die Flaggen auch nebeneinander recht gut vorstellen.

Noch was technisches:
Die Rollovers im Menü würde ich persönlich über CSS umsetzen - ist eleganter und verbrät weniger Code. Darüber hinaus lassen sich ßnderungen dann zentral Steuern :)

Code: Alles auswählen

#Navigation {
  margin: 0px;
  padding:  0px;
  list-style-type: none;
}
#Navigation li {
  display: inline;
  margin: 0px;
  padding: 0px;
}
#Navigation li a {
  display: block;
  background: #FFFFFF url("link.gif") right center no-repeat;
  padding: 0.5em 1.5em 0.5em 0.5em;
  text-align: right;
}
#Navigation li a.active {
  background-image: url("linkb.gif");
}
#Navigation li a:hover {
  background-image: url("linka.gif");
}
sollte so klappen (ungetestet)
I'm the great Cornholio - I need some TP for my bonghole...

Benutzeravatar
Hexodus
Senior Member
Beiträge: 682
Registriert: 8. Jun 2006, 22:00
Wohnort: Mainz-Kastel
Kontaktdaten:

Beitrag von Hexodus » 28. Aug 2006, 19:41

...allerdings möchte wir uns an den Grundsatz 'Form follows Content' halten
Muhahah, den Spruch muss ich mir merken, wenn ich vor den Profs meine Arbeiten verteildige. Das ist semiplausibler Unsinn, den man sich erst auf der Zunge zergehen lassen muss, bevor seine falschheit offenbar wird. Wenn man Deinen Grundstatz nämlich auf ein Magazin wie z.B. den Focus anwendet, dann wären manche Seiten unten beschnitten, bei zuwenig Text, während andere Seiten aufklappbar wären, wenn es mehr Text gab. :lol:
Es geht hier nicht um das Hinzdichten von Text, sondern um das Format konstant zu halten.

idontlivehereanymore
Senior Member
Beiträge: 653
Registriert: 29. Mai 2006, 15:10

Beitrag von idontlivehereanymore » 28. Aug 2006, 21:57

Jo das war wohl ein kleines Missverständniss, müsli dachte, ihr wollte dass wir Text hinzudichten, und das wäre ja Blödsinn ;)

Aber zum festen Design, kann mir wer erklären, wie ich das Fenster immer so groß machen kann, dass es den Bildschirm ausfüllt, aber auch kein Scrollbalken entsteht?

bis denn
Bild

fxk
Moderator
Moderator
Beiträge: 1390
Registriert: 12. Apr 2006, 00:12
Wohnort: Pirkenbrunn
Kontaktdaten:

Beitrag von fxk » 29. Aug 2006, 14:37

kannst du prinzipiell nur Faken über ein Hintergrundbild im Body. Es klappt zwar auch irgendwie mit der Höhenangabe 'height: 100%' im CSS für deinen Container, allerdings musst du dann für den HTML und Body-Bereich auch eine Höhe definieren (warum auch immer). Das sähe dann so aus im CSS:

Code: Alles auswählen

html,body { height: 99%; }
Bei 100% erscheint ein Scrollbalken wenn ich nicht irre. Vielleicht sogar schon bei den 99% - musst bisschen rumprobieren.
I'm the great Cornholio - I need some TP for my bonghole...

Benutzeravatar
Hexodus
Senior Member
Beiträge: 682
Registriert: 8. Jun 2006, 22:00
Wohnort: Mainz-Kastel
Kontaktdaten:

Beitrag von Hexodus » 29. Aug 2006, 18:55

Wie FXK schon meinte, am besten klappt das mit einem Image im Hintergrund. Das kann aber auch ein ein pixel großes breites Gif sein, hauptsache es ist da.

fxk
Moderator
Moderator
Beiträge: 1390
Registriert: 12. Apr 2006, 00:12
Wohnort: Pirkenbrunn
Kontaktdaten:

Beitrag von fxk » 30. Aug 2006, 09:34

ßh, Vorsicht! Niemals ein 1x1 px großes Bild als Hintergrund definieren. Warum nicht? Ganz einfach, da ein 1x1 px großes Bild bei 1024x768 vom Browser schon 786432 mal dargestellt werden muss und das (vor allem bei älteren PCs) zu Performance-Problemen führen und sich negativ beim Scrollen auswirken kann. Von daher lieber größere Bilder verwenden. Wenn sie einfarbig sind ist es ja eh egal welche Dimensionen sie haben, da sie als GIF nur unmerklich größer werden.
I'm the great Cornholio - I need some TP for my bonghole...

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder