Hilfe bei Flat-Design gesucht

[gelöschter Benutzer]

Hallo Leute,

Irgendwie habe ich relativ wenige Ideen, wie ich das Design meiner Seite moderner gestalten kann. Ich hatte vor, semantisches Markup zu verwenden, so wenig wie möglich "inhaltslose" Elemente (Navigation etc.) einzusetzen und den Content eben in den Mittelpunkt zu stellen.

Dummerweise finde ich irgendwie wenig Ideen, wie ich das umsetzen kann. In meinem Forum habe ich schon einen netten Style, den ich etwas "kopieren" möchte. Aber auch da könnte man bestimmt noch was verbessern.

Hier mal ein Link zur Seite: www.crunchweb.de

Und ein Screenshot: Screenshot crunchweb.de – imgur

Habt ihr Vorschläge? Ich möchte gerne in Richtung flat design gehen und auch die Ladezeit der Seite so gering wie möglich halten.

 

[accC]

Ich weiß nicht genau, was deine Frage ist..
Mit HTML und CSS offensichtlich.
Überleg dir halt, was du für einfach und ansprechend hältst.
Wenn du wenig Grafiken verwenden möchtest, dann kannst du dafür eben mit Farben und CSS3-"Funktionalitäten" arbeiten.
Generell natürlich je weniger, desto besser.

 

[gelöschter Benutzer]

Na ja, hatte halt gehofft, ein paar Anregungen und Kritik zu bekommen ;-)

 

[feuerteufel]

Sorry, aber das ganze sieht derzeit eher wie eine Seite aus den 2000ern oder eines Anfängers aus.
Spiel mal ein bisschen mehr mit gewagten Farben, die man nicht so oft sieht oder erwartet. Dazu noch eine Schriftart, die gut lesbar ist. Alternativ von Google Fonts, damit sie auch überall zu sehen ist.
Tipp: Beim Googlen nach "Flat Design" bekommt man sehr viel Inspiration.

 

[epiphora]

Wichtiger als die Farben sind vor allem die Abstände.

Gerade beim Flat Design ist es wohl wichtig, dass die Abstände nicht zufällig gewählt werden, sondern sich irgendwo wiederspiegeln. Das wird vom Betrachter natürlich auch wahrgenommen. Damit das (unbewusst) noch besser erkenntlich wird, solltest Du sie viel größer wählen, als Du es getan hast. Sieht dadurch etwas aufgeräumter und freundlicher aus.

Durch immer gleiche Abstände ergibt es sich auch, dass die Elemente, die nebeneinander liegen, auf gleicher Höhe anfangen. Wenn sie leicht versetzt sind, sieht es nämlich sofort chaotisch aus. Hab hier mal an ein paar Ecken herumgespielt:



Wenn man jetzt noch einen leichten Schatten für die Artikel hinzufügt, ist es zwar kein Flat-Design mehr, gewinnt aber dafür wahnsinnig an Struktur. Wäre meiner Meinung nach eine Überlegung wert:



Ich habe hier mal in grün die Abstände eingezeichnet, die ich bereits verändert habe. In rot diejenigen, die auch noch angepasst werden müssten, aber noch nicht angepasst wurden. Ganz wichtig hierbei: Nicht mit dem Platz geizen! Mach die Abstände ruhig etwas größer und "verschwende" den Platz. Das ist völlig egal. Vor allem auf heutigen Monitoren ist das sinnvoll, weil man ohnehin zu viel Platz hat. Dadurch werden die Texte schmaler, man kann sie besser lesen und es sieht einfach nicht so vollgeklatscht aus. Also genau das, was Du möchtest. Fällt jetzt vor allem an den kleinen Buttons mit den Tags unter den Artikeln auf. Da wurde das padding noch nicht erhöht und jetzt sehen sie irgendwie klein und störend aus. Probier's mal aus! Damit die Abstände auf mobilen Geräten mit kleinen Displays nicht stören, kannst Du dafür ja ein responsives Stylesheet machen.

Hier die Markierungen:



Außerdem sehen die Umbrüche in der Kommentar-Sektion nicht schick aus. Wären da einzeilige Texte nicht vielleicht besser? Eventuell solltest Du auch mal darüber nachdenken, die Zeilenhöhe in Fließtexten zu erhöhen.

 

[gelöschter Benutzer]

Danke, epi ;-)

Abgesehen vom Design, würdest du am Code was ändern? Ich hoffe halt, den so einfach wie möglich halten zu können.
Wie meinst du das mit einzeiligen Texten in den Kommentaren?

Hast du eventuell Lektüre für responsive (flat) design zur Hand? Kurze Google-Recherche ergab leider nur so Anfängerkrams ("what is responsive design?")...

@feuerteufel: Könntest du das etwas ausführen? Warum sieht die Seite wie die eines Anfängers aus? Im Moment geht es mir übrigens erst einmal hauptsächlich um das Layout, die Farben kann man ja später locker anpassen.

 

[epiphora]

Den Code habe ich mir nicht angesehen. Wenn er valide und sinnvoll strukturiert ist, wird aber alles in Ordnung sein!

In einem Browser mit einer Breite von 1920px (siehe Screenshot) sehen die Kommentare in der Sidebar doof aus, weil immer nur das letzte Wort umgebrochen wird. Darauf bezog ich mich. Vielleicht kannst Du dort lediglich einzeilige Kommentare machen (oder den Rest kürzen, wenn zu lang).

Ich würde flat design und responsive design als verschiedene Aspekte betrachten. Flat design geht ja wirklich nur um's Optische und responsive design (Design im Sinne von Planung) beschäftigt sich ja damit, die Website für alle verschiedenen Arten von Geräten zugänglich zu machen.

 

[gelöschter Benutzer]

Also ich habe jetzt die Abstände mal angepasst und wirklich alles in em definiert.
Pixelangaben sollten jetzt nicht mehr im Code sein. Letzterer ist auch etwas aufgeräumter (CSS-Selektoren zusammengefasst etc.).

Auch den Schlagschatten habe ich hinzugefügt, wirkt tatsächlich schicker.

Screenshot: http://i.imgur.com/MbhHJB0.png

Habe jetzt vor, die Tags etwas schicker darzustellen, die Abstände noch weiter anzupassen und das Ding richtig responsive zu machen. Dabei habe ich allerdings so einige Probleme.

Ich nutze eine CSS Media Query im Code selbst, bei der ich die Sidebar bei einer Darstellungsbreite von weniger als 40em (ca. 600px) ausblende:

@media (max-width: 40em), (max-device-width:40em) ({
	.content-sidebar,#top_bar,.category{display:none!important;}
	#content-body{width:100%!important;}
	#wrapper{min-width:15em;width:98%!important;}
}

Wenn ich jetzt mit einem Android-Browser (Galaxy S3) auf die Seite gehe, wird die Sidebar zwar ausgeblendet, allerdings füllt der Text nur Teile des Posts aus und die Seite ist auch "verkleinert". Wie bekomme ich das richtig hin?