Website design

STEM Learning

The website design for STEM Learning by Stuff & Nonsense brings the content and functions of two websites—National STEM Center and Science Learning Network—together. For this project we delivered designs for responsive page templates plus a web design manual. We also made seven visual identities into a new family of identities.

Design partners

We regularly collaborate with technical developer partners, combining their technical knowledge with our creative skills and ideas. If yours is a development company, we’d love to talk with you about us working together.

For the STEM Learning project, we’re proud to have worked with Code Enigma.

Bringing two websites together

The National STEM Center and Science Learning Network websites provided complementary services. We created a new design that brings both entities together to form a single service offering. We conducted a thorough content audit on both websites and designed styles for every type of content in our web design manual.

Previous design for National STEM Center

Previous design: The National STEM Center website provided e-learning materials for teachers of science, technology, engineering and maths.

Previous design for Science Learning Network

Previous design: The Science Learning Network website provided continuous professional development (CPD) materials for science teachers and assistants.


Consistent design

It’s not unusual for organisations to have more than one website and maintaining design consistency across websites isn’t easy.

We regularly help people keep their designs consistent and save money and time on further design projects through our work with design manuals and pattern libraries.

Bringing seven visual identities together

Over several years, the National STEM Centre and National Science Learning Network had commissioned seven logo designs. We brought those logos together as part of the STEM Learning family.

Each original logo used it’s own set of colours, fill, stoke and type styles. Using the National STEM Centre logo mark as our starting point, we developed a grid, then based the size and shapes in our revised versions on it, turning those seven logo designs into a family.


Every STEM Learning logo now uses the same palette of colours and where possible in the same order as the National STEM Centre logo mark to help create a visual connection between them all.

Graphic design and user-experience

We consider every aspect of how an organisation presents itself online. Making the right impression is an essential part of providing an effective user-experience.

Signature page designs

A website design that communicates well with an audience needs more than just components, patterns and templates. Our new STEM Learning website contains several signature pages that give its design the feel of a magazine.

Educational resources are at the heart of STEM Learning and we wanted to finding them easy and fun. We used bold imagery, strong typography in an unconventional layout to draw people to their content.

Our distinctive grid design helps the audience find relevant events and resources and the boldly presented collections of materials bring the subject matter to life.

Not every article, news and opinion summary should look identical, so we designed a collection of summary layouts. When seen together, these summaries combine to form a layout that’s more engaging than a typical news page.

For STEM Learning’s article, news and opinion pages, we typeset their corporate Bliss2 typeface and used our grid’s wide margins to create a strong typographic design that maintains its hierarchy across screen sizes.

Design manual

We conducted a thorough content audit on both previous websites, noting each type of content and functionality. For the new STEM Learning website we designed styles for every type of content in our web design manual.

Contact us

x

Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Studio address

OpTIC, Ffordd William Morgan,
St. Asaph Business Park,
St. Asaph, Denbighshire, North Wales, LL17 0JD

(Here’s a map showing how to find our studio.)

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