Веб-сайтты әзірлеу технологиясы өте көп қырлы процесс. Дегенмен, оның барлық кезеңдерін екі негізгі құрамдас бөлікке бөлуге болады - функционалды және сыртқы қабық. Немесе веб-шеберлер арасында әдеттегідей, сәйкесінше бэк-энд және фронт-энд. Веб-әзірлеу студияларынан веб-сайттарына тапсырыс беретін адамдар көбінесе функционалдылыққа ғана назар аудару керек деп санайды және бұл дұрыс шешім болады. Бірақ бұл өте сирек жағдайларда, әдетте бета тестілеу сатысындағы стартап жобаларына қатысты. Әйтпесе, графикалық дизайн мен пайдаланушы интерфейсі веб-әзірлеу стандарттарына сәйкес болуы және ыңғайлы болуы үшін қажет.
Интерфейс дизайнері немесе дизайнер бетпе-бет келетін бірінші ірге тасы - сайт орналасуының ені. Өйткені, ол үшін интерфейстерді салу керек. Таза интуитивті түрде екі тәсіл пайда болады - немесе әрбір танымал экран ажыратымдылығы үшін бөлек орналасуларды жасаңыз немесе барлық дисплейлер үшін сайттың бір нұсқасын жасаңыз. Екі нұсқа да қате болады, бірақ бірінші орында.
Пикселдегі стандартты веб-сайт еніRunet үшін
Адаптивті макет әзірленбес бұрын, ені мың пиксель болатын сайттың дамуы жаппай құбылыс болды. Бұл сурет бір қарапайым себеппен таңдалды - сайт кез келген экранға сәйкес келеді. Мұның өзіндік логикасы бар, бірақ адамның жұмыс үстелінде әлі де кем дегенде HD мониторы бар деп есептейік. Бұл жағдайда сіздің орналасуыңыз экранның ортасындағы кішкентай жолақ сияқты көрінеді, онда бәрі бір үйіндіге жабысып, бүйірлерінде үлкен пайдаланылмаған кеңістік бар. Енді адам сіздің веб-сайтыңызға 800 пиксель кең экраны бар планшетте кіреді және параметрлерде «Толық веб-сайтты көрсету» белгісі белгіленді делік. Бұл жағдайда сіздің сайтыңыз да қате көрсетіледі, себебі ол жай ғана экранға сыймайды.
Осы пікірлерден біз макеттің бекітілген ені бізге сәйкес келмейтінін және басқа жолды іздеуіміз керек деген қорытынды жасауға болады. Әрбір экран ені үшін бөлек орналасу идеясын талдап көрейік.
Барлық жағдайларға арналған макеттер
Егер сіз нарықтағы барлық экран өлшемдері үшін макеттер жасау стратегиясы ретінде таңдаған болсаңыз, онда сіздің сайт бүкіл Интернеттегі ең бірегей болады. Өйткені, бүгінгі күні әр опцияны дәл баптауға тырысып, құрылғылардың барлық спектрін қамту мүмкін емес. Бірақ егер сіз мониторлар мен құрылғы экрандарының ең танымал ажыратымдылығына назар аударсаңыз, онда идея жаман емес. Оның жалғыз кемшілігі - қаржылық шығындар. Өйткені, интерфейс дизайнері, дизайнер және кодер бір жұмысты 5 немесе 6 рет орындауға мәжбүр болғанда, жоба қымбатқа түседі.бастапқы бюджеттік бағадан пропорционалды түрде жоғары.
Сондықтан тек бір беттік сайттар әртүрлі экрандарға арналған нұсқалардың көптігімен мақтана алады, олардың мақсаты бір өнімді сату және оны жақсы орындау. Егер сізде бұл сайттардың біреуі емес, көп бетті сайт болса, одан әрі ойланыңыз.
Ең танымал сайт өлшемдері
Екі шектен шыққан ымыра - үш немесе төрт экран өлшемі үшін орналасуды көрсету. Олардың ішінде мобильді құрылғыларға арналған макет болуы керек. Қалғандары шағын, орташа және үлкен жұмыс үстелі экрандарына бейімделуі керек. Сайттың енін қалай таңдауға болады? Төменде біз 2017 жылдың мамыр айындағы HotLog қызметінің статистикасын ұсынамыз, ол бізге әртүрлі құрылғы экран ажыратымдылықтарының танымалдылығының таралуын, сондай-ақ осы көрсеткіштің динамикасын көрсетеді.
Кестеден пайдаланғыңыз келетін сайттың өлшемін қалай анықтау керектігін білуге болады. Сонымен қатар, бүгінгі күні ең көп таралған пішім 1366-дан 768 пиксельге дейінгі экран болып табылады деп қорытынды жасауға болады. Мұндай экрандар бюджеттік ноутбуктерде орнатылған, сондықтан олардың танымалдығы табиғи. Келесі ең танымал - Full HD мониторы, ол бейнелер, ойындар үшін алтын стандарт болып табылады, сондықтан веб-сайт макетін жасау үшін. Әрі қарай кестеде мобильді құрылғылардың 360-тан 640 пиксельге дейінгі ажыратымдылығын, сондай-ақ одан кейінгі жұмыс үстелі мен мобильді экрандарға арналған әртүрлі опцияларды көреміз.
Макеті құрастырылуда
СоныменСтатистиканы талдағаннан кейін сайттың оңтайлы енінің 4 нұсқасы бар деп қорытынды жасауға болады:
- 1366 пиксель ені бар ноутбук нұсқасы.
- Толық HD нұсқасы.
- Кішкентай жұмыс үстелі мониторларында көрсетуге арналған ені 800 пиксель макетін.
- Сайттың мобильді нұсқасы - ені 360 пиксель.
Сайт үшін жасалған дереккөз үшін қандай өлшемді пайдалану керектігін шештік делік. Бірақ мұндай жоба әлі де қымбатқа түседі. Ендеше, бұл жолы бекітілген енді пайдаланбай, қосымша опцияларды қарастырайық.
Орналасуды икемді ету
Балама тәсіл бар, ол тек ең төменгі экран өлшеміне бейімделуге тұрарлық, ал сайт өлшемдерінің өзі пайызбен белгіленеді. Сонымен қатар мәзірлер, түймелер және логотип сияқты интерфейс элементтерін пикселдердегі экран енінің ең аз өлшеміне назар аудара отырып, абсолютті мәндерде орнатуға болады. Мазмұны бар блоктар, керісінше, экран аймағының енінің көрсетілген пайызына сәйкес созылады. Бұл әдіс сайттардың өлшемін дизайнер үшін шектеу ретінде қабылдауды тоқтатуға және осы нюансты шебер жеңуге мүмкіндік береді.
Алтын қатынас дегеніміз не және оны веб-бет орналасуына қалай қолдануға болады?
Қайта өрлеу дәуірінің өзінде көптеген сәулетшілер мен суретшілер өз туындыларына тамаша пішін мен пропорция беруге тырысты. Мұндай пропорцияның мәндері туралы сұрақтарға жауап алу үшін олар барлық ғылымдардың ханшайымына - математикаға жүгінді.
Ежелгі заманнан бері біздің көзіміз ең табиғи және талғампаз деп есептейтін пропорция ойлап табылған,өйткені ол табиғатта барлық жерде кездеседі. Мұндай қатынастың формуласын ашқан дарынды ежелгі грек сәулетшісі Фидий болды. Ол пропорцияның үлкен бөлігі кішіге қатысты болса, тұтастай үлкенге қатысты болса, онда мұндай пропорция ең жақсы көрінеді деп есептеді. Бірақ бұл объектіні асимметриялы түрде бөлгіңіз келсе. Бұл пропорция кейінірек алтын бөлім деп аталды, ол әлі де әлемдік мәдениет тарихы үшін оның маңыздылығын асыра бағалай алмайды.
Веб-дизайнға оралу
Бұл өте қарапайым – алтын қатынасты пайдалана отырып, сіз мүмкіндігінше адам көзіне ұнайтын беттерді жасай аласыз. Алтын қатынас формуласының анықтамасына сәйкес есептей отырып, біз иррационал 1 санын аламыз, 6180339887 …, бірақ ыңғайлы болу үшін біз 1, 62 дөңгелектенген мәнді пайдалана аламыз. Бұл біздің парақшамыздың блоктары 62 болуы керек дегенді білдіреді. Сіз пайдаланып жатқан сайт үшін жасалған дереккөздің өлшемі қандай болса да, % және тұтастың 38%. Мысалды мына диаграммадан көре аласыз:
Жаңа технологияларды қолданыңыз
Веб-сайтты орналастырудың заманауи технологиялары жоспарлаушы мен дизайнердің идеясын дәл жеткізуге мүмкіндік береді, сондықтан енді сіз Интернет-технологиялар пайда болған кездегіден гөрі батыл идеяларды жүзеге асыра аласыз. Енді сайттың өлшемі қандай болуы керектігі туралы көп ойланудың қажеті жоқ. Блокты бейімдеу орналасуы, мазмұн мен қаріптерді динамикалық жүктеу сияқты нәрселердің пайда болуымен веб-сайтты әзірлеу әлдеқайда жағымды болды. Өйткені, бұл технологияларшектеулер аз, бірақ олар әлі де бар. Бірақ өздеріңіз білетіндей, шектеусіз өнер болмас еді. Біз сізге бір нағыз креативті дизайн тәсілін - алтын қатынасты пайдалануды ұсынамыз. Оның көмегімен үлгілерде қандай сайт өлшемдерін орнатқаныңызға қарамастан, жұмыс кеңістігін тиімді және әдемі толтыра аласыз.
Сайттың жұмыс кеңістігін қалай үлкейтуге болады
Барлық UI элементтерін шағын орналасуға сыйғызу үшін жеткілікті орын болмауы мүмкін. Бұл жағдайда сізге креативті немесе бұрынғыдан да креативті ойлауды бастау керек болады.
Қалқымалы мәзірде шарлауды жасыру арқылы сайтта ең көп орын босату. Бұл тәсілді тек мобильді құрылғыларда ғана емес, жұмыс үстелінде де қолдану қисынды. Өйткені, пайдаланушыға сіздің сайтыңызда қандай тақырыптар бар екенін үнемі қарап отырудың қажеті жоқ - ол мазмұн үшін келді. Сондай-ақ пайдаланушының тілектерін сақтау керек.
Мәзірді жасырудың жақсы әдісінің мысалы келесі макет (төмендегі сурет).
Қызыл аймақтың жоғарғы бұрышында сіз крестті көре аласыз, оны басу мәзірді кішкентай белгішеге жасырып, пайдаланушыны веб-сайт мазмұнымен жалғыз қалдырады.
Алайда бұл міндетті емес, сіз әрқашан көрінетін навигациядан шыға аласыз. Бірақ сіз оны сайттағы танымал сілтемелердің тізімі емес, әдемі дизайн элементі ете аласыз. Мәтіндік сілтемелерге қосымша немесе олардың орнына интуитивті белгішелерді пайдаланыңыз. дәл солайсайтыңызға пайдаланушы құрылғысындағы экран кеңістігін тиімдірек пайдалануға мүмкіндік береді.
Ең жақсы веб-сайт жауап береді
Егер сіз сайт үшін қандай макетті таңдау керектігін білмесеңіз, сіз үшін бәрі оңай. Әзірлеуге жұмсалатын шығындарды үнемдеу және сонымен бірге кейбір құрылғының орналасуының нашарлығына байланысты аудиторияңызды жоғалтпау үшін жауап беретін дизайнды пайдаланыңыз.
Жауапты дизайн - әртүрлі құрылғыларда бірдей жақсы көрінетін дизайн. Бұл тәсіл сіздің сайтыңызға тіпті ноутбукта, тіпті планшетте, тіпті смартфонда да түсінікті және ыңғайлы болуға мүмкіндік береді. Бұл әсерге экранның жұмыс аймағының енін автоматты түрде өзгерту арқылы қол жеткізіледі. Сайтыңыз үшін жауап беретін стиль кестелерін пайдалану арқылы сіз ең жақсы шешімді қабылдайсыз.
Жауапты дизайн мен веб-сайт нұсқаларының айырмашылығы неде
Жауапты дизайн сайттың мобильді нұсқасынан ерекшеленеді, соңғы жағдайда пайдаланушы жұмыс үстеліндегіден өзгеше html кодын алады. Бұл сервер жұмысын оңтайландыру, сондай-ақ іздеу жүйесін оңтайландыру тұрғысынан кемшілік. Сонымен қатар, сайттың әртүрлі нұсқалары үшін статистиканы есептеу қиындай түседі. Бейімделу әдісінің бұл кемшіліктері жоқ.
Түрлі құрылғылардың жауап беру қабілеті көрсетілген еннің пайызы бар орналасу арқылы немесе блоктарды қолжетімді кеңістікке тасымалдау арқылы (смартфондағы тік жазықтықта орнына) қол жеткізіледі.жұмыс үстелінде көлденең) немесе әртүрлі экрандар үшін жеке макеттер жасау.
Оқулықтарымыздан жауап беретін дизайн және әзірлеу туралы толығырақ ақпарат алыңыз.
