Haben Sie schon einmal eine Website geöffnet und sofort wieder geklickt? Wenn das Design einer Website unangenehm ist, sind Sie schneller draußen, als Cersei den Wein verzehrt HABE. In einer Welt, in der alle um Augäpfel wetteifern, stellen sich schlecht gestaltete Standorte auf den Versager aus.
Fürchte dich nie, ich habe dich bekommen. Als Grafikdesigner habe ich Websites für Kunden, die Squarespace (meine bevorzugte Plattform der Wahl) verwenden, umbenannt und sie dabei unterstützt, das Design ihrer Website für ihre Marke und ihr Geschäft zu optimieren. Ich habe meine Top-Tipps zusammengefasst, um eine schöne und funktionale Seite zu erstellen, die jeder Anfänger verfolgen kann. Außerdem bieten wir unseren Lesern 10% Rabatt auf Ihren ersten Squarespace-Kauf mit dem Gutscheincode EVERYGIRL18. Ergebnis. Also schnappen Sie sich Ihr Notebook (oder Ihre Tastatur) und lassen Sie uns dies tun.
Beginnen Sie mit einem Moodboard
Das erste, was ich beim Start eines neuen Grafikdesignprojekts tue, ist das Erstellen eines Moodboards - im Grunde ein Plan, an dem sich das Design befinden soll. Hier ein Beispiel für ein Moodboard, das ich letztes Jahr für ein Projekt erstellt habe. Moodboards sind ein unverzichtbares Werkzeug, um die Ästhetik Ihrer Marke zu definieren - den gewünschten Look, das Gefühl, das Sie hervorrufen möchten, und die spezifischen Elemente, die Sie ansprechen. Haben Sie jemals Fotos aus einer Zeitschrift ausgeschnitten und in Haufen wie kuratierte Sammelalben gespeichert? * Seufz * Oh, ich vermisse die Tage des analogen Moodboardings.
Wenn Sie kein Grafikdesigner sind, können Sie mit Pinterest schnell und einfach Moodboards erstellen. Secret Boards sind ein fantastisches Werkzeug, um Bilder zu kuratieren - beginnen Sie, indem Sie alles und alles fixieren, was Ihnen auffällt. Gehen Sie dann wieder durch Ihr neues Board und beseitigen Sie Dinge, die nicht genau richtig sind. Sie müssen sich nicht auf Bilder beschränken, die Schriftarten oder Markenelemente enthalten - alles, was Ihnen ins Auge fällt! Denken Sie darüber nach, wie die Bilder Sie fühlen lassen. Was willst du mit deiner Marke? sprechen an Ihre Kunden oder Ihr Publikum Nachdem Sie Ihr Board kuratiert haben, erhalten Sie eine Referenzanleitung für das Erscheinungsbild Ihrer Marke, die Sie während des Aufbaus Ihrer Website erneut aufrufen können.
Wählen Sie die Zusatzfunktionen + Farben und bearbeiten Sie sie bei Bedarf
Schriftarten
Ich weiß, dass es verlockend sein kann, mit LOTS von Schriftarten zu spielen (Squarespace hat eine große Auswahl an Möglichkeiten), wenn Sie Ihre Site einrichten, aber gehen Sie von der Tastatur weg und hören Sie nach einer Sekunde. Zu viele Schriftarten oder Schriftarten, die sich alle im Design ähneln, sind für das Auge verwirrend und machen es für Kunden oder Kunden stressig oder unangenehm, Ihre Website zu betrachten. Gestresste Kunden und Kunden sind nicht ideal, wenn Sie an Absprungraten, wiederkehrende Zuschauer und Augäpfel denken, die Sie lange genug auf Ihrer Website aufhalten möchten, um etwas zu kaufen (zumindest)..
Als Designer ist dies einer der häufigsten Fehler, den ich auf Websites oder im Collateral-Branding-Material (Visitenkarten, Briefkopf usw.) sehe. Die gute Nachricht ist jedoch, dass sich diese Tipps leicht beheben lassen:
- Wählen Sie mindestens drei Schriftarten. Bearbeiten Sie, Leute! Glücklicherweise macht Squarespace dies einfach, indem Sie einheitliche Schriftarten für Ihre Site erstellen. Wählen Sie Schriftarten für Überschriften 1, Überschriften 2, Überschriften 3 und Absatz (Textkörper), und Squarespace füllt diese Schriftarten automatisch aus, wenn Sie Überschriften oder Textkörper auf Ihrer Website verwenden. SIEG.
- Wählen Sie eine aus serif (eine Schrift mit Schnörkel am Ende von Buchstaben, wie Times New Roman) und a San Serif (eine Schrift ohne Schnörkel wie Open Sans), die komplementär ist. Oder gehen Sie mit zwei Serifen oder zwei Serifen, die sich so unterscheiden, dass das Auge unterscheiden kann. Wenn Sie zwei verschiedene Schriftstile als Überschriften und Unterüberschriften verwenden, entsteht eine angenehme Nebeneinanderstellung auf Ihrer Website, die das Lesen erleichtert und professioneller macht. Im Folgenden habe ich Ihnen diese praktische Anleitung für einige meiner Lieblings-Kombinationsmöglichkeiten zusammengestellt - alle auf Squarespace verfügbar -, um Ihnen den Einstieg zu erleichtern. Bitte. (Achten Sie darauf, es für später festzunageln!)
- Seien Sie vorsichtig mit Skriptschriften. Sie zu verwenden ist sehr einfach - ein wenig geht weit.
- Verwenden Sie niemals Comic Sans. Du bist besser als das.
Farbe
Als nächstes sind Farben - der lustige Teil! Werfen Sie einen Blick zurück auf Ihr Moodboard (sagte, es wäre praktisch) und ziehen Sie die Farben heraus, die immer wieder vorkommen. Wenn Sie diese Farben haben, sollten Sie die Farbpsychologie in Betracht ziehen - ich liebe diesen Leitfaden von Spruce Rd. Welche Farben passen zu den Keywords, die Sie mit Ihrer Marke verknüpfen Wenn es bei Ihrer Marke nur um Harmonie und Vertrauen geht, sollten Sie Blautöne in Betracht ziehen. Wenn Sie sich mehr mit Energie und Positivität beschäftigen, versuchen Sie Gelb. Verfeinern Sie Ihre Sonnenbrille, bis Sie eine Gruppe treffen - ich würde sagen, höchstens fünf oder sechs -, die Sie mögen. Stellen Sie sicher, dass Sie die spezifischen Farben für eine spätere Verwendung speichern. Hier finden Sie ein hervorragendes Werkzeug zum Ermitteln des Hex-Codes einer Farbe aus einem Bild, wenn Sie keine Konstruktionssoftware wie Photoshop oder Illustrator haben.
Sie können leicht einen Hex-Code in Squarespace kopieren, um genau diese Farbe auf Ihrer Website zu verwenden. So wird's gemacht:
Hierarchie + Gleichgewicht verstehen
Denken Sie daran, dass berüchtigte Oscars snafu All dies hätte mit Hierarchie vermieden werden können - so kritisch es für ein Design sein kann.
Quelle: gut
Durch das Erstellen einer Hierarchie innerhalb Ihrer Website wird der Text priorisiert, den Ihre Zuschauer zuerst sehen sollen. Denken Sie an mutige Handlungsaufforderungen, Produkttitel usw. Durch die Verwendung der Hierarchie wird Ihr Inhalt in eine Rangfolge gebracht und ein Weg für das Auge des Betrachters geschaffen, damit er die Geschichte des Benutzers verfolgen kann Ihre Website so, wie Sie sie sehen wollen. Hier ist ein Beispiel, wie ich auf einer meiner Squarespace-Sites Hierarchie erstellt habe:
Das Gleichgewicht ist ebenso wichtig wie die Hierarchie, da es Ihre Site verankert und die Hilfe für das Auge angenehmer macht. Jedes Element auf Ihrer Seite hat ein bestimmtes Gewicht, das ausgeglichen werden sollte. Dunkle Farben und dickere Linien sind schwerer, hellere Farben und schwächere Linien sind heller. Hier ein Beispiel, wie ich auf einer meiner Squarespace-Sites ein Gleichgewicht geschaffen habe:
Seien Sie strategisch mit Leerzeichen
Ich liebe weißen Raum. Immer, wenn mich jemand um eine Gestaltungsmeinung zu etwas fragt, das er selbst erstellt hat, ist mein unvermeidlicher Rat mehr Leerraum! Das erste, was zu beachten ist, ist, dass Designer mit Leerzeichen einen negativen Raum oder das Fehlen von Designelementen, Texten oder Bildern meinen. Der Platz muss nicht unbedingt weiß sein, um sich zu qualifizieren.
Denken Sie daran, Ihren Elementen Raum zum Atmen zu geben. So wie Sie ein Foto nicht verwenden würden, bei dem die Hälfte des Kopfes abgeschnitten ist, möchten Sie Ihrer Website keinen Text und keine Bilder hinzufügen, wenn sie zu nahe beieinander liegen. Es wird sich als beengt und unangenehm für die Website auswirken Auge. Mehr Leerraum, ein saubereres, moderneres Design. Ich liebe das Spacer-Tool in Squarespace, weil es bei Bedarf einfach ist, weißen Raum um Ihre Elemente zu schaffen. Hier ist ein Beispiel:
Erstellen Sie konsistente Grafiken
Konsistenz ist der Schlüssel zum Erstellen einer Site, die reibungslos von Element zu Element, Seite zu Seite fließt. Durch die Verwendung der gleichen Schriftarten, Farben und Bilder auf Ihrer Website wird ein schlankeres Design geschaffen - und auf lange Sicht einfacher zu produzieren. Gewinnen, gewinnen.
Beim Erstellen Ihrer Website oder nachdem Ihre Website fertiggestellt ist, müssen Sie möglicherweise Grafiken erstellen (z. B. Fotos zum Anhängen von Blogposts, herunterladbare Checklisten, Instagram-Posts usw.), um sich nahtlos in das Design Ihrer Website einzufügen. Durch das Erstellen von Vorlagen für diese Grafiken wird der tägliche Arbeitsablauf beschleunigt und sichergestellt, dass Ihre Website und Ihre sozialen Kanäle immer professionell aussehen. Wenn Sie keinen Zugriff auf Photoshop oder Illustrator haben, empfiehlt es sich, Powerpoint oder Canva zu verwenden, um Ihre Grafiken zu erstellen. Mit beiden können Sie Vorlagen speichern.
Hier ist eine gute Startvorlage für eine anschaubare Blogpost-Grafik:
Und hier ist eine gute Startvorlage für eine Instagram-Textgrafik:
Einfach bedeutet schließlich nicht einfach
Denken Sie daran, dass ein schöner Ort nicht voller Elemente sein muss - in der Tat gibt es heutzutage nur wenige schöne Orte. Minimale Websites sind angenehm für das Auge und für Anfänger oft schneller / einfacher zu produzieren. Squarespace macht es Ihnen leicht mit vielen vorgefertigten Vorlagen, die sowohl minimal als auch funktional sind. Bing Knallboom fertig.
Vergessen Sie nicht, den Gutscheincode zu verwenden EVERYGIRL18 für 10% Rabatt auf den ersten Kauf!
Haben Sie Fragen zur Gestaltung Ihrer Website? Teilen Sie die Kommentare unten mit, und unser Grafikdesigner wird uns Ihr Feedback geben!
Dieser Beitrag war in Partnerschaft mitяSquarespace, aber alle Meinungen sind die der Redaktion.