REFLECTION
having trouble coming up with one concrete image to portray the book since its such a complex novel. Not sure if i will be continuing with the class yet, so haven’t gone to the library to find the physical book. Although I read it before in French class in high school, and it truly was very old and not pleasant looking.
9/19 day 2:
key themes/ideas in candide
- speculation is useless
- philosophy is useless in real world
- “everything is meant to be sentiment” is useless
- happiness comes when people are too busy/have no time for speculation
- folly of optimism
- “everything is for the best in this best of all possible worlds”
- satire on enlightenment thinkers who conclude that the world is perfect
- world is not completely good
- justifying the ill in the world to be happy with life
- hard work > philosophical thinking
my goal — making an old novel more approachable for young adults
LECTURE NOTES
useful link for illustration styles: https://graphicmama.com/blog/types-of-illustration/
liquid layout on inDesign allows you to modify format of pages (not limited to facing/non-facing pages). Page tool can be used in conjunction for modifications.
REFLECTION
Went to library, considered choosing other book, but I also found Candide in the PolyU library. It’s the novel that I think most needs a revamp, but since I’m still having so much of a hard time picking what kind of style, theme, look, and content to portray, I’m feeling a tad lost. Clive liked the little boy illustrative thumbnail the most, since it has the most potential. I’m a bit attached to Candide since I’ve spent some time on it, but I just found out it doesn’t need to be an old book, so I can find any book that I like.
for next week:
- 10 thumbnails
- 10 reference images w style period labelled
- 1 digital layout for cover
9/24 day 3:
book covers i liked:
Typically very modern and minimalist, with flat illustrations. Most similar to the commercial modernism and new typography style periods.
book cover design 1:
Taking inspiration from the end of the novel in which Candide decides to renounce philosophical thinking, and instead accept hard work as the way to achieve happiness. The most famous quote of the novel is:
“and Pangloss sometimes used to say to Candide: — All events are linked together in the best of possible worlds; for, after all, if you had not been driven from a fine castle by being kicked in the backside for love of Miss Cunégonde, if you hadn’t been sent before the Inquisition, if you hadn’t traveled across America on foot, if you hadn’t given a good sword thrust to the baron, if you hadn’t lost all your sheep from the good land of Eldorado, you wouldn’t be sitting here eating candied citron and pistachios.
— That is very well put, said Candide, but we must go and work our garden.”
So I created this peaceful image of his garden.
Clive’s Critique:
The image is nice but basically not very exciting; it doesn’t capture the chaotic adventure that the book has, or the satirical aspect of the novel. The text is also hard to read.
After looking back at my initial thumbnails, Clive and I decided we liked having this character. He suggested I go with a more surrealist approach as it would suit the time period and feel of the book more.
Initial sketches of the character and surrealist image:
Book Change thoughts:
Clive’s response and critique:
So I ended up sticking with my Candide, although I might go back one day to make my Charlotte’s Web system. I had even thought of a cool user experience piece, where I would code a fun program that let people type messages in, and the messages would get woven into a web projected against a wall.
Candide Cover Progress:
Keeping in mind that I have 18 units, and will most likely not have enough time to illustrate all my images, I looked for a more simple style to go for the cover. In the end, I tried doing some stuff on illustrator, but went back to my iPad’s adobe Draw to create clean but fluid lines, and then threw it back into illustrator to image trace, expand, and manipulate the colors. Unrelated but I almost lost my Apple pen in the computer lab last night! Good thing I returned early this morning to find it.
Final Cover Progress:
Now that I had my illustration, I was concerned about the typography. In order to not clash with the illustrative style, I wanted to try putting the type on the path as I saw on trendline.org :
My cover iterations:
Critiques from some of my friends:
Final:
Clive’s Feedback:
Revised Versions
I changed the outline text to be a hand-drawn text, but I’m still not sure how I feel about the look of it, since it’s solid it seems to compete more with the line drawing, and make the regular typeface even more off-putting
Since the book is so old and there aren’t any specific accolades or recommendations that go with it, I instead added the most famous line from the novel on the back cover. I experimented more with the colors and position of the small man. I also tried to make the hole more realistic.
Final for Oct 10 Crit
Notes from critique (10/10):
Oct 28:
A lot of changes were made to the layout and the cover as I tried to be more experimental. I tried to experiment with making the spreads look more similar to the cover design. Adding more images and making the layout more playful than the traditional book layout.
FINAL
Final poster:
Honorable mention alternative final design:
WEBSITE
I wanted to go for a single-page scrolling site that would mirror the style of my book cover and layout. There are 5 sections total:
- About the author — Voltaire
- Meet the characters
- Chapter 1
- Chapter 2
- Chapter 3
Using Adobe XD, I first drafted a wireframe of the general layout and color scheme based on my cover design.
Wireframe:
Then I began to construct my website using HTML/CSS. I added a navigation bar that was previously not in the wireframe, and had to make some modifications as my limited coding abilities didn’t allow me to do some of the layouts that I wanted (ie. Voltaire portion). After showing the site to Clive, he suggested I not use Optima as the serif didn’t quite align with the solid graphic illustrations I had made, although I initially chose it to make an homage to the old-timey-ness of the novel. I proceeded to change the main font family to Helvetica Neue.
I had quite a lot of difficulty positioning the items as I was only using floats and magic numbers with margins and padding Some of the odd spacing and margins that don’t line up can be seen in the chapter headings:
I also couldn’t make the hover accurate for the footnotes, and so they would appear whenever the mouse hovered over the entire paragraph which was okay for most sections except the one that had 2 footnotes in the same paragraph. Both would appear at the same time:
Below are screenshots of my first version of the website following the wireframe I made:
Below is a video clip showing the scroll and animations through the website:
Here is the responsive mobile view:
Second version of the website
After attending critique and seeing the work of some of my peers who are actually in the Interactive Media Design stream, I decided I wanted to add more animations to my website to make it seem less “flat”. To do this I had to learn some Javascript/JQuery.
I removed the side navigation bar and instead created a title that scrolls up, and fixes itself to the top, revealing the top horizontal navigation. I added an introductory section to the beginning of the website and am considering adding my animated video for the next portion of the project to the hero screen.
I added parallax scrolling images to a create a more layered effect and more interesting layout, particularly with the Voltaire section. I also utilized the “sticky” position in CSS and HTML5 to create a fun effect of the characters dropping into their frames for the meet the character section. I added the frames to add a smoother transition from the painted style of Voltaire to the graphic illustrations.
There are also smaller images that slide in from the sides as the user scrolls to certain parts of the story, and each section comes in on a fade in effect.
Previously, I had a lot of difficulty working on the website as I was using floats and magic numbers with the margin and padding to position the items, however for this version I learned how to use display: grid, and grid-template-areas to create a grid system for each system. In general they go by a 3 column structure, with some being 1.5fr, 1fr, 1.5fr and others being 1fr, 1.5fr, 1fr.
I also changed the typeface from Helvetica Neue to Lato, whose line weight and x-height seemed more suitable for reading on screens.
Some screenshots from the website:
Video recording of whole website:
Here is the responsive mobile view:
The grid is now being displayed in block and there is a hamburger menu instead of the top horizontal navigation bar.
Experimental Design
I started by storyboarding some of my ideas for a trailer/chapter 1 kind of animation for the experimental design. First I plotted out all the words I wanted to use in the scenes and timed them based on how long it took me to read each phrase out loud.
Then I used my iPad to draw each frame and after effects to put the video together. I edited the timing as I went, and added music and sound effects afterwards. Below is the final animation.
Multiplatform Anatomy
Here is my comparison of the print media versus my new platform.
