Area of investigation

magazine design analysis

What is the Appeal?

I'd say the main appeal of this is the main character art on the front of the magazine, I feel that the close-up shot of this game character would get a reader's attention and would make them want to see more about this character and/or what the game is actually about.

what draws your eye?

The big headline which reads the title of the game, the artwork of the game/ main artwork of the game character on the front of the magazine, 'The initial large cap' gets me started on reading this page. the small pie chart of things someone would do in the game.

Adobe Indesign Practice

3rd November 2023

Task One: finding three distinctively different websites: 

Amazon.co.uk

Overwatch.com

YouTube.com

Amazon.co.uk

what is the aim, subject matter, and audience for the website?

Amazon.co.uk is an online shopping site where you can order various types of items from many different brands. The audience for this type of site is literally anyone that has money, from children to adults, since the website is just shopping after all, there is no age limit for things you would want to buy (unless an item is a restricted item of course).

Design: the website is quite straightforward with its design, easy to read buttons on top of the page, and the colors of the page are very much in line with Amazon's color scheme with its buttons and page banner. There is an advertisement usually at the very top showing off Amazon's own products before you start looking at the items underneath which are tailored towards you.

Content: there is text throughout the page, of course, every box with products has it to give you a small synopsis of what the box is about, such as the "pick up where you left off", which basically just shows your history of products you have seen previously. Throughout the website has images/ even short videos of the products. At the bottom of the page, it shows links to different versions of the Amazon site in different countries. 

Is it well organized? 

yes. The buttons of the page are easy to see/ navigate around, While there are a lot of buttons/ images/ text on the Amazon website, it is still easy on the eyes since it's organized properly. the information for really any product is down to the company that posts it on Amazon, so it really comes down to who is honest, most of the time the information set is valid, but there are times when information might be a little exaggerated to downright just misinformation on a product. 

Does it work? Well, yes, it works, the website is functional for the average person. everything is quite easy to navigate, and there is good security when it comes to accounts, Amazon is a reliable shopping platform in general with a quick and easy shopping experience. The only 'what's not good' part of this website is that the UI is getting dated, being created back in 2016, I feel like it should definitely get an update. 

YouTube.com

what is the aim, subject matter, and audience for the website?

YouTube is a "community-driven" video-viewing website, where you can watch many different types of videos created by various creators on the platform, it can range from gaming videos to documentaries, to game shows, and even the news. Many would think the aim of this website is the replacement of mainstream TV. The type of audience of this website can vary from young children to adults, as YouTube has two sections of their website, YouTube Kids (it is in the name, a website/ app designed for kids to watch videos that are tailored towards them), and just normal YouTube, which has all (appropriate anyways) the content that you (an adult) would/could watch.

 The YouTube website for anyone (who follows the age rating on the TOS)

The YouTube website for Children (YouTube Kids)

Design: The design of YouTube is one of the best of this time, with its ultra-simplicity

8th November 2023

Magazine Plan

The type of Typefaces I plan on using will have a "classic modern" style to them. one example of said type of Typefaces is called "classico - A modern serif font". I find these fonts visually appealing with their "classic style" to them whilst also being still looking very modern, hance the 'classic modern' style.

*sourced from New Tropical Design Studio

for my own original imagery, I will gather pictures taken of the movie(s) poster, I will try sketching something from one of those films. I am also thinking of getting pictures of amazon products or "fan-made" products from the films.

Magazine Practice design

The practice designs that I have thought of at the moment:

This is my "practice" design for my magazine cover, I'm still thinking of ideas for final designs but this is more of a start, as the magazine is to recommend a film(s) that I find to be very good in the animation community.

this is more in line with what the final design could look like as my thought process for this is, since it is a magazine about films, having more/ bigger images to show off that animated masterpiece would make the reader more interested.

The text is just filler text at the moment but for the final design will add my own text for a short "review" of the film, and generally just recommend it. the font will be the same as it's the font I originally planned to use called "Classico" which is an old-looking but also simplistic font that I think looks really nice. 

For now anyway, any images/ text that is on the magazine will be from online sources such as Google/ or myanimelist.net.

Binary Opposites 

November 9th 2023

The three-act structure

Opening Scene Idea(s)

The Idea for my opening scene is, the start of the scene will start off with the student (myself) sitting in class doing work on their laptop. They suddenly get an urgent message from an unknown number telling them to get to a location immediately. The student will have to comply with the request as they might know who had sent the message in the first place. They pack swiftly and start pacing it out of the classroom, walking in a fast pace towards the exit. as they make it towards the exit they get a new message saying to "look in front of you", and the scene ends abruptly on a black screen, giving the end mystery to the viewer.

