Trial and Error

Trial and Error

When making my website I kept restarting as I encountered many errors in my work, which would not be resolved easily without starting again.

I started off by making a navigation bar, which is CSS, HTML and Jquery. The navigation collapsed when the browser was made smaller, which was want I wanted to achieve to make it responsive.

Two

This was a basic navigation I created but, I did not use the Skeleton which is one of requirements for this project.

I had made another navigation bar which looked at making it responsive but, I had encountered the same problems as before.

Final Thoughts

Throughout the whole trial error process I felt frustrated and annoyed the whole entire time but, as time went on it helped me to think more logically like a coder, I had to figure out some information on my own without the help of anyone in order to learn.

Advertisements

Web Workshops

Structure Website

Looking at the structure of a website.

Screen Shot 2017-02-04 at 23.17.09.png
BBC NEWS PAGE

IMG_0591.jpg

 

We looked at the structure fo the BBC news page. The news page had a basic structure with small number amount of clicks to get to the page you want but, there was a lot of items you had to scroll through to find what you are looking for.

by doing this exercise I could figure out the basic structure of my own website.

We had designed this basic website to get to get grips with a skeleton, as this was the software we would be using to create the website.

Copywriting Lecture.

The copywriting lecture was interesting and very useful, as this helped me to write my about me page, as I found it very difficult to talk about myself in such a positive manner but, this helped me gain confidence in myself and my abilities to go out there and take opportunities with both hands.

“Hi, I’m Ravneet and I am currently a second year Graphic Design student at the Arts University Bournemouth. My interest within Graphic Design lies with interactive design and branding.

When problem solving for a brief, I like to seek inspiration by using unconventional methods, as I deem there is no right path to the final outcome; I enjoy the discoveries that I find along the way, as this boarder my horizons in the Graphic Design industry.

It excites me to work within a group, as I like the combination of skills from others to drive the outcome of the work, rather than one individual, as I believe this makes you stand out from the crowd.

I like to evoke different emotions and feelings of the viewer through my artwork, as I am aware that a selected few of my artwork are thought provoking. My ethos when designing an interactive piece of work is to focus equally on the artwork and artwork being displayed; The coherence of artwork and music creates great harmony.”

Website Plan

I decided to do a plan of my website, as I wanted my website to have consistency yet showing a unique character through my choice of style, to reflect my character.

I first looked at some websites to get some inspiration for grids and layouts, as this was my first time making a website and I did not know the grid system.

From what I have gathered from this research is that it pretty evident that moving image seems to captivate people; this is something I would like to implement on my own website as it grabs the audience’s attention.

Logo

I had a meeting with my fellow peers and tutors and we were discussing on how we could make the website unique to ourselves. I decided that I would make my own logo that represents myself as a person.

website 2.jpeg

I decided to design some logos which were simple and packed a meaningful message behind it.

screen-shot-2017-02-03-at-11-24-43
Design Ideas

I decided to go with the idea where the ‘R’ is reflected as this showed mt quirky side in graphic design, yet still maintaining a simple logo to show all that. The ‘R’ and the ‘B’ fit hand in hand together as they both have a long edge with can sit beside each other quite well, which makes it look

logo
Final logo

I chose this as my final logo as I felt that it represented me best, as I write with a cursive font and I wanted the logo to have a handwritten effect to it.

Plan of Website

website-1

I first started off by making different layouts for the website. I looked at the different places I could place my navigation bar, as this is the place where people interact with the website.

website

From doing the first initial designs, I used that information to make a basic template for myself which can be implemented on each page of the web pages to create consistency.

Grid

Screen Shot 2017-01-30 at 13.29.44.png
Skeleton Grid

For the website, I had to work to a grid which had twelve columns as the skeleton I was using was made with twelve columns to make it responsive on different devices. I found a lot of difficulties while doing this as I was constrained to use the grid while making the website, which was too hard to comprehend with as I am used to being free to do anything in graphic design.

 

Final Layout

here is the final layout which I went through with.

I used the grid to help me achieve a consistent pattern on the website, as I didn’t want it to look a like a mess of items on the page.

I feel the overall layout is interesting and shows me as a person; from the landing page being quite fun, interesting and bold to the clean design of the website represents me as an individual who enjoys the aspect of work and play.

 

 

Assignment 2: Showcase

Rationale

