Programmierer wie ich sind oft vom Design eingeschüchtert – aber ein wenig Aufwand kann einen enormen Return on Investment bringen. Hier sind die Tipps eines Programmierers, um jede Website schnell professioneller aussehen zu lassen.
Ich bin Programmierer. Ich bin kein Designer. Ich habe einen Abschluss in Informatik und ich habe nichts gegen Comic Sans. (Es sieht fröhlich aus. Weitergehen.)
Aber obwohl ich Programmierer bin, möchte ich, dass meine Websites attraktiv aussehen. Dies ist teilweise aus Eitelkeit und teilweise Realismus. Eitelkeit, weil ich möchte, dass die Leute meine Arbeit für gut halten, und Realismus, weil die Forschung zeigt, dass die Leute eine Website nur dann für glaubwürdig halten, wenn sie auch attraktiv aussieht.
Nachdem ich Programmierer geworden war, hatte ich sehr lange Angst vor Design. Design schien aus komplizierten Regeln zu bestehen, die nirgendwo niedergeschrieben wurden, plus einem verlernbaren Geschmackssinn, der nur von einer schwarz gekleideten Elite besessen wurde.
Aber vor einiger Zeit habe ich beschlossen, mein Bestes zu geben, um meine eigenen Projekte vage attraktiv aussehen zu lassen. Und obwohl dies nicht annähernd dem Effekt entspricht, den ein professioneller Designer erzielen könnte, war es sehr hilfreich, diese Ressourcen zur Verbesserung des Erscheinungsbilds einer Website zu sammeln.
Wenn ich nicht ein paar grundlegende Design-Shortcuts herausgefunden hätte, wäre es unwahrscheinlich, dass ein Wochenend-Hack von mir auf Seite drei der Daily Mail gelandet wäre. Und zu oft sehe ich jetzt hervorragende Programmierprojekte, die nicht das Publikum erreichen, das sie verdienen, einfach weil ihr Design nicht zu ihrer Ausführung passt.
Also, wenn Sie ein Entwickler sind, ist mein Weihnachtsgeschenk für Sie das: meine eigene Sammlung von Hacks, die, richtig eingesetzt, Ihre persönlichen Programmierprojekte schnell professionell aussehen lassen können. Keine ist schwer zu erlernen, die meisten sind kostenlos und Sie können sich auf das Schreiben von Code konzentrieren.
Eine Sache, die Sie bei diesen Tipps beachten sollten. Sie sind eine persönliche, pragmatische Zusammenstellung. Sie sind Vorschläge, kein endgültiger Leitfaden. Sie werden definitiv bessere Ergebnisse erzielen, wenn Sie mit einem professionellen Designer zusammenarbeiten und Design genauer studieren.
Wenn Sie ein Designer sind, würde ich gerne Ihre Vorschläge für die besten Tools hören, die ich verpasst habe, und ich würde gerne wissen, wie wir Programmierer die Dinge besser machen können.
Damit weiter zu den Tools…
Bootstrap verwenden
Wenn Sie Bootstrap noch nicht verwenden, starten Sie jetzt. Ich denke wirklich, dass Bootstrap eine der wichtigsten technischen Errungenschaften der letzten Jahre ist: Es demokratisiert den gesamten Prozess des Webdesigns.
Im Wesentlichen ist Bootstrap ein Rastersystem mit einer Reihe gemeinsamer Elemente. So können Sie Ihre Website so gestalten, wie Sie möchten, einfache Elemente wie Formulare und Tabellen einfügen und ein gut aussehendes, konsistentes Ergebnis erzielen, ohne stundenlang mit CSS herumzuspielen. Sie brauchen nur HTML.
Ein weiterer großer Vorteil ist, dass es einfach ist, jede Website ansprechbar zu machen, sodass Sie sich keine Gedanken über das Schreiben von Medienabfragen machen müssen. Geh, hol Bootstrap und schau dir die Beispiele an. Um Ihre Website leichtgewichtig zu halten, können Sie Ihren Download so anpassen, dass nur die gewünschten Elemente enthalten sind.
Wenn Sie mehr Zeit haben, dann ist Mark Ottos Artikel darüber, warum und wie Bootstrap bei Twitter erstellt wurde, eine Lektüre wert.
Pimp Bootstrap
Die Verwendung von Bootstrap ist bereits ein bedeutender Fortschritt gegenüber der Nichtverwendung von Bootstrap und reduziert die Langeweile der Front-End-Entwicklung massiv. Sie laufen aber auch Gefahr, eine weitere Bootstrap-Site oder ein Hack-Day-Design zu erstellen, wie es bekannt ist.
Wenn Sie wirklich unter Zeitdruck stehen, können Sie ein Thema von Wrap Bootstrap kaufen. Diese werden normalerweise von professionellen Designern erstellt und verleihen eine Politur, die wir selbst nicht erreichen können. Ihre Website wird nicht einzigartig sein, aber es wird schnell gut aussehen.
Glücklicherweise ist es ziemlich einfach, Bootstrap nicht zu sehr wie Bootstrap aussehen zu lassen – mit Schriftarten, CSS-Effekten, Hintergrundbildern, Farbschemata und so weiter. Der Rest dieses Artikels behandelt verschiedene Möglichkeiten, dies zu erreichen.
Wir werden diese Bootstrap-Beispielseite anpassen.
Dies hat bereits einige benutzerdefinierte CSS in der <head> . Wir ziehen alles heraus und erstellen eine neue CSS-Datei, custom.css. Dann fügen wir einen Verweis darauf in der Kopfzeile hinzu. Jetzt sind wir bereit, die Dinge anzupassen.
Fonts
Web Fonts sind eine der schnellsten Möglichkeiten, um Ihre Website unverwechselbar, modern und weniger Bootstrap zu machen, also fangen wir dort an.
Zuerst können wir einige süße Schriftarten von Google Web Fonts hinzufügen. Das einschüchternde ist die Auswahl von Schriftarten, die gut zusammen aussehen. Glücklicherweise gibt es viele Vorschläge im Internet: Wir werden eine der von DesignShack vorgeschlagenen kostenlosen Google Fonts-Paarungen verwenden. Unsere Schriften sind Corben (für Überschriften) und Nobile (für Körperkopien).
Dann fügen wir diese Dateien zu unserem <head> hinzu.
<link href="http://fonts.googleapis.com/css?family=Corben:bold" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Nobile" rel="stylesheet" type="text/css">… und das zu custom.css:
h1, h2, h3, h4, h5, h6 { font-family: 'Corben', Georgia, Times, serif;}p, div { font-family: 'Nobile', Helvetica, Arial, sans-serif;}Jetzt sieht unser Beispiel so aus. Es wird keine Designpreise gewinnen, aber es ist sofort besser:
Ich empfehle auch die Web-Font-Dienste Fontdeck oder Typekit – diese haben eine größere Auswahl an Schriftarten und sind die Investition wert, wenn Sie regelmäßig Websites gut aussehen lassen müssen. Für weitere Schriftkombinationen schlägt Just My Type ansprechende Paarungen von Typekit vor. Schließlich können Sie bei Type Connection mit Ideen zur Typpaarung experimentieren. Für den Designhintergrund zum Pairing von Schriftarten ist der Beitrag von Typekit lesenswert.
Texturen
Eine sofortige Möglichkeit, eine Website edel aussehen zu lassen, ist die Verwendung von Texturen. Sie kennen den grauen, gestreiften, undefinierbar eleganten Hintergrund auf 24ways.org ? Das.
Wenn es nur eine hervorragende Ressource gäbe, die attraktive, kostenlose, gebrauchsfertige Texturen auflistet … Oh warte, da sind Atletico’s Subtile Muster.
Wir werden Cream Dust verwenden, für einen Effekt, der nur als subtil beschrieben werden kann. Wir laden die Datei in ein neues /img/ -Verzeichnis herunter und fügen sie dann der CSS-Datei hinzu:
body { background: url(/img/cream_dust.png) repeat 0 0;}Knall:
Für einige Designhintergründe zu Mustern empfehle ich, die Richtlinien des Smashing Magazine zu Texturen durchzulesen. (TL; DR): Verwenden Sie Texturen, um die Schönheit zu verbessern und die Informationsarchitektur Ihrer Website zu verdeutlichen.)
Noch mehr zu tun. Ab.
Icons
Die 24 ways des letzten Jahres haben uns gelehrt, icon Fonts für unsere Site Icons zu verwenden.
Dies ist ideal für den zeitgedrückten Programmierer, da Symbolschriftarten nicht nur HTTP-Anforderungen reduzieren – sie sind auch viel schneller einzurichten als bildbasierte Symbole.
Bootstrap wird mit einem umfangreichen, für kommerzielle Zwecke kostenlosen Icon-Set in Form von Font Awesome ausgeliefert. Die Symbole sind sicher für Screenreader und können bei Bedarf sogar in IE7 verwendet werden (wir werden uns hier nicht darum kümmern).
Um diese Symbole zu verwenden, laden Sie einfach Font Awesome herunter und fügen Sie das Verzeichnis /fonts/ zu Ihrer Site und die Datei font-awesome.css zu Ihrem Verzeichnis /css/ hinzu. Fügen Sie dann einen Verweis auf die CSS-Datei in Ihrer Kopfzeile hinzu:
<link rel="stylesheet" href="/css/font-awesome.css">Schließlich fügen wir der Hauptaktionstaste wie folgt ein LKW-Symbol hinzu. Warum ein LKW? Warum nicht?
<a class="btn btn-large btn-success" href="#"><i class="icon-truck"></i> Sign up today</a>Wir werden auch unsere CSS-Datei optimieren, um zu verhindern, dass das Symbol gegen den Schaltflächentext stößt:
.jumbotron .btn i { margin-right: 8px; }Und so sieht es aus:
Nicht die aufregendste Änderung aller Zeiten, aber sie belebt die Seite ein wenig. Die Lizenz ist CC-BY-3.0, daher erwähnen wir auch Font Awesome und seine URL im Quellcode.
Wenn Sie etwas Unverwechselbareres möchten, können Sie mit Shifticons ein paar Cent für einzelne Symbole bezahlen, mit dem Bonus, dass Sie nur die tatsächlich verwendeten Symbole bedienen müssen, was effizienter ist. Seine Symbole sind auch freundlich zu Screenreader, aber nicht in IE7 arbeiten.
CSS3
Das nächste, was Sie tun können, ist etwas CSS3-Güte hinzuzufügen. Es kann wirklich helfen, die Schlüsselelemente der Website hervorzuheben.
Wenn Sie unter Zeitdruck stehen, können Sie einfach Box-Shadow und Text-Shadow hinzufügen, um Überschriften und hervorstechende Punkte hervorzuheben:
h1 { text-shadow: 1px 1px 1px #ccc;}.div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc;}Wir haben jedoch etwas mehr Zeit, also werden wir etwas Subtileres tun. Wir fügen mit einem Online-Verlaufseditor einen radialen Verlauf hinter der Hauptüberschrift hinzu.
Die Ausgabe ist kräftig, aber Sie können es im CSS sehen. Beachten Sie, dass wir für die IE9-Unterstützung auch Folgendes zu unserem HTML hinzufügen müssen:
<!--> <style type="text/css"> .gradient { filter: none; } </style><!-->Und der Effekt – ich weiß nicht, was ein Designer denken würde, aber ich mag die Art und Weise, wie die Überschrift angezeigt wird.
Für einen Crashkurs in nützlichen modernen CSS-Effekten empfehle ich den Online-Kurs von CodeSchool in funktionalem HTM5 und CSS3. Es kostet Geld ($ 25 pro Monat zu abonnieren), aber es lohnt sich für die Zeit, die Sie sparen. Als Bonus erhalten Sie auch Zugang zu einigen hervorragenden JavaScript-, Ruby- und GitHub-Kursen.
(Übrigens, wenn Sie mit grundlegenden float und display Attributen in CSS kämpfen – und es ist keine Schande, CSS–Layout ist nicht intuitiv – Ich empfehle den CSS Cross-Country Kurs bei CodeSchool.)
Fügen Sie eine Wendung hinzu
Wir könnten es dort belassen, aber wir werden ein Hintergrundbild hinzufügen und der Site etwas Persönlichkeit verleihen.
Dies ist der Bereich des Designs, den viele Programmierer meiner Meinung nach am einschüchterndsten finden. Wie erstellen wir die Grafiken und Fotos, die ein Designer verwenden würde? Die Antwort ist und seine Konkurrenten – Online-Bildbibliotheken, in denen Sie Bilder finden und bezahlen können. Sie werden nicht einzigartig sein, aber für unsere Zwecke ist das in Ordnung.
Wir verwenden ein weihnachtliches Bild. Für eine Wendung werden wir Backstretch verwenden, um es reaktionsschnell zu machen.
Wir müssen für das Bild bezahlen und es dann in unser /img/ Verzeichnis herunterladen. Dann setzen wir es als unser <body> ’s background-image , indem wir eine JavaScript-Datei mit nur der folgenden Zeile einfügen:
$.backstretch("/img/winter.jpg");Wir setzen auch das subtile Muster zurück, um der Hintergrund für unser Containerbild zu werden. Es würde viel besser transparent aussehen, also können wir diese Technik in GIMP verwenden, um es durchsichtig zu machen:
.container-narrow { background: url(/img/cream_dust_transparent.png) repeat 0 0;} Wir spielen auch ein bisschen mit der Auffüllung von body und .container-narrow, und dies ist das Ergebnis:
( Abgesehen davon: Wenn dies eine echte Website wäre, möchte ich Bilder in mehreren Größen kaufen und sicherstellen, dass Backstretch das Bild mit der am besten geeigneten Größe für unseren Bildschirm auswählt, möglicherweise mithilfe von responsiven Bildern.)
Wie finde ich die Effekte, die eine Site interessant machen? Ich habe eine Reihe von Lesezeichen für interessante JavaScript- und CSS-Effekte, die ich vielleicht eines Tages verwenden möchte, von realistischen Schatten bis hin zu animierenden Gittern. Der JavaScript Weekly Newsletter ist eine großartige Quelle für Ideen.
Farbschemata
Wir sind gerade dabei, dorthin zu gelangen – obwohl wir jetzt wahrscheinlich eine halbe Stunde vergangen sind -, aber diese Schaltfläche und dieses Menü sehen beide immer noch schrecklich bootstrappig aus.
Echte Websites mit echten Designern haben eine Farbpalette, die sorgfältig ausgewählt wurde, um das Markenprofil zu harmonisieren und anzupassen. Für unsere Zwecke werden wir nur einige Farben aus dem Bild leihen. Wir verwenden Gimps Farbauswahl-Tool, um die Hex-Werte des Blaus des Schnees zu identifizieren. Dann können wir Color Scheme Designer verwenden, um kontrastierende, aber komplementäre Farben zu finden.
Schließlich verwenden wir diese Farben für unseren zentralen Knopf. Es gibt viele Tools, die uns dabei helfen, z. B. Bootstrap-Schaltflächen. Das neue HTML ist ziemlich lang, daher werde ich hier nicht alles einfügen, aber Sie finden es in der CSS-Datei.
Wir haben auch die Farbe der Pillen im Navigationsmenü zurückgesetzt, was etwas einfacher ist:
.nav-pills > .active > a, .nav-pills > .active > a:hover { background-color: #FF9473;}Ich bin mir nicht sicher, ob das Ergebnis um ehrlich zu sein großartig ist, aber zumindest haben wir diese Bootstrap-blauen Schaltflächen verloren:
Eine andere Möglichkeit, dies zu tun, wenn Sie kein passendes Bild haben, besteht darin, ein attraktives Farbschema auszuleihen. Colourlovers ist eine Community, in der Menschen fertige Farbpaletten erstellen und teilen.
Das Wichtigste ist, eine Palette mit einer offenen Lizenz zu finden, damit Sie sie rechtmäßig verwenden können. Leider können Sie nicht nach Paletten nach Lizenztyp suchen, aber viele haben offene Lizenzen. Hier ist eine beliebte Palette mit einer CC-BY-SA-Lizenz, die die Wiederverwendung mit Namensnennung ermöglicht.
Wie oben können Sie die Hex-Werte aus der Palette in Ihrem benutzerdefinierten CSS verwenden und sich in den neu erstellten Ergebnissen sonnen.
Weiterlesen
Mit den oben genannten Techniken können Sie eine Website erstellen, die ziemlich schnell etwas professioneller aussieht.
Wenn Sie die Zeit haben zu investieren, lohnt es sich, einige Designprinzipien zu lernen, schon allein, damit Design weniger einschüchternd und eher Spaß macht. Als Teil meines Designlernens habe ich ein paar einführende Designbücher gelesen, die sich an Programmierer richten. Das Beste, was ich fand, war David Kadavys Design for Hackers: Reverse-Engineering Beauty, das die Grundprinzipien der Auswahl von Farben, Schriftarten, Schriften und Layouts erklärt.
In der Einleitung zu seinem Buch schreibt David:
Keine Gruppe kann mehr von Designkompetenz profitieren als Hacker … Das einzige Thema, das für Hacker äußerst frustrierend ist, wenn sie versuchen, es zu lernen, ist Design. Hacker wissen, dass sie, um mit nur wenigen Codezeilen gegen Unternehmensgiganten anzutreten, ein gutes, klares Design benötigen, aber die Ressourcen, mit denen sie Design lernen können, sind einfach schwer zu finden.
Gut gesagt. Wenn Sie einen halben Tag Zeit haben, anstatt eine halbe Stunde zu investieren, empfehle ich, Davids Buch in die Hand zu nehmen.