TOC Digital Mockups and Convention Choices
Introduction. In this blog post, I will combine some of the TOC drafts I created in Blog Post #9 "TOC Genre Analysis and Plans" and some of the pictures I chose and edited in Blog Post 10 "TOC Images and Original Content." I will also put in actual headings for my articles and short descriptions for each one to provide clarity for readers and to follow my genre's conventions for TOC pages.
Technology Used to Make Mockups
Mockup #1
Layout
I made this draft to showcase many different articles and multiple pictures, which is a convention of travel magazine TOC pages. Since the images in professional TOC pages are usually linked to one of the articles, I did the same by adding numbers to some of the images to connect them to their corresponding articles. This mockup is my version of the following table of contents page from Afar magazine. A good way to make your own elements of a magazine is to take ideas from professionally made ones. From this page, I took the placement of the images, numbers inside the images, and placement of the articles. The font for all of the text on my page, however, is different from this one, as is the choice of which article to link to the pictures and where to put them.
Image(s)
The images I used are three of the four that I edited in my last blog post, "TOC Images and Original Content." As a reminder, these are the four pictures.
In my mockup, I used the picture of the Florida State Fairgrounds, air balloons, and the old ruins. I did not use the white archway-building because its theme is too similar to the ruins. They are both historical and can invoke a discussion of their history, and I wanted unique and different pictures on my page. I chose the ruins because it looks even older and very reminiscent of structures made hundreds of years ago. This would make people more interested in reading the article about it.
Fonts Used
For the title, "Trouvaille," I used a serif font called Noto Serif Display ExtraC. Serif fonts stand for tradition and intellect and this is shown through the overall layout of the page which is very familiar to people because professional magazines used it. It also shows that the designers and authors know what they are talking about so the information in the articles is trustworthy. I used Lazord Sans Serif. The Sans Serif font family usually stands for friendliness and comfort which encourages readers to move past the TOC page and read the actual articles. The font for the descriptions of the articles is also a sans serif font because of this reason but this one is called Sukar. This is thinner than the font for the headings so it is easy to distinguish the roles of each: headings are the articles' titles, and the smaller text (Sukar) are the descriptions of the articles, not the main titles. For the page numbers, I used Della Respira, a decorative font. Decorative fonts are unique and do not belong to one specific typeface (font family) and they can be fancy if the designer wants them to be (Blog Post #2, "Font Psychology"). In this case, I wanted the page numbers to have some style to make them stand out against the rest of the text, and because travel magazine TOC page numbers are usually fancy.
Colors Used
As seen above, most professional TOC pages are plain white for the background. This is to draw attention to the elements in the page instead of the page itself. I used this technique for my TOC page and, just like the Afar magazine example, made the page numbers on the pictures white to make them visible. Other than that, I made the title black along with the article headings and descriptions to create a sense of uniformity. If I had made them different colors, it would have been too much for the viewer to handle because of the colors of the page numbers beside the pictures. The variety of colors for the numbers is because I tied one color from each image to the articles beside it. For example, the picture of the Florida State Fairgrounds has blue in it (the sky), so to make it look unified, I made the page numbers next to that picture blue too.
Mockup #2
Layout
This page was formatted to showcase one picture very clearly which is a common format for TOC pages in professional magazines, (Blog Post #9, "TOC Genre Analysis and Plans"). This layout allows the viewers to immerse themselves in the picture and to imagine themselves in the scene. The first headline is talking about the picture which also helps connect the two together. The title is called "Trouvaille" and I put "Table of Contents" under it. Then, I put a line to make a different section where I put the headings, descriptions, and page numbers. My TOC page is made to look similar to the following page from Afar magazine.
Image(s)
I only used one image in this TOC page. This follows the conventions of travel magazine TOCs because professional magazines either have multiple images on their page(s), or they have only one that takes up the whole page. I chose the picture of the air balloons because it is connected to one of my main article titles ("Gravity-defying Fun in Turkey"), and it looks good by itself on the page. The colors make it look like there is less empty space which makes this image a good pick to be by itself because it does not look underwhelming.
Fonts Used
For the title, "Trouvaille," I used a serif font called Droid Serif. Serif fonts stand for tradition and intellect and this is shown through the overall layout of the page which is very familiar to people because professional magazines used it. It also shows that the designers and authors know what they are talking about so the information in the articles is trustworthy. I also bolded the title to distinguish it from the rest of the text. Unlike the first mockup, I added "Table of Contents" under the title. This is another way professional TOCs are formatted. To make everything in the top section (above the line) look unified, I made the font for the "Table of Contents" text Droid Serif too. I used Rustic Printed for the headings of the articles which is a sans serif font. This font family usually stands for friendliness and comfort which encourages readers to move past the TOC page and read the actual articles. The font for the descriptions of the articles is also a sans serif font because of this reason but this one is called Garet. This font is thinner and with the small size, makes it clear that it is just the description and does not take away attention from the headings. Finally, the font used for the page numbers is a decorative font named Giaza. This clearly differentiates the numbers from the rest of the text and makes sure that it is visible against everything since it stands out as the most fancy font on the page.
Colors Used
Since the image used for the background of the TOC page was already colorful, to make the page look brighter, I used a white panel for the text. I did not make it black because that would have affected the image and made it look darker too and I want to make all of the colors visible. To make sure the words are seen against the white, I made the text of the title and subheading, headings, and descriptions black. To add a little bit of color to the white so it does not look too boring, I made the page numbers a navy blue. This color is dark enough that it does not look out of place against the black of the rest of the text, but it also adds variety. A tip that is often used in magazines is to connect the colors of the image to some of the text on a page (Blog Post #4, "Magazine Design and Layout Tips/Guide"). Even though this tip was made for magazine covers, it can still be used throughout the magazine. I incorporated this design technique by taking the navy blue from the air-balloon image.
Final Table of Contents Page
Why I Chose It
I chose this Table of Contents page instead of the first mockup because I think this one looks cleaner. The other one looks too cluttered and the words do not have equal space between them. This makes it look unprofessional and is not aesthetically pleasing. While I like the way I incorporated different colors from the different images into the page numbers for the articles in the first mockup, I did the same thing in the second one. The smaller pictures make it hard for a person to feel the full effect of each on because there is not much space dedicated to each. The big picture in the chosen page, however, takes up the whole page and connects to the first article. I also like the placement of the page numbers in the chosen page. The way they are placed next to the descriptions make it seem more visually pleasing.
Wrap Up
In this blog post, I made two mockups for my table of contents page in my magazine. The first one had three pictures and six articles. The title is "Trouvaille" not "Table of Contents" even though that is what it is. This still follows conventions of my genre because many magazines use their mastheads, or their magazine brand name as their titles too. There were two articles next to each image and one of the two connected to that image via a page number on the picture. The colors for the numbers originated from the pictures they were next to. My second mockup had only one picture on the page which served as the background. This is also a common way to format a table of contents page in a magazine. I put a white panel on one side of the page and put the title, and added "Table of Contents" under it. Then I added a line to divide the sections of text. Under the line, I put headings, descriptions, and page numbers. All of the text is black except the numbers which are navy blue. The color came from the background image. I decided to choose the second mockup because it looks more professional and cleaner than the first. The first one is too cluttered and messy-looking.
Comments
Post a Comment