Керемет веб-дизайндың не істеу керек және не істеуге болмайды

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

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

«Интернет арқылы электрондық медианы жеткізуді тұжырымдамалау, жоспарлау, модельдеу және орындау процесі веб-шолғыш арқылы түсіндіруге және графикалық пайдаланушы интерфейсі ретінде көрсетуге жарамды Markup тілі түрінде». .

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

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

1-кезең: Тұжырымдама және жоспарлау
Бұл кезең басқа екі кезеңге қарағанда жиі өткізіледі. Көптеген жазушылар зерттеу жұмыстарының контурларын жасауды ұнатпайды, ал веб-дизайнерлердің көпшілігі блок-схема жасауды ұнатпайды. Жалқау болмаңыз. Егер сіз күш салсаңыз және веб-сайтыңызды жоспарласаңыз, онда сіз веб-дизайн процесінің жол бойында жіберілген қателіктермен біркелкі өтуін табасыз.

Веб-сайтыңызды тиімді тұжырымдамалау және жоспарлау үшін сізге қажет бірнеше нәрсе бар:

• ми
• қалам мен қағаз
• (қосымша) блок-схема бағдарламалық құралы
• веб-сайтыңыздың әртүрлі бөлімдері туралы жалпы түсінік

Бастау үшін қалам мен қағазды алыңыз немесе таңдаулы блок-схема бағдарламалық құралын іске қосыңыз. Біз Mac OS X жүйесіне арналған OmniGraffle Professiona бағдарламасын қолданамыз, оның құны бір лицензия үшін $150, бірақ егер сіз тұрақты негізде веб-сайттарды жасасаңыз, бұл өте жақсы. Егер сіз компьютерде болсаңыз, SmartDraw - сіз пайдалануға болатын блок-схема бағдарламалық құралының тамаша ТЕГІН бөлігі. Қалам мен қағаз жақсы жұмыс істейді.

Блок-схемаларды құрудың көптеген әдістері бар. Біз сізге уақыт пен осы мақаланың ұзақтығы үшін мұны істеудің ең негізгі әдісін көрсетеміз. Блок-схемалар туралы көбірек білгіңіз келсе, Google немесе Yahoo сайтында блок-схемаларды іздеңіз.

Хроматикалық тораптарды тұжырымдамалау кезінде біз жасаған блок-схеманы қараңыз. (1) Блок-схеманың жоғарғы жағында біз веб-сайтымыздың атауын тізімдейміз. (2) Содан кейін біз веб-сайтымыздың әрбір негізгі бөлімін қосамыз: Басты, туралы және Қызметтер. Бұл бөлімдер сіздің веб-сайтыңыздың негізгі шарлауы болып табылады. Әрбір бөлімнің атаулары толығымен сіздің веб-сайтыңыздың мазмұнына байланысты. Келушілер сіздің веб-сайтыңызды шарлау кезінде шамадан тыс қалмауы үшін мүмкіндігінше аз бөлімдерді пайдалануға тырысыңыз.

(3) Әрі қарай, негізгі беттердің әрқайсысында тізімделетін барлық қосымша беттерді (ішкі бөлімдерді) қосыңыз. Үй үшін біз кәсіби веб-дизайн, веб-әзірлеу және іздеу жүйесін оңтайландыруды қостық. Қосымша шарлау негізгі шарлауға қарағанда сипаттамалы болуы керек. Веб-сайттарыңыздың навигациялық иерархиясы неғұрлым терең болса, әрбір белгі соғұрлым сипаттамалы болуы керек.

Дос

• Аз - көп; негізгі бөлімдердің санын минималды түрде сақтаңыз. Біз веб-сайтымызда 6 бөлімді қолданамыз, бұл жеткілікті
• Қалам мен қағазды немесе блок-схема бағдарламалық құралын пайдалансаңыз да, заттарды мүмкіндігінше таза және реттелген ұстаңыз. Сіз (және сізбен бірге жұмыс істейтін кез келген адам) блок-схеманы қолданатын жалғыз адам болсаңыз да, оның әлі де мағынасы болуы керек - Негізгі бөлімдеріңіз кеңірек терминдерді пайдалануы керек, ал екінші және үшінші терминдер сипаттамалы болуы керек.

