Eine Website dient als entscheidendes Tor für neue Geschäftsmöglichkeiten. Der Aufbau einer neuen Website oder deren Neugestaltung kann eine herausfordernde Aufgabe sein. Nachdem ich die Neugestaltung der Website meines Unternehmens geleitet hatte, beschloss ich, einen Teil unserer Reise zu teilen. Wenn Sie erwägen, eine neue Website zu erstellen oder Ihre aktuelle Website neu zu gestalten, hoffen wir, dass dies Ihnen dabei hilft, Ihre Reise reibungsloser zu gestalten.  Bewertung  Unsere Website ist für uns eine wichtige Eingangstür für neue Geschäfte. Als Webentwicklungs-Boutique verrät die Art und Weise, wie wir uns online präsentieren, viel über unsere Arbeit und darüber, was Kunden erwarten können, wenn sie mit uns zusammenarbeiten.  Als wir beschlossen, eine neue Website zu erstellen, die zu unserer neuen Marke passt, war uns klar, dass wir den Worten Taten folgen und unseren Kunden und dem Publikum eine Website von guter Qualität zeigen mussten. Unser Team hat sich in der Vorbereitungsphase vor Beginn der Arbeit viele Gedanken gemacht und sich viel Mühe gegeben.  Wir begannen mit einer einfachen Frage: Warum brauchen wir eine Website oder ein Redesign? Dies ist eine hervorragende Möglichkeit, den Fokus auf Ihre Ziele zu richten und Ablenkungen zu vermeiden.  Nachdem wir unser Warum verstanden hatten, durchliefen wir den Prozess der Identifizierung unserer Zielgruppe. Für wen wir diese Website erstellt haben. Es ist wichtig, genau zu verstehen, wen Sie erreichen möchten und was Sie ihnen über Ihre Marke und Ihre Arbeit mitteilen möchten.  Dann begannen wir darüber nachzudenken, welche Botschaft wir diesem Publikum vermitteln wollten, wie wir gesehen werden wollten und, was am wichtigsten ist, wie wir beweisen könnten, dass wir gut in dem sind, was wir tun. Ein großer Teil dieser Botschaft wurde während der Markenerstellung durchdacht (Sehen Sie sich an   ), und wir mussten dies in die neue Website übertragen. , wie wir unsere neue Marke geschaffen haben  Da wir bereits online präsent waren, haben wir uns etwas Zeit genommen, unsere alte Website zu bewerten und die Funktionen und Aspekte aufzulisten, die unserer Meinung nach gut funktionierten und die unserer Meinung nach fehlten.  Es war in diesem gesamten Prozess auch sehr wichtig, im Anschluss einen Wettbewerbs-Benchmark durchzuführen, um zu verstehen, was Unternehmen in unserer Branche tun. Wir schauen uns auch auf anderen Arten von Websites um, um Referenzen und Inspiration zu erhalten. Dies lieferte uns wertvolle Erkenntnisse und half uns, Wiederholungsfehler oder das Versäumen wesentlicher Funktionen zu vermeiden.  Der letzte Schritt dieser Vorbereitungsphase war die Liste der Features und Funktionalitäten, die wir auf unserer Website haben wollten. Das war, als würde man eine Wunschliste erstellen, als könnten wir alles tun, was wir wollten. Die Liste wurde später priorisiert und wir wählten die Funktionen aus, die ein MUSS waren, und diejenigen, die NICE TO HAVE waren und später implementiert werden konnten. Es ist wichtig, sich zunächst auf die kritischsten Elemente zu konzentrieren.  Einige dieser Schritte wurden gemeinsam mit dem gesamten Team durchgeführt. Da wir ein kleines Team sind, wollten wir alle in gewissem Maße in diesen Prozess einbeziehen. Nach dieser ersten Einschätzung begannen wir zu teilen und zu erobern und hatten engagierte Teammitglieder, die für die Umsetzung unserer neuen Website in die Realität verantwortlich waren.  Design  Wir waren begeistert, in den Designprozess für unser Webprojekt einzutauchen. UI/UX-Design ist ein entscheidender Aspekt jedes Webprojekts. An uns war ein multidisziplinäres Team beteiligt, aber der Designer war der Star der Show und verantwortlich für die visuelle Darstellung der Botschaft, die wir unserem Publikum vermitteln wollten.  Für den Designer war es wichtig, die Bedürfnisse und Erwartungen des Projekts klar zu verstehen, um unsere Botschaft visuell zu vermitteln und den Inhalt entsprechend zu strukturieren. Unser Ziel war ein prägnantes, ansprechendes Design mit dem richtigen Ton.  In dieser Phase des Projekts haben wir folgende Schritte befolgt:  Wir haben von Anfang an einen benutzerzentrierten Ansatz verfolgt. Wir haben uns darauf konzentriert, wie unsere Zielgruppe uns wahrnehmen und mit uns interagieren würde. Aus diesem Grund begannen wir mit der Arbeit an der Informationsarchitektur, entschieden uns für die benötigten Seiten, Abschnitte und Komponenten und erstellten einen ersten Entwurf der Kopie.  Als Nächstes haben wir Low-Fi-Wireframes erstellt, um eine grobe, Low-Fidelity-Darstellung des Layouts und der Funktionalität bereitzustellen. Dadurch konnten wir Ideen testen und experimentieren, bevor wir zu viel Zeit und Mühe in das Design investierten. In dieser Phase haben wir auch den allgemeinen Benutzerfluss berücksichtigt.  Diese Phase war von entscheidender Bedeutung, da sie den Grundstein für die gesamte Landschaft der zu verwendenden Komponenten legte: die Erstellung eines Designsystems. Wir haben mit   eine Bibliothek erstellt, die Designmuster, Richtlinien und Beispiele enthielt. Diese Bibliothek war eine einzige Quelle der Wahrheit, die die Kohärenz zwischen allen UI-Elementen gewährleistete und den Grundstein für Skalierbarkeit bei der Einführung neuer Komponenten legte. Figma  Nachdem das Designsystem definiert war, erstellten wir die Layouts in High Fidelity. Wir haben die Benutzeroberfläche auf die bis dahin erstellten Lo-Fi-Wireframes angewendet. Zu diesem Zeitpunkt wurde das Design vollständig auf die Einhaltung der Barrierefreiheitsanforderungen getestet und wir haben genauere Schlussfolgerungen hinsichtlich der Inhaltsdarstellung gezogen.  Wir haben während des gesamten Prozesses   verwendet, was die Zusammenarbeit mit dem Team und die Durchführung von Iterationen erleichterte. Nach einigen Iterationen hatten wir eine optimale Version, an der unsere Entwickler arbeiten konnten. Figma  Entwicklung  Wir haben uns auf die Auswahl des Tech-Stacks und die Umsetzung der Designs in der Entwicklungsphase des Projekts konzentriert. Wir arbeiteten in Sprints basierend auf einem Produkt-Backlog mit User Stories, die von unserem Projektmanager erstellt wurden.  Auswahl des Tech-Stacks  Im Verlauf der Designphase untersuchten wir, welche Technologien am besten zu der Website passen, die wir erstellen wollten. Dies konnten unsere Entwickler anhand der Ergebnisse der vorangegangenen Phasen ermitteln.  Die Wahl des richtigen Tech-Stacks ist in der heutigen Welt wichtiger denn je, da viele Optionen zur Verfügung stehen. Wir haben verschiedene Kriterien berücksichtigt, wie zum Beispiel die Anforderungen des Projekts, die Expertise des Teams, die Verfügbarkeit von Ressourcen, Kosten, Leistung, Sicherheit und Skalierbarkeit.  Für dieses Projekt wollten wir eine einfache, schnelle und schöne Website.  Wir haben einen modularen Ansatz gewählt und die Komponenten, Features und Funktionen der Website in kleinere, wiederverwendbare Komponenten zerlegt. Dieser Ansatz ermöglichte es uns, Komponenten in verschiedenen Teilen der Website wiederzuverwenden, was die Zusammenarbeit zwischen Entwicklern und Designern erleichterte, das Testen und Warten der entwickelten Inhalte erleichterte und letztendlich eine verbesserte Leistung und kürzere Seitenladezeiten ermöglichte.  Unsere Entwickler plädierten für   , ein All-in-One-Webframework für schnelle, inhaltsorientierte Websites. Sie freuten sich darauf, das schnellste inhaltsorientierte Framework auszuprobieren, das es gibt. Drei Dinge erregten die Aufmerksamkeit unseres Teams: serverseitiges Rendering, Leistungsergebnisse und Flexibilität. Astro  Für die einfache Website, die wir anstrebten, benötigten wir kein vollwertiges Content Management System (CMS), sondern wollten es auch technisch nicht versierten Teammitgliedern ermöglichen, an der Website zu arbeiten. Wir haben uns ausführlich über verschiedene CMS-Optionen informiert und uns letztendlich aufgrund der robusten Funktionen und Benutzerfreundlichkeit für Sanity entschieden.   verfügte außerdem über eine großartige Dokumentation und ein sehr großzügiges kostenloses Kontingent. Sanity  Neben Astro und Sanity haben wir uns für   für unser Projekt entschieden. Nun ja, das tun wir immer. Die nahtlosen Bereitstellungs- und Hosting-Funktionen von Netlify sind in der Regel unser bevorzugtes Content Delivery Network (CDN). Wir haben auch verschiedene Bibliotheken für Animationen verwendet, auf die wir in einem anderen Blog-Beitrag (demnächst) ausführlicher eingegangen sind. Netlify  Ein verbesserungswürdiger Aspekt war das Formular, das wir erstellt haben, damit potenzielle Kunden Kontakt zu uns aufnehmen können. Wir haben das Formular von Netlify verwendet, das sich aufgrund der Probleme des Formulars mit Astro als nicht die beste Option herausstellte. Wir haben eine Lösung (Hotfix) gefunden und eine einzige Seite für unser Kontaktformular erstellt. Wir überlegen immer noch, wie wir dies für die Zukunft ändern können.  Entwicklungsprozess  Bevor mit der Entwicklungsphase begonnen wurde, erstellte der Projektmanager ein Produkt-Backlog mit Details zu allen Features und Funktionalitäten, die das Team entwickeln sollte. Diese User Stories machten den Entwicklungsprozess reibungslos und transparent. Vor dem Erstellen der Website musste das Team die Features und Funktionalitäten priorisieren, die Teil der ersten Website-Bereitstellung sein würden.  Für das Code-Repository verwendeten wir   und nutzten dessen Projektmanagement-Boards und Sprint-Planungsfunktionen. GH ist normalerweise unsere Wahl für das Versionskontrollsystem, aber wir haben begonnen   zu verwenden und lieben es für das Projektmanagement. GitHub (GH) , Notion Projects  Wir begannen mit der Umsetzung der Entwürfe. Wir folgten der agilen Methodik und arbeiteten in Sprints, um sicherzustellen, dass wir auf dem richtigen Weg waren und innerhalb der festgelegten Fristen Ergebnisse lieferten. Eine kleine Anmerkung: Dies war ein internes Projekt und unsere Hauptpriorität lag auf den Projekten unserer Kunden. Das bedeutet, dass die Sprints stattfinden würden, kurz nachdem unser Team eine Pause von anderen Projekten eingelegt hatte. Normalerweise arbeiten wir nicht so, aber so haben wir es geschafft und daraus gelernt, es nicht zu wiederholen.  Ein weiterer entscheidender Punkt, um den gesamten Entwicklungsprozess transparent und agil zu gestalten, war die Bereitstellung einer Staging-Anbindung bereits zu Beginn des Projekts. Alle Projektbeteiligten hatten Zugriff darauf, und wir konnten die erzielten Fortschritte verfolgen, Feedback geben und bei Bedarf Änderungen und kleine Anpassungen vornehmen.  Während der Entwicklungsphase konnte das Marketingteam mit der Einfügung von Inhalten beginnen. Dies half ihnen, sich an Sanity zu gewöhnen und trug zu realistischeren Feedbackrunden bei. Insgesamt war die Entwicklungsphase eine Gemeinschaftsarbeit, bei der das gesamte Team zusammenarbeitete, um die Projektziele zu erreichen.  Qualitätskontrolle  Während der Entwicklung haben ein oder zwei Entwickler alle Features und Funktionen getestet. Der gesamte Code durchlief eine Codeüberprüfung und am Ende führten wir einen letzten Sprint durch, um zu testen und sicherzustellen, dass die Website ordnungsgemäß funktioniert.  Die Tests zur Benutzerfreundlichkeit und Barrierefreiheit wurden bereits während der Designphase durchgeführt, wie oben beschrieben. Für allgemeine Tests haben wir uns an den User Stories und den von unserem Projektmanager erstellten Akzeptanzkriterien orientiert.  Funktionstest: Bestätigen Sie, dass alle Funktionen wie erwartet funktionierten.  Leistungstest: Überprüfen Sie die Geschwindigkeitsbelastung und andere Ergebnisse mit Lighthouse.  Cross-Browser- und Cross-Device-Tests: Testen Sie die Website auf verschiedenen Webbrowsern (z. B. Chrome, Firefox, Safari, Edge) und Geräten (Desktop, Mobilgerät, Tablet), um Kompatibilität und ein konsistentes Benutzererlebnis sicherzustellen. Hierfür haben wir   verwendet. Ihr Produkt ist sehr intuitiv zu bedienen und ermöglicht viele Tests. BrowserStack  Go-Live-Vorbereitung  Wir waren alle bereit, die Website auf dem Staging-Link live zu schalten, aber bevor wir damit fortfuhren, mussten wir zwei entscheidende Dinge sorgfältig abwägen – die Weiterleitung auf die neue Domain und SEO. Da wir vorhatten, die Domain zu ändern, war es von entscheidender Bedeutung, sicherzustellen, dass unser SEO-Ranking keinen Einbruch erleidet.  Aus diesem Grund haben wir uns entschieden, 301-Weiterleitungen zu verwenden, um Suchmaschinen und Browser darüber zu informieren, dass die ursprüngliche URL dauerhaft durch eine neue ersetzt wurde. Folgendes haben wir getan:  Liste aller Seiten der aktuellen Website:  Wenn die URL-Struktur einer Seite gleich geblieben ist, überprüfen Sie, ob die 301-Weiterleitung funktioniert.  Wenn die alte Seiten-URL nicht auf der neuen Website vorhanden ist, erstellen Sie eine Weiterleitung zur am besten geeigneten Seite.  Listen Sie die in Google indexierten Seiten auf, um sicherzustellen, dass wir für alle Weiterleitungen eingerichtet haben.  Verwenden Sie Netlify, um alles umzuleiten, und befolgen Sie dabei die Schritte in ihrem  .   Netlify-Dokumentation  Benachrichtigen Sie Google über die Änderung in der Konsole  Werkzeug.   Änderung der Adresse  Bitten Sie Google, die neue Domain neu zu indizieren, damit alte Seiten nicht angezeigt werden. Dies wurde direkt in der Google Console durchgeführt, indem die in der verfügbaren Schritte befolgt wurden   Dokumentation zur Google Console.  Zu guter Letzt haben wir uns die Zeit genommen, sicherzustellen, dass wir Best Practices für ein besseres SEO-Ranking berücksichtigt und festgestellt haben, was verbessert werden muss. Das Marketingteam hat Folgendes sichergestellt:  Um die neue Website für relevante Schlüsselwörter zu optimieren, die in Suchmaschinenergebnissen einen höheren Rang erreichen und organischen Traffic anziehen sollen, führen wir anschließend eine Schlüsselwortsuche mit Tools wie Google Keyword Planner oder SEMrush durch, um beliebte und weniger wettbewerbsfähige Schlüsselwörter zu entdecken  Wir haben versucht, die Meta-Titel-Tags und Meta-Beschreibungen auf jeder Webseite so weit wie möglich zu optimieren, indem wir relevante Schlüsselwörter und überzeugende Handlungsaufforderungen integriert haben, um Benutzer zum Weiterklicken auf den Suchmaschinen-Ergebnisseiten (SERPs) zu verleiten.  Stellte sicher, dass die URLs sauber und prägnant waren und zielgerichtete Schlüsselwörter enthielten  Alternativtext: Stellen Sie beschreibenden Alternativtext für Bilder bereit und verwenden Sie gegebenenfalls Schlüsselwörter  Bestätigen Sie die Optimierung der Seitengeschwindigkeit (mit dem von uns verwendeten Stack war es schwer, hier kein großartiges Ergebnis zu erzielen).  Ergebnis  Nun, es war ein langer Weg, bis wir unsere Website live hatten. Aber rate mal was? Die Arbeiten wurden über den Start hinaus fortgesetzt.  Die erste Phase war eine starke Basis für das, was wir erreichen wollten. Der modulare Aufbau gab uns außerdem die Flexibilität, die Website zu iterieren, zu ändern und an neue Trends und Bedürfnisse anzupassen. Wir sind mit dem Ergebnis zufrieden und stolz darauf, wie wir hierher gekommen sind. Wir hoffen, dass Sie durch das Teilen unserer Reise wissen, was Sie erwartet, wenn Sie eine neue Website erstellen oder eine Neugestaltung vornehmen.  Um alles, was wir hier geteilt haben, zusammenzufassen, haben wir einen kleinen Spickzettel vorbereitet, damit Sie ihn in Ihrem Projekt verwenden können.   Auch   veröffentlicht. hier

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Die 4 Phasen eines großartigen Website-Designs (mit Cheatsheet!)

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps