MAJOR PROJECT~: BYRO MOCKUP IDEAS

BYRO MOCKUP IDEAS

Now I knew about what code I was going to use for my project, I began laying out a plan for the graphic novel, drawing down the layout of the elements into a plan so I had all of the elements in position before I actually start to draw the final pieces of artwork.


 

SECTION ONE

ARTWORK:

For the first section the artwork will be above the city, showing a city scape with clouds rolling over the top. Above the clouds will be the main titles of the graphic novel, and bellow will be a building in front of the city scape and clouds.

CODE: 

The code that will be used in this section will be:

  • Parallax.JS
    This will allow for the user to use the cursor to look behind each building as they move the cursor from side to side.
  • Scroll Fade Audio

    Music:
    BYRO Main Theme

    Sound:
    Whistling wind

    as the user scrolls from the top from the title segment the sound of whistling wind with start to play, alongside the opening of the main theme. This will allow the user to become a lot more immersed as they start to scroll down.

  • Javascript Animation.

    To add a little more depth to the project, I decided to add javascript animation to move the clouds, this will bring the artwork to life accompanied by the sound.

 

SECTION TWO

ARTWORK:

The second section will introduce the city, as the user scrolls further down into the graphic novel. There will be drawings of cars driving past with buildings within the foreground, and a character stood just before the bridge.

CODE: 

The code that will be used in this section will be:

  • Parallax.JS
    This will allow for the user to use the cursor to look behind each building as they move the cursor from side to side.
  • Scroll Fade Audio

    Music:
    BYRO Main Theme

    Sound:
    Sound Of a City – Vehicles Driving

    as the user scrolls from the top from the title segment the sound of a busy city will fade in, alongside the main theme that will intesify and become louder at this point of the scroll.

  • Javascript Animation.

    To add a little more depth to the project, I decided to add javascript animation to move the vehicles down the road accompanied by the sounds of beeping horns and the sound of engines.

 

SECTION THREE

ARTWORK:

The third section will introduce what its like under the bridge, and the titles of the first chapter as the user scrolls further down into the graphic novel. There will be drawings of two police officers stood amongst a pile of rubble with a dead body on top of it.

CODE: 

The code that will be used in this section will be:

  • Parallax.JS
    This will allow for the user to use the cursor to look behind each building as they move the cursor from side to side.
  • Scroll Fade Audio

    Music:
    BYRO Main Theme

    Sound:
    Gloomy Dripping Water

    as the user scrolls from the second section the sound of dripping water will fade in, alongside the main theme that will intensify and become louder at this point of the scroll.

 

SECTION FOUR

ARTWORK:

The Fourth Section will now change the look of the graphic novel in comparison to the previous sections. It will now go into a standard graphic novel format, and begin telling the story.

CODE: 

The code that will be used in this section will be:

  • Parallax.JS
    This will allow for the user to use the cursor to look behind each building as they move the cursor from side to side.
  • Scroll Fade Audio

    Music:
    BYRO Main Theme

    The music will be the only sound playing now, to really bring out the details within the music and will show the emotion of the story playing out on the screen.

  • AOS Scroll Animation.

    The different graphic novel content boxes will start transitioning in on scroll with different animations to keep it exciting for the user as the story plays out.

 

byromockup.png

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s