Зиаг нилээн дээр бичиж байсан ч хамаагүй тавьж байсан илтгэлүүдийнхээ материалуудыг оруулж байдымуу гээд оруулж эхэлж байна. Их л энгийн бас яриа ихтэй болохоос текст багатай материал бэлддэгээ одоо л харлаа даа гэж.

2. THE LADDER
 Step 1: Creative / Inspirational time
 Step2: Sketching / Wire framing Ideas
 Step3: Writing The Requirements
 Step4: Designing
 Step5: Implementing

4. CREATIVE TIME / !!! MOST IMPORTANT !!! /
Several Ways
• Photo
• Website Galleries
• Music : P
DON’T REINVENT THE WHEEL

5. CREATIVE TIME
CSS Galleries
• WwW.CreatTica.Com
• WwW.CssMania.Com
• WwW.CssDrive.Com

6. CREATIVE TIME
• Choosing the RIGHT color
set
• Corresponding forms in
layout
• Better thinking about the
product
WwW.ColourLovers.com

7. HARVARD STYLE COLOR SET

9. SKETCHING / WIREFRAMING
• Rapid concept development
• Basic composition / layout
• Client communication and approval
• Visual exploration
• Refining visual solutions

10. SKETCHING / WIREFRAMING
Drawing on Paper Browsers :P

11. SKETCHING / WIREFRAMING
• Pocket Book
 Moleskin
 Etc.
• Always able to draw IDEAS
• “SAVING” visual data

12. SKETCHING / WIREFRAMING
Balsamiq Mockups

14. WRITING THE REQUIREMENTS
• User interaction written in one sentence
• User X fills out Form Y
• Site interaction
• Image X should flip to image Y after Y after 30 seconds
• Script X is called

15. WRITING THE REQUIREMENTS
• User registers to FACEBOOK
• Best Case :
• Correct mail, password security
check, age Check
• Spare the DB space.
• More secure, more social …
• Etc…

17. DESIGNING
 Cooperation of all PROCESSES
 Starting from top to bottom
 Correct CANVAS size
 Layout & Positioning
 Guides & Grid
 Designing Something KILLER 

18. DESIGN
WORKING WITH A GRID AND GUIDES

20. IMPLEMENTING
• Slicing the PSD to WEB optimated images
• Coding the template from scratch in one chosen browser
• FINAL WORKING, Checking cross browser functionality
• Separating code for different browsers.
• Doing UNIT tests.
• Checking all interactions
in any way
(from DOCUMENTATION)

21. THE END
THANK YOU FOR YOUR ATTENTION

22. APPENDIX
• RESSOURCES FOR DESIGNING:
• WWW.SMASHINGMAGAZINE.COM
• WWW.DEVIANTART.COM
• HTTP://PSD.TUTSPLUS.COM
• WWW.COLOURLOVERS.COM
• RESSOURCES FOR SKETCHING:
• WWW.GOMOCKINGBIRD.COM
• HTTP://WWW.NEUROSOFTWARE.RO/PROGRAMMING-
BLOG/TAG/SKETCHING-PAPER/.