Unit 62- Interactive Media authoring

Unfortunately, in this unit I would have to do more coding, but on the plus side, I managed to complete the basic exercise for creating a basic webpage with gif images inserted. Other people in my class were going along and completing it with little to no problems, which made me want some help with it eventually.

Screen Shot 2015-12-09 at 11.25.24
My first webpage

I did have some struggle with inserting the images using coding. I didn’t really care about how the webpage looked. I wanted to make sure I got my task completed.

Screen Shot 2016-01-13 at 09.28.57
Made some changes

Next challenge that I had to do in workshop was to make a semantic webpage. Down below shows the coding  that I managed to get from a helpful website to get started, but I would have to find a way to split it into two columns.

Screen Shot 2016-01-13 at 09.48.28
Coding and current layout

This task was important for me to be able change the layout of my web portfolio. Before I could put anything in there, I needed to learn the basics of css formatting. From time to time, I would check, save and open the file in safari browser to see the preview of my layout.


Screen Shot 2016-01-14 at 10.14.34
added source coding in css

For the majority of the time I spent on this task, I’ve always been adding my coding in html format by mistake and eventually my Tutor noticed this and told me that this should have been put in css format instead. I honestly felt like an idiot for not knowing this. At least, it managed to fix my problems with editing colour and layout (to an extent).

Screen Shot 2016-01-14 at 10.15.29
change of layout

Originally, the layout was blank, void of colour. Editing the page was bought more colour to my page.

Screen Shot 2016-01-14 at 11.27.17
managed to make it two columns (it’s messy though)

Even if the colour issue is fixed, I had some problems with sorting out the two column layout that I wanted.

Screen Shot 2016-01-14 at 11.42.22
my website template

My webpage

My Tutor wanted us to make a website for our portfolio that is compatible with your mobile, but at the same time looks good on your desktop screen too. For this to happen I need to look at Interactive Media Authoring, since our website needs to be interactive too. My Tutor showed me a blank webpage template that could be my starting point for my webpage, but I would need to think about what my layout will be, what my logo will look like, what I will put on there to promote. We also had to take a look at the purpose of this to begin with as it’s common to find around us.

What is Interactive Media Authoring?


the process of interactive media authoring

This is when you use graphic imagery, typography, audio, animation and other available elements in your project for providing interaction (for people viewing your project). Sorry, I’m not too detailed or specific. This is the perfect reason for me use this opportunity to make my online portfolio and submit my own artwork on there. Many people use this tool to promote their own products or ideas, which is what I want to go for. I may end up using a few of these elements.

Different formats

Websites- One of the most common formats used for containing and spreading information. A lot of businesses use this for promotion and recognition. It’s a lot easier to be noticed online than offline today.

CD/DVD Roms- These disks can contain video games, which do require interactivity. We control the main character in a video game in order for there to be progression.

Interactive TV- I have come across touch-screen monitors in our local Family health clinic. We were required to put in information by selecting options we saw on the screen.

Mobile apps- When you download an app, you able to load and interact and what you’re able to do depends on the app itself. You can an app for any website so that it’s easier and quicker to interact on.

Kiosk- This is a tool can doesn’t necessarily need to use internet or it can. When you make a game on Unity, you’ll be able to open it in web browsers and placing them on sites will give them exposure to other people.

How can I use these elements?

I only have a webpage template at the moment. I can edit it later in the future (and I’ll have to do so anyway). I want to take a look at how I can make my webpage more appealing for people to notice. I want it to stand out if I want to promote my work. I want to make sure that I’m able to include as much of these elements as I can. There are useful tools such as Photoshop, Dreamweaver and Flash to create websites.

Audio- I could add in some playlists that can play as the viewer is browsing the webpage. I have seen other people with their own Tumblr or webpage put in playlist of their favourite music. It seems like a good way of keeping them occupied. I can still add some sound effects on there for the sake of experimentation.

Animation- This element reminds me of my last year’s work where I did some flash animation. I have seen animated loading screens for some websites I’ve been on as a kid. There are different ways I can come around this.

Images- As I have previously said, I will place my own artwork from Deviant Art onto here. I could even put more recent sketches and paintings on there.

