Monday, 29 February 2016

Collide - Colour inspiration

Development
Colour Scheme


I have used Adobe Kuler to generate colour way for the app, I wanted the app to be quite vibrant and youthful which is why I chose these colours. I think I will use colours from vitamin c and seas. 

Collide - App inspiration

Development
App Layout


I have looked for inspiration in terms of colour and layout of apps in order to design my own app. Images were taken from my pinterest board. 

YCN - Vinyl finals

These are the finals for the vinyl and vinyl covers. The colour scheme is vibrant and distinguishes it from the rest of the campaign whilst the font still creates that subtle link. 


The blue and orange work well together with the simple layout. The space on the covers make them look clean/ fresh and the colours help to make them look modern therefore appealing to a younger generation. 

Sunday, 28 February 2016

YCN - Vinyl development

I liked the creative letters on the vinyl covers but I wanted to injection some colour in to them. However, as they are limited edition I thought the colours should be different to rest of the campaign to show the difference. 


As I had changed the colour of the covers I thought I could try using the same font used on the loyalty cards to have a subtle link to the campaign. I think this worked which is why I decided to carry on this theme. 

Friday, 26 February 2016

YCN - Loyalty card finals

These are the finals for the loyalty card, I’m pleased with the outcome and the improvement I have made to them as I feel they represent the younger target market more. 


I will need to keep up this style throughout the campaign so that it looks consistent and linked otherwise this could affect the success of the campaign. 

Thursday, 25 February 2016

Collide - Development

Digital Outcome
Pixate

Pixate is a software that allows you to build your own app and have it open up on a device so that you can navigate through it as if the app was real. This was an appealing concept for me as I could mock my app up on my phone. 


However, I looked at the Pixate website I took inspiration from the demo pages. They gave me ideas for menus and layout in general; it gave me a reminder to keep the layout minimal for maximum impact. 


Tuesday, 23 February 2016

YCN - Loyaltly card development

I tried my original finals with the lime and black colour scheme but I don’t think it fully works as the traditional building contradicts the whole image I’m trying to convey. 


I think that the repeated ‘ROH’ works which is why I decided to develop this idea in to key cards for use on the go. The circle shape is less likely to break as it hasn’t got any small pieces to break off. 

YCN - Loyalty card development

After a rethink I thought that the branding of the campaign needed an injection of colour and/or look more playful which is why I chose to use this font for the development. 


I then moved on to use the lime green which worked well with the black from the ROH branding; it gave the campaign a bit of a punch rather than being something that you wouldn’t give a second glance. 

Monday, 22 February 2016

Collide - Development

Digital Outcome
Activity Sharing App

Taking the initial wire frames I started to develop them and add colour along the way. Whilst going through each page it made me question how each element would work and what are the options. 


This initial stage was about injecting some personality and seeing what works and what doesn’t. At this stage the app was working quite well, but needed some tweaks in terms of the aesthetic. 

YCN - Review

After having an assessment and time to review the project, it would appear that more development is needed to have more synergy in the outcomes. 

So when thinking about what I could do to bring all elements together or potentially removing some of the distraction. I think that the main feature of this campaign is the vinyl, then the information and then finally the loyalty card. Initially I thought about getting rid of the loyalty card, but then after a rethink, I think it is still needed as this is the only feature that will continue to entice the target audience to keep coming back. 

Then I thought about a way to get all elements out to the audience through one distrubiton so they are more likely to view all parts of the campaign. Which is when I thought about doing a give away tote bag; inside would be a small info guide/ poster, the loyalty card and a limited number would contain the limited edition vinyl set. This gives the campaign a bit of a buzz, excitement to see who will get the vinyl’s. 

Style also needs to be considered to make the campaign more consistent rather than looking like different campaigns in one. 

Thursday, 18 February 2016

Collide - Development

Digital Outcome
Activity Sharing App

I started to consider the logo for the app more and thinking about what icon and shapes would work. I thought a circle is an easy and simple shape to work with. The name I was working with was ‘activity planner’ which came from the activity organiser; due to having activity in the name I wanted to represent this visually in the logo. Therefore I started to look at running people outlines as a way of showing active. 