Донттар
Блок-схеманы жасау өте қарапайым; дегенмен, оңай жасалуы мүмкін бірнеше қателер бар:

• Бүкіл веб-сайтыңыз бір тар тақырыпқа бағытталмаса, негізгі шарлауда өте сипаттайтын терминдерді пайдаланбаңыз - Бір бетте бірнеше тақырыпты біріктіруге тырыспаңыз. Осы тақырыптар үшін жалпы бөлім жасаңыз және сол бөлімнен ішкі бөлімдер жасаңыз. Бұл ішкі бөлімдегі (сипаттамалық) веб-беттердің іздеу жүйелерінде жақсырақ рейтингтерге ие болу ықтималдығын арттырады (Google, Yahoo, MSN, Ask) Қысқа және сипаттамалық блок-схеманы жасағаннан кейін, сіз екінші кезеңге өтуге дайынсыз. веб-дизайн процесі:

2-кезең: Модельдеу
Модельдеу сатысында статикалық «сымды рамка» макеттері жасалады. Әрбір макет сіздің веб-сайтыңызға қосылатын веб-беттердің әрқайсысының макетінің жалаң сүйек қаңқасын көрсетеді. Бұл кезең маңызды, өйткені ол дизайнымызда әртүрлі элементтердің қай жерде орналасатыны туралы түсінік береді. Бұл элементтердің кейбірі:

• логотип
• навигациялық мәзір
• мазмұны
• суреттер, бейнелер

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

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

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

Біз әдетте жоғарғы сол жақтан бастап, төменге қарай жұмыс істейміз. Сымды рамканың көрінуінің нақты жолы жоқ. Қиялыңызды пайдаланыңыз. Дегенмен, сым жақтауларын жасаған кезде веб-сайттың ең маңызды элементтерін (логотип, навигациялық мәзір, мазмұнды орналастыру, суреттер/бейне орналастыру) қосуды ұмытпаңыз.

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

Іс

• барлық бірегей беттердің макетін жасаңыз
• маңызды элементтерді қосыңыз (логотипті, навигацияны, мазмұнды орналастыруды, суреттерді/бейнелерді орналастыруды) -жоғарыдан бастаңыз және төмен қарай жүріңіз -кез келген беттердің үлгісін жасауды ұмытпау үшін 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-кезеңдердегі жоспарлаудың арқасында біздің макет жақсы ұйымдастырылған және пайдалану оңай.

Дос

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

Донттар

• CSS түрлендіру кезінде мәтінді шарлау мәзірлеріңізге қоспаңыз; кескін мәтінін пайдаланудың орнына іздеу жүйесі өрмекшілері оқи алатын кәдімгі мәтінді пайдаланыңыз
• түрлендіру кезінде кестелерді пайдаланбаңыз; CSS бойынша кітап сатып алу қажет болса да, бұл оған тұрарлық; үстелдер өлі
• тек уақытты үнемдеу үшін алғашқы екі кезеңді өткізіп алмаңыз; Егер сіз веб-дизайн процесінің басынан бастасаңыз, веб-сайтыңыз жақсы болады (соңында емес)
• CSS үшін кесілген кескіндеріңізді қысуды ұмытпаңыз; үлкен кескін файлдарына байланысты баяу жүктелетін веб-сайттан жаман ештеңе жоқ; Photoshop-та «Веб үшін оңтайландырылған сақтау» опциясы бар (CS3 – «Веб және құрылғылар үшін сақтау»)

Процесс мінсіз етеді
Осы мақалада көрсетілгендей веб-дизайн процесін орындау арқылы сіз жақсы ұйымдастырылған, оңай шарлауға болатын және пайдаланушыға өте ыңғайлы веб-сайт жасау мүмкіндігін арттырасыз. Шынын айту керек – егер келушілер сіздің веб-сайтыңызды шарлау кезінде адасып қалса немесе абдырап қалса, олар «Артқа» түймесін басып, пайдаланушыға ыңғайлы веб-сайтты іздеуі мүмкін. Адамдар веб-сайттарды айналып өту туралы ойлануды ұнатпайды. Оларды ойланба. Сіз өзіңіздің веб-сайтыңызды 1-кезеңнен 3-кезеңге дейін жоспарлау арқылы ойланасыз және сіздің веб-сайтыңызға көбірек адамдар кіруді ұнататынын көресіз.