Веб – дизайн негіздері

Стильдік дизайн 

Бет макеті

Стиль бірыңғайлылығы

Алуан түрлілікті енгізу

Веб – бетте ақпараттарды бөліп орналастыру

Мәтін және шрифт  

Мәтіннің негізгі элементтері

Тақырыбы, аталуы және тақырыпшалар

Шрифт

Сілтемелер

Фон

Веб – беттердегі графика 

Эмблемалар және навигациялық элементтердің орналасу орны

Миниатюрадағы бейнелер

Логотиптер

Грфика бойынша кеңестер

Сайттың сыртқы көрінісі

Сайттың сыртқы көрінісін басқару

Бастапқы беттің ерекшеліктері

Хабарлама өлшемін кішірейту

Келушілермен байланысты ұйымдастыру үшін арналған формалар және элементтер

Жақсы HTML ережелері

Веб – беттердегі композиция

Композицияның негізгі ережелері

Композиция құралы

Түс

Веб – дизайндегі басты қателіктер

Веб – дизайн бойынша кейбір сілтемелер

Қорытынды

 

Осы лекцияда сіздер негізінен веб – беттер дизайнының негіздерімен танысасыздар. Сіздер, ақпараттық құрылым қалай тұрғызылатындығын, қалай және қандай тәртіпте элементтерді бетке орналастыру қажеттігін, веб-беттер композицияларын білетін боласыздар. Веб – дизайн бойынша көптеген пайдалы кеңестерге ие боласыздар.

Басты сөздер: Дизайн, векторлық және растырлы графика, графикалық редактор, құралдар, сүзгілер, графикалық жануар бейнелері, тиүстер палитрасы, графикалық формат файлдары және т.б.

Осы лекция веб – даналығының қысқаша жинағы болып саналады, мұнда веб – дизайнге арналған әртүрлі электрондық және қағаздық басылымдар ақпараттары мән мәліметтері бар. Осы кеңстерді интернетте және дизайн бойынша басылған кітаптарда көруге болады, яғни ол оларды құрушыларды іс – жүзінде айырып білу мүмкін еместігін білдіреді. Сондықтан көптеген веб – дизайн бойынша кеңестерді біз халықтық деп біліп және біздің курсымызда оқуға тұрарлық мәліметтер деп санаймыз.

 

Стильдік дизайн 

 

Стильдік сайт – ол әрбір бет өзінше айрықшаланған көптеген немесе барлық дерлік сайттар үшін қажетті көркемділікке ие. Қай уақытта бағытталу жеңіл және ақпараттарды іздеу негізінен адасып қалу және уақытты көптеп жоғалту қаупі болады. Бұл негізінен әрбір бет минуттан кіші уақыт ішінде жылдам жүктелетін кезде жеңіл және қауіптігі аз болып саналады. Сайттың стильділігі бірнеше тәсілдермен жүзеге асырылады. Стильді құру кезінде қатысатын келсі элементтерді бөліп көрсетуге болады:
Шрифт – басылым көлемінде ол бірдей сипаттамаларие болуы қажет – атап айтатын болсақ, гарнитурасы (сызылуы), кегель (биіктігі) және түсі.
Азат жол – мүмкіндігінше беттегі теңестірудің түрлрінің бір болуы қазжет, мысалы, басылым сол жақ шеттен оң жаққа қарай теңестірілген болуы мүмкін.
Сайттың түстік схемасы – ол қарапайым мәтінді, сілтемелерді және келіп кетушілер сілтемелерін ұсыну үшін пайдаланатын үш түсті таңдап алудан басталады. Барлық осы аталған параметрлер тэгте көрсетіледі. Мұндағы түстік схема өз кезегінде басылымның барлық беттерінде қайталанатын болады, ол негізінен келушілерде сайттың бір бірімен байланыстылығы туралы сезім ұяландырады.

Сайттың графикалық безендірілуі жалпы түстік схемаға сүйенуі тиіс. Барлық графикалық элементтерді екі үлкен класқа бөлуге болады: суреттелген және фотошынайы суреттер. Негізі осы екі типті безендіру барысында араластырмаған жақсы болады. Егер сайтта фотографияларды пайдаланатын болсаңыз, онда оны пайдаланардан алдын немесе сайтқа орналастырудан алдын өңдеуден өткізіңіз – ең жақсысы мүмкіндігінше тондық және түстік коррекциялаудан өткізіп, кадрлауды жүргізіп, өлшемді таңдап және фотографияның шеттерін өңдеу жолын табыңыз. Одан ары алынған безендіруді барлық сайт бойынша пайдаланыңыз. Міндетті түрде фотографияларға ALT параметрінде және тэга IMG түрінде түсіндірмелер берңізі – ол фотографиядағы қойылған қол сияқты қабылданады және одан басқа пайдаланушыны сол бет қызықтырып отырған болса, онда оның күткен ойынан арылуына көмек тигізеді.

Барлық уақытта келіп көрушілерге басты бетке өту мүмкіндігін жасаңыз. Көптеген келіп көрушілер сіздің бетіңізге іздеу жүйесі арқылы түсіп кететінін, яғни басқаша айтқанда бірінші бетке емес басқа беттерін түсуі және ол жерден басты бірінші бетке өту алу мүмкіндігін қалдырыңыз. Егер навигациялық панельді графикалық құралдармен толтыратын болсаңыз, онда міндетті түрде оның мәтіндік көшірпмесін жасап және оны қандайда бір төменгі жаққа орналастырыңыз (мәтін графикаға қарағанда жылдам қосылады:).
сіздің келіп көрушілеріңіздің монитор экранының көрсету қабілеттері бойынша статистиканы міндетті түрде қарап көріп және пайдаланушылардың көпшілігінің көңілінен шығуға тырысыңыз.

Сілтемелердің дұрыс құрылымдануына үлкен назар аударпыңыз. Осы аталған жағдайда негізінен сілтемеге келіп етушілердің назар аударуының шоғырлануы көп байланысты болады: Дұрыс емес құрылған сілтеменің мысалы: «Жақсы тәртіп немесе жақсы қарым қатынас жасаудың ережелерін жақсылап білу үшін «мұнда» сілтемесін басыңыз. Ақпараттылық тұрғысынан алғанда сілтемені келесідей жасаған дұрыс: «Жақсы әрекет ету ережелері бойынша сіз осы жерде жақсы біле аласыз».
Осы қу емес ережелерді сақтау негізінен сіздің беттеріңізге кәсіби көрініс беруге мүмкіндік береді және ондағы ақпаратты, басқаша айтқанда сіздің сайтыңызды жеңіл таба алатын және жеңіл көре алатын етеді.

 

Бет макеті

 

Бет макеті негізінен таңдалып алынған ақпараттық құрылымға байланысты және модульдік торлар негізінде құрылады.

Модульдік тор – веб – беттер блогының белгілі бір тәртіпте және композицияда орналасуы.

Әлемдік тәжірибеде беттер құрылымын түзудің бірнеше жалпы схемалары жасалынған және іс жүзінде барлық сайттар барлық мүмкін болатын модуляяцияларымен бірге түрлердің ішіндегі бірін ана пайдаланады.

Модульдік торлар түрлері

 

 

 

Мұндағы жеке блоктардың өлшемдері негізінен жалпы кестеге және өзінің арналуына байланысты тағайындалады. Көпшілік жағдайда колонналар ені үшін модульдік өлшем ретінде баннерлерді стандартты өлшемдеріне жақындатылған өлшем пайдаланылады.

Тапсырма 9.1.1. Қандай модульдік торда ең лдымен сіз жасаған веб – бет пакеті сәйкес келеді. жаңа стандартты емес модульдік торды ойлап табыңыз. Және сіздің таратуыңыз үшін оның қай жағымен тартымда немесе қолайлы екендігіне негіздеме беріңіз.

Модульдік торды таңдап алып онда веб – беттер элементтерін орналастырыңыз. Қағида бойынша логотип негізінен нагигациялық панель, баннерлер және қосалқы элементтердің үстіне орналастырылады – бүйір жағынан, негізгі мәтін – ортасында, пиктограммалар – материал тақырыбының қасында және навигация тетігі орналасады. Веб – беттердегі элменттері орналасуы қалай болса және олардың құрамы солай орналасатындығы қабылданған. Бірақ әртүрлі шығармашылық ауытқулар болады, олар егер белгілі бір сәнділікпен орындалған болса, оларды құрушыларға өздерінің жеңіп алған сәйкес беделін береді.

 

Стильдің бірыңғайлылығы

 

Тұрақтылық – жақсы жсорпарланған сайттардың бірден бір сипаттамалары болып табылады. Тұрақтылық дегеніміз пайдаланушылар үшін қағида өзгерткен жағдайда олар үшін үйреніп қалған жерін көру үшін кедергі жасамайсыз дегенді білдіреді. Тұрақтылық негізінен комфорт құрып және сіздің сайтыңыздың дербек ерекшелігінің болуына алып келеді.

Сіздің сайтыңыздың беттері бастапқы беттерінен ерекшеленбеуі қажет, бірақ және олардың сыртқы көріністерін толықтай көшіріп алуға да болмайды. Тұрақтылық сайттың стилін бұзбастан оған ешқандай өзгерістерді енгізуге болмайды дегенді мүлде жоққа шығармайды, яғни оны бастапқы беттен өзгертуге және жалпы алғанда барлық бететрдегі стильдің сақталуы қажеттігін білдіреді. Өзгермейтіндер болып негізінен қағида бойынша фон түсі, текстурасы, шрифты, сілтемелер түрі және веб – беттегі суреттердің орналасуы және өлшемі есептеледі. фонды минимальды өзгерте отырып, сонымен қатар мәтінді және веб – беттегі суреттің орналасуын жүргізе отырып сіз өз сайтыңыздағы қайталанып отыратын стандартты қалыптастыруыңыз қажет, ол стандарт  болса, өз кезегінде сіздің түйініңіз үшін айрықшалаушы немесе аңғартатын белгілі бір ерекшелікті қамтамасыз етеді. Осының нәтижесінде сіз сіздің сайтыңызды көрушілер үшін тартымды да есте сақталуға қабілетті көріністі құра аласыз.

