Soma Posted December 8, 2017 Share Posted December 8, 2017 We relaunched the website for the famous Opernhaus Zürich https://www.opernhaus.ch with ProcessWire. Lots of stuff going on on the front-end. The "design" was made by an inhouse designer that also does their print work and previous website designs. We used patternlab node with mustache template engine as the design/prototype system. Building elements and component as kind of modules (mustache, css, js) which then are 1:1 imported into PW, which then can be rendered using mustache (php version) via a custom "controller" system. 20 Link to comment Share on other sites More sharing options...
gmclelland Posted December 9, 2017 Share Posted December 9, 2017 Nice site Soma. Did you use https://github.com/cojaco/TemplateEngineMustache with https://github.com/wanze/TemplateEngineFactory? How are the page components added to the page? Repeater Matrix, PageTable, straight from the template, etc..? Is your patternlab style guide publicly viewable? Link to comment Share on other sites More sharing options...
SamC Posted December 9, 2017 Share Posted December 9, 2017 Very flashy indeed! I find it quite confusing to use though, there's stuff everywhere! Maybe a silly question, but how do you get back to the homepage? I'm also getting a weird effect at the top on the slider: Link to comment Share on other sites More sharing options...
Soma Posted December 9, 2017 Author Share Posted December 9, 2017 9 hours ago, gmclelland said: Nice site Soma. Did you use https://github.com/cojaco/TemplateEngineMustache with https://github.com/wanze/TemplateEngineFactory? How are the page components added to the page? Repeater Matrix, PageTable, straight from the template, etc..? Is your patternlab style guide publicly viewable? No we use https://github.com/bobthecow/mustache.php (installed via composer) in PW, along with some custom Mustache loader and a custom autoloader for our controllers. Controllers are of different types like Template, Components, and Elements all extending WireData. So a mustache view can have its own controller class to handle the data but doesn't have to. The PW page template extends our Template controller class and is used to generate the contents of a page. We use some special mustache file for content items that acts like a switch for all the different component to know which partial to include, so we can simply say that this content item gonna use this or that mustache component. It's simply stacking components one after another. At the end, the whole strategy on this setup was that it works pretty much the same on the patternlab side (data as json) and on the PHP side (data as objects, methods, properties and arrrays), or even JS side (json). The patternlab prototype is found here https://opernhaus.ch/prototype/public/ (currently seems a little broken) but it's not at all the typical style guide or in the strict fashion of atomic design, it's used as a prototyping system to create the content items components and dummy pages in a well-defined structure. We build the different page types right in patternlab as much as needed. Each component can have it's own CSS and JS. (Additionally we also use terrificjs as a helper to make modular JS components). 2 Link to comment Share on other sites More sharing options...
Soma Posted December 9, 2017 Author Share Posted December 9, 2017 3 hours ago, SamC said: Very flashy indeed! I find it quite confusing to use though, there's stuff everywhere! Maybe a silly question, but how do you get back to the homepage? I'm also getting a weird effect at the top on the slider: Very flashy Yeah that's a bit of a problem we had with the design concept being delivered to us, but you know how it goes. I think it's trying to solve the different ratio of the images they'd like to use, so it's a feature kind of (one of which I'm not very fond of) Homepage is on the logo. (I know) 2 Link to comment Share on other sites More sharing options...
SamC Posted December 9, 2017 Share Posted December 9, 2017 44 minutes ago, Soma said: I think it's trying to solve the different ratio of the images they'd like to use, so it's a feature kind of lol really? 44 minutes ago, Soma said: Homepage is on the logo. (I know) I totally missed that. I mean, home is usually on the logo, but tbh, I didn't even notice the logo in the first place. Actually, I don't think I've ever felt so disorientated on a website. 1 Link to comment Share on other sites More sharing options...
szabesz Posted December 10, 2017 Share Posted December 10, 2017 17 hours ago, SamC said: Actually, I don't think I've ever felt so disorientated on a website. One either uses standard GUI design so that visitors will not get lost and find their way around the website quickly or start to introduce unconventional GUI elements to showcase how creative one can be. The more unconventional UI one starts to use the more disorientated the visitor gets. This site pushed it to the extreme so it is really hard to find your way around in a pile of eye candy. Link to comment Share on other sites More sharing options...
SamC Posted December 10, 2017 Share Posted December 10, 2017 Defy convention at your own risk... http://www.telegraph.co.uk/cars/classic/austin-allegro-how-the-worst-car-of-all-time-came-to-be-made/ 1 Link to comment Share on other sites More sharing options...
DaveP Posted December 11, 2017 Share Posted December 11, 2017 23 hours ago, SamC said: Defy convention at your own risk... http://www.telegraph.co.uk/cars/classic/austin-allegro-how-the-worst-car-of-all-time-came-to-be-made/ Also... https://www.nngroup.com/videos/jakobs-law-internet-ux/ 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now