Ausgangslage/Konzept

Für dieses Projekt gab es bereits ein bestehendes Grafikdesign/CI, sprich die Farbgebung, das Logo und die Schriften waren bereits entwickelt und für ein Print-Magazin angewandt worden. Ziel war eine Website zu gestalten und technisch umzusetzen, die dem bestehenden Design Rechnung trägt und zugleich 

Webdesign

Um das bestehende Design fürs Web zu adaptieren haben wir uns in gemeinsamer Absprache mit dem Auftraggeber auf ein One-Page-Struktur geeinigt, bei dem man mithilfe einer einfachen Scroll-Animation zwischen den einzelnen Bereichen wechselt, ohne dass die Website dabei neu geladen wird. Diesr Ansatz bot sich an, da der Gesamtumfang der Website überschaubar war.

Zu Unterstützung der vertiaklen Animation wurde ein Parallax-Effekt eingesetzt, bei dem sich einzelne Elemente der Website beim Scrollen unterschiedlich schnell bewegen und so einen Tiefeneffekt erzeugen. Für Bereiche mit sich wiederholenden Inhalten kamen modifizierte Bilderslider zum Einsatz, zum Teil ebenfalls durch Parallax-Effekten unterstützt.

Code & Technik

Für die technische Umsetzung wurden Templates in HTML/CSS, PHP und JavaScript programmiert – zunächst in einer passwortgeschützten Testseite, so dass auch auch der Auftraggeber regelmäßig einen Einblick in einzelne Entwicklungsschritte erhalten konnte, ohne dass die Website bereits online einsehbar war.

Als Content-Management-System kam Processwire zum Einsatz. Dieses bietet sich besonders für kleine bis mittlere Websites an, bei denen sowohl im Frontend als auch im Backend möglichst individuell auf Kundenwünsche eingegangen werden soll.