Connecting History | Alphonse Mucha
First Steps / Research
A project to connect the history of designers and learn about their lives in-depth. Behind the scenes, we began to understand the grid system and how to design consciously.
For my designer, I chose Alphonse Mucha, because I really, really love his illustrations (I mean, I even own a postcard booklet) although we were directed not to choose a designer we know about, I hardly knew anything about a designer whose work I like.
I started with some casual research on the web and got some basic facts down such as birth and death dates etc…
As a class, we have our wall of notes we take on our designer, but I was confused about the layout of this wall because it seems to have odd date/category relation.
Alphonse Mucha, being a designer in the older side of history compared to others, was easy to find biographical information on, but it was a bit difficult to find specific anecdotes or fun facts on, so I decided to look for other sources of data. Internet had its limitations.
In Hunt Library, I found a couple of books that exhibit his work in beautiful, full-color spreads, but the book I found to be really interesting , was Alphonse Mucha: His Life and Art.
While I could hardly find any information on specific stories of Mucha’s life or his personality due to this designer being on the older side of history, this book (written by his son, Jiri Mucha) actually told a lot of ‘behind the scenes’ stories of Mucha. I especially liked one story about how ‘muddled’ he gets —
“…Father had an astonishing capacity for getting muddled, misdating events and mistaking one person for another. He was so used to this that in New York, when instead of going to a party arranged in his honour he wandered into another house where another party happened to be going on, he remained there for two hours, quite unperturbed by the fact that there was not a soul he knew. Once he even produced a photograph of President Masaryk and his grandchildren, declaring it was himself.”
Update
Brief summary of facts on Alphonse Mucha.
Alphonse Mucha was a Czech painter and artist who produced many illustrations, designs, posters, portraits, and advertisements. He is famous for his distinct style featuring idealized sensual, young female figures natural poses, entwined in vaporous hair and flowing dresses with ornamental flower and abstract pattern in the background.
He was a significant figure in the Art Nouveau movement which promoted decorative art similar to Mucha’s, but he himself believed that he is not influenced by anyone but himself and traditional Czech art. He believed that art should have spiritual message and philosophy.
Mucha studied at Munich Academy of Art, Jualian Academie in Paris, and Academie Colarossi.
Mucha’s famous work included the Gismonda poster, Seasons illustrations, and the Slave Epic. Although Mucha was known for most of his commercial work, he was frustrated by this fact since he believed art served to have a meaning.
Mucha was also a strong nationalist and a patriot, which makes him produce a lot of work that is connected to his mother country and its history. He accomplished his major works mostly in Paris, the US, and Moravia.
Mucha’s style heavily influenced Art Nouveau and future artists such as Bob Masse and Nigel Waymouth. Today, Mucha’s art is being reproduced and sold as prints and publications as people find his illustrations beautiful and decorative.
Update
after reading the book, I thought that I had a better understanding of Mucha’s accomplishments and life and decided to start the diagram. I based the categories on what we talked about in class of what is important in a biography. My categories were: Major Locations, Education/Career, Major Works, Influenced, Society/Historical,Styles/Beliefs, and Personal.
But the problem was that now I was overwhelmed by the amount of information I had of Mucha. After reading the book and getting to the very little details of his life, I had a hard time deciphering what was important and what I could omit. Being unsure, I decided to include more information than less and go from there. I didn’t have as much for his personal life (such as marriage and children) since it didn’t seems to affect his career or himself that much ( I also could not find information on specific interactions between Mucha and his family).
In the end, I came up with this messy, webbed diagram.
Update
We discussed about Lynch’s Image of the city. Lynch describes that there are similarities between how people navigate through a page and how they navigate through an urban city.
- A node is a destination. In a city, it may be a particular building you are trying to get to. In a page, it may be a paragraph you are to read.
- An edge is a boundary. In a city, it might be a wall or railroad tracks. In a page, it may be an outline of a box for text.
- A district is is a group of similar nodes. In a city, it may be a market district. In a page, it may be a group of body texts.
- A landmark is a reference point that is visible but we don’t interact with. In a city, it may be a big tree we use to reference to the building next to it. In a page, it may be an illustration.
- A path is a channel we move through that guides us to the nodes. In a city, it may be a road. In a page it may be the margins around the body of the page.
We did an exercise to help us understand this concept by labeling an existing print piece or website with the above components of information design. I think this was helpful in us deciding how we want to design our biography page so that it is balanced and guides the viewers through the page with ease.
Creating the Diagram with Hierarchy
After talking in class about the diagrams, I realized that my categories are not organized according to what is important in Mucha’s life.
I decided to use location as the big categories for my diagram. This is because location was a big part of Mucha’s influence and since Mucha accomplished most of his work in three major location, I thought this may be a good ‘big’ category. However, I decided to sub-categorize what he accomplished in those countries with color coding into personal, education and career, style and beliefs, and notable work.
Instead of the linear form, I stuck with the radial since the locations change chronologically and he starts his life in Moravia and ends his career in Moravia.
The final diagram ended up much bigger and cleaner than the old one, making it easier to read. I still had a difficult time choosing what kind of particular information to add and what kind of personal information to leave out (such as his marriage, which did not have a big impact on his career or his life).
I was happy with the visual aspect of how the diagram turned out however, and I even made the diagram follow Mucha’s style.
However, I wanted to include specific life stories of Mucha that I found funny, but could not find how I could incorporate that into the diagram or biography. I think my next steps are figuring out how I could make my biography more interesting with anecdotes.
I did some quick page layouts, which will need to be refined, but the general idea is that I want to follow Mucha’s philosophy of a full, balanced design, with decorations. I was also thinking of illustrations that are not contained within boxes but create harmonies with the overall text and page.
Moved!
To have enough space for all the sticky notes and also to have better categorization, we moved to a bigger wall. With this change of context, it was easier to see the time-relation of designers as well as how they are related in terms of era, beliefs, time-frame, influences, etc…
I realized that Mucha, because of his time period, was a bit disconnected from the other designers, so it might be a challenge for me to refer to the designers distributed to the class. He also was a stickler for believing in not being influenced by any art movement or other artists other than himself, so I am not sure of the connections I could make to other designers yet.
Getting to the Spreads
The next steps were actually thinking about the book spreads and their layout. In class, we discussed again about Lynch’s design components in a layout and hierarchy.
I learned that a reader is likely to look at the big landmark (such as an image or illustration) first and then the rest goes in order depending on size, weight, color, reoccuring elements etc… What we had to think about was “what do I want the reader to see first?” My initial though was that since we are creating designer biographies it should be their work, but even before that, I think the reader should be able to see the designer’s name first.
However, I’m still unsure about how I should introduce the elements so they don’t fight for attention. So I guess my next steps are actually trying out some layout thumbnails.
Based on the layout discussion in class, I made some sketches of the possible spread with no particular grid or plan in mind. I did keep in mind that a lot of Mucha’s illustrations are long in length in proportion to the width, so there would be a lot of images that go from top to bottom of the page. This means I would have long, single columns of text or multiple, thin columns of text . I also noted some Lynch principles.
More Layout Tests
I tried playing around with the ‘look I was going for’. I liked the idea of having Mucha’s figures placed around the pages as decorative elements as well as some Art Nouveau decorations in the margins and corners of pages to portray Mucha’s art style within the biography. I would have to be careful not to make it look too cheesy though, and make sure they work with potential grids. I kept the long columns of text in most parts and might consider using non-rectangular text block depending on what kinds of illustrations I end of using.
I am considering the categories or subheaders again, as dividing them more into different aspects of Mucha such as his style, beliefs, personal life, career etc… and non-chronological order to help readers get a better summarized version of Mucha’s life, but this is still in discussion.
I tried some layouts digitally also, but didn’t use a grid just yet (because I wasn’t sure how to use them) so that I could be flexible and see what I liked.
I chose Mucha’s most famous works such as poster for Gismonda, Seasons series, and Slav Epic as my images. To my surprise, there weren’t that many long, thin images so I was able to make my text column wider than I had expected.
However, with the margin size as wide I wanted, I was only able to use single column text, as having more would make reading difficult because the width of the block of text would be too short.
I decided the Seasons series would be a bleeding image due to its long width which would also add some dynamics to the spread.
I also established here that I would use a very large, serif font for the title, or Mucha’s name. One, because I believe that the person’s name should be the first information to reach the readers, and two, because Serif fonts are created to be read as print and because of his time period.
Styles, and More Styles
Now, I had to start considering the fonts I use. I already have decided that I would use a serif font, but I also had to experiment with different weights, sizes, decorations and varying fonts.
I tested with display fonts that looked like Mucha’s signature as seen here:
Which is actually a sanserif font, but taking his time period and decorative writing he used in his illustrations, I chose serif as the way to go.
For the title and subtitle, I used Baskerville Old Face (69, 18) regular and classic Times New Roman 11 regular for the body. I liked the legibility of these fonts and also the classy, aesthetically pleasing feeling they emitted much like Mucha’s illustrations.
In class, we finally printed the first drafts of our layout and it was really exciting to see everyone else’s layouts, which gave me insight to the kinds of approaches I would like to take next.
Stacie told us the proper way to make a style sheet, so I fixed mine with small changes in fonts etc.
I changed the title font to Goudy Old Style Bold, as it was a bit more ‘quirky’ and more similar to that of Mucha’s. I especially liked the curvy serif on the ‘M’ that reflects sort of the Art Nouveau aesthetic. The section titles were also added (Times New Roman bold) which will for the different locations Mucha went to. The image captions were added in this version of the style sheet. I got rid of the footnote element because any information needed would be given in the body text and maybe as a side list later.
Using Grids this Time
I finally implemented grids into my layout, without really knowing what to do with them. I used a four column grid after talking to Danae about how Seasons image is divided into four different images and they fit perfectly into the grid. Even with grids, my first attempt ended up with text not lining up with the grids at all and with widths and column numbers all over the place. I realized that it was too soon to experiments with grids already so I should start with normal, strictly fitting layouts. I also didn’t line any images with the grid either, so that’s what I needed to fix for the next steps.
Learning Grids
There definitely were improvements in my later attempts. I learned to to line up texts and images strictly to the grid which made the spreads uniform and easier to read and had a better flow. I still am not sure how to position text and image next to each other in a way that is interesting and also justified, so I will have to work on that for the next spreads. I switched out one of the Slav Epic paintings for a hero image on the first page because I thought displaying one example of the Slav Epic was enough and I wanted to show more illustrations that shows the ‘Mucha Style’ over his fine-art like paintings.
Looking at how my spreads are coming together, I decided not to use my initial idea to add a lot of page decos, since Mucha’s painting themselves are so flamboyant and colorful, having similar elements all around the spread might direct the readers away from the images.
I am still trying to find a way to make the text look good on the grid next to the images. I tried experimenting with the way a long image going across the page could split the paragraph. I also played around with pull-quotes to make the page more dynamic and utilize the empty spaces. Because the quote I wanted to use was so long, it was difficult to find a way to make it fit and not look overwhelming next to the body text.
I switched the hero image again, after finding a better image to display Mucha style and one I found would work better as a print format.
After printing and getting feedback from Stacie, I wanted to make some small fixes and find a way to make my spreads look more interesting.
Looking at Prints and More Experiments
I wanted to portray Mucha as more of an individual with characteristics instead of a ‘master from the past’ because that might make him seem more distant, so I replaced the original portrait picture to something more of him in his natural state. I also took out the pull quote from the margin and combined it with an image, because I needed more space to fit in more of Mucha’s works.
There were some new elements added in this iteration such as the list and loose images. I tried integrating the stickynote with my spreads by showing the kind of interactions Mucha had with other people, but unfortunately I did not find any connections between him and the other designers on the wall. I also put in more of his personal trait through a little ‘Fun fact’ section. To show hierarchy, I made the list headings 100% opacity and its contents 50% but I’m not sure if this might make the header stand out too much and disconnect it from the rest of the list. I also added in ‘loose images’ which are basically sketches with no rectangular border, or break the border. By breaking the grids, I would be able to make my layout more dynamic and interesting. This also refers back a little to my original idea to have ‘flowing’ figures placed around the page to decorate it. I did a lot of experimenting with how the images would fit into the page.
Some final feedback on formatting and where to make changes…I needed to find ways to use empty space more effectively and few of the pictures were to small to see. Some alignment issues also.
Final Stretch
Finalizing my spreads — I went ahead and made the fixes I said I would by finding more fitting images. I wanted to show Mucha’s work process, but I just didn’t have enough or appropriate space for it, so I just put in more of his sketches. I also found the perfect image that both fits into and breaks the grid because of the vignette in the background and the figure in the front. To utilize the space in the last spread, I put in Mucha’s signature, which I always thought was unique.
I changed his portrait picture back to the original one due to the resolution of the other image, when I adjusted it to fit the grid, it became pixelized.
Some changes were made to the fonts such as the title being small caps and title and subtitles having color fills to make important text standout.
At this point, I was finding ways to make ‘my section of the book’ easily identifiable. I wanted some effect like being able to find Mucha’s biography while flipping through the pages. So, to introduce Mucha’s pattern design and give an identifier for my spreads, I decorated the edge of the page with one of his textile designs.
The last change I made was the little line decoration behind his name in the first spread, which I was unsure about, while it made the page seem less empty, it seemed a bit too silly.
When the spreads were printed, I noticed some issues I did not find when I saw them on screen.
Final Final
After noticing edits to be made on the prints, I went straight to fixing them.
I took out the decoration behind Mucha’s name because it looked extremely cheesy and it seemed okay to have the white space there to bring attention to his name. I aligned the sketches on the third spread better and added overline to the marginal text as a reoccuring element.
…and of course, citations
Final Final Final
I made some citation errors, so for my final final (hopefully) spread, I fixed those issues.
Final Mock Ups
Web Stuff
Mobile
For web and mobile, I focused on an old-fashioned aesthetic to reflect Mucha’s time period and style. The addition of his textile patterns to the nav bar really made the site stand out, and stayed consistent with his art and color scheme.
I think this was a good first exposure to css and html as well as interactive website. There was a lot more flexibility compared to the print piece, such as making elements like quotes change in size and color on hover.
View the full website here.
