Table of Content Digital Mockups

FINAL TOC CONTENT AND LAYOUT CHOICES                                        02/22/2022

For this blog I will be creating my final mockups for my respective sports magazine TOC. Here I will be explaining my vision for the final product as well as my reasoning behind certain decisions regarding the content and layout of my TOC. I will be mentioning prior blogs to prove why my choices are valid and so that everyone can better understand the why behind each and every decision. As usual I applied the design tool Canva to my work but this blog will only focus on the finished mockup and not the actual process. Though if you are interested, all of my steps are in my last post, blog #10. Throughout this blog I will explore each of my 2 mockups in detail and explain any changes that might have occurred between blog #10 and this one.

Desired Outcome for Mockups:

I, for one, wanted a TOC that provided the audience with a highly informative and engaging while simultaneously remaining simple and clean. Furthermore, I think that the TOC needs to be 2 pages instead of one because this allows for such an effect to take place and due to the fact that it is currently becoming more conventional to do so which shows how my magazine is also progressive and modern. This along with the fact that I want my magazine to look sophisticated with a black or white background make it appealing to the younger generation that loves sports, in other words my target audience who want a more comfortable magazine that at the same time can deal with the serious topics. I also want my TOC to appear relatable so I utilize pictures of friendship, triumph, and joy at playing the sport, all of which are very satisfying to view as a member of the audience. Therefore, the use of warm colors is quite obvious so that a sense of enjoyment and positivity is reflected onto the viewers from the TOC, but not too much to the point where it unfortunately becomes overwhelming and annoying. Another big thing is the fact that to be successful you need to be unique so I need distinct factors that catch the audience's attention, whether that is a special font, an image laid out differently, or even the mere presence of a second page of the TOC.

Changes in the Layout:

All in all, the main changes mostly involve a decrease in the size of fonts due to the amount of text that I had to fit. I also eliminated some articles and left each subheading with only 2 articles. Another big change was the addition of a second page for both mockups that only consisted of pictures that directly corresponded to the information on the actual TOC. I saw that this was very conventional so I decided to add it at the last second. The font of certain text on the second mockup changes because the text was too bold compared to the size so it made it hard to read. In addition, the images themselves were swapped around in order to leave some for the second page of the TOC. Not to mention that the simple action of bolding and unbolding particular words helped make the text more visually appealing, at least for me. Of course the page numbers were also flipped along with the byline and issue date in order to better incorporate the new page into a realistic layout. Lastly, by eliminating another description for the main image in mockup #2, I was able to draw more attention to the image itself and make the magazine feel less crowded.

Digital Mockup #1:

Color:

For this mockup I kept it nice and simple with a red and yellow analogous color scheme that mirrored the costume of the subjects in the image as well as the natural setting or the sunlight in those very same images. As aforementioned in blog #3, the color red and yellow both are associated with a warm and happy feeling that I find to be ideal for a magazine such as mine. The color red also symbolizes something important or powerful, thus leading to my decision of using it as sparingly as possible in order to better emphasize specific aspects of the TOC. For instance, the color red appears in the subheadings and for the page numbers, not only on the list but also as the background for the image numbers. This then communicates to the audience that the page numbers are important to know so that they can easily browse the magazine and the subheadings help them find what they are most interested in. The color red also contrasts very nicely against the white background and black text both of which combine to further convey professionalism and cleanliness. The white background also gives off a key term that I explored in blog #4 called white/negative space. This helps draw the audience to the text itself and when combined with the black outline brings the focus inward instead of towards the sides. Lastly, by using the warm colors very little they pop out more, especially the red in the dividers that help keep things organized yet engaging. Not to mention, I am now able to appeal to the older more serious generation who enjoy the tactical side of the game with the black and white as well as the the younger more fun generation whose main objective is to find captivating content relevant to the world of soccer, whether news, highlights, or even tactics.

Font:

I tried to keep the TOC simple and to the point so that it was easy to browse the magazine so I only utilized two fonts. At the same time in blog #4 I learned to place an importance on the TOC so I made sure to choose stylish fonts that also vary with size and weight in a manner that the audience comprehends the content hierarchy. I implemented the slab serif font called Alfa Slab One and the sans serif font called Oswald. Alfa Slab One can be seen in the heading, subheadings, and page numbers, in other words all of the big, summarizing content that applies to a large portion of information. On the other hand, Oswald was placed in for any kind of description or small sized content like article names, descriptions, bylines, issue date, and even the masthead though that is due to Oswald being the font that the masthead is always typed in. I picked Alfa Slab One in blog #2 because it conveys a feeling of masculinity and power that is directly associated with sports, especially football/soccer. Additionally, the font is quite bold making it ideal for bigger text so that it is easy to read and brings a lot of attention to the specific detail. It also has little strokes adding on to the formality of the magazine while keeping in mind the desired bold and energetic feel. In contrast, Oswald appears very straight and perfect making it the favored font for such small text. It also makes sure to let the viewers know that the information is up to date and modern. Like I said before, the size and weight of the actual text differs greatly as well though there is uniformity between the specific kinds of content like the subheadings are all the same and so are all of the article titles. Although that is the case, the article titles are smaller showing that the subheadings are the most important under of course the main heading. Afterwards, the descriptions are all in their normal weight so that it conveys the fact that the content is not of the utmost importance.

