01
COLLECT CONTENT/ MATERIALS
Gather all the the material from the client well before the designer will need to begin the design incude:
Video/gif
Image
Content
Brand guideline (if available)
BUILD
Branding
01
02
VISUAL RESEARCH (STYLESCAPE)
Research about images, designs, colours, typography, photography, patterns and textures. We'll collect it as general style that help preview a project's visual direction which call Stylescape.
03
LAYOUT/ WIREFRAME/ SKETCHES
Create wireframe/ layout or sketches based on strategy report/brand guidebook or the PAC meeting report
04
DESIGN & REVISION
Each application has only 2 revisions
Logo
• Transferring what was created in sketch into B&W vector logo
• Presentation B&W
• Revision
• Render in color
• Presentation Color logo
• Revision
Key Image
• Create idea
• Add to presentation
• Revision 1
• Presentation 2
• Revision 2
Label Packaging
• Create master design
• Presentation 1 to client
• Revision 1
• Presentation 2
• Revision 2
• Create print design
POSMss
POSM: standee, poster, billboard, pano, leaflet/ flyer, booth, showcase
• Design master
• Presentation 1 to client
• Revision 1
• Presentation 2
• Revision 2
Stationary
Stationary: Business card, Envelope A4 & A5, folder, email Signature, Letterhead, Nametag, Company Note, Company uniform, Internal presentation, Brochure
• Design master
• Presentation 1 to client
• Revision 1
• Presentation 2
• Revision 2
Social Media
Social Media: Post template, banner
• Design master
• Presentation 1 to client
• Revision 1
• Presentation 2
• Revision 2
05
MOCKUP
A mockup is a full rendering of design on Logo, key image, label/ packaging, POSM, stationary and social media
06
HAND-OVER
send client the final project hand-over include all applications file
Website & Mobile App
01
COLLECT CONTENT/ MATERIALS
Gather all the the material from the client well before the designer will need to begin the design incude:
Video/gif
Image
Content
02
VISUAL RESEARCH (STYLESCAPE)
Research about images, designs, colours, typography, photography, patterns and textures and button style We'll collect it as general style that help preview a project's visual direction for website/ app.
03
SITEMAP/ WIREFRAME/ USERFLOW
These steps are considered as the skeleton of entire website.
04
DESIGN & REVISION
WEBSITE
Homepage design:
- Create grid & set up font, color
- Design on mobile screen
- design on desktop screen
- Presentation 1
- Revision 1
- Presentation 2
- Revision 2
- Finalize General Style
Other pages design:
- Other pages design on mobile
- Other Pages design on desktop
- Presentation 1
- Revision 1
- Presentation 2
- Revision 2
MOBILE APP
Homepage design:
- Create grid & set up font, color
- Design Homepage
- Presentation 1
- Revision 1
- Presentation 2
- Revision 2
- Finalize General Style
Other pages design:
- Design other Pages
- Presentation 1
- Revision 1
- Presentation 2
- Revision 2
05
PROTOTYPE
Prototye is a demo of what a website or app will look like when it goes live
- Prototype with key user
- Discuss issues with client
- Presentation
- Finalize prototype
06
DEVELOPMENT
- Review notes and info
- Review the design file
- Prepare (create staging website, set up WP form, font/ color, main template, add woocommerce, create user profile, seperate CSS/ Javascript, add cart page, check out page, setup products/ category/ attributes. Set up customer, shipping payment…)
- Coding Homepage for Desktop
- Coding Homepage for Mobile
- Coding Other pages for desktop
- Coding Other pages for Mobile
07
QUALITY CONTROL(QC)
- Send Staging website for client
- revise 1 based on client's feedback
- Send website revision
- revise 2 based on client's feedback
- Finalize both design and development
- Optimization
08
MIGRATION
- Install all in one migration
- Create file from staging site
- Create new site on host server
- Install all in one migration on live site
- Import download file
- Test Website
09
LAUNCHING
It's time to on-air website!!!!!
10
WEBSITE DELIVERY
Send CMS videotext to edit it.
Send hand-over document