SRJ Walker Wayland

http://www.srjww.com.au/one

Website

 The website needed to be informative, with team visibility and education surrounding the services they offer.

The previous website was looking very dated, information was lost in the clutter and it wasn't mobile friendly. There was a lot of work to be done, and we were only too happy to aid them in this aspect. SRJ Walker Wayland wanted a professional, mobile responsive design with a higher focus on content and fewer images. With less images, the content needs to be designed to ensure it remains engaging and users can easily navigate to find relevant information.

Technologies Used

We used a range of technologies to build a high quality, professional website with the desired functionalities.

 179

WordPress

Content management system177

GruntJS

JavaScript Task Runner178

Sass

Multiple Content Types for WordPress180

ACF

Multiple Content Types for WordPress871

Adobe Photoshop

Professional Design Software827

SVG

Scalable Vector Graphicsone

The Result

The new design is clean, professional and aligns to the brand voice. Imagery has been limited to some key areas, with high contrast dark content blocks to keep the pages visually interesting. With significantly less clutter, the home page content hierarchy is now clearly defined to allow users to find the information they are looking for.

RESPONSIVE DESIGN

Clear typography and a solid content hierarchy were important for this type of website.

The previous website wasn’t mobile friendly, so we implemented a mobile-first, responsive design, with a lean code base that resulted in a faster page-load time. People who need to access the website while away from a desk can now do so just as easily as anyone else.

New pages can be built quickly and easily, with flexible content blocks to ensure the overall design remains consistent and engaging.

For larger devices, SRJ Walker Wayland requested a navigation header that would be easily accessible anywhere on the page, but move out of the way for the user reading content. We implemented a header that hides itself as the user scrolls down the page to read. As soon as they begin to scroll up, the navigation header moves back into view so the user can easily navigate to any other page on the website.