Сайтқа бірыңғайлылықты берудің тәсілдерінің бірі болып – суреттерді немесе фоторграфияларды беттің үнемі бір жерінде орналастыру есептеледі. екінші бір тәсіл мәтіннің колонкасын үнемі бір жағынан бастап орналастыру.

Сіз сонымен қатар сайтқа салынатын сурет немесе иллюстрацияның айналасына түс беру арқылы рамканы немесе суреттер айналасына белгілі бір фон беру арқылы бірыңғайлылықты бере аласыз. Бір рет суреттер немесе иллюстрацияларды қою тәсілін меңгеріп алып және оны үнемі пайдалануыңыз қолайлы болып табылады.

 

Алуантүрлілікті енгізу

 

Әртүрлі әдістердің ішінен бірін пайдалана отырып өз сайтыңызға сыртқы алуантүрлілікті енгізіңіз. Алға қоған мақсатыңызға байланысты сіз сайттың әртүрлі беттерінде түстер арқылы бөлуді пайдалануыңызға, үлкен емес графикалық элементтерді енгізуіңізге, беттен келесі бір бетке өткен сайын мәтіннің орналасу орнын түрлендіруіңізге болады. Беттердің түстер арқылы бөлудегі ең қарапайым әдістің бірі болып – түйіннің әртүрлі бөлімдері үшін мәтіннің түсін ғана өзгерте отырып фон түсін өзгертпей сақтау болып табылады. Бұл әдіс сайттың ішкі беттері үшін пайдаланылатын түстер (сілтеме бар сайттың ішкі беттері болғанда) бастапқы беттердегі сол беттерге жасалған сәйкес сілтемелер түсімен сәйкес келетін жақдайларда жақсы эффект бере алады. Мұнда сілтемедегі тетіктер түсі және сәйкес беттер түсін стандартты палитрадан алған дұрыс.
Осының нәтижесінде сайт өзінше дербес бірыңғайлылыққа ие болады, және өз кезегінде өз сайтыңызды көрушілердің әртүрлі бөлімдер арасындағы айырмашылықтарымен қызығушылықтарын тудырады.

Бөлімдерді бөлуге болатын тағы бір тәсіл болып және сайт беттерін бөлуге мүмкіндік беретін тәсіл – фотографиялар және иллдюстрациялардың айналасына түстік рамкалар орнату болып табылады. Мұнда негізінен түстік бөлу байқалатындай болуы қажет, бірақ адам назарын толықтай өзіне аударатын болмауы қажет. Бұл түстер негізінен өзіне емес, сайт сол бетінің мазмұнына деген тартымдылыққа ие болуы қажет, яғни ол сайт бетінің негізгі элементі емес тек оның бөлімдерінің арасындағы айырмашылықты ғана қызықтыратын болуы тиіс.

Тізбекті түрде сіз сайт мазмұнын қарапайым ете отырып, оның беттеріне дербес бірыңғайлылықты бере аласыз, бөлімдерді бөліп және сайт әрбір бетіне тамаша көрініс тарту етесіз.

Тапсырма 9.1.2. Өзіңіз жасап шыққан макетке талдау жүргізіңіз, сонымен қатар онымен байланысты веб – беттрге де талдау жүргізу қажет. Талдау арқылы бттің қай бөлігі бүкіл сайт көлемінде бірыңғай стильде жұмыс істейтінін анықтап, ал қай бөлігі әрбір бөлімнің спецификалық ерекшеліктерін көрсетіп отырғанын анықтаңыз. Сіздің стиліңіздің ішіндегі стандартты емес өрнекті анықтауға тырысыңыз. Бірақ стандартты еместік тартымдылыққа залал келтіру тұрғысынан пайдаланылмауы тиіс, сонымен қатар ол қарапайым, технологиялы және сайттарды бағалаудың кез келген критерийлері бойынша да теріс эффект бермеуі тиіс. Талдау нәтижесін егжей – тегжейлі талқылап және оны өз папкаңызға сақтап қойыңыз. Сіз бұдан ары осы сақталған бойынша әрбір бөлімнің шаблонын жасау кезінде жетекшілік нұсқау ретінде пайдаланатын боласыз.

 

Веб – беттерде ақпараттарды таратып орналастыру

 

Веб – беттрде ақпараттарды орналастыру кезінде де белгілі бір шектерді сақтау қажет. Әрине мақала немесе басқа көлемді материалдың тек мәтінінен тұратын беттер де кездеседі. Бірақ сайтты көрушілердің осындай арнайы жасалған беттерге кездейсоқ қателікпен түсіп кетуінен сақтанудың қажеті жоқ. Ол үшін негізгі беттерде кез келген мақаланың басында екі-үш сөйлемнен тұратын мәтіннің мазмұнын түсіндіретін түсіндірме болуы қажет. Одан ары мақаланың толық версиясы үшін жасалатын сілтеме орналасады.

Егер сайтта мақалалар циклы келтірілетін болса, онда әрбір мақалада сайт бойынша жүруді жеңілдету үшін мазмұнына сілтеме жасау қажет болады. Мұнда негізінен пайдалнушыға оның қандай бөлімнен келгенін, оның қай жерде орналасқандығын және келесі сілтеме қайда апаратындығын көрсету маңызды болып табылады. Мұндай нұсқаушылар болып сілтемелер мәтіні және тақырыпшалар есептеледі. олай болмаған жағдайда егер пайдаланушы келесі сілтеменің қайда апаратындығын білмесе және ол туралы күмәнді болатын болса, ол сілтемені басып көруге тәуекел жасамайды.

Сайттар өлшемі және күрделілігіне қарамастан келесі төмнде келтірілген элементтерден құралады:

• сөз (мәтін)
• фон
• графикалық элементтер және логотиптер
• навигациялық элементтер
• келіп көрушілермен байланысты ұйымдастыратын элементтер

Бұл, сөзсіз жасанды бөлу болып табылады, бір элементті безендіру екінші бір элементке әсер ететін болғандықтан, сізге өз сайтыңыз көлемінде келісілген бір стильді ұстаған дұрыс. Аталған элементтерді жеке жеке қарастырайық.

 

Мәтін жән шрифт  

 

Веб – беттерді безендіру негізінен қағида бойынша ақпараттық материалдарды жинақтаудан және материал үшін қажетті эффекті көріністі беру үшін қолданылатын құралдарды таңдап алудан басталады.

Одан басқа құрылымды жасауда сол кезеңдегі маңызды болып кез келген басылымның негізін құраушы мәтінді дайындау есептеледі. сөздер – ерекше «қыштар», олардан сайттар тұрғызылады.

Мәтін – анағұрлым ерекшелікке ие сайт элементі болып табылады. Барлық уақытта сол бір шрифтыны пайдалану қажет, әріптер биіктігі, түсі, веб – беттер ұқсас элементтері үшін колонканы да үнемі бір түрін пайдалану қажет. Сіз бұл аталған параметрлердің барлығын пайдаланушы компьютерінде бақылап отыра алмайсыз. Бірақ бұл мүлде бақылау болмайды деген сөз емес, бақылау тек салыстырмалы ғана болады. Сіз нақты шрифтыны және оның өлшемін нақты бере алмайсыз, бірақ кез келген браузер стиль шрифты арасындағы айырмашылықтарды, мысалы тақырып 1 және Тақырып 2 стиль шрифтары арасындағы немесе Қарапайым шрифты арасындағы өзгешіліктерді ажырата алады. Оригинальды мәтіндер, мысалы, жарнамалық буклеттен алынған мәтіндер және интернетте өзгеріссіз түрде алынған мәтінде сол сайтта өзгеріссіз қалады, бірақ оның оқылғыштығы нашар болады, себебі олар ақпаратты қабылдаудың мүлоде басқа стилі үшін жасалады.

Мәтін жеңіл оқылатын және түсінікті болуы қажет.

Жеңіл оқылатын мәтінге және түсінікті мәтінге ие сайттар өте әйгілілікпен пайдаланылады.

Хабарламаны түсінікті ету – ол автордыңғ және редактор міндеті болып табылады, ал сөздерді жеңіл түсінетін ету – ол дизайнер міндеті. Оқылудың жеңілдігі қатарлар ұзындығын, шрифті биіктігі, ал кейде мәтінді орналастыру жағдайы және оның түсімен анықталады.

 

Мәтіннің негізгі элементтері

 

Тақырып – шрифты арқылы өзіне назар аударатындай етіп үлкен етіп жазған дұрыс, ол жеңіл оқылатын шрифты болуы, не болмаса өте анық көрінетін қиын оқылатын шрифты немесе есте қалатын гарнитура тәрізді болуы қажет. Бұл шрифттер сымалы ретінде келесілер атап өтуге болады: Helvetica, Tahoma, Arial (көлеңкесіз), Baltica (көлеңкелі), әртүрлі деколративті шрифтар.
беттің ортасына тақырыпты қоймаңыздар. Орталықтандырылған мәтін бос кеңістікті екі бөлікке бөліп жібереді, яғни мәтіннің оң және сол жағында бос орын қалады. Бос кеңістік адам назарын мәтінге қарағанда көп өзіне аударуы мүмкін.
бас әріптермен терілген тақырыпшаларды (сонымен қатар кез келген сөздер мен фразалар) жазбауға тырысыңыз. Мұндай жазулар басқа қарапайым әріптермен жазылған сөздерге қарағанда орынды көп қажет етеді. Одан басқа мұндай сөздер мұнда шығып тұратын әріптердің болмауынан танылуы қиын болады.
Девиз (немесе цитата) – бұл әдетте негізгі мәтінен қарапайым шрифттермен 1-2 қатар төмен орналастырылады. Мұнда оны жазу үшін пайдаланылатын шрифт кіші болғандықтан – 9-11 пиксел, мұнда асты сызылмаған және көлеңкелі шрифттерді пайдаланбаған дұрыс, атап айтатын болсақ келесі шрифтілерді (Helios, Helvetica, Arial, Tahoma). Одан басқа, егер фраза еңісті шрифтымен терілсе де жақсы, мысалы italic шрифтімен. Олай болса, оның байқалануы анағұрлым елеулі болады.
Негізгі мәтін – өлшемі 10-14 пиксел болатын шрпифтымен теріледі. Мұнда нгізінен стандартты шешім қабылдау қажет – көлеңкелі немесе көлеңкесіз, бірақ міндетті түрде оқылуы жоғары шрифты болуы тиіс. Веб – беттер үшін негізінен келесі шрифтылар Arial, Helvetica, Times Roman жақсы тура келеді.
Мағыналық бөлімді бөлу үшін арналған бірнеше типографиялық тәсілдер бар. Бұл тәсілдерді жалпы қабылданған және міндетті емес деп екіге бөледі:

