Interactive Communication Design: Site Map





index. html – welcome page with photo of me and links to contact me.

work.html – this will be the page where each subject on a computer screen.

blog.html – this page will link to my blog


Interactive Communication Design: Final Design



This was my final design and i had gone with the navigation being in the top header along with the logo.

  • Logo – The logo which i will be creating is for my own personal branding in the subject visual communications and i thought it would be great since im branding myself as this, it would be only sensible to implement this into my portfolio website.
  • Navigation – This will be a simple navigation bar where you click on the options and it will drag you to that page. Simple and not complicated.
  • Computer and the subjects – I really like this idea that’s why its actually in my portfolio website because it describes that i use computers etc. So i created a desktop like situation where the computer will be showing what subjects i do where the user will be able to access this by just clicking on it.
  • Keyboard – the keyboard is just there for show .

Site Map to follow

Interactive Communication Design: Design 2




On my second design i thought i would try and copy the scrolling effect which i really like but thought to myself this is high end stuff and even some top web developers can’t even do this. The scrolling effect is when, you launch a site the first page is basically on long page cut into different sections. so when you click lets say ‘Sport’ it will scroll down to that section on the same page and show the content on their. I think its a really good idea for a portfolio because you can have the subjects as the first page and each section a different subject. The only negative thing about this is that if i get to year 3 the page will get longer and longer and the content will get bigger and bigger and this full website will grow in the number of megabytes that are held, which means it will take even longer to load up the age on a basic connection which is not good for the user.

Final Design to Follow

Interactive Communications Design: Design 1



On my first design i like the idea of having my navigation bard attached to my header so that the use instantly thinks that it will be at the top of the page, which it will be. on this design i was only testing the navigation but i like the look of it on the top, then all i was left to do is create a logo that what show me off and then have the navigation style as like that with each button being separated off by a dark L shape. But remember this was only a idea and i had plenty more to come.

More Designs to follow

Flash Website: Content


In this post i will take a look at how i present my work after clicking on that category and how the layout will be .

Screen Shot 2013-01-03 at 06.40.48

This has a simple layout centering in the middle. This short but sweet contents page is exactly the same to my own portfolio website, which has the context of the subject took of the brief description on the new media timeline. Then their is an evaluation that is a couple of paragraphs long saying how i felt before and after this assignment and stuff i learnt whilst on this assignment.

Also this will stay the same for every subject but their is also either a picture or link on the side that will link you to the evidence that shows i have done this work. For example on this page if you click on the flash application picture it will link you to my blog because the evidence is already here, its the Flash Website. But if you go on my actual portfolio website and click on the picture it will lead you to this and the detail etc will be on the blog.

Evaluation of the Full Assignment to Follow

Flash Website: Category Page


Here is my Category page that will be under work in the navigation bar but this will show all the category’s that i will be doing in year one and only because i don’t really need to put semester 2 in or year 2 or 3 because i haven’t go their yet so i would of been doing that for nothing and can do it later if need be. Once you click on a a link it will take you to a page that will be the framework for each link and will have various detail and evaluation but ill get to this on the next page when i talk about content.

Here is a picture of the Category page:


Screen Shot 2013-01-03 at 06.28.29

As you can tell its actually what i wanted from my first design, meaning it has a a computer with each category on. The only negative thing which i think i have done about this page is that i didn’t  have enough time to do interactive keyboard that when you click a letter in comes up on the screen but i thought this would be hard to do and also it will consist of a lot of time and i didn’t really see how would this work on the computer.

More to Follow

Flash Website: Front Page


After a couple of days i have finally created the front page that will from the framework for the full flash website. Here is a picture of the front page:

Screen Shot 2013-01-03 at 05.51.12

As you can see from the picture above its very different from the design i posted but that’s because this is the front page and that was more of just a framework.  Their is a picture to make sure this is my website and that is verified by the text on the left saying that this is the portfolio of Ross Barnett.

  • The Picture – I thought to myself how can i make this flash website more flashy and what i mean by this is how can i get some flash elements that i learnt from the lessons we did in class and this is how i did it.  So i implemented the rotation to it so whenever anyone clicks on my photo it will rotate and keep rotating every time you click on it, which i thought it doesn’t really mean anything but more interaction between the user and the flash page.

Screen Shot 2013-01-03 at 05.58.05

  • Traveling Text – I though it would also be a good idea to have text traveling across the bottom of this front page just to add another flash element and something we haven’t done in class, so something i have learnt to do.  The text consists of hello wrapped in a div from html, so the users see’s this and if they have the knowledge they recognise that the text is from html and they are a web designer.

More to Follow