Tipps zum Erstellen einer flüssigen und reaktionsschnellen Grafik

Ich erstelle eine vollständig reaktionsschnelle Website mit dem Ziel, so wenig Medienabfragen und magische Zahlen wie möglich zu verwenden. Ich habe nach einer Reihe von Versuchen festgestellt, dass die Verwendung des Inhalts zum Erstellen des Layouts bei weitem die beste Vorgehensweise ist.

Mein Kunde hat eine Diashow / ein Karussell angefordert, die auf der Homepage und möglicherweise auf allen Hauptseiten gut sichtbar ist. Ich habe ein Layout erstellt, das funktioniert und mit dem sie zufrieden sind. Sie können es hier ansehen .

Jetzt habe ich eine neue Herausforderung: Wie erstelle ich eine auffällige Diashow, die auf das Medium reagiert und gut aussieht? Lassen Sie mich erweitern ..

Ich habe nur wenige Einschränkungen, was in diesem Fall eher eine Belastung als eine Erleichterung ist.

• Das Bild muss 400px hoch sein.
• Die Breite kann zwischen 300px und 2000px liegen.
• Ich kann je nach Detail einige Ebenen erstellen, die von der Webseite selbst verschoben werden können, um auf die Bildschirmgröße zu reagieren.
• Die Bilder und das Design bleiben wahrscheinlich lange Zeit gleich, während sich der Text ziemlich oft ändert.

Was ich gerade denke und versuche, ist:

Verwenden Sie ein Hintergrundbild mit einem direkten Link zum Motiv und ein oder zwei interessante und relevante Bilder vom Typ ClipArt, die je nach Bildschirmgröße verschoben werden können.

Lassen Sie dann den Text mithilfe von Rändern / Auffüllungen und Medienabfragen sich selbst positionieren.

Zum Zeitpunkt dieser Bearbeitung habe ich die einfache, sichere und langweilige Option gewählt, indem ich breite, offensichtliche Fotos verwendet habe.

Ich bin auf der Suche nach Ratschlägen für die Vorgehensweise bei der Erstellung von Grafiken, die auf das Medium reagieren, auf dem sie angezeigt werden.

Ursprüngliche Fragen (nicht so), die dafür relevant sind:

Wäre eine Farbe, ein einfacher Farbverlauf oder ein sehr glatter Hintergrund besser als ein sich wiederholendes Muster oder ein Muster mit Details?

Wie kann ich ein sich wiederholendes Muster erstellen, das mit dem Thema und dem Design funktioniert und für dieses relevant ist?

Wenn ich ein schwebbares Vordergrundbild verwende, muss es Ihrer Meinung nach realistisch aussehen, wie in nicht ClipArt?

Bessere Themen:

• Welche Bedingungen kann ich aus gestalterischer Sicht (ich kenne die technische Seite) verwenden, um zu entscheiden, wie der Text vergrößert / verkleinert werden soll, und trotzdem gut aussehen? dh. Sollte der Text je nach Breite des Containers nicht größer als eine bestimmte Größe sein?
• Welche Art von Bildern eignet sich am besten für einen Hintergrund mit sehr unterschiedlicher Breite? Meine Vermutung sind Bilder, die einen einzigen Ankerpunkt von Interesse mit unwichtigen Details im Rest des Bildes haben
• Was sind die wichtigsten Dinge, die in Bezug auf die nicht fixierte / schwebende Natur von Vordergrundbildern und Text zu beachten sind? (Leerraum, Verpackung und sonst noch etwas?)

Alle diesbezüglichen Blog-Beiträge, Artikel oder Berichte sind willkommen und werden sehr geschätzt.

Erst heute Morgen veröffentlichte das Smashing Magazine einen Artikel über die Fokussierung auf einen Teil eines Bildes bei der Skalierung für mobile Geräte: Auswahl einer Responsive Image-Lösung (scrollen Sie nach unten zum Abschnitt "The Art Direction Problem"). Mit dem Foto der Straße auf Ihrer Website möchten Sie sicherstellen, dass die Straße im Gegensatz zu den Bäumen beim Verkleinern angezeigt wird, da die Straße die Idee "Wir sind auf dem Weg" verstärkt.

Wäre eine Farbe, ein einfacher Farbverlauf oder ein sehr glatter Hintergrund besser als ein sich wiederholendes Muster oder ein Muster mit Details?

Dies hängt von den anderen Elementen auf der Seite ab. Wenn Sie Vordergrundbilder verwenden und sich an einen einfarbigen Hintergrund halten, der nicht mit den Fotos konkurriert, kann sich das Auge auf natürliche Weise auf die Vordergrundbilder konzentrieren.

Wie kann ich ein sich wiederholendes Muster erstellen, das mit dem Thema und dem Design funktioniert und für dieses relevant ist?

Ein sich wiederholendes Muster einer Box würde das Konzept des Umzugs und der Lagerung verstärken.

Wenn ich ein schwebbares Vordergrundbild verwende, muss es Ihrer Meinung nach realistisch aussehen, wie in nicht ClipArt?

ClipArt kann schwierig sein. Es gibt einige gut gestaltete Vektorbilder und Rastorillustrationen, die sich als ClipArt qualifizieren würden, aber dennoch geschmackvoll erstellt wurden. Wenn Sie eines im SVG-Format verwenden, lässt es sich gut auf Retina-Anzeigegeräten skalieren. Stellen Sie einfach sicher, dass das ausgewählte Bild gut ist und mit der Stimmung übereinstimmt, die Sie erstellen. Ich kann mir eine schöne Zeichnung von Kisten vorstellen, die gut aussehen würden, aber ich kann mir auch Cliparts von schlechter Qualität vorstellen, die schlecht aussehen würden. Wenn Sie sich nicht sicher sind, sind Fotos normalerweise eine sichere Wahl.

