7 einzigartige Designentscheidungen
Ich suche immer nach Inspiration, nach großartigem Design, das Konventionen herausfordert. In diesem Beitrag geht es um einzigartige Layout-Lösungen. das heißt, ich werde über acht verschiedene Websites sprechen, die auf eine einzigartige Weise etwas Typisches präsentieren. Wir gehen auf einzigartige Layout-Lösungen ein, von der Präsentation von Produkten bis zur Einbindung persönlicher und menschlicher Elemente in eine Website.
1. Harvard erfindet das berüchtigte Karussell neu
Harvard School of Design Website hat eine einzigartige Art der Navigation. Wenn Sie zum ersten Mal auf der Homepage landen, wird die Navigation visuell angezeigt. Natürlich ist hier nicht jeder einzelne Link vertreten, sondern nur einige wenige. Viele Websites haben die Verknüpfung mit den wichtigeren Seiten im Header der Homepage übernommen. das hat uns zum Beispiel Karusselle gebracht. Aber ich muss noch eine andere Website sehen, die es auf diese Weise präsentiert. Die Navigation ist zwar klein, aber sie ist vorne und in der Mitte. Noch wichtiger, es sieht so aus, als ob es dorthin gehört. Es ist außergewöhnlich ausgeführt.
Die Bilder links überlappen sich, aber Sie können immer noch sehen, wie viele da sind. Es gibt eine klare Beziehung zwischen dem Bild und den Titeln auf der linken Seite. Die Bilder rotieren in Relation zu den Elementen auf der linken Seite. Zu jedem Zeitpunkt wissen Sie jedoch, welche Informationen für Sie verfügbar sind. Es ist, als ob Harvard's School of Design eine verbesserte Version dessen geschaffen hätte, was das Karussell eigentlich hätte sein sollen. Bei dieser Designlösung wird nicht nur die Benutzerfreundlichkeit ernst genommen, sondern auch das Layout. Beide Faktoren zusammen ergeben ein fantastisches visuelles Design.
2. Tra geht vom Netz
Das ist offensichtlich Tra Die Website verwendet ein nicht-traditionelles Layout. Die Website ist insgesamt minimal. Sie verwenden auch ein umgekehrtes Farbschema, bei dem der Hintergrund schwarz und der Text weiß ist. Das Farbschema ist sicherlich ein Wow-Faktor. Es handelt sich jedoch um das Layout von Tras Website. Fangen wir mit der Homepage an: Auf der Homepage gibt es ein paar Textstellen, die meisten überlappen das Hintergrundbild zumindest etwas, bis auf die Absatzkopie aus dem Abschnitt "Wir kennen Leute". Die Kopie ist speziell ausgerichtet, um außerhalb des Bildes zu sein. Es ist anders, es ist einzigartig, es ist spürbar.
Auf der About-Seite gibt es ein bisschen mehr Ordnung und Verwendung eines Rasters. Aber das Raster ist immer noch unregelmäßig. Es scheint, als ob jeder Abschnitt der About-Seite sein eigenes Raster hat. Was mich an dieser Seite am meisten gefesselt hat, ist das abgeschnittene Bild oben links auf der Webseite. Es passt einfach nicht in irgendetwas. Das macht mich natürlich neugierig. Es stellt sich heraus, dass das Bild eine Galerie ist - Sie müssen darauf klicken, um die Bilder zu öffnen. Das ist eine ziemlich clevere Möglichkeit, ein Layout zu nutzen. Menschen, die sich um Nachforschungen bemühen, werden mit einer Reihe von Bildern belohnt. Die Leute, die sich nicht darum kümmern, verlieren nicht so viel. Es ist ein lustiges Osterei.
3. Scrollbare Schuhfotos innerhalb einer festen Seite
Dieses Beispiel einer einzigartigen Layoutlösung dreht sich um einen Online-Schuhhändler. Feit Die Produktseite ist einfach genial. Zuallererst nutzt das Design die volle Breite und Höhe des Bildschirms. Das bedeutet, dass jeder Bereich des Bildschirms mit einem bestimmten Zweck gekennzeichnet wurde. Zweitens ist die Website einfach, minimal und sauber. Das bedeutet, dass, obwohl das Design den ganzen Bildschirm verwendet, es nicht unordentlich ist. Das ist eine sehr gute Sache, da viel Design auf Leerzeichen angewiesen ist, um für eine saubere und leicht aussehende Website zu sorgen.
Was mich an dieser speziellen Produktseite am meisten beeindruckt hat, ist die Aufteilung des Layouts. Die Seite ist speziell in drei verschiedene Bereiche unterteilt. Zuerst gibt es die Navigation auf der linken Seite. Es ist ziemlich Standard und nichts Besonderes. Dann gibt es die rechte Seite mit den Produktdetails. Sowohl die Navigation auf der linken Seite als auch der Detailbereich sind auf dem Bildschirm fixiert. Aber der letzte Abschnitt, der mittlere Fotoabschnitt, ist mit scrollbaren Fotos gefüllt. Ich denke, es ist eine brillante Lösung, weil es nicht die häufigste Lösung ist.
Oft ist es Zeit, wenn es eine große Liste von Produktfotos gibt, bleiben die Informationen darüber zurück. Hier, während ich nach unten scrolle, sehe ich immer noch die Beschreibung und den Namen des Produkts. Ich sehe immer noch die verschiedenen Farben und kann auf weitere Informationen wie Details des Materials zugreifen, ohne dass ich auf und ab blättern muss. Insgesamt ist dies eine nahtlose Erfahrung für einen potenziellen Kunden.
4. Zeigen Sie mehrere Seiten eines Produkts auf einen Blick
Hier haben wir eine andere Produktseite und eine andere Möglichkeit, ein Produkt anzuzeigen. Okay, gut, wir haben auch noch ein anderes Schuhbeispiel! Afura Die Website hat auch eine einzigartige Anzeigemethode. Diesmal werden die Schuhe in mehreren verschiedenen Einstellungen über der Seite gezeigt. Es ist tatsächlich Teil eines Karussell-UI-Elements. Die Benutzerfreundlichkeit ist jedoch kein großes Problem. Für den Anfang werden standardmäßig drei Bilder auf den Bildschirmgrößen eines Desktops oder Laptops angezeigt. Die Standardbilder haben alle den gleichen Hintergrund, was eine schöne und nahtlose Darstellung ermöglicht. Wenn ein Benutzer nicht erkennt, dass die Bilder Teil eines Karussells sind, sehen sie mindestens drei verschiedene Bilder des Produkts auf ihren Computern. Bei kleineren Bildschirmgrößen wie Tablets werden standardmäßig zwei Bilder gleichzeitig angezeigt. das ist immer noch ziemlich gut. Alles in allem ist die Darstellung der Schuhprodukte hier eine einzigartige Designlösung.
5. Opendoor zeigt ihre Menschen
Ich für meinen Teil glaube, dass das Web ein unpersönlicher Ort ist, wo wir normalerweise nicht den Menschen sehen; die echten Menschen hinter Apps, Produkten, Firmen und so weiter. Ich habe immer versucht, ein menschliches Element in meine Entwürfe einzubeziehen. Ich kann sehen, dass Offene Tür möchte genau dasselbe machen. Auf ihrer Homepage, etwa auf halber Strecke, befindet sich ein Abschnitt mit dem Titel "Wir haben deinen Rücken." Er soll erklären, dass hinter der Firma Opendoor echte Menschen stehen, die ihren Kunden auf Schritt und Tritt zur Seite stehen. Jetzt hätte Opendoor es einfach dort stehen lassen können, stattdessen haben sie ein großes Foto von einem ihrer Angestellten gemacht.
Dieser Abschnitt enthält sehr wenig Text. Stattdessen sind das Foto und das Gesicht der größte Teil des Abschnitts. Ich würde sogar sagen, dass das Foto den Abschnitt zu 100% positiv überragt. Wenn das Foto ein Thumbnail oder ein Avatar gewesen wäre, würde der Effekt nicht einmal existieren. Wenn das Foto ein mittelgroßes Quadrat (etwa 300 x 300 Pixel) direkt neben der Kopie gewesen wäre, wäre der Effekt nicht der gleiche. Die Entscheidung, ein so großes Bild von Marks freundlichem Gesicht zu verwenden, war ein guter Ruf; Diese Designentscheidung liefert nicht nur ein menschliches und personalisiertes Designelement, sondern auch ein kreatives. Ohne dieses Foto gäbe es keine persönlichen Auswirkungen auf den Benutzer. Ohne dieses spezifische Layout hätte dieser Abschnitt eine ganz andere emotionale Wirkung.
6. UX Flow zeigt ein wenig Animation kann einen langen Weg gehen
Dieses nächste Beispiel einer einzigartigen Layout-Lösung hat mit Animation zu tun. Wenn Sie sich die Homepage von UX-Fluss Wenn du ein wenig nach unten scrollst, merkst du vielleicht, dass einer der Hintergründe des Bereichs animiert. Es ist ehrlich gesagt nichts Besonderes, aber es ist einzigartig. Hintergründe werden beim Blättern auf einer Webseite nicht angezeigt. Wenn überhaupt, haben wir in den letzten Jahren verschiedene Elemente innerhalb eines Abschnitts beim Scrollen gesehen. Aber so viele Hintergrundanimationen neben Parallax hatte ich nicht. Der Grund dafür ist, dass ein Hintergrund einen Abschnitt definiert. Und, obwohl dies keine verrückte Animation ist, ist es immer noch beeindruckend.
Nicht alles muss mutig, laut und unausstehlich sein, um beeindruckend zu sein. Manchmal sind die subtilen Dinge wie eine kleine und schnelle Einfachen Animation gerade genug, um eine einzigartige Erfahrung für einen Benutzer zu erzeugen. Dies ist definitiv eine dieser Zeiten. Eine weitere wichtige Tatsache ist, dass die Abschnitte, zwischen denen die Animation stattfindet, selbst keine eindeutigen Layouts haben. Das ist okay; Der Übergang ist spürbar, wenn Sie von einem Abschnitt zum nächsten gehen, er ist immer noch Teil des Layouts, auch wenn es nicht das von der Animation erstellte Endlayout ist.
7. Ted Todd integrierte Karte
Das visuelle Design und die allgemeine Benutzererfahrung von Ted Todd Die Website ist gut gestaltet. Für diesen Artikel möchte ich darüber sprechen, wie Ted Todd den Standort und den Kartenausschnitt auf ihrer Website nutzt. Im unteren Bereich der Homepage ist ein Bereich für die verschiedenen Bürostandorte in ganz Florida vorgesehen. Es gibt mehrere Gründe, warum dieser Abschnitt erstaunlich ist. Erstens verwendet der Abschnitt das Layout auf eine einzigartige Weise, um eine hervorragende Entwurfslösung zu bieten. Das Auffälligste an diesem Abschnitt ist die leichte Form von Florida auf der rechten Seite. Das visuelle von Florida mit seinen vielen Punkten ist eine fantastische Möglichkeit, die Reichweite des Unternehmens zu zeigen. Sie sagen nicht nur, dass sie in Florida sind, das Design zeigt dir genau wo. Es ist eine einfache visuelle zu verdauen und es ist auch auf eine fantastische Art und Weise ausgeführt.
Die nächste wichtige Sache in diesem Abschnitt sind die Punkte. Sie sind tatsächlich interaktiv. Wenn Sie den Mauszeiger darüber bewegen, erhalten Sie den Namen der Stadt, in der sich das Büro von Ted Todd Insurance befindet. Wenn Sie jedoch darauf klicken, wird der gesamte Bereich nach links verschoben, um Platz für Details zu dem jeweiligen Büro zu schaffen. Sie erhalten die Telefonnummer, die Adresse, die Öffnungszeiten sowie eine Liste der Mitarbeiter. Ich mag diese Designlösung, weil sie es einem Benutzer ermöglicht, schnell zu einem Ort in ihrer Nähe zu navigieren. Es ist visuell eine viel interessantere und einzigartige Darstellung, als wenn die Informationen übereinander auf einem Seitentitel "Unsere Florida-Büros" gestapelt wären, meinst du nicht?
