Mallee's full site design refresh presented a few development and implementation challenges. The design called for implementing a high-impact look and feel while the technology called for maintaining site performance and manageability.
Mallee’s full site design refresh presented a few development and implementation challenges. The design called for implementing a high-impact look and feel while the technology called for maintaining site performance and manageability.
Parallax hero and feature images with with masked shape – allowing the uploaded hero image to scroll at a different rate to the page content, without breaking outside the applied stencil or the assigned z-index layer.
Large-scale, non uniform gradients and blurred background shapes – designed with several layers of abstract geometric shapes, heavily blurred and mode blended on top of a large scale, multi colour gradient.
Reverse mask watermarking – a punch through effect allowing the gradient background to be visible through a foreground layer in the shape of the logo’s visual device, along with a box/drop shadow effect.
Left or right full screen bleed images – feature and hero images anchored in the central 1440 grid, but bleeding off to the left or right hand edge of the screen, no matter what size the browser window.
Heavy transitions on page elements to fade in and move into position – multiple elements on each page fading into view with an additional transformation to gently slide it into place as it comes into the browser window view
As with all Egg Design’s work, images are large, prevalent and demand a crisp look, requiring an optimisation of around 92% quality compression. The quality of content is presented on pages with a theatrical flourish: fade up and slide into place. Slight parallax on large images to create depth.
The design called for some complex challenges in having a dynamic background gradient with some key blurred shapes to break up the perceivable pattern further. On top of the background are panels of variable size with drop shadow including stencilled, knockout shapes which also have drop shadow.
Custom Plugins
Announcements – Mallee’s announcement data is fully automated saving site administrators from having to maintain a separate catalogue from the ASX:
Shareprice – visible in the top menu and the investor centre page
Announcements – visible in the homepage, investor centre and announcements pages
Reports – segmented into annual and half-yearly, visible on the investor centre and reports pages
Presentations – visible in the homepage, investor centre and presentations page
Announcements are easily filtered by a robust short-code pulling announcements by category type and record limit, enhanced with pagination and an ability to filter by publication year.
People – Key personnel are managed via the People plugin which enables novel ability to manage the teaser and full view data in one screen. The teaser is listed using standard wordpress query loop which shows the feature image, excerpt and read more link. when the read more link is clicked, the site loads the individual’s additional profile content into the html structure for a seamless user experience.
Webcasts – Simplified input interface allows site administrators to enter a title, publish date and url leading to an externally host such as Vimeo or Youtube. As per the design, front page records are shown with an embedded video thumbnail, whereas records listed on the Webcasts page in the Investor Centre are just a title & date with a hyperlink to the hosted video.
WordPress’ simple to use table block allows users to enter data and manage the table size without worrying about understanding any html. CSS styling is applied to the tables so that the same data can be presented in many different ways.
Sitehttps://www.mineralminingservices.com.au Designhttps://www.axiomdp.com.au Build time: 18.75 hours The Mineral Mining Services (MMS) project is our second with Axiom. The...
Sitehttps://www.dovetailadvisory.com/ Designhttps://www.axiomdp.com.au Build time: 30.5 hours The Dovetail Advisory website is representative of a minor site build from...