4. Misunderstanding & Underestimation The Complexity Of
Front End Development
• You are good at photoshop
• Visual designer ? UI Designer ?
• CSS/HTML looks like easy
• jQuery guy
• Wording change is easy, right?
• Move something from OOO to XXXX, it is right?
• This is urgent
• This is very urgent
4
9. Communication - Design Stage
9
Provide Wireframe
HIE front end
R&D
UI Designer
Visual Designer
Sync Style Guide
Feedback
Training/Style Guide Provide Visual Spec
12. Communication - Dev Stage
12
Provide component request Questions for Style Guide
Update Style Guide
Supports
Optional
HIE front end
R&D
UI Designer
Visual Designer
15. Communication - GM Stage
15
Provide components source code Update Style Guide
Integrate into Style Guide Feedback
HIE front end
R&D
UI Designer
Visual Designer
20. Ask your self
• Are you interested in design?
• Do you care about details ?
• Do you know how to play magic ?
• Are you eager to learn new things ?
• Can you accept non-logical problems ?
• Always hands on
• Don’t limit yourself
20
21. UI engineering is cool (sometimes) but not always,
because…
• You have to deal with many cross browsers issues.
• You will face to non-logical problems like CSS.
• You might repeat doing similar things.
• You have to do lots of communication with
designers and developers.
• You have to handle presentation and behaviours.
• Schedule is always tight (so weird).
• You have to swallow others code.
• The devil is in the details.
21
23. Human Resource Marketing
• Internet Advertisement is growing
• Cloud services are on the rocket
• Trend Micro, Yahoo, KKBOX, hTC
• Existing services need mobile web solution
• Trend Micro, Yahoo, KKBOX
• Big data needs to do visualization
• Trend Micro is still hiring
23
24. Technology
• CSS/HTML/JavaScript is mature
• HTML5 Spec confirm
• Almost can run everywhere
• Lots of companies support
• Development environment become better
• Learning curve is lower (Compare with C++ /ObjC)
• Huge online resource
24
31. Browsers
Modularization
31
CSS Images
HTML
JavaScript
CSS3
HTML5
PHP/C#
Database
Server
Security
Network
Testing
Patterns
Canvas
Gesture
Performance
Localization
Library
Accessibility
Responsive
Mobile
Design
Visual
32. The Front End Need To Know...
• Understand CSS, JavaScript, HTML
• Understand CSS3, Advanced JavaScript, HTML5
• Understand more
• Grid system, responsive techniques
• JavaScript Design Patterns
• Server side techniques
• Database
• Performance
• Visualization
• Visual and design sense
32