Die Kunst, bessere Websites zu erstellen

Das Erstellen von Websites ist heutzutage fast zu einer alltäglichen Fertigkeit geworden, und es gibt eine solche Vielzahl von Websites, die gegen Ihre Konkurrenten antreten, sodass alles, was Sie tun können, um sich von der Masse abzuheben, eine große Hilfe sein wird.

Was können wir tun, damit unsere Websites wahrgenommen, bewundert und beachtet werden? Es erfordert eine gewisse Anpassung unserer Denkweise über das Design von Websites. In diesem kurzen Artikel werden einige der wichtigsten Elemente beschrieben, die zur Erstellung besserer Websites erforderlich sind.

Inhalt muss Priorität haben

Als Designer sind wir immer bestrebt, großartige Designs zu entwerfen. Natürlich trifft dies nicht auf diejenigen zu, die sich nur als Designer bezeichnen, weil sie nicht zulassen, dass ihre Seele auf der Seite weint und einen Moment der Inspiration ewig in elektronischer Herrlichkeit verankert.

Die Inhaber der Website möchten natürlich, dass die Nutzer ihre Inhalte lesen, sich damit beschäftigen und vielleicht sogar etwas kaufen. Schöne Bilder sind wunderbar zu haben, aber nicht, wenn sie den Benutzer daran hindern, den Inhalt zu erleben.

In diesem Fall muss das, was wir als „stilistische Verbesserungen“ bezeichnen könnten, sicherlich einen Rück- blick auf die Hauptpräsentation haben. Wenn Sie etwas ablegen müssen, sollte es immer das Stilelement sein.

Bild mit freundlicher Genehmigung von

Responsives Design ist unerlässlich (außer wenn dies nicht der Fall ist)

Responsive Design ist heutzutage so wichtig, weil viele Menschen ihre Handys für das Surfen im Internet verwenden und die meisten Browser des Internets immer noch eine miese Arbeit beim Rendern von Webseiten ausführen.

Es gibt einige bemerkenswerte Ausnahmen, die jedoch sehr selten sind. Solche Ausnahmen wären wenn etwas Bedürfnisse auf der Seite angezeigt werden, damit der Inhalt einen Sinn ergibt und wo er eine bestimmte Größe haben muss. Manche Dinge würden einfach nicht funktionieren, wenn sie zu stark verkleinert würden.

Fälle wie dieser müssen sorgfältig behandelt werden. Wie Sie dies tun würden, ist die Verwendung einer speziellen responsiven Spalte, die nur angezeigt wird, wenn eine Bildschirmgröße erkannt wird, die zu klein ist, um den Inhalt anzuzeigen, und eine Meldung den Benutzer anweist, den Inhalt auf einem größeren Monitor anzuzeigen.

Dies ist im Allgemeinen etwas, das Sie vermeiden sollten, aber unter außergewöhnlichen Umständen ist es akzeptabel, solange es mit Takt behandelt wird.

Abbildung mit freundlicher Genehmigung von

Wichtige Inhalte müssen offensichtlich sein

Während es offensichtlich sein sollte, scheint es so oft nicht zu sein. Design sollte wichtige Dinge nicht subtil machen. Es muss das Wichtige hervorheben und für den Betrachter sichtbar sein zuerstund dennoch versuchen viele Designer, "kreativ" zu sein und diese wichtigen Dinge zu unterwerfen.

Machen Sie diesen Fehler nicht. Benutzer bleiben möglicherweise nicht lange auf der Website, daher ist es wichtig, die Marke vor Augen zu haben. Auch wenn sie schnell gehen, haben Sie zumindest Eindruck gemacht. Wenn sie später auf die Marke treffen, werden sie sie als bekannt erkennen und eher von einer bekannten (dh „vertrauenswürdigen“) Marke kaufen.

Was passiert, ist eine Art kognitiver Selbsttrickerei, in der das Bewußtsein sagt: „Wenn ich davon gehört habe, muss es gut sein.“ Deshalb sind Unternehmen bereit, Millionen von Dollar auszugeben, nur um ihr Logo auf ein Schild zu bekommen eine Sportveranstaltung.

Was ist sonst noch wichtig? Nun, die Antwort auf diese Frage hängt von der Art der Site ab, die Sie erstellen. Was Sie tun müssen, ist darüber nachzudenken, wonach Sie suchen würden, wenn Sie diese Site besuchen würden. Es ist in der Regel sehr unterschiedlich zu dem, was ein Unternehmens-Honcho sagen will, dass sie zeigen wollen. Die Dinge, nach denen die Leute suchen werden, sind die wichtigen Dinge, die einbezogen werden und prominent erscheinen.

