Unit 62 Interactive Media Authoring

Interactive Media Authoring

Brief

Challenge

In this unit you will design and code a website to be used as a portfolio which will showcase your own work. You will build it using an HTML code editor. You will aim to make the website fully responsive so that it works effectively on mobile devices i.e. smart phones or tablets and desktop browsers alike. You should approach this challenge using a mobile first methodology so that your site looks and works effectively on mobiles and desktop machines. Don't forget to check that the site works in old browsers also as this will increase your audience. All pages should validate correctly according to w3 standards for HTML5.

Research

Authoring

Definition

The definition of authoring is the process of composing an application of which users can have access to and are able to use it effectively. 

Authoring Tools

Interactive media have a massive variety of tools which can be used to produce media in multiple formats. Mediator, Dreamweaver and flash are good examples of how it can be created. These softwares create different products.

Mediator is a software that creates a series of pages that are interactive in which they can be linked by a few buttons that can be released in a few ways such as a CD-rom, flash document or a website.

Dreamweaver creates a websites in which it is accessed through a web browser on any computer which has access to it.

Flash can be used to create an animation which can be watched on any computer with the proper softwares installed.

Photoshop is an effective tool to use in Interactive Media Authoring, you are able to create images, banners and buttons which you could include into your website. Appearance is an important aspect to think about as you want it to attract people to stay on your product, if it were to look bland your product wouldn't be very effective.

Planning

Planning in Interactive Media Authoring is key. In the planning stage this is where you begin to think about how you want your product to be and what features it will contain. Decisions in the planning stage are what will affect the final products purpose. A way to begin planning is to create a moodboard which contains a series of images and media you like and would possibly include into your product. 

Design

Designing is practically another form of planning. You are creating a prototype using paper or a digital program. Creating a prototype with paper is effective because I will be creating a website which would consist my portfolio. If I create a paper prototype I could create paper buttons which I could create imaginary buttons so that if I were to press with the mouse it will change page. Doing this method of designing I am able to plan what buttons connect to which page and to create an effective website its got to be flawless in how you access different parts of your website. I want it to be easy access so creating a paper prototype and creating a template similar to that prototype with possible changes for more easy access.

Development

Development is the part of which you will take your prototype whether it is a paper prototype or a digital prototype and begin to work on it following the designs you created in the prototype to gather materials to create what you designed in your prototypes.

Production

Production is the final stage of development and the creation of your designs.

Application

Uses

From where it can be used to read the information if I am to do a website portfolio its uses would be from a computer or mobile, as the brief has directions to make a website suitable for both.

Marketing

Marketing is important because if you want people to notice your website, which mine is a portfolio which I do want people to take notice it would be a good idea to get advertisement from the leading most visited programs such as Youtube, Netflix, Xbox Dashboard, Facebook etc. 

Assessment

To put your product on a www.blogger.com is an easy accessible site for many viewers to see your blog as well as your website in my case website portfolio via phone or website on blogger as well as my portfolio as I will have coded to be able to suit both webpage and mobile phone. 

Format

Web

The world wide web is a major place for a place to gain information nowadays.

Handheld Devices

Mobile phones are pretty much used by everyone. It practically holds someones life in such a tiny device, it can hold facebook, youtube etc it has access to the web and everything. 

Assets

Sound

Sound in authoring can be effective if you were to have music or a video (That contains sound) in your website but in my case portfolio.

Text

Text is a major aspect to have within a website no matter how you use your website it will contain some sort of text a person is able to read whether it is only 5 words or 1,000 it is still text and is important to have.

Video

A video consists of a sequence of images that are in motion. Having this in a website can be effective to say what text can not do. Such as raw emotion or for people who aren't a big fan of reading and have more enjoyment from videos.

Vector Graphic

This is a geometric formula to represent images or an image in a composition of dots.

Animations

Animations are similar to videos but they are created images instead of ones captured by a video recorder.

Images

A still image that is used to show something in my portfolio whether it will be an image of my final outcome or showing my workings to that outcome.

Websites

I like this website because its navigation bar works very effectively. It goes very smoothly and there is no difficulty navigating through the website. The transitions work very well.

The way everything is set out to be able to go through the website without a flinch.

I like how this navigation bar is set out having it split off by their logo in the middle. As before the navigation is easy to navigate through and works without a doubt. The colour design and the layout of the website is very well done and I can see everything out pretty well.

I found this website closer to the style of what my website would like to be like. It has everything that I want within it. It has a hamburger and the menu on the right side to change to another part of the website.

Once the hamburger is clicked on this is what shows up. I would definitely want to include this into my website because its so easy flowing that it makes the website that much more successful and the transition from the main website to the menu section is very well done and I would suggest this for my website 100%.

Here is the 3rd bit of the website and I found that it also transitions very well because you can see which bit of the website you are on via the dots on the right. This would also be as effective as the hamburger if I were to make it the website menu bar instead of having the hamburger. Either way it would be very effective.

Proposal

Project introduction

I plan to create a website which will contain my portfolio using HTML, CSS and JavaScript in a software program called brackets. There will be a few issues that I will encounter during the process of making the website, as there are so many codes that are required to make a successful website. A successful website should be easy flowing and have very easy access to all the content given in the website.

Constraints of the project

The constraints of this project to create a portfolio is to make the website easy access for mobile phones as well as the website.
It also has to be fully responsive.

Context of the project

Throughout the internet there have been plenty of solutions for design problems, not only the internet can help with design problems through CSS but also books that help with CSS.

Initial Ideas for the project

My initial idea will contain....

Deliverables

Typography
Colour Scheme
Process
Materials

Targets and Milestones

I am to have a template of what I could possibly use for my website

Evaluation Methods

Portfolios

My Photoshop Beginning to Creating My Website

This is my photoshop design of my website I wanted to go for a landscape styled website because I thought it would be quite interesting to see who it would pan out. I found that my menu bar on the left side is very easy to follow because of its layout, its laid out so that its menu will always be on the left side and you won't need to scroll around the screen because the menu on the right side will be scrollable.

 To make that each of menu bars clickable I had to use the slice tool and to then edit so that it'll be when clicked it'll change to another page of mine. They all lead to a different place and fortunately actually change to the next page once clicked.

My about me page is a basic outline of where everything will be positioned. The boxes will contain information about me and maybe, just maybe include images of me.

This is my portfolio it will contain a scrollable series of images of my work and once clicked it'll be enlarged to the right side.

My Second Website

Home Page

Here is my home page for my website, it contains a youtube video which people can watch through the coding I have produced in the screenshots underneath. The sidebars will contain information and the website is fairly responsive.

The highlighted section in this piece of coding is the coding for the youtube video at the bottom of the page. The bar above on the website containing home, about, portfolio and contact also are responsive and when resized suit the need of the page. The CSS in this gave me the option to be able to add colour with interaction.

CSS Coding

The css coding is what makes my website how it looks. It controls the looks and styles of the writing and the colours of all. 

In majority of these codes it contains boarders around the text and the navigation bar and how it changes colour when highlighted.

About Me Page

My about me page is a basic outline of my index page but doesn't contain the youtube video in there.

The code is taken from the index page, there is little to no difference.

Portfolio Page

My portfolio page is a page of a few images of my work. It worked to a good extent but unfortunately it isn't 100% affective because for some reason the far right side isn't like the middle and left side and has a gap underneath.

When clicking on the image it grows and goes into its own window style. Unfortunately I was having an issue with the code to make the close an x but instead its A- and it won't be so easy to know that it is the closing button.

The portfolio contains so much coding because of how much content there is within the portfolio, I had to copy and paste the coding to make the image multiple times to create a gallery feel.  It also contains the style within the html.

Contact Page

My contact is a basic outline like about and home page but with different content which contain the how to contact. Unfortunately I haven't coded it to work fully but I have looked into it and will most likely be able to apply it.

Comparing Photoshop to Html

Photoshop and HTML

Photoshop is one of the ways that you could make a website from, I found that using photoshop to design my website I found it much more easier to be able to design it as I am able to place everything exactly where I want. It is possible in HTML but much more difficult to place. I found that it was much more easier to change pages as there wasn't any coding for it what so ever.
With HTML I was able to make the pages responsive where as with the photoshop file I wasn't able to find a single way to make it responsive and the main point is to make it a responsive website. I found multiple guides to make different sections of my HTML website and the more and more I coded, I started to go more fluently. I tried avoiding the coding side but I honestly felt more proud that I was able to code a responsive website with a lot of working mechanics.

I went through a lot of issues in both photoshop and HTML, I wasn't able to sort out a fair few bits of my HTML code to sort certain situations because I wasn't able to figure out where I went wrong but it isn't very drastic to not be a successful website. The issue with Photoshop wasn't the design aspect but how to make it all work, I was able to make buttons work but to a basic form and it wouldn't work in a flowing way.

I believe my HTML website was a success because I may not have a 100% ascetic but it works to a proper standard of a website. I was even able to include a lot of my own work and match it with the responsiveness using coding.

My photoshop was a success in the design aspect because I was fairly happy with how it looked and would like to get more skills in HTML to be able to make the website as I planned in photoshop. If there was a way to be able to code the photoshop file so that it would be responsive this project would have been more of a success but I am still happy with my first website as have never made a website from scratch before and being able to learn the skills to be able to create a website using HTML and CSS, it combines well with my wanting to become a games designer as it consists with a bit of coding.

Unit 45 Graphic Image Making

Graphic Image Making

Challenge

The aim of this assignment is to produce an A3 poster information graphic and a 30 second animated information graphic. Both information graphics should be based upon the same theme, and inspired from an area of personal interest. To create your information graphics you will use a variety of graphic design and animation techniques. You will initially research the work of other designers’ information graphics. Then you will need to deiced on a theme for your information graphic, and research in greater depth the theme by gather data and statistics. You will develop a range of possible design outcomes for you information graphic and refine the most promising concept; finally you will produce an interesting and visually engaging information graphics

What is a Infographic? 

An infographic is information graphically produced to represent information. You are able to make complex and difficult information into information that is explained with ease through little text and a few images. Creating information in such a form is easily memorable and work effectively towards a certain target audience. They are also fun and are a quick way to learn about a subject without a whole load of reading. It is an effective tool for education and to inform. Information on a spread sheet full of data can be easily created into a one page informational graphic that is far more appealing to read and look at instead of looking at black and white letters.

Infographic Posters

Unfortunately I am unable to understand what is within this poster but I thought it was effective and visually pleasing and caught my attention. It has quite a simplistic form and works well with such little detail within it. This poster contains an easily readable 8 point list, you are able to see there are 8 parts of information in the poster. The poster contains a few images with look like it has to do with online shopping, even though I don't understand the writing I am able to gather the information through simple imagery. 

This poster caught my attention because of my personal interests. I like this poster because not only does it have quite a few bright coloured imagery but its dark aspect also works well because it projects the colour out into your face so its visually appealing. I like how it is set out with a bit of information on the left and some more added information on the right. It is set out to be easily read and has a major ease to see.

This poster is effective because of its simplistic form, it doesn't have too much colour or information blasting in your face and it still tells you all the information you need to know. The small amount of colour used goes well with one another, the orange and blue distinctively separated to different parts of information. 

This poster isn't very effective because it doesn't have much information to produce, it has plenty of imagery which looks nice but no information to tell you what its about. I found this poster after I typed DC/Marvel infographic poster and I thought it would be good to add this poster in even though its not very effective to giving out information and it would be advisable to avoid into going into this direction of creating an infographic poster.

This infographic I believe is to sort out possible plot lines for some sort of story. I find it quite hard to read and hard to understand with the lines overlapping one another. I do like this infographic because of the colours they have used within it, they're bright and can easily be seen.

This poster is very effective with its simple colours and its simple info guide to how to focus, which is easily seen through its title but also by what the text is telling you. Its information on how to keep focused. The images they have used to demonstrate on how to keep focused is effective because of its simplicity. They have such little detail and contain so much information in them.

Infographic Animation

This animation is a very well made infographic, it gives information in a basic form using both text and imagery but not so much of the text is used, information also can be given through audio. Like a poster they are created in quite a basic form, using simple shapes and simple colours, but even with such simplicity it works very well to give the information needed. This animation is to get people to give money to a charity showing you through the animation of its different causes such as a girl walking 10 miles for water instead of going to school or child/animal abuse.

This animation is to show you addictions not just drug addictions but how addiction generally works and how wrong people are to how an addiction is caused by showing you through a video which are giving the guide lines, it uses quite bright colours and doesn't stay along the side of natural colours for humans or objects they use a variety of pop art styled colours which work effectively with the infographic.

That is life is a well made infographic animation and was interesting to watch. With what content is included it definitely grabbed my attention, it had as the others bright colours and interesting shaped objects with its simple style which I find most intriguing. It has quite little text but still gives a lot of information about life, its evolution etc. even with such little text it gives a fair load amount of information through purely vision.

Are you alone? (In The Universe) is an infographic animation about you and how you were once a part of evolution and such. The animation as the ones before are fairly basic and as before work so well, they pull your attention in a numerous amount of ways. With the simplistic and basic colour forms work well to make its easy to register the information, it doesn't fill the information up with details.

The big bang infographic animation is very well made, I learned a few things through it by even watching for 5 minutes of it. It tells you about the universe and each planet. It taught me how cold the planets actually are which I never knew. Through that little time I learned more about science in space than I did before and it was so basic and eye catching, I found very interesting and enjoyed watching which is the goal of infographics. Infographics are supposed to be easy, fun and interesting with its designs. I found this a very effective animation.

Graphic Designers

Saul Bass

I have looked into Saul Bass graphic design previously and thought it would be very effective in the sort of designer section. I have discovered that most infographics are particularly in the bounds of a Saul Bass style, in which I find works very effective just to show simple vision of information such as in the poster before is obviously about a tornado which has a film based on it. Even with such a simple style it works so well to get the point across just like infographics should do.

I feel this graphic designer will have a fairly major impact onto my work as I will stick with a simple style like such and the have simple colours within my work.

Milton Glaser

I find this artists work fairly interesting not only because of the silhouette they created but with the colours they have used to create it. It has a lot of white space and still produces a well made graphic art. The work is very simple and I hope to get a major influence from such styles as I hope to follow in the simple forms like this and Saul Bass. 

Jessica Walsh

This artists work uses mainly text to express the graphic design, I like the typography this artist has used. Obviously text must have a message within such as this says Talk Less, Say More. What I get from this is that silence can be a major way to say more, whether it is you are mad and you simply do not talk it says so much such as that you are obviously not in the mood to talk. This quote is based on physical emotion rather than sounds emotion. I like style of text on the canvas its not simply alined it looks interesting on a human canvas striking a pose.

Proposal

Project introduction

For this project I have chosen to use batman as my main point of info-graphic it will consist of different facts about batman and his life such as his villains, age, weaponry, vehicles etc. The characters will be made into a minimalistic style because I like how it looks in a basic form and it still shows a vass amount.

Influences (Personal Research)

I have a book about DC Comic heroes and I feel it is more of a reliable source compared to the internet because it is actually by the makers. The book contains all the vital information I need such as information on all of his villains and also everything to do with batman and his comrades.

Constraints of the project

My only constraint is that I can only base my facts around batman and his villains not about many other DC characters.

Context of the project

