Final Artefact

 (Landing page / Homepage)

 (Works Page/ Portfolio Page)

 (Works Page/ Portfolio Page - pop up screen to view details of the project)

 (Works Page/ Portfolio Page - pop up screen to view details of the project)

 (Principle Page)

 (About Page)

Please visit : http://melissakoh831.com/ for actual website

Best view in Google Chrome.

Technical progress

Time usage: 20 hours

The software that I using is Adobe Dreamweaver. This overall project is mostly focus on using pure CSS3 to build up all the transition and animation. Therefore, I able to use this opportunity to learn more on CSS3 code. 

Why use CSS3? 

As many browser in nowadays has implement part of CSS3 already.

Rocky Dev, 2012 mentioned in his article that , CSS3 are ease of usage, convenience and started to have more features. While CSS3 make the web page and its content load faster and accurate.Because CSS loads simultaneously with page loading as it is embedded in the web page, there wont be any additional time consumption.So all in all, CSS3 is a huge time saver and helps load web page faster.

Other reason is that for this project that has limited time for me to build my own portfolio website. CSS3 easy to learn and understand. It's very direct and because it's simple to understand therefore with this time limitation, I able to reach my achievement easily and rapid. 

The technical progress doesn't have face any big problems because I seek for the right tutorial that helps me on my understanding. 

First, I look for tutorial of doing parallax scrolling. In previous post, I have successful done my testing on using this tutorial. When click the specific menu button, it will auto scroll to specific page. For example, clicking the box 4 button it will scroll to page 4 content. 

Click here this link for view previous post: http://cfe-melissakmh.blogspot.com/2014/07/test-code.html 

However, I have apply all the test code in to actual code for my webpage. 

Therefore, I look for some of the tutorial on how to do fade in effect with CSS code.
I found this website has simple CSS code and fits in what I want.

I use this code apply in the fade in logo when user come in my webpage. 

Second tutorial I was looking for mouse over image with using pure CSS3 script. I found this website that has easy tutorial and I able to understand.

I apply this code in to the Works page with the mouse over effects.

I use my previous code to code for pop up window. But there is a minor problem that I have faced. I realize the pop up window does not  have scrolling feature. Therefore, it can be scroll but the scroll bar is too ugly for deliver my content. I look for some of the tutorial on customize scroll bar. 

I have make the scroll bar into invisible for less distraction and nice visual.

 For a minor animation in the About me page. I use this tutorial to make the smoke fade in and out.

Reference

Dev, R. (2012). What is CSS3? Why CSS3 is used? How to use CSS3?. [online] Theextremewebdesigns.com. Available at: http://www.theextremewebdesigns.com/blog/css3-what-is-css3-why-css3-is-used-how-to-use-css3/ [Accessed 31 Jul. 2014].

Technical tutorial reference

CodePen, (2014). CSS Image Hover Overlay. [online] Available at: http://codepen.io/ianfarb/pen/ikeAf [Accessed 31 Jul. 2014].

Jsfiddle, (2014). [online] Available at: http://jsfiddle.net/SO_AMK/VV2ek/ [Accessed 31 Jul. 2014].

Jsfiddle, (2014). [online] Available at: http://jsfiddle.net/FTLJA/261/ [Accessed 31 Jul. 2014].

Lou, M. (2011). Blur Menu with CSS3 Transitions | Codrops. [online] Tympanus.net. Available at: http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/ [Accessed 31 Jul. 2014].

Sharma, A. (2013). Customize Scrollbars using CSS3 - CodeProject. [online] Codeproject.com. Available at: http://www.codeproject.com/Tips/674478/Customize-Scrollbars-using-CSS [Accessed 31 Jul. 2014].

The Design Pixel, (2014). 20 Best jQuery Parallax Scrolling Tutorials. [online] Available at: http://thedesignpixel.com/best-jquery-parallax-scrolling-tutorials.html [Accessed 31 Jul. 2014].

Digitize Progress

This post is about my digitize progress and what asset I am using and what has inspire on my design element. 

Time usage: 10 hours

In the overall website design, I using one of the texture that I found in webtexture.net as my webpage background. I picking some of the colors from one of artstyle reference KISS by Fiona Bennett. This color palette has represent the feel of my overall webpage in elegance mood. Therefore, I also has listed down the typography that are going to use in my website. I will be using BonvenoCF-Light font more than others.

In the middle , there are two images that has inspire my landing page logo design. I use one of the hoefler pattern and the ornaments design border. I traced out the pattern that I want and the chosen ornaments design because it is not a free source unless I pay for it.

(Landing Page)

In the image, the top left image that shows my previous design of my landing page. In bottom left that showed, I actually tried a lot of how to design my homepage, this is one of the testing that I have done. After all the tried out, I finally got one. I inspire by the ornament design, I traced the border and apply my name inside. I like this design because it's very direct,  let user know they are landing on my portfolio webpage. The first impression that I gave them is letting the user know my name and what is in this website. I use the traced hoefler pattern applied in the background.

