top of page

Coding - A Design Tool

Writer's picture: Ryan PilkingtonRyan Pilkington

Updated: May 5, 2021

Due to the rather slow nature of the coding space, and my developing skillset within the coding field, aspects of design such as colour, contrast and space are given a pronounced focus. As part of this module, I am exploring the digital design space in regards to user interface and user experience design in order to further develop knowledge and skills that will aid in the creation of the final major project outcomes, a prototype application primarily for mobile.


Creating a visual response through the coding field requires a detailed focus on each line of computer language that builds something simple such as a rectangle with rounded corners. Something such as this requires roughly three lines of code using one hex code and at least five numbers with each one undertaking a different function or meaning. Having to create visual elements such as this has given me an insight into how the colour scheme for the Sixth brand, which has been created as part of the response for another university module, Professional Platforms Art and Communication, works within user interface design and how these elements find balance within the relatively small mobile device screen. By contrast, if these choices were made natively within software such as Adobe XD, these decisions could potentially be taken quickly and potentially just as quickly changed later on in the design process. Coding means that every visual element requires a large amount of consideration. Within user interface design, colour becomes one of the most important visual elements for the user and the brand. Using the colour scheme created in Professional Platforms Art and Communication, I have experimented with the colour rule of 60-30-10 that determines the dominant, secondary and accent colours within the interface. Using basic coding commands such as drawing shapes, the colours have been placed and used with careful consideration after being brought into the code using their specific hex codes. Areas of exploration such as this and the consideration of the placement of colours and their placement within the 60-30-10 rule will follow on into the final major project after this module is completed.


Throughout the exploration of the digital field, I have gained a practical understanding of the space, rather pixels, available within the mobile device screen. The focus placed on the visual elements extends to the placement, with some changes being simply one or two pixels at a time. Moving elements around the screen require an understanding of the pixels available within the ‘Sketch’ drawn within Processing and a rather painstaking effort to change the specific areas of the code that determines spacing. Yet again, I believe that although this is a slow process overall, allows for design with a renewed sense of detail. A sense of detail that can often be missing when designing within visual design software such as the Adobe Creative Cloud Suite, the excitement, or sometimes looming deadlines, mean fast-paced creation allowing for small errors to occur such as spelling errors or elements not aligning as desired.


Using the Processing software to create user interface screens will find a place within my workflow going forward. Although at this moment in time I am unsure as to what capacity this may be in, the skill set being developed within the coding and computer language allow for a more than visual understanding of designing for screens and decide users.




2 views0 comments

Recent Posts

See All

Comments


Post: Blog2_Post
bottom of page