Veb -saytni qanday loyihalash kerak (rasmlar bilan)

Mundarija:

Veb -saytni qanday loyihalash kerak (rasmlar bilan)
Veb -saytni qanday loyihalash kerak (rasmlar bilan)

Video: Veb -saytni qanday loyihalash kerak (rasmlar bilan)

Video: Veb -saytni qanday loyihalash kerak (rasmlar bilan)
Video: 12 Minutes... HOW CAN I SAVE MY BABY IN TWELVE MINUTES? (Part 1) 2024, May
Anonim

Bu wikiHow sizga professional ko'rinadigan va yaxshi ishlaydigan veb -sayt dizaynini o'rgatadi. Veb-saytingiz dizaynining asosiy qismi oxir-oqibat sizga bog'liq bo'lsa-da, veb-sayt yaratishda bir qator muhim va oldini olish kerak bo'lgan ishlar mavjud.

Qadamlar

2 -qismning 1 -qismi: Veb -saytingizni qanday dizayn qilish kerak

Veb -saytni loyihalash 1 -qadam
Veb -saytni loyihalash 1 -qadam

Qadam 1. Veb -sayt yaratuvchisidan foydalanishni xohlayotganingizni aniqlang

Noldan yaratilgan veb -saytlar HTML -kodlashni juda batafsil tushunishni talab qiladi, lekin siz Weebly, Wix, WordPress yoki Google Sites kabi bepul xosting xizmatidan foydalanib veb -sayt yaratishingiz mumkin. Veb-sayt yaratuvchilari birinchi marta dizaynerlar uchun HTML-ga qaraganda ancha osonroq.

  • Agar siz o'z veb -saytingizni kodlashga qaror qilsangiz, siz HTML va CSS kodlashni o'rganishingiz kerak bo'ladi.
  • Agar veb -saytingizni yaratish uchun vaqt va kuch sarflash sizga yoqmasa, siz o'z saytingizni yaratish uchun veb -sayt dizaynerini yollashingiz mumkin. Mustaqil dizaynerlar har bir joyda soatiga 30 dollardan 100 dollargacha turadi.
Veb -saytni loyihalash 2 -qadam
Veb -saytni loyihalash 2 -qadam

Qadam 2. Saytingizni xaritaga joylashtiring

Veb -sayt yaratuvchisini ochishdan oldin, siz veb -saytingiz qancha sahifaga ega bo'lishini, har bir sahifada nima bo'lishi kerakligini va bosh sahifa va "Haqida" kabi muhim sahifalarning umumiy tartibini bilishingiz kerak. sahifa.

Veb -saytingizning sahifalarini tasavvur qilish osonroq bo'lishi mumkin, agar siz ularning har birining rasmini chizib qo'ysangiz, qanday tarkib bo'lishi kerakligini aniqlaysiz

Veb -saytni loyihalash 3 -qadam
Veb -saytni loyihalash 3 -qadam

Qadam 3. Intuitiv dizayndan foydalaning

Yangi g'oyalar uchun aytish kerak bo'lgan narsa bo'lsa -da, veb -saytingizning asosiy dizayni quyidagi ko'rsatmalarga muvofiq bo'lishi kerak:

  • Navigatsiya variantlari (masalan, turli sahifalar uchun yorliqlar) sahifaning yuqori qismida bo'lishi kerak.
  • Agar siz menyu belgisidan (☰) foydalansangiz, u sahifaning yuqori chap burchagida bo'lishi kerak.
  • Agar siz qidiruv panelidan foydalansangiz, u sahifaning o'ng yuqori qismiga yaqin bo'lishi kerak.
  • Foydali havolalar (masalan, "Haqida" yoki "Biz bilan bog'lanish" sahifasiga havolalar) har bir sahifaning eng pastki qismida joylashgan bo'lishi kerak.
Veb -saytni loyihalash 4 -qadam
Veb -saytni loyihalash 4 -qadam

Qadam 4. Muvofiq bo'ling