• Жалпы қабылданған: жуан асты сызылған және қисық шрифттер.
• Міндетті емес: бөлу, астын сызу және түстер арқылы ерекшелеу.

Жуан асты сызылған шрифттарда ерекшелік бар – жуан әріппен жазылған сөз оқышуның бөлінетін орынға жетпей жатып көзіне көрінеді. Бұл оқып жатқан адамды автор дайындаған сыйлықтан алыстатын жіберуі мүмкін болғандықтан, мұндай жағдайларда негізінен негізгі мәтінде курсивті пайдаланған жөн, ал тақырыптар үшін – жуан асты немесе асты сызылған шрифтыларды пайдалануға болады. Басқа барлық тәсілдер сияқты шрифтыны түспен бөлуде де белгілі бір шек болуы қажет.
Мекен жай,телефон, авторлар аты –жөні - әдетте не 1-2 пиксел өлшемге негізгі мәтіннен үлкен, немесе солармен бірдей өлшемде, бірақ жуан әріптермен жазылуы тиіс (bold).

Ешқашан басылым үшін шрифтыны таңдауда асықпаңыз, тіпті трекинг (әріптер арасындағы қашықтық),  интерлиньяж (қатарлар арасындағы қашықтық), азат жол тасталатын қашықтығы және т.б. сияқты кіші нәрселердің өзіне ұқыпты қараған жөн. Бірінші кезеңдердің өзінен астарлы шрифттерді пайдаланбауға тырысыңыз, оларды білмей қолданатын болса оқып қараушыларды сіздің материалыңыздан бас алып қашуына алып келуі мүмкін. Әдемі, бірақ нашар оқылатын шрифтыларды пайдалану қағида бойынша, сайт құруды бастаушылардың негізгі қателіктері болып табылады.
Егер сіз екі түс пайдаланатын болсаңыз немесе фон үшін екі әртүрлі қаныққан түсті қолданатын болсаңыз, мәтін және суреттерге тартымдылық берудің күрделі емес тәсілдерінің бір – тақырыптарды екі әртүрлі түсті фон арасындағы шекараны бөліп тұратындай тіп орналастыру болып табылады. Тар колонкаларға сол жақ шетін фон түсінің өзгеру шекарасынан бастап қою арқылы көркемділік беріңіз.

 

 

Тақырып, аталуы және тақырыпшалар

 

Сайтқа оның жұмысын елеулі баяулатпастан бірыңғайлылық берудің қарапайым тәсілдерінің бірі – қайталанып келетін, аталуы, бөлімдерді бөлуші тақырыпшалар, кіші тақырыптар, бөлімдер және цитаталар сияқты мәтіндерге декоративті мәтінді пайдалану болып табылады. Декоративті мәтін элементтері сонымен қатар салыстырмалы үлкен емес және жылдам тиелетін болуы қажет. Сіз ең жақсысы мәтіннің сыртқы көрінісіне әсер ете алып және сіз пайдаланып жытқан шрифты браузерлермен пайдаланылатын сайтты көрушілеріңіздің пайдаланған ешқандай шрифтына ұқсамайтынына сінімді бола аласыз. Тіпті өзіндік сипатқа ие және өзгермейтін шрифтымен жазылған бір – екі сөздің өзі тамашы сыртқы көріністі ұстап тұру үшін жеткілікті болып табылады.

Тапсырма 9.2.1. Екінші деңгейдегі өз веб – беттеріңіздің біреуі үшін мәтіндік толықтыруды дайындаңыз, және мұнда беттің құрылымын, оның макетін және сол белгілі бөлімнен ұсыныстарды есепке алу қажет, атап айтсақ: қысқа, бірақ ақпаратпен қаныққан және түсінікті сілтемелер; бас әріптермен терілген сөздердің болмауы; тақырыптарды, мекен жайды және т.б. бөлу; трекинг, интерлиньяж, азат жол және т.б. сақтау.

 

Шрифт

 

Интернет-технологиялар веб – құжаттамаларды безендіруде шрифтыларды пайдалануға спецификалық шектеулерді бекіткен. Жеке алып қарайтын болсақ, интернеттің платформааралық сипаты мәтінді сайтты көруші монитор экранына шығару үшін пайдаланатын шрифтыны анық белгілі бір типте бекітуге мүмкіндік бермейді. HTML тега <FONT FACE=[шрифт гарнитурасы]> пайдалану сол проблманы шешу үшін панация бола алмайды. Пайдаланушы компьютерінде қажетті шрифттың болмай қалуы да мүмкін, ал оны басқамен алмастыру, жүйенің өз бетінше таңдағанымен алмастыру оқыла алмайтын құжаттаманың пайда болуына алып келеді. Сондықтан веб құжаттамаларда жоғарыда белгіленген тег пайдаланбаған жақсы жасау тәртіптерінің бірі болып саналады.

Ол негізінен құжатама денесін безендіру үшін басқа жолдарды іздеуге мәжбүр етеді. Жеке алып қарағанда мәтіннің қажетті бөліктерін түс арқылы бөлу, қатарлық символдарды пайдалану, олардың курсивті немесе жартылау жуан түрлері, сонымен қатар шрифт кегелінің манипуляциясы, яғни экранға шығару шарттары ескерілуі тиіс.

Ақпараттарды қабылдауды қолайлы ету үшін мәтін және фонның түстік қатынастары да аз маңызға ие емес. Егер клиентке ақпараттық жеткілікті үлкен көлемін ұсыну қажет болатын болса, онда оқылу қолайлылығы тұрғысынан, мәтін ашық фонта қою түспен орындалуы және жеткілікті контрастылы болуы жақсы болар еді. Мәтін астына ашық фондарды пайдалану (артқы фон) күшті өрнектеуші және көрнекілікті жоғарылату құралы болып табылады, ал ол тіпті өткір болатын болса фонға қиын болады, ал тіпті кейде мүмкін болмауы да мүмкін, себебі символдар өткір фонда өзінің көрнекілену қабілетін жоғалтады.

Оқылудың қолайлылығын қамтамасыз ету, немесе оқылу қолайлылығын бағалаудың негізгі көрсеткіштерінің бірі болып құжаттама қатарының ені есептеледі. «Идеалды енділікке» ие қатар шамамен 50-70 белгіні сыдыруы қажет. Егер олардың жиілігі бұдан асса онда оқылу жылдамдығы төмендейді, және шаршау едәуір жылдам келеді. сонымен қатар осы тұрғыдан сіздер үшін қысқаша кеңестер:

- Шрифтылардың үлкен алуантүрлілігін пайдалбаңыз, егер олай жасасаңыз сіздің сайтыңызды көруші көзінде қажу пайда болады.