Images/Layout:

For the images I explained a lot of my reasoning in the previous blog but I will touch on a couple of the major points here to remind you guys. I chose these images in particular because in my eyes they were the most engaging and realistic so that the audience is automatically immersed into the magazine. Whether that is because the photo was taken live in a game, the photo includes a beautiful natural landscape, or even if the photo brings out a warm and happy feeling due to its personal nature, the photos are directly related to sports and are quite unique. The images were also all edited to enhance the quality and balance out the warmth of its natural setting so that they appear less overwhelming and gives you a perspective as if you were really there when it was taken. Now, for the layout I chose to slightly incorporate certain parts of professional TOC's that I researched in blog #9 so I chose to put the images all around the same size on the left side of the page. This was to show the connection they had with some of the articles, more specifically, the ones with descriptions. This helped them show the audience which ones are more important. Even the fact that I placed the images in a specific order was so that the audience could see which stories came first and were also the most important. Last but not least, the image on the second page was laid out in an unconventional way so that the audience would be intrigued by it and start to become more active in the magazine. The mere fact that I put it on its side so that it appeared bigger and more visible will cause the audience to shift the magazine, therefore keeping their attention for longer. This image is also obviously the one that corresponds with the most important article and the one that I will probably be choosing for my two-page spread. Not only that, but all of my images also possess the ability of contrasting quite nicely against the text and page numbers that I placed against them.

Content:

The content I chose was, for the most part, very conventional because I found out back in blog #1 that most sports magazines discuss current news regarding sports and they tactically analyze certain games as well as teams in order to make predictions and give their own personal opinion. They also like to include exclusive interviews that make them special because they are the only ones with the information. As a result I included all of this and more in my TOC. For example, I covered current events by tackling the topic of the Balon d'Or award ceremony. Afterwards, I evaluated a specific team's performances during the past season in the story about ESSA's Winning Streak so that I covered the second key aspect. The final aspect I filled with my exclusive interview with the one and only Daniel Rodriguez. Overall, this content is all relevant to sports and I even added a story on the new venue for the sporting event instead of one on the teams participating to flip the script and show a different, more interesting side of the game.

Digital Mockup #2:

Color:

In reality, the color schemes between these two mockups are really similar with the exception being the difference between this mockup having a black background and white text versus the first one having a white background and black text. Simply put, this mockup is obviously trying to exhibit the more powerful and executive side of sports with the opposite being true of the other mockup which prioritizes the purity and happiness related to sports. Even though the background is black, it still leaves a ton of negative space to make the layout appear more spaced out and free, especially along the sides. Once again, red and yellow make an appearance on the mockup, however this time yellow takes a more commanding role due to its sharp contrast against the black background with it being applied to not just the page numbers but also the subheadings. Even red is more prominent with it being found in anything concerning any kind of page number. It is also in the heading, photograph byline, and in the costume of the subjects. My reasoning behind the more free use of color is pretty simple since I was just looking for a way to counter the boring and dark neutral colors and the yellow and red helped do that while giving warmth and an extra layer of life to the TOC. Afterwards, white appears for everything else including the dividers so that an old fashioned tone is set while still remaining more progressive due to the clear difference with the typical piece of paper that is black text on white. The last thing I wanted to mention was that the color black even makes an appearance very briefly at the top only for the issue date and the masthead which are both very important and deserve to be treated as such.

Font:

I tried to keep the TOC simple and to the point so that it was easy to browse the magazine so I only utilized two fonts. At the same time in blog #4 I learned to place an importance on the TOC so I made sure to choose stylish fonts that also vary with size and weight in a manner that the audience comprehends the content hierarchy. I implemented the slab serif font called Alfa Slab One and the sans serif font called Oswald. Alfa Slab One can be seen in the heading, subheadings, and page numbers, in other words all of the big, summarizing content that applies to a large portion of information. On the other hand, Oswald was placed in for any kind of description or small sized content like article names, descriptions, bylines, issue date, and even the masthead though that is due to Oswald being the font that the masthead is always typed in. I picked Alfa Slab One in blog #2 because it conveys a feeling of masculinity and power that is directly associated with sports, especially football/soccer. Additionally, the font is quite bold making it ideal for bigger text so that it is easy to read and brings a lot of attention to the specific detail. It also has little strokes adding on to the formality of the magazine while keeping in mind the desired bold and energetic feel. In contrast, Oswald appears very straight and perfect making it the favored font for such small text. It also makes sure to let the viewers know that the information is up to date and modern. Like I said before, the size and weight of the actual text differs greatly as well though there is uniformity between the specific kinds of content like the subheadings are all the same and so are all of the article titles. Although that is the case, the article titles are smaller showing that the subheadings are the most important under of course the main heading. Afterwards, the descriptions are all in their normal weight so that it conveys the fact that the content is not of the utmost importance. The page numbers are another perfect example as the page numbers with the images are bigger and bolder while the page numbers in the list are smaller and less noticeable as they are meant to seem less important. Before I forget, the actual page's page number is not in Alfa Slab One and is instead in the Oswald font to ensure that the audience remains solely focused on the page's content and not on official and generic parts of the page that hold no artistic or contextual value, at least for now. Though Oswald kind of symbolizes the fact that the page numbers are progressive and move forwards not backward like a lot of sports.