In terms of colour I kept them grayscale to start with and then adding colour progressively. I liked the vibrant orange and blue, which I felt linked well with the energy of the app and brand direction. 

Wednesday, 17 February 2016

Process and Production (year 2) - Cinema 4D continued

After today's workshop I was really impressed with the new skills I had learnt in such a short space of time and after this task I'm going to apply for a student account so that I can expand and develop these skills in my own time. 

As a graphic designer in not used to using 3D software but I think you can achieve amazing outcomes that you wouldn't be able to achieve using different software. The focus of the workshop was to look at dynamics and capture a still shot, however I was impressed with the moving animation so I decided to stay behind after the session and render two of the experiments as an animation. The stripe illusion piece took 2hrs 15mins for a 7 second animation and the letter piece took 30mins for a 2 second animation so I need to bare this in mind in the future if I were to create anymore animations as I'll have to allow time for rendering. 

Below you can see both of the rendered animations; I'm quite proud of the result and I would definitely experiment more with this software. Although it would have to be when I have got a student account so that I can work on it at home in my own free time.


Dynamics 2 in C4d from Jade Irving on Vimeo.


Dynamics in C4d from Jade Irving on Vimeo.


Process and Production (year 2) - Cinema 4D as a design tool

For this workshop we were going to develop our skills in Cinema 4D; the previous workshop focused on basic tools whereas this workshop was an advancement on them. During the workshop we completed three different experiments; by doing this it helped us to gain a better understanding of the program and the way it is set up.  


The first thing to do when starting is create a project folder and have sub folders called C4D, Artwork and Output. This stage is really important as it's good practice to have good file structure and looks more professional. 

*Remember that top left box is the object list window and then beneath this is the attribute window.*


Task 1
For this we set up the C4d and then went to use the pen tool > rectangle (make sure it is set to xy plane). Then we added an extrude by using the subdivision button > extrude > we need to add the rectangle to the extrude by dragging the rectangle over extrude so it goes inside the extrude button. On extrude we changed the movement to 5000cm which creates a long rectangle box. We needed to remove the caps which is under caps when clicked on the extrude button. Then we needed to change the geometry by going on the display tab along the top menu and click on Gouraud shading (lines) so that you can see the shading when creating polygons. Then go back to extrude and under object change the subdivision to 50 and ISO subdivision to 10.  Now we need to add a modifier to the object, to do this we go on bend at the top and click twist. Usually you place the twist object inside the object you want to twist but in this case you drag the twist in to the extrude.


Next we added a twist to the rectangle; to do this you go on bend and select twist, then dragged the twist into the extrude in the object list underneath the rectangle. On twist the mode needs to be changed to unlimited and angle to 10 degrees; currently its twisted on the y axis but we need it to twist on the x axis. To do this we go on the coord. tab and change the R.P to 90 degrees. We moved on to adding a texture; we double clicked the bottom window for a material, then on the basic tab we turned off colour and reflectance then turned on luminance. On the luminance tab, go texture, surfaces and checkerboard; we will use this to create stripes. Click on the colour swatch as the bottom right. To create stripes its all about the frequency; change the U to 0 and V to 40. Then drag this texture to the extrude in the object list to add the material to the shape. On rectangle > object, change intermediate points to subdivided which straightens up the lines and makes them more smooth and fluid; have the maximum set to 5cm. 


After this stage we decided to add another object to the scene; to do this we went to cube > sphere and changed the radius to 40, change coord. P. Z to 500cm. Then new material > basic ,on basic we don't need colour, need luminance and remove reflectance. On luminance, go texture, surfaces and checkerboard; we will use this to create stripes. Click on the colour swatch as the bottom right. Change colour two to red (H=0, S=100, V=70. To create stripes its all about the frequency; change the U to 0 and V to 10; drag the texture to the sphere. On sphere go on coord. change R.P to 30 and R.B to 40. On the red and white material, add reflectance to it, go on reflectance tab and click add underneath layers, then click reflection (legacy); it will turn into a shiny ball. We just need to change the layer colour; and change the texture to Fresnel. This will change the edges of the object to make it look as if it is catching natural light.

