I created the BMCG website design and illustrations for a London-based company that provides consultancy services for developers and managing agents. The site needs to show their range of services in a neat and concise way. Planning and implementing everything carefully, allows the site to work equally well on any device.
A specific colour was allocated to each service sector. We felt that this would make the site easier to reference. Using a neutral grey-blue colour scheme for the overall site design, works well with the wide range of colour schemes. It also brings a level of consistency throughout the site, linking all the pages and elements together.
The site was created using WordPress, while incorporating with a lot of custom design, to create something truly unique and bespoke to the client’s needs. WordPress allows for a lot of extra functionality to be implemented through the use of addons and plugins.
Bespoke vector line illustrations were created for use throughout the BMCG website design. Creating these images myself, rather than purchasing them from stock libraries, allowed me to ensure that they were consistent and applicable throughout the site. In order to keep them relevant, I met with the client to discuss each service or topic section and gather keywords and a general overview. I then created the initial mockups, to get the style of illustration and general contents approved, before getting stuck in to the individual illustrations.
Responsive elements & layout
During the BMCG website design process, we went through quite a few different stages and hashed out a number of layouts and ideas. We settled on the clean and clear sections that you can see used throughout the site. This makes sure that it isn’t too daunting to read while being easy to reference. The sub menu created, sticks to the top of the page after you scroll down, so it is readily available. This aids users to quickly find the information they are looking for. As a menu item is clicked, it automatically scrolls to the applicable page section.
When designing a site, it is important to always consider the layout on smaller screens to ensure that it works equally well on any device. This often means creating custom code to reorder elements and shuffle text and images into position. A particular example of this was being able to always force images above the text they accompanied. As the text and illustration layouts alternate from left to right in the page sections, this meant that some of the images automatically wrapped underneath the text. This made the site look messy to view on mobile devices. That’s where Flexbox came in. It allowed me to create custom css to reorder particular elements based on different screen sizes and orientations.
I coded the BMCG portfolio page myself, rather than using the standard WordPress features. We were therefore able to create exactly what we wanted, rather than relying on generic built-in features. It was necessary to create transition/animation effects to display the stats of each portfolio entry. The photos were also carefully edited and cropped in Photoshop. As each portfolio entry changes size and shape, depending on the size it’s being viewed at, the photos (and overlaid text) need to work equally well in square, portrait or landscape orientations.
I’m looking forward to implementing even more nifty features into the site in the near future.