Images/Layout:

For the images I explained a lot of my reasoning in the previous blog but I will touch on a couple of the major points here to remind you guys. I chose these images in particular because in my eyes they were the most engaging and realistic so that the audience is automatically immersed into the magazine. Whether that is because the photo was taken live in a game, the photo includes a beautiful natural landscape, or even if the photo brings out a warm and happy feeling due to its personal nature, the photos are directly related to sports and are quite unique. The images were also all edited to enhance the quality and balance out the warmth of its natural setting so that they appear less overwhelming and gives you a perspective as if you were really there when it was taken. Now, for the layout I chose to slightly incorporate certain parts of professional TOC's that I researched in blog #9 by placing the main image that I plan to make my two-page spread on, in the center of the page, but slightly up so that I left enough room for the rest of the information. This helps us to visually comprehend the fact that this image and its corresponding article are the most essential piece of content out of the bunch. The second page is then laid out with all 3 images set to the right side with a tiny bit of space in between so that they are more easily distinguishable. Just like the first mockup the images are ordered based on how they appear in the magazine and based on their overarching importance on the magazine as a whole. What's more is that our attention is brought more to the center where the unconventional image of the sporting event's venue was placed so that the reader understands that this magazine is distinct and more captivating than the rest. It also helps separate the other two images that are a little bit taller, have a more detailed concept, and are kind of energetic with a more peaceful and natural landscape that is really satisfying. Nevertheless, unlike the first mockup this one switches the layout and places the central image with the text and separates the supporting images on their own individual page while still maintaining the connection.

Content:

The content I chose was, for the most part, very conventional because I found out back in blog #1 that most sports magazines discuss current news regarding sports and they tactically analyze certain games as well as teams in order to make predictions and give their own personal opinion. They also like to include exclusive interviews that make them special because they are the only ones with the information. As a result I included all of this and more in my TOC. For example, I covered current events by tackling the topic of the Balon d'Or award ceremony. Afterwards, I evaluated a specific team's performances during the past season in the story about ESSA's Winning Streak so that I covered the second key aspect. The final aspect I filled with my exclusive interview with the one and only Daniel Rodriguez. Overall, this content is all relevant to sports and I even added a story on the new venue for the sporting event instead of one on the teams participating to flip the script and show a different, more interesting side of the game. Naturally, the articles that have a description as well as a picture to go along with it are considered by me and now the audience to be slightly more worthwhile than the rest with the most important being of course the content that is directly connected to the center image on the first page. I also saw how some TOC's included bylines while others included descriptions so I decided to combine both ideas into one and place bylines for certain less influential stories and for the stories that require more attention and context I provided them with short and to the point descriptions to better tease the audience into reading the magazine.

Conclusion:

In total, both mockups stick to the conventions very well and mimic their respective inspirations quite accurately as well with #1 mirroring World Soccer and #2 being very similar to the TOC's found in ESPN. In essence they are quite similar with the same exact color scheme, fonts, and content being implemented with just minor changes in each and completely different layouts. Yet they both are able to convey to their audience what content is the most important through either size, weight, or color, therefore both are very effective in serving a TOC's main purpose, to help the viewer browse the magazine in a proper manner. Despite the fact that both are very well thought out and detailed TOC's, I will most likely choose the first of the two mockups for my final cover. This is mainly due to the fact that in general it is very simple yet effective with a great implementation of the white background to signify the purity of not only the magazine but also of the sport. It also bends convention very, very slightly to the point that it is quite subtle but still somewhat subverts your expectations. In the end, it is also the more professional looking of the two and gives off a sophisticated vibe to anyone who sees it. The setup is pretty clean with the dividers acting as organization tools and not impeding the communication in any way, shape, or form. The second mockup kind of felt a bit cramped at times and the images were too big for my liking due to them being distracting at times. To recapitulate, something felt off with mockup #2 as I might of slightly broke the rule in blog#4 regarding the use of color sparingly thinking it would liven it up, but in reality it just made it cheap and unappealing while mockup #1 applied colors correctly to make a formal yet engaging and exciting sports magazine table of contents.

Tools and Resources Utilized:

• https://www.canva.com/.
• Rodriguez, Daniel. Daniel Rodriguez - AICE Media Studies, Blogger, 27 Jan. 2022, https://danielrodriguez111106.blogspot.com/.