Webdesign - welche Optik ist heute gefragt?

[Apfelsaft]

Servus

ich bastele gerade Webseiten und habe hier schlicht das Problem, dass ich nicht so recht weiß, wo ich optisch hin will.
Mit der technischen Seite (CSS File etc) hab ich nicht sooo große Schwierigkeiten, weil ich schon länger programmiere.

Hab aber, wie man an dem Screenshot erkennen kann, einfach nicht so den Sinn für die Optik - bin auch in Inneneinrichtung voll die Niete und bekomme immer zu hören, dass mein Zimmer wie eine Gefängnis-Zelle aussieht ^^

Kennt Ihr vlt so etwas wie einen guten Style-Guide, der Webdesign weniger aus technischer, sondern eher aus der Graphiker-Perspektive erklärt?
Ich steh beim Pimpen meiner Seite eher vor einem "Was?"- als vor einem "Wie?"-Problem.

Falls wer Lust hat, wäre ich auch sehr an euren Ideen zur Aufhübschung interessiert

Btw: Das weiße Viereck oben ist reserviert für ein Foto, dass ich erst noch schießen muss.

Vielen Dank,
Apfelsaft

 

[andiu]

Tja ... so wie dein Rohbau sehen heutige Webseiten eher nicht aus ...

An deiner Stelle, wenn Dir das Händchen für das Gestalterische fehlt, würde ich mich an erfolgreichen Vorbildern orientieren.
Effizient, weil an grundlegende Designregeln anknüpfend, sind die Word Press Themes. Vielleicht kannst Du da ein paar Inspirationen mitnehmen.
Inhaltlich sind auch responsive Websites gerade angesagt.

Jedenfalls: Briefmarkengroße Bilder zentriert sind nicht mehr in. Unterschiedlich große Eingabefelder eher auch nicht. Viel Erfolg !

 

[Jiko]

WordPress ist ein guter Anhaltspunkt. Inzwischen ist man auch weg von den schwarzen Rahmen jeglicher Dicke um die einzelnen "Kästen". Siehe hier im Forum, wie die Beiträge dargestellt sind. Eher gedeckte, blassere, helle Farben als ein dicker Farbton. Bildschirmbreite ausnutzen, aber auch (dank mobiler Geräte) darauf achten, dass die Seite auch auf schmalen Bildschirmen funktioniert. Siehe andius Link zu "responsive Websites".
Keine Serifen-Fonts.

 

[Apfelsaft]

Hi, vielen Dank für eure Anregungen Leider kann ich euch in diesem Teil des Boardes kein Karma geben, dabei hättet ihr es redlich verdient

Ich habe mal ein etwas schlichteres, hoffentlich eleganteres Design entwickelt, das auf verschiedene Fenster-Größen reagiert...vlt habt ihr ja noch einen Verbesserungsvorschlag...?

Sachtmal, was haltet ihr von aufwendigen Hintergrund-Bildern? Ein paar Freunde von mir malen wie Michelangelo, die könnten mir ein tolles Hintergrund-Bild zaubern...ich frage mich jedoch, wie sowas auf verschiedenen Fenstergrößen wirkt und ob die Seite dann nicht überladen wirkt...schönes Hintergrundbild ja oder nein?

Vielen Dank

 

[andiu]

Darf ich mal ganz allgemein fragen, welchem generellen Zweck die Seite dienen soll? So konkret-abstrakt?
Bis jetzt sieht das aus wie ein ChatBot und ein Eingabefeld ...

Große Hintergrundbilder: Nur dann wenn es nötig ist, für Betreiber deren Kommunikation wesentlich von der visuellen Komponente abhängt weil Gefühle angesprochen werden sollen (Werbeagenturen z.B.) Große Bilder rufen lange Ladezeiten hervor und oft lohnt es nicht. Kommt halt auf den Zweck der Seite an.
Ansonsten reicht ein stimmiges Bild im Kopf der Seite und ansonsten was Aufgeräumtes. Starke Farbflächen sind gut für Inneneinrichter, der Rest nimmt Weiß oder ähnlich und dezente Raster.
Zentriert muss es auch nicht sein. Zentrieren ist heutzutage fast eine Metapher für Unruhe. Lieber linksbündig mit großzügigem Margin (z.B. 15%) auf einer Linie. Dann kann man rechts eine Navi unterbringen, ergänzende Infos usw. Damit das Auge auch eine bessere Orientierung hat, könnte man auf das vertikale Zentrieren verzichten und es weiter oben beginnen lassen, bei längeren Chats (nehme ich mal an) auch deutlich näher am oberen Rand. Ausserdem sind Scrollfenster nicht wirklich leicht bedienbar (erfordert zusätzliche Aktion des Nutzers), es sei denn es läßt sich partout nicht vermeiden (längere Texte).

