Улуу веб-дизайндын эмне жана кылбашы керек

Аткарылганда, бул колдонмо абдан баалуу веб-дизайн булагы болуп калат, айрыкча, сиз колдонууну пландаштырсаңыз веб-сайтты иштеп чыгуу программасы келечекте. Тажрыйбасыздан тажрыйбалууга чейин бул колдонмодо бардыгы үчүн бир нерсе бар.

Улуу Веб Дизайн процесси Баарыбыз бир бетте экенибизге ынануу үчүн, "веб дизайн" үчүн негизги аныктамадан баштайлы. Wikipedia ылайык, веб-дизайн болуп саналат:

"Интернет аркылуу электрондук медианы жеткирүүнүн концептуалдаштыруу, пландаштыруу, моделдөө жана аткаруу процесси Веб браузер аркылуу чечмелөө жана графикалык колдонуучу интерфейси катары көрсөтүү үчүн ылайыктуу Markup тили түрүндө" .

Веб дизайн процессин изилдөө ишин жазуу процессине салыштырууга болот. Концептуалдаштыруу/пландоо стадиясында веб-сайтыңыздын навигациялык түзүмүн чагылдырган блок-схемалар (контур) түзүлөт. Модельдөө стадиясында веб-сайтыңыздын ар бир бөлүгү үчүн скелеттин макетін чагылдырган статикалык зымдар түзүлөт (орой долбоор). Зым жээкчелери түзүлгөндөн кийин, графика, түстөр жана текст зым жээкчелеринин макетинин негизинде веб-баракчаларыңыздын дизайнын түзүү үчүн колдонулат. Аткаруу стадиясында сиздин дизайныңыз веб-браузерлер тарабынан колдоого алынган форматка айландырылат, текст жана мазмун кошулат, акырында сиздин веб-сайтыңыз бүткүл дүйнөгө көрүшү үчүн Интернетке түз чыгарылат (акыркы долбоор).

Долбоорлоо процессинин бардык үч этаптары бирдей мааниге ээ. Көптөгөн веб-дизайнерлор убакытты үнөмдөө үчүн же мунун кереги жок деп ойлогондуктан бир этапты өткөрүп жиберишет. Бирок, сиздин максат ийгиликтүү дизайн жана кадыр-барктуу веб-сайтты түзүү болсо, бардык үч этап зарыл. Үч этап колдонулса дагы, веб-дизайнерлердин кетирген каталары сапатсыз, колдонуучуга ылайыксыз веб-сайттарга алып келет. Кабинетти жаман веб-дизайн тажрыйбаларынан тазалап, жакшылары менен толуктоого убакыт келди.

1-этап: Концептуалдаштыруу жана пландаштыруу
Бул этап башка эки этапка караганда көбүрөөк өткөрүп жиберилет. Көпчүлүк жазуучулар изилдөө иштеринин контурларын түзүүнү жактырышпайт, ал эми веб-дизайнерлердин көбү блок-схема түзүүнү жактырышпайт. Жалкоо болбо. Эгерде сиз күч-аракетиңизди жумшасаңыз жана веб-сайтыңызды пландаштырсаңыз, анда сиз веб-дизайн процессинин жол боюнда кетирилген каталары азыраак жылмакай жүрүп жатканын табасыз.

Вебсайтыңызды натыйжалуу концептуалдаштыруу жана пландаштыруу үчүн сизге бир нече нерселер керек болот:

• мээ
• калем жана кагаз
• (милдеттүү эмес) блок-схема программалык камсыздоо
• веб-сайтыңыздын ар кандай бөлүмдөрү жөнүндө жалпы түшүнүк

Баштоо үчүн калемиңизди жана кагазыңызды алыңыз же сүйүктүү блок диаграммаңызды ишке киргизиңиз. Биз Mac OS X үчүн OmniGraffle Professiona колдонобуз, ал бир лицензиянын баасы 150 долларды түзөт, бирок сиз веб-сайттарды үзгүлтүксүз негизде түзсөңүз, ага татыктуу. Эгерде сиз компьютерде болсоңуз, анда SmartDraw сиз колдоно ала турган АКЫСЫЗ блок-схема программалык камсыздоосу. Бирок, кагаз менен калем жакшы иштейт.

Блок-схемаларды түзүүнүн көптөгөн ыкмалары бар. Бул макаланын узактыгы жана убактысы үчүн биз сизге муну жасоонун эң негизги жолун көрсөтөбүз. Эгерде сиз блок-схемалар жөнүндө көбүрөөк билгиңиз келсе, Google же Yahoo аркылуу блок-схемаларды издеңиз.

