Design and Developing Responsive website සිංහලෙන්

මේ section එකෙන් බලමු Layout Design කර ගනිද්දි සලකා බැලිය යුතු දේවල් කිහිපයක් හා UI Style Guide එකක් කියන්නෙ මොකක්ද කියලා. අපි කලින් section වලින් කියපු විදිහට design කර ගන්න Layout එක තමයි අපි Developerට දෙන්නෙ ඒ විදිහට Develop කරන්න.එහෙම දෙන කොට බොහෝ දුරට PSD /AI File එකත් දෙනවා.නමුත් Developerට එච්චරම Photoshop/Illustrator දැනුමක් නැති වෙන්න පුලුවන්.ඒක හින්ද අපි දෙන PSD / AI File එක පිලිවෙලට දෙන්න ඕන.නැත්නම් ඔහුට ඒක හරියට use කර ගන්න බැරිවෙනවා.ඒ වගෙම Design කරන අපිටත් Change එකක් එහෙම ආවොත් ඒක ලේසියෙන්ම කර ගන්න පුලුවන් අපේ PSD / AI File එක හරි පිලිවෙලට තිබ්බොත්.ඒ කියන්නෙ අපේ Layers එහෙම හරියට නම් කරල හරි අනු පිලිවෙලට තියා ගත්තාම හැමොටම ලේසියි. .අපි Size තුනට වෙන වෙනම Layout එක Design කර ගද්දි රූපයෙ විදිහට වෙන වෙනම Group කර ගෙන තියා ගන්න ඕන.

ඒ වගෙම සාමාන්‍ය Website එකක් ගත්තොත් ඒකෙ අපිට විවිධ Section දැකගන්න පුලුවන්.Menu bar එක, Main Banner එකක් තියෙනවනම් ඒක.ඒ වගෙ එක එක Website වල එක එක Section දැක ගන්න පුලුවන්.ඒ හින්ද අපි PSD /AI File එක හරියට ඒ ඒ Section වලට බෙදල Layers වෙන වෙනම තියාගන්න ඕන.රූපයෙ තියෙන විදිහට Section වෙන වෙනම Group කරල තියා ගැනීම සියලු දෙනාටම පහසුවක්

UI Style Guide කියන්නෙ මොක්කද

මේ Layout එකට අමතරව අපි හදාගන්න ඕන දෙයක් තමයි UI Style Guide එක.එ කියන්නෙ අපි Layout එක Design කර ගද්දි use කරල තියෙන Fonts, Colors, Buttons, Form elements වගේ දේවල් Add කරල Developerගෙ පහසුවට හදාගන්න Document එකක්.ඒකෙ අපි Use කරල තියෙන Fonts, sizes, Shapes සහ Colors ආදිය වෙන වෙනම පහැදිලිව දක්වල තියෙනව.මේ UI Style Guide එක Use කරල Developerට පුලුවන් එ Fonts, Colors අදාල විදිහට Use කරන්න.(3). එතකොට වැරදි Fonts, Colors Developer Use කරන එක වැලකෙනවා.

මේ රූප සටහනෙ බලගන්න පුලුවන් අදාල web site එකෙ use කරල තියෙන Fonts, Colors, Buttons, Form elements අදී දේවල් වෙන වෙනම පැහැදිලිව දක්වල තියෙනවා.මෙහි ප්‍රධාන වාසිය තමයි psd එක open නොකරම Developerට website එකෙ use කරල තියෙන Fonts, Colors, Buttons, Form elements වගේ දේවල් බලා ගෙන ඒ විදිහට Develop කරන්න පුලුවන්.ඉතින් අපි website එකක් Design කරද්දි මේ UI Style Guide එකත් මතක ඇතුව design කරන්න ඕන.

මීලඟ section එකෙන් බලමු අපේ cording part එකට ඒ කියන්නෙ web layout එක html,css,bootstrap,javascript යොදා ගෙන develop කරගන්න ඒකට අවශ්‍ය starter pack එකක් හදාගන්නෙ කොහොමද කියලා.