9 këshilla thelbësore për krijimin e faqeve në internet për fillestarët e DIY

Parimet themelore të hartimit të uebit & praktikat më të mira për të ndihmuar fillestarët e çdo niveli të hartojnë vizualisht një profesionist & faqen e internetit të lezetshme në vetvete.


Këshilla për krijimin e faqeve në internet për fillestarët

Këto ditë është e mundur për këdo që të jetë një projektues në internet. Po, është një deklaratë e guximshme – por me një akses të shtuar në softuerin e dizajnit me burim të hapur si GIMP, dhe me platformat e ndërtimit të faqeve DIY si Wix dhe Weebly që përmbytin tregun, linja midis amator dhe mirëbesim projektuesi i uebit është bërë shumë më e hollë dhe më e rrezikshme që nga vonë. Gjëja interesante në lidhje me krijimtarinë është se askush nuk mund të vendosë për ju kur jeni “gati” për të përmbushur një rol të caktuar. Shumë yje të rock nuk morën kurrë mësime në muzikë; shumë artistë të suksesshëm kurrë nuk studiuan anatominë njerëzore; dhe shumica e stilistëve të internetit atje nuk kanë një shkallë zyrtare. Pra, nëse keni krijuar uebfaqen e biznesit tuaj, atëherë me siguri mund të thoni që jeni një “projektues në internet”? Kjo është për ju që të përcaktoni.

Anyoneshtë e mundur për cilindo që të jetë një projektues në internet me platforma ndërtimi faqesh DIY.

Klikoni për të Tweet

Nëse jeni një ndjekës i këtij blogu, atëherë ka të ngjarë që keni marrë vendimin për të ndërtuar faqen tuaj të internetit vetë. Ndërsa mund të ndjeheni të mbingarkuar plotësisht nga sasia e mprehtë e informacionit që ka për të mësuar në lidhje me zhvillimin e faqes në internet, ju mund të siguroheni mirë duke ditur që pronarët e bizneseve me përvojë edhe shumë pak të projektimit vërtet mund të krijojnë faqe interneti që duken profesionale. E gjitha fillon me ndjekjen e disa bazave themelore që, nëse aplikohen si duhet, mund të shkojnë milje drejt besueshmërisë së dizajnit të faqes suaj dhe përvojës së përdoruesit.

Farë është ky udhëzues (dhe çfarë nuk është)

Për të qenë të qartë, ne po flasim për bazat e dizajnit të uebit këtu dhe nuk do të kalojmë në tema më të avancuara si sistemet e rrjetit, JavaScript ose kornizat CSS. Ky udhëzues gjithashtu supozon se jeni duke përdorur një lloj ndërtuesi të faqes në internet, në mënyrë që të mund të krijoni një faqe në internet pa kodim. Pavarësisht nëse përdorni një model ekzistues nga ndërtuesi i faqes suaj të internetit ose filloni nga e para (një mundësi më ambicioze për fillestarët), ky udhëzues do t’ju ndihmojë me parimet dhe praktikat themelore të dizajnit të internetit që duhet të aplikoni në faqen tuaj të internetit. Një artikull i vetëm për hartimin e uebit nuk do t’ju kthejë menjëherë në një ekspert, kështu që konsideroni këtë hapin tuaj të parë në një botë më të madhe.

Këshillë e shpejtë: Njohuri themelore për HTML dhe CSS do të jenë përfitime të mëdha për çdo projektues të ri të internetit. Nëse vërtet doni të merrni duart tuaja në kodim, unë sugjeroj të kontrolloni W3Schools për të mësuar më shumë rreth fondacionit.

Bazat e Web Design për fillestarët

Le ta zëmë, a do të jemi? Këtu janë disa nga tendencat dhe udhëzimet më të dobishme për të ditur kur ndërtoni uebfaqen tuaj të parë:

1. Vendosni Mausin, Merrni një Laps

Uebfaqja juaj tashmë mund të ekzistojë si një entitet i bukur, i plotë në mendjen tuaj – kjo është arsyeja pse menjëherë hidheni në Photoshop (ose më keq, një shfletues dhe HTML) për ta planifikuar. Whoa, whoa – ftohi avionët për një sekondë! Mos e vendos karrocën para kalit. Së pari, nxirrni një laps dhe një letër prej letre dhe filloni t’i vendosni idetë tuaja në diçka lehtësisht të prekshme. Kjo është një fazë e rëndësishme për të hartuar strukturën e faqes tuaj duke përdorur asgjë më shumë se drejtkëndësha, doodle dhe ide të frymëzuara (shpesh të quajtura wireframing). Gjërat mund të jenë super të përafërt në këtë pikë; askush nuk do ta shohë atë por ti.

