Webgunearen diseinua. Diseinuaren oinarriak

Webgunearen diseinua web-orri bat sortzeko prozesua da, edukia kodetu eta egituratuz, web arakatzaile batean bistaratu eta interaktiboa izan dadin. Orrialde bateko testuak, irudiak, bideoak, estekak, inprimakiak eta beste elementu batzuk diseinatzea dakar, erabiltzaileentzako esperientzia bisual kohesionatu eta erakargarria sortzeko.

Gunearen diseinuak eta diseinuak honako alderdi nagusi hauek ditu:

1. HTML (Hypertext Markup Language):

   • HTMLa web orri baten egitura sortzeko erabiltzen da. Orrialde bateko edukiaren muina osatzen duten goiburuak, paragrafoak, zerrendak, irudiak, estekak eta beste elementu batzuk definitzen ditu.

2. CSS (Cascading Style Sheets):

   • CSS HTML elementuak estilotzeko eta haien itxura kontrolatzeko erabiltzen da. CSS erabiliz, koloreak, letra-tipoak, tamainak eta elementuen kokapena ezar ditzakezu orrialdean.

3. Webgunearen diseinua. Diseinu erantzunkorra:

   • Diseinu responsive-k CSS eta beste teknologia batzuk erabiltzean datza gailu eta pantaila bereizmen desberdinetan behar bezala bistaratu daitezkeen web-orriak sortzeko, hala nola ordenagailuetan, tabletetan eta telefono adimendunetan.

4. javascript:

   • JavaScript erabil daiteke web-orriei interaktibitatea gehitzeko. Programazio-lengoaia honek elementu dinamikoak sortzeko, erabiltzaileekin elkarreragiteko eta orriaren edukia aldatzeko aukera ematen du, birkargatu beharrik gabe.

5. Webgunearen diseinua. Arakatzaileen arteko bateragarritasuna:

   • Diseinuak arakatzaileen arteko bateragarritasuna ere kontuan hartzen du, web-orriak behar bezala bistaratzeko hainbat web-arakatzailetan (adibidez, Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).

6. Errendimenduaren optimizazioa:

   • Diseinuaren alderdi garrantzitsu bat errendimenduaren optimizazioa da, hala nola, irudien tamaina murriztea, cachea erabiltzea eta orriak azkar kargatzeko beste teknika batzuk.

Liburuen diseinu-sorgailuak: DOAKO 5 tresna.

Zure bisitariek utziko ez duten webgune bat lortzen duzula ziurtatzeko, gida hau osatu dugu diseinuaren oinarriak webgunearen diseinua. Egin beharrekoaren oinarriak azalduko ditugu diseinu ona, webgunearen diseinu eraginkorra sortzeko funtsezko teknikak eta webguneen diseinu mota ohikoenak.

Paketeen diseinuaren laburpena

Helburuak. Webgunearen diseinua

Badirudi sinplea den arren, webgunearen diseinuaren helburu bakarra webgunearen helburuei eustea da, bihurketa izan, markaren aitortza, entretenimendua edo beste helburu batzuk. Baina helburuak webgunea edukien bidez adierazten da, eta diseinuaren diseinuak eduki hori modu eraginkorrean nola entregatu deskribatzen du. Hori esanda, hona hemen webgunearen diseinu batek egin ditzakeen ohiko funtzio batzuk:

• Informazio bistaratzea . Webgunearen diseinu on batek informazioa sekuentzia ageriko bati jarraituz antolatzen du, eskaneatzeko erraza da, elementu garrantzitsuenei pisua ematen die eta erabiltzailearen tresnak intuitibo bihurtzen ditu aurkitzeko eta erabiltzeko.
• Erabiltzaileen parte hartzea:  Webgunearen diseinu on batek orrialdea ikusmen erakargarria egiten du, erabiltzailearen begia interesguneetara bideratzen du eta webgunean nabigatzen jarraitzera bultzatzen du.
• Marka: Webgunearen diseinu on batek markak ere badu zeresana, tartea, lerrokatzea eta eskalatzea enpresaren markara egokitzeko.

Goi-mailako helburu hauek webgunearen diseinua bultzatzen dute, baina webgunearen diseinu zehatzak aztertu aurretik, eztabaida dezagun helburu horiek nola ezarri xehetasun gehiagorekin.

Opari-ziurtagiria. Nola sortu?

