Interaktives Design

6 Möglichkeiten, das Design Ihres Blogs zu verbessern

Beim Design können Blogs oft in der Kälte bleiben. Viele von uns räumen den Bedarf an intensivem Design in Bezug auf unsere Blogs ein - ob für unsere Unternehmen oder für uns selbst.

Aber es ist wichtig, dass wir jeden Aspekt unserer Online-Identität erkennen, der auf eine saubere und intuitive Weise mit jedem Stil, den Sie bevorzugen, gestaltet werden soll. Dieser schwer fassbare Aspekt der Web-Arbeit ist etwas, was wir ständig anstreben sollten. Und ja, dazu gehört auch die Zeit, die wir mit Blogs verbringen.

Oftmals gehen Blogs im Shuffle verloren, weil wir sie als massive "Text-Dumps" betrachten, wenn es um Informationsarchitektur geht, und das ist sicherlich ein Aspekt ihrer Identität, aber sie haben mehr Potenzial als das.

Einige Blogs sind, wenn sie richtig gestaltet sind, ideal, um unseren Gedankenstrom sowie einige Portfolio-Informationen anzuzeigen, während andere hervorragend für die Anzeige von Nachrichten und Fotografie geeignet sind.

Der Punkt ist, ein Blog kann eine große Aufbewahrungsfalle für eine Vielzahl von Themen sein, deren Darstellung auf die spezifischen Design-Entscheidungen, die Sie treffen, herunterkommt. In den vergangenen fünf Jahren hat sich einiges getan, um die Welt des Bloggens viel einfacher zu machen als früher. Zum Beispiel ist WordPress großartig und Themen machen viel von der Designarbeit für uns, aber wenn Sie es aufpeppen möchten, dann gibt es ein paar Dinge, die Sie im Auge behalten sollten.

Ähnlich, wenn Sie die Navigation oder das Layout des Themas bearbeiten möchten, gibt es auch einige Dinge, die Sie beachten sollten. Das gilt für fast jede Blogging-Engine oder wenn du alleine arbeitest. Hier sind einige meiner Gedanken darüber, was ich denke, diese wichtigen Bits sind.

Mit Schatten-basierten Texteffekten arbeiten

Text-Effekte sind eine hervorragende Möglichkeit, Header-Titel, Navigationsleisten oder Inhaltseinführungen in Ihrem Blog zu präsentieren, vorausgesetzt, sie werden sparsam verwendet. Lassen Sie uns einige der häufigeren Effekte, die wir im Web überstrapaziert sehen, und deren ordnungsgemäße Verwendung erläutern.

Retro Text

