Testing on Adobe Muse and Adobe Edge Animation

Total Time usage: 3 hours

After creating all the basic graphic then i plan how the animation will be animated then export the graphic base on the animation timeline.

This import the graphic to Adobe Muse

Adjust the stage into 700px width and 700px height

The start to animate the graphic.

Before publishing the file, i did some setting at publish setting and publish as oam files. Finally publish into a specify location.

After that i import the files into Adobe Muse and this is the result.

Digitalize and testing the animation.

Total Time Usage: 5hours

After finish sketch the element and layout i start digitizing the sketch and form out the layout. And below are some of my progress while digitalize.

First i start with tracing the sketch i done .

By using the free source and color template that i get from http://www.museresources.com/

By using the color picker to apply then color then slowly add in tone, shadow and layers.

I started digitalize at roughly 4 pm, and finished at roughly 9pm.

Working Progress (skeches for design)

Total Time Usage: 2 hours

I start to design and sketch the interface base on the references.

And this is my first sketches for my homepage. But after analysis on it. It is too similar with the graphic and i cannot really find the thing the identify me in this sketch beside the logo.

first sketch ( around 30 minutes to finish)

Then i continue my sketches. And i do had a discussion with another tutor, Kelvin about my project. He gave me some advice like put in my identity then i question myself what is my strength, and i notice is website design. And is hard to apply this element to my portfolio design. Then he advise me that if i can make it identified myself try make user friendly and interest so can attract user attention. 

Then i continue my sketches i try use some of my artstyle i used for all my design project so is in a way to link to me and my project and design so i continue to sketches.

homepage

skillset

portfolio

about me

contact

I create the interface fun round shape. I trying to create a interesting kind of circle layout to give viewer and unexpected kind of website to attract their attention and curiosity so they will enjoy viewing the site. Due to is it the artstyle that i am familiar with i am able to finish sketch in a really fast time. The whole sketches just took me roughly 2 hours to finished. in between i do some rest and idea storming.

Parallax scrolling tutorial.

I had decided to create a parallax scrolling website similar to my website. Although i am able to code the website easily with jquery, css and dreamweaver but the time the spend in coding may over the time limit that are giving by the project requirement with is 40 hours of working time. Beside that i need to make the website able to access on desktop, tablet and mobile devices.

So i start to research on what are the other way to code faster or tutorial of shortcut tutorial to help me speed up the time. And this had remind me of Adobe Muse, a software that able to create simple parallax scrolling website or simple layout website. So i do some research on the tutorial of Adobe Muse.

The video above is a tutorial on what can muse do.

Then i found this youtuber that is specialist in adobe muse tutorial. Most of the tutorial are straight to the point which able to let save more time of going to unnecessary discussion .

Beside that in the tutorial it also share some of the free sources like grid layout and color template for the viewer. 

But after giving some test and understand on muse, i scare that it may use quite amount of time if the animation i want will need to create of step and measurement for the design. Luckily, Adobe CC have release the latest version, the Adobe CC 2014. The application are more flexible and user friendly. Now it allowed muse to communicate with adobe edge animation. So i am able to use adobe edge animation to create the animation i want then bring over to muse to create the website which allow me to save even more time.

Adobe Edge is very similar to Adobe Effect and Abobe Flash but user are able to export the animation into html format and the coding will export into detail folder for future editing. It allow user to code in this software which come in very handy for user.

base on this two tutorial i am able to create the effect i want and save me more time for design.

References

References

Museresources.com, (2014). MUSE RESOURCES™ | Home. [online] Available at: http://www.museresources.com/ [Accessed 6 Aug. 2014].

YouTube, (2014). Adobe Muse Scroll Effect Edge Animate. [online] Available at: https://www.youtube.com/watch?v=75tPMsI0d8k [Accessed 6 Aug. 2014].

YouTube, (2014). How To Get Started with Adobe Muse - 10 Things Beginners Want to Know How To Do. [online] Available at: https://www.youtube.com/watch?v=8eDuupJ9Uus [Accessed 6 Aug. 2014].

YouTube, (2014). Joseph Angelo Todaro. [online] Available at: http://www.youtube.com/channel/UCzL1KzojWsxrEDBfo7-4StA [Accessed 6 Aug. 2014].

YouTube, (2014). Muse tutorial: Integrating Adobe Edge Animate graphics | lynda.com. [online] Available at: https://www.youtube.com/watch?v=fps_oeMmywA [Accessed 6 Aug. 2014].

How to create a website portfolio

After submitting SOI, i decided to create my project base on CSS awards competition. And my topic is to focus on portfolio design.

I did some research on what is the latest trend or layout and somebody call it format to create a website interface.

Base on Smashmagazine.com ( a famous website for art case study sharing ) article, it require ten steps to create a perfect portfolio website.

1. Logo
2. Tagline
3. Portfolio
4. Services 
5. About me
6. Contact 
7. Blog
8. Call to Action
9. Use social media network
10. Language and Communication

After going to through research i follow some of the requirement and allocate the information into my website. I will designing my logo, choosing my best portfolio, create a short introduction about me and my skill. I will also sharing my social network for people to contact me.

For more info please visit:

http://www.smashingmagazine.com/2009/02/26/10-steps-to-the-perfect-portfolio-website/

Beside that base on the article of What Creative Directors are really looking for in an online portfolio.

Identity is very important.

First impressions count and your website is the very first thing you're going to be judged on. How you present your work (i.e. the design and user experience of your website) is as important as the work itself, if not more.

In the article it noted that "Creative directors are no different than anyone else online. They want a clean, uncluttered and easy-to-navigate user experience, too."

Questions to ask as you build your website:

• Is it mobile-responsive?

• Does it have a user-friendly curating system?

• Is your name and/or logo clearly visible in the top header?

• Do you have (well-taken) photos or renderings of your work?

• Are you making the most out of your real estate to show off big images?

• Can visitors easily share your work on social media?

2. Your Design Ability

Put your most impressive work in your portfolio and are relevant to what you want to be and what you are good in. Work that you feel represents your design ability and depth of thinking. 

Here are two key things to keep in mind:Grid system and Typography. These are some key points on designing a nice user interface for the portfolio website.

3. Your Concept

No matter how extraordinary your design work is, if it’s not put into context by an overarching concept or strategy then it will fall flat.

This article help me understand more about what i am able to consider while creating a portfolio site. And the Question that are listed on top help me to check while i am designing the website. Grid and typographic are able to arrange the informations and grab viewer attention. 

http://www.aiga.org/inspiration/what-creative-directors-really-want-design-portfolio-tips/

References

AIGA | the professional association for design, (2014). What Creative Directors are Really Looking For in an Online Portfolio. [online] Available at: http://www.aiga.org/inspiration/what-creative-directors-really-want-design-portfolio-tips/ [Accessed 6 Aug. 2014].

Munroe, L. (2009). 10 Steps To The Perfect Portfolio Website - Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2009/02/26/10-steps-to-the-perfect-portfolio-website/ [Accessed 6 Aug. 2014].