Bei deinem aufgezogenen Kasten nutzt Du nur ein Drittel der Seite. Das mag korrekt sein wegen der Lauflänge des Textes der ja auch nicht zu lang sein soll (Lesbarkeit), aber dann sieht es immer noch ziemlich verloren aus. Dann lieber den Kasten nach links rücken (siehe oben) und rechts eine unifarbene Farbfläche im gewünschten Farbton einfahren lassen, je nach Breite des Browserfensters bzw. des User Agents. Das gibt mehr Struktur.

 

[Waljakov]

Das hier kann ich auch empfehlen: https://material.io/
Das sind u.a. Design Guidelines von Google.

 

[Apfelsaft]

Darf ich mal ganz allgemein fragen, welchem generellen Zweck die Seite dienen soll? So konkret-abstrakt?
Bis jetzt sieht das aus wie ein ChatBot und ein Eingabefeld ...

Die "Webseite" ist nur ein Frontend für meinen supertollen Chatbot in PHP ^^ der Bot ist ein Krokodil, also soll die Seite ein grünes Thema haben.

Weiß net ob linksbündig so gut kommt, google ist ja auch mittig. Aber stimmt, die Flexbox im Vollbild könnte breiter sein. Morgen abend komme ich wohl endlich dazu, deine übrigen Anregungen einzubauen. Aber Bild/Logo im Seitenkopf ist demnach doch sinnvoll?

 

[andiu]

Ja, gibt der Seite Struktur, ob jetzt Bild oder fette Grafik ist da eigentlich egal. Das "grüne" Thema kann man auch damit umsetzen, dass jedes Chatfenster ein kleines Kroko rechts/links oben hat und unten auch was, z.B. den Schwanz. Du hast derzeit ein giftgrüngrasiges Ambiente was wenig mit einem Croc zu tun hat, die sind eher grünlich-schlammfarben Wenn es allerdings ein Lacoste-Chatbot werden sollte ^^

Was die Positionierung angeht: Alles nur Anregungen, aber nicht ohne Plan Du könntest dann rechts z.B. die neuesten 5 Chatnachrichten einblenden (wenn es mehrere Chats gäbe) oder so.

Google ist nur beim Suchfeld mittig. Alles andere ist weit untergeordnet dort ... sind die Suchergebnisse auch mittig? Bau mal die Seite mittels Firefoxtool -CSS so um dass die Suchergebnisse mittig angezeigt werden, gefällt Dir das?

 

[Apfelsaft]

Achja, die Seite ist seit einer Weile online ^^

 

[andiu]

Bisschen albern oder?

 

[Waljakov]

Bei mir kommt immer nur

Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 31457488 bytes) in /www/htdocs/w016f93e/kroko23.com/inc/class/StringContainer.class.php on line 23

wenn ich was eingebe.

 

[Apfelsaft]

Wtf? das problem ist neu...gleich mal debuggen ^^

Bisschen albern oder?

Auf jeden Fall ^^
--- Beiträge wurden zusammengefasst ---
Lol, das Problem tritt nur in englischer Sprache auf. Danke für den Hinweis!

 

[Apfelsaft]

Memory-Leak sollte gestopft sein. Aber der Bot kann noch kaum Englisch, ich arbeite dran ^^

Noch iwelche Vorschläge, was man an der Seite optisch verändern sollte?

 

[andiu]

Naja, die Benutzerführung ist unübersichtlich. Bei "Gib deine Fragen ein ..." geht gar nichts, bis man mal "gehuldigt" hat. Dann wird der Chatverlauf und Antworten angezeigt.
Impressum geht nicht. Die Weltkarte könnte man zentrieren. Dein Eliza für Arme könnte man noch etwas ausbauen