Then next step was adding a camera so we clicked create camera; we adjusted the position to 0 x 0 x 0. We added a camera so that we could control the angle of the rendered image.You can look through the camera to get the view point that you've set up and then when you turn it off you can look at the perspective from the outside.


We needed to render the image but first we had to check the render settings; width 1000, height 1000, resolution to 300 dpi. Frame range needs to be set to current frame. On save you can save it as a Jpeg as this is only a test save; in options set to 95%. To stop the jacquard edges, you go to anti-aliasing  and change it to best. This will be ready to render so you click the button render to picture viewer. Go back to render settings and click on effects at the left > ambient Occlusion; this is a shadow that adds weight the object, makes them look 3D. However it adds to the render time quite considerably but you can improve this by changing dispersion from 100% to 50%.


Before moving on to the next task we changed the rectangle to a star. We used the same method as before, pen tool > click star; again the settings needed to be changed so we went to in attributes > change points to 5 > inner radius to 75cm then drag the star into extrude in the objects list and drag the rectangle out it will apply the attributes to the star now instead of the rectangle.


More particles were needed to get the look of the star right: we went to the top menu > simulate > particles > emitter then changed these settings by going to coord > position Z, 70 > particle > stop emission - 200 frame > speed 200 > rotate 360 > finally tick show objects and render instances. We changed the timeline to 200 frames. We had to go to emitter tab - and change both horizontal and vertical angels to 60. We dragged the sphere into the emitter. Other settings we had to change was the radius of sphere to 20cm. Select the sphere and then click on tags > simulation tags > rigid body. Select extrude go to tags > simulation tags > collider body. Finally go to the extrude collider settings and go to collision then change the shape to static mesh to get the spheres to bounce down the tube instead of just banging against the first part, we did this so it flows and looks smoother as an animation.

The last step was to deselect all objects go to mode > project > dynamic tab > change gravity to 0. Copy the sphere layer and change one of the spheres to a blue and white stripe; by doing this it add more colour to the scene. We then rendered this out using the same settings as before. 

