Reflecting on the project's exploration of design principles, typography, and AI, balancing theoretical research with practical creation. Developing new skills and knowledge while considering the future implications of AI in design.
I have thoroughly enjoyed this project. All the themes explored are incredibly interesting to me and I have learned an incredible amount about design principles, typography, Artificial Intelligence, the design industry, society and the very real threat of human extinction. I found great difficulty transitioning between reading material for my dissertation and making graphical outcomes: I was educating myself on the reasonable possibility of AI superintelligence getting rid of humans (by turning them into paperclips or otherwise), on the other hand I was making a typeface for non-designers. As important as inclusive design and the visual communication industry is, it is not comparable to the threat of annihilation. Even within my dissertation it took great effort to stay focused on AIs impact on just design instead of fixating on AI experts saying there's a 10% chance we could be extinct in less than a century or the fact that the CEOs of the companies developing AI are building apocalypse shelters 'just in case.' Despite the contrast in themes and tones explored in the project they were all very topical points that I will continue to develop my understanding of in unit 10 and in my career generally.
As is the case with every project I wish I had more time to continue exploring these specific themes. I spent a large portion of my time theorising rather than creating. Now that I have this knowledge, the process that I would undertake would be far more efficient. I do not regret the learning process that led me to these conclusions. Retrospectively without the experimentation I would not have been capable of theorising let alone putting my concepts into practice, therefore the substantial consideration was not a waste as it would not have changed my outcome massively.
Revisiting Glyphs was an interesting experience, being that my last experience was in year 1. Some unit 2 feedback that has stuck with me throughout all my projects is not to gear a project towards your skillset but instead to use it as an opportunity to explore new topics and broaden abilities. I believe I followed this advice as my technical and theoretical knowledge of AI and design principles are incomparable to what it was a few months ago.
I am very happy with my choice to do a process website as it expanded the capabilities of documenting my design, process and influences. The nature of my project was far more dynamic and movement-based than I expected it to be initially, a website gave me the opportunity to display this work accurately and involve the reader which was vital for my final outcome.
My intention for unit 9 was to create a small non-ai version of my unit 10 project. I aim to create a design system that is highly customisable, incorporating AI, design principles and eye trackers. If I have struggled with time restraints and technical problems in this project I fear that my next idea may be overly ambitious. Regardless, with every project that I have failed to complete to my personal standards, I have found that my bank of knowledge expands into fields I have otherwise not explored. Doing this in the past has led me to learn 3D modelling software and programming, both of which are skills that I highly value and use regularly. I believe the best use of one's time presently is getting ahead of the AI curve, learning about its inner workings, potential, ethical considerations etc so that when it becomes more widely used my skills will be beneficial. I do believe without a doubt that AI will take a large portion of jobs, it's already happening in some industries, and when this happens, I would like to be qualified enough to capitalise on the new jobs that AI brings. AI will not only take jobs, it will provide them: It is essential to prepare for life with AI.
Introduction: Exploring the interest in combining programming and graphic design, focusing on automating design through AI and design principles. Addressing the potential and ethical considerations of AI in design, emphasizing the need for a balance between innovation and traditional design integrity.
Before devising a concept for my project I decided to evaluate my interests and influences. The first influence that came to mind was the role of programming: My first experience of programming was with the chatbot unit and later the p5.js project, both on the BAGD course. Due to my newfound interest in coding I undertook the Apple Development year long CCI course to help bolster my programming knowledge and expand my career prospects.
I knew whatever project brief I would come up with would include both graphic design and programming, aiming to combine these two interests and skill sets. One of my influences is Design Systems International: I had the privilege of talking to co-founder Rune Madsen wherein we discussed how design systems can be programmed. I found the topics discussed of great interest which further reinforced the feasibility, and commercial value, of a hybrid project.
The idea that good design can be quantified is fascinating
Another of my interests are design principles. The idea that good design can be quantified is fascinating and I would like to explore how objective rules interact with a subjective field. The objective nature of design principles suggests they can be programmed, creating a link between graphic design and programming. Furthermore, the mainstream use of artificial intelligence in recent times has further opened doors for how the graphic design process could be streamlined. Specifically large language models in collaboration with image generation systems have the potential to assist, if not completely nullify, graphic designers. I am also interested in the processes in which AI systems are built and how they are trained: I began researching how compositions could be programmatically analysed in the machine learning section of the Apple Development course. The use of AI in most industries is inevitable, learning how to use these as tools is how to get ahead of the curve. Those who fail to learn new tools will be left behind.
My system gave a "design efficiency" score based on alignment
The system I developed for my final machine learning project used the Rule of Thirds design principles to analyse the effectiveness of car posters. The rule of thirds aligns elements within columns or along intersecting points. My system was trained on car posters and was able to identify cars and text elements, draw their bounding boxes, identify their central anchor point and analyse their relationships to the 3x3 grid. My system gave a "design efficiency" score based on alignment of elements. The project explored only one design principle and did not question the history or bias behind it, making it a good proof of concept project and opening the door to a more complex investigation.
Oscar Wilde famously said "talent borrows, genius steals:" In the case of machine learning and training datasets is this still the case? The internet has encouraged users to distribute media and AI systems have the capability to be trained on these images even if this was not the intended use. Is it therefore arguably unethical to use these resources for their unintended purpose or is it the graphic designers job to rid the world of ugliness by whatever means possible.
Compositionally AI models struggle to distinguish or place elements in a multi-component image
I have found in my personal practice that artificial intelligence has specific uses that speed up my process but has its shortfalls. For example, compositionally AI models struggle to distinguish or place elements in a multi-component image. Whilst individual image generations are becoming indistinguishable from pictures, more conventional graphic design work is yet to be threatened. As conscious graphic designers, the power to create ethical and effective automated design systems is within our grasp.
Graphic design is a subjective field however, meaning generating 'good' design will vary in practice. Graphic design trends are also contextual and historical and so a deep dive into the timelessness of design principles will be necessary. Technological advancements also inform design principles, for example in recent times the mass redesign of logos has occurred for the sake of scalability being that a large proportion of content is now viewed on a phone screen.
Proof Of Concept
I created a proof of concept program to begin thinking through making: How I could realise the combination of design principles and programming. The concept did not function effectively however it did allow me to theorise how my idea could materialise. Canvas dimensions, columns and rows, images (and the number of them), text (and the amount of it) and positioning of the elements were all considerations when thinking about a system that obeys, and has the option to disobey, design principles. The proof of concept used p5.js to generate shapes which could be used in future iterations of my outcome.
Initiating the development of a variable font by analysing Helvetica Neue's anatomy, focusing on creating compatible ultra-light and bold letter versions. Minimising details and utilising circular forms for a digital aesthetic, but encountered compatibility issues due to node mismatches. Facilitating the creation of a functional typeface whilst allowing further exploration into variable font dimensions and ink traps.
Process
I began in Illustrator to identify the anatomy of Helvetica Neue. After some research I found the key to a variable font was creating two compatible versions of a letter, one at each of the extremes: ultralight and bold in my case.
My design philosophy for the custom glyphs was to further minimise details in the lettering. I focused on using circles as a perfect circle is very digital to me. Perhaps this could be down to the fact that perfectly round circles do not occur naturally frequently. Generally I wanted to continue the hyper-legible and minimal nature of Helvetica whilst imprinting the mark of my project.
I thought it would be relatively easy to copy letters from Illustrator to Glyphs to achieve this setup, however I found that the letters were incompatible due to different numbers of nodes. I struggled a lot on how to re-link each node and eventually decided to re-create the letters from scratch, using as few nodes as possible.
I found that using round values would help with scaling issues and would also apply a makeshift grid. Although very fine this would assist in the alignment of my letterforms to the baseline and the various heights.
A further positive of using a base font as a reference is that I can almost completely bypass the kerning workload. I set up my document so that the values matched my Illustrator document (x10 to be precise). I then compared the cap height of the original Helvetica Neue and my version and converted the kerning values (divide by 1.8965919701).
Using this method I reached a functioning logotype for the letters in my title "OffGrid." I exported and opened my work in Illustrator and tweaked the variabilities. I found this very satisfying and my appetite to continue adding variations and settings only grew.
Whilst learning about variable typefaces and compatibility I began thinking about further developments. Thoughts of creating variable font widths and ink traps came to mind. This is a path that I am hugely interested in exploring as I have enjoyed previous typography based projects however undertaking the creation of a typeface may be time inefficient.
Whilst creating a font family would be time consuming I believe it would be a valuable avenue to explore. My interest in design principles developed hugely during the typography project in Unit2, this was partly down to the many typographic-specific principles that came with creating a font. I believe that creating a font that uses specific principles and philosophies would be a fantastic proof of concept for my later project.Whilst there is no coding involved and the outcome would be element specific rather than compositionally specific, it would act as a good stress test for the rest of the project.Furthermore, the outcome could be used in my process book and dissertation to demonstrate that my work has a practical use whilst subtly conveying the message behind my work.
I concluded that creating a typeface would be beneficial to my project and started to re-think my progress. I realised that whilst the process had worked up until this point, it was not a sustainable method for creating a full letterset with even more variations.
My workflow until this point was to use Illustrator almost exclusively to draw the letters before taking them into Glyphs and making sure the versions were compatible. For the sake of efficiency I had decided to only change a few of the letters and I was using Helvetica Neue as a strong guide to ensure I did not have to commit too much time into kerning.
One of the main issues I had was scaling when transferring between Illustrator and Glyphs. For reasons unknown I needed to scale my letters up by a factor of 10 when transferring into Glyphs, then I had to correct the path directions of each object and tweak the scale further. This was followed by cleaning up the path direction of the letters and re-linking them so they were compatible with the other weights. Overall a very tedious process.
For these reasons I decided to start from scratch with a new Glyphs file and model the anatomical sizes on the Helvetica Neue Bold font when I opened it in Glyphs. I converted my entire workflow into Glyphs to prevent any scaling issues. This allowed me to work with whole values instead of decimals which I believe was part of the reason I failed to achieve consistent alignment. Whilst I far prefer modelling in Illustrator I can do the majority of my work inside Glyphs which saves me time jumping between the two programs.
During my struggle with making my letters compatible I accidentally stumbled across a tutorial on ink-traps and realised that I could re-use the same element across different characters. I theorised that this would be extremely helpful in ensuring my letters were mathematically and visually consistent. This also allowed me to realise that whilst there was no actual programming involved in the creation of my typeface, the rules and regulations (principles if you will) are near programmatic in function. Using recurring shapes would allow the entire typeface to update when a single change is made, automating the process slightly.
Experimenting with various letter variations to ensure font compatibility and functionality, including addressing initially overlooked serif italic versions. Major and minor adjustments to the typeface were explored to convey different messages, ensuring node compatibility across variations. Further development included utilising corner components like ink traps to optimize the design process by minimizing the need for excessive manual adjustments. This approach enabled a more efficient creation of variable typeface elements, focusing on the interplay of positive and negative spaces.
To ensure my ambitions were achievable I experimented with different variations of letters. For my first experimentation I realised how many variations were required to make all the fonts compatible. I forgot to add serif italic variations making some versions dysfunctional.
I explored how major and minor tweaks to one typeface can convey drastically different messages. All of the examples I created considered the nodes in each letter: All the 'N' and 'h,' 'o' and 'p' variations are compatible across their respective versions.
Taking my learnings back into Glyphs I confirmed the inner workings of compatible variations.
I considered the process of adding round and squared versions of the same letter as well as wide and narrow variations. To do this conventionally would require an unnecessary number of nodes and manual tweaking. Using a corner component to remove space, like an ink trap, would streamline my process.
Above shows rounded corner components applied (above left) and sharp corner components applied (above right). Above centrally is the rounded corner component that removes space. This methodology resonates with how Swiss typographers see negative space. Mike Parker explains in Helvetica (2007) "It's all about the interrelationship of the negative shape… the shapes between characters and within characters," highlighting it's not necessarily what we see that creates legibility but rather what we don't see. "The counters and the space between characters just hold the letters. You can't imagine anything moving, it is so firm... It's not a letter that is bent into shape, it's a letter that lives in a powerful matrix of surrounding space." By using corner components like this I sculpt letters.
Instead of exclusively modifying existing elements (serifs, ink traps etc) I explored how additional elements (that use both positive and negative space) can be used to adapt associations stemming from typography.
Similar experiments with terminals and ink traps were used to better understand the methodology behind a multifaceted variable typeface.
Introduction: Exploring the interest in combining programming and graphic design, focusing on automating design through AI and design principles. Addressing the potential and ethical considerations of AI in design, emphasizing the need for a balance between innovation and traditional design integrity.
Before devising a concept for my project I decided to evaluate my interests and influences. The first influence that came to mind was the role of programming: My first experience of programming was with the chatbot unit and later the p5.js project, both on the BAGD course. Due to my newfound interest in coding I undertook the Apple Development year long CCI course to help bolster my programming knowledge and expand my career prospects.
I knew whatever project brief I would come up with would include both graphic design and programming, aiming to combine these two interests and skill sets. One of my influences is Design Systems International: I had the privilege of talking to co-founder Rune Madsen wherein we discussed how design systems can be programmed. I found the topics discussed of great interest which further reinforced the feasibility, and commercial value, of a hybrid project.
The idea that good design can be quantified is fascinating
Another of my interests are design principles. The idea that good design can be quantified is fascinating and I would like to explore how objective rules interact with a subjective field. The objective nature of design principles suggests they can be programmed, creating a link between graphic design and programming. Furthermore, the mainstream use of artificial intelligence in recent times has further opened doors for how the graphic design process could be streamlined. Specifically large language models in collaboration with image generation systems have the potential to assist, if not completely nullify, graphic designers. I am also interested in the processes in which AI systems are built and how they are trained: I began researching how compositions could be programmatically analysed in the machine learning section of the Apple Development course. The use of AI in most industries is inevitable, learning how to use these as tools is how to get ahead of the curve. Those who fail to learn new tools will be left behind.
My system gave a "design efficiency" score based on alignment
The system I developed for my final machine learning project used the Rule of Thirds design principles to analyse the effectiveness of car posters. The rule of thirds aligns elements within columns or along intersecting points. My system was trained on car posters and was able to identify cars and text elements, draw their bounding boxes, identify their central anchor point and analyse their relationships to the 3x3 grid. My system gave a "design efficiency" score based on alignment of elements. The project explored only one design principle and did not question the history or bias behind it, making it a good proof of concept project and opening the door to a more complex investigation.
Oscar Wilde famously said "talent borrows, genius steals:" In the case of machine learning and training datasets is this still the case? The internet has encouraged users to distribute media and AI systems have the capability to be trained on these images even if this was not the intended use. Is it therefore arguably unethical to use these resources for their unintended purpose or is it the graphic designers job to rid the world of ugliness by whatever means possible.
compositionally AI models struggle to distinguish or place elements in a multi-component image
I have found in my personal practice that artificial intelligence has specific uses that speed up my process but has its shortfalls. For example, compositionally AI models struggle to distinguish or place elements in a multi-component image. Whilst individual image generations are becoming indistinguishable from pictures, more conventional graphic design work is yet to be threatened. As conscious graphic designers, the power to create ethical and effective automated design systems is within our grasp.
Graphic design is a subjective field however, meaning generating 'good' design will vary in practice. Graphic design trends are also contextual and historical and so a deep dive into the timelessness of design principles will be necessary. Technological advancements also inform design principles, for example in recent times the mass redesign of logos has occurred for the sake of scalability being that a large proportion of content is now viewed on a phone screen.
Proof Of Concept
I created a proof of concept program to begin thinking through making: How I could realise the combination of design principles and programming. The concept did not function effectively however it did allow me to theorise how my idea could materialise. Canvas dimensions, columns and rows, images (and the number of them), text (and the amount of it) and positioning of the elements were all considerations when thinking about a system that obeys, and has the option to disobey, design principles. The proof of concept used p5.js to generate shapes which could be used in future iterations of my outcome.
Creating a lowercase-only font based on Helvetica Neue served as a proof of concept, demonstrating potential with some limitations. Issues included artifacts in letterforms due to grid constraints affecting node transitions. Using a strong grid facilitated speed but compromised flexibility in font variation transitions. To maintain compatibility, 'collapsible' corner components were used, leading to rendering artifacts. Challenges with multi-component letters arose, as traditional corner components didn't fit with complex setups, prompting manual adjustments. The variable font aimed to accommodate subjective design preferences by enabling seamless style transitions.
I created a lowercase only font to continue testing the feasibility of my concept. The outcome is based heavily on Helvetica Neue and does not include all the variations I intend to implement; however it acts as a successful proof of concept.
Some unforeseen issues did arise, involving artifacts in the letterforms: The shapes did not export exactly how they appeared in Glyphs.
I used a strong grid to create my letterforms to improve the speed in which I could create letters. Having certain restrictions reduced the number of decisions I needed to make. This does interfere with how nodes work which is particularly apparent when transitioning between font variations
One problem with using 'collapsible' corner components is that they cannot be removed completely: To maintain compatibility the components must maintain the same number of nodes and handlebars in all variations, sometimes leading to the rendering of unnecessary artifacts as shown above.
Another issue I encountered revolved around the setup of multi-component letters. Initially I theorised using components would be an effective way of creating many variations easily however the setup shown above does not allow corner components to be used in their traditional sense (as there is no 'corner' to interact with). My solution to this was to cut out parts of the letter manually however more complex corner components would not be compatible with this methodology.
Unlike my previous experimentations this was a full character set, meaning I could no longer avoid difficult letters that did not conform with the rigid rules I was applying to each font. I found that creating a cohesive, compatible, legible and aesthetic font was difficult when all letters are required. Previously my experimentation and research had pointed me in the direction of writing "h," "o" & "p" first as they would demonstrate the style of the typeface. This was effective however the methodology applied to any of these three letters does not translate to letters like "Z" or "y."
Furthermore, I could test my font with words. Seeing my design in a real, practical sense allowed me to envision the true potential for the font.
Theorising modifying an ultra-legible font to include computational elements, reflecting the technological project themes. Studying how Pentagram conveys messages through typography to achieve a distinctive, technology-oriented aesthetic.
Brief
The next MakingA brief was a visual identity. Previously in the project I had made a logo-mark for my work and wanted to explore a typographical approach to the brief. I decided to make minor modifications to an ultra-legible font to give it a computational aesthetic, therefore communicating the themes of my project.
I began with some research into how other brands expressed their brand message subtly through typography. Pentagram has a section on their website that includes all their re-brands which I made good use of, researching what I thought was successful and implementable into my own project. I chose Pentagram as the focal point of my research as they are one of the most well known and well respected graphic design firms. To maintain such a reputation they must be fulfilling the requirements of 'good' design to a degree. By understanding the success of these rebrands I could begin to understand how meaning is conveyed through design in relation to brands related to technology.
Lightmatter
I really like how Pentagram has minimally modified a typeface to fit their purpose. I am keen to use a highly legible typeface to fit with the design principles that I am exploring, however using an existing font in its original format is not very imaginative or visually interesting. To stand out it is important to be different and I think modifying a font to reference my technological themes seems like an appropriate solution.
One of the ways I intend to modify a typeface is to mimic the visual language of the terminal. For example taking elements from a CRT font.Instead of changing every letter to mimic these themes I would like to focus on a select few. One consideration however is how the weights of each letter behave. I have experience using Glyphs from an earlier unit however I did struggle with different weights and how the kerning values change. Being that my base font will likely be Helvetica and I am utilising the font-weight CSS property I will need to create a flexible system.
Oxide
Another case study I have been looking into is Oxide: One of the elements that stood out to me is the incorporation of the diagonal line in the zero & using a zero instead of a capital O. This is very reminiscent of the terminal as is the rest of the brand identity for Oxide.
"Hexadecimal (also known as base-16 or simply hex) is a positional numeral system that represents numbers using a radix (base) of sixteen"
I then looked into existing fonts that I could use as a foundation/ take inspiration from:
- Menlo is the terminal font for Mac seemed to be a good starting point due to its practical association with programming.
- VT323 is a CRT font that I used in the chatbot project earlier in the course to convey a retro, analog look. Whilst I am going for a more futuristic look, this typeface has heavy visual ties to technology and relates to the idea that older technology has a stronger association with computers as we take modern technological product design for granted, forgetting there are complex computers in the devices we hold in our hands.
- Kola is a good example of a font that incorporates minor differentials, the cutouts, to create a distinctive look. Being that I have limited time, this technique would be an efficient way to modify an existing font to fit the message I am trying to convey.
- RX100: Similar to VT323 this is a font with heavy ties to CRT typography however it has been modified to give a more modern aesthetic.
- Inter is a very modern, sleek and highly-legible font. Whilst it does not have visual ties to technology, it's prioritisation of legibility is a modern approach.
- Roobert is a typeface not dissimilar to Helvetica however it utilises subtle features to differentiate itself. Particularly in the "G" Roobert stamps some personality on an otherwise sterile, highly legible font. The use of straight lines, specifically in the "g" give a modern feel to the typography.
- Power Grotesk is the font used by Rabbit AI and it has a very distinctive look. The font uses powerful ink traps to create its visual style. Contextually this is a fantastic font to reference.
- Lunema Sans: Similar to how Power Grotesk uses in traps, the font uses angular lines, again in the "g," to give it a sharp look.
- VVDS Fifties is a font is a more playful take on vintage fonts. The bold letterforms remind me of a CRT logo which creates a connection to technology: This could be due to the distinctive "f" that uses a rounded corner.
- Proto Mono returns back to a more direct link to technology, heavily referencing technology through its monospaced kerning and sharp edges that resemble common code editors.
- Inndam uses bold letterforms with few details. Similarly to how previous fonts have used ink traps, Inndam uses negative space in the corner of the letters. This is reminiscent of matrix grid typography, therefore creating associations with technology, announcement boards specifically
I then continued my case study research, starting with:
Cohere
The Cohere brand identity is a fantastic example of what I am looking to recreate. The brand itself is heavily technological and it modifies type based on an automated system.Not only is the process in which the type is changed topical but the aesthetic is also. This project was a large inspiration after listening to Jody's talk at Pentagram. I admire how a system so technical is generating such aesthetic visuals. For my typeface I don't plan to create a complex system that generates letterforms, however the subtle details created by this system can be achieved manually.
A further element that I hugely admire about this project is the versatility and tweak-able nature of the font: I love the idea that the font provides the tools and the user can tweak settings so that it can fit their purpose. This relates heavily to design principles as they are forced in this system: The rules of the system are forced upon the user so they cannot stray from the brand identity, the aesthetics of the typeface or even its legibility however the user still retains freedom.
Isomorphic Labs
Isomorphic Labs is a good example of how typography can be used as a secondary element to convey a message. Compared to Cohere, this example has much more subtle typography, allowing the background elements to convey much of the message. The message is reinforced by the subtle typographic properties of the logotype. The main example of this is how the "r" levels out so quickly, relating back to my previous comments documenting how more angular lines have a technological feel.
I am very interested in how the typography is used as a message reinforcer rather than the sole communicator of the message. I mentioned previously that the format of my process website is intentionally a background element to the content. I think my typography could help communicate the themes of my project without specifically saying it.
Verizon '5 States of Ready'
This Verizon brand identity is an interesting example. Unlike the previous two examples, this one uses a matrix grid with its typography. The motion in the video remains rigid to the grid which is an efficient way of communicating rigidity without physically altering the type.I like the idea of adding animations and motion generally to my process website to improve the viewing experience however this is not a priority.
Graphcore, the Companio
This example has been included less for directly typographical examples but instead for how the design uses type in accordance with a grid system. The grid system creates a sense of rigidity but at the same time a sense of modularity: creativity/ adaptability within parameters.
Oxford Ionics
The Oxford Ionics rebrand links directly to matrix typography that I touched on earlier: This gives a very technological feel but does sacrifice legibility.
I wonder if creating a font that has a grid-like version and a legible version would be feasible.
Secondmind
I don't think the SecondMind identity is doing anything special, however it does use Helvetica, demonstrating that simple, to-the-point typography is a feasible solution.
Sonatic
Sonantic is an excellent example of how only one letter (or the occasional letter) being changed can dramatically alter the appearance of a typeface. It is not necessary to change every single letter to convey a new message: efficient, minimal tweaks can have a big impact
Slack, Kaiyo, IonQ & GraphCore
All of these examples are similar in the way they convey a technological feel through their typography. None of them are doing anything revolutionary in their design however their subtle technological undertones convey their context efficiently
Uptake
This example is very similar to my process book's format: Hyper-legible sans serif typography and a very limited colour palette.
I like how the identity uses the eye icon to create other icons. This principle could be recycled in my project: I like the idea of creating custom glyphs. Previously I have noticed that Helvetica includes some icons, such as arrows and the Apple logo. Whilst this is not a necessity I believe it could be an easy way to implement project/ personal icons
Platform
Platform's identity has heavy literal links to technology and the approach I have taken to my project. The typography has direct links to technology and the terminal/ CRT typefaces that I have referenced and the book cover contains gridlines like my process book.
I would not like for my typography to be quite as direct as Platforms: I would prefer legibility to be prioritised more and for the context to be more subtly communicated.
One note I like about the book cover is how disconnected the grids are, it gives a more spacious feel and I realise how everything being confined on all sides can be constrictive. The cover also only includes vertical gridlines which is a technique worth exploring.
Representing my project themes caused speculation on the outcome. Focusing on typography that can be customised best suits the philosophy of good design being customisable: Fitting all user preferences.
Philosophy
To reiterate, the first thing that comes to mind when I think of a brand identity is their typeface. Logos are of interest however logos can be typographical. I believe that once a brand's typography has been finalised, everything else can follow: Icons can be inspired by typographical elements, the colour of the typeface is easily modified.
Being that my project is a combination of design principles and technology I thought it was important to use an incredibly legible typeface to convey my ideas. The bulk of my design identity philosophy has already been undertaken through crafting my process website.
Helvetica Neue was the typeface I decided to use and have used a variety of font weights, tracking values and line heights in the process website: One consistent, highly legible font with enough visual difference to demonstrate hierarchy.
Before the Making A Identity brief these design decisions were all but set in stone. To develop my identity into something unique I chose to modify characters in the typeface to subtly communicate the technological tropes of my project.
During the design process I realised flexibility was very important to me. Part of the reason I designed my process book as a website was to allow my content to be tweaked to the users preferences. I realised that some tweak-able typographical settings would benefit the user's experience as I cannot predict what screen size they will be viewing the content on or the quality of their eyesight: Many factors that are out of my control could break the 'success' (legibility in this instance) of my design work.
Perhaps successful design is not one design that accommodates for all, but design that can be modified to the users preferences. It would be unfeasible to create a design that ticks every box however a design that can be tweaked to fit closable boxes is a different discussion.
I had this hypothesis before that user customisation may be the best middle ground and this task seems to support this vision.
In line with compatibility with my current setup (numbered font weights) and user tweak ability I thought it was appropriate to create a variable font with a tweak-able weight. This was something that I had not done before but decided Glyphs would be the best program for this.
Philosophy behind the typeface
'Good' design is defined by many factors but any conclusion reached will assert that design is subjective, meaning there is no objective definition. To account for this I decided to create a variable font that transitioned seamlessly between styles.
I wanted to explore the theme of democratising design. Themes explored in my dissertation pushed me towards the idea of inclusive design and what it could look like. I concluded that one truly inclusive form of design would be one that is completely personal. One way in which this could be achieved is through the conventional designer-client relationship however presently this would be infeasible as there is not a 1:1 ratio of designers to non-designers.
To climb this hurdle I found the idea of democratising design tools and design language to be a stimulating topic. This partly was inspired by Jody Hudson-Powell's work for Pentagram, specifically his work on Cohere where generative (non AI) resources were provided to the client, allowing them to take charge, in part, of the design work.
The nature of variable typefaces is their ability to seamlessly transition between styles by using a slider: an accessible and intuitive system. By applying the same principles to a font family with more diverse variations I would allow the user to create new combinations with no design knowledge. Of course I would be applying my personal bias and design style to the fonts subconsciously however it would be a start. In the future, sampling other designers' work would be one way of making the fonts more inclusive.
Similarly, the designer would benefit from a 'one-size-fits-all' typeface, particularly if it was based on a conventionally successful font like Helvetica. Design purists would see no reason to stray far from the base version whereas more expressive designers would have the ability to push the boundaries of the typeface: The happy medium is subjective and so the typeface would account for all visual preferences and use cases.
This methodology stems in part from The Debate, a discussion between Wim Crouwel and Jan Van Toorn which highlights these ways of working. Crouwel sees Helvetica as the perfect typeface with no reason to stray from it at all. Van Toorn on the other hand believes there is no way to truly be neutral as a designer and so follows a more artistic approach. These designers are at opposing ends of the design philosophy spectrum. My typeface would account for all the designers in between the two points (and the two points themselves!).
My vision for the context of my typeface is similar to that of Helvetica's and how sans serif, hyper legible typography was applied to everything and anything post WWII. The nature of the typography is different however, meaning that whilst the same typeface may be the standard design solution, its versatility will prevent it from becoming overused in the same way.
Another interesting point to consider is association. Helvetica became associated with capitalism "corporate culture" (Pater, 2016) however if the visual style of a font is ever-changing it would likely never be associated with anything in particular. The goal of the typeface is to capitalise on associations, not build them. Being how diverse the font aims to be, it would never be truly contextualised as it would be adaptive to the context.
Reevaluating the project's packaging to provoke thought and represent its conceptual questions more effectively. The packaging will feature pointed questions about design automation and perfection, alongside a detailed explanation to ensure it communicates the intersection of design control, consistency, and creativity with every use.
Packaging Development
After re-reading the brief of the project, I have realised that my package needs to be more thought-provoking. My thought process until this point has been to represent my project in the truest way possible. I believed that the project idea itself was a provocative enough question; however, I have been representing the project's final outcome rather than the question the outcome aims to unpack.
I will be re-writing the information on the package to represent these questions:
- Perfect design at the press of a button
- Creativity on autopilot: Zero flaws, zero surprises
- Repeat, replace, recycle
- Effortlessly effective: no creativity required
- You miss all the designs you don't make with principles
- One formula fits all
- Fuelled by rules you can't ignore
- Discover the formula: rules just work
I will also need a paragraph explaining the device and project in more detail:
- Experience effortless design precision with every use. OffGrid brings design perfection within reach, delivering flawless results time after time. No more guesswork: with each button, automatically applied design principles create immaculate, on-point visuals. Embrace the future of design where control, consistency, and creativity intersect in a single, accessible device.
I applied some distressing effects to my graphics to give them a worn, authentic feel.
UV mapping is a technique used in 3D modelling to apply textures and graphics to a model. In this case I used it to apply my graphics to the different surfaces.
Final typeface demonstration and critical reflection on challenges faced in creating a complex variable font system. Despite limitations in time and technical execution, the project established a foundation for future exploration of customizable typography.
Please click this to Test the Type!
Unfortunately I am not happy with my final outcome: I simply ran out of time. The state that I have concluded the work in would act as a wonderful foundation to develop the typeface from, however I am not able to continue development. I realised that, although my idea is a good one, it requires a lot more expertise and/ or time to be done properly.
At the inception of my idea I thought I was really onto something and couldn't see why this concept had not been accommodated before. In retrospect however it seems the time and technical restrictions of creating a successful version of this project do make it infeasible by an individual.
I found that as soon as various fonts are added the number of variations increases exponentially which truly stifles creative freedom. I found the process very repetitive as far as creating the letterforms, I never progressed onto the really interesting ideas I aimed to explore. In the future I will not be so ambitious with creating a full character set that even includes punctuation. I feel that if I had begun work on one typeface instead of carrying out various experiments earlier in the project I would have created a less efficient system but focus over a matter of weeks is better than perfecting a strategy and leaving it too late.
As more variations are added, the number of fonts increases exponentially: one font with one variation is one total font, a typeface including three variations would need 3x3, nine variations. I was aspiring to include a variety of font styles, weights, widths, heights, serifs, ink traps and essentially any other property I could think of. Assuming I was to do three of each of these (in honesty I was thinking more) that would be 3x3x3x3x3x3, totalling 729 variations. Whilst there is significant overlap between these fonts in shapes, kerning etc that is an absurd amount of files to even navigate: not to mention all the exporting issues that comes with seamlessly transitioning between them.
By ensuring all the letters were compatible across the fonts I found creativity was severely limited. I had to be very conscious of how each node was used to avoid overcomplicating or oversimplifying: This meant that although the font styles were distinctive they were visually not completely dissimilar. I aimed to allow the user to work with the small differences as, in design, minor changes affect perception hugely. Serifs and san serifs are huge typographical differences but what about small serifs or wide serifs, would they better equip a designer to convey their message if subtlety is customisable? I believe so.
The entire font is completely future proof as the serifs and ink traps can be interchanged very easily. With that being said, Glyphs did through spanners in the works with compatibility problems: it is impossible to foresee exactly how two complex letters will transition from to another which often resulted in errors.
I do intend on continuing the exploration of this typeface, I feel the project has lots of unexplored potential and without time restraints I believe justice could be done to the project. I may not intend on creating 729 font variations but my outcome did not represent the themes or complexity I set out to.
Had I been able to incorporate all the styles I experimented with across the typeface into one font family I believe the project would have fit the intended goals of the project. There was lots of research and smaller experimentation not included in this presentation that informed my future goals also. Sadly all of my ambitions were not realised.
The final outcome felt quite rushed partly because I thoroughly enjoyed writing the dissertation and exploring themes. The typeface felt partly disconnected from the dissertation despite the intention for them to inform one another.
Integrating digital storytelling by focusing on the tactile satisfaction of opening packaging, simulating it through animations replicating the physical experience. Explanations of design principles by mimicking old boot screens, enhancing the narrative.
Animation
I understood that I could not fully realise my concept in the physical world and instead continued building my narrative digitally. One of the core mechanisms for my packaging was how it opened: I wanted to mimic modern day product design wherein the process of opening a device is highly satisfying, using surface friction to slowly slide the shell package away from the main packaging. I decided to make this a focal point of my animation to ensure this consideration was front and center.
To rectify the shortcomings from before I decided to create another video that explained design principles. This solution allowed me to keep the packaging similar to how it presently was whilst communicating more information. Stylistically I wanted the video to mimic a boot screen of old devices and so I included specific transition effects and a general visual style to communicate this.
In continuation with the direct technological link I edited the video in After Effects to apply certain glitch effects. Just as I wanted the packaging to look like a lost relic, I wanted the video to feel like an old, discovered VHS tape.
A problem with having the video and packaging separate is that they do not inform each other: They are both separate outcomes that are seemingly unlinked. I thought about how I could combine the outcomes into one. I remembered how consideration for the interior of the package was mentioned and thought about how I could spin my inability to manufacture the actual device. I thought back to old packaging for similar devices and how they typically came with some sort of manual: a small book that contained information on the device. I theorised about how I could use this to convey further information and realised I could create a flipbook animation of the render I had made in Blender. If the flipbook was the same dimensions as the device I could complete the interior of the packaging and put the flipbook in the place of where the device would be. The video had no reliance on sound, therefore no sacrifices would be made.
I re-animated my render so the front of the device could act as the cover for the flipbook, meaning the viewer would open the packaging to the front of the device as if it were there. I then mimicked some of the previous animations for the sake of visual interest.
I realised the previous video was not a good proof of concept as there were too many frames per second, unlike a flipbook. I re-exported at a lower framerate to give a better understanding of how the flipbook could appear.
Exploring the integration of design principles in digital compositions, the project involves creating a poster using a baseline grid and highly legible typeface to examine the functionality of traditional design frameworks. The research investigates whether strict adherence to design principles such as grids and type consistency enhances or constrains creativity.
MakingA Poster
The first MakingA task prompted thoughts of visually communicating my project concept. I visualised popular design frameworks such as the baseline grid and a highly legible typeface to mimic the International Style. An attempt was made to follow design principles to create a modernist design poster whilst visualising the structure behind the design choices.
My caption gave a brief rundown of the goals of the project:
"Off Grid will investigate the role of design principles, such as grids, type consistency, the golden ratio, and the rule of thirds, in creating "successful" designs. It will critically question well-established rules, questioning if they are truly essential or if they impose unnecessary constraints on creativity. The enquiry will dissect elements that contribute to effective graphic design and challenge the assumption that rigid adherence to principles guarantees better outcomes.
A programmed compositor will produce graphics that either follow or ignore these rules. Through this process, comparisons will be drawn between the resulting designs with their effectiveness evaluated. The goal is to determine if there is a clear distinction in the perceived success of designs that adhere to traditional principles versus those that break away from them.
The hypothesis driving this research is that the difference between rule-based and non-rule-based designs may be less significant than traditionally assumed. By the end of the project, I aim to reveal whether these principles enhance or hinder the creative process and to what extent they influence the success of a visual composition."
I am pleased with the poster, I think it communicated the design principles that are overlooked in design, using the grid systems and theoretical eye-tracking heatmaps to convey some of the principles I aim to explore later in the project. The main issue of the poster is the small text size of the project description, I aimed to maintain a minimalist look and therefore downsized the text. In hindsight I should have consolidated the text and increased the text size as a design with unreadable text is a fundamental failure.
I aim to uncover the feasibility of programmatically generated effective design
The MakingA task allowed me to consider the parameters for my project further and gain clarity on my direction. By exploring graphic design principles I aim to uncover the feasibility of programmatically generated effective design. The project looks forward to the potential role of artificial intelligence within graphic design and the ethical considerations that come with non-human creatives.
I hope to create a sophisticated system that automatically implements design principles and one that does not: allowing the user to choose between theoretically 'good' design and unconventional design. The project should construct a deep understanding of new technologies to prepare for a world with automated graphic design systems.
Examining foundational design principles such as balance, contrast, and unity, illustrating their role in crafting aesthetically pleasing and effective visual communications. Exploring the potential for programming these principles to automate and optimize the design process.
Design principles are foundational concepts used to guide the creation of visual compositions, ensuring that the end result is aesthetically pleasing and effectively communicates its intended message. These principles play a crucial role in graphic design, where the arrangement, appearance, and overall harmony of elements can significantly impact viewer perception and interaction. It is vital to visit some examples of design principles to inform my knowledge of what design principles are, how they are used and their potential for automation. The seven most well known examples of design principles are balance, contrast, emphasis, repetition, unity, proportion and hierarchy.
Balance
Balance refers to the distribution of visual weight across a layout. It ensures that the composition feels stable and aesthetically complete. Balance can be achieved symmetrically, where elements are mirrored horizontally, vertically, or diagonally which creates an orderly appearance often utilised in corporate branding and minimalist designs. Alternatively, asymmetrical balance distributes elements unevenly, leading to dynamism and visual interest designs. In practice grids are often used to structure elements symmetrically or skew them in the case of asymmetrical designs.
Contrast
Contrast involves the juxtaposition of opposing elements to distinguish parts of a design. This principle utilises differences in colours, shapes, or textures to create focal points and direct the viewer's attention. For example, contrasting colours can highlight important information or create a visually striking effect. Contrast is often applied to text and image, using colour differences, to enhance readability and visual interest.
Emphasis
Emphasis focuses on drawing the viewer's attention to a specific area or element within the design. It is typically achieved through the use of contrast, placement, or scale. By emphasising particular parts of the design, such as with a large image or bold typography, designers can guide the viewer's eye to key information or features. This principle is essential for designing effective user interfaces and promotional materials where prioritising information is crucial.
Repetition
Repetition strengthens visual cohesion by repeating the same elements across various parts of the design. This creates rhythm and cohesion, reinforcing the overall theme. Using the same elements, not necessarily with the same design styles, unifies and enhances designs, making it more coherent.
Unity
Unity is achieved when all components of a design work together seamlessly to form a cohesive whole. This principle is about ensuring that elements such as colour, style, and spacing are harmoniously integrated. For instance, matching the style and colour of buttons with other interface elements can enhance the visual unity of a project. Consistent use of margins and alignments also contributes to a unified appearance that is visually pleasing and easy to follow.
Proportion
Proportion refers to the relative size and scale of elements within a design, influencing how they relate to each other and the overall composition. Proportion can establish a visual hierarchy, directing the viewer's attention from larger, more dominant features to smaller, supporting details. This principle is particularly important in layout design, where varying the size of images and text can indicate their importance or function within the piece.
Hierarchy
Hierarchy organises elements according to their level of importance. By making certain components more visually dominant, such as through size, colour or placement, designers can control the order in which information is perceived and processed. This structuring is crucial for effective communication, particularly in informational designs where guiding the viewer through the content in a logical sequence is key.
Design principles are essential tools for creating effective and engaging visual communications. By understanding and applying these concepts, designers can enhance both the aesthetic quality and functional clarity of their projects, making them more compelling and accessible to viewers. Whilst the application of these principles are understandable, computational systems may struggle in selectively applying them. Some designs will be more effective only utilising some principles whereas other designs, aiming for a more ordered and systematic aesthetic, will incorporate more principles.
Addressing the flat and unappealing appearance of initial device models, texturing and distressing techniques were applied to enhance realism and aesthetic appeal. Through detailed experimentation with materials and light sources in Blender, the development aims to finalize the device's design and integrate it seamlessly with digital presentations.
Device Development
I've been struggling a lot with the outputs I have been creating: My reference images seem very simple in design, however when rendering the models they seem very flat and boring. They are understated like the references, however they are not visually appealing.
My solution to this problem was texturing. I decided that the reason the models looked so flat was due to their materials. I was encouraged by the metallic materials; however, the plastic and glass materials seemed miles off of what I wanted.
I experimented further with distressing the model, believing that the device would look more realistic and fit the appearance of my packaging if it was imperfect. This followed my previous reference to the idea that "digital imperfection is digital perfection."
After following various tutorials, I began to understand how the texturing nodes work in Blender. I am far from an expert, but I feel that I am more competent with Blender now. I also added some further light sources and removed the world texture. I changed the model itself to add some complexity and visual appeal. I think that I am close to a finalised model.
The next steps I intend to take are finishing the packaging around the device and rendering visually appealing animations using the packaging. I understand that if I display any physical work, it will not represent my concept completely, meaning I will rely on digital work to clarify my messaging.
One of the ways I plan to do this is by displaying a video on the screen itself. I will create a CRT emulator that will push the graphics on screen towards a visual language that fits the device.
Developing a dynamic process book to let users interact with digital outcomes firsthand. Improving the visibility of my creative process and outcomes, utilizing a scrollable interface with detailed content without page limits, supporting a deeper engagement with the work.
I have struggled displaying my work in the past being that it is primarily digital: Any physical outcomes tend to be an afterthought existing solely for the purpose of marks.
I am a digital designer and I have had trouble using a static process book in the past. Amongst other things I have created 3D models, videos and programmed outcomes in previous units, all of which I find very difficult to present accurately. I will never be able to convey my outcome with enough accuracy through screenshots or writing and so a programmed process book where the reader can interact with my outcomes and experience them first hand was very important to me. I would also like to document my references clearly using links, assisting with the communication of my ideas, their sources and influences. Furthermore, a programmed process book allowed me to build my coding skills and advance fast track the creation of my digital portfolio.
One issue I typically have with process books is the page limit. I understand the value of communicating only the most important information however with a word count I typically will edit my content, often removing key parts of text, to ensure it fits within the guidelines of the document. I like to keep my pages packed with content and cutting out important information is not an elegant solution.
I decided to create a system that would allow for the page to remain full of content at all times without compromising on detail. My vision was very clear in my head: I wanted the page to be scrollable horizontally so that the reader could access all stages of the project easily and vertically for the detail in each section. Admittedly I thought I had revolutionised process books before realising I was essentially copying Padlet. In any case, the decision was made: columns and rows would dictate the layout of my process and I believed it would be appropriate visual language to keep the gridlines visible.
I chose Helvetica as my font being that it is ultra-legible and a common component in arguably the most rigid system: the International Style. Helvetica also has enough weights to achieve efficient hierarchy. My only hang-up with using it is how generic and therefore boring it is: It also may or may not feature in every process book I have ever made. Whilst this is true I thought it was important that the layout of the work remained relatively boring to allow the outcomes I did create to stand out. I am a visual person and the visual priority of my process book should be the creations.
Evaluating the structured application of design principles in Doron's work, an artist who leverages his conventional arts education and technical mastery to enhance design workflows. The Rule of Thirds, balance, hierarchy and contrast feature prominently, making principles easily dissectible, enhancing visual coherence.
Another artist I take inspiration from is Doron who provides design critiques and tutorials, demonstrating how design principles can be applied to improve designs. Doron's technical understanding of his tools inspired thoughts of how technology affects workflows.
Doron attended a conventional arts high school and considers his approach to design to be more conventional being that he learnt design principles from an early age. The design principles in his graphics are much more obvious and dissectable:
Emphasis to draw the eye to Olivia Rodrigo and the Rule of thirds occurs with the elements on the left. Balance is achieved through the use of the text, making the design symmetrical. Hierarchy highlighting the album name and the colour palette unites. Contrast is achieved through the separation of colours
the Rule of thirds occurs in both the horizontal layout of the text and images and in the vertical spacing between the images. Hierarchy guides the viewer's eye down the page and a limited colour palette unites & contrasts.
The Rule of thirds is present in the location text arrangement horizontally and in the separation of text vertically. Repetition occurs in the type of macro, facial images. The grunge texturing unites and makes the design elements coherent.
Balance occurs through the use of symmetry and the design and the Rule of Thirds with the alignment of "10 year anniversary" and vertical alignment of the columns and three subjects.
Balance is achieved through the symmetrical, centrally aligned text. Contrast and repetition is achieved through the red and orange spheres.
The Rule of Thirds and hierarchy are apparent in the vertical separation of the text.
Developing packaging for a conceptual device inspired by early 2000s technology, emphasising retro aesthetics. Echoing old gaming consoles the project critiques traditional design principles through a deliberately aged and 'failed product' aesthetic, using gridded and distressed elements to communicate the themes effectively yet ironically.
Continuing to build the visual identity of my project the task of creating packaging for my project arose. It was vital that the packaging represented the themes of my project both visually and in the form of the product itself. Being that my project would conclude with a program, I thought it best to create a device to use the program on.
The main theme of my project is its technological nature: I thought the best demonstration of technology, regarding handheld devices, are old video game consoles like the GameBoy, PSP & NintendoDS. I compiled a mood board composed of similar real and concept devices that I could base my product on.
Modern technology-based product design seems to be getting more and more minimal, with buttons being stripped back for the sake of versatility: opting for on-screen buttons instead. Functionally, this makes sense; however, the loss of tactility impacts the satisfaction of using devices. Versatility was not a consideration: the more specialised the device is the better. I therefore decided on using buttons for each feature.
The project will analyse principles with a critical eye
I modelled the device roughly, prioritising aesthetics over practicality since there was never any intention to manufacture or use the device. I followed tutorials to texture the buttons and tweaked the values to my needs. I never intended for the device to feel modern; being that design principles are an age-old concept it was important to me that the visual language looked and felt like a relic found in the attic. I felt it was important for the device to have the aesthetic of a failed product. My interest for design principles stems not from an insistence that they are functional but rather an interest in the history and justification of them: Make no mistake, the project will analyse principles with a critical eye.
I then realised the packaging must be physical: Instead of attempting the impossible by manufacturing what I had modelled, I created packaging for the device I had designed. In keeping with the aesthetics and thought process of the device, I took inspiration from early 2000s device packaging, including some of the content used in my poster. I realised that a common visual recurrence was a gridded background, which worked perfectly with my project's themes and used this grid to position elements on the packaging. Furthermore, I realised contextual packaging included gradients which I incorporated into my packaging to help the viewer build associations between my project and the era I aimed to reference.