- Мәтінде тыныс белгілерін, атап айтсақ Леп белгілерін көптеп пайдаланбаған жөн (!!!!). Бұл арқылы сіз сайтты көруші клиенттің шын мәнідегі маңызды мезеттерді байқамай қалуын болдырмауға қол жеткізесіз.
Егер сіз көптеген жасалған сілтемелер назарды өзіне көп аударады деп есептесеңіз – онда сіз қателесесіз. Мұндай сілтемелердің үлкен саны оқып көрушіні немесе клиентіңізді қуатпайды. Негізгі фон түсін тегке қалдырыңыз, тіпті ол ақ болса да (#FFFFFF). Ал егер фон ретінде картинканы пайдаланатын болсаңыз, онда бәрібір сіз ұқсас түсті нұсқаған боласыз (картинамен гармонияланатын). Сой жасасаңыз түсіңіз түс белсенділігі болмайды, ал әртүрлі компьютерде мұны туралау қабілеті әртүрлі болып келеді.

 

Сілтемелер

 

Сілтемелерді ұқыпты және сауатты жазу қажет. Егер сілтемелерді алып тастаған кезде мәтін түсініксіз болатын болса, онда ол тіпті сілтеме бар болса да түсініксіз болады деген сөз. Осыдан қарапайым қорытынды шығаруға болады: сілтемелер, егер олар жоқ болған жағдайда да оқып көрушілер ештеңе жоғалтпайтындай етіп жасалуы тиіс. Бастау үшін тек мәтінді жазса ғана жеткілікті, ал одан ары оған сілтемелерді орналастыруға болады.
Сілтемелерді кері немесе қараңғы мақсатта пайдалануға болмайды. Егер көп сөздің асты сызылған болса, оқышу мәтінді оқып қабылдауды тоқтатып қояды. Түстің өте жиі қайталанып келуі – адамды тітіркендіреді. Сондықтан, мәтінде неғұрлым сілтемелер аз болса, солғұрлым жақсы. Тамаша нұсқасы – сілтемелерді материалдың соңына орналастыру болып табылады. Ол жерде сайтыңызды оқушы мазмұнын оқып көріп және оған қайда болса ары қарай жылжу қажет болады.
Мәтіндегі сілтемелер максималды пайдалы болуы қажет. Оны тек мәтіндегі қозғалатын тақырыпқа байланысты, бірақ толықтай ашылмаған ресурсқа қарай жетелейтін жағдайда ғана орнату қажет.
Егер мәтінде басқа материалдар да келтірілетін болса, оларға да сілтемелер жасаған жөн. Бірақ оны жасамастан алдын – басқа бір материалды келітірудің қажет бар ма соны ойластыру қажет. Сілтемелерді келесідей көрсетуге де болады «біз кеше материалда айтып өткендей ...». осы сияқты жағдайларды сайтыңызды оқушы, басын өткізіп жіберген болса, онда өткізіп жергендерін қайта оқуға тырысады.
Тұтас фразалар үшін сілтемелер жасамаңыз. Сілтемелер шектен тыс үлкен болатын болса, олар пайдаланушыны оған бағыт беру жағынан көмектесудің орнына,  назарын өзіне аударып алады. Мұнда сіз тек кілтті сөздерді ғана бөліп көрсетіңіз. Ең жақсысы – бір-екі сөз ғана бөлген дұрыс. Осы ережелерге кейде жаңалықтар сайтынан ауытқуларға жол беріп алады. Оларда жаңалықтар бағанада бірінен кейін бірі жазылады, әрбір оның қысқа бірінші азат жолынан келтіріледі, және сол абзас болса жаңалық мәтіні туралы сілтеме болып саналады. Мұндай жағдайда сонымен қатар бүкіл жаңалықтың өзі сілтемеге сыйып кетуі де мүмкін. Бұл негізінен тышқан курсорын сол сілтеме үстіне апарған сәтте анық білінеді, ал қалған мәтін болса бұл жағдайда қарапайым түрде көрінеді.

Сілтемелерді беттің ортасы бойынша орналастырмаңыз. Сілтемелерді негізінен экранның шеті бойынша орналастырған рационалды. Еске түсіріңіз, сіз сілтеме тек оқушыны назарын аударып және сол сілтеме арқылы оған негізгі мәтінге бағыт беру үшін қажет, яғни ол текқосымша элемент болып саналады.
Сілтемелер түсінікті болуы қажет.. «Осы жерге басыңыз» деген сияқты сілтемелерден аулақ болыңыз. Пайдаланушылардың көпшілігі түспен бөлініп тұрған мәтін сілтеме екенін біледі. Қандай жағдай болмасын келесі сөздер сияқты «осында», «осы жерде» сілтемелер жасамаңыз.
Сілтемелер сайттың жалпы дизайнының бір бөлігі болып табылады. Олар гармониялы немесе сайттың безендірудің жалпы стилімен дисгармонияда болуы қажет. Естен шығармаңыз сілтменің түсі оның үстіне тышқан курсорын алып барып шерткен кезде өзгереді. Ол деген сөз сайттың ең қарапайым безендірілген түрінің өзінде мәтін кемінде үш түстен құралады: қарапапайым мәтін түсі, мәтіндік сілтемелер түсі; барылп көріп болған мәтін сілтемелерінің түсі. Барып көріп болған мәтін бөліктерінің сілтемелерін әлі көрілмеген мәтін сілтемелеріне қарағанда тартымда етуге болмайды.
Сілтемелер тартымды болуы қажет. Өз сайтыңызға құрушы емес сайтты көрушілер көзқарасымен қарап көріңіз. Сілтемелерді түйінге келуші өзіне тартып алатындай етіп қайта фразалаңыз және солай болса ол өзіне адамдарды шақырып тұратын болады. Мысалы, «Біздің тарихымыз» сөзін «Біздің жүріп өткен жолымыз» деген сөзбен алмастыруға болады. Сілтемелер түсі, оқып көруші бір жағынан оның сілтеме екенін білетіндей, екінші жағынан оған сол мәтінді оқу үшін зиян немесе кедергі келтірмейтіндей болуы қажет. Сілтемелер жөнінде екі пайдалы кеңес бар: біріншісі – Сізге сілтемелер түсін, яғни көріп болған және әлі таныспаған сілтеме түрлерінің түсін бірдей қылғыңыз келсе де, оны сәл болсын бір бірінен ерекшенетіндей ету қажет (ешқандай себептер болмаса да); және екіншісі – асты сызылған мәтін Веб сілтеме символы болсын, сондықтан басылымда асты сызылған мәтіндерді пайдалануға тырысу қажет, бөліп көрсетудің басқа да тәсілдерін пайдаланыңыз. Өзіңіз ойлап көріңіз, сіздің белгілі бір сілтемені оқып көргіңіз келді делік, бірақ тышқан курсорын алып барған кезде онда ешқандай өзгеріс байқалмаса қалай сезінесіз. :-(.

 

Фон

 

Фон – бұл беттің екінші жоспарындағы (қарапайым түрде - түс) бейнесі, оның үстіне сөздер мен суреттер орналасады.

Фон сайттың барлық беттерінде өзгеріссіз қалуы тиіс. Ол барлық беттерде сол бір түсті немесе сол бір фонды пайдалануыңыз қажет дегенді білдіреді, сонымен қатар барлық беттерде сол бір құрылым мен сол бір өрнекті пайдалану пайдалы. Фонды облыстарға бөлуге болады, ол өз кезегінде келесілерге мүмкіндік береді, мысалы, навигация элементтерін беттің бір шетіне айналасына шоғырландырып орналастыру. Егер қаласаңыз қайталанатын элементтерді және навигация элементтерін беттің жоғарғы жағына шоғырландырып орналастыруға болады.
Облыстарға бөлудің ең қарапайым тәсілі – қаныққан түсті пайдалана отырып сол бір түсті қолдану (100 пайыз қаныққан), мысалы беттің бір жағына сол түстің қаныққан түрін және екінші бір жағына сол түстің небәрі 20 пайызға қаныққан түрін қою. Бұл негізіненөте тиімді эффекті береді. Бірақ бұл түстердің әртүрлі мониторларда қалай көрінетіндігін ойлауды да естен шығармау қажет. Веб – беттер фонының түсін таңдағанда көпшілік жағдайда келесі қателіктер кездеседі:

• Шектен тыс ашық фон, ол хабарламаларды жауып қалады;
• Шектен тыс қара фон, мұнда хабарлама мәтінінің жазулары көрінбей қалады;
• Шектен тыс монотонды фон, сіздің хабарламаңызға өте маужыраған түс береді;
• Шектен тыс қаныққан фон, негізгі ақпараттан назарды өзіне қарай тартып алады;
• Текстуралы фон - әдетте текстуралар оқытушының назарын өзіне аудару үшін мәтінмен таласады, және сол арқылы әріптер мен сөздердің танылу дәрежесін төмендетеді.

Фонның негізгі арналуы турлы ұмытпаған дұрыс – яғни ол хабарламадан қарағанда қарап көрушінің назарын өзіне аударып алмсауы тиіс. Адам көзіне бірден ұрынатын немесе бірден түсетін фонды таңдаудың қажеті жоқ, бірақ есте қалатын болуы тиіс, болмаса фонды пайдаланбаса да болады.

Тапсырма 9.2.2. Мәтіннің негізгі түсін және фон түсін таңдап алыңыз. Осы түстердің контрастілігі мәтін қиындықсыз оқылатындай болуы қамтамасыз етуі тиіс, бірақ ұзақ уақыт оқу кезінде шаршамайтындай, яғни максималды ашық немесе максималды тартатын болмауы тиіс.

 

Веб – беттердегі графика 

 

Көпшілік түйіндерде, мәтінмен қатар графикалық элементтер де болады (немесе суреттер) – фотографиялар, иллюстрациялар, диаграммалар және кестелер және т.б. Себебі  World Wide Web жүйесінің артықшылығы графикалық элементтермен жұмыс істей алуынан да көрінеді.
Суреттер негізінен мәтінен ерекшеленеді, себебі олар қажет болған жағдайда пайдаланушы компьютеріне тией алатын жеке графикалық элементтер болып табылады. Суреттер мәтіндерге тәуелсіз жүктелетін болғандықтан, пайдаланушы мұндай мүмкіндіктен бас тартып және тиеу үшін жұмсалатын уақытын үнемдеуі мүмкін. Сурет неғұрлым үлкен болатын болса, солғұрлым ол күрделі және түрлі түстілігі де жоғары, және соның салдарынан тиелу немесе компьютерге салыну уақыты да көп болады.

Суреттер белгілі бір ақпараттан тұруы мүмкін, сонымен қатар тек веб – бетке белгілі бір тартымдылық беруі мүмкін.

Өзіңіздің сайтыңызға графикалық элементті қосудан алдын өзіңізге келесі сұрақтарға жауап беріңіз:

• Шын мәнінде сурет қажет пе? Оны қосқан кезде қарапайым мәтінге қарағанда ақпараттырақ болады ма?
• Ақпараттылығыны сол қалпында сақтай отырып суреттің өлшемін немесе көлемін кішірейтуге бола ма?

Үлкен ұзақ уақыт тиелетін эмблеманы пайдалану веб – беттерді құрып енді бастаған дизайнерлердің сипаттық қателігі болып табылады. Ол сайттың тиімділігін төмендетіп жіберуі мүмкін. Есте сақтаңыз, эмблема тек қана өзін жақсы көруді ғана қанағаттандырады және сайтты қарап көрушілерге ақпаратты да және кеңесті де жарытып бере алмайды.

Тапсырма 9.3.1. Өз сайтыңызға талдау жүргізіп (сайт беттеріне) жеткіліктік затына және графикалық элементтер қажеттігіне талдау жүргізіңіз. Беттерде тыс немесе қажеті жоқ артық элементтер бар ма екенін көріңіз, егер оларды өшіріп тастаған жағдайда сайт бетінің тартымдылығы және ақпараттылығы өзгереді ма?

Барлық беттердің немесе оның жеке бөліктерінің өрнектілігін басқа қосымша графикалық элементті енгізе отырып көркемділігін арттырыңыз, атап айтсақ: түрін, стильденген үлкен емес суретті қою және боялған суреттерді енгізу, боялған әріптер, боялы түсті джақтар, түс градиенттерін өзгерту және т.б. арқылы көркемділігін арттыруға әрекет жасаңыз. Талдау жүргізу нәтижесінде егер артық элементтер жоқ болса оның артық еместігін және өз ролін атқарып жатқандығын негіздеңіз.

 

 

Эмблемалардың орналасу орны және навигациялық элементтерді орналастыру

 

Сайттың әртүрлі беттеріне бірыңғайлылықты берудің күрделі емес тәсілі - әрбір бетке сол бір типтегі және бір өлшемге ие эмблеманы беттердің бір тұрақты жерлеріне орналастыру болып табылады. Сайтқа навигация үшін қажетті тетіктер мен пиктограммаларды әртүрлі беттерге сол бір орынға орналастыру арқылы да бірыңғайлылықты беруге болады. Кейде сілтемелер – тетіктерді беттің сол жақ жоғарғы бұрышына немесе оң жақ жоғарғы бұрышына топтап орналастыруға, ал беттердің жоғарғы және төменгі жағынан мәтіндік сілтемелермен дәнекерлеу жүргізіледі. Бұл жағдай сіздің мақсатыңыз – танысып көрушіні барлық бүкіл бет бойынша навигациялық элменттермен «ауға» шығуға қажеттігінен арылту болып табылады.

 

Миниатюрадағы суреттер  

 

Көпшілік жағдайда қандай да бір тақырыпты иллюстрациялау үшін үлкен өлшемдегі суреттер қажет болады, олар негізінен жеткілікті ұзақ уақыт тиеледі. Үлкен суретті орналастыру қажет болған орында оның кіші көшірмесін орнатып және толық масштабты суретке немесе бейнеге сілтеме жасауға болады. Сайтты көрушілерге бұл шынында қызық болатын болса, олар сол сілтеме арқылы суртті толық масштабта көре алады, ал кімге қажет болмаса, ол одан ары беттерді парақтап кете береді. Мұндай әдістеме негізінен кітаптардың сырттары үшін, фотографиялар, жарнамалық беттер үшін аса тиімді болып табылады, оларды негізінен сайтты қараушылардың барлық аяғына дейін оқу немесе егжей – тегжейлі көруді қажет етпейді.

Тапсырма 9.3.2. Суреттерді оптимизациялау үшін кез келген бағдарламаны пайдаланыңыз. Мұнда негізінен логотиптер және басқа суреттер үшін сапасының елеулі түрде нашарлауына жол берместен файл өлшемін кішірейтуге ұмтылыңыз. Есте сақтаңыз, графикалық редакторларда сурттерді JPEG (JPG) формсатта әрбір сақтау оның сапасын нашарлатады. Барлық суреттер үшін олардың кіші көшірмелерін дайындаңыз (иконкалар, миниатюралар). Барлық суреттерді сол кішірейтілген көшірмелеріне алмастыруға тырысыпңыз, әрине ол егер бет зинайнын құртпаған жағдайда жасалады. Толық көрсетілген суреттер үшін сілтемелер жасаңыз, және альтернативті жазбада олардың мазмұнын және файл толық өлшемін көрсетіңіз.

 

Логотиптер

 

Қағида бойынша, логотип барлық құжаттамаларға кіретін ұйымның аталуының стильденген жазбасы болып табылады. Ұйым логотипін ала отырып және фон түсі мен алдыңғы панель түсін сәтті таңдай отырып, сіздің сайтыңыздың тамаша өзіне тән ғана стильде ғажап безендірілуін жүзеге асыруға болады.

Логотипті графикалық файл түрінде сақтаңыз, ол негізінен оны кез келген мезетте бетке қою мүмкін болуы үшін жасалады. Логотипті құру кезінде оның тиелу уақыты үлкен емес болу қажеттігін естен шығармаңыз.

Ашық, есте сақталатын және стильді логотипті құру оңай шаруа емес. Логотип лаконикалы және сонымен бір мезгілде айқын, көркем, ұйымның мән мағынасын және мазмұнын түсіндіре алатындай болуы қажет.

Мысал ретінде Қашықтықтан білім беру орталығы «Эйдос» ұйымының логотипін салуды қарастырайық. Ол логотиптің мекен жайы желіде келесідей:

http://www.eidos.ru/logo.gif

 

 

Сурет 1

Логотиптің орталық элементі  - Адам – Жұлдыз, олар жоғары қарай, яғни жұлдыздарға қарай ұмтылуда. Ол өзіне таныс емескереметтерге ұмтылу, әлемді ашу және оның ішінде өзін әлемге таныту сияқты ырымды білдіреді. Қоршаған орта – бұл тек космос ғана емес, ол – ғаламдық интернет, яғни соған адам қозғалысы бағытталған болып табылады.

Адам жұлдыз – тек әлемге қоныстанып қана қоймай, сонымен бірге өзінің сәйулесін шашып және кеңістікті толтырып тұр. Ол ашық және жан жаққа  паш етілген. Көркемдік өзін өзі тарату бүкіл әлемді меңгерумен және оны танумен бір мезгілде жүзеге асырылады. Жұлдызша пішінінің ассиметриялығы, оның диоганалды бағытталғандығы, осы қозғалысты суртейді. Ашықтылық динамикасын және қозғалысты шлейф береді, ол ауа дәмін сезіндіреді. Бұл ғаламдық көк кемесінің өзіндік желкені секілді, мұнда адам саяхатқа аттанады. Логотиптің төменгі жағында келесідей eidos.ru жазбасы бар, Орталықтың іскерлігінің интернетке байланыстылығын және оның желідегі мекен жайын көрсетеді. жазбаның курсивті еңістігі болса, логотиптің жалпы диогональдық композициясымен ортақ бағыттас болып табылады. Мұндағы түзу сызықтар болса қисық сызықтармен теңестірілген, ол эмоционалды және рационалды дегендерді біріктіруді меңзейді. Логотипте сопақ пішінге шлейф элементтері, адамның басы, жазба фрагменттерінің кейбір әріптері ие. Түзу сызықтар өткір бұрыштардың басымдылығымен орындалған – және оларға доға тәрізділерге қарсы бағытта. Адам – жұлдыз бетінің сопақтығы оның көзқарасының тіке жоғары қарай тұрғанын білдіретіндей етіп жасалған. Ол өзінің озғалысына бағыттас бағытқа қарап тұр.

Логотип диалектика. Ол бір жағынан адамның ашықтығын, оның жан жақты алғырлығын және жан жақты ұмтылғыштығын білдіріп тұр. Екінші жағынан, сәулелері өте өткір, ол қажет жағдайда сұғып алуға, және қажет болғанда өзінің қарсыласын шегіндіруге және қыыштасушының қылышы сияқты қадап жеңіге дайын екендігін білдіреді. Шлейфте өз кезегінде екі рольді атқарып отыР: 1) алға түсе отырып ракета тәрізді адамға жол ашып тұр; 2) адам айналасында қорғағыш аура «кокон» түзіп тұр.
Мұнда туындап тұрған кернеулікті сезіну жұлдыздан шығып тұрған энергияны және оны ұстап тұрған бұлтты білдіреді. Логотипте адам өмірі сияқты көріністі жұмыстқа көрсетіп тұр. Осыған байланысты бұл логотипті туылып келе жатқан адам деп түсінуге де болады.