Shembull kornizë telesh në internetNjë kornizë telesh në internet ju ndihmon të zhvilloni një plan urbanistik dhe strukturë për faqen tuaj të internetit, ndërsa përmirësoni përvojën e përdoruesit (UX) dhe kurseni kohë.

Farshtë shumë më e lehtë në këtë fazë të ndryshoni faqosjet që fillimisht mendonit se do të funksiononin, por tani zbuloni se janë të rrëmbyera dhe konfuze në letër. Kjo do t’ju ​​kursejë shumë orë zhgënjimi në krahasim me bërjen e të njëjtit zbulim pasi faqja është e koduar dhe në një shfletues. Plus, ajo ndihmon në mënyrë të konsiderueshme për të krijuar një faqe në internet kur ju keni një referencë në dorë për t’u këshilluar në vend se të verbër.

2. Ndiqni një Hierarki

Shtë një fakt që shumica e shfletuesve në internet priren të skanojnë vetëm faqet e internetit sesa të marrin kohën për të lexuar gjithçka. Ju duhet të jeni gati për këtë nga duke e vendosur së pari përmbajtjen më të rëndësishme. Kjo do të thotë që një përdorues duhet të jetë në gjendje të tretë informacionin më jetik në një faqe të gjitha në një ekran në ngarkesën fillestare, pa pasur nevojë të zmadhojë ose lëviz. Kjo është sigurisht shumë më e lehtë e thënë sesa bëhet. Këtu janë disa këshilla për t’ju ndihmuar të kuptoni më mirë domethënien e kësaj teorie të projektimit:

Mbani përmbajtjen “Mbi Dosjet”

Ne e quajmë atë ekran fillestar të përmbajtjes së ngarkuar “dele” – dhe gjithçka poshtë saj që duhet të lëvizet për tu parë konsiderohet sekondare. Në përgjithësi, informacioni juaj më i rëndësishëm qëndron “mbi dele”. Gjëja kryesore për të arritur brenda kësaj fushe është të tërheq një përdorues për të ndërmarrë ndonjë veprim ose të gjenerojë nxitje për të lëvizur poshtë më tej.

Përdorimi i një Imazhi “Hero”

Një prirje e zakonshme në krijimin e faqeve në internet në ditët e sotme është plotësimi i kësaj zone “sipër dele” me atë që quhet një imazh ose flamur “hero”. Këto janë imazhe në sfond të ekranit të plotë me tekst të përmbledhur shumë të përmbledhur dhe të pikës, që zakonisht çiftëzohet me një buton thirrje për veprim. Me sa duket, qëllimi i tërë faqes mund të përmbahet në këtë zonë baneresh, megjithëse shërben gjithashtu si një abetare e shkëlqyeshme për përmbajtjen që duhet të ndiqet.

Imazhi Hero / Shembull baner

“Dosja” mund të ndryshojë në varësi të pajisjes

Këtu janë gjërat kur komplikohen – dhe pse nuk duhet të mbingarkoni veten duke u përpjekur të përshtateni gjithçka mbi këtë linjë magjike. Në varësi të pajisjes së përdoruesit, dimensionet e ekranit mund të ndryshojnë jashtëzakonisht shumë. Një ekran 5K që lëshon nofulla ka një rezolucion vertikal prej 2880 pikselësh, ndërsa një iPhone 5 ka më pak se gjysmën e kësaj. Kjo do të thotë që përdoruesit e lëvizshëm thjesht nuk do të jenë në gjendje të përshtaten sa më shumë përmbajtje në pasuritë e patundshme në ekranin e tyre. (Më shumë për këtë më vonë.)

Këshillë e shpejtë: Rregulli i përgjithshëm është që të sigurohet që përmbajtja “sipër dele” përshtatet në emëruesin më të ulët të dimensioneve të ekranit. Kjo zakonisht pranohet si 768 piksele me rezolucion vertikal.

3. Tipografia është modeli juaj

