diogo

Bedrohte Ordnungen

Recommended Posts

Hi Guys,

Here's is our most recent website built in collaboration with the Design studio DITHO from Cologne, who designed and coordinated all the process. For now the website is only in German, but there will be a English version soon.

https://bedrohte-ordnungen.de/

 

"Bedrohte Ordnungen" (Threatened Orders) is the display of an ongoing research by the University of Tübingen. Best described on their own words. Here on a hopefully accurate translation :)

Quote

Social crises existed in antiquity as well as today. Societies are changing and new things are emerging. The research project "Threatened Orders" shows how changes take place according to certain patterns and how people deal with the threat. The University of Tübingen is researching what our society can learn from past crises and catastrophes. The website "Threatened Orders" presents twelve multimedia cases from antiquity to today.

 

Here's a nice showcase video made by DITHO:

 

This is a quite complex website. It's also quite heavy on images, videos and CSS animations, so old computers might struggle a bit to process it. All the website is dynamic and inside PW, including those animations. This is probably the most interesting part of how the website was built, since all the animations were created by DITHO themselves in ProcessWire thanks to a system that I created for them using a repeater field. You can have an idea through these screenshots:

5adf28d6d728c_ScreenShot2018-04-24at13_52_24.thumb.png.10b3b1cb2f337944f50f0c71a1ab77f1.png

5adf28e30cebe_ScreenShot2018-04-24at13_52_47.thumb.png.2a6fab8db0c092dea07beb75831afaa1.png

The content blocks of each case represent a question each and repeat throughout all the presented cases. Each question has a main content and most have also a hidden block that can be opened by clicking a button. They are created in PW using the very recent FieldGroups https://processwire.com/blog/posts/processwire-3.0.73-and-new-fieldset-types/:

5adf3654503ab_ScreenShot2018-04-24at14_02_03.thumb.png.6738beadba2b31f6e40242140a15212b.png

5adf2c0fbe47d_ScreenShot2018-04-24at14_04_47.thumb.png.c53d88d6e45424ae41d4f161ac5a82a1.png

5adf2c1a7c2ba_ScreenShot2018-04-24at14_06_29.thumb.png.63002707620ab1909a6ef654c967a3d4.png

 

The only two third party modules used were AdminOnSteroids by @tpr and the very useful ColorPicker by @Soma.

There would be more to talk about, but I don't want to extend myself too much. Hope you guys like it!

Just a shout out to DITHO to say again how much fun this collaboration has been :)

 

 

  • Like 14
  • Thanks 1

Share this post


Link to post
Share on other sites

Congrats. Another very well crafted website of yours. I don't really like the scroll-jacking, but I really really like the menu. 

You also might want to look into hiding the video pop out button on opera.

Screenshot 2018-04-24 15.27.45.png

  • Thanks 1

Share this post


Link to post
Share on other sites

Just two words: Awesome & Insane

A really nice and different design combined with such a nice animation-builder-toolkit.

Great Work. Love it.

 

  • Thanks 1

Share this post


Link to post
Share on other sites

Congrats. That's really well-done.

I only found a slight responsive glitch where original and translated text overlap each other somewhere ("letter from A to B"), but that should be easy enough to fix.

 

 

bedrohte-ordnungen.de_cases_erste-boersencrashs-in-london-und-paris_(iPhone 6_7_8).png

  • Thanks 1

Share this post


Link to post
Share on other sites

Yes that's an easy fix, thanks for spotting it @dragan!

Share this post


Link to post
Share on other sites

<distraction>

Sonderforschungsbereich 923!

Gotta love the German language! Sorry, but I just can't help myself. It sounds at the same time so bureaucratical and military, but also beautiful. I've heard many standup-comedians making fun of this simple fact, that in German it's easy (and allowed) to put words together to create a new one. For us, it's natural and normal, but for many other people it's like "what the heck"?

</distraction>

  • Like 2

Share this post


Link to post
Share on other sites

Really impressive, Diogo!

Excellent implementation of the design. And cool stuff having the animations settings manageable by the design team.

Congratulations to you and the team!!

  • Thanks 1

Share this post


Link to post
Share on other sites

@dragan that's so true! I still struggle to unmount some long words :D 

Obrigado @Sergio!

Share this post


Link to post
Share on other sites

Beautiful site.  I'm curious... what is your preferred way to structure your template files? ie. Template File Strategy?  I'm referring to https://processwire.com/docs/tutorials/how-to-structure-your-template-files/.  Direct Output, Direct Output with Includes, Delayed Output, WireRender Pattern, Markup Regions, etc...

What does the main content tab look like when editing a page?

Did you use FieldtypeFieldsetGroup or FieldtypeFieldsetPage?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.