Туылу және өлім, бәріміз білетіндей бір бірімен байланысты құбылыстар. Төрт бұрышты жұлдыздың арқасында логотипте сонымен қатар крест белгілі де бар. Бірақ бұл Исус Христотстың тікелей кресті емес, ол негізінен Андрея Апостол крестіне ұқсас. Көк Андрейлік жалау, бәрімізге белгілі орыс флотының символы. Эйдос орталығы сонымен бірге виртуальды кеңістіктерді бағындыру дегенді білдіреді.

Логотиптің ашық көк немсе көгілдір аспан түсі оның көкпен байланыстылығын, биіктігін, асуларды және оның тазалығын білдіреді. Мұнда түстік гаммадағы суықтықұ байқалмайды. Керісінше, ақшыл сары түске деген қажеттілік туындайды, ол болса алауды білдірген болар еді. Сондықтан ақшыл сары түс «Эйдос» фирмалық Орталығының түстік гаммасына кіреді.

Тапсырма 9.3.3. Бұдан алдын сіз өзіңіздің визиткаңыздың логотипін салған болатынсыз. Оның нұсқауларға сәйкестігіне талдау жүргізіңіз: негізгі ойды білдіру қабілеті, файл көлемі, түстер саны, өрнектілігі, ашық және сары түстердегі, тон түсі, геометриялық өлшемі, беттегі орналасуы, стильдің логотиппен байланысы және т.б.

 

Графика бойынша кеңестер

 

Беттерді графикамен шектен тыс жүктемеңіз, әсіресе бұл E-mail, Welcome, Next және т.б. типтегі файлдар үшін қатысты. Мұнда негізінен сайтыңызды көруші оның 5 минуттан астам уақыт жүктелгені себебі немесе оны ашу үшін уақыттың көп жұмсалғаны үшін сізге ешқашан рахмет айтпайды.

Беттерде негізінен үлкен картиналарды пайдаланбаңыз. Егер солай болса да оны бірнеше немесе ең болмағанда екі бөлікке бөліңіз және оларды кестеге орналастырыңыз. Осы арқылы графиканың ашылуын жеңілдетесіз.

Егер мүмкіндік болатын болса, онда картина – сілтемелерге мәтіндік сілтемелер көмегімен балама құрыңыз. Сайтта графикалық сілтеме де және мәтіндік сілтемеде болсын, себебі кейбір пайдаланушылар өздерінің браузерлерінде графиканың жүктелуін ажыратып тастайды.

Мүмкіндігінше өзіңіздің графикаңызды салуға тырысыңыз, ол арқылы сіз сайтыңызды көрушілерге ерекше бір сезім ұялатасыз. Дайын картиналарды қойып немесе картиналар бар орынды сілтей салып еріншектік жасамаңыз. Егер WIDTH және HEIGHT типті форматтағы картиналарды орналастырсаңыз сіздің мәтініңіз әртүрлі жаққа секіріп тұрады. Картиналар суреттемелеріне ALT-мәтін жазыңыз. Келіп көрушілерді толық тиелгенше күтуге мәжбүрлі етпестен, олардың алджын ала не туралы екендігін білуге мүмкіндік беріңіз. Картина – сілтемелерде border="0" (в тегах <a href="...">) параметрлерін пайдаланыңыз, осы арқылы картина – сілтеме айналасындағы көк рамкалардан құтыла аласыз.

 

 

Сайттың сыртқы көрінісі

 