Në qoftë se nuk drejtoni një biznes fotografie, teksti është elementi i vetëm më i rëndësishëm i çdo faqe në internet, kështu që është e rëndësishme të bëni këtë pjesë si duhet. Hierarkia e faqes suaj të internetit varet shumë nga tipografia që ju zgjidhni: si titujt, nëntitujt dhe teksti i trupit tuaj ndjekin një rrjedhë natyrore dhe mbeten vizualisht të dallueshme nga njëra-tjetra. Për një vështrim gjithëpërfshirës të tipografisë, shikoni udhëzuesin tonë për praktikat më të mira. Këtu janë disa ndërprerje të rëndësishme:

  • Sigurohuni që teksti është i lexueshëm (shmangni shkronjat me lule!) dhe mjaft i madh (zakonisht rreth 16px për trupin).
  • Rrinë jo më shumë se dy shkronjaDhe sigurohuni që ata të bashkohen mirë bashkë!
  • Jepni paragrafët tuaj një vend për të marrë frymë mes njëri-tjetrit dhe vendosni sa duhet mbushje e sipërme ose diferencë në titujt tuaj për të shënuar prishje të qarta në përmbajtje.
  • Shmangni linjat e gjata të tekstit. Linesshtë më e lehtë në sy që linjat e paragrafit të jenë afërsisht jo më shumë se 15 fjalë të gjataA dhe pak më pak se ajo për ekranet celular.
  • shrift me dhëmbëza fontet janë zakonisht më të mirat vetëm në shtyp print përveç nëse ato përdoren në tituj të mëdhenj në internet.

4. Ngjyrat & Kontrasti janë thelbësorë

Ne kemi folur për psikologjinë e ngjyrave në gjatësi, por koncepti vazhdon të përsëritet. Ngjyrat që zgjidhni për faqen tuaj të internetit luajnë një rol të madh në mënyrën se si përdoruesit e perceptojnë markën tuaj, si dhe sa të motivuar mund të ndjehen për të ndërmarrë veprime (d.m.th .: blerja e gjërave) përmes faqes tuaj të internetit. Pse? Epo, çdo ngjyrë ngjall emocione të caktuara, ose për shkak të natyrës së tyre të natyrshme ose nga kushtëzimi kulturor, këto ngjyra janë shoqëruar me lloje të caktuara biznesesh. Nëse kompania e fëmijëve për lodra ose një këshilltar financiar pikturuan të gjithë faqen e tyre në internet me zi të rreptë, kjo do t’i dërgonte sinjalet e gabuara audiencës së tyre të synuar. Në anën tjetër, një portokalli e ndritshme ose një blu e këndshme, përkatësisht, do të kapnin tonin e përsosur dhe vetëdijen për klientët e tyre.

Shembull i ngjyrave të dizajnit të uebitBlu është një ngjyrë që ngjall vetëbesim dhe besim, një zgjedhje popullore për faqet e internetit të lidhura me financat.

Nëse keni krijuar tashmë ngjyrat e markës suaj, atëherë përdorni ato në faqen tuaj të internetit. Shtë më së miri, megjithatë, ta ruajmë atë jo më shumë se tre ngjyra për faqen tuaj; si shkronjat, nuk dëshironi ta teproni këtu ose faqja juaj mund të përfundojë me çrregullime të shumta të personalitetit. Jini gjithashtu të kujdesshëm ndaj shumë spërkatjeve të ngjyrave në faqen tuaj të internetit; sytë tanë tërhiqen prej tyre si kurthe të mjaltit dhe ato mund të ndërpresin rrjedhën natyrale të përmbajtjes suaj. Përdorni ngjyrën vetëm kur është më e nevojshme, të tilla si për lidhje ose butona.

Në temën e kontrast, është thelbësore që teksti juaj të dalë nga sfondi. Përdorimi i ngjyrave të lehta, të verdha ose zarzavate për shkronjat tuaja pothuajse me siguri do t’i bëjë ato të padukshme në faqe. E zeza në një sfond të bardhë është kombinimi më i madh i kontrastit dhe në përgjithësi është ajo që duhet t’i përmbaheni.

