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.

Hipster Designs

I have been researching design elements that can be implemented into my web-game-site. This is to identify the different styles that can be easily be recognize by the users. The elements that I will be looking at is typography and visual art trends.

Typography

The images above were taken from Google Images. From my observation, hipster designs are heavily influence by retro and minimalist designs. The typography in this style ranges from Slab Serifs, Sans Serifs and Script fonts. Usually, a hipster typography art combines all fonts in 1 piece as seen in the pictures above.

Visual Art

Based on these 3 illustrations, hipster designs are accompanied by a particular psychedelic colour palette, floral patterns and geometrical shapes (triangles). The art also depicts either hipster characters or animals, mostly owls, deers, wolves and tigers. I would say these art styles bring influences from Bohemian art and a bit of retro-age illustrations.

Hipsterism in Media

A lot of these hipster design trends can be seen in today's medium such as websites, branding and many more.

Hipster branding

Hipster web design 1

Hipster web design 2

Tutorial Feedback #2

It's been a really long time since my last update. Based on my previous feedback, I have been given the permission to proceed with creating wireframes for the web game. Firstly, I need to look at visual references to aid me in designing the overall concept and layout. I will need to look at various hipster & hippie visuals designs, typography and etc. More to come!

Storyboard

Tutorial Feedback #1

I had my first feedback on my project yesterday, it was not much but at least I have a clear idea on where I am heading at on this project. I had briefly told my lecturer about the content and discussed on the technical flow of the questionnaire part in the interactive web game.

I have mentioned a few areas within my project to be improved on. Those of which are:

• Storyline
• Varied interactivity for each questions.

Content Research

Regarding to my last post, I chose to go with the "Hipster vs Hippies" idea but first, I have to do a bit of research on the content itself. Firstly, I need to know the general information of what Hipsters and Hippies are of course and how it all connects in a Malaysian context (if it is possible).

Let's go back way into 1940s America...

Hipster (1940s) 
From what I have gathered around the internet, a Hipster is generally a fan or aficionados of the jazz music genre. It is a person who adopts the lifestyle of jazz musician. They embrace a lifestyle of drugs, music, fashion and even sexual revolutions. In a nutshell, they like to apply themselves away from mainstream culture and politics and keep up with the alternative trend.

Their cause, is to be cool.

Hippies
The 1960s Hippies is a subculture which spawned during the height of the Vietnam War. The common population of this subculture, in particular, includes teenagers to adults and so on. Like the 1940s Hipster, the Hippie also embraces a common lifestyle. However, the lifestyle began in response to the violence of the Vietnam War and sustainable resources. Hippies protest against violence and war by promoting "peace and love" through music, art, social orthodoxy and liberal freedom.

In general, I like to think of them as artistic rebels.

Hipster (contemporary)
To put it simply, they are the modern incarnation of the older Hip-subcultures. They both have the same goal in life, to non-conform in mainstream society. In spite of their true goals, they all approach differently. The modern hipster emphasizes their non-conformity through musical, artistic, dietary and fashion trends in their lifestyle... without admitting so. It is all about the irony. E.g. buying unlabeled clothing to be a part of the people who supports unlabeled clothing, though without admitting so.

They do not rebel for a higher cause.

---

Similarities

• They all rebel
• Adopt a different lifestyle
• Liberal thinking
• Counterculture

Differences

• Lifestyle goals
• Taste in music, fashion and art

---

Sources:

http://www.divinecaroline.com/life-etc/culture-causes/hipster-countercultures-through-decades

http://en.wikipedia.org/wiki/Hipster_(1940s_subculture)

http://en.wikipedia.org/wiki/Hippies

http://soulpancake.com/conversations/view/76491/whats-the-difference-between-a-hippie-and-a-hipster.html

http://thoughtcatalog.com/kelsey-clark/2013/10/comparing-hipsters-with-hippies-are-they-the-same-thing/

Idea Presentation

Last Monday, I have presented my idea to the whole class. Feedback was good and I am set to proceed. These are my presentation slides.

Idea Proposal

Based on my previous idea generation and consultation. I have decided to proceed with Idea #1 ("Hipsters vs Hippies). As mentioned by my lecturer, he thought that it would be a good project to work on since the opportunity to do more research on the project is vast and I would agree on that too.

In order to create this project, there are a few objectives that needs to be stated. My objectives are;

• To introduce current fashion trends of Malaysians
• To understand between the two similar fashion trends
• To challenge the public of their knowledge of current local trends
• To create a fun and new interactive way of learning a new culture

The main story of the project is to focus on the misuse of the term "hipster" and "hippie" in a Malaysian context. Which is why I propose to create an interactive web-game that challenges people of our hip culture.

The main research key points would be to research about the current young generation fashion. Be it, their taste of design, music, food and many more.

Reality, Augmented

It is the 4th week of the semester already and newer software, like Metaio Creator. Metaio Creator is an Augmented Reality software. From what I have experienced, Augmented Reality or AR is where users get to experience more content based on what they see or scan with their smartphones. It generates various types of multimedia content such as 3D models, videos, images or sound based on what the users scan.

Metaio Creator, is available on the computer and on Android and iOS phones. For today's tutorial, we were given a demonstration by Mr. Muzamir on the software. We learned how to project simple 3D models on a simple "marker" or basically an image that can be used to scan to project the 3D model.

Below are the steps to creating an Image Tracking project:

Metaio Creator's canvas

Adding a Marker

Adding a projection element

The result. Excuse my horrible face.

Another 3D model example.

Overall, it is a very fun software to learn although we learned the basic stuff. There are more content to explore and learn on this software. Hopefully this software could prove useful for my future projects!

Adobe Muse

In the last few days, Mr. Muzamir has introduced to us Adobe Muse - A rather fitting software name for my lecturer. Essentially Muse allows programmers and designers alike to create a website, again, without all the complexity of coding. It is like a blend of Dreamweaver and Illustrator.

We did a short exercise on creating a simple "site". Below are some of the screenshots that I took.

creating a site

planning page

adding pages within a site

adding layout elements to a page

introduction to parallax scroling on Muse

I like the simplicity of designing a website in Muse. It feels much easier and modern compared to other Website-coding softwares. However, I think Dreamweaver allows so much more control rather than Edge or Muse. In the end, it all depends on how users like to code or design their website.