Task 2
Create polygon; click on cube >polygon; the orientation wants to be left at +y (repeat this step with these different settings: poly 1= width 200 height 2, poly 2= width 70 height 70, poly 3= width 4 height 200. Change the names of these to poly 1,2 and 3 in the corresponding order. 

Next create 8 materials using the method mentioned in the first task; then go to basic tab > un-tick colour, reflectance > tick luminance. Each material needed to be a different colour so we created a black, white, grey, dark grey, orange, yellow, light blue and dark blue. After changing the colours, the black was dragged on to 1 and 3, then the other colours on to the copies of poly 2.  Then we went to stimulate > particles > emitter > drag all polygons into emitter. Under emitter change angle to 60 x 60; particle tab > birthrate & renderer 20 x 20 > stop emission = 200 frames, Lifetime = 500, Speed = 100 > and both & end scale variation = 20%. Drag timeline to 200 frames. Tick show objects and render instances. Then go to coord > pitch rotation to 90 degrees. Select all polygons and change orientation to +z. We needed a background so I added one and added the white material by dragging it over the background in the object list. 

After that we added text through mograph > motext > changed depth to 0 > added own text (post modernism) > R.P to - 90 degrees > P.Y to 389 degrees > object > align middle > height 20. Then we added a camera and used the settings, P.Y to 850 > R.P to - 90 degrees > R.B to 60 degrees. Finally we rendered this using the previous settings used for the other task. 

Task 3
For the first workshop we used a floor and background, in this task we went back to experimenting with these further. So we began by adding a floor and background. The floor settings were change by going to tags > compositing tags > tick compositing background. Next we added a text using the motext tool, I used the letter 'J' for my text and change the font to superclaredon > black > depth 80 > align middle. We wanted caps on this text so we changed the start and end caps to fillet cap > radius 0.5 > steps = 3. 

Next was to add a texture, we un-ticked colour, leaving luminance and reflectance ticked on the options, then change the texture to fresnel - go to display - Gouraud shading lines. We copied and paste the material then go to luminance and change the colour; I chose a deep pink/purple, we then added this to the floor and background. We changed the reflectance and turn it strength down to 50% so that it wasn't as strong on the render. We went to the first material and added a gradient, changed interpolation to none and POS to 80%. We then changed type to 2D V.  Click on texture in objects list and go to tag - change projection to flat and tiles v to 50. We repeated some of the same steps from what we were taught in the first two tasks. This was then rendered using setting used previously.

Thoughts:
Overall I really enjoyed this process and production workshop as I feel the skills I learnt today can be used in the future when creating visual outcomes for projects. I found it interesting learning a new program that can be added to my skill set; although I have got a long way to go before I'm an expert I have some basics in place to improve from. By using this program it will give me another avenue to go down when designing, giving me more options on how to create an outcome. I think that the best outcome was either the first task or the last task as they look bold and dynamic whereas I think the second task needs more work on it. C4D is something that I would be interested in learning more about in the near future. 

Tuesday, 16 February 2016

Collide - Development

Digital Outcome
Activity Sharing App

These are wire frames going from page to page of the app; it has been developed from the initials frames and has then been developed again. I can now used these to add flesh to the designs; colour will change these design dramatically and add life to them. 

I tried to simplify the designs as much as possible as a crowded design can be off putting. When it’s stripped back it looks cleaner and easier for the user to navigate through. 


The next stage will be to add colour and alter any problems in the design in the process. The need for these changes will only arise when I look at each page in more detail. 

Saturday, 13 February 2016

Thursday, 11 February 2016

Collide - Organiser development

Development
Notes Pad/ Whole Layout


I started to develop the notes pad and look at the layout to see if all the colours worked together. 

Contextual Portfolio - Guest Lecture - Brass alt

This weeks guest lecture came from the guys at Brass Alt; I was interested in this talk as they may it fun to listen to, and engaging. Plus did I mention they brought sweets with them, that's always a winning combination!

The guys talked a lot about the power of social media and if used correctly can have a positive impact on a company. The team work on social media campaigns and daily running of companies social accounts. They have worked with Haribo and responded quickly to any links to the brand, for example when Zayn, former one direction member tweeted about red Haribo they responded back with a visual which his fans loved. At brass they have software that will pick up it someone is talking about a brand and notify them is the person has a high number of followers; this is clever technology which is useful to brass so that they can keep update online. 

Thoughts
I enjoyed this lecture and it taught me a lot about how to stand out in the industry and what is crucial to the success of getting a brands name known. I found it interesting to look at the social side of design which we often touch upon but never focus on it. I think that this area of design is becoming more and more important as everything is turning to digital. 


Wednesday, 10 February 2016

Process and Production (year 2) - Fairytale Animation

This workshop was looking at working with statistics but in a playful way as we were to create facts from a fairytale; I had come to the workshop with serious facts on gun crime in America but was told that we were going to work on fairytales. When I have more time I think I could go back and use the used resources to create another animation, so all is not lost. To get inspiration for the piece we looked at a called, Bill Maher  - Irritable Bowl Syndrome; this animation was used as a base to refer back to whilst in production of our own.



Bill Maher - Irritable Bowl Syndrome from Cub Studio on Vimeo.



Once the artwork was ready I moved in to after effects; as the animation wouldn't be long I had to choose three important scenes to animate. From the scenes I chose I think that it is clear what fairytale I have chosen to animate. Overall I'm pleased with the artwork I have produced; I think that it is simple yet effective and will be easy to tell the story with when I take them into after effects. The we had to create an artwork that would be used for in-between scenes; to cut from one scene to another. As Cinderella is often shown in panto I decided to create some basic curtains that could open and close. Also I wanted the artwork to look different to the rest of the scenes so that the cut was effective. This was then opened up in after effect with the other artboards by going to file > import. As an option you can click on composition, this is so that you can go back and change things to your artwork and then it will update in after effects; however this is a slower way of working. The other option is composition - retain layer sizes; this is if you are happy with your artwork and won't be making any changes it to it, this is quicker and keeps the program fast which is the option I chose. All of the compositions were change to 25 frame rate and length of 5 seconds. We also made a new comp which would be the final and this was made to 10 seconds; all of the compositions were then dragged in to the final comp. Since I have three scenes I had to shorten the times of the comps to two 3's and one 4 so that they all fit within the 10 second timeline. Next we were taught a new tool called tilt shift; although we didn't have to use it if we felt it didn't work within our animation and with our artwork. I decided not to use the tool as it didn't look right for my piece but I still made note of the effect for future reference. For this effect you have to get a texture and import it in, you can add layer styles (for example bevel and emboss) - next we went to new comp (calling it tilt shift) - this would be 5 secs, 25 frame rate - and hd size (1920px x 1080px). You activate 3d on the layer, and you can rotate around different axis - you activate the keyframes on  rotation, position and scale (all in the same place on the timeline), then drag it to end - then scale in and change the position, scale and rotation to what you want it to end like. You can add effects on the tilt shift by going to effects, add blur - chose a style for example you could chose gaussian blur - then put a mask on it to make the effect apply to the areas you want it to effect, this is to get an out of focus look and to make the parts you didn't add it to stand out more.Overall I'm pleased with the outcome; although I would change the colour of the end scene of the curtains so that there is a bigger contrast between the two, so that the visual is more dynamic. I do however like the style I have used to create a modern design which is well thought out. By creating this animation it is all practice and experience of using the software which is important for me as limited user but I will add that I'm becoming more confident with using the program. I will be able to take these skills further and expand upon them in the future. 





To start as usual we needed to create the artwork in Illustrator first before working in after effects. Originally we were asked to create two scenes but I chose to do three as it fitted better with my content; I chose to base mine on the fairytale Cinderella. The scenes had to include imagery and statistics that you could work with later in after effect. I picked this fairytale as it has a lot of imagery you can focus in on such as the slippers and the ugly sisters for example; and had numbers to work with. Each scene was created on a different dartboard and each element was put on to a new layer so it was all separated out and when work in after effects you would be able to animate each individual element. The background was also put on to a separate layer so it was separate to the images. I wanted the colours to be striking and not over complex so that the information wasn't lost in the animation. Also by not over complicating this stage it would allow me to fully concentrate when working in after effects. 


The text was the next to be edited; to do this you used the text tool and copy and paste the text from illustrator, you then delete the text layer you imported from illustrator. You do that as it is clearer and easier to animate. To animate the text you select it then go to animation > apply preset animation > animate in - then select the animation you want to use. The speed of the animation can be changed by repositioning the key frames on the timeline. I decided to edit the imagery as well by getting them to flash on to the screen; this was fairly simple, you just cut them and position them where you want them to appear in the timeline. You can also add sounds to your animations; I decided that I wanted a 'pop' sound when they appear on to screen so I took a 'blop' sound from the website sound bible; by adding this sound it helped to connect the image to an action. The next step was to add the scene changer to the timeline; we added a new comp called 'wipe', this was set to 25 frame rate and duration at 1 second; this is so it is fast enough to be dynamic but still slow enough for you to see whats on the layer. You place it in the middle of each layer when the finish and start. On the wipe comp I added a keyframe in the middle of the timeline on both layers, making sure there is no transparency showing through the objects on the wipe layer, I then went back to the beginning of timeline and added a position keyframe with the objects completely off the page and finally I went to the end of the timeline and copied and paste the first keyframes to the end, this then automatically remembers what was on these keyframes and adds the effect to the timeline making the 'wipe' scene open and close between the scenes, this cuts the past scene and introduces you to the next scene in a more professional way. 


Fairytale Animation from Jade Irving on Vimeo.