Welche Bedingungen kann ich aus gestalterischer Sicht (ich kenne die technische Seite) verwenden, um zu entscheiden, wie der Text vergrößert / verkleinert werden soll, und trotzdem gut aussehen? dh. Sollte der Text je nach Breite des Containers nicht größer als eine bestimmte Größe sein?

Für Ihre drei horizontalen Textblöcke würde ich sie so bemessen und auffüllen, dass Sie 4-5 Wörter pro Zeile haben. Wenn Sie sich für mobile Größen oder sehr enge Fenster entscheiden, würde ich die Anzeige so ändern, dass sie blockiert, sodass jeder Textblock eine eigene Zeile einnimmt.

Schauen Sie sich diese Artikel an:

• 10 Prinzipien für lesbare Web-Typografie
• Fünf einfache Schritte zu einer besseren Typografie

Welche Art von Bildern eignet sich am besten für einen Hintergrund mit sehr unterschiedlicher Breite? Meine Vermutung sind Bilder, die einen einzigen Ankerpunkt von Interesse mit unwichtigen Details im Rest des Bildes haben

Genau. Fotos mit dem Fokus auf einen Bereich, wobei der Rest des Hintergrunds weniger hervorgehoben oder unscharf ist (Fotografen nennen diese Unschärfe "Bokeh"), würden hier gut funktionieren. Siehe auch das Baumfoto im Artikel des Smashing-Magazins, den ich oben verlinkt habe.

Was sind die wichtigsten Dinge, die in Bezug auf die nicht fixierte / schwebende Natur von Vordergrundbildern und Text zu beachten sind? (Leerraum, Verpackung und sonst noch etwas?)

Die Bilder dienen dazu, den Text zu verstärken. Der Text ist der wichtigste Faktor, daher möchten Sie sicherstellen, dass die Bilder unterstützend platziert werden. Text sollte hervorgehoben sein, aber den wichtigen Teil des Bildes nicht blockieren.

Nähe ist der Schlüssel. Der Text sollte sich in der Nähe des Bildes und weiter von anderen Bildern entfernt befinden. Wenn Sie Bild 1 mit etwas Text darunter haben, möchten Sie weniger Platz zwischen dem Bild und dem unterstützenden Text haben als zwischen diesem Text und dem nächsten Bild. Nehmen wir zum Beispiel an, Sie haben Bild 1 mit Text darunter, dann Bild 2 darunter und mehr Text unter Bild 2. Sie möchten mehr Leerraum zwischen der Beschriftung für Bild 1 und dem oberen Rand von Bild 2 als Sie. ' d haben zwischen Bild 1 und seiner Beschriftung.

Ein großartiges Buch zu diesem Thema ist The Non-Designer's Design Book

Lesen Sie auch das Apple-Entwicklerhandbuch zu Interaktionsprinzipien: Prinzipien der Benutzeroberfläche . Viele gute Sachen hier.

Die Optionen scheinen unkompliziert zu sein.

• Verwenden Sie mehrere Bildgrößen, die jeweils über Medienabfragen aufgerufen werden, um den 4 grundlegenden Bildschirmgrößen zu entsprechen.
• Verwenden Sie die background-size:Eigenschaft, um ein Hintergrundbild dynamisch zu ändern
• Verwenden Sie die overflow: hidden;Eigenschaft, um größere Bilder in einem Div einfach auszublenden, wenn die Seitenbreite abnimmt. Dies würde erfordern, dass Sie berücksichtigen, was bei verschiedenen Seitenbreiten sichtbar ist.

Die Fragen, die Sie stellen, sind etwas mehrdeutig .... aber ....

Wäre eine Farbe, ein einfacher Farbverlauf oder ein sehr glatter Hintergrund besser als ein sich wiederholendes Muster oder ein Muster mit Details?

Stark abhängig vom Muster. Wenn es sich um ein subtiles Muster handelt, das nicht visuell mit dem darüber liegenden Text konkurriert, funktioniert möglicherweise ein Muster. Ich würde mich jedoch zu einer festen Farbe oder einem subtilen Farbverlauf neigen. Einfache Farben machen den Text besser lesbar.

Wie kann ich ein sich wiederholendes Muster erstellen, das mit dem Thema und dem Design funktioniert und für dieses relevant ist?

Das ist dein Anruf. Bitten Sie andere, etwas für Sie zu entwerfen?

Wenn ich ein schwebbares Vordergrundbild verwende, muss es Ihrer Meinung nach realistisch aussehen, wie in nicht ClipArt?

Auch das ist zwischen Ihnen und dem Kunden. Die von der Website zu übermittelnde "Stimmung" oder "Nachricht" würde den Stil der zu verwendenden Bilder bestimmen.

Welche Bedingungen kann ich aus gestalterischer Sicht (ich kenne die technische Seite) verwenden, um zu entscheiden, wie der Text vergrößert / verkleinert werden soll, und trotzdem gut aussehen? dh. Sollte der Text je nach Breite des Containers nicht größer als eine bestimmte Größe sein?

Konsistenz ist am besten für das Design. Konsistenz vermittelt einen Eindruck von Stabilität. Wenn der erste Textblock eine einzelne Textzeile ist, würde ich versuchen, mich für alle nachfolgenden Textblöcke an eine einzelne Textzeile zu halten. Die Breite kann sich etwas ändern, aber das Verschieben von einer einzelnen Textzeile zu mehreren Textzeilen erfordert das Verschieben von Elementen. Wenn sich die Elemente bewegen, verlieren Sie das Gefühl der Konsistenz.

Mit CSS3-Medienabfragen können wir Bilder reaktionsschnell machen.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Wenn Sie weitere Erklärungen wünschen, überprüfen Sie bitte diesen Link, http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries