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