Es ist oft ein Schmerz, mit ihm zu arbeiten, aber es scheint die letzten anderthalb Jahre die Runde gemacht zu haben trotz dieser Tatsache. Und mit der Einführung von CSS3 ist es viel einfacher zu manipulieren und die perfekte Schattierung zu finden. Ich habe hier ein Beispiel, um uns zu helfen, zu verstehen, wie man diesen Effekt richtig erzeugt, dann werde ich übergehen wann und wann ich es nicht benutzen soll. Der Name des Spiels mit Retro-Effekten ist kein Weichzeichner-Radius und die Verwendung von zwei Schatten. Nehmen wir an, wir arbeiten mit einer dunklen Schrift (# 707070I), um dies zu erreichen, wollen wir einen doppelten Text-Schatten verwenden. Es würde ungefähr so ​​aussehen: 

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

Das sollte dir einen schönen Double-Border-Effekt geben, mit einem sehr 70er Look. Natürlich müssen Sie, um die wahre 70er-Jahre-Stimmung zu bekommen, alle Arten von Farbmanipulationen hinzufügen, aber zumindest haben wir den Basiseffekt unten. Erinnern Sie sich, gehen Sie nicht zu verrückt mit der Farbgebung - und gehen Sie nicht zu verrückt mit dem X- und Y-Offset für die Textschatten (da es sich als sehr unlesbar herausstellen könnte). Wenn es darum geht, einen Retro-Effekt zu nutzen, ist die Verwendung in Titeltiteln am besten. Dies ist kein Effekt, der mit kleinformatigen Texten oder beschreibenden Informationen gut funktioniert. Am besten lassen Sie es oben auf Ihrem Blog bleiben und lassen Sie es in Ruhe.

Buchdruck und Einfügungstext

Ein weiteres beliebtes Feature, das das Angebot von CSS3 shadows bietet, ist eine eingebettete Art des Stylings, auch bekannt als "Buchdruck". Dies ist definitiv ein heißes Thema in der Welt der CSS3-Texteffekte, also lasst uns darüber reden, wie man sie richtig macht. Ein Inset-Styling wird typischerweise erreicht, indem die Y-Achse um einen kleinen Betrag versetzt wird, um den Eindruck eines subtilen Highlights innerhalb des unmittelbaren Hintergrunds des Textes zu vermitteln. Oftmals werden Sie sehen, dass es als Kontrast zum Hintergrundkontrast (hell vs. dunkel) verwendet wird, so dass der Effekt mehr Einfluss auf den Leser hat. Lassen Sie uns ein Beispiel ausführen.

Heller Hintergrund, dunkler Text: 

body { background-color: #888; text-shadow: 0px 2px 3px #666;}

Dunkler Hintergrund, heller Text 

body {background-color: #666; text-shadow: 0px 2px 3px #888;}

Das ergibt einen wirklich schönen Layered / Inset-Effekt, der für Header oder Blog-Titel verwendet werden kann. Verwenden Sie es jedoch sparsam auf der gesamten Website, denn nichts ist schlimmer als jemand, der Texteffekte überstrapaziert. In diesem Fall wäre es in Ordnung, in verschiedenen Untertiteln oder mit verschiedenen Seitenleisten oder Fußzeilenelementen zu arbeiten - aber stellen Sie sicher, dass Sie dies nicht für eine beschreibende Information verwenden. Auch hier sollten keine schattenbasierten Texteffekte für so etwas verwendet werden.

Mit Bildern in Ihrem Blog arbeiten

Seien wir ehrlich, als Webdesigner zeigen wir gerne unsere Arbeit. Wir lieben es so sehr, dass sogar unsere persönlichen Blogs mit Portfolio-Bildern und Überschriften übersät sein können. Also, warum nicht diese beiden konsolidieren? Der beste Weg, um mit Untertiteldaten zu arbeiten, besteht darin, relevante Informationen innerhalb des Bildes selbst zu enthalten, und der beste Weg, dies zu tun, besteht darin, einen CSS3-Effekt direkt auf das Bild zu implementieren.

Wenn Sie neugierig sind, warum ich denke, dass dies ein so wichtiger Aspekt bei der Arbeit mit Bildern ist, besuchen Sie einfach den Google Chrome-Webshop (Add-ons). Sie sind in der Lage, Tausende von Bildern anzuzeigen, ohne dass ein Text um sie herum vorhanden ist, und geben uns trotzdem genug Informationen über das Bild, um zu wissen, ob wir darauf klicken wollen oder nicht. Das ist brilliant, und viel mehr von uns sollten eine solche Technik implementieren, um nicht nur unnötigen Text zu bereinigen, sondern auch die Benutzerfreundlichkeit zu erhöhen.

Lassen Sie uns das für Ihren persönlichen Blog neu erstellen, aber mit Ihrer eigenen Berührung, damit Sie Client-Informationen für Website-Bilder anzeigen können, an denen Sie gearbeitet haben:

Zuerst müssen wir einen Container für das Bild erstellen, und dann müssen wir einen weiteren Container für den Text erstellen, den wir verwenden möchten. In diesem Fall werden wir einen Unterkopf, ein bisschen Text und einen Link verwenden. Anschließend erstellen Sie einen Container für den Text und Links zur Website des Kunden, die wir anzeigen.

In diesem Abschnitt wird das aktuelle Bild zum Übergehen gebracht und der Text für den Übergang vorbereitet. Wir erkennen auch, dass das Bild entlang der X-Achse und nicht der Y-Achse verlassen werden soll Wir werden eine Art Schiebetüreffekt haben.

Jetzt richten wir den Maus-Hover-Over-Effekt ein und sorgen dafür, dass der Übergang nach diesem Ereignis beginnt. 

.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }

Wie Sie hier sehen können, war das, was wir getan haben, ähnlich dem, was wir oben für das Bild getan haben. Wir haben einfach den Text nach dem Bild eingefügt und ihm eine Verzögerung von +0,1s gegeben, um sicherzustellen, dass es reibungslos läuft. Und das ist es auch schon.

Es gibt eine Reihe anderer Möglichkeiten, die Sie anpassen können, und auf jeden Fall eine Menge anderer Übergangseffekte, die Sie verwenden können. Denken Sie jedoch daran, wenn Sie mit fortgeschrittenen Übergängen arbeiten, verwenden Sie sie nicht auf so repetitive Weise, wie Sie es mit etwas so einfachem tun würden. Sie werden am besten sparsam verwendet, um wichtige Bilder hervorzuheben.

Mit kreativen Layouts arbeiten

Oft werden wir als Webdesigner die übermäßig genutzten Trends sehen, die Jahr für Jahr missbraucht wurden und eine Stimme für Veränderungen in Bezug auf sie sein wollen. Aber gegen den Strich zu gehen kann eine riskante Übung sein, besonders wenn man es nicht richtig macht (als Anmerkung - ich sage nicht, dass man auf die "richtige Art und Weise" kreativ sein muss, weil es keinen "richtigen Weg" gibt Seien Sie kreativ). Ich erwähnte das, weil ich denke, kreativ zu sein ist definitionsgemäß die Loslösung von Beschränkungen oder kreativen Normen, und in der Tat würde ich das ermutigen, aber ich denke auch, wir sollten vorsichtig sein, warum solche Normen in unserem Web verwurzelt sind Designthemen und was wir tun können, um mit ihnen innovativ zu sein.

Eindeutige Textausrichtung

Bei der Arbeit mit Text auf kreative oder einzigartige Weise (dh nicht 12pt Arial center-aligned) ist es wirklich wichtig zu beachten, dass Ihr Text nicht mehr der Hauptinhalt auf der Seite ist. Es wurde zu einem unterstützenden, wenn auch wichtigen Element degradiert.

Eine Frage, die Sie sich immer stellen müssen, wenn Sie mit Text arbeiten, lautet: "Passt das gut zum Rest der Seite?" Es kann neben einer Portfolio-Arbeit, einem zufälligen Bild oder vielleicht nur verschiedenen anderen Textspalten auf beiden Seiten sein Die Seite.

Aber unabhängig davon, was es benachbart oder senkrecht zu Ihnen ist, müssen Sie versuchen, es auszugleichen, so gut Sie können. Denken Sie an Gitterlinien und studieren Sie die Gittersysteme da draußen, wenn Sie müssen ( 960 Gittersystem ist was ich empfehlen würde). Studieren Sie, wo sie das Rasterlayout auf der Seite platziert haben, und fragen Sie sich dann warum - und schließen Sie dann ab, ob Ihr Projekt genauso ausgewogen ist. Stellen Sie sich vor, Sie legen Ihre Inhalte entlang des Grid-Systems selbst und versuchen, darüber nachzudenken, wie es in diesem Fall aussehen würde - replizieren Sie das dann in CSS.

Kreative Fußzeilen

Kreative Fußzeilen können einem Blog oder einer Website wirklich viel Persönlichkeit hinzufügen, und es scheint irgendwie kontraintuitiv zu sein, so zu denken. Ob wir über jQuery-Scrolling sprechen, das uns in einer schönen Fußzeile unter dem Motto "Under-the-Earth" landet, oder nur für den unteren Teil der Website oder des Blogs einer Firma, es ist ein sehr kleiner Teil einer Website kann eine sehr starke Wirkung haben. Inwieweit dies der Fall ist und warum dies der Fall sein könnte, ist geteilt. Ich habe meine eigene Theorie: Wenn wir eine Webseite lesen, beginnen wir oben und gehen nach unten, und am Ende der Seite ziehen wir unsere Schlussfolgerungen über das, was wir gelesen haben.

Wenn Sie mit einem kreativen Footer arbeiten, gibt es ein paar Dinge, die Sie im Kopf behalten möchten, und ein paar Best Practices, die mir aufgefallen sind, in den Fußzeilen verwendet zu werden, die ich am meisten liebe. Für mich ist der wichtigste Teil der Verwendung einer Fußzeile auf diese Weise, das gleiche Farbschema wie Ihre Website zu verwenden, aber mit einem anderen Kontrast. Das ist unglaublich wichtig, und Sie können den Kontrast natürlich in Bezug auf den Kontrast, mit dem Sie arbeiten, für das gesamte Thema in der Fußzeile erhöhen.

Das Wichtige, an das Sie sich erinnern sollten, ist, dass Sie für diesen Abschnitt ein schönes, tiefes Stilset haben möchten. Es gibt ein schönes Gefühl der Fertigstellung der Website. Wenn Sie diese Technik verwenden, können Sie die Fußzeile so groß machen, wie Sie möchten, im Rahmen der Vernunft, denn bei dem kontrastierten Farbschema ist es offensichtlich, dass dies tatsächlich ein Fußzeilenabschnitt ist.

Was den Inhalt betrifft, kann es in der Welt des neuen Fußes angebracht sein, dein Logo und deinen Blognamen, deine Bilder oder Links deines sozialen Netzwerks, deinen letzten Tweet und sogar ein nettes, einfaches Kontaktformular hinzuzufügen. Dies kann natürlich auf der Grundlage Ihrer persönlichen Präferenzen variieren, aber ich möchte alle diese Optionen zeigen, um die Entwicklung von der Vergangenheit in die Gegenwart zu illustrieren, was am unteren Ende einer Website oder eines Blogs angezeigt werden kann.

jQuery Scrollen

Dies ist eine meiner Lieblingsmethoden auf einer Website, und ich denke auch, dass sie speziell für das Navigieren von Posts in einem Blog geeignet ist. Es gibt ein paar verschiedene Möglichkeiten, um mit jQuery zu arbeiten, deshalb werde ich hier eine meiner liebsten (und einfachsten) Möglichkeiten beschreiben, wie man etwas reibungslos scrollen kann und dann durchgehen kann, was passiert und wie man es implementiert.

Dies ist Code für vertikales Scrollen, da horizontales Scrollen nicht so wünschenswert ist. 

$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}  , 1000); event.preventDefault ();});});

