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
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:
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.
· 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].
No comments:
Post a Comment