OUGD503: STUDIO BRIEF 1 - Individual Practice // D&AD Npower

Ougd503 Anthony White Studio Brief 1 d&Ad Npower by antjtw

Design Practice Posts | Design Context Posts

OUGD503: STUDIO BRIEF 1 - Individual Practice // D&AD npower Application Pages

All the pages of the application have been designed. Following the advanced grid system and the colour scheme, with use of the illustrations as iconography, i was able to grid the design of the app out. For all the pages which were listed in the initial mind maps. There are a total of eleven pages/page variants which have been designed. Enough to pitch the concept which I've proposed to npower. 

The partial range of the app pages mocked up onto the vector iPhone illustrations, to demonstrate to D&AD and npower how the application might look on an iPhone. The horizontal iPhones show how the application works dynamically. 

The electricity monitoring by room page allows the user to track the electricity expenditure in each individual room of the home which requires power. 

The page above work works with the page below. The dynamically horizontal version of the chart page shows a bar graph for a longer amount of time than the vertical version of the application page. 

The vertical version of the chart page shows the amount of gas expenditure per month.

The main electricity page, from here you can access the room monitoring page or even the chart page. 

The main gas page, which shows the temperature of your home currently, allowing you to control the gas usage remote from anywhere with the plus and minus button. 

The landing page, which you're greeted with when launching the application. 

The hamburger menu, which is launched when tapping the hamburger in the top right hand corner of every page throughout the application, it supplies links to the rest of the application, easily. 

The main page of the application, where you can decided which you would like to monitor. 

Metre reading page, where you can enter of monitor your metre readings on the application, which syncs with your account. 

Sign in screen, which loads following the landing page when you open the application. 

OUGD503: STUDIO BRIEF 1 - Individual Practice // D&AD npower Grid system development

As part of the application development I need to develop a grid system. Something which I can use to base the application design upon. I've always made grid systems a fundamental part of my design, with very close attention to detail, assuring every pixel aligns. 

The grids are important to the design of applications to assure the continuity of the design. So the app flows throughout the pages, as you navigate your way through the application.

The grid system follows a six column, throughout, size can the be be split into three columns or two when needed, to suit the needs of the design. Perhaps for large icons, or similar.

I can then apply this grid system to some of the design scamps I drew earlier. 

Above are some of the variants for the application landing page. I've decided to take the top left variant and apply the grid system to the design of it, to create the first page of the many, for the application. 

The first application page you'll be greeted with is the landing page, it features the gradient from the colour palette, with the npower logo in the 5% colour from the palette. The logo, type and illustrations are all aligned to the grid system, which will allow them to work consistently throughout the application. 

OUGD503: STUDIO BRIEF 1 - Individual Practice // D&AD npower Illustrations

Looking at the vast majority of my scamps, I realised I would need to create some vector illustrations for my application. I began to look on the npower website for images I could illustrate. I looked on the npower website for the same reason I sampled colours from the logo - to add some brand consistency to the design. Using elements customers will already associate with npower. 

I chose the image of the flame, which represents the gas part of the brand and the energy savers bulb which represents the electricity part of the brand. Using these as the main iconography for the application would help tie the application to the brand, along side the colour scheme.

The illustrations for both the icons have been created, using pen tool in illustrator to go around the edges of the shapes, carefully, as not to deform them. They look pretty good. I think they will work well incorporated into elements of the application. 

OIGD503: STUDIO BRIEF 1 - Individual Practice // D&AD npower Colour Pallette

The application I'm designing needs a colour palette, as I want it to have a limited colour scheme throughout. The research I've carried out for the application, all the apps which look aesthetically pleasing in my eyes, all have a limited colour range. 

To add some brand consistency, as the application is for npower, I've decided to sample the majority of the main colours from the company logo. The logo is a gradient passing from red, through purple to a blue. Picking the most left, central and right parts of the logo, with the dropper tool in illustrator or photoshop, should give me three distinguishable and relatable colours, which represent the brand. 

The colour scheme has been selected the rich red blue and purple have been sampled from the company logo. The lighter blue is actually an increased white version of the rich blue, something to be used as the colour for the interface throughout the application, as it works with the other colours due to it's contrast of hue and saturation. The final two colours also also tones of the previous blue, at 10% and 5%. These two colours contrast with the overs due to their tone, hue and saturation, which makes them great colours for background or for type. 

OUGD503: STUDIO BRIEF 1 - Individual Practice // D&AD npower