Wie man Responsive Design engagiert hält
Responsive Webdesign ist beliebt und es ist absolut kein Geheimnis. Das ist es, was Experten fordern und zu dem viele Marken wechseln. Es geht nicht nur darum, eine für Mobilgeräte optimierte Website zu erstellen, sondern Ihre Website für jede Browsergröße sichtbar zu machen, egal ob über Desktop, Tablet oder Smartphone.
Der schwierige Teil beim Entwerfen für Reaktionsfähigkeit ist das Erstellen einer Website, die gut aussieht, groß und klein. Sie müssen viel berücksichtigen, bevor Sie Ihr Design-Programm aufbrechen und zur Arbeit gehen. Es ist ein zusätzlicher Schritt, der sich im fertigen Produkt in der Regel lohnt. Es ist sehr offensichtlich, wenn ein Designer keine Reaktionsfähigkeit plant; Websites neigen dazu, wirklich kahl und langweilig auszusehen.
Es ist absolut unerlässlich, dass Designer ihre Kreativität auf reaktionsschnellen Websites aufrechterhalten. Mit mehr Menschen, die Tablets und Smartphones nutzen, möchten Sie sicher sein, dass jeder Ihre Website sehen kann. Hier finden Sie einige Tipps, mit denen Sie beim Design für das Responsive Web kreativ und effektiv bleiben können.
1. Verwenden Sie eine ausgezeichnete Typografie
Bei Responsive-Websites müssen Sie überlegen, was auf einem kleineren Bildschirm gut aussieht. Gute Typografie ist ein Grundbestandteil jedes guten Webdesigns, aber im responsiven Webdesign ist es fast notwendig. Wenn die Bildschirmgrößen abnehmen, sollten sich die meisten Elemente ebenfalls umwandeln und schrumpfen oder sich bewegen. In erster Linie sollte Ihre Typografie diese Fähigkeit haben.
Zweitens sollten Sie verschiedene Überschriften und verschiedene Größen im Text verwenden. Jetzt verwenden wir normalerweise sehr große Überschriften und Überschriften für unsere Desktop-Designs. Dies muss nicht vollständig eingestellt werden, weil Sie an kleinere Größen denken. Stellen Sie nur sicher, dass Sie ein Plugin verwenden, wie FitText, um die Größe Ihres Textes zu verringern. Das hilft.
Schmied verwendet viele verschiedene Schriftarten, um ein sehr interessantes Aussehen zu erzeugen. Sie variieren auch die Größe dieser Schriftarten auf der gesamten Website. Was im Desktop-Modus interessant ist, ist die Art und Weise, in der Text und Absätze in verschiedenen Spalten angeordnet sind. Wenn das Fenster verkleinert wird, wird der Text in einer Spalte zusammengefasst. Glücklicherweise bleibt der Text konsistent, indem er den gleichen Maßstab und Stil beibehält.
Smashing Magazine neigt dazu, das gleiche zu tun. Sie werden die rechte Seite des Designs (die Werbung) vollständig los, wenn das Fenster verkleinert wird. Der Text wird jedoch innerhalb des Fensters umbrochen und die Stile, Farben und Größen bleiben konsistent.
2. Verwenden Sie tolle Bilder
Bilder, wie Typografie, sind extrem wichtig für jedes Website-Design. Wenn Sie eine Website auf kleineren Bildschirmen betrachten, sollten Ihre Bilder, ähnlich wie bei der Typografie, in responsiven Designs auch kleiner oder verkleinert erscheinen. Es gibt viele verschiedene Layouts und unterschiedliche Bildgrößen, die in einem responsiven Design verwendet werden können. Es ist wichtig, auf die Bilder zu achten, die Sie auswählen und wie Sie sie verwenden, weil sie sich zweifellos ändern werden. Wenn Bildschirme größer oder kleiner werden, ändern Bilder ihre Form und zeigen bestimmte Bereiche des Bildes an oder blenden sie aus.
Im Idealfall möchten Sie sicherstellen, dass Ihre großen, fotografischen Bilder keinen grafischen Inhalt enthalten, der abgeschnitten werden kann, wenn die Größe der Fenster geändert wird. Wenn Sie grafische Bilder erstellen, müssen Sie außerdem sicherstellen, dass Sie ein Bild erstellen, das schnell geladen wird und auf einem kleineren Bildschirm angezeigt wird. Aus diesem Grund haben sich Designer für flaches Design entschieden. Es ist einfach einfacher.
Bei Pandiscio müssen Sie zuerst feststellen, wie das größere Headerbild auf einem Desktop aussieht. Es ist voll, erstreckt sich zu den Seiten und ist von hoher Qualität. Wenn Sie die Fenstergröße verkleinern, werden die Bilder kleiner, ändern ihre Form (von rechteckig zu quadratisch) und werden beschnitten. Sie haben Bilder gefunden, die gut aussehen, wenn der Bildschirm die Größe ändert.
KinHR ist eine Website, die viele verschiedene grafische Elemente sowie Fotos verwendet. Beachten Sie, dass die Header-Bilder kleiner und kleiner werden, wie auf der Pandiscio-Website. Mit den grafischen Elementen im Körper werden die Bilder jedoch kleiner, behalten jedoch ihre Form und werden nicht beschnitten.
3. Schlafen Sie nicht in der Navigation
Punkt leer, wenn die Leute keine Ahnung haben, wie Sie Ihre Website umgehen können, dann werden sie es einfach nicht tun. Navigation ist schwieriger im Umgang mit Responsive Design, da wir es gewohnt sind, Navigation für Landschaftsdesigns zu erstellen. Jetzt müssen wir eine Navigation erstellen, die leicht an die Größe des Hochformats angepasst werden kann.
Es ist kein großes Problem, wenn Sie eine Handvoll Links haben. Sie können entweder Ihr Menü im oberen Bereich verkleinern oder verdichten, oder Sie können ein Dropdown-Menü für Betrachter erstellen. Von großer Bedeutung ist, wie Sie die Navigation mit mehr Inhalt schweren Websites handhaben.
Mashable hat Tonnen von Links, weil sie Tonnen von Kategorien und noch mehr Artikel haben. Darüber hinaus haben sie eigene unternehmenszentrierte Seiten, die ebenfalls verlinkt werden müssen. Mashable beschließt, für kleinere Browser ein Popup-Menü auf der linken Seite des Bildschirms zu erstellen.
Monocle hat zwei Top-Ebenen mit umfangreicher Navigation für ihre Website. Für kleinere Browser haben sie ein Slide-Down-Menü für den größtmöglichen Inhalt erstellt und haben gerade die zweite Navigationsebene verdichtet.
4. Machen Sie es Spaß zu benutzen
Wenn Sie online auf Links klicken, müssen Sie wahrscheinlich dort sitzen und darauf warten, dass die Dinge geladen werden, bevor Sie eine Seite sehen. Bei Telefonen ist es besonders ärgerlich, den nächsten Knopf genau finden zu müssen, um mehr Inhalte zu erreichen. So etwas macht weder Spaß noch ist es intuitiv.
Wenn Sie auf die Details achten und Ihre Website intuitiver gestalten, wird Ihre Website besser geteilt. Überlegen Sie, wie es ist, eine Website in einer beliebigen Browsergröße zu verwenden. Denken Sie darüber nach, was Websites tun sollten, wenn Sie nach einer Aktion rufen. Finde diese Dinge und repariere sie, damit deine Seite einfach, lustig und intuitiv zu benutzen ist. Es macht es auch ein bisschen interessanter!
Schlamm macht ihre Website interessanter, indem sie auf ihre Übergänge achtet. Sie erzeugen ein sehr geschmeidiges Gefühl, indem sie vielen ihrer Elemente erlauben, nach unten zu rutschen und zu verschwinden, anstatt sich nur abrupt zu bewegen und aufzutauchen. Es macht eine Welt der Differenz.
Neue Yorke verwendet viel Bewegung, wenn man von einem Portfolio-Artikel zum nächsten geht. Auch hier entsteht ein sehr hochwertiges Gefühl und die Zuschauer bleiben interessiert an dem, was bald enthüllt werden wird.
5. Denken Sie über den Tellerrand hinaus
Wenn alles andere fehlschlägt, sei einfach kreativ. Responsives Webdesign ist kein Hindernis für die Art und Weise, wie wir Websites erstellen. Es gibt immer Raum, Kreativität zu nutzen, sei es durch Programmierung oder Design.
Enso hat eine Website erstellt, die so aussieht, als hätte sie keine Chance, darauf zu reagieren. Beachten Sie, wie sie das Layout ein wenig geändert haben, wenn die Größe kleiner wird, aber sie haben ihre Marke und Kreativität beibehalten.
TBWA hat eine Website mit großartigem Design. Aber sie haben auch tolle Bilder. Und sie haben auch eine großartige Typografie! Sie haben alles hier verwendet, um ein einzigartiges und interessantes responsives Webdesign zu erstellen.
Fazit
Die Pflege Ihrer Kreativität im responsiven Design oder in jedem Webdesign ist so einfach wie das Skizzieren Ihres Konzepts und die Überarbeitung, um Ihre Ziele zu halten. Das lustige Zeug passiert leichter, wenn Sie anfangen zu planen, wie Ihre Website arbeiten und funktionieren soll, anstatt damit anzufangen. Responsive Webdesign muss nicht diese große, allmächtige Aufgabe sein, vor der Designer Angst haben. Es ist ziemlich einfach! Behalten Sie all die vorherigen Dinge, die wir besprochen haben, und erstellen Sie Websites, die einfach nicht von dieser Welt sind! Viel Glück mit Ihrem responsiven Webdesign.
Welche Tipps würdest du teilen, wenn es darum geht, Responsive Design ansprechend zu halten? Hast du ein sehr kreatives responsives Design gefunden? Lassen Sie es uns in den Kommentaren wissen.