Project Brief

In 2017 we were approached to take some already approved Photoshop (PSD) web design concepts and to convert them to HTML, with provision for content management so that Modus Utilities could update the website in-house.

Modus Utilities Isometric Card


Having worked with the team at Frank Creative on a number of web design projects over the years, it was a pleasure to get the chance to work with them again. WordPress was the chosen CMS, so we set about converting the Photoshop artwork supplied into a complete WordPress development solution for Modus Utilities... PSD to HTML!

We're more than happy and comfortable to become involved at any stage of a web design project, offering our experience and expertise. Whether that be at the very start of the web design process, or half-way through when there are already concepts in place. We can step in to supply both web design and web development.


Modus Utilities Logo Design

Brand Guidelines

A strong brand had already been created with this logo design from Frank Creative, the brand, coupled with the concept artwork supplied set the foundation for the PSD to HTML conversion.

  • Cardinal

    HEX: #B50937

  • Cinnabar

    HEX: #EE2E24

  • Bakers

    HEX: #642200

  • Payne's Grey

    HEX: #404041

Web Design

It is worth noting that we had very little input on the actual web design as the concepts and PSD artwork for individual pages had already been signed of by Modus Utilities before we got involved. We simply set about converting the supplied PSD to HTML, which when the HTML was signed off, in turn, was converted to WordPress.

Working with another team of experienced designers is always rewarding, as we get a clear and concise overview of the entire project. At times, even tested with their vision and direction for those static PSD files, as was the case with the Ken Burns effect on the Modus Utilities website, until we got the effect 'just right'. With such clear direction from the initial web design brief to project completion always makes for a efficient and effective web design.

Modus Utilities Macbook Mockup

Mobile Responsive Design

There's no drag and drop website builders or WYSIWYG editors used at design dpi, even when using a framework such as the mobile responsive bootstrap, every single web design we create is hand coded. Perfectly crafted for all screen sizes and devices.


We're happy and quite confident when converting artwork that's been created by your more traditional graphic designer, whether through PSD to HTML, UXPin to HTML or Adobe XD to HTML. We've worked with them all.

  • Modus Utilities Mobile Web Design
  • Modus Utilities Mobile Web Design
  • Modus Utilities Mobile Web Design

Final Thoughts

Working with Frank Creative again on the Modus Utilities web design was, and always is, a pleasure. Taking on the lead developers role and bringing our coding expertise to deliver an effortless WordPress conversion.

Ian Durnham // Director Frank Creative

Morning David, thanks for that - client very happy!

Ready to find out how we can help your project?

Available today until 20:00

We'll be open again at 10:00am

01302 513 515 // [email protected]