Presentation is always crucial. Your portfolio, the presentation of your work, needs to communicate directly your creative identity and you as a brand to potential employers and clients. A personal website is often the first point of contact for anyone who is interested in finding out who you are and what you can do. You direct people here, you send links, you can be found via searches and other people will share it. The way you frame the experience of the people who follow these links and referrals will have a massive impact on how you and your work progress and develop within the creative industries. The aim of this project is to build on your exploration of user experience and allow you to begin creating an identity and online portfolio through which to showcase your potential and gain possible work experience, internships or future employment. Assignment brief You are required to design and build an online identity that can present a portfolio of your creative practice. It is crucial to consider who you might want to view this portfolio and what you want to achieve from it. Think about which design companies and potential employers might be among your users. You will be encouraged to create an experience for the user that expresses your position as a designer/creative but also allows the work to be viewed in a navigatable, interactive and digital space. The website must also include an ‘About Me’ section. Although you will be producing an individual website you will be expected to work with a ‘buddy’ to both support and gain user-feedback. You will need to work fast, attend all workshops and use independent study time effectively. Presentation is always crucial. Your portfolio, the presentation of your work, needs to communicate directly your creative identity and you as a brand to potential employers and clients. A personal website is often the first point of contact for anyone who is interested in finding out who you are and what you can do. You direct people here, you send links, you can be found via searches and other people will share it. The way you frame the experience of the people who follow these links and referrals will have a massive impact on how you and your work progress and develop within the creative industries. The aim of this project is to build on your exploration of user experience and allow you to begin creating an identity and online portfolio through which to showcase your potential and gain possible work experience, internships or future employment.

Assignment brief

You are required to design and build an online identity that can present a portfolio of your creative practice. It is crucial to consider who you might want to view this portfolio and what you want to achieve from it. Think about which design companies and potential employers might be among your users. You will be encouraged to create an experience for the user that expresses your position as a designer/creative but also allows the work to be viewed in a navigatable, interactive and digital space. The website must also include an ‘About Me’ section. Although you will be producing an individual website you will be expected to work with a ‘buddy’ to both support and gain You are required to design and build an online identity that can present a portfolio of your creative practice. It is crucial to consider who you might want to view this portfolio and what you want to achieve from it. Think about which design companies and potential employers might be among your users. You will be encouraged to create an experience for the user that expresses your position as a designer/creative but also allows the work to be viewed in a navigatable, interactive and digital space. The website must also include an ‘About Me’ section. Although you will be producing an individual website you will be expected to work with a ‘buddy’ to both support and gain user feedback. You will need to work fast, attend all workshops and use independent study time effectively.

Guidelines

Here are the guidelines I set myself while making my Animation, as I wanted to create consistency in my work.

 

Screen Shot 2017-01-11 at 16.42.16.png
Guidelines

The colours have stay within that range but, I could different colour variations without colour, as I didn’t want block colours.

The background texture must be used in each scene.

As the movie Life of Pi is revolved around water I chose to use the same style for the water.

The watercolour background should be used when its necessary.

 

Design Outcomes

First scene

For the first scene, I looked at many ways I could create the pool. Here is an example of my work.

11-jan-4

Here is an example of my work.

I first started off by making the pool, I wanted the pool to be an ariel shot, as I wanted to show Pi in the swimming pool swimming. I first looked at adding an actual shot of a water moving around, as the found the light rays reflected on the water made it look serene; I changed the transparency levels to hard light, as I wanted the colour pink to show through, as this made the scene look playful and hypnotic.

screen-shot-2016-12-17-at-21-50-27

I then added pi to the scene where he was swimming, I wanted to make Pi look as if he was swimming underneath the water, hence why he is darker in colour.

Screen Shot 2016-12-17 at 21.23.39.png

For the character Design, I looked at an actual reference to the actor who played Pi in the ‘Life of Pi’ as I felt this would help with the skin tones and amongst other things. I chose to make the shorts a turquoise colour, as I felt this with contrast against the pink and would match the background of the pool scene, as I didn’t want too many colours in one particular scene, as I would go against my own guidelines.

screen-shot-2016-12-23-at-22-18-15

I would definitely say the first scene had a lot of experimentation which paved the way for the other scenes in the title sequence; I had figured out the particular illustration style I would be going for, which I would use throughout my work as this creates consistency.

For the final scene, I used a watercolour background for the base of pools water to give it a wave effect, with the addition of adding lines for the ripples in the water. For the lines, I added different thickness and line types, as I wanted to make a subtle difference between them. I added a gradient to the background.

Symbolism

Colour pink: The symbolism of pink in Indian culture is love. Pink is associated with love, which also branches off into mysterious as well, I feel this colour works well in this particular scene, as pi is swimming to somewhere new finding new things he may love and hate.

Second Scene

For the second scene, I looked at having a teacup, which plays around with the theme of India and France, as Pondicherry is a french town in India. I wanted to play around with the idea of having teacup and having commotion in the cup, which would make it seem hypnotic and playful at the same time. The teacup uses juxtaposition to create a stark contrast between water and the sea.

