Веб дизайнның пайда болуы
Веб дизайнның пайда болуы
Веб-дизайн тарихы 1991 жылы алғашқы веб-сайттың пайда болуынан басталады. Оның авторы Тим Бернерс-Ли өз сайтында жаңа технология — World Wide Web туралы жазды: HTTP деректерді тасымалдау хаттамасы, URL адрестеу жүйесі және HTML гипермәтіндік белгілеу тілі.
Бірінші веб-сайт бастапқыда интернет-каталог қызметін де атқарды: кейін автор онда басқа сайттарға сілтемелер тізімін жариялады. Уақыт өте келе жаңа мақсаттары бар сайттар көбейіп, технологиялардың дамуы веб-беттердің көркемделуіне ерекше мән бергізді. Графика сапасы, үйлесімі және қолданушыға әсері бағалана бастады — осының бәрі веб-дизайндың қалыптасуы мен дамуын жеделдетті.
Анықтама: Веб-дизайн ұғымына сайттың шаблонын жасау және оны графикалық тұрғыда көркемдеу кіреді.
Қазіргі веб-дизайндың негізгі мақсаттары: объект бейнесін қолданушыға дұрыс қабылдату, сайт құрылымын қарапайым әрі түсінікті ету, интерфейсті жеңіл ұғындыру, навигацияны ыңғайлы құру және басқа да қолдану ыңғайлылығына қатысты міндеттер.
Веб-дизайндың негізгі аспектілері
Веб-дизайн — мультипәндік сала. Оның негізгі құрамдас бөліктері төмендегідей:
Мазмұны
Мәтіннің қалай жазылғаны, оның құрылымы, HTML арқылы ұйымдастырылуы және ұсынылу тәсілдері.
Көрінетін бейнесі
Экран кеңістігін құру: орналасу, композиция, графикалық элементтер, визуалды навигация. Әдетте HTML және CSS арқылы іске асады (тарихи контексте Flash те қолданылған).
Технология
Интерактивті элементтер: клиент жағындағы сценарийлерден (мысалы, JavaScript) серверлік қосымшаларға дейін.
Жеткізу
Сайттың жүктелу жылдамдығы, жүйенің тұрақтылығы, желілік архитектура және техникалық инфрақұрылым.
Тағайындау (мақсаты)
Сайттың қандай себеппен жасалғаны — барлық шешімдерге әсер ететін базалық фактор. Экономикалық мақсаттар, аудитория, бәсекелестер және бренд позициясы осы жерде ескеріледі.
Әр аспектінің салмағы сайт түріне тәуелді. Мысалы, жеке бетте интернет-дүкенге тән экономикалық есептер басым болмайды, ал өндірістік ішкі желідегі жүйеге жарнамалық сайттардағыдай күрделі визуал қажет болмауы мүмкін.
Веб дизайнға қойылатын талаптар
Веб-дизайн — сайтты әзірлеудің алғашқы кезеңі. Тарихи тұрғыда ол көбіне Adobe Photoshop немесе Macromedia FlashMX секілді құралдармен орындалды; кейбір элементтер CorelDraw, Adobe Illustrator, сондай-ақ 3D модельдеу бағдарламаларынан импортталатын.
Дегенмен веб-дизайн тек «әдемілік» емес. Ол — қолданушыға ыңғайлылық: тұрақты элементтердің айқын бөлінуі, мәзірдің түсініктілігі, мәтін мен суреттердің үйлесімді орналасуы.
Негізгі талаптар
- 1 Дизайн компанияның имиджін айқындайтын стильді болуы керек.
- 2 Фирмалық стильмен (түстер, шрифттер, графикалық тіл) үйлесуі қажет.
- 3 Қолайлылық сезімін тудыруы тиіс: мәтін құрылымы, суреттердің орны, түстер үйлесімі маңызды.
- 4 Навигацияны «іздетпей», бірден табылатын ету: мәзір анық әрі түсінікті болуы керек.
- 5 Жарнамаланатын тауарға, қызметке және ақпараттың сипатына сәйкес келуі қажет.
- 6 Жеңіл болуы керек: беттер ұзақ жүктелмеуі тиіс (әсіресе графика мен анимация көлемі).
Анимация туралы ескерту
Анимация назар аударады, бірақ «салмағы» үлкен болса, жүктелуді баяулатып, қолданушының жұмысын қиындатады. Сондықтан оны мақсатқа сай және үнемді қолданған дұрыс.
Неге бұл маңызды?
Веб-дизайн полиграфиялық дизайн секілді: визуал имидж қалыптастырады, сенімді күшейтеді, ақпарат пен қызметті қабылдауды жеңілдетеді және сатылымға әсер етеді.
Веб-дизайн қалай құрылады?
Веб-дизайн — жалпы жоба жұмысының бір бөлігі. Әдетте алдымен техникалық тапсырма әзірленеді: дизайн талаптары, беттегі негізгі элементтердің орналасу сызбасы, функционалдық шектеулер көрсетіледі. Осыдан кейін тапсырма дизайнерге беріліп, бірге дизайн концепциясы жасалып, бекітіледі.
Әдетте басты бет (homepage) бүкіл сайтқа ортақ стильді анықтайды. Жобалау және іске асыру уақыты бірнеше күннен бірнеше аптаға дейін созылуы мүмкін.
Визуалды қабылдау және орналасу логикасы
- Логотип көбіне экранның сол жақ жоғарғы бөлігінде орналастырылады; бұл көптеген қолданушыға үйреншікті.
- Жаңа брендтер үшін логотипті оң жақ жоғарыға қою да есте сақтауды жылдамдатуы мүмкін.
- Беттің жоғарғы бөлігін фото немесе графикалық иллюстрациялармен безендіру жиі қолданылады.
Қолжетімділікке жақын қадамдар
- Суретке курсор апарғанда көмекші мәтін (tooltip) шығуы қолдануды жеңілдетеді.
- Гиперсілтемелер жалпы мәтіннен анық айырмалануы керек.
- Шрифт өлшемін өзгерту мүмкіндігі әртүрлі экрандарға бейімделуге көмектеседі.
- Тышқан қолданбайтын пайдаланушылар үшін пернетақпамен (Tab арқылы) навигация қарастыруға болады.
Коммерциялық беттерге тән ұсақ детальдар
- Тауар бағасын көбіне суреттердің астына орналастыру ыңғайлы.
- Мекенжай мен сандық деректерді беттің төменгі оң жағына беру жиі кездеседі.
- Баннердің орналасуы назарға және басу ықтималдығына әсер етеді.
Веб-графика: оптимизация, растр және вектор
Графиканы құру және оңтайландыру — күрделі жұмыс. Веб-бетті графикасыз да шрифт, скрипт, стиль кестелері (CSS) арқылы көрнекі етуге болады. Бірақ нәтиже көптеген факторға тәуелді: браузер өлшемі, үнсіздік бойынша алынған шрифттер, түстер, сондай-ақ әр браузердің стильдер мен скрипттерді әртүрлі қолдауы.
Егер графика қолданылса, қолданушы бетті көбіне автор ойлағанға жақын түрде көреді. Бірақ веб-графикадағы басты шектеу — интернет арнасының өткізу қабілеті. Сондықтан файл көлемі аз, сапасы жеткілікті болатындай етіп оптимизация жасау маңызды.
Растрлы графика
Растрлы сурет пикселдерден тұрады: әр пикселдің нақты орны мен түсі бар. Ол түс градациясын және жартытонды дәл береді, жоғары детализацияға қолайлы, сондықтан фото секілді тонды суреттер үшін тиімді.
Кемшілігі: бұру немесе үлкейту кезінде сапа төмендеп, шекаралар «тістелген» болып көрінуі мүмкін.
Векторлы графика
Векторлы графика математикалық фигуралар (векторлар) арқылы беріледі: координаталар, қисықтар, түстер және басқа параметрлер сақталады. Өлшем өзгерсе де сапа сақталады.
Қолданылуы: анық контуры қажет логотиптер, белгішелер және ұсақ кегльді мәтіндер үшін өте ыңғайлы.
Adobe Photoshop туралы
Adobe Photoshop — растрлы графиканы кәсіби өңдеуге арналған қуатты пакет. Ол әртүрлі фильтрлер мен эффектілерді, сондай-ақ суретті модификациялаудың көптеген мүмкіндігін біріктіреді.
Flash: веб-мультимедиа дәуірінің құралы
Бір кезеңде Macromedia Flash веб-жобаларды анимация және дыбыспен толықтырудың кең таралған құралы болды. Алғашында Splash Animator ретінде пайда болып, кейін Macromedia тарапынан дамытылып, Flash атауын алды.
Flash-тың интерактивтілігі ActionScript сценарийлері арқылы кеңейді. Бұл интерфейс логикасын құруға және түрлі әрекеттерді автоматтандыруға мүмкіндік берді. 1996 жылдан кейін Flash көрнекі мультимедиялық веб-беттер жасауда кең қолданылып, көптеген ірі компаниялар тәжірибесіне енді.
Веб-бет формуласы (тарихи түсіндірме)
Веб-бет = HTML + Flash
ActionScript қолданылғанда, кей жағдайда JavaScript те қосылады; сервермен өзара әрекеттесу үшін CGI секілді тетіктер пайдаланылуы мүмкін.
Практикалық тәсіл: толыққанды HTML-құжатты шағын клиптермен көркемдеу.
Flash мүмкіндіктері
- Векторлы графика: күрделі көріністерде де файл көлемін ықшам ұстауға мүмкіндік береді.
- SWF экспорт: графика, мәтін, схема және анимацияны ықшам форматқа шығару.
- Library: қайта қолданылатын объектілерді жүйелі сақтауға арналған кітапхана.
- Түстермен үйлесім: палитра мен градиенттерді басқа редакторлардан импорттау/экспорттау мүмкіндігі.
Интерактив және ағымды жіберу
- Text field: қолданушыдан дерек жинау, динамикалық мәтін көрсету.
- Streaming: файл толық жүктелмей тұрып, анимация мен дыбысты біртіндеп ойнату.
- Дыбыспен жұмыс: event және stream дыбыстары, деңгейін басқару, синхрондау.
Дыбыс форматтары туралы
Фондық дыбысты HTML арқылы қосу тарихи тұрғыда mid немесе wav форматтарымен шектелді: mid — көлемі шағын, бірақ сапасы төмен; wav — сапалы, алайда ауыр. Flash бұл мәселені компрессия және ағымды ойнату арқылы белгілі деңгейде жеңілдетті.
Қорытынды
Веб-дизайн сайттың шаблонын жасау мен графикалық көркемдеуді қамтиды. Оның мақсаттары — қолданушыға ақпаратты оңай қабылдату, құрылымды түсінікті ету, интерфейсті ыңғайлы қылу және навигацияны жеңілдету. Бұл мақсаттарға жету үшін дизайнерлер компьютерлік графика құралдарын және веб-технологияларды қолданады.
Dreamweaver MX секілді құралдар визуалды редакциялау мен бет құрастыруды жеңілдетіп, әзірлеушілерге әртүрлі серверлік технологиялармен жұмыс істеуге мүмкіндік берді. Flash те бір кезеңде анимацияланған, интерактивті элементтерді оңай енгізудің тиімді жолы ретінде кең қолданылды.
Веб-ресурстың танымалдығына дизайн сапасы тікелей әсер етеді. Веб-бет жасаушы өз білімін шығармашылық әлеуетімен ұштастырып, әрі суретші, әрі бағдарламалаушы ойлауын біріктіргенде нәтижесі сапалы болады.
Қолданылған әдебиеттер
- 1 Мұхамбетжанова С. Т. Компьютерлік дизайн. Алматы, 2007.
- 2 Балафанов Н., Бөрібаев Б.