Typography- I could design a logo to go on my webpage. I would need to make it suitable for what I’m promoting.

Examples of Products/websites that use this

The one site a lot of us know

I’m definitely sure that most of us know about Tumblr, hell, I have seen some talented artists make art blogs or porn blogs on there. This site is useful on desktop and mobile devices. You able to put in your own playlists of music you like. You can scroll and click on images to preview them and play videos if you have submitted any. There’s also an app for Tumblr to put on your iphone. You have the ability to interact, there’s the option to put in audio which some members of Tumblr have included and the content can still fit onto the screen whether you’re on the desktop, laptop or your mobile.

Screen Shot 2016-01-28 at 14.40.50
Good old youtube

We all use youtube from time to time. I love going on this site to watch videos and listen to music. You can easily select videos by their thumbnails to begin with. I can change the size of the screen for the video. You can edit the quality of the video, depending on what’s on the settings. You can clearly interact, trigger audio and people can submit animations onto their channels too.

Design Layout sketches

These were a few sketches that I made after spending a bit too much time on researching afterwards. I have wanted to try and change the layout as well as finding ways to present my future works on my web portfolio.

FullSizeRender (1)
Similar to the web template

I wanted to design a page where I actually have a logo for my portfolio. This page would have a lot more information than images. I haven’t thought about where I could display the content and how I lay it out.

FullSizeRender copy
Thinking of displaying the artwork?

I messed around again and just focused on making the page where you can look through artwork images (made by me of course).

Paragraphed introduction idea

I eventually got into sketching this so that you can scroll up and down when looking at content in my webpage.

FullSizeRender (3)
scrolling through for artwork




Project Introduction

-My task is to create a website made in HTML that’s responsive to mobile devices as well as desktop devices.

Brief outline the proposed project including the design problem to be


Brief summary of your plan for the project

-I want to create a web-portfolio for promoting my artwork. I will need to research techniques and looking at how other people have done good or bad so that I can look at how my webpage can be improved and appeal to people that may possibly want commissions in the future. I would want to sketch out ideas of how I want each page to look and change the designs little by little. I can soon experiment with the designs on my website to see if the design works. It would be good to take screenshots along the way too. I would need to show other people the webpage for useful feedback.

Constraints of the project

-This is a website that will be used to showcase my own work. I need to make sure that my work is still all on the screen when I minimise it. It needs to work for mobile devices as well since people nowadays use the internet on their smartphones as well.

-I have currently made a web template that can change size.

Context of the project

Who has already created a solution to this design problem?

What professional outcomes are there to inspire your project

What other projects or contextual references are out there in

the world

Screen Shot 2016-01-27 at 11.39.38
A useless website indeed

-This is a website that takes you to useless websites. I like that this is able to fit the content (though there isn’t much of it) when minimised, but the websites it led me to don’t do the same unfortunately.

Initial Ideas for the project

What ideas do you have at the beginning of the project to address the

design problem?

  • I want to create a good layout for my Art portfolio. If I want people to be impressed, I would need to find some good coding for css and html that can give me the layout that I would want and change if I don’t find it appealing or if other people don’t find it appealing themselves. I would focus on first on designing the layouts of my webpage on A4 size sketches.


Specify a list of objects or tasks you will do to complete the


i.e. what typography, colour scheme, process, materials,

techniques, provide paper/wireframe/working prototype etc.

Targets and Milestones

List the targets and major milestones towards completion of

the project i.e. (the example below is not limited to 3 targets. Don’t

forget to list these targets in Pro Portal also!)

Investigate brief

  • Complete research and workshop exercises.
  • Start designing and creating thumbnail sketches.
  • Update my website template based on my designs.

Generate ideas

  • Using html and css coding insert and  display one or a few of my artwork.
  • Experiment with different designs and features.
  • Create different pages for the webpage.

Develop ideas

  • Look through some of my old artwork and make new artwork.
  • Tweak my design from time to time.
  • Develop content beyond the prototype sketches.

Produce outcome

  • Show webpage to other people for feedback.
  • How to present my content to viewers.
  • Update and create more pages.

Evaluate Outcome/ Prototype or Solution to problem

  • Upload content on new pages.
  • Use Lightbox coding and files for Art Gallery layout.
  • Insert Images with Lightbox.

Evaluation Methods

How are you going to evaluate the success of the project. Are you

going to conduct a usability or playtest with your target group, use Google

analytics, use YouTube, use questionnaires upload to forums, showcase on

art or design websites etc.

How are you going to collect the data? Use graphs, infographics,

written evaluations, video evaluations or a mixture of all of these.

  • Our Tutor will probably take a look on it online when it’s finished. There’s a chance that we would need peer assessment as well.


My portfolio progress

Screen Shot 2016-02-18 at 08.51.00
Making a change

I wanted to get a start on my webpage and insert some images of my own work and to do that, I decided to try a test with displaying an image of my older piece of artwork.

Screen Shot 2016-02-18 at 09.50.47
Problem solved

My Tutor got a look at the problem with the image that I made he got a good look at the coding and noticed that I put in a repeat for two pictures and because I didn’t put in the correct coding. After he fixed it by deleting extra bits of coding that weren’t needed. The good news is that I can see my picture on the page now and the extra image is gone.

Screen Shot 2016-02-18 at 13.40.35
Test background

I noticed how plain my page looked (to me). I wanted to try and put in a background and change the font colour contrast with the background. I had a bit of trouble finding the coding I needed for html for, but instead, I managed to find coding for css. It didn’t come out how I wanted it to come out.

Screen Shot 2016-02-18 at 15.39.52
mistakes were made

I wanted to adjust the settings for my background. I ended up losing my colours in the process and tweaking just didn’t help.

Screen Shot 2016-02-18 at 15.47.29
fixed it

After changing it back to normal, I had some feedback from my Tutor and created changes based around it. I actually like the improvement it had made. My webpage looks more presentable and organised in comparison.

Screen Shot 2016-02-25 at 10.18.32
Changed it from feedback


I’ve moved on to other pages to work and finish on. I’m satisfied with my homepage at the moment. The theme is simplistic, but I like the contrast it gives out.

Screen Shot 2016-03-02 at 09.26.49
an error

I tried making a new page for my website, regarding info about me. It’s pretty bland to look at in comparison to my index page. At this point I keep getting confused about basic coding. I took a look in Dreamweaver to check the problem and I realised that in the design section I typed the text when I should have done it in the coding section. I mentally face palmed after  knowing the mistake I made.

Screen Shot 2016-03-02 at 09.35.28
Fixed it

I’m happy that I managed to fix this issue but then I would need to design a new layout. I was a little bummed out about that.

Screen Shot 2016-03-02 at 11.41.42
About me

I wanted to write a rough paragraph about myself and my interest in Art. All this focused on was my passion for Art.

Screen Shot 2016-03-02 at 12.08.36
Art Gallery page

I continued with my Art page when I was satisfied with my other page.

Screen Shot 2016-03-03 at 11.58.16
found out about…

Once my Tutor had a look, he questioned how people can view the images in full view, since you couldn’t do that at the time on my Art Gallery page. He showed me a file, html and css code where I can have a feature to interact and view my images on the page.

Screen Shot 2016-03-03 at 11.50.37
…a light-box function

Since, I understood the function I wanted to add more images.

Screen Shot 2016-03-10 at 14.02.25
Added more content

This was pretty simple to do as I had a coding for putting in an image before.

Screen Shot 2016-03-10 at 14.05.52
Rewritten paragraph

Before publishing the website, I wanted to quickly rewrite the paragraph on the ‘about me’ section of my website. I was well-aware of the structure that I wanted, but I wanted to word it properly.


My Tutor had told me how consistent my website is and responsive to when you change the window size. I’m glad that I managed to get the basic functions working. However, I have been told about the lack of contact details on my page that would be useful for clients contacting me to know who I am and get in touch too. I have had alignment issues and everyone in class noticed that too, along with the disorganised Art Gallery on my website. Some of my classmates had suggested that I could organise my traditional and digital art in two columns. It would definitely be helpful, but unfortunately, I rushed to get the website as soon as I could that I missed out on plenty of important details. I also need to sort out the size of the font used on each page.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s