Siz tanlagan matn shriftlari, ranglar palitrasi, tasvir mavzusi va dizayn variantlaridan qat'i nazar, veb -saytingizda bir xil qarorni ishlatganingizga ishonch hosil qiling. Bosh sahifa uchun mutlaqo boshqasi ishlatilganda, "Haqida" sahifasida bitta shrift yoki rang sxemasini ko'rish nihoyatda jirkanch bo'lishi mumkin.

  • Masalan, agar siz saytingizning bosh sahifasi uchun faqat sovuq ranglardan foydalansangiz, keyingi sahifada yorqin va baland ranglarni ishlatmang.
  • Shuni yodda tutingki, baland yoki to'qnashuvli ranglardan foydalanish, ayniqsa ranglar dinamik (masalan, harakatlanuvchi) ko'rinishda bo'lsa, oz sonli veb -foydalanuvchilarda epilepsiya qo'zg'atishi mumkin. Agar siz saytingizda bunday ranglardan foydalanishga qaror qilsangiz, tegishli sahifalardan oldin epilepsiya haqida ogohlantirish qo'shganingizga ishonch hosil qiling.
Veb -saytni loyihalash 5 -qadam
Veb -saytni loyihalash 5 -qadam

Qadam 5. Navigatsiya imkoniyatlarini qo'shing

Bosh sahifaning yuqori qismida veb-saytingizning muhim sahifalariga to'g'ridan-to'g'ri havolalarni joylashtirish birinchi marta tashrif buyuruvchilarni muhim tarkibga yo'naltirishga yordam beradi. Ko'pchilik sayt yaratuvchilari ushbu havolalarni sukut bo'yicha qo'shadilar.

Veb -saytingizning har bir sahifasiga faqat sahifaning manzili orqali kirish mumkin emas, balki veb -saytingizdagi variantlarni bosish orqali kirish mumkinligiga ishonch hosil qilish muhimdir

Veb -saytni loyihalash 6 -qadam
Veb -saytni loyihalash 6 -qadam

Qadam 6. Bir -birini to'ldiruvchi ranglardan foydalaning

Boshqa har qanday dizayn singari, veb -sayt dizayni ham ranglarning uyg'un kombinatsiyasiga tayanadi; Shu sababli, bir -biriga mos keladigan ranglarni tanlash juda muhimdir.

Qora, oq va kulrang - bu qaerdan boshlashni bilmasangiz yaxshi kombinatsiya

Veb -saytni loyihalash 7 -qadam
Veb -saytni loyihalash 7 -qadam

Qadam 7. Minimalist dizayndan foydalanishni o'ylab ko'ring

Minimalizm sovuq ranglar, oddiy grafikalar, oq-qora matnli sahifalar va iloji boricha kamroq bezak berishni rag'batlantiradi. Minimalizm shunchaki bezakli elementlarni talab qilmaydi, shuning uchun ko'p mehnat talab qilmasdan, veb -saytingizni professional va jozibali qilib ko'rsatishning oson yo'li.

  • Ko'pgina veb -sayt yaratuvchilarida "minimalist" mavzu bo'ladi, siz veb -saytingizni o'rnatishda tanlashingiz mumkin.
  • Minimalizmga alternativa - "vahshiylik" bo'lib, unda qattiqroq chiziqlar, yorqin ranglar, qalin matn va minimal tasvir ishlatiladi. Shafqatsizlik minimalizmga qaraganda kamroq kuzatuvchiga ega, lekin sizning veb -saytingiz tarkibiga qarab, bu sizning dizayn ehtiyojlaringizga mos kelishi mumkin.
Veb -saytni loyihalash 8 -qadam
Veb -saytni loyihalash 8 -qadam

Qadam 8. Noyob tanlovlar qiling

To'g'ridan-to'g'ri chiziqlar va tarmoqqa qulflangan veb-elementlar xavfsiz garovdir, lekin bir nechta o'ziga xos uslubiy qarorlar qabul qilish sizning saytingizga shaxsiyat bag'ishlaydi va saytingizning ajralib turishiga yordam beradi.

  • Qatlamli ko'rinish yaratish uchun veb -sayt elementlarini assimetrik joylashtirish yoki bir -birining ustiga o'ralgan elementlardan foydalanish tendentsiyalarni buzishdan qo'rqmang.
  • Zarif, o'tkir burchaklar va to'rtburchaklar elementlar ("kartaga asoslangan taqdimot" deb ham ataladi) yumaloq va yumshoq elementlarga qaraganda unchalik qulay emas.

2 -qismning 2 -qismi: Veb -sayt ishlashini qanday oshirish mumkin

Veb -saytni loyihalash 9 -qadam
Veb -saytni loyihalash 9 -qadam

