12 Browser-Layout-Tipps

    Artikel Übersetzung: 12 Killer-Tipps für das Entwerfen im Browser
    Bild

    Wie erstellen Sie ein Website-Layout?

    Ein typisches Projekt beginnt mit der Erstellung eines Layouts in Photoshop und der Verwendung von HTML und CSS, die der Form der ursprünglichen PSD-Datei möglichst nahe kommen. Trotzdem entwickelt sich eine Richtung im Webdesign, in der die Photoshop-Phase übersprungen wird, um die ursprüngliche Komposition direkt im Browser mit Ihrem bevorzugten Editor zu erstellen. Ich bin mir sicher, dass Ihr Kopf derzeit aufgrund der Gründe, warum dieser Ansatz Ihr Design einschränkt, verrauscht ist, aber es gibt eine Vielzahl von Möglichkeiten, die Sie im Browser ausführen können. In diesem Artikel werden die Tools und Techniken vorgestellt, die zum Erstellen hervorragender Arbeitslayouts in der ersten Phase der Arbeit erforderlich sind.

    Hauptidee


    Meagan Fisher на 24ways.org представил неотразимый довод проектирования в браузере. Хотя я и не разделяю его презрение к Фотошопу (Я люблю Фотошоп больше любого другого ПО на планете), я согласен с некоторыми другими его пунктами. Фишер говорит, что статическое изображение не дает по настоящему ощутить, как сайт будет работать и что проектирование в браузере направляет твои силы на организацию контента до дизайна, что гарантирует большее удобство и создание правильной структуры

    Мы будем использовать статью Фишера как затравку для наших заметок по превращению в профессионала в создании фантастических in-browser макетов готовых к работе сразу по получению одобрения от клиента.


    1. Начни с простого и используй сетку

    Bild
    Wie oben erwähnt, können Sie durch Auswahl und Organisation aller Inhalte ohne Stil ein Design erstellen, das viel besser zum Inhalt passt als mit der umgekehrten Reihenfolge. Die Verwendung von Grid-basierten Frameworks kann die Zeit zum Erstellen eines Layouts erheblich verkürzen und stellt sicher, dass es während des Entwicklungsprozesses stabil ist.

    CSS Frameworks Artikel

    2. Verwenden Sie einen guten Editor.

    Bild
    Wenn Sie Websites manuell codieren, ist ein professioneller Editor die Grundlage Ihres Workflows. Ich benutze (und liebe) Espresso von MacRabbit . Es hat alle kleinen Funktionen, die ich brauche, wie Snippets und Autocomplete, sowie die wichtigsten Funktionen - die Möglichkeit, Änderungen im Browser anzuzeigen, während Sie Code eingeben. Sie müssen die Anwendung auswählen, die für Ihre Anforderungen am besten geeignet ist.
    Hier ist eine kurze Liste der Herausgeber:


    3. Anwenden eines Schattens auf ein Element

    Bild
    Jetzt kann nicht nur mit Photoshop ein anständiger Schatten für das Web erstellt werden. Die meisten (aber nicht alle) Browser unterstützen jetzt CSS3, wodurch wir einige neue Funktionen zum Erstellen eines erweiterten Designs erhalten. Einer der nützlichsten ist Box-Shadow, mit dem Sie Objekten Schatten hinzufügen können, die nur CSS verwenden. Sein Format ist: box-shadow: 5px 5px 20px # 000000. Mit diesen Werten können Sie die Höhe und Länge des Schattens sowie den Unschärferadius und die Farbe anpassen.
    Weitere Informationen zu box-shadow finden Sie unter CSS.flepstudio.org

    4. Text Shading

    Bild
    Wenn Sie dem Text einen Schatten hinzufügen möchten , verwenden Sie die Eigenschaft text-shadow, wie im Kremalicious-Lernprogramm gezeigt . Format: Textschatten: 1px 1px 1px # 000. Die ersten beiden Werte bestimmen den Versatz des Schattens (x bzw. y), der dritte ist der Unschärferadius und der letzte ist die Farbe des Schattens.
    Diese Eigenschaft kann nicht nur zum Erstellen von Schatten verwendet werden. In der obigen Lektion wird beschrieben, wie Sie den Effekt eines Buchtextes, eines Glühens und sogar eines brennenden Textes erzeugen.

    5. Ecken abrunden


    Bild
    Abgerundete Ecken sind eine weitere Eigenschaft, die in CSS angepasst wurde. Die Eigenschaft border-radius funktioniert in Safari und Firefox. Geben Sie einfach -moz-border-radius und / oder -webkit-border-radius in Pixel an, um den Rahmen zu runden.
    Ausführlicher in 25 Rounded Corners-Techniken mit CSS.

    5. Erstellen eines Farbschemas

    Bild
    In Photoshop können Sie bequem Visualisierungen erstellen und mit verschiedenen Farben experimentieren. Es gibt jedoch viele kostenlose Ressourcen zum Erstellen von Farbschemata im Netzwerk. Das beste davon ist meiner Meinung nach Adobe Kuler . Kuler ist eine praktische Oberfläche für die schnelle Erstellung schöner Farbschemata sowie eine große Bibliothek für die Suche nach vorgefertigten Schemata. Müssen Sie die Site zum Absturz bringen? Geben Sie einfach "Herbst" ein und Sie erhalten eine Auswahl von 2600 Schemata. Mit Kuler können Sie sehr schnell fantastische Farbschemata erstellen, die Sie sofort in CSS verwenden können.
    25 Tolle Tools für die Auswahl eines Website-Farbschemas

    7. Text mit einem Farbverlauf

    Bild
    Auch für Begabte ist es möglich, Farbverläufe direkt auf den Text im Browser anzuwenden. Was für ein Schamanismus, fragst du? Lesen Sie das WebDesignerWall- Tutorial zu diesem Thema. Unter dem Strich erstellen Sie einen Bereich um den Text, auf den Sie einen Verlauf anwenden möchten, und legen dann den Hintergrund für den Bereich so fest, dass PNG mit einem Verlauf wiederholt wird. Natürlich benötigen Sie zur Erstellung von PNG einen Grafikeditor (ja, Sie wussten, dass Sie sich ab und zu an die Hilfe des guten alten Photoshops wenden müssen).

    8. Verwenden von RGBA zum Anzeigen von Farben


    Bild
    CSS führt eine neue Funktion namens RGBA ein („A“ bedeutet Alpha). Mit den Werten "A" können Sie die Deckkraft der Füllung einstellen. Mit dieser praktischen Funktion können Sie nicht nur bequem einfarbige Farbschemata mit unterschiedlichen Alpha-Werten erstellen, sondern auch transparente Objekte erstellen, durch die das darunter liegende Bild sichtbar wird, wie z. B. beim Reduzieren der Deckkraft einer Ebene in Photoshop.
    Erfahren Sie mehr über RGBA, um RGBA-Farben richtig zu deklarieren.

    9. Web-Schriftarten kennen


    Bild
    Fallen Sie nicht in die Falle, in all Ihren Projekten dasselbe Schriftpaar zu verwenden. Ändern Sie Ihre Position - nutzen Sie die gesamte Palette der web-sicheren Schriftarten. Typetester ist hierfür ein großartiges Werkzeug. Darin können Sie Textblöcke mit verschiedenen Schriftarten und Einstellungen (Größe, Ausrichtung usw.) direkt im Browser anzeigen. Und das Interessanteste: Wenn Sie die richtigen Einstellungen auswählen, exportiert Typetester sie in CSS.

    10. Holen Sie sich erweiterte Schriftarten.

    Bild
    Wenn Sie in Photoshop Text als Bilder erstellen, können Sie jede Schriftart verwenden, ohne auf Kompatibilität achten zu müssen. Leider führt diese Methode zu einem nicht auswählbaren Text, der nicht durchsucht werden kann. Es ist jedoch nicht so schwierig, dieses Problem zu lösen. Heutzutage gibt es mehrere Lösungen zum Installieren benutzerdefinierter Schriftarten mit lebhaft auswählbarem Text mithilfe des Befehls @ font-face.
    tolle Schriften auf Ihrer Website: Schritt für Schritt TypeKit-Tutorial

    11. Freunde mit Abflüssen

    Bild
    Besonders zu Beginn der Arbeit benötigen Sie häufig Schaltflächensymbole oder andere Elemente, die Sie jetzt nicht ausführen möchten. Mit Beständen (wie GraphicRiver ) können Sie auf Elemente zugreifen, die auf der Website verwendet werden können, ohne sie in Photoshop zu verarbeiten. Selbst wenn Sie ein Objekt problemlos in einer Stunde erstellen können, ist es nicht attraktiv, ein paar Minuten zu verbringen, um ohne großen Aufwand ein hervorragendes Ergebnis zu erzielen.

    12. Verwenden Sie Testwerkzeuge

    Bild
    Unabhängig davon, wie Sie Websites entwickeln, sollten Sie immer wissen, wie die Hauptbrowser sie rendern. Achten Sie dazu auf Adobe Browserlab . Mit diesem überraschend praktischen Dienstprogramm können Sie die Site in verschiedenen Browsern verschiedener Betriebssysteme in Echtzeit anzeigen. Der einzige Nachteil ist, dass Sie feststellen können, wie schlecht Ihre Website in einigen Browsern aussieht, was mit Sicherheit zu stundenlangen Flüchen und Kratzern am Hinterkopf führt.

    Fazit

    Und wie? Sind Sie bereit, Ihre Ansichten zu ändern und Websites zu erstellen, die nur mit einem Texteditor und einem Browser ausgestattet sind? Oder willst du, dass der Ermittler mich über die Box unter Photoshop aus deinen kalten toten Fingern befragt? Natürlich ist alles, was hier geschrieben steht, nicht absolut. Nur wenige professionelle Designer erstellen Layouts ohne die Hilfe von Grafikeditoren. Die Hauptfrage ist, was denkst du, solltest du zuerst Zeit im Anfangsstadium des Entwurfs verbringen? Würde ich gerne wissen Verwenden Sie Kommentare, um Ihre Position bis zum Ende zu verteidigen. Meiner Meinung nach wird diese Schlussfolgerung immer gruseliger, deshalb bleibe ich lieber hier.

    Jetzt auch beliebt: