Weald Electronics

Frontend website design and development

We worked side by side with Specialist Drupal developers Blue-Bag on this website project. They brought us on board to provide our frontend website design and development expertise. More specifically, we needed to bring more dynamism and a modern, cohesive feel to the brand, along with helping with restructuring the site’s layout.

Weald Electronics are part of the Lodge Group and are a major UK manufacturer of electrical connectors and accessories. Their primary market is for the military and demanding industrial applications. They needed a contemporary design language capable of building trust and showing their dedication in providing high performance interconnection solutions.

The new identity is designed to evolve wealdelectronics.com into a modern brand. It gives them a friendly personality that is straightforward, open and honest. The goal of this is to help attract new and returning customers.

Weald Electronics Website design wireframes

100

Scores 100% for web best practices
96

Scores 96% for accessibility
84

Scores 84% for SEO
100

The client is 100% happy with their website

Global Hub Navigation

Blue-Bag liaised with Weald Electronics to create an initial site map for their new site. Then it was over to us to use that as a basis for several wireframe page layouts. One element we worked hard on was designing a global hub style navigation at the very top of the site. This was to better encapsulate the other brands that sit within the Lodge Group and create a more obvious link between them.

Home Page Design

Our next challenge was creating a home page design that allowed Weald to highlight some of their products while also explaining what their company does. As part of the brief, we needed to incorporate angled lines where we could to help visually set the brand apart from their competitor’s sites. We designed and coded several modules that could sit on top of each other. They were done in such a way that their angled edged would smoothly link together.

Product Page Design

The design for the product page template was another area that was a strong focus for us. It needed to remain easy to use while containing a lot of data. One such element was their compatibility charts which allow users to see what each of their parts works with. We design & developed some flexible data tables. They can resize to work across a range of screen sizes such as mobiles, tablets and desktops.

When all the design visuals had been approved, we used our frontend website design and development skills to turn them into flat html page builds. The talented developers at Blue-Bag took these and made them into a custom Drupal theme.

Check out the Weald Electronics and Blue-Bag websites, or take a look as some of our other website projects.

Thanks for reading. As you've got this far, we assume you're thinking about hiring someone to design your website? We'd love to find out more.

Liam Jay. Lead Web Designer & Developer

Email Liam

Weald Electronics website Home Page
Weald Electronics Product Page
Weald Electronics Catalogue Download Page