04 Wireframing සහ Prototyping
අපි වර්ණ සහ අකුරු ගැන සිතීමට පෙර, වෙබ් අඩවියේ මූලික සැකැස්ම (blueprint) නිර්මාණය කරමු.
Wireframing යනු කුමක්ද?
Wireframe එකක් යනු වෙබ් පිටුවක මූලික දෘශ්ය මාර්ගෝපදේශයකි. එය නිවසක් තැනීමට පෙර අඳින ලද සැලැස්මක් (blueprint) වැනිය. මෙහිදී වර්ණ, පින්තූර, හෝ අකුරු මෝස්තර ගැන අවධානය යොමු නොකර, පිටුවේ අන්තර්ගතය සහ මූලිකාංග (elements) ગોઠවන ආකාරය පමණක් සලකා බලයි.
- පිටුවේ ප්රධාන කොටස් (ශීර්ෂය, බොත්තම්, පෝරම) තැබිය යුත්තේ කොතැනද යන්න තීරණය කිරීම.
- පරිශීලකයාට අවශ්ය තොරතුරු පහසුවෙන් සොයාගත හැකි වන පරිදි පිරිසැලසුම (layout) සැකසීම.
- කේත ලිවීමට පෙර නිර්මාණයේ ඇති අඩුපාඩු හඳුනා ගැනීම.
Low-Fidelity Wireframes
මේවා ඉතා සරල, ඉක්මන් සිතුවම් වේ. ඒවා පෑනකින් සහ කඩදාසියකින් හෝ Figma, Balsamiq වැනි සරල ඩිජිටල් මෙවලමකින් නිර්මාණය කළ හැකිය. අපගේ "Student Notes Website" හි "සටහන් පිටුව" (Notes Page) සඳහා low-fidelity wireframe එකක් මෙසේ දිස්විය හැකිය:
මෙම සිතුවමේ, Navigation bar එක, සටහන් ලැයිස්තුවක්, සහ "නව සටහනක් එක් කරන්න" (+) බොත්තමක් ඇති ස්ථානය පමණක් සලකුණු කර ඇත.
ප්රායෝගික ක්රියාකාරකම: ඔබේ Wireframe එක අඳින්න
මෙම ඒකකයේදී අපි කේත ලියන්නේ නැත. ඒ වෙනුවට, ඔබ ඔබේම නිර්මාණකරුවෙකු බවට පත් වේ!
ඔබේ කාර්යය:
- පෑනක් සහ කඩදාසියක් ගන්න (හෝ Figma වැනි නොමිලේ මෙවලමක් විවෘත කරන්න).
- අපගේ "Student Notes Website" හි සටහන් පිටුව (Notes Page) සඳහා wireframe එකක් අඳින්න.
- පහත සඳහන් දෑ ඇතුළත් කිරීමට වග බලා ගන්න:
- පිටුවේ මාතෘකාවක් (e.g., "My Notes").
- දැනටමත් ඇති සටහන් කිහිපයක් පෙන්වන ලැයිස්තුවක් (සරල කොටු ලෙස අඳින්න).
- නව සටහනක් එක් කිරීමට බොත්තමක් ('Add Note' හෝ '+' ලකුණ).