Mit den heutigen aktuellen Designtrends bin ich der Ansicht, dass die Liebe zum Detail vielleicht der wichtigste Teil jedes Designs ist, sei es im Web oder im Druck.
In diesem Artikel werde ich einige Beispiele von Designs im Web vorstellen, denen das Detail fehlt, das die Websites zu einem viel angenehmeren Ort zum Erkunden macht.
Haftungsausschluss
Ich sage auf keinen Fall, dass ich perfekt bin.Ich muss darauf hinweisen, dass ich nichts kritisiert, was irgendjemand in der Vergangenheit gemacht hat. Ich sage Ihnen lediglich, was ich tun würde, um das Design detaillierter zu gestalten und für den Benutzer eine bessere Erfahrung zu bieten, wenn er die Site nutzt. Ich sage auf keinen Fall, dass ich perfekt bin, ich lerne immer noch, und diese Techniken sind vielleicht nicht einmal die absolut besten Korrekturen, aber hier oder hier werden Sie feststellen, dass Sie sich die Mühe gemacht haben, die Website so gut wie möglich zu machen du denkst es könnte sein!
Zum Beispiel:
Der Kommentarbereich von Dribbble hat keine maximale Breite, sodass Sie das Erscheinungsbild der Website problemlos ändern können. Ich weiß, es ist nur ein kleines Detail, aber ich denke, dass die Liebe zum Detail der wichtigste Aspekt des Designs ist.
Wie der Artikel? Abonnieren Sie unseren RSS-Feed und folgen Sie uns auf Twitter, um immer auf dem neuesten Stand zu bleiben.
Textbereiche
Textbereiche waren das erste Element, das mir aufgefallen ist und mir die Idee gab, diesen Beitrag zu schreiben. Ich beginne hier.
Dieses Beispiel ist etwas ironisch, da es von der beliebten Design-Sharing-Website Dribbble stammt.
Wenn Sie auf die Seite eines Spielers gehen, wird unten ein Kommentarfeld angezeigt. Jetzt, weil ich ein kleiner Geiger bin, spiele ich immer mit Elementen auf Websites herum, wenn ich sie zum ersten Mal entdecke und bemerkte, dass ich "brechen" konnte. dieses:
Die Reparatur
Mit dem Textbereich Element ist die beste Praxis zu verwenden min / max-Breite & min / max-Höhe. Der derzeit verwendete Code ist:
Ich würde das konvertieren in:
Dieser Code behält dann die Breite des Kommentarfelds bei 424px Ermöglicht dem Benutzer jedoch immer, die Höhe der Box zu erhöhen, je nachdem, wie viel sie dort schreiben.
Vielen Dank an Chris Allwood, der mich an den Beitrag "Textarea Tricks" von Chris Coyier von CSS Tricks in the verwiesen hat Textbereich Element auf die verschiedenen Dinge, die Sie tun können, um es zu manipulieren.
Schwebeflug & aktive Zustände bei Links
Schwebeflug und aktive Zustände sind wahrscheinlich das einfachste Detail und die Funktionalität, die Sie einem Entwurf hinzufügen können.
Wenn es um Links geht, ändern Designer normalerweise die Farbe im Schwebeflug, fügen eine Unterstreichung hinzu oder machen sie fett. Die Verwendung dieser einfachen Techniken eignet sich gut für bestimmte Designs, aber es gibt noch einige andere Details, die meiner Meinung nach nicht oft genug angewendet werden.
Die Reparatur
Einzug von links:
Hintergrund hinzufügen:
Klick bei Klick nach unten:
Bonus-Tipp
Alle oben genannten Details lassen sich mit CSS3-Übergängen noch etwas angenehmer gestalten. Ich benutze den folgenden Code oft, um den Effekt leicht zu animieren, was ein angenehmes Detail darstellt:
Es gibt verschiedene Variablen, die Sie verwenden können. Dies ist nur die Haupteigenschaft, die ich regelmäßig verwende. NetTuts + hat einen guten Artikel über grundlegende CSS3-Übergänge, der sehr nützlich ist.
Wenn Sie wirklich die ganze Zeit verbringen wollen, empfehle ich Ihnen, Dan Eden's Animate.css zu überprüfen. Ich habe es bei Cardinal Menswear verwendet und denke, es macht einen großen Unterschied, wenn man die Seite betrachtet.
Achten Sie auf negative Staaten
Wenn Designer Negativ verwenden schweben und aktiv Zustände.
Harry Roberts von CSS Wizardry schrieb 2011 einen Artikel über negative Hovers, in dem ich über einige Details nachdenken musste, die ich auf Websites angewendet hatte, an denen ich in der Vergangenheit gearbeitet habe. Ich erkannte, dass ich mich schuldig fühlte, eine: Verknüpfung mit einer Unterstreichung zu erstellen und dann weiter: Schwebe Ich würde diese Unterstreichung entfernen und nachdem ich Harrys Artikel gelesen hatte, kam mir der Gedanke, dass dies für einen Besucher verwirrend sein könnte.
Text- und Bildauswahlfarbe
Obwohl dies ein sehr kleines Detail ist, ist es sehr einfach zu tun, daher denke ich immer, dass der Designer sich Sorgen macht, wenn er / sie dieses Stück Code für die Leute hinzufügt, die es bemerken und zu schätzen wissen.
Die Reparatur
Fazit
Ich hoffe, Sie haben aus diesem Artikel ein oder zwei Tricks gelernt. Ich werde auf jeden Fall nach neuen, kleinen Details Ausschau halten, die ich in Zukunft auf meine Entwürfe anwenden kann.
Hast du irgendwelche Tipps oder Tricks, von denen du glaubst, dass ich sie vermisst habe oder die sie in Betracht ziehen sollten? Wir lernen immer als Designer und ich denke, es ist wichtig, dass wir uns gegenseitig auf Trab halten, damit die Benutzer unserer Websites die bestmögliche Erfahrung machen!
Hinterlassen Sie bitte einen Kommentar mit Anregungen für Code-Schnipsel, die Sie in Ihren Entwürfen verwendet haben.