Statement of Intent

After consultation with Shahnim on Week 7 (26 June 2014) and I have refined the Statement of Intent.

I have add on more description in to Artstyle Reference and Competitor Research. Besides, I also built a site map and flowchart for this project.

Introduction

This project has given 40 hours on working for chosen potential competitions, festivals or exhibitions. 

Therefore, the chosen competition is Awwwards. This competition has discover, recognize and promote the talent and effort of the best website designer, developers and agencies. Awwwards is mostly judge on website’s artwork.  

From the previous skills and knowledge in building website, it gives opportunity for me to involve in this event. Through this event, this project that helps on self educated, to improve on current skills and quality of works. This is part of my own life principle. As a participant in Awwwards, it helps me to improve on my skills as same as the industry level. At the same time, get recognition in my artwork by worldwide.

Portfolio audit direction

In the future, my ambitious of becoming a website designer has lead my portfolio audit to showcase 5 websites with different set of skills. There will be only three best selected website which are Munchi, The Familiar Taste and Coffee Lover Club Malaysia to showcase in this website. A table below has listed down the selected website and its skills.

Selected Websites	Skills
Munchi	Interactive Hypercomic Website
The Familiar Taste	Dynamic Website
Coffee Lover Club Malaysia	Parallex & Responsive Website
Design PortFolio	CSS Website
Dream Thief	Interactive Narrative Website

Project Scope

The main idea of this project is to build up a digital portfolio, through this website to approach the same standard in the industry to raise up the quality of graphics and programming language. Besides, this project helps to get recognition from worldwide, it is convenience for users to access my projects in a digital form and this website will provide up to date personal information and artwork. Other than that, this website is to promote personal skills and ability by showcase some of the portfolio that I have done and some of the principles that helps me in my life and works. By that, digital portfolio is more persuasive for applying job in the industry.

Aim & Objective

The aim for this project is to showcase a digital personal portfolio in a website form with the same standard in the industry. Through this website, user may get recognize me and appreciate the recent artwork that I have done. This website includes my personal ambitious which lead me to become a website designer in the future.  This website will showcase three of the website with different set of skills personal principles that has support me in my life and works and personal information. With this digital portfolio, it helpful in providing inspiration for other web designer and website agency who able to access my work and information. Other that, this project has focus more onto the user interface and user experience to engage the target audience, inspire them by looking to this website.

Genre

This digital personal portfolio will be in a genre of simple and engagement website.

Form

This is a parallax website in a horizontal way where user may scroll to left or right on one page to another for more information. This is HTML5 based website, some of the programming scripts will be use in this website such as CSS, Javascript and Jquery to build up the features, animations and transitions. However, most of the elements will be animated in CSS script to provide better user interface and experience. Other than that, this website is a desktop format that user may surf for any type of browser such as Firefox, Internet Explorer, Google Chrome, Opera and Safari by just key in the given url link.

Size

This website will be in a standard size of website with resolution of 1024 x 768.

Target User

This website basically target into general audience. To be more specific, there are two main target audiences. First, to target on the audience who are interest in my artwork, searching for inspiration and sources. For second, it is targeted on industry agency who seeking for website designer. 

Skills & Knowledge

Software that I will be using:

1. Adobe Dreamweaver : To build up the overall website

2. Adobe Illustrator : To create interface design.

This project will be require some of the basic skills and knowledge of website programming language which includes HTML 5, Javascript, CSS, and JQuery. With previous skills and knowledge, it helps me on the basic understanding of programming scripts, however, through this website it gives an opportunity to strengthen my programming skills, able to be more understanding the principles of user interface and user experience.

Time Usage

Estimate there will be around 5 to 15 minutes on this website. Each of the portfolio that user may takes around 5 minutes to have an overview on the projects. Besides, it is also depends on user who may stay longer time to receive more information and details.

End Use

This is a parallex website to convince of showcasing my personal portfolio. To access through this website, user might just to key in the given url link. This website has running with HTML 5 with more feature on using CSS script for animating elements. In the first page, there is a landing page for introducing and welcoming the user. Second to the third page will be showcasing selected portfolio. Fourth will be the personal principles and a personal data in the final page.  (Please refer to the wireframe in page 11)

Key Features and Content

Below I will list down all the content in this website and the key features by using the table, please refer to the wireframe to get a clear vision.