Qadam 1. Mobil optimallashtirish variantlaridan foydalaning

Mobil brauzerlar ish stoli brauzerlariga qaraganda ko'proq veb -trafikni tashkil qiladi, ya'ni sizning veb -saytingizning mobil versiyasiga bo'lgan e'tiboringiz ish stoli veb -saytining rivojlanishiga teng bo'lishi kerak. Veb -sayt yaratuvchilarining ko'pchiligi avtomatik ravishda saytingizning mobil versiyasini yaratadi, lekin siz mobil saytingiz uchun quyidagi ma'lumotlarni yodda tutishni xohlaysiz:

  • Tugmalar (masalan, sayt havolalari) katta va tegish oson ekanligiga ishonch hosil qiling.
  • Mobil qurilmalarda ko'rish mumkin bo'lmagan funktsiyalarni (masalan, Flash, Java va boshqalar) ishlatishdan saqlaning.
  • Veb -saytingiz uchun mobil ilovani yaratishni o'ylab ko'ring.
Veb -saytni loyihalash 10 -qadam
Veb -saytni loyihalash 10 -qadam

Qadam 2. Har bir sahifaga juda ko'p rasm ishlatishdan saqlaning

Ham ish stoli, ham mobil brauzerlar ko'p sonli fotosuratlar yoki videolarni ko'rsatadigan sahifalarni yuklashda qiynalishi mumkin. Veb -dizaynda tasvirlar muhim ahamiyatga ega bo'lsa -da, har bir sahifada bir nechtasini ishlatish keraksiz yuklanish vaqtini keltirib chiqarishi mumkin, bu esa odamlarning ushbu sahifalarga kirishiga to'sqinlik qiladi.

Umuman olganda, veb -saytingiz sahifalari to'rt soniyadan kamroq vaqt ichida yuklanishini xohlaysiz

Veb -saytni loyihalash 11 -qadam
Veb -saytni loyihalash 11 -qadam

Qadam 3. "Kontakt" sahifasini qo'shing

Siz deyarli barcha o'rnatilgan veb -saytlarda aloqa ma'lumotlari (masalan, telefon raqami va elektron pochta manzili) bo'lgan "Biz bilan bog'lanish" sahifasi borligini ko'rasiz; ba'zi saytlarda hatto bu sahifada o'rnatilgan savol shakli mavjud. "Kontakt" sahifasini qo'shish veb -sayt tomoshabinlariga siz bilan to'g'ridan -to'g'ri aloqa qilish imkonini beradi va shu bilan yuzaga kelishi mumkin bo'lgan umidsizliklarga echim qo'shadi.

Veb -saytni loyihalash 12 -qadam
Veb -saytni loyihalash 12 -qadam

Qadam 4. Maxsus 404 sahifa yarating

Agar kimdir sizning veb -saytingizda o'rnatilmagan yoki mavjud bo'lmagan sahifaga kirsa, "404 xato" veb -sahifasi ko'rsatiladi. Ko'pgina brauzerlarda standart 404 sahifa mavjud, lekin siz o'z veb -saytingiz yaratuvchisi sozlamalari orqali o'z sahifangizni sozlashingiz mumkin; agar shunday bo'lsa, quyidagi ma'lumotlarni kiritganingizga ishonch hosil qiling:

  • Yengil xato xabari (masalan, "Tabriklaymiz, siz bizning xato sahifamizni topdingiz!")
  • Saytning bosh sahifasiga qaytish uchun havola
  • Umumiy ko'riladigan havolalar ro'yxati
  • Veb -saytingiz uchun rasm yoki logotip
Veb -sayt yaratish 13 -qadam
Veb -sayt yaratish 13 -qadam

Qadam 5. Iloji bo'lsa, qidiruv panelidan foydalaning

Agar veb -sayt yaratish usuli sizning veb -saytingizga qidiruv panelini qo'shishni qo'llab -quvvatlasa, buni qilish tavsiya etiladi. Bu foydalanuvchilar sizning navigatsiya variantlarini bosmasdan, ma'lum bir sahifaga yoki elementga tezda o'tishini ta'minlaydi.

Qidiruv satrlari sizning auditoriyangiz sinov va xato ishlatmasdan umumiy atamani qidirmoqchi bo'lganda ham foydalidir

Veb -saytni loyihalash 14 -qadam
Veb -saytni loyihalash 14 -qadam

