Theory
Thing ને test કરવા માટે thing ને build ન કરો
અહીં tempting mistake છે: FestConnect નું new registration screen work કરે છે કે નહીં એ શોધવા માટે, એને just BUILD કરો: code કરો, style કરો, ship કરો, જુઓ શું થાય છે.
અને જો એ wrong હોય? તમે weeks waste કર્યા, અને હવે fix નો અર્થ છે real code ને rewrite કરવું.
Architects building ને construct નથી કરતા rooms wrong place પર છે એ શોધવા માટે: એ પહેલા BLUEPRINTS draw કરે છે. Designers પણ same કરે છે wireframes (blueprint) અને prototypes (clickable draft) સાથે, idea ને code ની એક line અસ્તિત્વમાં હોય એ પહેલાં CHEAPLY test કરે છે.
Theory
Wireframe: skeletal blueprint
Wireframe એ screen નું low-fidelity, skeletal layout છે: એ SHOW કરે છે કે WHERE things જાય છે (structure, content, hierarchy) WITHOUT visual detail: કોઈ real colours, fonts અથવા images નહીં, માત્ર grey boxes, placeholder text અને labels.
Visuals ને શા માટે strip out કરવા? Attention ને what matters FIRST પર focus કરવા માટે: layout અને flow. FestConnect ના registration screen નું wireframe 'is the form in a sensible order? is the button where users expect?' નો answer આપે છે કોઈ પણ shade of blue વિશે argue કર્યા વગર હજુ.
Fidelity એ detail ની amount છે: low-fi (rough boxes, fast, cheap) versus high-fi (detailed, near-final looking). Start low.
Theory
Prototype: clickable draft
Wireframe static છે. Prototype એ interactive છે: clickable model જે product કેવી રીતે work કરે છે એ SIMULATE કરે છે, જેથી તમે build કરતા પહેલા real users સાથે flow ને TEST કરી શકો.
Prototype ના forms:
- paper prototype: screens paper પર drawn; human 'plays computer', user 'tap' કરે તેમ sheets swap કરે છે: astonishingly effective અને nearly free
- digital prototype: design tool માં બનાવેલું (Figma એ common one છે), real device પર clickable
તમે prototype ને 5 first-years ને આપો છો, કહો છો 'register for Garba Night', અને WATCH કરો છો (usability testing, Unit 2): flow problems ને catch કરતાં જ્યારે એ minutes ની cost માં fix થાય છે, weeks નહીં.
At a glance
Fidelity ladder (cheap થી expensive)
| Stage | શું છે | Change કરવાની cost |
|---|---|---|
| Sketch | Rough hand-drawn ideas | Seconds |
| Low-fi wireframe | Grey boxes + labels, માત્ર structure | Minutes |
| Prototype | Flow નું clickable model | Low |
| High-fi mockup | Full visual design, near-final look | Higher |
| Built product | Real coded product | Highest |
Quiz
શા માટે deliberately early wireframes ને low-fidelity (grey boxes, no colour) રાખવામાં આવે છે polished બનાવવાને બદલે?
- કારણ કે designers હજુ polished work નથી બનાવી શકતા
- Feedback ને structure અને flow પર focus કરવા, changes ને cheap રાખવા, અને કારણ કે લોકો rough work ને વધુ honestly critique કરે છે
- Low-fi wireframes એ developers ને final deliverable છે
- Colour ક્યારેય કોઈ design માં વપરાતો નથી
- Design ને users થી hide કરવા
Show the answer
Feedback ને structure અને flow પર focus કરવા, changes ને cheap રાખવા, અને કારણ કે લોકો rough work ને વધુ honestly critique કરે છે
Low fidelity એ deliberate choice છે 3 payoffs સાથે: એ attention ને layout અને flow પર રાખે છે (button ના shade પર નહીં), એ change કરવા cheap છે (cost-of-change curve), અને: subtly important: લોકો ROUGH work ને વધુ honestly critique કરે છે, જ્યારે polished mockup 'finished' લાગે છે અને very criticism ને discourage કરે છે જે તમારે જોઈએ છે. Option A intent ને insult કરે છે (એ strategic છે, limitation નહીં). Option C false છે: wireframes high-fi design અને build ને precede કરે છે. Option D over-generalise કરે છે (colour matter કરે છે, just later). Option E purpose ને invert કરે છે (તમે low-fi work ને feedback gather કરવા SHOW કરો છો). Rough on purpose, cheaply learn કરવા.
Think first
Polished-mockup trap
તમે stakeholder ને beautiful, finished-looking mockup show કરો છો અને feedback માંગો છો. તમને grey boxes show કરવા કરતાં LESS useful criticism શા માટે મળી શકે? પછી tap કરો.
Show the answer
Polished mockup LOOKS done, એટલે લોકો assume કરે છે કે big decisions settled છે અને fundamental changes suggest કરવામાં hesitate કરે છે: 'it looks finished, I don't want to make them redo it'. એ structure ને question કરવાને બદલે small things (colour, word) ને nitpick કરે છે. Grey-box wireframes signal કરે છે કે 'આ rough છે, હજુ figured out થઈ રહ્યું છે', જે honest structural feedback ને INVITE કરે છે: 'actually the whole flow is backwards'. એટલે designers deep critique provoke કરવા માટે early low-fi work show કરે છે. Counter-intuitive rule: artefact જેટલું rougher, feedback એટલું braver અને more useful. Fidelity signal કરે છે કે તમે change માટે કેટલા open છો.
Watch out
Wireframe/prototype slips
Wireframing પહેલા building: idea ને test કરવા code કરવાથી weeks waste થાય છે; પહેલા sketch અને prototype કરો (cost-of-change).
Too early polishing: high fidelity too soon honest feedback ને suppress કરે છે અને visuals પર effort waste કરે છે જે cut થઈ શકે છે.
Wireframe vs prototype confusion: wireframe એ STATIC layout છે; prototype એ INTERACTIVE છે (clickable, testable).
User test ને skip કરવો: prototype એ real users સાથે TEST કરવા માટે હોય છે, માત્ર internally admire કરવા માટે નહીં.
Theory
Structure sketched, હવે paths
Wireframes દરેક screen ને lay out કરે છે; prototypes એને flows માં link કરે છે. આ unit માં બાકીનું એક structural piece એ છે કે users એ screens વચ્ચે કેવી રીતે MOVE કરે છે: NAVIGATION: menus, tabs, links અને breadcrumbs જે information architecture ની visible expression છે જે તમે બે lessons પહેલાં build કર્યું હતું. Navigation systems Unit 3 ને close કરે છે, અને પછી Unit 4 finally એ બધું LOOK good બનાવે છે: typography, colour અને visual design.
Summary
Key takeaways
- Wireframe એ low-fidelity skeletal layout છે: structure અને content placement, no visual detail (grey boxes, labels).
- Prototype એ interactive/clickable model છે જે product ને simulate કરે છે users સાથે flows test કરવા.
- Fidelity એ detail ની level છે: low-fi (rough, fast, cheap) vs high-fi (detailed, near-final).
- Prototypes paper (human plays computer) અથવા digital (tools like Figma) હોઈ શકે છે.
- Ladder: sketch -> wireframe -> prototype -> high-fi mockup -> built product, cost માં rising.
- Early work ને low-fi રાખો: એ feedback ને structure પર focus કરે છે, change કરવા cheap રહે છે, અને honest critique ને invite કરે છે.
- Memory hook: building ને build કરતા પહેલા blueprint draw કરો.