Also erstelle ich eine vollständig responsive 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 forderte eine Diashow/ein Karussell mit Bildern, die gut sichtbar auf der Homepage und möglicherweise auf allen Hauptseiten zu sehen sein sollten. Ich habe ein Layout erstellt, das funktioniert, und sie sind damit zufrieden. Sie können es hier einsehen .
Jetzt habe ich eine neue Herausforderung, wie erstelle ich eine auffällige Diashow, die auf ihr Medium anspricht und gut aussieht? lass mich erweitern..
Ich habe wenige Einschränkungen, was in diesem Fall eher belastend als erleichternd ist.
Also, was ich derzeit denke und versuche, ist:
Verwenden Sie ein Hintergrundbild mit direktem Link zum Thema und ein oder zwei interessante und relevante ClipArt-Bilder, die je nach Bildschirmgröße herumgeschwebt werden können.
Lassen Sie dann den Text mit Hilfe von Rändern/Padding 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 suche nach Ratschlägen, wie ich vorgehen sollte, wenn ich mit der Erstellung von Grafiken beauftragt bin, die auf das Medium reagieren, auf dem sie angezeigt werden.
Ursprüngliche Fragen (nicht so), die dazu relevant sind:
Wäre ein einfarbiger, einfacher Farbverlauf oder sehr glatter Hintergrund besser als ein sich wiederholendes Muster oder eines mit Details?
Wie kann ich ein sich wiederholendes Muster erstellen, das zum Thema und Design passt und für dieses relevant ist?
Wenn ich ein schwebendes Vordergrundbild verwende, denken Sie, dass es realistisch aussehen muss, wie es keine Cliparts sind?
Bessere Betrachtungsthemen:
Alle diesbezüglich relevanten Blogbeiträge, Artikel oder Berichte sind willkommen und werden sehr geschätzt.
Erst heute Morgen erschien im Smashing Magazine ein Artikel über die Fokussierung auf einen Teil eines Bildes beim Skalieren für mobile Geräte: Choosing a Responsive Image Solution (scrollen Sie nach unten zum Abschnitt „The Art Direction Problem“). Mit dem Foto der Straße auf Ihrer Website sollten Sie sicherstellen, dass beim Verkleinern die Straße und nicht die Bäume gezeigt werden, da die Straße die Idee von „Wir sind auf dem Weg“ verstärkt.
Wäre ein einfarbiger, einfacher Farbverlauf oder sehr glatter Hintergrund besser als ein sich wiederholendes Muster oder eines mit Details?
Dies hängt von den anderen Elementen auf der Seite ab. Wenn Sie Vordergrundbilder verwenden, lässt das Festhalten an einem einfarbigen Hintergrund, der nicht mit den Fotos konkurriert, das Auge auf natürliche Weise auf die Vordergrundbilder fokussieren.
Wie kann ich ein sich wiederholendes Muster erstellen, das zum Thema und Design passt und für dieses relevant ist?
Ein sich wiederholendes Muster einer Kiste würde das Konzept des Bewegens und Lagerns verstärken.
Wenn ich ein schwebendes Vordergrundbild verwende, denken Sie, dass es realistisch aussehen muss, wie es keine Cliparts sind?
ClipArt kann knifflig sein. Es gibt einige gut gestaltete Vektorgrafiken und Rasterillustrationen, die sich als Clipart qualifizieren würden, aber dennoch geschmackvoll gemacht sind. Wenn Sie eines im SVG-Format verwenden, würde es auf Retina-Anzeigegeräten gut skalieren. Stellen Sie einfach sicher, dass das Bild, das Sie auswählen, gut ist und mit der Stimmung übereinstimmt, die Sie erzeugen. Ich kann mir eine schöne Zeichnung von Kästen vorstellen, die gut aussehen würde, 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.
Aus gestalterischer Sicht (ich kenne die technische Seite), unter welchen Bedingungen kann ich entscheiden, wie ich den Text vergrößern/verkleinern und trotzdem gut aussehen soll? dh. Soll der Text nicht größer als eine bestimmte Größe sein, abhängig von der Breite seines Containers?
Für Ihre drei horizontalen Textblöcke würde ich sie so dimensionieren und auffüllen, dass Sie 4-5 Wörter pro Zeile haben. Wenn Sie auf mobile Größen oder wirklich schmale Fenster herunterkommen, würde ich die Anzeige auf Block ändern, sodass jeder Textblock eine eigene Zeile einnimmt.
Sehen Sie sich diese Artikel an:
Welche Art von Bildern eignet sich am besten für einen Hintergrund mit stark variierender Breite? Meine Vermutung sind Bilder, die einen einzigen interessanten Ankerpunkt mit einigen unwichtigen Details im Rest des Bildes haben
Ich stimme zu. Fotos, bei denen der Fokus auf einem Bereich liegt und der Rest des Hintergrunds weniger hervorsticht oder verschwommen ist (Fotografen nennen diese Unschärfe „Bokeh“), würden hier gut funktionieren. Siehe auch das Baumfoto im Smashing-Magazinartikel, 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, Wrapping und irgendetwas anderes?)
Die Bilder sollen den Text verstärken. Der Text ist der wichtigste Faktor, daher sollten Sie sicherstellen, dass die Bilder unterstützend platziert werden. Text sollte hervorstechen, aber nicht den wichtigen Teil des Bildes blockieren.
Nähe ist der Schlüssel. Text sollte nah am Bild und weiter von anderen Bildern entfernt sein. Wenn Sie Bild 1 mit 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 von Bild 1 und dem oberen Rand von Bild 2 haben als Sie. d haben zwischen Bild 1 und seiner Beschriftung.
Ein großartiges Buch zu diesem Thema ist The Non-Designer's Design Book
Sehen Sie sich auch das Apple Developer's Guide on Interaction Princples: Human Interface Principles an . Hier sind viele gute Sachen drin.
Die Optionen scheinen einfach.
background-size:Eigenschaft, um jedes Hintergrundbild dynamisch zu ändernoverflow: hidden;Eigenschaft, um größere Bilder einfach innerhalb eines div auszublenden, wenn die Seitenbreite abnimmt. Dies würde erfordern, dass Sie im Hinterkopf behalten, was bei verschiedenen Seitenbreiten sichtbar ist.Die Fragen, die Sie stellen, sind etwas zweideutig .... aber ....
Wäre ein einfarbiger, einfacher Farbverlauf oder sehr glatter Hintergrund besser als ein sich wiederholendes Muster oder eines mit Details?
Sehr abhängig vom Muster. Wenn es sich um ein subtiles Muster handelt, das visuell nicht mit dem Text darüber konkurriert, kann ein Muster funktionieren. Ich würde jedoch zu einer Volltonfarbe oder einem subtilen Farbverlauf tendieren. Einfache Farbe macht den Text besser lesbar.
Wie kann ich ein sich wiederholendes Muster erstellen, das zum Thema und Design passt und für dieses relevant ist?
Das ist Ihr Anruf. Bitten Sie andere, etwas für Sie zu entwerfen?
Wenn ich ein schwebendes Vordergrundbild verwende, denken Sie, dass es realistisch aussehen muss, wie es keine Cliparts sind?
Auch das ist zwischen Ihnen und dem Kunden. Die "Stimmung" oder "Botschaft", die von der Website übermittelt werden soll, bestimmt den Stil der zu verwendenden Bilder.
Aus gestalterischer Sicht (ich kenne die technische Seite), unter welchen Bedingungen kann ich entscheiden, wie ich den Text vergrößern/verkleinern und trotzdem gut aussehen soll? dh. Soll der Text nicht größer als eine bestimmte Größe sein, abhängig von der Breite seines Containers?
Konsistenz ist am besten für das Design. Konsistenz verleiht einen Eindruck von Stabilität. Wenn der erste Textblock eine einzelne Textzeile ist, würde ich versuchen, für alle nachfolgenden Textblöcke bei einer einzelnen Textzeile zu bleiben. Die Breite kann sich ein wenig ändern, aber das Verschieben von einer einzelnen Textzeile zu mehreren Textzeilen erfordert das Verschieben von Elementen. Wenn sich die Elemente bewegen, verlierst du das Gefühl der Beständigkeit.
Mittels CSS3 Media Queries können wir Bilder Responsive 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
Erich
Erich