Qadam 6. Bosh sahifangizga ko'p vaqt sarflang

Agar kimdir sizning veb -saytingizning bosh sahifasiga kirsa, u sizning veb -saytingiz mavzusining mohiyatini darhol bilib olishi kerak; Bunga qo'shimcha ravishda, uy sahifasining barcha elementlari tezda yuklanishi kerak, shu jumladan navigatsiya variantlari va har qanday tasvirlar. Sizning bosh sahifangiz quyidagi jihatlarga ega bo'lishi kerak:

  • Harakatga chaqiruv (masalan, bosish tugmasi yoki to'ldirish uchun shakl)
  • Navigatsiya asboblar paneli yoki menyu
  • Jozibali grafik (masalan, bitta qattiq rasm, video yoki qo'shma matnli rasmlarning kichik guruhi)
  • Veb -saytingizning xizmati, mavzusi yoki diqqat markaziga tegishli kalit so'zlar
Veb -saytni loyihalash 15 -qadam
Veb -saytni loyihalash 15 -qadam

Qadam 7. Veb -saytingizni bir nechta platformalarda bir nechta brauzerlarda sinab ko'ring

Bu juda muhim, chunki har xil brauzerlar veb -saytingizning turli jihatlarini boshqacha boshqarishi mumkin. Veb -saytingizni targ'ib qilishni boshlashdan oldin, Windows, Mac, iPhone va Android platformalarida quyidagi brauzerlarda o'z veb -saytingizga tashrif buyuring va undan foydalaning:

  • Gugl xrom
  • Firefox
  • Safari (faqat iPhone va Mac)
  • Microsoft Edge va Internet Explorer (faqat Windows)
  • Bir nechta Android telefonlarida o'rnatilgan brauzer (masalan, Samsung Galaxy, Google Nexus va boshqalar).
Veb -saytni loyihalash 16 -qadam
Veb -saytni loyihalash 16 -qadam

Qadam 8. Veb -saytingiz yoshiga qarab yangilanishni davom ettiring

Dizayn tendentsiyalari, havolalar, fotosuratlar, kontseptsiyalar va kalit so'zlar vaqt o'tishi bilan o'zgarib turadi, shuning uchun siz yangiliklardan xabardor bo'lish uchun veb -saytingizga o'zgartirish kiritishni davom ettirishingiz kerak bo'ladi. Bu sizning veb -saytingizning ishlashini boshqa shunga o'xshash veb -saytlar bilan kamida uch oyda bir marta tekshirishni talab qiladi (yaxshisi tez -tez).

HTML uchun asosiy yordam

Image
Image

HTML bilan veb -sahifa namunasi

WikiHow va ni qo'llab -quvvatlang barcha namunalarni oching.

Image
Image

HTML aldash varaqlari

WikiHow va ni qo'llab -quvvatlang barcha namunalarni oching.

Image
Image

Oddiy veb -sahifa namunasi

WikiHow va ni qo'llab -quvvatlang barcha namunalarni oching.

Maslahatlar

  • Veb -saytga kirish - bu veb -saytni rivojlantirishning yana bir muhim jihati. Bunga eshitish qobiliyati cheklangan tomoshabinlar uchun taglavhalar, ko'r-ko'rona tashrif buyuruvchilar uchun audio tavsiflar va agar sizning veb-saytingizda tutilish keltirib chiqarishi mumkin bo'lgan effektlar ishlatilsa, fotosensitivlik haqida ogohlantirishlar kiradi.
  • Veb -sayt yaratuvchilarining ko'pchiligida siz tanlagan elementlarni qo'shishdan oldin saytingizning dizayni va dizaynini mustahkamlash uchun foydalanishingiz mumkin bo'lgan shablonlar to'plami mavjud.

Ogohlantirishlar

  • Ko'pchilik sayt yaratuvchilari bepul; ammo, agar siz o'z domeningizdan foydalanmoqchi bo'lsangiz (masalan, "www.yourname.wordpress.com" o'rniga "www.yourname.com"), siz har oylik yoki yillik to'lovni to'lashingiz kerak bo'ladi.
  • Plagiatdan saqlaning va mualliflik huquqining barcha qonunlariga rioya qiling: ruxsatisiz tarmoqdan tasodifiy tasvirlarni yoki hatto tarkibiy elementlarni qo'shmang.

Tavsiya: