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.