Webgunearen diseinua garatzeko prozesua. Webgunearen diseinua

Webgunearen diseinu-prozesua webgunearen sorreran hasieran gertatu behar da, hau da, zure webgunearen estrategia garatu eta denbora pixka bat igaro ondoren, baina interfazea sortzeko programa grafiko batera salto egin baino lehen.

Nola sortu ezkontza webgune bat?

Webgune baten diseinua alanbre baten bidez bistaratzen da, hau da, edukia nola moldatuko den erakusten duen oinarrizko alanbre-mapa bat. Garrantzitsua da wireframe diseinua web diseinutik bereiztea, hau da, osoa interfaze grafikoak eta beste elementu bisual batzuk sortzeko prozesua web orri baterako. Webgunearen diseinuaren diseinua web diseinuaren zati handi bat da, eta wireframe-tik hasten da. Egokiena, diseinu bisualak alanbre-diseinuarekin bat etorri behar du, elementu grafikoak estrategikoki kokatu daitezen eta ez lehentasun estetiko iheskorretan oinarrituta.

Horren ondoren, hona hemen webgunearen diseinua sortzeko urratsak:

• Webgunearen diseinua. Definitu eduki-eremu guztiak.

Wireframes-ek normalean edukia karratu eta laukizuzen soil gisa adierazten dute, irudi edo testu bloke bat izan. Garrantzitsua da aldez aurretik jakitea zenbat eduki duzun eta pieza bakoitzaren gutxi gorabeherako tamaina (edo hitz kopurua), elementuak elkarrekin zehaztasunez lotu ahal izateko.

• Sortu wireframes eta prototipo sorta bat. 

Diseinua lumaz eta paperarekin marraztea bezain erraza izan daiteke, baina programa asko ere eskuragarri daude (adibidez.  whimsical ), prozesua optimizatzeko diseinatua. Wireframes-ek ez dutenez zertan artelan zehatzak izan, horietako hainbat sor ditzakezu aldi berean. Zure lehen ideiarekin maitemintzen bazara ere, alanbre gehiago garatu beharko zenuke zure irudimena zabaltzeko eta aukerak emateko. Distraitzen zaituen grafiko dotorerik gabe, erabiltzailearen esperientzian zentratu zaitezke eta jakin dezakezu zein diseinu izango den intuitiboena. Ziurtatu pantailaren tamaina guztiak kontuan hartzen dituzula - diseinu batekin hastea gomendatzen da gailu mugikorrak, eta gero eraiki.

• Probatu, bildu iritzia eta errepikatu. 

Aukera batzuk dituzunean, ziurtatu zure kideen iritzia biltzen duzula. bezalako aplikazioak  Invision  и  Figma,  prototipo interaktiboak sortzeko aukera ematen dizu, botoiak eta nabigazioa erraz probatu ahal izateko benetako web orririk sortu gabe. Probako erabiltzaileek beren burua pantailan grabatzen badute prototipoan nabigatzen ari diren bitartean, honek UX-ko oztopoak ager ditzake. Ohar batzuk dituzunean, itzuli bigarren urratsera eta errepikatu emaitza ezin hobea lortu arte.

Webgunearen diseinua sortzeko literalki urrats hauek badira ere, zaila izan daiteke ulertzea zerk egiten duen eraginkorra diseinua hasi berria zarenean. Hurrengo atalean, diseinu erabakiak hartzeko erabil ditzakezun metodo zehatzak ikusiko ditugu.

Eraginkorra sortzeko funtsezko metodoak. Webgunearen diseinua

Webgunearen diseinuaren diseinua hamarkada luzez egon den praktika bat da, hau da, urteetan zehar diseinu-konbentzio eta printzipio batzuk ezarri dira diseinatzaileak beren lanbidean gidatzeko. Jarraian teknika hauen artean erabilgarrienetako batzuk daude:

Ikusizko hierarkia

Ikusizko hierarkia Diseinuko sei elementu estilizatzeko modu bat da, kontrastea hobetzeko, eduki batzuk besteen gainetik nabarmentzeko. Hori lortzeko, diseinuaren zati garrantzitsuenak erabiltzaileak berehala identifikatu behar dituenak dira, orriaren xedearen arabera. Normalean titularrak, balio-proposamenak, ekintzarako deiak eta erabiltzailearen tresnak, hala nola nabigazioa.