In "Work" page, I tried to gather all the portfolio files into one page rather than separate them into one by one. So that it is friendly user interaction and less distraction. First, I have created a simple minimalism border by my own. Then, I find out my project's thumbnail and make them fit into round shape. I also designed a mouse hover image so that when user click inside the project, pop up screen will be show and user may access the details into the project. I designed a coming soon border for my final year project.

Image above that shows what is the category in the pop up screen.

(Final Works Page)

(Principles Page)

In this page, my design elements is inspire by the key words that I have used. For 3 of the principles, I used up the metaphor of the key words . Archery was represent focus and accurate, Calender and time was represent keep track on time and dates while Construction cane that actually inspire by one of the image in Jake Rocheleau in hongkiat.com.

(About me page)

In this page, I draw out the illustration part. At first, I was thinking to put some mouse over effects in some of the design element such as phone = contact number, mail in the laptop screen = email address, pen barrel = skills set. Therefore, I change this idea into more direct way that user may access easily and less distraction. 

Working space in AI

Final Design of portfolio website

Assets References

Dunham, E. (2009). Free Font BonvenoCF by Barry Schwartz | Font Squirrel. [online] Fontsquirrel.com. Available at: http://www.fontsquirrel.com/fonts/BonvenoCF [Accessed 20 Jul. 2014].

Fontsforweb.com, (n.d.). Brush Script Std Medium webfont free download! Over 1000 FREE fonts more!. [online] Available at: http://fontsforweb.com/font/show/?id=11739 [Accessed 20 Jul. 2014].

Gascon J, B. (n.d.). Sticks Note Paper Stock Vector 181290407 : Shutterstock. [online] Shutterstock.com. Available at: http://www.shutterstock.com/pic.mhtml?id=181290407&src=id [Accessed 20 Jul. 2014].

Hoefler & Co, (n.d.). Hoefler Text Font Features: Arabesques & Patterns | Hoefler & Co.. [online] Available at: http://www.typography.com/fonts/hoefler-text/features/hoefler-text-arabesques-patterns [Accessed 20 Jul. 2014].

Hoefler & Co, (n.d.). Requiem Font Features: Ornaments | Hoefler & Co.. [online] Available at: http://www.typography.com/fonts/requiem/features/requiem-ornaments [Accessed 20 Jul. 2014].

Jetpack Workflow, (n.d.). Firm & Workflow Software for Accountants,CPA's. Jetpack Workflow. [online] Available at: http://jetpackworkflow.com/ [Accessed 20 Jul. 2014].

Rocheleau, J. (n.d.). Ultimate Guide to Flat Website Design. [online] Hongkiat.com. Available at: http://www.hongkiat.com/blog/flat-design-resources/ [Accessed 20 Jul. 2014].

Shutterstock.com, (2014). Flat Icon Of Aim Stock Vector 188538620 : Shutterstock. [online] Available at: http://www.shutterstock.com/pic-188538620/stock-vector-flat-icon-of-aim.html?src=yf75dkh/djjWTEM8U5b8DQ-1-29 [Accessed 20 Jul. 2014].

Shutterstock.com, (n.d.). Silhouette Construction Crane Tower Background. Vector Illustration - 116197510 : Shutterstock. [online] Available at: http://www.shutterstock.com/pic-116197510/stock-vector-silhouette-construction-crane-tower-background-vector-illustration.html?src=5rK8PZZs8JuDRY2CmQTczw-1-6 [Accessed 20 Jul. 2014].

web texture | Premium textures, patterns and backgrounds, (2014). 20 Seamless Paper Texture. [online] Available at: http://www.webtexture.net/textures/20-seamless-paper-texture/ [Accessed 20 Jul. 2014].

Sketches

The time has getting shorter, therefore, I have a quick sketch on how the overall my portfolio design looks like.

In the meantime , I also refers to some of the portfolio website did by other professional designers.

I have scoped down my webpage from 8 pages to 4 pages from previous proposed wireframe. The reason that I scope down is because I wanted it to be very simple approach with easy navigation. I have remove the sliding up menu into one line of menu bar so that information access easily by just one click. Overall website will be still in parrallex horizontal scrolling website. 

As what I struggled in the sketching stage is , I coudn't get the landing page design right. I tried to sketch badges but it doesn't fits of what I want. The cross symbol of the arrow and brush is represent a mouse click and illustration. Part of my identity as a web designer + Illustrator.

I was trying to give some pattern on my name because I like minimalism pattern and textures. 

The previous landing page. 

Finally I decided to design in a neat and simple

I also jotted down what should I have in my principle page.

Lastly, the about me page. 

Time usage : 10 hours

Minimalism design portfolio website