Final magazine design 

The following link will take you to the PDF file for my final magazine design: Indesignfinal.pdf

This is my final magazine design, which has been created using Indesign: 

I've chosen "Bebas Neue" and "Acumin Variable Concept" as the primary fonts for the Magazine design. "Bebas Neue" is predominantly used for source text, headers, prices, taglines, and coverlines. Meanwhile, "Acumin Variable Concept" serves as the exclusive font for magazine articles due to its inclusion of lowercase letters, unlike "Bebas Neue."

The first page features the magazine label "Studio AMR" and incorporates characters from CoMix Wave Films, transformed into Transparent PNGs for a floating effect above the magazine label, complemented by a drop shadow. This page also showcases enticing taglines/coverlines to encourage readership.

Page 1 functions as the contents page, adopting a simple approach to avoid reader confusion. Each subsequent page (3-4) is given a basic title, providing a clear indication of its purpose. Additionally, a brief summary outlines the contents found on each page.

All images and barcodes on 'page 2' are personally created, with the barcode crafted using the online tool "www.barcodesinc.com." The page also features a picture taken using the built-in camera from a Pokémon game, strategically placed for advertisement.

For pages 3-4, any artwork or images sourced online are appropriately credited with "*sourced from." But to maintain originality, all images are edited using Adobe After Effects to align with the magazine's aesthetic. Page 4 features a concise yet informative movie review, avoiding major spoilers while covering aspects such as animation quality, the writer's previous works, the movie's soundtrack, and plotline explanations.

Technical Details

"Technical Details"... Images modified through Adobe After Effects incorporate effects like 'Find Edges' paired with the 'invert' effect to change the background of a Find Edges image from its typical black color to white. The transparent PNG characters on the front page underwent editing in Photoshop, utilizing a Selection Tool followed by an eraser to eliminate any residual errors the selection tool might have missed. These images were sourced from films produced by "CoMix Wave Films" studios.

Opinion

For my final opinion, I have discovered that the process of crafting this wasn't too challenging. Although there is much room for enhancement, particularly in terms of original imagery and overall planning, I would like to say the final magazine is good. If given another opportunity, I would prioritize increased planning to enhance the "polishness" of the magazine compared to its current state. Additionally, I would allocate more time to collect additional original imagery, as my current "original imagery" (Lack of originally sourced images) is lacking quite a lot.

Experimental Version Before Final design: 

This serves as an experimental version of my final magazine design. Notably, there are several imperfections; for instance, the magazine article's font is entirely in uppercase, rendering it unfit for the final version. Additionally, the images lack originality, sourced directly from the internet (with proper attributions). However, in the finalized design, these issues have been addressed, with all images edited using Adobe After Effects.

Content Research

The type of website I plan on making will be for animated movie reviews, with a small area as a forum for users to discuss certain topics around animated movies.

Example images (sourced from google images/ www.myanimelist.com) of animated films that I would review on the site: 

Forum Ideas

As for Ideas for the forum part of the site, any content on there will purely be created by users (I will add content in, essentially creating a fake user base to show what a forum would look like if there was an active userbase if the website becomes active.) 

Website Design Ideas

Firstly, for the design of the website, I will be looking at different types of font, one of the ideas of font I had a look at is called "Fraunces", the font gives the text a more 'classic' look to them which I find very appealing for the type of website I plan on making.

 

Website link

This is the link for the website that I created using Wix. 

https://kasuraash.wixsite.com/studio-amr/

currently there is a lack of any content, however I have edited the site to fit the aesthetic that I like. the content that does need to be uploaded at the moment is the review posts and also more images for the homepage. 

Adobe XD app 

my Ideas for the app: 

•  Create a sliding transition effect when going to different pages
•  UI elements to be primarily using gradient color effects. 
• A chat room page with "messages" 
• Chat room message button that when pressed will open up the message box.
  
• Homepage incorporating a background from that "Studio AMR magazine" 
• A page dedicated to links to other pages (a menu page) 
• A magazine page that can be used to read full magazines created by me.
• A login page that redirects you to the chatroom when "logged in" 
• A basic but informative "about us" page. 
• Use Primarily purple and black for the app's UI elements. 

Inspiration from my past work, looking at what I created and how I can incorporate this into an app, potentially using the same name and include the Magazine + the forum element of the website into this app.

 

 Final Adobe XD App

I have been working on the adobe XD app, the app is based on my past work which is on community, specifically the "Studio AMR" magazine/ forum website that I created in the past.

 

This is the final adobe XD app that I have created after planning, you can see the full app by watching the video below this text:

 

 