Хроматикалык сайттарды концептуалдаштырууда биз түзгөн блок-схеманы караңыз. (1) Блок схеманын жогору жагында биз веб-сайтыбыздын атын тизмектейбиз. (2) Андан кийин биз веб-сайтыбыздын ар бир негизги бөлүмүн камтыйт: Башкы бет, Жөнүндө жана Кызматтар. Бул бөлүмдөр сиздин веб-сайтыңыз үчүн негизги навигация болуп саналат. Ар бир бөлүмдүн аталыштары толугу менен веб-сайтыңыздын мазмунуна көз каранды. Мүмкүн болушунча азыраак бөлүмдөрдү колдонууга аракет кылыңыз, ошондуктан сиздин веб-сайтыңызда навигациялоодо конокторуңуз капаланбашы үчүн.

(3) Андан кийин, ар бир негизги баракта тизмелене турган бардык кошумча барактарды (бөлүмчөлөрдү) кошуңуз. Үй үчүн биз профессионалдык веб-дизайн, веб-иштеп чыгуу жана издөө механизмдерин оптималдаштырууну киргиздик. Кошумча навигация негизги навигацияга караганда сүрөттөмөлүү болушу керек. Вебсайттарыңыздын навигациялык иерархиясы канчалык терең болсо, ар бир энбелги ошончолук сүрөттөмөлүү болушу керек.

Dos

• азыраак - көбүрөөк; негизги бөлүмдөрдүн санын минималдуу сактоо. Биз веб-сайтыбызда 6 бөлүмдү колдонобуз, бул жетиштүү
• Кагазды жана калемди колдоносузбу же блок-схема программасын колдонсоңуз да, нерселерди мүмкүн болушунча таза жана иретке келтириңиз. Сиз (жана сиз менен иштеген ар бир адам) блок-схеманы колдоно турган жалгыз адам болсоңуз да, ал дагы эле маанисин бериши керек -Сиздин негизги бөлүмдөрүңүздө кененирээк терминдер колдонулушу керек, ал эми экинчи жана үчүнчү даражадагы терминдер сүрөттөмөлүү болушу керек.

The Donts
Блок-схеманы түзүү абдан түз алдыга; бирок, оңой эле жасала турган бир нече каталар бар:

• Бүтүндөй веб-сайтыңыз бир тар темага багытталмайынча, негизги навигацияңызда өтө сүрөттөмө терминдерди колдонбоңуз - Бир эле баракта бир нече теманы бириктирүүгө аракет кылбаңыз. Бул темалар үчүн жалпы бөлүм түзүңүз жана ал бөлүмдөн бөлүмчөлөрдү түзүңүз. Бул бөлүмдүн (сүрөттөөчү) веб-баракчаларынын издөө системаларында жакшыраак рейтингге ээ болушуна шарт түзөт (Google, Yahoo, MSN, Ask) Кыска жана сүрөттөмө схеманы түзгөндөн кийин, сиз экинчи этапка өтүүгө даярсыз. веб-дизайн процесси:

2-этап: Моделдөө
Моделдөө стадиясында статикалык “сымдар” макеттери түзүлөт. Ар бир макет сиздин веб-сайтыңызга кошула турган ар бир веб-баракчанын макетинин жылаңач сөөк скелетин көрсөтөт. Бул этап маанилүү, анткени ал бизге ар кандай элементтер биздин дизайнда кайда жайгаштырыла тургандыгы жөнүндө түшүнүк берет. Бул элементтердин кээ бирлери төмөнкүлөр:

• логотип
• навигациялык меню
• ыраазы
• сүрөттөр, видеолор

Бул макеттерди түзүү үчүн, сиз калем жана кагазды же каалаган макет программасын колдоно аласыз. Мурда биз Photoshop колдончубуз, бирок акыркы убакта OmniGraffle Professional колдонуп жатабыз. OmniGraffle Photoshop сыяктуу ресурсту көп талап кылбайт жана ал бизге зымдарыбыздын макеттерин тезирээк чогултууга мүмкүндүк берет.

Кошумчалай кетсек, сизде жакын жерде түзгөн блок-схема(лар) бар экенине ынаныңыз, анткени веб-сайтыңызда пайда боло турган бардык баракчаларды шылдыңдап жатканыңызга ынануу үчүн аларга маал-маалы менен шилтеме берүү керек болот.

Бул жерде биздин сымал рамка макети кандай болушу керектиги жөнүндөгү мисал келтирилген. Көрүнүп тургандай, эч кандай түстөр же графика камтылган. Дизайныңыздын скелетинин макети дал ушундай болушу керек. Максаты веб-баракчанын ар бир элементи кайда жайгаштырыла тургандыгы жөнүндө жалпы түшүнүккө ээ болуу.

Биз, адатта, жогорку сол жактан баштайбыз жана ылдый жагына чейин иштейбиз. Wireframe көрүнүшү керек болгон эч кандай конкреттүү жол жок. Фантазияңызды колдонуңуз. Бирок, өзүңүздүн зымдарыңызды түзүүдө веб-сайттын эң маанилүү элементтерин (логотип, навигациялык меню, мазмунду жайгаштыруу, сүрөттөр/видео жайгаштыруу) кошууну унутпаңыз.

Эгер сиздин барактардын кээ бирлери бирдей макетти колдонсо, анда ал барактардын баарын шылдыңдоонун кажети жок (бирок, албетте, мүмкүн). Жөн гана веб-сайтыңызга ээ боло турган уникалдуу макетти жасалмалоону унутпаңыз. Кийин өзүңө рахмат айтасың.

The Do

• бардык уникалдуу барактарды макет
• маанилүү элементтерди камтыңыз (логотип, навигация, мазмунду жайгаштыруу, сүрөттөрдү/видеолорду жайгаштыруу) - жогорудан баштап, ылдый карай жүрүңүз - 1-этапта түзүлгөн блок-схемаңызга шилтеме жасап, кандайдыр бир барактарды макет кылууну унутпаңыз - сактоо, сактоо, сактоо - компьютердеги бардык нерсе сыяктуу, макеттериңизди(лериңизди) 10 мүнөт сайын сактаңыз
• таза, колдонуучуга ыңгайлуу макеттерге көңүл буруңуз - 3-этапта аларга шилтеме кылганыңызда алардын эмне экенин унутпаш үчүн элементтериңизди белгилеңиз, аткаруу - башка веб-сайттарды илхам катары колдонуңуз; башка сайттардан элементтерди алып, аларды өзүңдүн кылуунун эч кандай жаман жери жок ("донт" караңыз)

The Dont's

• графиканы же түстөрдү кошпоңуз (бул кийинки этап үчүн) - макеттериңизди өтө "бош эмес" кылбаңыз; таза, жакшы уюштурулган, колдонуучуга ыңгайлуу макеттерге көңүл буруңуз - бул этапты өткөрүп жибербеңиз; бул биринчи жана акыркысы сыяктуу эле маанилүү - эгер сиз башка веб-сайттардан элементтерди алсаңыз, плагиат кылбаганыңызды текшериңиз; Дизайныңыздын айрым элементтерин түзүү үчүн башка веб-сайттан шыктануу менен алардын макетін жана түстөрүн ачыктан-ачык айрып алуунун ортосунда айырма бар

3-этап: Аткаруу
Үчүнчү жана акыркы этапта, аткаруу, 1 жана 2-этаптардан пландоо жандуу, интерактивдүү веб-сайтты түзүүгө жардам берүү үчүн бириктирилет.
Үчүнчү этап - эң көп убакытты талап кылат, анткени сиз 1) графиканы түзүү 2) мазмунду түзүү жана акырында, 3) веб-дизайндарды сүрөттөрдөн веб-браузерлер сиздин веб-сайтыңызды дүйнөгө көрсөтүү үчүн колдонгон кодго айландыруу.

Үчүнчү этапка жеткенде, сиз төмөнкүдөй так түшүнүккө ээ болушуңуз керек:

• Сиздин конокторуңуз бир жерден экинчи жерге кантип жетет (1-этап, блок-схема) - сиздин веб-баракчаларыңыз кандайча жайгаштырылат (2-этап, телмечка макеттери)

Эгерде сизде бул эки нерсе тууралуу так түшүнүк жок болсо, анда биринчи жана экинчи этаптарга кайрылып, аларды өнүктүрүүнү улантыңыз. Үчүнчү этап эң оңой экенин сиз веб-сайтыңызды долбоорлоо үчүн так, кыскача согуш планын түзгөндөн көрө аласыз.

Калем менен кагазды таштаңыз
3-этапта сиз фотошопту же башка сүрөттү түзөтүү программасын колдонушуңуз керек, анткени сиз веб-сайтыңыз үчүн макет түзүү үчүн түстөрдү жана графиканы колдоносуз.

Биз, адатта, биринчи "үй" баракты (индекс) түзө баштайбыз. 2-этапта түзгөн зымдарыңыздын ар бир барак үчүн шаблон катары колдонуңуз. Бирок, катуу кутучаларды колдонуунун ордуна, анын ордуна графиканы, түстөрдү жана текстти колдонуңуз. Ар бир барак интернетте сиз каалагандай болушу керек, анткени бул дизайн процессинин акыркы этабы.

Навигацияңыз үчүн фонду кошуңуз (бирок сүрөтүңүзгө текстти чындыгында кошпоңуз). CSS (каскаддык стилдик таблицалар) аркылуу конвертацияланганда, навигацияңыз сүрөттөр эмес, текст түрүндө болушу керек. Сүрөттөрдү издөө системалары сойлобойт (навигацияңызда колдонулган ачкыч сөздөр издөө системасынын натыйжалары барактарында индекстелбейт, демек, азыраак адам сиздин веб-сайтыңызды таба алат).

Дизайныңызга ыраазы болгонуңузда жана алар Интернетке жайгаштырууга даяр экенин сезгениңизде, CSS негизиндеги макетти түзө алуу үчүн дизайндарды бөлүүгө убакыт келди. Макеттериңизди CSSке айландыруу же веб-сайтыңызды CSSте белгилөө боюнча көбүрөөк маалымат алуу үчүн w3schools.com сайтына кириңиз. Интернетти карап чыккандан кийин, биз CSS-сүрөткө ылайыктуу окуу куралын таба албадык – андыктан жакынкы жумаларда бизден бирөөнү күтүңүз. Дизайныңызды CSSке айландыруу өтө маанилүү, анткени үстөлдүн макеттери өткөн нерсе.

Бул жерде биз 2-этапта шылдыңдаган макеттин дээрлик бүткөрүлгөн веб-сайтынын мисалы. Бул түздөн-түз биздин веб-браузерден алынган жана сиз көрүп тургандай, азыр логотип, түстөр, татынакай навигация системасы, колонтитул, жана эң негизгиси, таза, уюшкан макет.
1 жана 2-этаптардагы пландаштыруунун аркасында биздин макет жакшы уюштурулган жана колдонууга оңой.

Dos

• 2-этапта түзүлгөн калыптарга шилтеме; баштапкы макетиңизден четтөө жакшы болсо да, кереги жок
• чыныгы дизайнын түзүү алдында кээ бир изилдөө жүргүзүү; башка сайттардан идеяларды алыңыз жана аларды өзүңүздүкү кылыңыз (плагиатсыз)
• веб-баракчаларыңыздын акыркы көрүнүшүн түзүү үчүн түстөрдү жана графиканы камтыңыз - дизайныңызды сүрөттөрдөн веб-браузерлерге түшүнүктүү белгилерге айландыруу үчүн CSS (каскаддык стилдик таблицаларды) колдонуңуз - гипершилтемелер менен баракчаларыңызды коддоодо 1-этаптагы блок-схемаңызга шилтеме кылуу; ар бир баракта веб-сайтыңыздагы шилтемелердин бардыгын (же көпчүлүгүн) камтыган ачылуучу менюну колдонуу жакшы; бул навигацияны жеңилдетет, ошондой эле издөө системасынын жөргөмүштөрү токтоп калганда, сиздин баракчаларыңызды тырмап чыгууну жеңилдетет; CSS ачылуучу менюларын алуу үчүн эң сонун жер DynamicDrive.com сайтында - Photoshopто же сиз колдонгон кандай гана сүрөттү түзөтүү программасында иштеп жатканда дизайныңызды аягына чыгарыңыз; ал белгиге (код) айландырылгандан кийин дизайнга өзгөртүүлөрдү киргизүү кыйынга турушу мүмкүн.

The Donts

• CSSке конвертациялоодо текстти навигация менюларыңызга кошпоңуз; сүрөт текстин колдонуунун ордуна, издөө системасынын жөргөмүштөрү окуй турган кадимки текстти колдонуңуз
• конвертациялоодо таблицаларды колдонбоңуз; Эгер сиз CSS боюнча китеп сатып алышыңыз керек болсо да, ал татыктуу болот; столдор өлдү
• убакытты үнөмдөө үчүн биринчи эки этапты өткөрүп жибербеңиз; Веб-дизайн процессинин башынан баштасаңыз, веб-сайтыңыз жакшыраак болот (аягынын ордуна)
• CSS үчүн кесилген сүрөттөрүңүздү кысууну унутпаңыз; чоң сүрөт файлдарынан улам жай жүктөлгөн веб-сайттан жаман эч нерсе жок; Photoshopто "Веб үчүн оптималдаштырылган сактоо" опциясы бар (CS3 - "Веб жана түзмөктөр үчүн сактоо")

Процесс идеалдуу кылат
Бул макалада сүрөттөлгөн веб-дизайн процессин аткаруу менен, сиз жакшы уюштурулган, навигацияга оңой жана колдонуучуга абдан ыңгайлуу болгон веб-сайтты түзүү мүмкүнчүлүгүн жогорулатасыз. Чынын айтсак, эгер коноктор веб-сайтыңызды кыдырууга аракет кылып жатканда адашып же адашып калышса, алар артка баскычын басып, колдонуучуга ыңгайлуураак веб-сайтты издеши мүмкүн. Адамдар веб-сайттарды айланып өтүү жөнүндө ойлонууну жактырышпайт. Аларды ойлондурба. Сиз веб-сайтыңызды 1-этаптан 3-этапка чейин пландаштыруу менен ойлоносуз жана веб-сайтыңызга көбүрөөк адамдар киргенден ырахат алаарын көрөсүз.