Mies van der Rohe famously said “Less is more”. Suzanne Reid has noted in her article that it is the essence of minimalism. When in comes to web design, minimalism is the “new” trend in the 21st century. Therefore, this portfolio website is design in flat and minimalistic visual. The purpose of designing in minimalistic is , Minimalism offers a life with less stress, less distraction, more freedom, and more time. Minimalism design has becoming modern design. Minimalism is about designing smarter.

Steven Bradley(2011)noted that , minimalist designs tend toward more whitespace, better typography, grid layouts, and less color. Therefore, minimalism design that should consider on the 5 points listed below:

• Grids
• Typography
• Space
• Color
• Basic design elements

Therefore, I look for some of minimalism design portfolio website. I found few of the design is neat, simple, direct and clean approach.

http://derekboateng.com/

http://wasniowski.de/

http://pollystanton.com/

http://stefivanov.com/

References

Bradley, S. (2011). Why Minimalism is the Most Important Design Style to Master - Vanseo Design. [online] Vanseodesign.com. Available at: http://www.vanseodesign.com/web-design/why-minimalism/ [Accessed 22 Jul. 2014].

Reid, S. (2014). Minimalism Trends in Web Design. [online] Suzanne Reid Design. Available at: http://suzannereiddesign.com/minimalism-web-design/ [Accessed 22 Jul. 2014].

Feedback

A tutorial section with Shahnim today. I have showed my design visual and Image above was the feedbacks from lecturer. 

Overall design was not showing my own identity. Therefore, lecturer suggested I should study more on portfolio branding.

I had research on what is the essential key of portfolio branding. I found this website provided some of the key elements and potential strategy that as a guide for me to further develop my portfolio website.

Mitch Duckler has share some of the guiding principles of a brand portfolio strategy. There were total up 5 strategies.

In this case, what my understanding from the principles is that to build a portfolio branding, first, I should understand what is the objective can be fulfill for my target audience of my portfolio.I should maximize brand extendibility and provided clear delineation of appropriate benefits for the user. Other that to build strong relationship with others corporate brand, however, this strategy might use in the future. Create visual identity for brands in the portfolio, I should create brand hierarchy, clear organized and simple navigation for the user.

Therefore, I have done a fast SWOT analyses for my as clarify myself in this portfolio website. 

Strengths

(About myself)

- To bear hardship and work hard

- Know abit of backend programming such as html 5, javascript, jquery, css, xml and php.

- Be a successful UI / UX designer + Illustrator

- Willing to take challenge

(About portfolio website)

-Easy access to my portfolio 

-Able to know my identity

-Provide inspiration for other design talent

Weaknesses

- Content deliver might be not convincing

- Webpage overload

- Working time exceed 

Opportunities

- Get recognition from worldwide by just input my url link

- Get more clients, working and get experiences

- Easy and fast to access on what I'm working, who I am and what I offer

Threats

-Given 40 hours to execute

-Technical error

-Unclear content 

However, I will make a change of my design visual and some of the adjustment.

References

Duckler, M. (2014). A Strategic Approach Toward Optimizing a Brand Portfolio. [online] Fullsurge.com. Available at: http://www.fullsurge.com/perspectives/articles/brand/strategic-approach-toward-optimizing-brand-portfolio [Accessed 17 Jul. 2014].

Test code

On 30th June, I have done some of code research for my portfolio in this CFE project. Among some other research, I have found this is more suitable to apply in my project. This website has also provide tutorials file, so that I can refer to the codes and use it to develop further in this portfolio. 

In my portfolio, I wanted it to be a parallax in horizontal website, whereas when user click on the menu, it will slides up and shows buttons. When user click on the one of the buttons it will slide to the specific page.

First of all, I wanted my menu on the bottom of my webpage. However I wanted it to be always stick to the bottom no matter how I zoom in and out, display it into another browser it still stick at the bottom. Therefore I found a tutorial through online. 

Link : http://jsbin.com/aloqad/2/edit
This tutorial is simple and easy to understand. Therefore, by following the codes, I have done my menu bar which it is stick to the bottom.

By referring to the Scrolling cloud reference, I have also done my parallax horizontal with page of 6. For example, when user click on box 3 buttons in the menu bar, the page will auto scroll to the page 3 content page.

Next is I will be doing the menu to slide up when user click on the little triangle. May refer to the sketches bellow. 

When user click on the triangle, menu bar will sliding up for user to choose which page they want to go. Menu buttons will place in a slanting 45 degree position.

From the sketches, when user mouse over the buttons, it will stands out among the others whereas the others buttons will seems to blur out. When user mouse out, the buttons turns to original. To be more clear on what my explanation. This is an example and tutorials that I would like to achieve.

 When mouse out.

Mouse over on one button.

Link: http://tympanus.net/Tutorials/BlurMenu/index2.html

However, before execute in that area. I have tried out some of the codes for sliding up the menu bar but failed. 

When I mouse over the box it doesn't move upwards smoothly but it suddenly jump on the top. I will further examination in this part until I get my result. I also looking for some of the research that could helps me in this part. 

Statement of Intent (Updated)

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

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].