Këshillë e shpejtë: Shtë më mirë të shmangni ngopja e plotë me ngjyra në internet. Pure Red (vlera hex # ff0000) është pak a shumë e mprehtë në sy. Në mënyrë të ngjashme, e zeza e pastër (# 000000) për shkronjat ka tendencë të lëkundet shumë fort për sytë, ndërsa një e zezë paksa e zvogëluar (# 333333) bën leximin më të lehtë.

Ju gjithashtu dëshironi që teksti juaj të pop kundër imazheve në sfond. Përdorimi i fotove shumë të zënë mund të shkëpusë nga teksti, kështu që për të shmangur këtë problem ose përdorni fotografi që janë më pak të hollësishme, ose përdorni një mbulesë, të themi, rgba (51,51,51,0.5) për të ndihmuar në zbutjen e imazhit nën tekst.

shembull i mbivendosjes së figurësPërdorni një mbivendosje pas tekstit për ta ndihmuar që të dalë nga sfondi.

Kontrasti gjithashtu luan një rol në mënyrën se si përdoruesit tërhiqen nga elementë të caktuar kryesorë të faqes tuaj. Butonat tuaj më të rëndësishëm të thirrjes për veprim duhet të tërheqin vëmendjen përmes përdorimit të ngjyrave të kundërta. Një blu “Bleni Tani!” butoni humbet urgjencën dhe vlerën kur gëlltitet nga një faqe interneti që përdor blu kudo – por një buton i kuq në të njëjtën faqe kap vëmendjen e një përdoruesi duke bërtitur “Hej! Më kliko! ”

6. Përdorimi i fotove

Zgjedhja e pamjeve të duhura për t’u përdorur në faqen tuaj të internetit pjesërisht varet nga aftësia juaj artistike, por ka edhe konsiderata intelektuale për të marrë këtë duhet të ndihmojnë në procesin tuaj të përzgjedhjes. Së pari, shmangni zbukurimin e faqes tuaj me foto të jashtme thjesht sepse ato mund të duken bukur. Përkundrazi, mendoni se si secila imazh që përdorni shërben për qëllimin e vet, dhe më e rëndësishmja se si vepron përmbajtje. Një foto e zgjedhur mirë mund të përcjell markën tuaj, shërbimin, produktin ose audiencën tuaj shumë më efektive sesa fjalët. Përdorni fotografi për t’i ndihmuar përdoruesit tuaj të kuptojnë diçka, të ngjallin emocione ose të frymëzojnë besim dhe besim; përdorimi i tyre thjesht për arsye estetike duhet të jetë dytësor.

Kuptimi i llojeve të skedarëve & ngjeshje

Ekziston një hap shtesë që duhet të merret për të përdorur imazhe në internet. Ato foto të zbukuruara që merrni nga faqet si Shutterstock dhe iStock mund të jenë mjaft masive (5,000+ piksele horizontale dhe 10+ megabajt në madhësi) që është mirë për tu shtypur, por ato nuk janë të përshtatshme për faqet e internetit. Jo të gjithë kanë internet me super të shpejtë të fibrave, kështu që ju duhet të zvogëloni madhësinë e imazheve tuaja për të akomoduar për kohë ngarkimi (për të mos përmendur 40% të vizitorëve do të largohen nëse faqja kërkon më shumë se 3 sekonda për t’u ngarkuar!). Në mënyrë tipike, ju doni të mbani secilën nga imazhet tuaja në një maksimumi i 500 kilobajt në madhësi, megjithëse madhësia juaj mesatare e skedarit ndoshta duhet të jetë rreth 100 kilobajt.

  • JPEG është formati standard për fotot. Shtë një format humbës, që do të thotë se cilësia e tij e figurës zvogëlohet kur kompresohet. Nëse jeni duke përdorur një JPEG për një imazh të sfondit me gjerësi të plotë, atëherë unë rekomandoj që të ruani rezolutën e saj horizontale jo më pak se 1200px. Për qëllime të përgjithshme, shmangni përdorimin e ndonjë imazhi me më pak se 600px rezolucion horizontale, pasi ka të ngjarë të shfaqet i paqartë në ekranet moderne.
  • PNG është zgjedhja e preferuar për grafikë ose për imazhet që kërkojnë transparenca. Shtë një format pa humbje, i cili është i shkëlqyeshëm për ruajtjen e cilësisë së figurës, por gjithashtu mund të rrisë madhësitë e skedarëve. Në përgjithësi do të përdorni grafika PNG për ilustrime, ikona ose imazhe më të vogla që mund të grumbullohen në krye të elementeve të tjerë për shkak të transparencës së tyre. Ju rrallë do të keni nevojë për një PNG të jetë më e madhe se 1000px.
  • SVG (Grafik Vektor i Shkallëzueshëm) është një format më i ri që po zëvendëson GIF dhe madje edhe PNG në disa raste. Bukuria e SVG është që ajo mund të jetë aq e madhe ose aq e ekranit e vogël sa të keni nevojë për të qenë, të gjitha duke ruajtur qartësi dhe pastërti të përsosur (dhe prapë të jenë një madhësi e vogël skedari). Ju duhet të merrni parasysh përdorimin e SVG për çdo logo, ikonë ose grafik vektor në faqen tuaj të internetit; pasi shfaqjet e larta të DPI tani janë duke u bërë e zakonshme, mprehtësia e SVG do të sigurojë cilësinë më të madhe të imazhit.

Shembuj të llojit të skedarit të figurës

6. Dizajni i Parë Mobile

Tani kemi arritur në një kohë kur shumica e njerëzve konsumojnë përmbajtje në internet me telefonat e tyre sesa në një kompjuter desktop. Si rezultat, ekziston një përparësi shumë më e madhe në krijimin e uebit në mënyrë specifike për përvojën e lëvizshme, e cila ka çuar në filozofinë e dizajnit “mobile-first”.

Në thelb kjo do të thotë që, gjatë fazës tuaj fillestare të skicimit dhe planifikimit në letër, është mirë që së pari të përqendroheni në paraqitjen e lëvizshme të faqes. Vetëm përmbajtja më e rëndësishme e nevojshme për funksionimin e faqes tuaj do të shfaqet në ekranet më të vogla. Kjo ju detyron të Thjeshtojë paraqitjen tuaj dhe prerë çdo element tërheqës që nga fillimi. Mendoni përsëri për përmbajtjen tuaj “mbi dele”: nëse së pari siguroni që të gjitha informacionet e rëndësishme mund të futen në ekranin fillestar të një telefoni, atëherë do të dini me siguri se ai do të përshtatet në ekranet më të mëdha. Pasi të keni gozhduar paraqitjen thelbësore të lëvizshme, atëherë mund të filloni të shtoni zbukurime ose imazhe më të mëdha për ekranet e desktopit.

Paraqitja juaj e celularit supozon një dizajn më vertikal që frymëzon lëvizjen, sesa peizazhin e gjerë të një desktopi. Nëse, të themi, faqja juaj e produktit shfaq renditje në një rrjet prej 3 kompjuterash, atëherë zakonisht paraqitja juaj e lëvizshme do t’i shfaqë ato vetëm si një kolonë e vetme.

Po, kjo do të thotë që në thelb duhet të krijoni disa paraqitje për secilën faqe të faqes tuaj. Fatmirësisht, çdo ndërtues i mirë i faqes në internet duhet të sigurojë modele të përgjegjshme që rregullojnë këto paraqitje automatikisht, kështu që do të duhet vetëm t’i rregulloni ato.

Këshillë e shpejtë: Sigurohuni që asnjë element i vetëm në faqen tuaj, veçanërisht nëse është interaktiv, nuk është më i vogël se 44px nga 44px në madhësi. Pse? Ky është objektivi më i vogël që mund të jetë aty ku gishti akoma mund ta trokasë me saktësi.

7. Mbani gjërat të rregulluara

Kur elementët duken të shtruar në mënyrë sporadike në faqen tuaj, shpesh është për shkak të një çështje shtrirjeje. Imagjinoni faqen tuaj në një fletë letre grafike. Ndajeni atë në kolona të barabarta duke vizatuar, për shembull, gjashtë drejtëza. Tani dëshironi të siguroheni që skajet e majta të elementeve tuaj shpërndahen dhe rreshtohen në vetëm këto gjashtë linja vertikale.

8. Mbajeni thjeshtë

Shpesh thuhet se dizajni më i mirë i uebit kalon pa u vënë re; është vetëm një dizajn i dobët që tërheq vëmendjen ndaj vetvetes. Siç u përmend më herët, aspekti më i rëndësishëm i çdo faqe në internet është thjesht teksti i tij. Nëse mund të siguroni një tipografi të jashtëzakonshme që është një gëzim për të lexuar, shanset janë që nuk do të duhet të bëni një tërësi shumë më tepër. Përpjekja për të mbikëqyrur faqen tuaj thjesht do të rrëmbejë dhe komplikojë gjërat.

A janë të domosdoshme hijet e kutisë? Modelet e çmendura, të zbukuruara? Dhjetëra ngjyra? Me siguri jo.

9. Hapësira të mëdha të hapura

Përmbajtja juaj ka nevojë për hapësirë ​​për të marrë frymë. hapesire e bardhe është zgjedhja mbizotëruese e dizajnit për faqet e internetit moderne: hapësira të gjera dhe të hapura pa asgjë për të mbështetur zonat midis përmbajtjes. Shtë një mënyrë më e këndshme për të tretur informacionin, dhe gjithashtu ju inkurajon të hiqni tekstin dhe imazhet e tepërt për ta mbajtur faqen të pastër.

përfundim

Dizajni i uebit mund të jetë një fushë e përhapur e teknologjisë për të mësuar, koncepte për të praktikuar, gjuhë për të studiuar dhe arti për të zotëruar. Vetëm me përvojë do të fillojnë të kuptojnë të gjithë këta komponentë, por ju tashmë jeni mirë në rrugën tuaj vetëm duke kuptuar bazat e asaj që e bën punën e internetit të mirë. Shpresoj që ky udhëzues të shërbejë si pika juaj e fillimit dhe që ju jep besimin të merrni faqen tuaj në duart tuaja dhe ta ndërtoni atë në mënyrën që vetëm një pronar biznesi e di më së miri.

Një dizajner ka lindur!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map