During my Bachelor's degree at the university, we undertook some basic sessions on coding to enable us to potentially build our skillset and our understanding of the basics and details of using code to create graphic design outcomes. As part of the Creative Studio module, this topic has resurfaced and upon hearing this I was both apprehensive and excited to experience this media yet again.
My first encounter with coding was basic but used the same software that we used during the recent session ran by Steven Calcutt, Processing. Although my first experience with Processing and coding both did not come to any substantial graphic design outcomes or even resonate enough to continue to build this skill in the years after university graduation, this recent workshop seemed to hit home.
After the workshop had ended, I was motivated to continue to experiment with Processing and coding and attempted to create user interface screens through nothing but coding and the advice on the Processing website. The layout was created using various controls we learned during the session such as inserting an image and creating shapes but with an expansion into others such as adding text with a specific typeface, resizing the images once loaded into the code, layering images on top of one another to build the appearance of a mobile phone (iPhone) interface and creating notes within the code to keep the interface organised. You can see an overview of the code created to build this screen design below.
To allow for focus on the basics for this first attempt, I approached the screen type of an onboarding screen. These screens are used as an introduction to an application and showcase a usually minimalist layout with statements about the app's features before moving the user into the actual application.
In contrast to the first session of coding undertaken years ago, I found a fondness for this experience. During this Masters degree, I am experimenting to expand my creative practice into the field of user interface (UI) design, which I believe will be a smart move from a professional and commercial sense due to the way that technology is advancing around us and our ever-increasing dependency on it, take Covid-19 as one example of this dependence. With this field in mind and through researching this creative field throughout the other modules of the course, it was starting to become obvious that coding is used largely within this field. Although software such as Sketch, Figma and Adobe XD allow for designers to create user interfaces and export them into code for developers, I believe that a basic understanding of the basics and the finer details of coding allows for an appreciation of the developer's role. This then in-turn could allow for a synergy between myself as a designer and a collaborating developer as we both understand the limits of code and how elements are created.
Throughout this module, I will continue to experiment with various aspects of the user interface and its composition. This includes generating and experimenting with the grid systems that create layouts from custom to proven solutions and grids from around the graphic design field such as hierarchical or modular and experimenting with tools to create layouts such as Adobe XD and now coding. All of this allows for a deep understanding of the user interface design field and the methods used by creative professionals in the field. Although this first test is fairly basic, I will continue to build this coding skill up throughout the rest of this module along with side the wireframe layouts and grid systems.
First coded layout:
Tests following the workshop:
Tests during the workshop:
References:
Processing. (n.d.). Reference. Processing.org.https://processing.org/reference/
Comentários