Es gibt Zeiten, da muss man etwas spontan entwerfenund Web-Designer nicht zur Hand sind.
In Zeiten wie diesen können wir uns nicht zurücklehnen und schwelgen - wir müssen die Gestaltung übernehmen.
Hier sind einige gute Tipps für WordPress-Entwurfdie jedem Entwickler zum Erfolg verhelfen, auch wenn Sie die Frist überschreiten.
Wählen Sie Ihre Einstellungen mit Bedacht
Wenn Sie in Eile sind, finden Sie WordPress-Theme mit vorgefertigtem Layout und Demoseiten. Verwenden Sie visuelle Builder wie Elementor oder Beaver Builder, können Sie das Layout schnell anordnen und gestalten und vorhandene Elemente hinzufügen. Auf diese Weise können Sie innerhalb weniger Stunden eine funktionale Website erstellen und in Betrieb nehmen. Wenn Sie nicht aufpassen, kann sie zwar etwas generisch aussehen, aber sie wird funktionieren. Erwägen Sie das Hinzufügen von benutzerdefinierten Designs und Animationen, um ihr Persönlichkeit zu verleihen.
Anspruchsvoll sein
Dies ist wahrscheinlich einer der wichtigsten Tipps, die man Ihnen geben kann.
Designer, die ein Auge für Ästhetik und Design haben, können manchmal verrückt werden. Wenn Sie jedoch nicht mit der angeborenen Fähigkeit geboren wurden, 6 Versionen der Farbe Blau zu benennen, ist es sicherer, elegant und minimalistisch zu bleiben. Versuchen Sie minimalistisches Design mit bunten Farbakzenten und ein paar subtilen Animationen hier und da.
Beispiele für großartiges minimalistisches Design
Damit der minimalistische Stil funktioniert, müssen Sie mehr einbeziehen Details . Zum Glück für Sie können die Details, von denen ich spreche, mit etwas gestaltet werden, mit dem Sie bestens vertraut sind - mit Code.
Verwenden Sie Photoshop oder Illustrator nicht, wenn Sie wissen, dass Sie nicht gut darin sind.
Ich benutze Photoshop seit mehr als 10 Jahren aktiv und habe trotzdem nur ein "C" im Upwork-Photoshop-Test erhalten. Stellen Sie sich meine Überraschung vor, als ich herausfand, dass ich nur 30% der Photoshop-Funktionen aktiv nutze. Das Gleiche gilt für KI. Was ich damit sagen will, ist: Wenn Sie gut mit Code und CSS umgehen können, verwenden Sie CSS. Das spart Ihnen eine Menge Zeit.
Verwenden Sie Anwendungen und Tools, mit denen Sie vertraut sind. So können Sie schneller und effizienter gestalten. Manche Leute finden Canva eine sehr einfache und intuitive Lösung.
Sass oder Less lernen
Sass und Less sind CSS-Erweiterungssprachen. Sie fügen zusätzliche nützliche Merkmale und Funktionen zu CSS hinzu, z. B. Variablen, Funktionen, Verschachtelung und arithmetische Operationen. Ausführliche Informationen und Dokumentationen finden Sie auf den offiziellen Websites der beiden Sprachen.
Ich weiß, dass Sie das nicht wirklich nach ein paar Tagen Scouting tun werden, aber es ist eine Überlegung wert. Sobald Sie eine dieser Erweiterungen erlernt haben, werden Sie Ihren Arbeitsablauf drastisch verbessern.
Passen Sie den Code anderer Entwickler an Ihre Bedürfnisse an
Es gibt viele tolle Leute im Netz, die ihren Code kostenlos zur Verfügung stellen. Wenn Sie sich in einer momentanen Krise befinden, kann die Änderung Ihres bestehenden Designs die Antwort auf Ihre Gebete sein. Ihr Platz ist Entwurfsmuster auf Codepen. Sie finden dort vorcodierte Schaltflächen, Akkordeons, Schieberegler, Layouts und vieles mehr.
Verwenden Sie nach Möglichkeit SVG-Bilder
SVG-Bilder sind skalierbare Vektorgrafiken. Verwenden Sie sie für Ihr Logo, Icons und andere Grafiken auf Ihrer Website. Sie verlieren nicht an Qualität, auch wenn Sie das Bild skalieren.
Beachten Sie die volle Leistungsfähigkeit von SVG:
- SVG-Bilder können mit jedem Texteditor erstellt und bearbeitet werden
- SVG-Bilder können durchsucht, indiziert, gestaffelt und komprimiert werden
- SVG-Bilder sind skalierbar
- SVG-Bilder können in hoher Qualität und beliebiger Auflösung gedruckt werden
- SVG-Grafiken verlieren NICHT an Qualität, wenn sie skaliert oder in der Größe verändert werden.
- SVG ist ein offener Standard
- SVG-Dateien sind reines XML
Javascript-Bibliotheken und -Frameworks verwenden
Ich hoffe sehr, dass Sie nicht zu den WordPress-Entwicklern gehören, die immer noch ausschließlich PHP verwenden. JavaScript ist aus mehreren Gründen die Programmiersprache unserer Zeit.
JavaScript ist unter anderem deshalb so beliebt, weil es eine große Anzahl von quelloffenen Bibliotheken, Frameworks und Erweiterungen . Wenn Sie diese kostenlosen Ressourcen nutzen, werden Sie schneller, besser und effizienter arbeiten können.
Hier ist die Liste der JS-Bibliotheken von Drittanbietern, die bereits in WordPress enthalten sind. Sie können sie sofort verwenden, ohne weitere Bedingungen.
- js
- CodeMirror
- Mäher
- JQuery
- imageareaselect
- Jcrop
- jQueryUI
- swfupload (abgelehnt)
- ThickBox
- TinyMCE
Wählen Sie 2 Farben
Wählen Sie eine Primär- und eine Sekundärfarbe, die gut zusammenpassen. Verwenden Sie Anwendungen wie Palette für Materialien и Farbrechner, für helfen Sie sich selbst bei dieser Aufgabe. Verwenden Sie Ihre Primär- und Sekundärfarben durchgängig für alle Elemente, die Sie in einer Farbpalette unterbringen wollen. Für Layout-Hintergründe und Text fügen Sie Ihrer Palette entsprechend Neutraltöne hinzu. Fügen Sie nicht zu viele Farben in den Mix ein. Halten Sie sich an den Minimalismus.
Wählen Sie 2 Schriftarten
Wählen Sie zwei komplementäre Schriftfamilien für Ihre Website. Serifenlose Schriften eignen sich besser für Überschriften, während Serifenschriften besser für Textinhalte geeignet sind.
Bezahlen für Logodesign
Es tut mir leid, Ihnen das sagen zu müssen, aber ein Logo zu entwerfen ist nichts, was Sie selbst tun sollten. Ein Logo ist das wichtigste visuelle Element eines jeden Unternehmens. Es ist die visuelle Identität Ihres Unternehmens, und Sie möchten, dass es richtig ausgeführt wird. Verzichten Sie auf die Verwendung allgemeiner Logoersteller und bezahlen Sie einen Designer. Engagieren Sie notfalls einen Freiberufler. Wenn Geld ein Problem ist, versuchen Sie, einen Designstudenten zu finden, der voller frischer Ideen steckt, und Sie werden ihm wahrscheinlich deutlich weniger bezahlen.
Fotos und Videos in hoher Qualität auswählen
Der Kunde hat Ihnen keine Fotos für die Website zur Verfügung gestellt? Oder hat er Ihnen welche zur Verfügung gestellt, aber sie waren unscharf, verpixelt und einfach nur schrecklich, richtig?
Wir alle waren schon einmal in einer ähnlichen Situation. Die einfachste Lösung ist die Verwendung hochwertiger Archivbilder. Es gibt viele kostenlose und hochwertige Bibliotheken, aus denen man wählen kann.
Mein persönlicher Favorit ist Unsplash für kostenlose Fotos und Freepik für alle Ressourcen.
Die beiden beliebtesten und wahrscheinlich größten kostenlosen Fotobibliotheken sind https://www.pexels.com/ и https://stocksnap.io/
Viele der Fotos auf diesen Websites werden als Demo-Inhalte in WordPress-Themen verwendet. Vermeiden Sie es, Fotos zu verwenden, die Sie schon einmal gesehen haben, da Ihre Website dann zu generisch aussieht. Wenn Sie etwas Spezielles und weniger "Abgenutztes" suchen, empfehle ich Seiten wie https://www.reshot.com/, die sich für Fotos ohne Freiheitsentzug entschieden haben. Eine weitere Option ist https://nos.twnsnd.co/, die alte, gemeinfreie Archive enthält und ohne urheberrechtliche Einschränkungen genutzt werden kann.
Für erstklassige Fotos und Videos sollten Ihre ersten Anlaufstellen sein: https://www.shutterstock.com/ и https://www.gettyimages.com/
Diese deutsche Website ist ebenfalls einen Blick wert: https://www.photocase.com
Seien Sie nicht geizig, wenn Sie nach tadellosen Ressourcen suchen. Wenn Sie das perfekte Bild oder Video finden, zahlen Sie dafür. Es wird sich lohnen.
Sie können verwenden CSS-Filter Für Bilder für verbessern Sie Ihre Archivfotos noch weiter.
Bilder optimieren
Achten Sie darauf, Bilder für das Web zu optimieren. Achten Sie beim Herunterladen von Bildern darauf, dass Sie sie vor dem Hochladen in WordPress auf die benötigte Größe reduzieren. Zur weiteren Glättung und Optimierung empfehle ich Smush Plugin.
Wenn Sie Photoshop oder ein ähnliches Bildbearbeitungsprogramm verwenden, stellen Sie sicher, dass Sie die Aufnahme für Web . Speichern Sie Fotos und Bilder mit vielen Farben als .jpg-Dateien und speichern Sie Grafiken im png-Format. Beim Speichern für das Web haben Sie die Möglichkeit, die Qualität der jpg- und png-Datei zu wählen. Hierfür gibt es keine wirkliche Regel - nutzen Sie den Vorschaubildschirm und vergewissern Sie sich, dass Sie die Qualität Ihres Bildes nicht völlig ruiniert haben, bevor Sie es speichern.
Einen klaren CTA haben
Call-to-Actions (CTAs) sind Ihre Möglichkeit, mit dem Nutzer zu interagieren. Wenn Nutzer auf einen CTA klicken, erfüllen sie gewissermaßen den Zweck einer Website.
Daher müssen Sie sicherstellen, dass die CTA-Schaltflächen gut sichtbar, lesbar und lesbar sind.
Wo soll der CTA platziert werden? Trader haben alle über wissenschaftliche Methode dazu. Natürlich hängt es vom Inhalt Ihrer Website ab, ich kann Ihnen nur raten, sie unverwechselbar zu machen.
Vergessen Sie Ihre mobilen Nutzer nicht. Für Handy und Desktop gelten nicht dieselben CTA-Regeln. Siehe Bewährte Praktiken für mobile CTA .
Animationen sind cool, wenn sie richtig gemacht sind
Die Erstellung einfacher CSS- oder JavaScript-Animationen kann Ihr Design wirklich aufwerten und es ausgefeilt und professionell aussehen lassen. Das Geheimnis ist auch hier, subtil zu sein und es nicht zu übertreiben.
Gute Beispiele:
https://www.monogranofelicetti.it/en/
"Das Schlimmste, was man tun kann" zum Beispiel:
Ikonen - kleine Akteure mit großen Aufgaben
Icons sind ein äußerst wichtiger Bestandteil Ihrer Website, vor allem, wenn Sie meinem Rat gefolgt sind und sich für ein minimalistisches Design entschieden haben. Elegante Icons können Ihr gesamtes Webdesign wirkungsvoll aufwerten.
Als Entwickler sollten Sie sich darüber im Klaren sein, dass gute Icons ziemlich schwierig zu erstellen sind. Denken Sie nicht einmal daran, sie von Grund auf neu zu erstellen. Finden Sie kostenlose Icons in Icon-Bibliotheken wie https://www.flaticon.com/oder https://icons8.com/
Finden Sie ein Icon-Paket, das zu Ihrem Logo oder dem Stil Ihrer Website passt, und Sie ersparen sich eine Menge Arbeit und Mühe. Mischen Sie niemals Icons aus verschiedenen Paketen - das sieht einfach unprofessionell aus.
Für zusätzliche Stilpunkte können Sie die SVG-Symbole animieren. Am besten geht das mit Snap - Javascript-Bibliothek, die für die Animation von SVG-Grafiken entwickelt wurde. Wenn Sie aus irgendeinem Grund nicht möchten, dass Sie kodieren können Sie die App verwenden SVGator . Es handelt sich um eine kostenpflichtige App mit einer einmonatigen kostenlosen Testversion, die einen Versuch wert ist.
Der Teufel steckt im Detail:
Für einen minimalistischen Stil, der gut aussieht, müssen Sie die Ärmel hochkrempeln und die zusätzliche Arbeit in die Details stecken, auf die es ankommt. Das kann man mit Code machen.
Nicht alles ist schwarz und weiß
Vermeiden Sie rein schwarze # 000 oder rein weiße #FFF Farben. Sie sind zu hart für das Auge. Verwenden Sie etwas weichere Varianten wie #EFEFEF für Weiß und # 181818 anstelle von Schwarz.
Grenzen sind altmodisch
Versuchen Sie zu verwenden CSS box-shadow-Eigenschaft anstelle eines Elementrahmens. Dies macht Ihr Design glatter und subtiler.
Einfarbige 1px- oder 2px-Ränder können bei manchen Designs cool und retro aussehen. Und verwenden Sie bitte niemals gepunktete oder gestrichelte Ränder, bitte!
Stil der Trennwände <hr>
Trennwände sind in der Regel langweilige Elemente, die mit ein wenig Kodierung eine sehr positive Wirkung haben können.
Elementor Builder hat eine sehr coole Funktion für die Gestaltung von Unterteilungen.
Rechtecke sind langweilig. Seien Sie kein Rechteck.
Ungleichmäßige Latten ziehen mehr Aufmerksamkeit auf sich. Verwenden Sie sie sparsam für CTAs oder Schaltflächen mit hoher Hierarchie.
Menüstil "Hamburger"
Hamburger-ähnliche Menüs sind ein Muss auf dem Handy, aber sie können auch auf breiten Bildschirmen cool aussehen. Ich habe auf CodePen eine Sammlung von Hamburger-Menüs gefunden, die ich gerne mit Ihnen teilen möchte. Wenn Sie nicht wissen, wie man ein Hamburger-Menü erstellt, lesen Sie weiter Lektion in diesem Artikel .
Farbverläufe verwenden
Warum versuchen Sie es nicht mit Farbverläufen, anstatt eine einzige Hintergrundfarbe zu verwenden? Sie können Ihre eigenen Farbverläufe leicht erstellen mit Editor fürGradient von colorzilla und kopieren Sie den CSS-Code einfach in Ihre WordPress-Website.
Übertreiben Sie es nicht mit der Anzahl der Farben im Farbverlauf und achten Sie darauf, dass er nicht zu dunkel wird. Wenn Sie Schwierigkeiten haben, eine eigene Farbkombination zu erstellen, oder nicht wissen, was gut funktioniert, können Sie jederzeit die kostenlose vordefinierte Farbverläufe .
Farbverläufe können auch als Overlay für Hintergrundfotos, Symbole, Schaltflächen und andere Designelemente verwendet werden. Dies ist ein sehr guter Trick, um Konsistenz zu schaffen. Wenn Sie einen Farbverlauf über ein Hintergrundbild legen möchten, verwenden Sie die Eigenschaft &:before (SASS), um Ihren Farbverlauf hinzuzufügen, und verringern Sie einfach seine Deckkraft auf 60 - 70%. So sieht es aus:
Zusammenfassend
Es ist immer besser, einen professionellen Designer zu beauftragen, aber manchmal müssen wir es selbst tun.
Wenn Sie es eilig haben, wählen Sie Ihre Einstellungen mit Bedacht. Installieren Sie ein schnelles minimalistisches Thema und importieren Sie eine Demo dafür. Stylen Sie die Details, um Ihr Design professioneller und weniger generisch zu gestalten. Nutzen Sie Ihre Stärken (Code) so weit wie möglich. Wählen Sie stets erprobte Farbkombinationen und hochwertige Bilder und Videos. Achten Sie darauf, dass Sie Icon Packs vom gleichen Autor und im gleichen allgemeinen Stil verwenden. Für Logo bezahlen. Am wichtigsten ist, dass Sie bei Ihrem Design konsequent und subtil vorgehen.
Viel Glück beim Entwerfen und Codieren!