Agar siz veb -sahifalarni loyihalash va yaratmoqchi bo'lsangiz, oldindan rejalashtirsangiz, bu jarayon ancha osonlashadi. Rejalashtirish bosqichida dizayner va mijoz birgalikda ularning ehtiyojlariga mos keladigan format va tartibni topishi mumkin. Rejalashtirish jarayoni sayt uslubiga yoki uslubiga ta'sir qiladi, siz ayta olasizki, bu veb -dizayndagi eng muhim jihat, ayniqsa biznes maqsadlarida bo'lsa.
Qadam
4 -qismning 1 -qismi: Asosiy tuzilmani yaratish
Qadam 1. Veb -sayt vazifasini aniqlang
Agar siz shaxsiy sayt yaratayotgan bo'lsangiz, ehtimol javobni bilasiz. Ammo, agar siz boshqa tashkilot, kompaniya yoki shaxs uchun sayt yaratayotgan bo'lsangiz, ular nimani xohlashini va saytning funksionalligini bilib olishingiz kerak. Siz ko'rsatgan hamma narsa veb -sahifa tugagandan so'ng kuchga kiradi.
- Veb -sayt Storefront -ni talab qiladimi? Foydalanuvchilarga izoh berish kerakmi? Foydalanuvchiga keyinroq hisob yaratish kerak bo'ladimi? Veb -sayt maqolasi yo'naltirilganmi? Yoki tasvirga yo'naltirilganmi? Bu va boshqa savollarning barchasi sizga saytni loyihalashtirishda yordam beradi.
- Bu rejalashtirish jarayonini chizma chizish mumkin, ayniqsa, agar u katta kompaniyaga tegishli bo'lsa va bu loyihani yaratishda ko'p odamlar qatnashsa.
Qadam 2. Sayt xaritasi diagrammasini yarating (sayt xaritasi)
Sayt xaritasi diagrammasi xaritalar jadvaliga o'xshash bo'lib, foydalanuvchilar bir sahifadan ikkinchisiga qanday o'tishini ko'rsatadi. Bu bosqichda sizga veb -sahifa kerak emas, faqat umumiy tushunchalar oqimi. Siz kompyuter dasturidan foydalanib, diagrammalar tuzishingiz yoki qog'ozda o'zingizning eskizingizni yaratishingiz mumkin. Ierarxik tartibga solish va veb -sahifalarga ulanish tushunchalarini ko'rsatish uchun ushbu sxemadan foydalaning.
Qadam 3. Kartani tuzish usulini sinab ko'ring
Guruhli veb -saytlarni ishlab chiqishning mashhur usullaridan biri - har kimning kutganlarini bilish uchun bir nechta kartalardan foydalanish. Bir nechta eslatma kartalarini oling va veb -sahifaning asosiy tarkibini har biriga alohida yozing. Eng yaxshi kontseptsiyani topish uchun ushbu kartalarni jamoangiz bilan birgalikda joylashtiring. Bu usul boshqalar bilan veb -sahifalar yaratishda hamkorlik qilish uchun javob beradi.
Qadam 4. Qog'oz va e'lonlar taxtasidan yoki doskadan foydalaning
Bu kichik byudjet bo'yicha rejalashtirishning original usuli, siz kontentni tezda o'chirishingiz yoki o'zgartirishingiz va oqimni o'zgartirishingiz mumkin. Veb -dizayningizni qog'ozga, so'ngra qog'ozni ip bilan ulang yoki doskaga chiziqlar qo'ying. Bu usul miya bo'roni seanslarida foydalanish uchun juda mos keladi.
Qadam 5. Kontent inventarizatsiyasini yarating
Aslida, yangi veb -dizaynlarga qaraganda, tarmoqlarni qayta loyihalashda foydalanish maqsadga muvofiqdir. Har bir tayyor tarkibni yoki veb -sahifani elektron jadvalga joylashtiring. Nimani olib tashlash va nimani saqlash kerakligini aniqlash uchun ushbu ro'yxat yordamida har bir kontent yoki sahifaning maqsadini yozib oling. Siz veb tuzilishini soddalashtirishingiz va keyinchalik qayta loyihalash jarayonini soddalashtirishingiz mumkin.
4 -qismning 2 -qismi: HTML -ning asosiy konturini yaratish
Qadam 1. Veb -sahifalar ierarxiyasini o'rnatish uchun simli ramka yarating
HTML -ning asosiy shabloni - bu siz yaratadigan saytning rejasi, faqat eng asosiy teglar va namuna (bloklar/andozalar) tarkibidan foydalangan holda. Bu ramka "Internetda nima va qaerda ko'rinadi?" Degan savolga javob beradi. Ushbu konturni yaratishda formatlash va uslublash shart emas.
- Uslubni tanlashdan oldin siz kontentning tuzilishi va oqim jadvalini asosiy kontur bilan ko'rishingiz mumkin.
- HTML -ning asosiy andozalari PDF yoki rasmlar kabi turg'un emas, siz yangi tuzilmalarni yaratish uchun namuna tarkibini tezda siljitishingiz mumkin.
- Asosiy tizim interaktiv bo'lib, u veb -ishlab chiquvchilarga ham, mijozlarga ham foyda keltiradi. Ushbu asosiy ramka oddiy HTML kod bilan yozilganligi sababli, siz uni boshqarishingiz va veb -sahifalarni almashtirish qanday ishlashini bilishingiz mumkin. Buni PDF yordamida bajarish mumkin emas.
Qadam 2. "Kulrang quti" usulini sinab ko'ring
Grey Box -da veb -sahifangiz tarkibini bloklang yoki ta'kidlang, eng muhim kontent tepada. Tarkibni bitta ustunga tartiblang. Masalan, agar sahifa "Kompaniya haqida" bo'lsa, u holda kompaniya haqida batafsil ma'lumot, keyin xodimlar ro'yxati, keyin aloqa ma'lumotlari va hk.
Bu sarlavha va altbilgilarni o'z ichiga olmaydi. Grey Box - bu Internetda paydo bo'ladigan kontentning ingl
Qadam 3. Asosiy reja tuzuvchi dasturini sinab ko'ring
Asosiy veb -ramkani yaratish jarayonida foydalanishingiz mumkin bo'lgan turli xil dasturlar mavjud. Siz o'zlashtirishingiz kerak bo'lgan veb -dasturlash kodi (tili) har bir dastur uchun har xil. Eng mashhur dasturlardan ba'zilari:
- Pattern laboratoriyasi. Bu sayt "atom dizayni" ga bag'ishlangan, har bir kontent kattaroq veb -sahifani tashkil etuvchi "molekula" hisoblanadi.
- O'tish jadvallari. Ushbu veb-sahifa veb-ga asoslangan rejalashtirish va ramka xizmatlarini ko'rsatadi. Bu saytlar pullik va obuna bo'lishni talab qiladi, lekin siz ko'p veb -dasturlash kodlarini o'zlashtirmasdan veb -ramkalarni tezda qurishingiz mumkin.
- Wirefy. Wirefy - "atom dizaynini" taklif qiladigan boshqa sayt. Veb -ishlab chiquvchilar ushbu vositani bepul olishlari mumkin.
Qadam 4. Oddiy HTML belgilashdan foydalaning
Yaxshi asosiy shablon osongina asl saytga aylanadi. Ushbu shablonni yaratish jarayonida veb -uslublar haqida ko'p o'ylamang. Oson tushunilishi va o'zgartirilishi mumkin bo'lgan markirovkadan foydalaning.
Oddiy asosiy ramka ancha yaxshi. Belgilashni yaratishdan maqsad tuzilmani qurishdir. Vizual ko'rinishni keyinchalik CSS va kengaytirilgan belgilash yordamida sozlash mumkin
5 -qadam. Har bir veb -sahifaning asosiy sxemasini tuzing
Siz har bir veb -sahifani bitta asosiy kontur bilan tenglashtirish vasvasasiga tushishingiz mumkin. Aslida, bu sizning saytingizni faqat oddiy va zerikarli qiladi. Har bir sahifa uchun boshqa kontur tuzing, shunda siz har bir sahifaning o'ziga xos dizayni kerakligini tushunasiz.
4 -qismning 3 -qismi: Kontent yaratish
Qadam 1. Veb -sahifa yaratishdan oldin tarkibni tayyorlang
Agar sizda namunalar yoki joy ushlagichlar o'rniga haqiqiy kontent bo'lsa, veb -ko'rishni oldindan ko'rish osonroq bo'ladi. Sizda juda ko'p kontent bo'lishi shart emas, lekin agar siz asl rasmning nusxasidan foydalansangiz, maketingiz ancha yaxshi ko'rinadi.
Maqolaning barcha materiallari bo'lishi shart emas, lekin hech bo'lmaganda haqiqiy sarlavha bo'lishi kerak
Qadam 2. Ajoyib kontent faqat matn emasligini unutmang
Internet oddiy matnli veb -sahifaga qaraganda ancha murakkab. Mehmonlarni jalb qilish va taklif qilish uchun ajoyib veb -sayt yaratish uchun sizga turli xil kontent kerak. Masalan:
- Rasm.
- Ovoz.
- Videolar.
- Veb uzatish yoki veb -oqim (Twitter)
- Facebook integratsiyasi
- RSS
- Veb tasmasi
3 -qadam. Professional fotografdan yordam so'rang
Agar siz fotosuratlaringizni saytingizga qo'shishni xohlasangiz, professional fotosuratlar bilan to'ldirilgan bo'lsa, veb -saytingizdan olgan birinchi taassurotingiz ancha yaxshi bo'ladi. Bitta yaxshi fotosurat past sifatli, yigirmadan ortiq rasmga arziydi.
Uzoq vaqt davomida biznes bilan shug'ullangan professional fotografga qaraganda arzonroq echim sifatida fotografiya san'atining yangi bitiruvchisini qidiring
Qadam 4. Sifatli maqolalar yozing
Veb -sahifadagi yozma ma'lumotlar sizning veb -trafik miqdorini aniqlaydi. Dizayn jarayonida kontent yaratish haqida ko'p tashvishlanmasangiz ham, bu haqda o'ylashni boshlash zarar qilmaydi, chunki saytingiz ishga tushgandan so'ng sizga doimiy ravishda kontent kerak bo'ladi.
Maqola tarkibidan tashqari, veb -sahifani tuzish jarayonida sizga kerak bo'lgan yozma materiallar ham mavjud. Masalan, aloqa ma'lumotlari, kompaniya nomi yoki saytda ko'p marta ishlatiladigan boshqa narsalar
4 dan 4 qism: Kontseptsiyalarni veb -saytlarga aylantirish
Qadam 1. Asosiy elementlarni joylashtiring
Elementlarning bunday joylashuvi saytingizdagi sarlavhalar, izohlar va navigatsiya menyusi kabi har bir sahifaga tegishli. Barcha sahifalar qanday ko'rinishini tekshirish uchun uni juda oddiy uslubda o'rnating. Bu, ayniqsa, veb -joylashuv jarayoniga o'tishda foydalidir.
Tafsilotlar haqida ko'p tashvishlanmang, sarlavha qanday ko'rinishini oldindan ko'rishga harakat qiling
Qadam 2. Oddiy tartib yarating
Soat o'rnini asosiy kontur ustunidan sahifadagi haqiqiy joyga o'tkazishdan boshlang. Masalan, siz namunali navigatsiya menyusini sahifaning chap tomoniga va sarlavhalar ro'yxatini o'ngga ko'chirishingiz mumkin.
Keyingi bosqichga o'tishdan oldin, bir nechta sahifalar uchun veb -maketlarni sinab ko'ring. Boshqalarga siz yaratgan maket o'zini tirik his qiladimi -yo'qmi, buni ko'rib chiqishga ruxsat bering
Qadam 3. Mockup yarating
Veb -saytingizning maketlarini yoki namunali sahifalarini yaratish uchun Photoshop kabi dasturdan foydalaning. Qo'llanma sifatida siz tuzgan tartibdan foydalaning. Tasvirlarni qayta ishlash dasturi yordamida siz maketlarni tezroq qilishingiz va kerakli natijalarni olishingiz mumkin. Bu tasvirlarning natijalari keyinchalik veb -dasturlash kodini yozish jarayonida ma'lumot sifatida ishlatilishi mumkin.
Yaxshi ko'rinishi uchun haqiqiy tarkibni maketga joylashtiring
Qadam 4. Namuna kontseptsiyasini asl mazmuni bilan almashtiring
Veb -sahifalarga tarkib va elementlarni qo'shing. Hozircha veb -uslubi sozlamalarini buzmang, hamma narsani to'g'ri joyga to'plang. Bu sizga veb -uslubdagi o'zgarishlarni keyinroq ko'rib chiqishga yordam beradi.
Qadam 5. Veb uslubi bo'yicha qo'llanma yarating
Uslublar kombinatsiyasini saqlab qolish juda muhim, ayniqsa katta saytlar uchun. Agar sayt biznes maqsadlari uchun mo'ljallangan va allaqachon o'z brendi yoki uslubiga ega bo'lsa, bu sayt dizayniga qo'shilishi kerak. Veb -sahifa uslubi bo'yicha qo'llanma yaratishda nimalarga e'tibor berish kerak:
- Navigatsiya
- Bosh izoh
- Paragraf
- Kursiv belgi
- Qalin xarakter
- Havolalar (faol, harakatsiz, hover)
- Rasmdan foydalanish
- Belgi
- Tugma
- ro'yxat
Qadam 6. Veb uslubini qo'llang
To'g'ri uslub va dizaynni topgach, uni amalga oshiring. CSS - bu veb -sahifada yoki sayt bo'ylab uslublarni amalga oshirishning eng oson usullaridan biri. CSS -dan foydalanish tafsilotlarini yaxshiroq tushunish uchun quyidagi ko'rsatmalarga qarang.