Hierarkia bisuala modu askotan ager daiteke, adibidez, letra-tipoa aukeratuz (tamaina, pisua eta baita letra-konbinazio desberdinak ere), elementu garrantzitsuak orrialdean gorago lerrokatuz edo kolore osagarriak erabiliz elementuak nabarmentzeko.

Irakurketa ereduak. Webgunearen diseinua

Irakurketa ereduek orriak eskaneatzeko modurik ohikoenak deskribatzen dituzte erabiltzaileek eta zuzentutako lerro gisa irudikatzen dira (bektoreak, matematikarientzat). Ikerketak erakusten duenez, webguneko bisitarien % 79k orria gainbegiratzen du soilik, garrantzitsua da eskaneatzea ahalik eta errazena izatea. Horretarako modu eraginkor bat diseinua irakurketa eredu zehatz bat kontuan hartuta diseinatzea da.

Zure diseinuetan irakurketa-ereduak sartzeak elementuak ikuslearen ikusmen-lerroetan estrategikoki jartzea dakar. Kontuan hartu beharreko eredurik ohikoenak Z eredua (zig-saga-bektorea; erabilgarria irudiak osatutako diseinuetarako) eta F eredua (lerro-bektorea; erabilgarria testuak asko dituen diseinuetarako).

Tolesturaren gainean edo azpian. Webgunearen diseinua

Web-diseinuan, "tolestura" pantailaren tamainaren mugak direla eta web orri bat mozten den lerroa da. Orrialde bat kargatzen denean ikusgai dagoen edukiari "orriaren gainean" deitzen zaio, eta erabiltzaileek irekitzeko beherantz korritu behar duten edukiari, berriz, "orriaren behealdean".

Webgunearen diseinuari dagokionez, eduki garrantzitsuenak edo/eta sinesgarrienak (adibidez, balio-proposamena eta ekintzarako deia) segurtasunez jarri behar dira orriaren goialdean, erabiltzaileek bilatu behar izan ez dezaten. Espazio hau 1000 x 600 pixelekoa da pantaila-tamaina gehienetarako. Hori esanda, diseinatzaileek tolestura ere erabil dezakete grafiko interesgarriak mozteko eta kopiatzeko, erabiltzaileak behera korritzera erakartzeko web-orriarekin elkarrekintzan jarraitzen duten bitartean.

Sare-sistemak. Webgunearen diseinua

Sare-sistema bat neurketa eta jarraibide gogorretan oinarritutako diseinua da. Sarea zutabeek (edukia jartzeko izendatutako espazioak) eta erretenek (zutabeen arteko hutsuneak) osatzen dute.

Espazio hutsa

Espazio zuria, batzuetan espazio negatiboa deritzona, inolako edukirik gabeko diseinu baten eremu bat besterik ez da, hau da, espazio hutsa. Erraz ahaztea eta askotan edukiz betetzea tentagarria den arren, espazio zuria izan daiteke garrantzitsuena ondasuna webgunearen diseinuan.

Webgunearen maketa honek arreta erakartzen du espazio zuri eraginkorrekin.

Pentsa ezazu nola orrialde zuri bateko testu-lerro bat askoz eraginkorragoa izango den zure arreta erakartzeko edukiz betetako orrialde batean baino. Espazio zuri zabalak enfasia sortzen du, konposizio osoa irakurtzeko zailagoa bihurtuz. Inprimatutako orrialdeak ez bezala, web-orri baten luzera ez da mugatua, diseinatzaileei askoz askatasun handiagoa ematen die estrategian eta espazio zurien erabileran.

Webguneen diseinu mota arruntak. Webgunearen diseinua

Webguneen diseinuak oso gutxitan sortzen dira hutsetik; izan ere, askotan esan ohi da ez dela horrela. Webgune moderno gehienak Interneten koherentziaz erabiltzen diren diseinu-eskemetan oinarritzen dira, aldaketa txikiekin.

Edozein diseinutan originaltasun mailaren bat garrantzitsua den arren, webguneak berehala ulertu eta erabiltzeko diseinatuta daude. Beraz, urteetan zehar erabiltzaileak diseinu mota batzuetara ohitzen direnean, zentzuzkoa da diseinatzaileek haiekin jarraitzea. Gogoratu azken finean diseinuak praktikoa izan behar duela, eta zenbat eta denbora gutxiago eman erabiltzaileek diseinu berri bat ikasten, orduan eta denbora gehiago emango diote gunea benetan erabiltzeko. Horrez gain, hona hemen webguneen diseinu ohikoenetako batzuk:

