Gjithnjë e më shumë përdorues kërkojnë në web duke përdorur pajisje të llojeve të ndryshme. Ato ndryshojnë në madhësi, duke nisur nga ekrani në laptop madhesinë e ekranit të Smartphone. Projektimi i faqes Web bëhet i vështirë, sepse duhen pasë parasysh të gjitha këto lloje të ndryshme ekranesh.

Faqet Responsive Web janë të ndërtuara në mënyrë të tillë që dizajni të përshtatet me madhësinë e ekranit. Por, ndërtimi i një faqeje Responsive Web nuk është aspak i lehtë, sepse çdo ditë rritet numri i paisjeve të reja Smartphone. Modelet e dizajnit Responsive Web janë bashkësi rregullash që duhen ndjekur gjatë procesit të zhvillimit të faqes Web. Ato përfshijnë disa komponente të përsëritur që ndërtojnë strukturën e ndërfaqes Web.

Projektimi i ndërfaqes Web përfshin përcaktimin e disa parametrave teknikë të tillë si gjerësia, lartësia, madhësia e shkrimit dhe e imazheve. Ekspertë të grafikës sugjerojnë këto pesë modele të dizajnit Web, si një zgjidhje e mirë për projektimin e ndërfaqes:

  • Mostly Fluid,
  • Column Drop,
  • Layout Shifter,
  • Tiny Tweaks,
  • Off Canvas.

Le të përshkruajmë më në detaje secilin prej këtyre modeleve.

Modeli Mostly Fluid

Modeli Mostly Fluid është gjërësisht i përdorur, për faktin se është i thjeshtë për t'u implementuar. Ai përmban kolona të ndryshme me margjina më të mëdha për ndërfaqe më të madhe. Ky model web design sugjerohet për revista apo për faqe Web të lajmeve të modës.

Modeli Mostly Fluid përfshin funksionalitetet e një menuje zbritëse, lidhje me rrjetet sociale etj. Në këtë model të dizajnimit Web, faqja ndryshon kufijtë sipas madhësisë së ekranit të pajisjes. Në smartphone, ndërfaqja rregullon gjerësitë e kolonave.

Avantazhi i kësaj strukture është se faqosja ndryshon vetëm kur ngushtohet gjerësia e ekranit.

Foto nga https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns

Moduli Drop Column

Ky model përmban kolona të ndryshme, por ndërsa ekrani ngushtohet, numri i kolonave zvogëlohet. Ky model i dizenjimit web tenton të mbushë të gjitha hapsirat e mundëshme.

Drop Column është i përkryer për faqet Responsive Web ku përdoruesi do të lexojë nga e gjithë gjerësia e ekranit. Madhësitë e segmenteve kanë tendencën të mos ndryshojnë. Ndëfaqja është e ndërtuar në segmente të ndryshme për rezolucione të ndryshme të ekranit.

Foto nga https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns#column_drop

Modeli Layout Shifter

Modeli Layout Shifter është shumë kompleks, sepse ndryshon strukturën për secilën gjerësi ekrani. Kjo gjë krijon vështirësi gjatë fazës së implementimit. Për këtë arsye, ky model nuk përdoret gjërësisht.

Foto nga https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns#layout_shifter

Modeli Tiny Tweaks

Ky model bën përshtatjen duke ndryshuar madhësinë e shkronjave ose madhësinë e imazheve. Faqet Web që ndjekin këtë model ndryshojnë madhësinë e shkronjave sipas gjerësisë së ekranit ku përdoruesi shfleton Web. Nëse përdoruesi po e lexon nga një ekran desktop, ai do të shohë faqen me shkrim dhe me imazhe më të mëdha.

Ky model i dizajnit të Web përdoret kryesisht në paraqitjen me një kolonë të vetme, të cilat mund të përmbajnë artikuj të gjatë.

Foto nga https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns#tiny_tweaks

Modeli Off Canvas

Foto nga https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns#off_canvas

Ky model web design në vend që të rregullojë përmbajtjen vertikalisht, ai sposton elementet ndihmëse, duke përfshirë menutë. Modeli sugjerohet në rastet kur përdoruesi duhet të përqëndrohet në përmbajtjen. Menuja qëndron e fshehur kur faqja ngarkohet në një ekran më të vogël.

Sipas këtij modeli, ndërfaqja grafike paraqet menunë e plotë kur përdoruesi shfleton faqen e internetit nga një ekran më i gjerë.