I have a limited area to cover, if I were to do all of DC I believe it would be way to much for this project.

Initial Ideas for the project

My initial idea is to have Batman in his full form and having character heads of his villains and comrades. I will have a box of information about them but not as much detail as how much I will have put for batman as it is batman I am mainly targeting. Having a few images of each of the characters and weaponry/vehicles and a slight bit of information will make it look like an info-graphic and with certain features shown they will also be able to see how it relates to batman. Green and purple would be joker all over if you are in the comic realm.

Deliverables

The typography I will use would consist of quite a dark horror fill to it and in my title screen it has to be eye catching, like I am trying to sell the game demo I want people to appeal to the game and it will consist of a mystery style to it because noone in the story besides a few know who batman really is having the mystery behind the man, I would like to keep it quite a surprise. 

The colour scheme will have to be quite dark because of the style of the character himself and his surroundings in gotham also give a dark vibe to the character, Having bright colours would probably make him parrotman instead of batman which is a dark creature that ventures in the night.

Targets and Milestones (Weekly Targets, Beginning to the end)

Investigate Brief

Week 1, Find a few bits of information and create a mindmap/moodboard about batman to get an easier understanding of who and what I am researching. Getting its colours and some plots of information I can look into more will help

Develop Ideas

Week 1, I have created a quick plan of how I will promote my info graphic, having spotting different information in each corner to make it more easier to understand rather than having it everywhere. The animation will consist of a bit of movement from batman while the background changes and the information slowly begins to fade out and in.

MindMap

My mindmap consists of a few images and a bit of information I can look into more and gather a lot more info for my info graphic and animation.

Moodboard

Graphics for my Info Graphic

I had created a design of how my batman would look in my info-graphic. I created him using illustrator he is made in a minimalistic way but its got enough detail to point out that it is batman.

Proposal For My Second Idea

Project introduction

I will create a A3 poster and a 30 second animation about the TV series Spartacus. Throughout the series you follow the story of the main guy being Spartacus, Spartacus is a Thracian that is taken by the romans into slavery along side his wife. In the series you meet his allies Agron, Crixus, Gannicus, Oenomaus along side people who have also been condemned into slavery. Not only do you meet his allies you also meet his enemies Glaber, Juilius Caesar, Crassas and many other romans that have slaves. Spartacus wants freedom from slavery but also wants revenge for his wives death due to the romans condemning them both into slavery.

Influences (Personal Research)

I haven't got much research to do because I will have based it off of a series I have watched well over 6 times to gather my information from the story I have seen. I have compared it to a bit of information I found on the wiki to back up my points but mainly the facts are already known because of my fascination of the series which I decided I would watch multiple times

Constraints of the project

A3 poster and a 30 second animation is my only constraint. There isn't enough room to consider having all the characters in the story to have in my info-graphic.

Context of the project

Don't include to much information of the other characters and build around a 30 second animation window.

Initial Ideas for the project

Like before I will come up with a minimalistic design for a few characters and have them posted on a poster, I will post not information on the characters but the life of them all intertwined into one story.

Deliverables

I will go with a Greek style because of the time era that Spartacus is based in. The colours are based around sandy times and so it will consists of Roman typography and a style.

Targets and Milestones (Weekly Targets, Beginning to the end)

Investigate Brief

Use the information I know to prepare what to include into my poster and create a few minimalistic characters I feel would be a main part of the poster.

Mindmap

My Graphics

My animation contain each of these graphics below, how I will animate them is that they will expand into a box on the screen and have information appear next to them. There are all within the animation at all times but at certain points for around 5 seconds they will grow in size to show the viewer who I am talking about in the info-graphic.

Julius Caesar

Marcus Crassus

Crixus

Glaber

Gannicus

Spartacus

Agron

Final Poster

Final Animation

Unfortunately, the video I had used to youtube was quite buggy so I included 2 videos that contain my animation but with a different view for some reason but I believe it was still very successful in the long run.