In den letzten Jahren wurde flaches Design immer beliebter und dominiert weiterhin die Welt des Web- und Grafikdesigns.
Was ist flaches Design? Im Wesentlichen konzentriert sich flaches Design auf die Benutzerfreundlichkeit und das Fehlen von Schatten, Abschrägungen, Farbverläufen und anderen ästhetischen Elementen, die den Fokus auf das Wesentliche lenken: Ihren Inhalt. Es zeichnet sich normalerweise durch große und mutige Typografie, Liniensymbole und einfarbige Hintergründe mit hellen Farben aus.
Flaches Design wurde zuerst von Microsoft populär gemacht, als sie ihre gesamte Benutzeroberfläche in Windows 8 umgestalteten. Es wurde schnell von Google und Apple übernommen und wurde langsam zum Mainstream. Heute wird es in zahlreichen Webdesign-Vorlagen verwendet.
In diesem Lernprogramm erfahren Sie, wie Sie mit Hilfe eines flachen WordPress-Themes schnell ein eigenes Website-Design erstellen können. Zunächst aber einige großartige Beispiele für flaches Site-Design:
Bevor wir tiefer in dieses Tutorial eintauchen, sind hier fünf Beispiele für flache Websites, die Sie für Ihr nächstes Projekt begeistern:
Blocklevel ist eine Agentur für digitales Design aus den Niederlanden. Ihre Website verfügt über ein flaches Webseitendesign mit dunklem Hintergrund und knalligen Farben auf der gesamten Homepage. Die Site hat auch viel weißen Raum um die Elemente, was der gesamten Site ein sauberes Aussehen verleiht. Aus diesem Grund ist die Website leicht zu navigieren und Besucher werden sofort zu verschiedenen Abschnitten auf der Startseite gezogen.
Made by Fibb ist ein anderes Agenturbeispiel, das flaches Design verwendet. Sie werden sofort die helle gelbe Farbe bemerken, ein Navigationsmenü, das seitlich verschoben wurde, um den Rest der Seite nicht zu stören, und eine kühne Typografie, die leicht zu lesen ist.
Playground Inc. entschied sich für einen hellroten Hintergrund, gepaart mit weißer Typografie in der Kopfzeile und einem weißen Hintergrund mit einer schwarzen und fetten Schrift. Die Website verwendet auch ein flaches Design für Websites mit animierten Symbolen, die die Aufmerksamkeit der Besucher auf sich ziehen.
Geckoboards Spezialität ist die Erstellung von benutzerdefinierten Dashboards, mit denen Geschäftsinhaber und Teammanager wichtige Kennzahlen verfolgen können. Ihre Website verwendet einen dunkelgrauen Hintergrund mit lebendigen Grüntönen und eleganter Typografie in einem flachen Designstil.
Die Reiseagentur TriplAgent entschied sich für ein flaches Design mit violetter Farbe und prächtiger Fotografie, um die verschiedenen Reiseführer auf ihrer Website zu veranschaulichen. Das Hauptmenü wurde zur Seite gedrückt, und die weiße Typografie in Kombination mit den Geister-Tasten macht das Aufrufen von Aktionen leicht zu erkennen.
Wenn Sie eine moderne Website für Ihr Unternehmen, Ihr Portfolio oder Ihren Blog erstellen möchten, ist die Entscheidung für ein flaches Thema eine gute Wahl. In dem heutigen Beitrag zeigen wir Ihnen, wie Sie eine unserer flachen WordPress-Websitevorlagen verwenden, um eine schöne Website zu erstellen, die die Aufmerksamkeit Ihrer Besucher auf sich ziehen wird.
Ich werde das Kirion-Thema verwenden, eine multifunktionale WordPress-Website-Vorlage mit einem stilvollen flachen Design. Dank seiner Vielseitigkeit kann es sowohl für Business-Sites als auch für Portfolio-Sites verwendet werden. Es bietet mehrere vorgefertigte Demos, einen benutzerfreundlichen Seitenersteller und viele Anpassungsoptionen, um es wirklich zu Ihrem zu machen.
Kirion flache WordPress-Website Designvorlage.Bevor Sie mit dem Aufbau Ihres flachen Website-Designs beginnen, müssen Sie einen Domainnamen auswählen und kaufen sowie ein Pro-Hosting-Paket erwerben, in dem alle Ihre Website-Dateien gespeichert werden.
Es ist auch eine gute Idee, ein WordPress-Theme auszuwählen und den Text und die Bilder für Ihre Website vorzubereiten. Auf diese Weise können Sie Inhalte einfach kopieren und einfügen, anstatt sie beim Erstellen Ihrer Website von Grund auf neu zu schreiben.
Die Wahl des richtigen Domainnamens ist sicherlich nicht einfach. Es gibt jedoch ein paar Dinge, die Sie beachten sollten, um Ihre Entscheidungen einzugrenzen.
Denken Sie über den Zweck Ihrer Website nach. Ist es ein Geschäftsstandort für ein bereits bestehendes Unternehmen? Erstellen Sie ein persönliches Portfolio? Vielleicht möchten Sie einen eigenen Blog erstellen?
Für Business-Sites ist es eine gute Idee, sich an den Namen Ihres Unternehmens zu halten, während Besitzer von persönlichen Portfolios normalerweise ihren eigenen Namen verwenden können. Wenn Sie ein Blogger sind, prüfen Sie die Themen Ihres Blogs und wählen Sie einen Namen, der sich auf das bezieht, worüber Sie schreiben. Dies macht es den Lesern leicht zu wissen, was sie inhaltlich erwarten können.
Versuchen Sie, wann immer möglich, die Erweiterung .COM zu verwenden, und denken Sie daran, den Namen leicht zu buchstabieren und leicht auszusprechen.
Sie müssen ein Hosting-Unternehmen auswählen, damit Sie WordPress auf dem Server installieren und Ihre Website für Besucher verfügbar machen können. Es gibt viele Hosting-Unternehmen und WordPress hat sogar Empfehlungen für seriöse Hosts.
Der nächste Schritt besteht darin, ein Design für Ihre Site auszuwählen und zu erwerben. Wie bereits erwähnt, gibt es viele flache WordPress-Themes. Das Beste an der Wahl eines Premium-WP-Themas ist die garantierte Unterstützung durch den Autor. Sie können auch sicher sein, dass das Design regelmäßig aktualisiert wird, damit Sie nicht mit einem veralteten Design der Website stecken bleiben.
Der letzte Vorbereitungsschritt besteht darin, den Inhalt zu schreiben und alle Bilder und visuellen Elemente wie Ihr Logo, Ihr Favicon, Hintergrundbilder oder Muster zu sammeln und an einem leicht zugänglichen Ort zu haben.
Jetzt, da Sie Ihren Domain-Namen, ein Hosting-Paket, ein Pro-Thema und alle Ihre Inhalte bereit haben, können Sie mit dem Design Ihrer Website beginnen. Sie müssen WordPress, das Design, die erforderlichen Plugins installieren, Ihre Seiten einrichten und Ihre Site anpassen. Lass uns anfangen!
Wenn Sie Ihre Hosting-Pakete erwerben, erhalten Sie vom Hosting-Provider eine Willkommens-E-Mail mit den Informationen zu Ihrem Konto. Sie benötigen den Benutzernamen und das Kennwort, die Sie von Ihnen erhalten haben, damit Sie sich in Ihrem Konto-Dashboard anmelden können. Blättern Sie nach der Anmeldung zum Abschnitt Website oder Scripts und suchen Sie nach WordPress. Wählen Sie es aus und befolgen Sie die Schritte, um WordPress auf Ihrer Site zu installieren.
In den meisten Fällen müssen Sie den Site-Titel und die Beschreibung eingeben, den gewünschten Benutzernamen und das Kennwort festlegen sowie Ihre E-Mail-Adresse angeben. Nachdem Sie alle Informationen ausgefüllt haben, klicken Sie auf Installieren Taste.
Der Installationsvorgang dauert normalerweise einige Minuten. Danach wird eine Meldung angezeigt, dass WordPress installiert wurde. Um sich bei Ihrem Dashboard anzumelden, gehen Sie auf www.yoursitename.com/wp-admin und geben Sie den Benutzernamen und das Kennwort ein, die Sie während der Installation erstellt haben.
Nachdem Sie sich in Ihrem Dashboard angemeldet haben, müssen Sie das von Ihnen gekaufte WordPress-Theme installieren. Gehe zu Darstellung> Themen> Neues hinzufügen. Dann klick Theme hochladen.
Suchen Sie danach den gezippten Ordner, der die Dateien des WP-Themes enthält, und laden Sie es hoch. Wenn die Installation abgeschlossen ist, klicken Sie auf aktivieren Sie.
Wenn Sie das Kirion-Design wie in diesem Lernprogramm verwenden, müssen Sie das übergeordnete Design LayersWP installieren, das kostenlos heruntergeladen werden kann, und Sie müssen es nicht aktivieren. Laden Sie einfach LayersWP hoch, laden Sie dann das Kirion WordPress-Design hoch und aktivieren Sie es.
Im nächsten Schritt installieren Sie alle erforderlichen Plugins. In Ihrem Dashboard wird eine Benachrichtigung angezeigt, die Sie darüber informiert, welche Plugins erforderlich sind. Ein Link führt Sie direkt zum Installationsbildschirm.
Installieren Sie die erforderlichen WordPress-Plugins.Markieren Sie alle Plugins und wählen Sie Installieren aus dem Dropdown-Menü. Wenn die Plugins installiert wurden, gehen Sie zu Plugins> Alle Plugins und wählen Sie Inaktive Plugins dann wähle aktivieren Sie aus dem Dropdown-Menü.
Nachdem das WordPress-Design und die Plugins installiert und aktiviert wurden, können Sie mit dem Einrichten der Seiten Ihrer Website beginnen und Farben, Schriftarten und mehr anpassen. In den meisten Fällen ist der Import der Demo-Inhalte der beste Weg, um die Zeit für die Einrichtung des Themas zu beschleunigen und das Bearbeiten der Inhalte zu vereinfachen.
Wenn Sie den Demo-Inhalt verwenden möchten, müssen Sie zu Ihrem Dashboard gehen und das Untermenü aufrufen Extras> Importieren. Dort finden WordPress Importer, Installieren Sie es und klicken Sie dann auf Führen Sie den Importer aus. Normalerweise hat Ihr Designordner einen Unterordner mit dem Namen Demo-Import oder Beispieldaten. Verwenden Sie die XML-Dateien in einem dieser Ordner, um alle Beiträge, Seiten, Layouts und Bilder zu importieren.
Wenn Sie das Kirion-Thema verwenden, wechseln Sie zu Ebenen> Neue Seite hinzufügen. Wie Sie dem folgenden Screenshot entnehmen können, enthält Kirion mehrere Seitenvorlagen, die Sie zum Erstellen Ihrer Website verwenden können. Ich habe das gewählt Kirion Home Layout Eins für die Homepage.
Geben Sie den Seitennamen ein und klicken Sie auf Fahren Sie mit dem Anpassen fortr. Ihre Seite wird sofort erstellt und Sie werden zur Seite weitergeleitet Customizer Bildschirm.
Wenn der Customizer geladen wird, sehen Sie alle verfügbaren Optionen. Sie können das Layout bearbeiten, indem Sie auf klicken Layout bearbeiten Möglichkeit. Der Editor ist ziemlich unkompliziert und einfach zu bedienen. Sie müssen lediglich das gewünschte Element auswählen und den Inhalt durch Ihr eigenes ersetzen. Sie können auch den Hintergrund bearbeiten, eigene Bilder hochladen, Schiebereglerbilder ersetzen und vieles mehr.
Layout bearbeiten.Um weitere Seiten zu erstellen und zu bearbeiten, gehen Sie zu Ebenen> Neue Seite hinzufügen und wählen Sie das Layout, mit dem Sie arbeiten möchten.
Neue Website-Seiten in Kirion hinzufügen.Wenn Sie die Stile bearbeiten möchten, wählen Sie Seiteneinstellungen. Hier können Sie Farben und Schriftarten bearbeiten, Ihr eigenes Logo hochladen und vieles mehr.
Anpassen der Farben in Ihrer flachen Website.Schließlich müssen Sie ein Menü für Ihre Site erstellen. In dem Customizer, klicke auf Menüs> Hauptmenü. Wählen Sie zunächst einen Ort für das Menü. Ich habe gewählt Header Speisekarte. Klicken Sie dann auf Füge Artikel hinzu. Fügen Sie alle Seiten hinzu, die Sie erstellt haben, und speichern Sie dann das Menü.
Wenn Sie mehr über flaches Design erfahren und die Grundsätze auf Ihre Website anwenden möchten, haben wir einige Tutorials und Kurse zusammengestellt, die Ihnen den Einstieg erleichtern:
Dieses Tutorial enthält die besten Tipps zum Erstellen von Grafiken, die für jede Flat-Website gut geeignet sind. Sie lernen ein wenig über die flache Design-Historie sowie über das Erstellen einfacher, aber wirkungsvoller Symbole, die Verwendung von Farben und mehr.
In diesem Kurs erfahren Sie mehr über die flache Ästhetik und wie Sie sie in Ihren eigenen Entwürfen erreichen können. Sie erfahren, wie Sie Ihre Photoshop-Datei einrichten, ein Layout für eine flache Website erstellen und alle Elemente entwerfen, die verwendet werden sollen, z. B. Symbole, Formulare, Menüs und mehr.
Wenn Sie gerne mit Affinity Designer arbeiten, werden Sie diesen Kurs lieben. Sie erfahren alles über das Erstellen von flachen Vektor-Icons. nützliche Tipps und Tricks, um mit grundlegenden geometrischen Formen zu arbeiten, sie zu ändern und verschiedene Formen zum Kombinieren der Formen zu verwenden. Der Kurs behandelt auch das Ausrichten und Anordnen der Objekte und der Hauptfunktionen des Programms.
Versuchen Sie diesen Kurs, wenn Sie UI-Designelemente erstellen möchten. In diesem Kurs wird beschrieben, wie Sie Menüs, Schaltflächen, Registerkarten, Videoplayer, Datumsauswahl und andere Elemente der Benutzeroberfläche mit einem flachen Designstil erstellen.
Dieser Kurs behandelt sowohl Adobe Photoshop als auch Adobe Illustrator, zwei leistungsstarke Programme, die als Industriestandard in Bezug auf Design gelten. In diesem Kurs lernen Sie, wie Sie flache Icon-Designs erstellen, wie Sie diese exportieren und wie Sie Ihre kreativen Bemühungen monetarisieren können.
Die Erstellung einer flachen Website war dank WordPress und schönen, hochwertigen und hochwertigen Flat-Themes nie einfacher. Beginnen Sie noch heute mit der Arbeit an Ihrer Flat-Website.