Responsive Landing Pages für 10 Kiefer
"Responsive" ist die neueste Bewegung in der Web-Entwicklung - und diese wird dringend benötigt. Jeden Tag wächst die Anzahl der Geräte, Plattformen und Browser, die für den Zugriff auf das Internet verwendet werden. Und während die Mehrheit der Nutzer noch immer auf herkömmlichen Plattformen auf das Internet zugreifen, ist die Nachfrage nach flüssigen und adaptiven Websites stärker denn je.
Viele Designer nehmen diese Änderung zu Herzen und kreieren einige spektakuläre Stücke, die in mobilen, Tablet- und Desktopumgebungen gedeihen.
Die folgenden Websites verschmelzen Schönheit mit responsiven Webdesign-Techniken und zeigen wirklich, was mit ein wenig Innovation erreicht werden kann. Also schnapp dir Popcorn und einen Notizblock, du wirst aufpassen müssen.
StephenCaver.com
Wenn Sie öffnen Diese Seite Auf Ihrem Desktop ist es sofort faszinierend. Die kühne, schwarze, begründete Überschrift kontrastiert wunderbar mit der fast aquarellartigen Qualität des Hintergrunds der Mojave-Wüste. Wenn sich diese Website an die mobile Größe anpasst, ist die Änderung signifikant und die Website sieht immer noch gut aus.
FoodSense.is
Mit seinem breiten Layout, den klaren Linien und der einfachen Struktur Diese Seite ist ein fantastisches Beispiel für minimalistisches Webdesign. Bei der Betrachtung auf einem Tablet oder Handy passt es sich an, ohne Kompromisse bei der Zusammensetzung oder dem Fluss einzugehen.
Warface.de
Die Verwendung von Farbe ist auffällig und die innovative Platzierung der 3D-Figuren im Vordergrund der Website beschäftigt den Betrachter wirklich. Der Standort ist einzigartig und aufregend, und keine der Auswirkungen ist auf dem Handy verloren.
DanielVane.com
Auch hier lässt der Designer seine Arbeit für sich sprechen. Die Zielseite ist in seiner ganzen Schlichtheit schön, und dies überträgt sich perfekt auf das Mobile und hinterlässt eine besonders fesselnde Illustration, die ein subtiles Logo enthält.
SasquatchFestival.com
Diese Seite ist lustig und verspielt und einzigartig unter den anderen Websites auf dieser Liste. Sie verzichten auf schlichte Einfachheit, um Spaß an Farbe, Bildern und Symbolen zu haben, die immer noch stilsicher sind. Dies kann auf kleinem Raum schwierig sein, aber die Designer von Sasquatch schaffen es mühelos.
GravitateDesign.com
Die Verwendung von Form in Diese Seite fällt sofort auf. Indem sie die Verwendung von Rahmen und Inhaltsboxen vermieden haben, ist es ihnen gelungen, eine Website zu schaffen, die ihre Arbeit von ihrer besten Seite zeigt.
VisualSupply.co
Ähnlich wie bei Warspace ist es die Bildsprache, die wirklich funktioniert Diese Internetseite . Es ist perfekt strukturiert und sieht auf jedem Gerät wunderschön aus.
StudioMds.co.
Dunkle Farben können im Webdesign manchmal übersehen werden, aber Studio Mds verbessern Sie ihren Inhalt mit ihrer kühnen Entscheidung. Das Layout passt sich an eine kleinere Bildschirmgröße an und verliert nichts als überflüssige Links.
ForefathersGroup.com
Diese Seite hat ein tolles, Vintage-Gefühl und nutzt Textur, Bilder und Schrift, um das zu schaffen. Es fällt schön herunter (aber es ist eine Schande, diesen Affen zu verlieren).
MapBox.com
Das Farbschema und die Verwendung von Fotos geben Mapbox ein sauberer Raum, um ihr Produkt zu präsentieren. Auch hier gewinnt Einfachheit durch komplexes oder pingeliges Design, und genau deshalb funktioniert es auf einem kleineren Bildschirm.
Dinge zu berücksichtigen, wie Sie entwerfen
Nun, da Sie sich einige reaktionsschnelle Websites angesehen haben, möchten Sie wahrscheinlich mit der Gestaltung Ihrer eigenen beginnen. Aber bevor Sie weglaufen, hier sind ein paar Dinge zu erinnern.
Fotos
Ein Hindernis für Responsive Design ist, wie Geräte Fotos anzeigen. Ein MacBook Pro mit einem Retina-Display wird ein Bild mit einer viel höheren Auflösung als ein Mobiltelefon rendern, was oft Probleme verursachen kann. Eine Möglichkeit, dieses Problem zu umgehen, besteht darin, sowohl hochaufgelöste als auch niedrig auflösende Kopien Ihrer Fotos hochzuladen. Mithilfe von CSS können Sie anhand der Bildschirmauflösung des Geräts bestimmen, welches Bild geladen wird. Wenn Sie Stock-Fotos verwenden, stellen Sie sicher, dass Sie für die höhere rez-Option protzen.
Haltepunkte bestimmen
Häufig werden responsive Designs um so genannte "Breakpoints" - oder die Auflösung, mit der sich das Layout ändert - basierend auf den üblichen Bildschirmgrößen der Geräte erstellt. Das Problem bei diesem Ansatz ist jedoch, dass nicht berücksichtigt wird, wie unterschiedlich die Bildschirmgrößen wirklich sind. Es gibt keine "universelle" Größe mehr. Anstatt Breakpoints bei 360px (mobil), 768px (Tablet) und 1024px (Desktop) vorzugeben, ist es besser, wenn Sie Ihren Entwurf für sich selbst sprechen lassen. Beginnen Sie mit einem fertigen Layout und ändern Sie die Größe Ihres Fensters, bis das Design bricht - machen Sie dies zu einem Ihrer Breakpoints und fahren Sie dann fort. Sie werden feststellen, dass Ihre Website viel reibungsloser abläuft.
Bist du auf eine fantastische responsive Landingpage gestoßen? Haben Sie selbst eines gestaltet? Lassen Sie es uns in den Kommentaren wissen.