Thursday, June 19, 2014

Statement of Intent CFE (draft)

STATEMENT OF INTENT (CFE)
Charissa ONG/ 12234137 / BIMD1105-1

Topic: Responsive Portfolio Website
Competition Chosen: AWWWARDS
Key Ideas
The key idea of this project is to create a responsive portfolio website which showcases my past work in an effective and memorable way; with it also being adaptable on all media devices.
About
This portfolio website would encompass the work that I have done while show casing my ability to code an effective website with practical and attractive layouts. This site would be able to be viewed on various platforms of media, as it will be responsive. It's layout would switch between desktop, tablet and mobile according to the devices' sizes the website is viewed from. It will also be coded in HTML5, therefore it will be compatible with most browsers.
Issues
1.      Portable devices like tablets and smart phones are commonly used to browse the internet. The different sizes of these devices would mean that the way users are viewing the media, are in different forms. How could information be arranged effectively within a smaller area compared to computer monitors?

2.      HTML5 is compatible with most browsers. Unlike Flash sites which are not viewable on certain devices, HTML5 websites are universal and could be viewed without plug-ins or extra downloads.

How it relates to multimedia
Websites are a form of multimedia where it requires the interaction between users and digital media. They achieve to communicate and transmit ideas, knowledge and information to a wide range of users worldwide.
Research Question
What is the importance of responsive and dynamic media? Do we live in a individualistic world where it strives to provide preferable, personal content to meet the needs of the unique, demanding public?

About the Project

Genre
Responsive Website
Form
Website
Audio/sonic pieces
Free or purchased sound effects and music will be used.
Skills needed
HTML5
JavaScript
CSS
Graphic Design
UX/UI Design
Available on
The website will be available on my own private domain at www.charissaongty.com

Browsers:
Chrome
Internet Explorer
Mozilla Firefox

Size:
Desktop : w: 1024
Tablet: w:768
Mobile: w:320
Time to Consume
2 minutes or less.


Number of pages: 5
- Home page
- My work (From beginning to later years, types of work)
- About
- Contact Me

Number of participants
1

Software:
Adobe Dreamweaver
Adobe Photoshop
Adobe Illustrator
Total Hours (40hrs)
Research:  4 Hrs
Sketch: 4Hrs
Graphic digitization: 10 Hrs
Coding: 13 Hrs
Refinement: 7 Hrs
Documentation: 2 Hrs
How it works
To initiate the website, users are to access the link. Minimal animations would occur as users scroll or mouse over the designated link/button.
Videos are played as default as part of certain backgrounds to give a little preview on how the work looks and behaves.
I would not input too much heavy coding and animations on the website, as it would lag and increase the loading time. It should be able to load within 5 seconds with regular speed internet connection.
Design style
I would be exploring my personal style. It would comprise a vintage, historical look like the first website I have ever done. Cheong Fatt Tze website at www.charissaongty.com.

Funding
·         Personal investments; as it would be available on my own domain at www.charissaongty.com


Target Audience: Young adults/Talent Seekers/Future Employers
Likely consumers
Ages: 18-40
Occupation: Head hunters and future employers.
Interests: New ideas, challenges, learning new things.
Media consumptions: News, Facebook and Twitter.
Lifestyles: Mundane, respectable and needs change.
Consumer behaviours:  Have short attention spans, have little or no knowledge of new media, interested to know new; upcoming events.
Their Experience with the “CFE project”
First, they would access the link to my portfolio via my Behance account or my namecard.
They would be able to view a showreel of my work via embedded video or click straight into my website.
The users are then free to explore my previous work in the links disguised as thumbnails.
If they are interested in contacting me, they could leave their contact with a short message on my website at the 'Contact Me' section.

How it relates to existing skills and knowledge
The existing knowledge that I currently possess would act as a foundation to what I would do for this project. So far, I have executed 3 HTML5 websites, (one being a HTML5 game) for assignment purposes. My knowledge of coding websites and graphic design are at average as well.

How it addresses new skills and learning
Since this would be an individual project, one of the new skills that I would acquire would be a further advancement on the understanding of HTML5 coding. I would also need to improve on the UX and interface designing for different platforms of media. With different sizes of media for my website to adapt, I would need to think and plan the layouts for each of them. Other than that, I would have a deeper learning on the behaviours of users. Questions would be asked; like what would make them excited to use it? How would they remember the experience?
 Graphical wise I would also like to explore and reinvent my own personal style which could signify my personality and interests.


Award Posters


The chosen awards was the AWWWARDS.
I chose to execute a responsive web design.


I started off my video presentation by explaining the user experience throughout the Poster, which was a plus point.

I separated the poster into two sections. The upper half's content was segregated to show vital information of the Awards I have chosen, and the bottom half was to explain the project I wish to create for this awards itself.

There are 66 Judges for this competition. They all have different backgrounds related to the industry; some more influential than others, some more experienced. I took a look at the Past Winners and how they succeeded into achieving responsive, attractive websites with smooth animations. Links to the sites are below:

Legwork Studio

UZIK


I managed the 40 hours of the suggested time to complete this project into four main tasks:
10 Hours: Research
5 Hours: Sketching
10 Hours: Graphics
25 Hours: Coding (Inclusive of troubleshooting and refinement)

Other than that, the poster is pretty much self explanatory. Regretably, I did not mention my future ambition during the presentation. The statement I put in my poster was just on an 'objective' kind of angle. I can't find the confidence to label myself as the future Creative CEO Executive Art Director of some large Interactive Media company. Somehow, I felt that the 'label' of my future ambition would not exist yet. At least not too soon. Who knows, I might create my own position.








Research for my chosen topic

1.  Responsive Website Design


Responsive web designs. Try pulling the screen smaller and larger with your mouse and you could see it take effect. It's basically responsive, it responses to the size of the screen. Be it mobile/desktop or whichever platform.

A)   Benchmarks

Which makes These sites rather amazing.

Junction Design
Link Here




Things I notice on this site besides its beautiful responsive grids, are:

- Quick loading times
- It has that really smooth transition when you scroll down
- Easy to navigate, tons of contrast so that you would know where the buttons are.
- There's optimum amount of information provided on the site.
- Or like how the fonts change color and react when you are that particular section of the website.




A screenshot of website --> mobile interface. It changes! WOW!

the cons are:
- few.
- it feels a little confusing to me at first with those random triangles being placed around as such.

Creative Knight
Link Here



Another screenshot of web to mobile transitions

Pros:
- Not confusing at all, super clear and clean
- I notice the images in the links actually scale a little bit in and out to give more life to the site.
-The intro animation helps.alot.
- I have a thing for full blurred images plastered onto websites as backgrounds.
- It has a pretty cool custom cross-haired cursor.

Cons:
The colors bore me.

Design a Watch
Link Here


Pros:
- CLEAN
- Easy to understand
- The animations of the tick buttons. It scrolls rather than just switch coordinates/frames.


CONS:
- When I switch between the web and mobile sizes, they actually change the section I was in! BAD!
- It looks kind of unfinished. But the animations saved them.

B)   Sources of inspiration:
- The need to have the ability to be diverse in coding to translate webs into different platforms.
- Various award winning websites

C) Anyone who could code and design a beautiful website with good User experience.