{"id":10996,"date":"2024-06-20T11:18:40","date_gmt":"2024-06-20T04:18:40","guid":{"rendered":"https:\/\/uat-dev4.ismtech.net\/?p=10996"},"modified":"2024-06-20T12:40:33","modified_gmt":"2024-06-20T05:40:33","slug":"web-developers-guide-to-working-with-designers","status":"publish","type":"post","link":"https:\/\/www.ismtech.net\/th\/it-topics-trends-th\/web-developers-guide-to-working-with-designers\/","title":{"rendered":"\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a Designer \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Web Developer"},"content":{"rendered":"
\n
\"Web<\/figure><\/div>\n\n

\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Developer \u0e04\u0e38\u0e13\u0e40\u0e04\u0e22\u0e14\u0e39 Mockup \u0e17\u0e35\u0e48\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e21\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\u0e41\u0e1a\u0e1a\u0e41\u0e25\u0e49\u0e27\u0e04\u0e34\u0e14\u0e27\u0e48\u0e32 \u201c\u0e19\u0e35\u0e48\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e1d\u0e31\u0e19\u0e23\u0e49\u0e32\u0e22\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e02\u0e35\u0e22\u0e19 Code\u201d \u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48? \u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e32\u0e07\u0e17\u0e35\u0e04\u0e38\u0e13\u0e2d\u0e32\u0e08\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a Design Notes \u0e17\u0e35\u0e48\u0e01\u0e27\u0e19\u0e43\u0e08\u0e08\u0e19\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e40\u0e01\u0e32\u0e2b\u0e31\u0e27? \u0e43\u0e0a\u0e48\u0e41\u0e25\u0e49\u0e27 \u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d\u0e2a\u0e39\u0e49\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07 Developers \u0e41\u0e25\u0e30 Designers \u0e19\u0e31\u0e49\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e23\u0e34\u0e07 \u0e41\u0e15\u0e48\u0e2d\u0e22\u0e48\u0e32\u0e01\u0e31\u0e07\u0e27\u0e25 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e19\u0e35\u0e49\u0e08\u0e30\u0e19\u0e33\u0e04\u0e38\u0e13\u0e44\u0e1b\u0e2a\u0e39\u0e48\u0e42\u0e25\u0e01\u0e41\u0e2b\u0e48\u0e07\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e19\u0e17\u0e35\u0e48\u0e23\u0e32\u0e1a\u0e23\u0e37\u0e48\u0e19\u0e41\u0e25\u0e30\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e17\u0e35\u0e48\u0e22\u0e2d\u0e14\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21! \u0e01\u0e31\u0e1a \u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a <\/strong>Designer<\/strong> \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a <\/strong>Web Developer<\/strong><\/p>\n

\u0e17\u0e33\u0e44\u0e21\u0e40\u0e23\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e33\u0e07\u0e32\u0e19\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e19<\/strong><\/h2>\n

\"Working<\/p>\n

\u0e41\u0e19\u0e48\u0e19\u0e2d\u0e19\u0e27\u0e48\u0e32 \u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e22\u0e2d\u0e14\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e17\u0e35\u0e48\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e34\u0e48\u0e07\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e0b\u0e36\u0e48\u0e07\u0e16\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e19\u0e31\u0e49\u0e19\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21\u0e41\u0e15\u0e48\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e22\u0e32\u0e01\u0e01\u0e47\u0e08\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e07\u0e38\u0e14\u0e2b\u0e07\u0e34\u0e14 \u0e43\u0e19\u0e02\u0e13\u0e30\u0e17\u0e35\u0e48\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e17\u0e35\u0e48\u0e21\u0e35 Code \u0e17\u0e35\u0e48\u0e1b\u0e23\u0e32\u0e28\u0e08\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e2b\u0e23\u0e37\u0e2d\u0e0a\u0e48\u0e2d\u0e07\u0e42\u0e2b\u0e27\u0e48 \u0e41\u0e15\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e25\u0e49\u0e32\u0e2a\u0e21\u0e31\u0e22\u0e19\u0e31\u0e49\u0e19\u0e01\u0e47\u0e44\u0e21\u0e48\u0e19\u0e48\u0e32\u0e2a\u0e19\u0e43\u0e08 \u0e14\u0e31\u0e07\u0e19\u0e31\u0e49\u0e19 Designer \u0e41\u0e25\u0e30 Developer \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e33\u0e07\u0e32\u0e19\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e32\u0e1a\u0e23\u0e37\u0e48\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e17\u0e35\u0e48\u0e42\u0e14\u0e14\u0e40\u0e14\u0e48\u0e19\u0e41\u0e25\u0e30\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e<\/p>\n

Designer Speak <\/strong>\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a <\/strong>Developers<\/strong><\/h2>\n

\"Designer<\/p>\n

Designer \u0e0a\u0e2d\u0e1a\u0e17\u0e35\u0e48\u0e08\u0e30\u0e40\u0e23\u0e35\u0e22\u0e01\u0e04\u0e33\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e40\u0e0a\u0e48\u0e19 “Visual Hierarchy\u201d \u0e41\u0e25\u0e30 \u201cUser Experience” \u0e41\u0e15\u0e48\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Developers? \u0e40\u0e23\u0e32\u0e21\u0e32\u0e14\u0e39\u0e01\u0e31\u0e19<\/p>\n

1. Visual Hierarchy<\/strong><\/h3>\n

\"Visual<\/p>\n

Visual Hierarchy (\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e02\u0e31\u0e49\u0e19\u0e01\u0e32\u0e23\u0e21\u0e2d\u0e07\u0e40\u0e2b\u0e47\u0e19) \u0e01\u0e32\u0e23\u0e1e\u0e34\u0e08\u0e32\u0e23\u0e13\u0e32\u0e27\u0e48\u0e32\u0e2a\u0e48\u0e27\u0e19\u0e43\u0e14\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e04\u0e38\u0e13<\/p>\n

Heading \u0e04\u0e37\u0e2d \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e17\u0e35\u0e48\u0e14\u0e36\u0e07\u0e14\u0e39\u0e14\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e19\u0e43\u0e08\u0e14\u0e49\u0e27\u0e22\u0e41\u0e1a\u0e1a\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e17\u0e35\u0e48\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e36\u0e49\u0e19\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e41\u0e02\u0e47\u0e07\u0e41\u0e01\u0e23\u0e48\u0e07<\/p>\n

Body Text \u0e04\u0e37\u0e2d \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e40\u0e08\u0e4b\u0e07 \u0e0b\u0e36\u0e48\u0e07\u0e22\u0e31\u0e07\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e41\u0e15\u0e48\u0e19\u0e48\u0e32\u0e17\u0e36\u0e48\u0e07\u0e19\u0e49\u0e2d\u0e22\u0e01\u0e27\u0e48\u0e32<\/p>\n

\u0e43\u0e0a\u0e49 Semantic HTML (\u0e01\u0e32\u0e23\u0e40\u0e02\u0e35\u0e22\u0e19 HTML \u0e43\u0e2b\u0e49\u0e2a\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22\u0e44\u0e14\u0e49) \u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Headings \u0e41\u0e25\u0e30\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Paragraphs \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21\u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13 \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Screen Readers (\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e2d\u0e48\u0e32\u0e19\u0e2d\u0e2d\u0e01\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e1a\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d)<\/p>\n

2. User Experience (UX)<\/strong><\/h3>\n

\u0e1b\u0e23\u0e30\u0e2a\u0e1a\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e02\u0e2d\u0e07 User \u0e0b\u0e36\u0e48\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e2a\u0e36\u0e01\u0e02\u0e2d\u0e07 User \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e44\u0e14\u0e49\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e01\u0e32\u0e23\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22\u0e41\u0e25\u0e30\u0e23\u0e32\u0e1a\u0e23\u0e37\u0e48\u0e19\u0e19\u0e31\u0e49\u0e19 Developer \u0e21\u0e35\u0e1a\u0e17\u0e1a\u0e32\u0e17\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e32\u0e01\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a UX \u0e42\u0e14\u0e22\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e19\u0e27\u0e04\u0e34\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e17\u0e35\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e35\u0e41\u0e25\u0e30\u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07\u0e44\u0e14\u0e49\u0e14\u0e35 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e44\u0e14\u0e49\u0e27\u0e48\u0e32 User \u0e08\u0e30\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e30\u0e2a\u0e1a\u0e01\u0e32\u0e23\u0e13\u0e4c\u0e17\u0e35\u0e48\u0e22\u0e2d\u0e14\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21<\/p>\n

3. Design Tools 101<\/strong><\/h3>\n

Designers \u0e43\u0e0a\u0e49\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e21\u0e37\u0e2d\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e40\u0e0a\u0e48\u0e19 Figma \u0e41\u0e25\u0e30 Sketch \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e02\u0e2d\u0e07\u0e15\u0e19\u0e40\u0e2d\u0e07 \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23\u0e01\u0e47\u0e15\u0e32\u0e21 Developer \u0e44\u0e21\u0e48\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08 \u0e41\u0e25\u0e30\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48 Developer \u0e04\u0e27\u0e23\u0e23\u0e39\u0e49:<\/p>\n