Хэрэв та вэб хуудсуудыг зохион бүтээж, бүтээхийг хүсч байвал урьдчилан төлөвлөж байгаа бол энэ үйл явц илүү хялбар болно. Төлөвлөлтийн үе шатанд дизайнер ба үйлчлүүлэгч нь өөрсдийн хэрэгцээнд нийцсэн формат, байршлыг олохын тулд хамтран ажиллах боломжтой. Төлөвлөлтийн үйл явц нь сайтын хэв маяг, хэв маягт нөлөөлдөг тул үүнийг вэб дизайны хамгийн чухал тал гэж хэлж болно, ялангуяа энэ нь бизнесийн зорилгоор хийгдсэн бол.
Алхам
4 -ийн 1 -р хэсэг: Үндсэн бүтцийг бий болгох
Алхам 1. Вэбсайтын чиг үүргийг тодорхойлох
Хэрэв та хувийн сайт үүсгэж байгаа бол хариултыг аль хэдийн мэдэж байсан байх. Гэсэн хэдий ч, хэрэв та өөр байгууллага, компани, хүнд зориулж сайт үүсгэж байгаа бол тэд юу хүсч байгаагаа болон сайтын функцийг олж мэдэх хэрэгтэй. Таны энд заасан бүх зүйл вэб хуудас дууссаны дараа хүчин төгөлдөр болно.
- Вэбсайтад Storefront шаардлагатай юу? Хэрэглэгчийн сэтгэгдлийг бичих ёстой юу? Хэрэглэгч дараа нь данс үүсгэх шаардлагатай юу? Вэбсайтын нийтлэлд чиглэсэн үү? Эсвэл зураг руу чиглэсэн үү? Эдгээр болон бусад бүх асуултууд нь сайтын дизайн, дизайнд туслах болно.
- Энэхүү төлөвлөлтийн үйл явцыг зураг хэлбэрээр зурж болно, ялангуяа энэ нь том компанид зориулагдсан бөгөөд энэ төслийг бүтээхэд олон хүн оролцдог.
Алхам 2. Сайтын газрын зургийн диаграм (сайтын зураг) үүсгэх
Сайтын зургийн диаграм нь урсгалын диаграмтай төстэй бөгөөд хэрэглэгчид нэг хуудаснаас нөгөө хуудас руу хэрхэн шилжиж байгааг харуулдаг. Энэ үе шатанд танд вэб хуудас хэрэггүй, зөвхөн ерөнхий ойлголтын урсгал хэрэгтэй болно. Та компьютерийн програм ашиглан диаграм үүсгэх эсвэл өөрийн гараар цаасан дээр зурах боломжтой. Энэ диаграмыг ашиглан шаталсан зохион байгуулалт, вэб хуудасны холболт гэсэн ойлголтуудыг харуул.
Алхам 3. Карт бичих аргыг туршиж үзээрэй
Бүлгийн вэб хөгжүүлэх нэг түгээмэл арга бол хүн бүрийн хүлээлтийг мэдэхийн тулд хэд хэдэн карт ашиглах явдал юм. Хэд хэдэн тэмдэглэлийн карт аваад вэб хуудсын үндсэн агуулгыг тус бүрээр нь бич. Хамгийн сайн ойлголтыг олохын тулд эдгээр картуудыг багтайгаа хамт зохион байгуул. Энэ аргыг бусадтай вэб хуудас үүсгэх тал дээр хамтран ажиллахад ашиглахад тохиромжтой.
Алхам 4. Цаас, мэдээллийн самбар, эсвэл самбар ашиглана уу
Энэ бол бага төсөвтэй анхны төлөвлөлтийн арга бөгөөд та агуулгыг хурдан устгах эсвэл өөрчлөх, урсгалыг өөрчлөх боломжтой. Вэб дизайнаа цаасан дээр зураад цаасаа утсаар холбоно уу эсвэл самбар дээр шугам зурна уу. Энэ аргыг тархины довтолгоонд ашиглахад маш тохиромжтой.
Алхам 5. Агуулгын тооллого үүсгэх
Үнэн хэрэгтээ энэ нь шинэ вэб дизайн хийхээс илүү вэбсайтыг дахин төлөвлөхөд ашиглах нь илүү тохиромжтой байдаг. Дууссан контент эсвэл вэб хуудас бүрийг хүснэгтэд оруулна уу. Энэ жагсаалтыг ашиглан юуг хасах, юуг хадгалахаа тодорхойлохын тулд агуулга, хуудас бүрийн зорилгыг тэмдэглэж аваарай. Та вэбийн бүтцийг хялбарчилж, дараа нь дахин зохион бүтээх үйл явцыг хялбарчилж болно.
4 -ийн 2 -р хэсэг: HTML -ийн үндсэн тоймыг бий болгох
Алхам 1. Вэб хуудасны шатлалыг бий болгохын тулд wireframe үүсгэнэ үү
HTML -ийн үндсэн загвар бол таны бүтээх сайтын зураг төсөл бөгөөд зөвхөн хамгийн энгийн хаяг, дээж (блок/загвар) агуулгыг ашиглана. Энэхүү хүрээ нь "Вэб дээр юу харагддаг вэ?" Гэсэн асуултанд хариулдаг. Энэхүү тоймыг гаргахад форматлах, загварчлах шаардлагагүй.
- Загварын тохиргоог сонгохоосоо өмнө агуулгын бүтэц, урсгалын диаграмыг үндсэн тоймоор харах боломжтой.
- HTML -ийн үндсэн загварууд нь PDF эсвэл зураг шиг статик биш тул та шинэ бүтцийг бий болгохын тулд дээжийн агуулгыг хурдан гүйлгэх боломжтой.
- Үндсэн хүрээ нь интерактив бөгөөд вэб хөгжүүлэгчид болон үйлчлүүлэгчдэд ашигтай байдаг. Энэхүү үндсэн хүрээ нь энгийн HTML кодоор бичигдсэн тул та үүнийг удирдан чиглүүлэх боломжтой бөгөөд вэб хуудас солих ажил хэрхэн явагдаж байгааг мэдэх боломжтой. Үүнийг PDF ашиглан хийх боломжгүй.
Алхам 2. Саарал хайрцаг аргыг туршиж үзээрэй
Саарал хайрцагт вэб хуудасныхаа агуулгыг хааж эсвэл онцлон тэмдэглээрэй, хамгийн чухал контент нь дээд талд байна. Агуулгыг нэг баганаар эрэмбэлэх. Жишээлбэл, хэрэв хуудас нь "Компанийн тухай" гэсэн бол компанийн талаархи дэлгэрэнгүй мэдээлэл, ажилчдын жагсаалт, дараа нь холбоо барих мэдээлэл гэх мэт.
Үүнд толгой ба доод хэсгийг оруулаагүй болно. Саарал хайрцаг нь вэб дээр гарч ирэх контентын дүрслэл юм
Алхам 3. Үндсэн тойм бүтээгч програмыг туршиж үзээрэй
Вэбийн үндсэн хүрээг бий болгох явцад ашиглаж болох янз бүрийн програмууд байдаг. Вэб програмчлалын код (хэл) -ийн хэмжээ нь програм бүрийн хувьд өөр өөр байдаг. Нэлээд алдартай програмуудын заримыг дурдвал:
- Загварын лаборатори. Энэ сайт нь "атомын дизайн" -д зориулагдсан бөгөөд контент бүр нь илүү том вэб хуудас бүрдүүлдэг "молекул" гэж тооцогддог.
- Jumpchart. Энэхүү вэб хуудас нь вэб дээр суурилсан төлөвлөлт, хүрээ хийх үйлчилгээ үзүүлдэг. Эдгээр сайтууд төлбөртэй бөгөөд захиалга авах шаардлагатай боловч та маш олон вэб програмчлалын кодыг эзэмшихгүйгээр вэб бүтцийг хурдан бүтээж чадна.
- Утасгүй. Wirefy бол "атомын дизайн" санал болгодог өөр нэг сайт юм. Вэб хөгжүүлэгчид уг хэрэгслийг үнэгүй авах боломжтой.
Алхам 4. Энгийн HTML тэмдэглэгээг ашиглана уу
Сайн үндсэн загвар нь анхны сайт руу амархан хөрвөх болно. Энэхүү загварыг бүтээх явцад вэбийн загварын талаар хэт их бодох хэрэггүй. Ойлгож, өөрчлөхөд хялбар болох тэмдэглэгээг ашиглана уу.
Энгийн үндсэн хүрээ нь хамаагүй дээр юм. Тэмдэглэгээ хийх зорилго нь бүтэц бий болгох явдал юм. Харааны дүр төрхийг дараа нь CSS болон нэмэлт тэмдэглэгээний тусламжтайгаар тохируулж болно
Алхам 5. Вэб хуудас бүрийн үндсэн тоймыг бий болгох
Вэб хуудас бүрийг нэг үндсэн тоймтой адилтгах хүсэл танд төрж магадгүй юм. Үнэндээ энэ нь таны сайтыг зөвхөн энгийн, уйтгартай болгоно. Хуудас бүрийн хувьд өөр тоймыг бий болгосноор хуудас бүр өөрийн гэсэн дизайнтай болохыг ойлгох болно.
4 -ийн 3 -р хэсэг: Агуулга үүсгэх
Алхам 1. Вэб хуудас үүсгэхээс өмнө контентийг бэлтгэ
Хэрэв танд дээж эсвэл орлуулагч ашиглахын оронд бодит агуулга байгаа бол вэб үзэх боломжийг урьдчилан харах нь танд илүү хялбар болно. Та хэт их агуулгатай байх шаардлагагүй, гэхдээ хэрэв та анхны зургийн хуулбарыг ашиглавал таны загвар илүү сайн харагдах болно.
Та нийтлэлийн материалтай байх албагүй, гэхдээ дор хаяж бодит гарчигтай байх ёстой
Алхам 2. Агуу контент нь зөвхөн текст биш гэдгийг санаарай
Интернет бол энгийн вэб хуудаснаас хамаагүй илүү төвөгтэй зүйл юм. Зочдыг татах, урих гайхалтай вэбсайт бий болгохын тулд танд янз бүрийн агуулга хэрэгтэй болно. Жишээлбэл:
- Зураг.
- Дуу хоолой.
- Видео бичлэгүүд.
- Вэб дамжуулалт эсвэл вэб урсгал (Twitter)
- Фэйсбүүкийг нэгтгэх
- RSS
- Вэб тэжээл
Алхам 3. Мэргэжлийн гэрэл зурагчнаас тусламж хүсээрэй
Хэрэв та сайт дээрээ зураг оруулахыг хүсч байвал мэргэжлийн гэрэл зургаар дүүргэсэн бол таны вэбсайтаас авах анхны сэтгэгдэл илүү дээр байх болно. Нэг сайн зураг нь чанар муутай хорь гаруй зургийн үнэ цэнэтэй юм.
Гэрэл зургийн урлагийг төгссөн шинэхэн төгсөгчийг бизнесийн салбарт удаан хугацаанд ажилласан мэргэжлийн гэрэл зурагчнаас хямд үнээр хайж олоорой
Алхам 4. Чанартай нийтлэл бичих
Вэб хуудсан дээр бичсэн контент нь таны вэб траффикийн хэмжээг тодорхойлох болно. Энэхүү дизайны процесст контент бүтээх талаар хэт их санаа зовох шаардлагагүй ч гэсэн энэ талаар бодож эхлэх нь тийм ч хэцүү биш юм, учир нь танай сайт ажиллаж эхэлмэгц танд контент байнга хэрэгтэй болно.
Нийтлэлийн агуулгаас гадна вэб хуудас бүрдүүлэх явцад танд хэрэгтэй бичигдсэн материалууд байдаг. Жишээлбэл, холбоо барих мэдээлэл, компанийн нэр эсвэл сайт дээр олон удаа ашиглагдах бусад зүйл
4 -ийн 4 -р хэсэг: Үзэл баримтлалыг вэбсайт руу оруулах
Алхам 1. Үндсэн элементүүдийг цэгцлэх
Элементүүдийн энэхүү зохицуулалт нь таны сайт дээрх толгой, зүүлт, навигацийн цэс гэх мэт хуудас бүрт хамаарна. Үүнийг маш энгийн хэв маягаар тохируулаарай, ингэснээр бүх хуудсууд хэрхэн харагдаж байгааг шалгаж болно. Энэ нь вэб байршуулах процесс руу шилжих явцад ялангуяа ашигтай байдаг.
Дэлгэрэнгүй мэдээлэлд хэт их санаа зовох хэрэггүй, толгой хэрхэн харагдахыг урьдчилан харах (урьдчилан үзэх) оролдоорой
Алхам 2. Энгийн зохион байгуулалт хийх
Үндсэн тойм баганаас цагийн байрлалыг хуудасны бодит байрлал руу шилжүүлж эхэл. Жишээлбэл, та навигацийн цэсийг хуудасны зүүн талд, гарчгийн жагсаалтыг баруун тийш шилжүүлэхийг хүсч магадгүй юм.
Дараагийн алхам руу шилжихээсээ өмнө олон хуудасны вэб байршуулалтыг туршиж үзээрэй. Таны үүсгэсэн зохион байгуулалт амьд мэт санагдаж буй эсэхийг харахын тулд бусдад харуулаарай
Алхам 3. Mockup үүсгэх
Photoshop гэх мэт програм ашиглан вэбсайтынхаа загварыг эсвэл дээж хуудас үүсгэ. Таны боловсруулсан схемийг гарын авлага болгон ашиглаарай. Та зураг боловсруулах програмын тусламжтайгаар макетыг илүү хурдан хийж, хүссэн үр дүнг авах боломжтой. Эдгээр зургийн үр дүнг хожим вэб програмчлалын код бичих явцад лавлагаа болгон ашиглаж болно.
Сайхан харагдуулахын тулд бодит агуулгыг загвар дээрээ оруулаарай
Алхам 4. Түүврийн ойлголтыг анхны контентоор солих
Вэб хуудсанд контент болон элементүүдийг нэмж оруулах. Вэб загварын тохиргоог одоохондоо бүү хий, бүх зүйлийг зөв байрлалд овоолно уу. Энэ нь дараа нь хийсэн вэб загварын өөрчлөлтөө хянахад тусална.
Алхам 5. Вэб загварын гарын авлага үүсгэх
Ялангуяа томоохон сайтуудын хэв маягийг хослуулан хадгалах нь маш чухал юм. Хэрэв энэ сайт нь бизнесийн зориулалттай бөгөөд аль хэдийн өөрийн гэсэн брэнд, хэв маягтай бол үүнийг сайтын дизайнд оруулах ёстой. Вэб хуудасны хэв маягийн гарын авлага үүсгэх үед анхаарах зүйлс:
- Жолоодлого
- Толгойн тэмдэглэл
- Догол мөр
- Налуу тэмдэгт
- Зоригтой дүр
- Холбоосууд (идэвхтэй, идэвхгүй, гүйлгэх)
- Зургийн хэрэглээ
- Дүрс
- Бариул
- жагсаалт
Алхам 6. Вэб стилийг ашиглана уу
Зөв загвар, дизайныг олсон бол түүнийгээ хэрэгжүүлээрэй. CSS бол вэб хуудас эсвэл сайт дээр хэв маягийг хэрэгжүүлэх хамгийн хялбар аргуудын нэг юм. CSS -ийг ашиглах дэлгэрэнгүй мэдээллийг илүү сайн ойлгохын тулд дараах зааврыг үзнэ үү.