Panel	Content	Key feature
Home page	This is a welcome page for the user and a basic introduction about myself. This page will contain the brief of what user may achieve in the website.	This panel is very important that giving the first impression in this website for the user. Therefore, elements, background and the typography will be design in elegance and more professional looking.
Menu bar	A menu bar will be position in the bottom of every page. This menu bar is useful and convenience for user to search through the page they want.	This menu bar will design in one bar with some CSS effect. When mouse over it will focus on the text area while other will be in blur.
Works	This page is to gather all the portfolio work. It will be arrange in tidy and organize. It’s easy to access and get further information.	By mouse over the chosen project. It will display a guide for user by clicking it to view more details of the project. After user click inside the project, pop up screen will display. User able to view further information for that project by scrolling up and down.
Principles	There will be three set of principles that helping me in my life and work. First principle is focus and analyse. I will always do with my own strength and interest therefore I move faster. I always try my own best to anayse what is the greatest approach for the user. Second principle is plan and keep track. I never be last minute as I will listed down very single process to my goal. I will keep track on my progress and pushing myself forward and the most important is I will never ever late submission. The final principle is design and developed. I am very organize and building things in tidy and structure. I will never give up to achieve the best result. I learn from other professional reference.	This is very simple webpage that just introduce my own principle in work and life. There will be some of the design element as a metaphor in the principles.
About Me	This panel I will be list down my background information and my contact details.	In this page, I will be drawing a illustration working table. Some simple animation will be used in this panel.

Design Language

This website is follow the trend of current modern classic website interface. The website interface will be design in minimalistic and flat. Elements will be design in a neat and simple approach. To be more attractive in this website, shapes will be use such as diagonal, circle and square. Colors in grey, white and black to form a conservative content and clear information. The overall personal portfolio will be giving the mood of majestic, elegance and professional for user. 

Art Style Reference

KISS by Fiona Bennett

KISS is an online fashion store that sells winter clothes. Therefore this website has a cool design by Fiona Bennett who has cultivating an approach to couture hat design emphasized by skill, daring and more than a dash of luxury. The website has design in a very elegance and professional look. By viewing the interface in this design, it gives the feeling and mood of simple, clean and neat. From this website, it inspire of what I want to design in this project.

Competitor Research

Otsuka Tomoya Design Portfolio

Otsuka Tomoya portfolio has won the best design in Awwwards. This website has very cool design and CSS animation. This website has inspired me on using simple CSS animation code that could create a very simple and majestic personal portfolio. The overall website is very convincing and attractive for the user. It has nice transition effects and engaging content.

Blacknegative by Dilshan Arukatti, Sylvain Tran

Blacknegative is a project of promoting the company and what their offer for the clients. This website has won the site of the month in Awwwards. From this website, I have inspired the overall UI and UX. Some of the mouse navigation and design elements have a stronger influence in my digital portfolio such as parallex in horizontal, menu at the bottom, the transition effects and the overall mood. This website is attractive and professional looking, it is successful of promoting the skills that they have for the clients.

Wireframe

Flow Chart

Site Map

Time Management

This project has given 40 hours to execute on. I will be distribute the time into three stage which are Pre-production, Production and Post-Production. A table below listed down the time distribution and some of the key points for the task in each section.

Stages	Tasks
Pre-Production (10 Hours)	-       Technical Research -       Content managing in UI & UX -       Sketches
Production (20 Hours)	-       Digitizing user interface and elements -       Executing in programming codes -       Troubleshooting and refinement
Post-Production (10 Hours)	-       Alpha Testing -       Analyse from Alpha Test -       Trouble shooting from Alpha Test -       Beta Testing -       Analyse from Beta Test -       Final Refinement

Risks and Solutions

Some of the risks and solutions that I have listed below:

·Time management, exceed time given and unable to complete on time.

Solution: Distribute times into three stages which is pre-production, production and post-production, to build a Gantt chart to keep tracking working progress

· Technical problem, unable to achieve the outcome and get confuse on programming language
Solution: Seek for lecturer or tutor who are able to help.

References

Amazingcentral.com (n.d.). Cool Design Concept for KISS by Fiona Bennett. [Online] Available at: http://amazingcentral.com/cool-design-concept-for-kiss-by-fiona-bennett/ [Accessed 1 Jul. 2014].

Blacknegative.com (n.d.). blacknegative. [Online] Available at: http://blacknegative.com/#!/whoweare/ [Accessed 1 Jul. 2014].

Otsukatomoya.com (2014). Otsuka Tomoya || Design Portfolio. [Online] Available at: http://otsukatomoya.com/ [Accessed 1 Jul. 2014].