Сайттың сыртқы көрінісін басқару

 

Веб – дизайнның негізгі мәселесі түйіннің соңғы  жасалатын бір жола сыртқы көрінісін кім анықтайтынындағында – дизайнер немесе сайтты қарап көруші клиент. Құру кезінде сіз сайтқа белгілі бір сыртқы көріністі бере аласыз, бірақ ол сіздің сайтыңызды көрушілер сол сіз жасаған күйде сайтты қабылдайды немесе сол күйінде көреді деген сөз емес. Қағида бойынша хабарламаны көрсету үшін қолданылатын шрифтының көлемін, өлшемін және типін бақылай алмайсыз. Сіз сонымен қатар клиентпен қолданылатын монитор өлшемін анық біле алмайсыз, себебі мониторлар өлшемі және олардың туралау жүйесі мүлде басқаша, яғни әртүрлі болып келеді. ал осы аталған факторлар өз кезегінде суреттер өлшеміне, мәтіннің анықтығына және корректілі немесе дұрыс көрінетін түс санына әсер ете алады.
диагоналы бойынша 20 дюйм болатын мониторда тамаша болып көрінетін веб – беттер сол сияқты бірақ диагоналы 14-15 дюйм болатын мониторда сапасыз болып көрінеді. Егер сіз стандартты түстерді пайдаланудан бас тарсаңыз, онда сіздің веб – бетіңіз тартымда емес, ажарлы емес түстерден құралған болып көрінеді.

Мәтіннің сыртқы көрінісін тамаша басқару үшін декоративті мәтінді қолдануға болады. Ол мәтін негізінен графикалық элементке түрленеді және оны басқа суреттер сияқты компьютерге жүктей аласыз. Декоративті мәтін шрифтыны анықтауға, оның өлшемін, түсін және қатар аралық интервалды анықтауға мүмкіндік береді. Оған кез келген эффектілерді қолдануға болады: әріптерді ығыстыру, символдарды бояу, жартылай мөлдір облыстар жасау, көлеңкелер және контурлар, сонымен қатар мәтінді бұрышпен немесе қисайтып орналастыру. Бірақ ол мүмкіндіктер үшін өңделген мәтінді жүктеу кезінде уақыттың көптігімен төлеуге туралы келеді. аталған эффектілердің көпшілігі негізіненкаскадты кестелік стильді алуға мүмкіндік береді, онымен сіз жетінші бөлімде танысатын боласыз.

Декоративті мәтін логотиптер, сайттар аталуын, негізгі тақырыптарды және бөлімдер атауларын жасауға тамаша жарамды. Декоративті мәтінді өз меншікті стиліңізді құру үшін пайдаланыңыз.
 

Қарапайым мәтін тақырыпшалар, кіші тақырыпшалар және беттің негізгі мәтінін жасау үшін қолданылады. Оны басқару қиын, бірақ ол жылдам тиеледі және ақпараттық өрісті жылдам құра алады.

Беттің өлшемі деген түсінікті енгізейік – беттің толық өлшемі статикалық картиналар файлдарының өлшемінен құралады, олар міндетті түрде әруақта жүктеледі (логотип, навигация заттары, тетіктер), сонымен қатар динамикалық та кіреді, коим ретінде мұнда жарнамалар және әртүрлі баннерлер, сонымен қатар бет үшін жауап беретін код та қарастырылады.
 

Жобалау кезінде монитордың сандық параметрлерін ескеру қажет – беттің ең үлкен ені кемінде 770 пиксел, навигацияның бүйірлік панелін 570 пикселден ары асырмағанр жұрыс (ол негізінен экраннның рұқсат ету дәрежесіне байланысты болады 800х600 пиксел).

Бұл қызықты болуы мүмкін.

Бүкіл әлемдік желі статистикасы бойынша экранның шамамен 20 пайызын түрлендіру интерфейсі және операциялық жүйенің элементтері, шамамен 20 пайызын сайт навигациясы, шамамен 6-7 пайызын – беттік жарнамалар, шамамен 10 пайызын – меншікті жарнама, және тек 20-25 пайызын ғана логотиптер және толықтырушылар және қалған 10 пайызын – пайдалы ақпарат алып тұрады екен. Ал қалғаны болса – пайдаланылмаған орын.

 

 

Бастапқы беттер ерекшеліктері

 

Көптеген бастапқы беттер жаңалықтар, соңғы жаңарту уақыттары, белгілі бір күнен кейінгі келіп көруші адамдар санын есептейтін есептегіш туралы ақпараттардан тұрады. Есептегіштер екі бастағы таяқшалар сияқты болып келеді. егер сіздің бетіңізге адам сирек кіретін болса, ең жоғары шамада таң қалдыруды туғызады, яғни сіздің түйініңіз қызық емес деген сөз. Сонымен қатар есептегіштер аса педантикалы, өз меншікті сайтыңызды әрбір тексерген сайынесептегіш көрсеткіші жоғарылай береді. Сіз өз сайтыңызды жиі жаңарта алмайтын болсаңыз, онда жаңарту уақыты туралы мәліметтерді қоспаған дұрыс. Уақыт жылдам өтеді және ескі күн таң қалдыратын сезім қалдыруы мүмкін, яғни ол күнмен ьірге мәліметтер де ескіреді. Жаңа келушілер үшін сайттағы кез келген ақпарат жаңа болып табылады. Ал сайтпен таныс келушілер өз үшін ол жерден мүлде жаңа нәрс таба алмайтындықтан оны бүтіндей тастап кетуі мүмкін. Мүмкіндігінше сайттағы ақпараттарды жаңарту периодтылығын енгізіп қойған дұрыс. Егер ақпараттарды сіз тіпті ай сайын жаңартып отыратын болсаңыз да, сіз ол туралы дұрыс айтыңыз. Онда сайтыңызға келуші болса, егер сіздің сайтыңызға қызығатын болса, оған жиі жаңа ақпараттарды көру үшін кірі бермейді, ал ол міндетті түрде жаңартылатын уақытқа байланысты кіретін болады. Ол күн тәртібі бойынша кіріп және сіздің оның уақытын үнемдеуге септігін тигізгеніңіз үшін алғыс білдіретін болады.
 

 

Хабарламалар өлшемін кішірейту

 

Веб – беттерді А4 форматына пропорционалды етпеңіз. Сайтты келіп көрушілер мүмкіндігінше көп ақпарат алғаны маңызды және басқа беттерге айналдыру жолағын пайдаланбастан өтсе тіптен жақсы болады. Келіп көрушілер өздерінің мақсатына неғұрлым жылдам жететін болса, солғұрлым олардың сіздің сайтыңызға қайта оралуы ықтимал болып табылады.

Әсіресе көлемі үлкен болып келетін және пайдасыз ақпараттардан құралған беттер сайтыңызды көрушілердің жынына тиеді. Сайттағы сыртқы тартымджы эффектілі көрініс және тиелу жылдамдығы арасындағы белгілі бір тепе – теңдікті табуға тырысыңыз. Есте сақтаңыз, сіз өз сайтыңызды анағұрлым жылдам компьютерде құратын болсаңыз, ал сайтыңызды көрушілердің кмпьютерлерінің ондай мүмкіндігі болмауы мүмкін.

Ұзын колонкалар құруға болмайды.

Кестелер және колонкалар беттің сыртқы көрінісін жақсартады. Бірақ егер мәтінде екі – үш колонка құратын болосаңыз, яғни ол браузер терезесіне сыймайтын болса, онда пайдаланушыға бір колонканы оқып болған соң, қайтадан басына қарай парақтау қажет болады, яғни келесіні оқу үшін және бір қимыл жасау қажет. Ол адамды жиіркендіреді және шатастырады. Тек бір ғана жағдайда, ұзын колонканы құру, ол ұзын тізімді жазу жағдайы, ол тізімнің өзі қысқа фразалардан құралғаны дұрыс, және оқу да ыңғайлы болады. Тар колонкаларды өрнектілік немесе көркемділік беруге тырысыңыз, ол үшін оның сол жағын фон түсінің өзгеру шекарпасы бойынша түзеткен жөн.

 

Сайтты көрушілермен байланыс орнату формалары және элементтері

 

Интернет – бұл интерактивті орта. Кейбір хабарламаны оқығандар сізбен байланысқысы келетін болса, онда мұндай ортаны ұйымдастырудың міндеттерінің бірі болып – сайтты көрушілермен байланысты қамтамасыз ету болып табылады. Кез келген бағдарлама егер ол веб – беттер құру үшін пайдаланылатын болса, электрондық почта түрінде байланысу ақпараттарын жазып қалдыруға мүмкіндік беретін бағдарламалар, яғни сіздің мекемеңіз немесе жеке мекен жайыңызды көрсетесіз. Мұндай сілтемелер негізінен сайтыңызды көріп хабарласушылар үшін почтаны теру қажеттілігін және теру барысында мүмкін болатын қателіктердің орын алмауы қамтамасыз етеді, яғни сіз дұрыс мекен жайды төменгі жақөқа орнатып қоюыңыз міндетті.
 

Көптеген бағдарламалар бірнеше беттерден тұратын және ауысу тетіктерінен тұратын, жалаушалар, контекстік мәзір және коментарийлер енгізу үшін полялар жасауға мүмкіндік береді. Формалар келіп көрушілердің қосымша қалаулары бойынша толықтырулар енгізу үшін арналады; олар нақты сұрақтарға жауап алғысы келеді, және сіз сол жауапты арнайы формаға теріп толтыра аласыз. Үлкен әйгілілікпен қонақтар кітапбы пайдаланылады, ол негізінен бағалаулар мен ұсыныстар жазу үшін арналады және нақты уақытта қарым қатынас жасау үшін чаттар құрылған. Телефон, факс және почталық мекен жайды беруді, яғни сайтыңызды көруші адам сізбен қалай болмасын хабарласу үшін, яғни қолайлы жолмен хабарласу мүмкін болуы үшін барлық ақпаратты берген дұрыс. Сіз өзіңіз туралы неғұрлым көп ақпарат беретін болсаңыз, солғұрлым ол адамның сізбен хабарласуы, сізбен қайтымды байланыс ұйымдастыру ықтималдылығы жоғары болады, және ол мінджетті түрде байланысады.

