ICP – 24/10/24 – Week 4: Programming Design Systems

24/10/24 – Week 4: Programming Design Systems

-a collection of reusable components, standards, and documentation that helps organisations create consistent visual design and manage design at scale

-Material Design

-Apple Developer

-Pentagram MIT Media Lab

Rune Madsen

https://www.runemadsen.com/work/i-used-to-be-somebody/

Designer, artist and educator who uses programming languages to create things with the computer. Includes non-trivial interfaces, custom design tools, design systems, and dynamic branding projects. His work is focused in simplicity, organised complexity, and deals with things practically rather than theoretically.

Design Systems

In this activity we were given a randomly generated word that we would then have to try and convey by using a single rectangle that we were able to manipulate its colour, dimensions, positioning and size. After this our peers attempted to try and guess what the word was that we were attempting to represent.

https://editor.p5js.org/minmoo.o/sketches/mbvK6X_OO

^In this section of code we used the random adjective generator to come up with words ~ after this we used p5.js to change the position, size and rotation of that shape to convey that word.

-Colour

Red: Passion, Excitement, Love, Power and Danger

Pink: Soft, Reserved, Earthy, Fresh, Feminine, Playful and Young

Purple: Mysterious, Noble, Glamorous, Cool, Spiritual and Calm

Blue: Wisdom, Hope, Reason, Peace, Loyalty, Peace, Loyalty, Professionalism, Trust and Sadness

Green: Nature, Growth, Freshness and Harmony

Yellow: Hope, Joy, Danger, Positivity, Enthusiasm and Happiness

Orange: Warmth, Kindness, Joy, Optimism, Friendly, Warm, Energy, Caution, Vibrant, Lively and Energetic

White: Truth, Indifference, Simplicity, Purity and Cleanliness

Black: Noble, Mysterious and Cold

Brown: Earthy, Warmth, Coziness, Stability, Serious, Reliable, Mature, Dull, Dirty, Sad and Conservative

Gray: Serious, Professional, Reliable, Mature, Responsible and Neutral

-Dimensions (Size/ Shape)

Shapes that are thin and long would work to convey words that suggest delicacy and fragility, whereas short and wide shapes imply strength and stability ~ similarly to uses of centre positioning. In this exercise I didn’t use dimensions in terms of adjusting the shape of the rectangle as much as I would haver liked to and if I were to complete this activity again I would like to make the bashful rectangle more drawn out to represent its weakness and flimsiness.

-Positioning

Using a shape that is centred suggests a stable and bold word as the balance in its positioning would reflect in the stability of the word ~ for example the word ‘Macho’ as shown above suggests authority and a fixed position, hence its being centred. Whereas the word bashful takes an off-centred position, the uncertainty of its placement bridges well with its meaning and lack of need to take up space.