Atravessando a rua (in English, "Crossing the Street") is an interactive webcomic I produced as part of my master's degree project in 2016. The story is starred by Vovó Vevé ("Grannie Annie") and shows the pitfalls of misunderstanding signs and visual messages. Aiming to explore the possibilities of comics in the digital media, this piece features a series of hypermedia resources, such as animation, sounds and dynamic layout.
You can read the full version of the webcomic by clicking this link...
...or you can watch it on the video capture below.
Creating the story
I first wrote the story as a traditional comics piece for a printed zine back in 2006. The plot was an old lady striving to get across a busy street in a chaotic city.
I wanted to keep it simple and very visual, so there were no dialogues or speech bubbles (...except for the little gag at the end). The 1950s Pink Panther's animated cartoons, as well as Charlie Chaplin's silent movies, were my main sources of inspiration.
Back then, the entire story was drawn and inked traditionally, with pencil and pen on paper.
Ten years later, as I studied about digital comics during my master's, I decided to completely redesign the story and make a multimedia version of it. That's how this project came to be.
Redesigning the character
Vovó Vevé ("Granny Annie") is a typical sympathetic old lady. She loves sewing, knitting and embroidery. The city where she lives grew around her, but she still lives her life in the same breezy rhythm since decades ago. She may appear fragile with her skinny look, but she's actually pretty bold and strong. She's independent and does everything by herself. Sometimes, she can also get a little temperamental.
Laying out the interface
The redesign process started with very loose sketches with side notes for brainstorming. This was followed by a schematic storyboarding stage, which helped clarify a bit more of the compositions and the dynamic visual effects. Then, a software called Tumult Hype was used to develop a prototype with the storyboard images as placeholders.
With a functioning prototype, the following stage was to develop the illustrated compositions, which were all created entirely in Photoshop. Below, you can see a sample of the three main steps I used for each illustration: sketch, inking and coloring.
Since most compositions would be later animated in Tumult Hype, all the illustrations had to be broken down into smaller components, according to what had been planned on the storyboard. Below, you can see several of the images used as assets to implement the final version of the webcomic.
The interactive elements were kept as simple as possible: two buttons for story navigation (forward and backward) and a home page button. In order to improve usability, a dotted line was included along the story to show the reading progress. On the title screen, there is also a link for the credits' page. The graphic design of these elements was restricted by Tumult Hype's limitations concerning vector edition and grid construction.
A mobile version of the webcomic was included as part of the project, however it could not be implemented due to technical and financial constraints. Below, you can see two alternative layouts designed for it.
Finally, about the sound effects: most of them were produced by me, and a few others were downloaded from freesound.org. The intro and background music are edited versions of "Joyful Gypsy Jazz", by Magik Studio (available at www.musicincloud.com). All sounds were edited using Audacity (available for free at www.audacityteam.org).
Thanks for viewing! And please check out the full webcomic on the link below. :)