Stilelemente sollten sich leicht einfügen

Ihre Designverschönerungen sollten den Betrachter auf gute Weise zum Staunen bringen. Sie sollten eher Freude bereiten als Ärger. Häufig lassen sich Designer mitreißen und einer Seite Dinge hinzufügen, um den „Wow-Faktor“ zu generieren, ohne sich zu vergewissern, dass diese Dinge nicht das Potenzial haben, nervig zu sein.

Sie müssen auch sicherstellen, dass solche Verzierungen graziös abgebaut werden. Wenn sie nicht richtig angezeigt werden können, sollten sie überhaupt nicht angezeigt werden und es sollte so aussehen, als ob sie noch nie dort gewesen wären.

Mit freundlicher Genehmigung von

Schichten zur Rettung

Sie können diese Verzierungen durch die Verwendung von Ebenen hinzufügen. Menschen, die responsive Designs erstellen, scheinen vergessen zu haben, dass sie über einen 3D-Stack verfügen, mit dem sie arbeiten können, und damit das wahre Potenzial des responsiven Designs fehlt.

Ein Beispiel, wie das funktioniert… Stellen Sie sich vor, Sie haben eine Site, auf der Sie ein Layout mit mehreren Haltepunkten haben. Bei der herkömmlichen Denkweise müssten Sie alles auf eine Ebene legen, was bei kleineren Displays zu Engpässen führt, die Sie zum Ablegen von Objekten zwingen oder (wie üblich) ein abscheuliches Design zeigen.

Die letzten beiden Wörter sollten niemals zusammen passen, wenn Sie über etwas sprechen, das Sie erstellt haben. Das Gute ist, dass Sie die Situation durch die Verwendung von Ebenen tatsächlich vermeiden können.

Indem Sie Stilelemente auf einer separaten Ebene stapeln, können Sie sie unabhängig von der Inhaltsebene ein- oder ausblenden, und beide Ebenen reagieren vollständig.

Angenommen, der Benutzer betrachtet die Site auf einem Monitor mit einer Auflösung von 2560 x 1440. Unsere untere Inhaltsebene erstreckt sich über die gesamte Breite des Bildschirms, aber wir können Ränder festlegen, die den Inhalt in einen dekorativen Rahmen platzieren, der in jeder gewünschten Größe sein kann.

Wenn Sie diesen dekorativen Rand ohne Ränder auf der oberen Ebene platzieren, können Sie einfach die Breite so einstellen, dass sie der Größe der Ränder auf der unteren Ebene entspricht.

Wenn der Benutzer die verschiedenen Haltepunkte auf dem Bildschirm nach unten durchläuft, können die beiden Ebenen auf diese Weise weiter zusammenarbeiten, und die obere Ebene kann sogar völlig unterschiedliche Ränder für jeden Haltepunkt anzeigen. Bis zum letzten Haltepunkt verwerfen wir die obere Ebene vollständig, indem wir sie als ausgeblendet festlegen.

Das Potenzial hier ist offensichtlich. Verfügen Sie in der rechten Spalte über viele nervige Link-Anzeigen? Sie können sie vor Benutzern mit kleinen Bildschirmen ausblenden und sie bei Bedarf mit jQuery wieder hinzufügen.

Endlich eine Möglichkeit, Inhalte richtig vom Design zu trennen

So sollen Webseiten funktionieren. Durch das Speichern Ihrer „Extras“ auf einer vollständig separaten Ebene erhalten Sie eine noch größere Trennung des Inhalts vom Design, da diese obere Ebene jederzeit durcheinander gebracht werden kann, ohne die untere Ebene zu beeinflussen, und umgekehrt.

Viel Spaß beim Experimentieren mit der Freiheit, die sich Ihnen dadurch eröffnet, so dass Sie mit allen möglichen kreativen Ideen herumspielen können, während der Inhalt selbst davon unberührt bleibt.

Es ist genau das gleiche Konzept wie beim Sandboxing mit virtuellen Maschinen. Egal was Sie tun, Sie können den Seiteninhalt nicht beeinflussen, da er von der Dekorebene isoliert ist.

Headerbild mit freundlicher Genehmigung von Matt Carlson

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.