Was hier vor sich geht, mag kompliziert aussehen, aber es ist eigentlich ziemlich einfach. Wir öffnen eine Funktion für die ".class" des Navigationselements, auf das wir klicken werden (wir nennen dies ein Klick-Ereignis). Der wichtigste Teil hier ist also, die Klasse der Liste (ul) zu "nav" zu benennen. Oder ersetzen Sie das "nav" im Code mit dem, was Sie diese Klasse genannt haben. Und das ist so ziemlich alles für eine funktionierende jQuery - Scroll, werfen Sie das einfach in Ihre Website und verlinken Sie sie minimierte jQuery (Vorzuziehen) und Sie sind alle bereit zu gehen.

Soweit die Verwendung mit einem vertikalen Scroll wie diesem geht, ist es ziemlich unbegrenzt. Viele Leute genießen es, nicht manuell nach unten scrollen zu müssen, sie genießen die Seite, die es für sie macht, und es ist auch eine brillante Art, von Post zu Post auf einer Website zu wechseln, besonders wenn diese Posts groß sind. Ich werde es oft verwenden, um zu verschiedenen Portfoliounterabschnitten innerhalb meiner Blogs oder durch Kategorien auf Websites zu wechseln. Es ist auch eine perfekte Technik, wenn Sie Ihre Website thematisch gestalten, wie zum Beispiel ein Tag-zu-Nacht-Thema oder Themen für Ihre Kategorien oder Blog-Themen.

Ich hoffe, dass einige dieser Techniken für Sie alle hilfreich waren, um verschiedene Designästhetiken in Ihrem Blog anzuwenden. Denken Sie daran, verwenden Sie sie sparsam und versuchen Sie, bei der Verwendung von auffälligen Effekten mit Ihrem besten Urteilsvermögen zu handeln. Wir sind verpflichtet, ein Internet zu schaffen, das nicht so hässlich ist wie bestimmte Aspekte der Außenwelt. Obwohl es eine große und überwältigende Aufgabe ist, ist es eine, die wir erreichen können, wenn wir es nur für einen Entwurf auf einmal und einen Tag nach dem anderen nehmen. Halten Sie es einfach, halten Sie es ehrlich, halten Sie es wahr und legen Sie immer Leidenschaft in das, was Sie tun - wie es immer durch scheinen wird.

Was sind deine besten Blog-Design-Tipps? Was macht ein wirklich tolles Blog-Design aus? Lass es uns in den Kommentaren wissen!

Web Entwicklung Wordpress Blog-Design Javascript Codierung Bilder Jquery Lesbarkeit Benutzeroberfläche