Showing posts with label Individual Practice. Show all posts
Showing posts with label Individual Practice. Show all posts

Sunday, 23 March 2014

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. 


Saturday, 22 March 2014

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. 



Friday, 21 March 2014

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. 

Sunday, 16 March 2014

OUGD503: STUDIO BRIEF 1 - Individual Practice // OAC Photography Business Cards

As part of the collateral of this brief, I've produced two variants of the business card, for the client to get their hands on, and see if they like them - or not. They're printed using the printer in studio two, so the quality isn't the best, however, apart from iffy black printing, it hasn't turned out too bad. 



The back and the front of the first variation, the only difference between the two is the logo on the front of the business card. I send the client both versions as a PDF, although, as I've found from a few years of doing this, to really make a decision, it's best to do a test print, to see how they look physically. 

Unfortunately, the printer slightly banjaxed the black logo illustration, which overlays the image. I'll be sure to use the digital print resource at college when printing the final cards, as there is a higher quality control, due to the expensive-fancy printers. 



For a change, I've doubled up the card, putting a sheet of black card in between two sheet of cartridge paper. Doing this allows for greater durability, a stronger card. Whilst also adding a level of contrast to the cards, a more unique and stylish approach to the design. If this didn't look good, I would have to use a thicker stock, print double sided, then used the edge painting method I learned, that I'm using in another brief. 



The reverse of the business cards, both are identical. I'm particularly happy with the iconography, which works with the links. I've used iconography as it works with the icons on the front of the business card.

Thursday, 20 February 2014

OUGD503: STUDIO BRIEF 1 - Individual Practice // Codex Books/OAC Photography Critique/No. 7

I decided to do a 1 on 1 on 1 critique with Adam and Grace, just showing each other some work and getting some feedback and development. I showed them some of the logos and concepts I've been designing, and asking for ideas to improve them, or things I could try to see if I can propose a more effective design.



We first spoke about Codex Books, I showed them my development work and the logo I've generated, which will be applied to the website. 

What Works
  1. The upper type works well, it's clear what it is, it has a very old rustic feel to it, which works well with collectable books, an original quality.
  2. The illustration works, it's simple and won't clash with any imagery on the website. It's clear what it is and it won't be difficult to see from a distance.
What could be improved
  1. The text on the bottom of the logo could be in a serif font, perhaps a roman font, the gothic san serif font looks good, and is very readable, however it doesn't really relate to the subject matter. A Roman font looks more traditional, and does in fact relate to the subject matter; collectable first edition/rare books. 


I then presented the mock up for the website landing page to Adam and Grace. They thought the stock image used worked well with the logo. The site itself is heading towards a modern contemporary look. The use of a full page image is the correct direction to head in, as a vast majority of modern, revamped websites are beginning to implement this style into their design. 


 I then showed Adam and Grace the front of OAC Photography's Business card, having not seen any progress on this brief. 


Friday, 31 January 2014

OUGD503: STUDIO BRIEF 1 - Individual Practice // No. 7 Antiques - Logo Development

Following the physical layouts I digitally created the logo in Illustrator. I create two different variants of the logo, which I chose from my layouts. I decided to use a roman font from font squirrel, it's called Latin Modern Roman. 


I drew out similar grids to that I did on the physical layouts. Which I then started adding the letterforms to. So would get the same look as my physical layouts. 


I used the grid system to account for equal width between the text and the separation stroke, to make the design more visually pleasing. I decided to use the same font on the sub-heading as I did the heading. Although I'm not too sure about it, I'm probably going to offer a script alternative to the sub-heading, to see how it looks, and offer it to the client with the option of choosing. 


Larger version of the logo, I'm quite happy with how it turned out. I can't wait to see how it will turn out on the printed collateral. This is one of the near final variations I'll be sending to the client. Of course, I'm expecting some feedback and alterations. 


Variation 2. I once again used the same grids in the digital version, as I did in the physical version, some they would look the same, and so everything would like up properly and look good.  


The near final digital version of variation two, which I will be submitting to the client along with the first variant. Personally, prefer the first variant, I think the horizontal layout works better, with a pleasing simple aspect about it. 

OUGD503: STUDIO BRIEF 1 - Individual Practice // No. 7 Antiques - Concept Boards

I presented the client with these concept boards, to give them an idea of what direction I'm going in, and allowing them a chance to give me any feedback, if they want any alterations, changes or want me to go back to the drawing board. It saves me doing it once I've completed the final resolution to the project.

I've covered all the work I've done so far in this project, and provided links to my blog, so the client can view my work.

OUGD503: STUDIO BRIEF 1 - Individual Practice // Secret 7 (2014) - Vinyl Mock Up

Following creating my sleeve design, and submitting it to Secret 7, I decided to digitally mock up how the sleeve might look. I found a stock image only and used photoshop to impose my design on top of an existing vinyl record sleeve. Fair basic stuff. 


I applied some textures to the sleeve, to make it appear like it's made out of paper, and it came out quite well. It's reassuring to see how it looks mocked up, I think it works fairly well, certainly a secret 7 entry.

Thursday, 30 January 2014

OUGD503: STUDIO BRIEF 1 - Individual Practice // No. 7 Antiques - Logo Design

I've begun to design the logo for No. 7 Antiques, I wanted to base it off it's original design, which is quite plain, in a roman font - so I don't end up confusing No. 7's target audience, and regular customers I think it's the right direction to head in. 


I experimented and played with the layout, on three variations, to find the best solution, and the best logo for the client. I re-arranged the required copy on the logo. Trying a horizontal and vertical layout. Of course, I understand that these might not look as good digitised, some might even look better. We will see. 


I prefer this logo to the rest, it's very clean and contemporary. It's essentially a tidied up version of the existing logo, a designed version, rather than a word processed version. Which, sometimes is all that's needed for a logo. 


Another variation which I'm likely to digitise, is this one. It's a vertical layout of the logo. It could be used as a space saver, and it's almost square layout would be great for digital logos, such as social media icons.