Тапсырма 9.4.1. Үшінші бөлімде сіз электронды мекен жайға қалай сілтемелер жасауды үйренген болатынсыз. Сіздің беттеріңізде мекен жай сілтемелер түрінде емес, болашақ байланысу реквизиттері ретінде пайдалану үшін жазып алуға қолайлы түрде болуын тексеріңіз. Сайтты көруші танысып жатқан кезде гиперсілтемеге тышқан курсорын шерткен кезде толық мекен жайыңыз шығатындай болуын қадағалаңыз. Минимум хат тақырыбын толтырыңыз, себебі кейбір пайдаланушылар өздері ойланып білетіндей немесе сіздің электронды почта жәшігіңізге келіп түсетіндей хат алы мекен жайын қамтамасыз етіңіз.

 

Жақсы HTML тәртібі

 

Бұл бөлімде сізді сайтыңыз күлкіге қалмайтындай етіп беттерді қалай жасау керек екенін үйренетін боласыз.

Веб – беттеріне Java-скриптілер және апплетов шектен тыс көп санын орналастырмаңыз. Интернет статикалармен ауру деп ойламаңыз. Егер қандай да бір бөлім дайын болмаса онда стандартты анимациялық картьиналар қою арқылы сайтты көрушілердің көздерін жараламаңыз. Яғни әлі дайындық жүріп жатыр немесе «бет дайын емес» деген сөздерді жазудың қажеті жоқ. Тек қазір емес кейінірек кіріңіз деген сөзді жазсаңыз жеткілікті. Егер мүмкіндік болатын болса, беттерде фреймаларды пайдаланбауға тырысыңыз, ол негізінен сіздің сайтыңызды іздеу жүйелерінде индексету кезінде өміріңізді жеңілдетуге мүмкіндік береді.

Навигация жүйелерімен шатасқан фреймдер үлкен санын пайдаланудан аулақ болыңыз. Әртүрлі көрсету дәрежелерінде, яғни әртүрлі мониторларда беттің қалай көрінетіндігін тексеруді ұмытпаңыз. Сіз өз құрған сайтыңызды кемінде 800х600 көрсету дәрежесі бар жүйеде жақсы көрінуін қамтамасыз етуіңіз қажет, ол көрсету дәрежесінде жақсы көрінетін болса, онда ол 1024х768 дәрежесінде де жақсы көрінеді деген сөз. Горизонтальды парақтау сызығын пайдаланбауға тырысыңыз.

Навигацияларды шектен тыс күрделі етудің қажеті жоқ. Сайттың кез келген бетіне қол жеткізу тышқан пердесін үш рет басудан артық болмағаны дұрыс. Егер сіз қандай да бір жарнамалық желіге түскіңіз келсе, беттерді баннерлермен күрделі етудің қажеті болмайды. Бір бетке бір – екі баннер жеткілікті. Сіздің сайтыңыз бойынша жүру комфорттылығын максималды арттыруға тырыса отырып жақсы және оймен жасалған навигацияны құрыңыз.

 

Веб – беттер композициясы

 

Алдыңғы бөлімдерде біз веб – беттердің дизайнының жеке элементтріментанысқан болатынбыз. Енді осы барлық жеке элементтер бір бірімен қалай байланысу қажет екендігін қарастырамыз. Бастапқыда бірнше анықтамаларды келтірейік.

Дизайн — заттарды оларды арналуы бойынша пайдалану қолайлы, жеңіл және жағымды болуы және ешқандай жағдайда арналуына сәйкес емес пайдалану мүмкін болмайтындай етіп құру болып табылады.

Веб-дизайнер –  интерфейстерді жасайтын, басқаша айтқанда веб – бетті көрушінің оның толықтырылуымен қатынас құралын құрушы адам.

Басты міндет – навигациялар жеңілдігін және ақпараттарды қабылдаудың қолайлылығын қамтамасыз ету.

Веб – беттің дизайны келесі т алаптарға жауап беруі қажет: статикалық және динамикалық құраушылардың интеграцияланғандығы, графика және мәтіннің логикалық өзара бір – бірімен байланыстылығы, рұқсат ету дәрежесінің эксклюзивтілігі.

Дизайн оптикалық иллюзияға, бостығы мен көлеміне, түсіне және масштабына негізделеді.

Веб – дизайн құралдары болып, олай болса, композиция, түстік палитра, шрифт есептеледі.

Композиция – оның мазмұнына негізделген форманың бірыңғайлылығы және тұтастығы.

Веб – дизайнге қолдануға байланысты – сурет және мәтіннің белгілі бір бір біріне ұқсастығы және сәйкестігі.

 

Композицияның негізгі қағидалары

 

Тұтастық – композицияның құртпай элементтерді қосу немесе алып тастаудың мүмкін еместігі. Композицияның тұтастығын табу үшін болашақ суретті дақтардың қатары ретінде – жеке элементтер силуэті ретінде қарастырады, олар жазықтықта немесе кеңістікте қажетті эффектіге қол жеткізгенге дейін бір бірімен құрамаланып және белгілі бір тұтастықты түзеді. Композицияның барлық элементтерінемен болса да бір бірімен байланысты болуы қажет – яғни стильмен, теңестірілуімен, өлшемдерімен және т.б. бағыныштылық – басты және қосалқы элементтердің болуы. Мысалы, логотип басты элемент болуы мүмкін, және оған беттегі қалған элементтер бюағынуы тиіс (басқаша айтқанда соның стиліне сай стильде болуы тиіс).

Тепе теңдік – элементтердің оң және сол жақ, жоғары және төмен бойынша оптикалық орталыққа қатысты орналдасуы. Оптикалық орталық физикалық орталықтан 1/8 бөлігіне жоғары орналасады. Тепе – теңдіктің екі түрі болады – формальды және формальды емес.

Формальды тепе теңдік -  бұл элементтердің оптикалық орталықтың сол және оң жағынан білгілі бір симметрияда орналасуы. Бұл артықшылықты, тұрақтиылықты немесе образ консеватизмін қамтамасыз етеді.
Формальды емес тепе - теңдік – элементтердің орталық оптикалық ортаға байланысты белгілі бір симметриялылығын орналастыру кезінде біле отырып бұзу. Осы жағдайда симметрияны бұзу түстік өзгеруі еесбінен компенсациялануы қажет, немсе масштабтар және көмекші элементтер қолдану есебінен білінбегені дұрыс. Мұндай құралдар ретінде бағдаршалар, нұсқаушылар, адам және жануар сурттері қолданылады, олар адамға немесе пайдаланушыға бағыт алу үшін көмектесуі тиіс.
Өлшемдер сәйкестігі – бет композициясының барлық элементтері өздерінің мән мағынасы және маңыздылығына байланысты өлшемге ие болуы тиіс. Екіншілік маңыздағы элементтер үшін назарды аудару қажет емес, яғни олардың өлшемі мүмкіндігінше кіші болуы тиіс.
Тізбектілік – белгілі бір композициясынң стильдік өзара байланыстылығы сайттың барлық бюеттерімен күзетілуі немесе тізбекті жалғасуы тиіс. Ол негізінен сол бір форматты пайдалану, стиль, тон және фонды, және үнемі бірдей тәсілді пайдалану арқылы жүзеге асырылады: логотиптер, суретті персонаж, девиз сияқты элементтермен қамтамасызщ етіледі.
Анықтық және қарапайымдылық – кез келген элемент, яғни жоқ болған жағдайда композиция зардап шекпейтін кез келген элемент алынып тасталуы тиісү шрифттың әртүрлі стильдерімен басылуы, өте кіші әріптер және символддар болуы, негативті иллюстрациялар және суреттер болмау қажет, олар сайт бетінен аса күрдлендіріп және сол арқылы оның түсіну қиындығына алып келеді. беттер эффектілі төмендейді.

 

Композиция құралдары

 

Композиция құралдарының бірі болып сызықтар есептеледі. кеңістікті шектеу қажет болатын орындарда, белгілі бір орта құру қажеттігінде – сызықтар пайдаланылады.
композициядағы дақтар маңызды объектілерге аксент жасауға көпшілік жағдайда көмектеседі және композиция ортасын табуға көмектеседі. Дақтар өздері шешетін міндеттерге байланысты түстік және сонымен қатар тональды болуы мүмкін. Композицияның қабылдану анықтылығы, оның есте сақталу дәрежесі ритмге Ритм өзін көптеген ипостастарда көрсете алады – беттегі блоктардан паузаларға дейін, және шрифты композициясындағы бағаналар арқылы және т.б. ритм неғұрлым монотонды болса, солғұрлым композиция ішті пыстырады. Композицияда суреттер, элементтер және пауза ритмдері болғаны маңызды. Ми монотондылықты жақсы көрмейді.
Контраст бұл екі және одан көп суреттер, заттар және түстер ерекшеліктерін гиперболалауға және бөліп көрсетуге мүмкіндік береді. Мысалы, үлкен – кіші, ашық – қара түсті, жуан – жіңішке және т.б.
Силуэт сызықтар және дақ композициясы болып табылады, бірақ негізінен ол өзін ашық фондағы қара дақ тәрізді көрсетеді. силуэт әдемілігі және оның айқындылығы композицияға қайталанбаушылық және дербестікті беруі мүмкін.
Қозғалыс  -композициялық тәсіл, ол белгілі бір орынға кірген кезде сызықтар және бағыттар бойынша жылжуға, бір объектіден екінші бір объектіге өтуге және күрделі қисықтарды түзуге, жұмысшы кеңістікті қамтуға мүмкіндік береді.

 

Түс

Сайттың түстік шешімдерін таңдау оның арналуына байланысты болады. Көпшілік жағдайда түстер пайдаланушыларға психологияық әсер ету аспектілері бойынша таңдалады, яғни беттер арналуына байланысты. Түстер психологиясы:

Түстер тобы:

