New module icons (◠‿◠)
August 18th 2026Our MA (Web design + development) aims to bring together design and development subjects in an effort to give our students a solid grounding across the different aspects of web work. As a programme that teaches visual communication and digital design, it felt important to lead by example and give the programme and its modules a visual identity of their own (◠‿◠)
Previously…
The first set of module visuals was created primarily for use across our documentation. I designed six icons, one for each module, using a shared visual language of nodes, curved lines and spear-headed arrows.
The visual system was deliberately abstract. Rather than illustrating the subject matter literally, the icons aimed to communicate the relationships, processes and movement within each module. The use of a consistent set of forms also ensured that, despite representing different subjects, the six icons felt like part of the same family.
concepts ~ notes on the original six icons
A few notes on the concepts of these original icons.
The design for web content shows a group of nodes with an arrow at the bottom going down from the top into a curved arrow towards a small rust orange circle. This circle then grows flourishing node curves towards the top. There’s a droplet falling inwards in a curve towards that and this was intended to represent how we use content that goes into the code and then creates the web page.
Content Management reused that same arrow to represent the content again, but this time around the curved node arrow parts are forming around this visual in order to represent something like a database, a container into which the content is poured and then ported into the web page represented by an arrow as bold rust orange arrow curve.
Inclusive and sustainable web design has a visual which shows ripples spreading, originating from a small rust orange circle. Droplets going upwards and towards the centre ~ node lines curve downwards towards the centre to represent the effect that development and design have on users and the environment.
User experience design is formed of two circles. The implied motion is clockwise. The circles are formed by partial node lines and arrowheads to represent the iteration that is ongoing through research, design, user testing, and continued iteration.
Applied Art for the Web being the design module features a heart to express the emotion and care involved. The shape is formed by partial lines with nodes and circles which go clockwise into the heart and around it. This is to represent the focus on people and the care that a designer should give the work to ensure that the final output of the design work is clearly targeted at people and the goal of creating inclusive and accessible outputs.
The major project icon features a circle, formed by semi-circles. This is project seen as a vessel into which the knowledge and skills acquired throughout the year come toegther. They are inserted in a diagonal angle from top left to bottom right.
These icons were used on our project briefs and feedback sheets, as well as our intranet pages. When used on slides, they were very effective through the large scale of the projection. At a fairly large size they worked well ~ delicate and light, yet distinctive. For those uses, their fine detail was perfectly suited.
Years later, we created a programme Hub: a single page collecting the things students need to keep an eye on ~ schedule, deadlines, shortcuts to the intranet, links to support services and resources. We wanted to carry the module icons across to it as visual touches, and this is where the problem surfaced. At that smaller size, the fine lines, nodes and subtle relationships began to disappear. What had given the icons their character became a limitation ~ the visual language still worked conceptually, but no longer held up consistently across every context we needed.
At a smaller size, the fine lines, nodes and subtle relationships between the elements began to disappear. What had previously given the icons their character instead became a limitation. The visual language was working conceptually, but it was no longer working consistently across the different contexts in which we needed to use it.
This presented an interesting design problem:
How could we retain the character and meaning of the existing visual identity while creating something that remained recognisable and effective at a much smaller scale?
New modules ~ a new design for our icons ツ
The Curriculum Framework process reshaped the modules ~ Applied Art for the Web, for instance, gave way to a different split across the set ~ which is partly why the new system now features five icons rather than six. This involved restructuring the delivery of our topics, splitting subjects into different modules and providing an opportunity to rename several of the existing modules, as well as the programme itself.
The programme Hub was already being reviewed and updated each year in response to feedback from successive cohorts. The combination of the new module structure, revised names and an evolving hub therefore provided a natural point at which to reconsider the visual system. This time, I decided to go with a completely new design direction, using our hub’s feature icon itself as the starting point.
Rather than trying to preserve the previous visual language, I wanted to create an icon set that felt familiar within the programme’s existing identity while being much more robust at smaller sizes. The existing brand colours were retained, but the visual language became deliberately more substantial: bold, chunky lines, square corners and simplified forms.
There is only a slight continuation from the previous delicate icon design. I still focused on expressing the module’s subjects but the emphasis this time was on creating a solid, scalable icon system that can be recognised quickly and consistently.
Designing from the hub icon
The key decision was to establish a single visual element that could connect every module directly back to the programme hub. The displaced asterisk from the hub icon became that element.
It appears in every module icon, acting as a visual ID marker shared by the hub and the modules. This means that while each icon can communicate something specific about its subject, the asterisk provides an immediate visual connection between them.
The result is intended to feel less like five separate illustrations and more like one visual system: five modules, one family.
experiments
Designing for scale
One of the main aims of the redesign was to make the icons work at small sizes without losing their character.
I experimented with the icons at different scales and also created cut-out versions to test whether their silhouettes could remain recognisable through shape alone. These cut-out versions were not intended as alternative designs or as something we would necessarily use. They were simply a useful test of whether the underlying forms were strong enough to survive reduction.
For the same reason, the icons were tested in both light and dark modes. This was also an opportunity to begin thinking ahead to the next refresh of the hub and to consider how the visual system might work across both modes. You can view the full set, at every size and in both modes, on the proposal page.
For the dark version, I introduced our fourth brand colour ~ a sky blue, helping the icons maintain sufficient visual presence and recognition against a dark background. Testing the set across both modes was the first real step towards the hub’s own light and dark refresh ~ which is where the final versions of these icons head next.
The final five, in both modes
PS: the list of final icons includes one discrepancy, one error ~ can you spot it? :D