The Conclusion

The Experience

First of all, I would like to mention that the production of the info-web has taught me a lot of new things. I had enjoyed the exploration of the software and using it for the development of the project. The new design softwares brings forth many pros and cons and it definitely presents a whole new learning curve to create websites. However, all of that is all worth learning at the end. I wish to further develop my web skills and explore more on the use of the software.


The Pros & Cons

Of course there were the ups and downs while developing this website. On the technical part, it was the use of codes within the software, Edge Animate. I viewed Edge Animate as a mix of of different Adobe softwares like Adobe Flash, After Effects and Dreamweaver. Because of the amount of features in the software, it presented me with a whole different learning curve when trying to learn a certain design workflow such as Responsive Design. Apart from that, it was the version of the software that deems more incompatibility issues. Project files created with the newer versions of the software are incompatible with older versions.


The SWOT

Strength -


I can say that my primary strength in the development of this web is designing the illustrations and the mockup designs. I rely a lot of my illustrative designs to make the website more interesting. In the end, my info-web only presents more aesthetic value.

Weakness -

 My weakness is coding. Not that I am uncomfortable with coding but rather it presents to me as a challenge to learn softwares. I find codes difficult to learn and understand since the language can be so extensive in different softwares. It took me a while to learn them, but it sacrifices my production time. Finally, my final weakness has always been time management, since the web could have been so much better if more time was spent in producing the info-web.

Opportunity -

I have gained a lot of new knowledge in producing websites. Particularly on the use of interactivity in the website and the smooth navigation (parallax scrolling) feature. This would definitely help me as a Multimedia Designer in the future. It also further developed my interest in web design.

Threats -

During the course of the production, I am confronted my other works and assignment since I am still studying and juggling different subjects. Aside from that, I find the incompatibility of the software a threat since the environment does not permit me to work fluidly between different computers and workspaces.

Presentation Day

Last Wednesday, I had presented my infographic web (thanks to Mr. Muzamir for correcting me) to my lecturer and the whole class. For the presentation I've prepared my slides and the info-web to present. I demonstrated the navigation and the interactivity to him for all of the pages I've included.

After that, feedbacks were given. Based on his comments, my interactivity works fine, although more could be implemented such as the drag & drop function on one of the interactive questions. Furthermore, he commented on the small details of interactivity such as mouse-over events since some of the clickable elements on the info-web didn't properly notify the user. This could be seen on question 2, whereby the clickable cassette image only has mouseover event that changes the cursor.

In conclusion, my design and illustrations skills are good. The only element that lacks within this info-web is the interactivity to keep users entertained. I acknowledge the results and have taken it into consideration. Below is a documentation of my presentation slides.

Interaction

I had followed basic interactive tutorials for Edge on Adobe TV. I had to revise back my old Edge exercises. This time, I tried to learn drag an drop feature, adding audio/songs and revised my interactivity using the timeline. By now, I have pages with functional interactivity, especially for question 2, where I learned about audio interaction.

Currently, I am working on the drag and drop feature for this question. The struggle is to combine 2 functions, drag and dropping an object, whilst activating an song.

Basic Layout

I've added the basic navigation for the web. It is a small button that points down to scroll to the next question or page. For the project file, I've been given a template file from Mr. Muzamir that allows me to use responsive anchor point scrolling. The feature is available in websites such as "www.cyclemon.com".

I have layed out the simple elements for every page. From there, I will try and develop more on the animation and interactivity. More to come.

Software compatibilities

I have recently installed Adobe Edge Animate version 3.0 (trial), the reason is that the previous version does not promote any helpful features such as the ability to design responsively. I find it important to have the feature because I feel it gives me a better depth at designing more fluidly.

The difference in the workspace in version 3.0 is the extra Centre Stage and Responsive Scaling option on the left side. Will be looking more into designing the web-game soon.

Illustration Updates

Besides researching on technical stuff and designs, I've also made some illustration for 2 pages of the web-game. I'm trying to go for a retro-cartoon-ish type of illustrations, it took me a while to draw them out because I was being very particular about each detail of colour and the lines.

Cupcakes

Radio & Cassette

Revising the Edge

I took the time off from researching designs and concepts and looked more into the software that I am planning to use for this project, which is Adobe Edge Animate. I didn't look at video tutorials, rather, I used the lessons that the software offers. So far, I have a clear overview of the basics such as animation and designing in Edge.

The next step for me to have a grasp is responsive design and using anchor points in Edge.

http://poppyspend.britishlegion.org.uk/

www.cyclemon.com

A feature that I would like to include in my web-game is using anchor points. The two websites images above both use parallax scrolling with the added feature of using anchor points. By clicking the image displayed on the page, it scrolls down page by page.

I have done a simple exercise on Edge about anchor points. I discovered a tutorial on Youtube, the spoken language was in Thai though so that was a bit hard to fully grasp of what I'm trying to learn. As long as I have a gist of it. When I click on button 2 on the 'navbar' above, it scrolls down to the red line, which is the labeled anchor point for button 2.

Will look more into Edge.