අපගේ ප්රායෝගික ව්යාපෘතිය: "ශිෂ්ය සටහන් වෙබ් අඩවිය"
මෙම පාඨමාලාව පුරාවටම, අපි එක් එක් ඒකකයේදී ඉගෙන ගන්නා දේ භාවිත කර "Student Notes Website" නම් සරල වෙබ් පිටුවක් පියවරෙන් පියවර වැඩිදියුණු කරන්නෙමු.
පාඨමාලා ඒකක 10
01 UI/UX හැඳින්වීම
UI සහ UX යනු කුමක්දැයි සැබෑ උදාහරණ සමඟින් ඉගෙන ගනිමු. හොඳ නිර්මාණයක් වෙබ් අඩවියකට වැදගත් වන්නේ ඇයිදැයි තේරුම් ගනිමු.
පාඩම ආරම්භ කරන්න02 පරිශීලක පර්යේෂණ
අපගේ වෙබ් අඩවිය භාවිතා කරන පරිශීලකයින් (Persona) හඳුනාගෙන ඔවුන්ගේ අවශ්යතා තේරුම් ගනිමු.
පාඩම ආරම්භ කරන්න03 UX මූලධර්ම
Navigation, Hierarchy සහ Information Architecture වැනි UX මූලධර්ම ගැන ඉගෙන ගෙන වෙබ් අඩවියේ සැලැස්මක් (Site Map) සකස් කරමු.
පාඩම ආරම්භ කරන්න04 Wireframing
කේත ලිවීමට පෙර, වෙබ් අඩවියේ පිරිසැලසුම (Layout) කඩදාසියක හෝ Figma වැනි මෙවලමක Wireframe එකක් ලෙස අඳිමු.
පාඩම ආරම්භ කරන්න05 දෘශ්ය නිර්මාණ (UI)
වර්ණ (Colors), අකුරු (Typography), සහ ඉඩ (Spacing) භාවිතයෙන් අපගේ වෙබ් අඩවියට ආකර්ෂණීය පෙනුමක් ලබා දෙමු.
පාඩම ආරම්භ කරන්න06 Design Systems
වෙබ් අඩවිය පුරාම එකම පෙනුමක් පවත්වා ගැනීමට Design System එකක් සහ Style Guide එකක් නිර්මාණය කරමු.
පාඩම ආරම්භ කරන්න07 Interaction Design
බොත්තම් සඳහා hover effects සහ සජීවීකරණ (Animations) වැනි ක්ෂුද්ර අන්තර්ක්රියා (Microinteractions) එකතු කරමු.
පාඩම ආරම්භ කරන්න08 Figma භාවිතය
Figma වැනි වෘත්තීය මෙවලමක් භාවිතයෙන් අපගේ වෙබ් අඩවියේ සම්පූර්ණ Prototype එක නිර්මාණය කරමු.
පාඩම ආරම්භ කරන්න09 භාවිතාව පරීක්ෂා කිරීම
වෙනත් පරිශීලකයින් ලවා අපගේ නිර්මාණය පරීක්ෂා කර (Usability Testing) ඔවුන්ගේ ප්රතිචාර මත පදනම්ව එය වැඩිදියුණු කරමු.
පාඩම ආරම්භ කරන්න10 Portfolio සහ වෘත්තීය සූදානම
අප කළ සම්පූර්ණ නිර්මාණ ක්රියාවලිය UI/UX Case Study එකක් ලෙස සකස් කර රැකියා සඳහා ඉදිරිපත් කිරීමට සූදානම් කරමු.
පාඨමාලාව අවසන් කරන්නපාඨමාලාව අවසානයේ ඔබට ලැබෙන දේ ✅
ක්රියාත්මක වන වෙබ් පිටුවක්
HTML සහ CSS මඟින් නිර්මාණය කළ සැබෑ වෙබ් පිටුවක්.
Figma නිර්මාණ Prototype එකක්
ඔබේ නිර්මාණ කුසලතා පෙන්විය හැකි වෘත්තීය මට්ටමේ Prototype එකක්.
සම්පූර්ණ UI/UX Case Study
ඔබේ Portfolio එකට එක් කළ හැකි, සම්පූර්ණ ව්යාපෘති වාර්තාවක්.