1)
Introduction
This
project is to create an artifact to participate or showcase in a competition, a
festival or an event. In this project, the times that are given are 40 hours.
I
had chosen CSS Design Award as a competition to participate. It is a
competition mainly for website’s design. It is a international competition and
they are judging base consisting of Creativity and Design, Code and
Functionality, and Usability and Content.
The
programming language of the project show that abilities to develop a website
for the competition. Joining the competition allow me to discover, recognize my
talent and skills and the industry standard for improvement.
C/F/E types
|
CSS Design Awards (Competition)
|
Title
|
Website of Personal Portfolio
|
Category
|
Interactive Website
|
Documentation
|
|
Project Name
|
Kho Giin Yaw’s Portfolio
|
Personal Principle
Passionate
To become a flexible and creative digital interface
and user experience designer. Understand the latest trends and technology to
design a better interface and provide better user experience to the viewer.
Life Principle
Motivation is one the key principles that will help
achieve my goal. It comes naturally when I do what I love. I believe that I am
a person that had strong reasonability and independent skill. I am responsible
for my work and I am Independent enough to finish my work perfectly myself.
Content
Topic /
Concept
The key idea of this
project is to promote and present a personal art and design portfolio. The
website will create base on understand of digital interface and the important
of user experience to create an artistic user friendly website. The artifact is
a creative visual animated website that will be create with CSS animation to
provides user extra visual communication to highlight the information rather
than just a simple static website.
Aim and
Objective
The aim of my project
to shows case my personal skillsets and art sense to achieve the industry level
at the same promote my personal skills and portfolio.
The main objective of this project is to create creative interface
portfolio website to provide user and comfortable user experience while
exploring my skillsets, project and profiles.
Genre
Personal Homepage
This project is embedded in engagement, fun, and
entertaining methods. The Interaction and the parallax scrolling animation
are for promoting and entertaining purposes, a creative design that
capture viewers' attention.
Related to
IMD
Website design requires understanding of the
processes and methods involved in designing, creating, User Interface and
Experience.
Key Features/
Benefits
Parallax
scrolling
Parallax design achieves that successfully with its scrolling
mischief, powerful imagery, and strong and creative typography.
Short
presentation videos
The six seconds videos are more likely to go viral, they’re
easy to make and everybody seems to love them. In the last few years, we’ve
seen a constant shortening of videos and this upcoming year will promote under
30 second clips to get the point across.
Fixed
Navigation
When dealing with a content heavy website, then a
fixed position sidebar or top menu will be the logical approach.
Perfectly
view in different browser
Smartphones and tablets are huge marketing potential, we need
plan ahead for mobile sites and responsive website is the solution to it .
Form of
Artifact
Form
Equipment
The portfolio will design in responsive website
format. Any digital platform with internet connection like mobile devices and
computer are able to function the website by key in the URL address.
Browser
Any internet browser.
Google Chrome, Safari, Internet Explorer.
How long user will spend on visiting this installation?
Estimated 10 to 20 minutes each visit.
Content
Pages
One pages Parallax
Scrolling website with 5 different section.
Section One
A large Design with logo
display
Section Two
Show Reel of all personal
projects.
Detail:
3 minutes animation of my
previous project. While scroll till this section the video will play
automatically.
Section Three
Skill Sets
Detail:
My skill’s level of
design software skill and programming language.
Section Four
All Projects
-BIMD Projects
-Freelance Projects
Detail:
Thumbnails of my selected
project. When hover will show the name and when click it will pop out the
information of the project.
Section Five
About me
Detail:
My Personalities, Passion
and Principle
Section Six
Contact
Detail:
Email Address and social networking
Art References
Wire Frame
Animation
Narration
The portfolio is use to showcase my skillset. As an
Interactive media designer I am able to apply my personal art style to design
the website to match out with my project and create impression for viewer so
when they see of the portfolio website the will think of me. And with parallax
scrolling I am able to animate the line to form out the shape and from the 2d
line art style I am able to transform it to 2.5D line art. The graphic inside
the web that are form from the shape and line will the guide to the information
at the same time they are forming some of my interest, hobby and even my
principle of life and more. By creating this portfolio, it is able to showcase
not only my skillset and project but also myself.
Software
Adobe Illustrator
Adobe Photoshop
Adobe Dreamweaver
Adobe Muse
Adobe After Effect
The construction of the interactive portfolio
website will require a knowledge of website programming language that includes
HTML, CSS, Java Script, and JQuery scripting. I am interested and confident in
these areas and have experience working with it. So I believe that I had the abilities
to solve the technical problems. These website animation will be design in css
animation which is one my stronger skill; I believe that will help me achieve
my goal.
To create the design I will use the design software
that I am comfortable and capable with which are Illustrator and Photoshop.
These two software are able to help create and measure the design, grid and
layout of the website.
After Effect will use the edit my personal
portfolio show reel. A creative show reel are able give the viewers some teaser
of my interesting portfolio.
Art styles
·
Line Graphic
·
Symbol
·
Flat design
·
Clean Layout
·
Simple animation (parallax scrolling)
·
3 point perspective graphic.
·
2.5 D
Working
Timeline = Total 72 hours
Documentation
and Research Hours 32 hours
Subject
|
Hours
|
Art style, Color scheme and Font types
|
2
|
Portfolio Concept and Idea
|
2
|
Transition for parallax scrolling
|
2
|
Coding
|
4
|
Website content
·
Best 5 project
·
Logo
·
Description and Contact
|
5
|
Documentation
|
18
|
Working and
Production hours
Subject
|
Hours
|
Design Stage
Sketch
Digitalize
Color
Exporting and organize graphic
|
Total 13
5
6
1.30
1
|
Programming Stage
Inserting Graphic
Transition setting/ Parallax programming
Styling
Debug
|
Total 15
1
8
4
2
|
User Test
Alpha Test
Beta Test
|
Total 6
3
3
|
Refinement
|
Total 6
|
Total
|
40
|
Masterpiece
Inspiration
Awards
CSSDA - WEBSITE OF THE DAY
CSSDA - WEBSITE OF THE MONTH (MAY)
This website was design to present a portfolio of
an agency. The website provide a creative user experience, combined with clean,
compact navigation and user interface. Creative animation will be trigger while
scrolling the website created by HTML5 and CSS animation. Website’s graphic
design will clean outline forming geometrical shape, while the line is being
animated, it guide the viewer’s view to the important information.
Competitor Research
Robby
Leonardi Portfolio Website
Leonardi
is multimedia designer. He create a parallax scrolling website to mainly
showcase his skillset and experience. Creative graphic and animation flow when
scrolling not only will guide the focus of viewer but it also creates a fun
experience. While scrolling to the page
the user is watching an animation or even like controlling a game and the user
is the mascot in the website.
http://peterwesolowski.co.uk/
Peter’s
Portfolio Website
This
website portfolio design and layout and basically very simple. But the content
that are allocated in the website are very well organize. After a quick glance
of the website user able to understand Peter and what he basically do. The
fixed navigation come in very handy while searching for information.
Risks
- Time management.
- Technical coding
- Finishing of the project not
as good
·
Understand the audience and
create nice interface
Target Audience
This website has two types
of target audiences. First, it is a useful and entertaining tool and sources of
inspiration for website designer or freelance designer. Second target audience
will be industry creative agency for sourcing talent.
By submitting my project to different competition I
am able to showcase my portfolio to larger scale of audience. User also connect
to my portfolio website with URL link on my name card or my social network
account. Most of my artwork that showcase in Behance also will have linkage to
my portfolio website.
Viewer
can experience a new way of website interface and experience and understand my
skill set and my capabilities in work. Besides that by viewing my portfolio
some of the user may get new influence of idea and design.
References
Behance.net,
(2014). [online] Available at: https://www.behance.net/gallery/6454675/All-Roads-Lead-to-Centraal-Station
[Accessed 25 Jun. 2014].
Behance.net,
(2014). [online] Available at:
https://www.behance.net/gallery/17094725/LONDON-Typeface-Illustration [Accessed
25 Jun. 2014].
Behance.net,
(2014). [online] Available at:
https://www.behance.net/gallery/14987129/Alphabet-Machines-Typography [Accessed
25 Jun. 2014].
Behance.net,
(2014). [online] Available at:
https://www.behance.net/gallery/17893835/Consulting-Icon-Set [Accessed 25 Jun.
2014].
Behance.net,
(2014). [online] Available at:
https://www.behance.net/gallery/11158717/Airbnb-Sonos-Hello-LA [Accessed 25
Jun. 2014].
Doru, B.
(2014). Top 10 web design trends for 2014. [online] Designer Blog.
Available at: http://99designs.com/designer-blog/2014/01/22/top-10-web-design-trends-for-2014/
[Accessed 25 Jun. 2014].
Huhman, H.
(2014). 5 Benefits Of Creating An Online Portfolio | CAREEREALISM.
[online] CAREEREALISM. Available at: http://www.careerealism.com/creating-online-portfolio/#!3J80d
[Accessed 25 Jun. 2014].
LETTERS, INC.,
(2014). LETTERS, INC.. [online] Available at:
http://letters-inc.jp/ [Accessed 25 Jun. 2014].
Peterwesolowski.co.uk,
(2014). Peter Wesolowski's portfolio. [online] Available at:
http://peterwesolowski.co.uk/ [Accessed 25 Jun. 2014].
Rleonardi.com,
(2014). Robby Leonardi | hey@rleonardi.com. [online] Available at:
http://www.rleonardi.com/interactive-resume/ [Accessed 25 Jun. 2014].