Here are some images of  my adobe XD app pages too: 

The community page uses two different pages to make it function. Clicking on the "message" button will take you to a duplicate page, which will give you the illusion that the message button had popped up: 

The magazine page uses a very long page, which is W: 1080 x H: 7800, so I am able to fit the content onto the page, Though as you can see, I have put in a setting where the page can be seen normally on a mobile device, the page functions like an e-book, scroll down, but as it very long, I have added a "back to top" button which does what it is called, goes all the way back to the top.

Evaluation of my Adobe XD app

 

The aim for this was to, create an app using Adobe XD, The app can be on a theme of my choice, being from either Education, Art, Commerce or Community. For my work, I have chosen Community as I have more knowledge when it came to that. 

The final App that I have created using Adobe XD is essentially a community / Magazine reader app, The app has a Login/Sign Up page, with the community chat room for those who want to talk about movies. The site also has a magazine page which shows past magazine(s) I have created, the current magazine on that page is from one of my last project.

 

 I think the design of the app is reflective of myself, my personal tastes when it comes to colors/ design, keeping with a purple (or similar colors) color scheme with simple buttons that function properly and a not too over the top design with all clean pages.

Did I make a plan for this? When planning my adobe XD app, I have looked at previous work that I have done (magazine, poster, website), to give me a basic idea on what I wanted to do for the app. I decided to then use one of my previous ideas, a magazine + forum website I did, "Studio AMR".

 

These are images of the magazine + forum website that I have created in the past

  

 

I've used these as a base for my final app design. firstly I thought of the color scheme that would go very well with my style, which are below here 

App UI background colors:

I chose these colors specifically as I think they are more easy on the eyes and also they fit with my current style that I have been using with past work aswell. 

when planning these are the bullet points that were to be done when making the website:

•  Create a sliding transition effect when going to different pages
•  UI elements to be primarily using gradient color effects. 
• A chat room page with "messages" 
• Chat room message button that when pressed will open up the message box.
  
• Homepage incorporating a background from that "Studio AMR magazine" 
• A page dedicated to links to other pages (a menu page) 
• A magazine page that can be used to read full magazines created by me.
• A login page that redirects you to the chatroom when "logged in" 
• A basic but informative "about us" page. 
• Use Primarily purple and black for the app's UI elements. 
  

During the app creation though, I have slightly deviated from the plan, changing the chat room message button to an entirely different page when clicking on it, giving it the illusion that it popped up the chatroom message button but in reality its just a different part of the site, this is due to lack of "functioning" community page resources on the Adobe XD application. originally too, the buttons were also meant to be the same as the website elements, but to make it not too repetitive, I have added new colors for the buttons to make them "pop out" more, which you can see below here: 

 

 

 

 

 How did I create my products, of course starting off, I have used Adobe XD for the base, the primary application for creating this app. I have used many tools such as the text tool, shape tools, and also component tools to make my custom link boxes. I've used blur effects on one of the pages (the community page) when using the text box, and have used gradients all over the app to give it a style that, when seen would show that this is my app.

My research was only primary, looking at what I created in the past and using my ideas in the past to influence my final products, I chose this approach as I'd liked to have my app feel more unique, and as someone who already has a basic idea of what decent layouts an app could have, I used that knowledge to my advantage. Though if it counts as secondary, my only other research would be learning how to use the interface of adobe XD using the Microsoft Teams video calls which were recorded.

There was an initial problem, which was that some of the links went to the wrong page of the app, which prompted me to figure out why the pages were doing that, as they were selected on the correct page, I have overcome that issue by simply switching the pages and switching back to the correct which swiftly fixed the issue.

 

What went well? I think the whole process went pretty good considering the minimal amount of bug fixing (a singular issue) that was needed, creating the pages was quite easy and honestly fun, especially when finishing them and testing them out. what standard is it? I'd say for my type of style, its very good, but it is of course subjective, it communicates with my ideas.

what didn't go well, Adobe XD, like most adobe software is prone to crashing at times, there were times whilst I was working on my app where the app had suddenly crashed, though I have saved my work every 5 minutes, so there was minimal loss, still loss regardless and that wasn't that great on my mood. The only other issue was the links not functioning properly, taking me to the wrong pages, which was luckily fixed quickly by switching settings to something else and then back to the original. 

If, I were to repeat the process again, I would actually do proper research on apps, looking at what UI's they have, how their "chatroom" and "communities" work. I would look into a more simpler design too, incorporating more drawn icons instead of text icons. I would do all that for the sake of trying to make my app just a little bit better, even at the current (in my opinion) nice state its at.