Ausgangslage

Der Auftraggeber von diesem Projekt entwickelt für ihre Kunden moderne State of the Art Websites nach individuellen Wünschen und Bedürfnissen. Nebst höchst individuellen Projekten gibt es immer mehr auch Kunden, welche einen schlichten, modernen und rasch umgesetzten Webauftritt wünschen, welcher mit einem modernen Technologie-Stack umgesetzt wird.

Um auch solche Projekte erfolgreich umsetzen zu können, wünscht sich der Auftraggeber ein Website-Template/Boilerplate. Mit einem solchen Website-Template/Boilerplate sollen die nachfolgenden Bedürfnisse abgedeckt werden:

• Standardisierte Umsetzung mit einheitlichem und bewährtem Technologien-Stack
• Entwicklung einer Komponenten Library
• Rasche und professionelle Abwicklung von standardisierten Website-Projekten
• Geringer Entwicklungsaufwand
• Einheitliches Design & Layout

Ziel

Dank dem Website-Template Framework sollen Websites rasch und professionell entwickelt werden können.

Bei der Entwicklung von Websites können häufig Konzepte oder auch ganze Komponenten einer Website wiederverwendet oder übernommen werden. Aus diesem Grund ist das Ziel des Website-Template Framework, ein Basis-Set von Website Komponenten zur Verfügung zu stellen, welche jedoch mittels dem Content Management System (CMS) Sanity individuell angepasst und verändert werden können.

Die individuellen Anpassungen sollen sich jedoch nicht nur auf die Komponenten einer Website beschränken. Ein weiteres Ziel ist es, dass Websites, welche mit dem Website-Template Framework entwickelt werden, komplett individuell zusammengesetzt werden können. Das bedeutet z.B. das der Administrator selbst entscheiden kann, wie viele Seiten die Website besitzt und welche Urls die Seiten haben.

Konzeption & Design

Während der Konzeptionsphase wurden die Komponenten und Bausteine einer Website identifiziert und definiert, welche das Website-Template Framework besitzen soll:

• Simple Navigation Bar Komponente
• Extended Navigation Bar Komponente
• Simple Footer Komponente
• Extended Footer Komponente
• Chart Komponente
• Card Komponente
• 1 Spalten Komponente
• 2 Spalten Komponente
• News/Blog Komponente
• Kennzahlen/Facts Komponente
• Testimonial Komponente
• Kontaktformular Komponente
• Adressen Komponente
• Hero Header mit 2 Spalten Komponente
• Video Hero Header Komponente
• Eigenschaften Grid Komponente
• Kunden/Partner Komponente
• Team Grid Komponente
• FAQ Komponente
• Pricing Komponente
• Bild Komponente
• Button Komponente
• Link Komponente
• Heading Komponente
• Richtext Komponente

Implementation

Während der Phase der Implementation ging es vorwiegend darum, die erarbeiteten Konzepte und Designs in Code umzuwandeln. WEBDIGI stellte dem Auftraggeber bereits zu Beginn der Implementation eine Preview-Url zur Verfügung. Dank dieser Url konnte man den Projektfortschritt zu jeder Zeit verfolgen und sogleich das Ergebnis testen. Dieses Vorgehen hat sich in diesem Projekt sehr bewährt, da Fehler frühzeitig erkannt werden konnten und man flexibel Änderungen vornehmen konnte.

Die Implementation der verschiedenen Komponenten war in zwei Teile aufgeteilt. Zum einen mussten die Komponenten entwickelt werden. Weiter mussten die Komponenten mit dem CMS Sanity verbunden und dynamisch ausgestaltet werden, sodass man z.B. für einen Button die Hintergrundfarbe sowie die Hover Farbe ändern kann.

Einblicke in das Website-Template Framework

Konfiguration Extended Navigation Bar Komponente

Konfiguration Pricing Komponente im CMS

Highlights

• Breite Auswahl an Komponenten
• Komponenten können via CMS komplett individuell gestaltet werden (Layout, Farben, Content, Struktur)
• Das bestehende Set an Komponenten kann laufend erweitert werden
• Einfache und intuitive Bedienung