Whilst looking at Google’s new “Dark Theme” for Android’s latest installment (Android Pie) I noticed one of the icons looking almost too balanced to be an artist’s rendition (too perfect if you will). On closer inspection I realised that all the lines are separated by proportions found in nature’s golden-ratio. Whether this was intentional or not, by overlaying the box below, I was able to identify the use of the golden ratio.
Google Material is an excellent place to learn about Google design implementation and also the reasoning behind each design choice. When we can see the mathematical formula for beauty coming to light in their resources it proves they are still the world leader in user-interface (UI) and user-experience design (UX).
Image showing the golden ratio in it’s simplest form
:: Future development :: look at other ways of using golden ratio area formatting in 2D and possibly 3D. also when thinking on a grander scale one could draw parallels between cell division proportions and growing patterns found in all living things but more apparent in simple single celled organisms. like corals (formed by a type of algae).
Above marketing campaign for Poland highlighting roll-over data using the geometric correlation to form the sometimes overwhelming myriad of bundles. By using the beehive like structure we can structure the hierarchy of information in different ways. When the correlated objects form a different entity on the composition.
Geometry Wars Retro Evolved 2 artwork
Having played Geometry wars with a friend not so long ago, I could not attribute some of the background in the poster to the mesh like structure built into Geometry Wars: Retro Evolved 2 on Microsift Xbox. This amazing warping effect of gravitational fields really do give the impression-n of depth that can really give clues to the rest of the composition in a stunning array (simply joined by longitude and latitude) By transposing the simplest points within the wave patterns we can join the dots to see the real root cause. Perhaps this could be the way we know what caused the big Bang! BOOM, but you would have to appreciate the nature of our position in the galaxy the . :: Future Development :: Learn about the gravitational/magnetic fields demonstrated in the Geometry Wars background mesh grid and whether use of animation techniques or mathematical (perhaps quantum?) fields are generated.
Charles Williams – Spotify
Prior to finalising the block-busting design, I had the idea to recreate a style similar to the above in order to give maximum impact/appeal. This unique style has been developed by Charles Williams of Made Up Studio (based in East London). I really like the aesthetic generated in this image using only 3-4 colours. It’s also quite similar to the sky mobile roll-over concept we looked at during the market research phase of the project (shown below):
Sky Mobile Agency – Original concept by Venturethree
Campaign landing page refresh including style sheet assets for the developer to integrate to his/her own CSS library
Layouts created for a new white-label product being up-sold by Lycamobile and subsidiary brands. I was very happy with the way the final result came out. I am moving more and more into User experience layouts for web and apps where the page balance must work in both mobile and desktop views, with the emphasis being on mobile when the current usage is approaching 60% of all web sessions. I also wanted to keep the use of colours to a minimum, maintaining brand consistency with Lycamobile which is key to the success of this project (allowing piggybacking of trust from Lycamobile)
Exciting new white-label product with branding created in-house. Below is an element of the campaign meant for successful CTR.
I was asked to create a layout for an email template which I also prototyped/tested in codepen. I really like how much opportunity for developing email as a channel of direct communication to the customer and also the opportunity for creating a consistent look and feel, perhaps even a narrative over the course of weekly updates. I used a layout template from my email-management days to highlight the new bvranding to maximum effect and by keeping colour choice and the elements to a minimum a good balance of white-space, text and imagery can be acheived. Often taking things away is the solution but not so much as to whittle things down too much.
Update: Rarely am I using photoshop slices these days since the emphasis on use of artboards in the newest version of Adobe CC is far easier to use and intended for this purpose. Below is an icon set I recently designed to represent the different product features. As you can see, naming and exporting each design in multiple formats in parallel is a much cleaner way of creating multiple formats easily and whereby one can still use the SmartObjects feature to the same effect (across the different artboards). By accessing two useful features in Photoshop I have managed to create a rapid response artwork variant generator which can export all defined slices in one process. Below shows a screenshot taken from this process:
The slice feature was originally designed to create website segments (to fit around text) prior to HTML 2.0 and CSS techniques superseeding slices. The slice tool is not left completely redundant however, as I have repurposed it in the following method.
Often my job requires rapid generation of campaigns to react to the market/price changes. This template will allow the vector objects held within each slice to update automatically from a linked .psb file. Essentially photoshop is creating windows/i-frames to another canvas that when updated reflects in the multi-variant file for different formats and channel media alike.
Another instance of working with this time “Artboards” making production of variants incredibly easy
Below is a screenshot V.1. of the template (however exports appear as the pre-determined slice names in an output file. You can see the potential of switching up the lead image very easily, automatically resizing to all of the different formats required for a digital campaign. Another really nice organisation feature is the ability to define the dimensions and output name per slice (see below).
Lycamobile artwork to appear on the side of a SIM card vending machine in certain Irish boutiques.
The aim is always to give the least stress possible with these kind of screen designs and all outdoor in my opinion. I often try to put myself by the side of the viewer in these instances to add a site-specific touch and an appreciation that the advert will be relative/harmonious to/with to it’s surroundings.
Kandinsky – L’utopia in blu
This design was inevitably complex mainly due to the product manager adding comms/features along the way, but I hope that the beautiful colourings and geometric forms culminate together to give a warm sense of security (the sun) combined with a deep, fascinating blue of the sea leading to a clarity in the white elements (the communications). I really love how deeply you can associate with the simple geometric forms and colours on a base level that hopefully undercuts all of the other advertisements on the market that seek to grab attention in different ways. The design shouts out at you but in a beautiful way! It’s like how Kandinsky would have seen the Opera.
For me, seeing this design evolve in-house over a period of about a year was a fascinating journey and I feel that this combination of efforts has led to an intriguing and well balanced outcome in the above. Thanks largely to the efforts of Robin Sutherland (Head of communications Lycamobile) and in it’s initial conception, Alvaro d’Apollonio (graduate of Central St.Martin’s college London) we have combined a deep sense of harmony using the simple geometric forms and shapes found in nature (i.e. the sun, sea and a tree/download shape combo) and also a strong centerpiece using the striking contrast of the bright pink to yellow gradient, whilst still getting the message across in the clearest form of White Helvetica font, which was the clearest possible choice against the other strong, competing elements.
I look forward to animating the above hopefully in some subtle ways that speak to the customer on his/her terms, not as an attempt to hijack his/her conscious and more often than not, carnal desires, as so many adverts seem to do, almost insulting the customer and treating him/her basically like animals.
Lycawifi is a white-label product allowing customers to use a global hotspot network with over 60 million access points worldwide. I was happy to be assigned this project across all channels as when I found out about it I was very impressed with the offering from Lycamobile.
This addition to services is an important step in adapting to a dwindling Telecommunications market. However, the value added is a very shrewd movement towards what I believe will be the future of the market in years to come. I.e. Mesh networking powered by user enabled devices.
I tried to keep the image on brand and as simple as possible whilst generating the interest in the new feature added to existing products. In order to do this I used as much imagery to identify what the product actually is instantaneously recogniseable to the customer. E.g. The WiFi logo on a phone screen (denoting that the advertisement is for an app).
Party video I was asked to create as a stage backdrop for the Lycamobile, Egyptian themed Christmas party. I was show the stage layout before-hand in order to ascertain how the videos would play out on the night (below).
In the end I produced two 10s messaging videos that could be played in a loop or paused ast the end to keep the stone hieroglyphic doors present before and after the video messgaes. By using the newest Trapcode plugin for After-effects I was able to add real physics to the gold dust symbol that gives the video a luxury, sophisticated and blinging feel.
I recently viewed a Lynda video following the work of Doyald Young, a logotype designer specialising in the area of pencil drawn calligraphy. The documentary touched on some of his work including the redraw of the Prudential logotype (below). Fine adjustments made to character tracking I.e. The distance bettween letters improve upon readability and give a new zest to the way the wordmark is read (from left to right) this can also be aligned with brand and tone of voice to give better coherence throughout a company both internally and externally, a brand is more often than not, the greatest and most valuable asset of any company.