Стимулдаушы (қызыл, ашық қызыл, сары және т.б.) – хабарлама үшін ашықтылығын білдіреді.
Тежеуші (күлгін, көк, қайың түсті және т.б.) – тұйықтылық және кейбір түсінбейтін жағдайларды білдіреді.
Статикалық (жасыл, жасыл-сары және т.б.) – тұрақтылық, өзінше жүктелгендік, игоизм.

Төсектік (ашық – қызыл, ашық – оранж, ашық сары, және тб.) – деликаттылық, нәзіктік, компромис үшін қабілеттілік.
Шаршатушы (қара – жасыл, қара – көк және т.б.) – жабық, ауыр түстер.

Тапсырма 9.5.1. Қысқа реферат – зерттеу жазыңыз, қандайц ережелер бойынша сіздің жобаңыз композициясы қанағаттандырады., қандай композициялық құралдар және қандай түстерді сіз пайдаландыңыз.

 

Веб – дизайн басты қателіктері

 

Мұнда негізінен веб – дизайнда кездесетін басты қателіктер келтірілген. Олармен таныса отырып және қорытынды жасаңыз.:).
Өте жаңа технологияларды пайдалану. Пайдаланушы, өзі JavaScript қателіктерін көре отырып, сайтты дереу тастап кетуге тырысады, пайдаланушы оның қалай жұмыс істеу қажет екендігін білу үшін мүлде басын қатырмайды. Сонджықтан, ең алдымен пайдалануджан алдын оны жақсылап тексеріп және барлығы жұмыс істейтіндігін анықтаңыз.
Анимацияларды көптеп салу. Көптеген веб – дизайнерлер ауыр апплеттерді салуды, анимацияларды көптеп жүктеуді жақсы көреді. Оны жасамаған дұрыс, сбебі көпшілік пайдалнушыларда бір апплеттің өзі кемінде 1 минут жүктеледі, және пайдаланушылар ашылу үшін көптеп уақыт жұмсауды қажет етпейді, олар жеңіл жүктелетін немсе ашылатын файлдарды көруді қалайды.
Беттердің баяу ашылуы. Егер сіздің сайтыңыз көп уақыт ішінде ашылатын болса, онда пайдаланушы сіздің сайтыңызға кірмейтін болады.
Браузер жаңа терезелерінің пайда болуы. Браузер жаңа терезелерінің пайда болуы - өте күрделі проблема,себебі пайдаланушылар өздерінің экрандарын ластауды қажет етпейді. Егер пайдаланушыға жаңа ерезе ашу қажет болса, ол оны өзі істейді.
Ескі ақпараттың болмауы. Ескі ақпарат деген – ол қажет емес ақпарат деген сөз емес, себебі пайдаланушылар үшін тек жаңа ақпараттар ғана қажет емес.
Баннерлердің жалпы санын орналастыру. Сонымен қатар көпшілік дизайнерлер бір бетке 5-7 баннерге дейін орналастыруды жақсы көреді, баннерлер жүйесінде келесі түсінік бар, «баннерлер қатып қалуы», ол пайдалнушылар жынына қатты тиеді, банерлер көп саны адам көзқін де тітіркендіреді. Бір бетке негізінен екі баннер орналастыру жеткілікті (жоғарғы жағынан біреу және төменгі жағынан біреу).

 

Веб – дизайн бойынша кейбір сілтемелер

 

http://www.design.ru/kovodstvo/ - Ру/ководство А.Лебедева - ссылки и комментарии с сайта по веб-дизайну.
http://www.design.ru/ -  Сайт студии А.Лебедева
http://www.kirsanov.com/web.design/main.html - Сайт дизайнера Д.Кирсанова
http://www.webclub.ru/index.html - Всероссийский клуб вебмастеров
http://html.manual.ru/book/html.php - HTML-справочник по-русски
http://citforum.ru/internet/html/index.shtml - Язык гипертекстовой разметки HTML Есть описание DreamWeaver - шаг за шагом (дизайн и графика), таблица цветов и специальных символов и др.
http://www-koi8.machaon.ru/digest/rusinter.html  - Почти все об Internet, WWW и HTML, Java и Java-скрипт, содержит значительное число полезных ссылок.
http://www.botik.ru/~robot/sidorov/ - Назаметки на сайте "Кухня Сидорова" - электронный учебник
http://cherry-design.spb.ru/pages/links.htm - Богатый выбор полезных ссылок и статей
http://firststeps.narod.ru/ - Материалы по веб-дизайну, PHP и др.
http://dvk.promo.ru/ - В помощь начинающему Веб-мастеру. Даны уроки PhotoShop, ценные материалы по работе с графикой, Macromedia Flash, подборка шрифтов.

Примечание. В сети имеется огромное количество материалов по веб-дизайну и сайтостроительству, причем разного качества. Только на сайте http://narod.yandex.ru/  находится около 600 ссылок по веб-дизайну!

 

 

         Қорытынды

Осы бөлімді оқу барысында біз веб  - беттердің негізгі элементтері болып төмендегі келтірілгендер екендігін білдік, атап айтсақ:
 

Титулдық бет – іс жүзінде пайдалы ақпараттарға ие емеслоготипті ірі етіп көрсету және фирмалық стиль элементтерін анық көрсету мақсатындағы кіріс беті. Қағида бойынша титулдық бет тек бір рет қана көріледі.
 

Гиперсілтеме – веб – құжаттаманы безендірудің анағұрлым маңызды элементі болып табылады. Ол сайттың кез келген басқа бетіне немесе кел келген басқа бөліміне сілтеме жасауға мүмкіндік береді (ол графикалық элемент және мәтінге ұқсас).
Логотип – фирмалық белгіні фирмалық девизбен бірге немесе оның қатысынсыз графикалы түрде ұсыну. Фирмалық стильдің негізгі элементі - әдетте белогі немесе таңбаның айналасында (логотип) сайт стилі де құрылымданады. Логотиптің міндетті сапалары: дербестік, іскерлік тобына жататындығы немесе фирманың сипаттарының бірін көрсету, сайт және негізгі өнім байланысын келтіру.
Навигация – графикалық безендірілген немесе мәтіндік сілтемелер қатары, бұлар сайттың кез келген бетіне түсуді қамтамасыз етуі тиіс (немсе олардың көпшілігі). Әдетте қатаң анықталған белгілі бір құрылымға ие болады (навигациялық жүйелер типтері сәл төменірек қарастырылатын болады).
Контент (ақпараттық толықтыру) – беттегі кез келген ақпарат, безенндіру элементтерінен ерекшеленетін хабарламалар (жаңалықтар, белгілеулер, мәтіндер, пікірлер, галереялар, каталогтар, сілтемелер, файлдар және т.б.).
Меншікті жарнама – сайттың элементтерінің бірі болып саналатын баннер. Мысалы, сайтта қандай да бір бөлімнің жарнамасы немесе қандай да бір өнімді тарату жарнамасы. Қағида бойынша меншікті жарнама таңдалып алынған стандарттардың бірі бойынша орындалады, және ол да сайт стилін сақтауы тиіс.
Беттік жарнама – бөтен сайтты немесе тауарларды жарнамалаушы баннер. Көпшілік жағдайларда жақтық немесе бөгде жарнама сайттың жалпы стилімен үйлеспейді, сонджықтан оны сайтқа мүмкіндігінше жібермеуге тырысады.
Толықтырғыштар – графикалық формат элементтері (немесе мәтіндік), бұлар екіншілік рольге ие, бірақ оларда стайт стилін және мазмұнын ңағартуы тиіс, және пайдаланушыны сайттың белгілі бір элементтеріне тартуға бағытталады.
Пиктограммалар – тақырыптық бағыттағы графикалық суреттер, олар сайт құрылымында белгілі бағытқа көзделуге көмектесіп және ақпараттар қатыстылығын білдіреді. Олар екі түрде болады:            
Навигациялық – сайттың белгілі бір бөлімін сипаттайды және оған жасалған гиперсілтеме болып саналады.
Имидждік – пиктограмма сілтеме болып саналмайды, ол қандай да бір иллюстративті матриал ретінде орналасады, нақты мәтінді толықтырады немесе басқа бір графикаға жасалған толықтыру тәсілді.
Көпшілік жағдайда пиктограмма екі функцияны да атқарады. Пикторгаммаларды жасау мәселесі әруақта көкейкесті болып табылады.
Ассоциативті қатар. Графикалық редакторды ашудан алдын және картинканы суреттеу немесе салудан алдын иконканы салуды бастайды, және болашақ пиктограмманы қалай көрсету қажеттігі жайлы ойлану керек.
Пиктограмманың қол жетімділігі дегеніміз – пайдаланушымен элементтің тематикалық мәнін түсіну дәрежесі деп түсіну қабылданған. Басқа сөздермен айтқанда Пиктограмманың түсініктілігі немесе қол жетімділігі дегеніміз пайдаланушымен пиктограмманы түсіну джәрежесі, яғни ол түсінікті болуы тиіс. Басқаша сөздермен айтқанда кез келген пиктограмма пайдаланушылар көпшілігіне интуитивті түсінікті болуы тиіс. Мысалы, принтер басып шығарғаны пайдаланушылар көпшілігімен құжаттаманы басып шығару сияқты, және ол оргтехника джүкеніндегі басқа тетік емес. Windows стилінде орындалған ашық папка түрі пайдаланушыға сол сияқты пиктограммаға басу арқылы қандай да бір құжаттаманы ашуға мүмкіндік береді.
Эстетика. Адамдарды әруақта әдемі нәрсе қызытырады, сондықтан олар анағұрлым әдемі жасалған, төмен көркемдік деңгейде орындалған иконкандағы анағұрлым айқын орындалған пиктограммаларға қызығады.
Пикторамма оригинальдылығы – бұл жинақталып болған заттарға жаңа көзқарас болып табылады. Мысал үшін алсақ, үлкейтетін әрекетке ие шыны суреті, яғни көпшілік пайдаланушылардың сайтта іздеу функциясына салыстырмалы ұрынатын әрекет стандартты және ажарсыз болуы мүмкін, ал тіпті дизайнерлік қиял ғажайыптың белгілі бір үлесімен де орындалуы мүмкін.