Website for a Business / Training / Consulting Coach

[Stefanowitsch]

After a long time of concept work and a (not) so long time of development I launched a new website:

https://www.marvin-wieckhorst.de

Beware: German Language ?

The whole site consists of 5 pages only. But the pages on this one are huge and full of different design elements. I'm trying to split it into interesting screenshots here but I think it's best if you visit the site and have a look at it by yourself.

Here are some pictures, the tech talk section is below.

Introduction with large images and catchy headlines on each page:

 

Different teaser elements:

 

Rocket animation with some vector images:

 

Custom build ajax forms for the booking of the different training packages. These forms are presented in a modal.

These forms are feeded directly from the backend via my custom form solution:

 

Tech Talk:

Well first a bit of design talk. Concept and design was the greater challenge than the later development. The customer had very clear expectations of what the different design elements should look like. So the real challenge was to get all the ideas right and put into a working design that does not look too overwhelming and convoluted in the end. PLUS it had to be responsive of course. Fitting giant design elements full of content that look awesome on a  2560 x 1440 display are difficult to handle on an iPphone display.

Used Modules:

I always try to use at few modules as possible. No pro fields were used on this one. Everything you see was build with the tools that Processwire offers out-of-the box or which is are in the core ?

However some modules are just a must have in my opinion and there is what I used (and use in all my other projects aswell):

- AOIM+ for bundling and compressing of JS+CSS
- WireMail SMTP for all mail work
- SEOMaestro
- PageImageSource for WEBP image support
- TracyDebugger

For the frontend work I am using good ol' Bootstrap 4. Basically because of the excellent grid system / frontend forms and form validation / modals. Most else Bootstrap offers is not included in my build. All other frontend elements are custom.

Plugins i used:

- aos.js for all animations
- lazysizes.js
- owl carousel
- masonry.js
- niceselect for the custom dropdown menus inside the modal form

There is also a video player included the the videos for this site are not produced yet.

 

All together I get a really nice lighthouse score for the site:

That's it for now. Have a nice week!