Within this blog post, you can find an overview of the process of using Java code to design three user interface screens that focus on the theme of the final major project. This process has been a culmination of my knowledge of both Java coding and user interface and user experience design, allowing for an archive of visual documentation of what I have learnt so far in both fields.
As these screens were created, especially the home screen layout, I discovered a merging of two processes. During the first group crit, I shared wireframes of mobile device application layouts. Wireframing is the process of blocking out areas for content and navigation that serve as a tool for designers to explore content placement and explore the user journey. In order to experiment with scale and placement for content in Processing using Java code, I used rectangular blocks to almost wireframe where the content could be within the user interface layout and their potential scale. All of these choices being amended in the code pixel by pixel to allow for the best layout. These blocks were then marked as a comment in the code using the “//“ techniques with a comment to label each element and for ease of reading the code later on. Using Adobe Illustrator and the layer mask tool short-cut (cmd + 7), I created the imagery at the correct scale for their respective boxes and replaced the box within Processing with the newly created artwork.
It was an odd moment to realise the merging of both the wireframe process, coding process and the overall user interface design process within one live method. Although this may not be the traditional method of creating a mobile device application screen, it was an interesting method to undertake (even if subconsciously). This sort of speed design and development process did however allow for all my skills and knowledge to be tested within one main program aided for the content design by another.
During the creation of these user interface screens, elements of the code in each Processing sketch were common in each screen, such as the typeface chosen and the hex colour codes. Essential elements that formed the Sixth brand that has been created during the Professional Platforms Art and Communication module this term. Having each screen sketch project open whilst working on another proved to be an efficient way of working when it comes to using common materials such as colour and common lines of code such as img=loadImage or PFont.
Going forward, I believe that this speed process could have its uses, albeit not the preferred one, but one that could allow for relatively fast action on design briefs and concepts. How could this process have been improved? I believe that going forward, to allow for a more organised and professional workflow a worksheet must be created that holds common lines of code and the relevant information for each project such as the hex codes or worded content. These could then be easily copied into the Processing sketch project whilst only keeping one sketch open at a time. How do other processes overlap in my workflow that I may not be aware of? How could these overlaps be used to my advantage?
Comments