screen-shot-2017-01-11-at-13-49-25
A traditional tea cup.
screen-shot-2017-01-11-at-13-49-16
Glass teacup
screen-shot-2017-01-11-at-13-49-36
Final Scene

For this final tea cup scene, I decided to make the teacup glass, as I have been to India many times and it seems like the norm to drink out of a glass teacup, this also worked well for me as the viewer is able to see what is happening in the glass. Initially, I wanted to pan over into the glass but, I found this rather difficult to achieve but I am happy with the outcome, as the rest of the animation is very static in its movements. I kept this scene consist with my guidelines of using the lines for the steam and also using a watercolour background for the water in the glass.

Symbolism

Yellow is the colour of knowledge and learning. It symbolises happiness, peace, meditation, competence and mental development. It is the colour of spring and activates the mind. Lord Vishnu’s dress is yellow symbolising his representation of knowledge.

Third Scene

For the third scene, I looked making the particular scene tranquil and a serene environment, as it can seem quite disruptive with the tiger. I used the idea of having a sunset and tiger together to create consistency in the particular scene.

Here is a time-lapse video of me drawing the tiger on Adobe illustrator for the animation.

Tiger Time Lapse Drawing from Ravneet Bains on Vimeo.

Screen Shot 2017-01-11 at 15.21.18.png
Final Scene

For the final scene, I added some light rays which would make the scene come to life as it would seem as if you were on the water. I kept with the guidelines by using the lines for the water. I also used a watercolour background for the raft, as I did not want to have a traditional raft but, make something that is hypnotic and playful for the audience.

Fourth Scene

For the fourth scene, it directly transitions from the scene before; in this particular scene, the stars are playing with the idea of Hinduism and the God Krishna who had stars in his mouth. I was playing around this idea, as Krishna was known as a cheeky boy who would get scolded but, underneath all of that he was kind natured boy

Image result for krishna universe in mouth
Krishna
Screen Shot 2017-01-11 at 15.40.33.png
Stars in the sky.

For the fourth scene, I used the same speckled background, I added various sizes of white circles to create the stars in a cool illustrative way. The final outcome of this would be moving slowly to replicate the actual solar systems.

Fifth scene

For the fifth scene, I looked at a lotus flower opening up, which I felt would be a strong piece in the title sequence, as the Lotus flower has strong connotations with Hinduism.

Here are the screenshots I took off the lotus flower time-lapse video

This slideshow requires JavaScript.

Screen Shot 2017-01-11 at 15.48.37.png
Lotus Flower
Image result for lotus flower hindu
Goddess Lakshmi

For this scene, I drew out each scene of the lotus flower. I kept within my guidelines by using the watercolour background for the lotus flower. I used the same line style for the edges of the lily pad to create consistency with each of my scenes.

The lotus flower has strong ties with Hinduism and India. First of all the lotus flower in the national flower of India. I chose the lotus flower as the one before the title scene, as I felt i showed a new journey into life and happiness. In the Hindu belief, pink is the highest and most sacred colours, and lotus flower mythology states that within each person is the Spirit of a Sacred Lotus. The Bhagavad Gita speaks of the need to strive to be like the lotus blossom, pure of heart so that the muck of earthly-matters do not cling to us.

Final Scene

For the final scene I decided to break away from my guidelines to create something different from the rest of the scenes but, still connecting the together in subtle way.

Screen Shot 2017-01-11 at 16.10.37.pngscreen-shot-2017-01-11-at-16-14-05

I connected the final scene to all the other scenes by using all the colours I used in the previous scenes to reveal the text, I thought this was subtle and interesting way to reveal the text.

Post Production 

I decided to make one video with text, as I wanted to see the difference between the tradition title sequence and my take on one.

Storyboards

 

I had a group tutorial with Ralph to discuss my ideas and where I may go from there. It was really helpful to discuss with Ralph along with others, as they put across their ideas, which makes it helpful as they have a different perspective from yourself, which can open you up to new things.

10 jan 22.jpeg
Feedback

 

I took a lot of things Ralph had told me and I decided to look at various things in the movie, for example, the colour scheme and the particular scene that talks to me in the movie.

This particular research helped me to come up with ideas for my storyboard.

 

11 jan.jpeg
Storyboard One

 

With this storyboard, I looked at making a sort of tranquil title sequence as water can be calming and I wanted this to reflect on my storyboard.

What I was told was to forget about the other title sequences that I had seen previously and create my own sort algorithm for it, so, therefore, I decided to just have an impactful ending in the title sequence by just having the name of the movie, as I want the viewer to have a hypnotic experience while watching the title sequence.

More storyboards

11-jan-3

Here is an additional storyboard I made which I thought would go well for the title sequence.

IMG_0540.jpg

Final Storyboard11-jan-4

This is my final storyboard for my title sequence.