Zutabe bakarreko diseinua

Zutabe bakarreko diseinua edukia zutabe bakarrean sekuentzialki jartzen duen diseinua da, askotan zentratuta.

Web orrien diseinu asko hemen hasten dira, kontuan hartuta mugikorrentzako lehen diseinua aspalditik gomendatzen den ikuspegia dela eta mugikorrentzako webguneak sarritan zutabe bakarrean jartzen dira tamaina murrizketen ondorioz. Diseinu hau erabilgarriena da helmugako orrialdeetarako edo kanaletan oinarritutako edukietarako, adibidez sare sozialak eta blogak orriko elementuen kopurua murrizten duelako eta korritzea sustatzen duelako.

Bi zutabeko diseinua. Webgunearen diseinua

Bi zutabeko diseinuak, batzuetan pantaila zatitutako ikuspegian, edukia elkarren ondoan erakusten du.

Hau erabilgarria da bi elementuren arteko dikotomiak nabarmentzeko (adibidez, arropa guneetako publiko desberdinak, zerbitzuaren aurreko/ondoko estiloa edo aukera bikoitzak). prezioak). Grafikoak kopiarekin orekatzeko ere erabilgarria da, Z-ereduaren irakurketa sotilki lagunduz.

Zutabe anitzeko diseinua. Webgunearen diseinua

Zutabe anitzeko diseinuari egunkari edo aldizkariaren diseinua deitzen zaio maiz. Webguneko eduki astunak orrialde bakarrean sartzen ditu.

Sare bat ordena eta hierarkia mantentzeko erabiltzen da normalean, zutabe-espazio zabalagoa eskainiz elementu garrantzitsuenentzat, hala nola eduki nagusia, eta, aldiz, garrantzi gutxiagoko elementuak, hala nola nabigazio-menu bat, alboko barra edo banner-iragarkia, espazio proportzionala gutxiago eskaintzen zaie. Hau erabilgarria da enpresen hasierako orrialdeetarako, irudi edo bideo guneetarako, lineako argitalpenetarako, panel pertsonalizatuetarako eta erosketa webguneetarako, erabiltzaileak bideratzeko eduki eta kategoria asko dituzten webguneetarako.

Diseinu asimetrikoa. Webgunearen diseinua

Diseinu asimetrikoa elementuak eskala desberdinetan eta hurbiltasunean antolatzen direnean da, besterik gabe,  ez simetrikoki. Baina sare-sistema baten kontrakoa den arren, asimetriak ez du kaosa esan nahi.

Oreka garrantzitsua da edozein diseinutan, eta diseinu asimetriko batek ustekabeko moduetan lortzen du hori, esate baterako, eskala handiko errendatzea alde batetik beste elementu txikiago askorekin konbinatuz. Baliagarria da enfasia gehitzeko elementu batzuk (tamaina literalaren, kolorearen edo kokapenaren bidez) beste batzuen gainetik handituz. Irakurketa eredu pertsonalizatuak ere onar ditzake (lehen aipatutako ohikoen aldean).

Diseinuaren ikuspegi ez-konbentzionala hartu dezaketen markek diseinu-estilo hau aproposa izango dute, hau da, arteetan zentratzen diren webguneek, publiko abenturazalea duten edo produktu berritzaile edo aurrerapen bat nabarmendu nahi duten webguneek.

Webgunearen diseinua guztiz prestatuta

Webgunearen diseinu bikainak bisualki erakargarria izateaz gain, intuitiboa ere bihurtzen du. Hau da erabiltzaileei lehen inpresioa sortzeko lehen urratsa, haiek geratzeko eta zure webguneak eskaintzen duen eduki guztia ikustera erakartzeko. Webgunearen diseinua

Webgunearen diseinuaren oinarri hauek abiapuntu bat eman dezaketen arren, ahalegindu beharko zenuke zure guneko bisitariei aparteko esperientzia bat eskaintzeko ahal duzun guztia egiten. Eta webgunearen diseinu moderno bat lortzeko modurik onena diseinatzaile profesional batekin lan egitea da.

 АЗБУКА «