Versuch, das Layout einer Homepage zu korrigieren

Ich versuche, ein kastenartiges Design für meine Homepage/FAQ auszuführen. Aber im Moment lassen die Boxen die Seite einfach schrecklich aussehen. Könnte mir bitte jemand einige Beispielseiten anbieten, die Kästchen/Blöcke für Informationen verwenden, oder mir andere Farbpaletten vorschlagen, die ich verwenden kann?

Ich programmiere hauptsächlich, also bin ich nicht sehr stark im visuellen Design selbst.

Hier ist ein Screenshot und eine URL zur Homepage. (dies bezieht sich NUR auf die Homepage, keine anderen Seiten)

Danke schön!

URL: aawebapps (Beachten Sie, dass die Schaltflächen das Feld aufgrund von erhöhtem/verringertem Text pro FAQ erweitern)

Geben Sie hier die Bildbeschreibung ein

Ich fürchte, diese Frage könnte geschlossen werden, da sie sehr meinungsbasiert ist. Ein paar Dinge aber: Wie hast du das gebaut? Alles ist in viele Tabellen verpackt und das ist kein guter Weg, um moderne Websites zu erstellen. Es lädt auch sehr langsam. Außerdem kann ich Kuler für die Suche nach Farbpaletten sehr empfehlen .
@burnso ja, ich war mir nicht sicher, wo ich diese Frage sonst stellen sollte. Es steht in Tabellen einfach für bootstrapdas Nutzungsalter, aber dies kann jederzeit geändert werden. Ich versuche nur, etwas zu finden, das Boxen verwendet, ohne dass alles umständlich aussieht. Danke für den Link, werde ich mir mal ansehen.
Ich verstehe. Sie können es auf www.reddit.com/r/design_critiques posten. Die Community hat ihre Fehler, aber meistens bekommt man anständige Kritik.
@burnso Okay, das mache ich vielleicht später, da ich sicher bin, dass dort auch alle möglichen Leute lauern, um Websites zu zerstören, also bin ich skeptisch, eine öffentliche URL zu posten, aber wird ein Bild für sie ausreichen, denkst du?
@Austin Fügen Sie Ihrer Frage das Tag "Kritik" hinzu. Sie werden auf diese Weise den relevanten Personen ausgesetzt.
@Austin Sicher, wenn Sie den Link zur Website per PM anbieten. Die Kritiken könnten sonst nicht so wertvoll sein.

Antworten (1)

Zunächst einmal würde ich sagen, dass Sie sich im Zweifelsfall an das KISS-Prinzip (Keep it simple stupid) halten sollten. Sie müssen viel Text abdecken, und die ausgefallene Seite lässt sie schrecklich aussehen. Außerdem ist Ihr Text zu groß zum Lesen.

Was Sie wollen, ist eine Gird-basierte Website. Es gibt viele Vorlagen (sowohl kostenlose als auch kostenpflichtige), die Sie sich ansehen können. Hier sind zwei Beispiele dafür:

RichGRID M5 Theme ,
30 Andere Grid-Style-Vorlagen und wenn Sie ein laufendes Beispiel wollen, gibt es Cracked

Da Sie Programmierer sind, geht es mir in erster Linie darum, Ihr Problem zu lösen, anstatt Ihnen die Grundprinzipien des Website-Designs aufzuzeigen. Hier ist eine Möglichkeit, dies zu tun (Laden Sie das Bild herunter, ich habe dort einige andere nützliche Tipps für Sie eingefügt)

Ein besserer Gridstyle für Ihre Website

1) Sie haben zwei Menüs, eines primär und das andere sekundär. Schieben Sie das Logo von der Mitte nach ganz links .

2) Sie müssen entscheiden, wie viele Spalten Sie bei voller Auflösung der Website anzeigen möchten (zum Beispiel habe ich 3 gemacht), bei niedrigeren Auflösungen/Mobilgeräten reduzieren Sie sie entsprechend auf zwei oder eine Spalte. Unterteilen Sie die Seite entsprechend dieser Spalten und verwenden Sie eine Standardeinheit für den Abstand, z. B. 25 Pixel usw.

Hier ist ein Schnappschuss der Seite mit Richtlinien:Schnappschuss mit Richtlinien

3) Folgen Sie einem anderen erfolgreichen Blog, um zu sehen, wie sie die verschiedenen Schriftgrößen für verschiedene Überschriftentypen verwenden . Ich werde TechCrunch dafür empfehlen. Ihre Textgrößen sind viel größer als sie sein sollten.

4) Ersetzen Sie den Hintergrund durch einen monotonen oder einen sehr subtilen . die sich genug von Ihren Boxen abhebt. Es ist zu chaotisch zu lesen.

5) Halten Sie die primäre und sekundäre Navigation leicht unterscheidbar und leicht zu finden . In meinem Design habe ich möglicherweise Ihre primäre Navigation mit Ihrer sekundären vertauscht, aber mein Punkt ist, dass beide unterschiedlich bleiben, geben Sie der primären Bedeutung.

Und schließlich, wenn Sie jemals mit einem Problem bei der Gestaltung einer Website konfrontiert sind und keine Erfahrung damit haben. Die Verwendung bereits verfügbarer Vorlagen ist der richtige Weg.

@Simaar_Charms Vielen Dank! Ich schaue mir das heute Abend/morgen genau an und melde mich wieder. :)
Ein paar Fragen, aber zuerst vielen Dank, das ist sehr schön und informativ! Frage 1. Wir versuchen, das Thema und Layout des Spiels leicht nachzuahmen, um die Dinge vertraut und verständlich zu halten, weshalb das Logo über den Schaltflächen schwebt und zentriert ist. Das sekundäre Navigationsmenü ist einfach mein Versuch, Informationen zu "komprimieren". Jede Schaltfläche nur AJAX aktualisiert den Text, also habe ich nur versucht, die Seite damit kleiner/komprimiert zu machen, es ist nicht wirklich eine zweite Navigationsleiste. Wenn Sie das wissen, würden Sie die Navigationsleiste trotzdem so ändern? Überprüfen Sie die Website und sehen Sie, wie diese BTNs funktionieren.
Frage 2: Leider "denke" ich aufgrund von Twitter-Widgets, die automatisch erstellt werden, dass die Höhe/Breite in diesem langen vertikalen Streifen gesperrt ist, wenn ich das CSS nicht zwingen kann, es kleiner zu machen, wohin sollte das gehen? Das sind bisher meine beiden Hauptfragen. Außerdem ist dies ein Webdeploy, was bedeutet, dass das erste Laden eine Sekunde dauert, aber dann sollte die Anwendung für Sie geladen werden.
@Austin Ja, du solltest immer noch das sekundäre Navigationsmenü behalten, was du getan hast, ist kein Standard. Diese Felder sind für eine einzelne Art von Informationen gedacht und nicht als Miniseite. Zweitens hilft Condensing nicht, wenn es am Ende zur Verwirrung für den Benutzer beiträgt. Was Frage zwei betrifft, schieben Sie sie ganz nach rechts unten und lassen Sie sie den Platz einnehmen, den sie benötigen. Auf diese Weise sieht der Rest der Seite symmetrisch aus.
Versuch, das Layout einer Homepage zu korrigieren
AntwortenHierDatenschutz-Bestimmungen1y, 0v