Uliving website (2015)

Custom Wordpress site for the student offshoot of a large construction company

Published , updated by Richard GoodwinFiled under Projects

Design: Steve Atkin

Having worked on the rebranding of this student accommodation company from the start, including creating the new logo and style guide, it was only natural that Steve and I wanted to produce a website that reflected this new design language.

The underlying site was WordPress-based, but it featuring a number of custom elements including:

  • SVG carousels and mapping
  • CSS-based business model diagram (that reverted to a text list on extremely small screens)
  • Responsive design including size-adjusting hero images
  • Custom in-page photo galleries - curated as normal in WordPress, but displayed in double lines of thumbnails with scrolling overflow and lightbox image display
  • Various inline forms to request different types of research
  • A contact page that went past the usual Google map and let people know the best ways to get around London (e.g. listing tube lines in the correct colours)
  • Case study page made by combining multiple pages of clients, for easy editing and displaying.
  • Persistent semi-transparent navigation

The CSS model explained

This was the most complex CSS-based diagram I'd done at this point, so I was quite proud of it.  Instead of everything being completely drawn, it was made with text, a couple of files with all the backgrounds in strips (including highlighted versions), and a bunch of style sheet commands.

 

Further reading