Final Website

Final Website

The website it fully responsive as the images and text shrink to fit the browser’s size.

screen-shot-2017-02-03-at-16-05-31

I had a made an ident for the beginning of the page which best represented myself as a person. I used my favourite mark making tool, which is a palette knife and I made random marks with my favourite colours to show I am artistic and not afraid to break the rules within the design industry.

for the landing page, I made the ident using my iPhone 6s camera. I had designed a stop motion animation of myself spreading acrylic paint on a piece of paper.

paletteknife (32 of 64).jpg
Palette Knife

I used after effects and adobe lightroom to edit the photographs and video.

 

screen-shot-2017-02-03-at-16-05-58
About page.

 

Screen Shot 2017-02-04 at 15.47.51.png
About page two

Final About me

Screen Shot 2017-02-04 at 17.00.26.png

I added my own mark to the photograph, as I found the photograph too formal and I wanted to make it fun and intriguing. I wanted the photograph to link to the landing page of the website.

 

screen-shot-2017-02-03-at-16-05-45
Work page.

I made a grid of photographs, as I wanted people to know what they were clicking on before entering the page, as this gives them more of an incentive to click on the webpage.

screen-shot-2017-02-03-at-16-06-58
Life of Pi.
screen-shot-2017-02-03-at-16-07-06
Fernweh
screen-shot-2017-02-03-at-16-06-19-1
Silver and Green.
screen-shot-2017-02-03-at-16-06-27
Silver and Green.
screen-shot-2017-02-03-at-16-06-08
Contact page.

Overall Thoughts.

The overall thoughts I had throughout this project was if I would have enough time to complete all the work, which was not true as I completed all the tasks on time and too high standard to which I am proud of.

I am satisfied with the photographs of my work, as I have produced digital mockups of everything which makes the website look clean and sleek.

The website proved to be difficult but, it was a great experience as it helped me to get out my comfort zone in graphic design, to just something new.

 

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.

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.

Final Outcomes

Here is the final outcome of my animations.

The reason why I chose such bright colours, is because India’s culture is known for having a culture which is based associated around colour, and I wanted this to reflect as much as possible in my animation, hence why I have a different colour for each scene in the animation.

The animation has subtle connations with Hinduism and the Indian cultures as a whole.

I hope you enjoy the animation which took over 80 hours to render, Thank you.

I did two outcomes for the for the final video; The first video looks at the poetic aspect of the title sequence, whereas the second video has the actors and production company which compliments the video.

The Life of Pi Title Sequence from Ravneet Bains on Vimeo.

The Life of Pi Title Sequence with Credits from Ravneet Bains on Vimeo.

Before Post Production

Final Video Done from Ravneet Bains on Vimeo.

This was the video I had to make improvements to, as I was not happy with the final video as it contained a lot of mistakes.

The animation was created by using Adobe Illustrator and Adobe After Effects.

Additional Pieces

I decided to make some posters to go with the title sequence.