Што правите и не на одличниот веб дизајн

Кога се следи, овој водич ќе се покаже како доста вреден ресурс за веб дизајн, особено ако планирате да го користите софтвер за развој на веб-страници во иднина. Од неискусни до искусни, овој водич има по нешто за секого.

Процесот на одличен веб дизајн Само за да бидете сигурни дека сите сме на иста страница, да започнеме со основната дефиниција за „веб дизајн“. Според Википедија, веб дизајнот е:

„процес на концептуализација, планирање, моделирање и извршување на испорака на електронски медиуми преку Интернет во форма на јазик за означување погоден за толкување од веб-прелистувач и прикажување како графички кориснички интерфејс“ .

Процесот на веб дизајн може да се спореди со процесот на пишување на истражувачки труд. Во фазата на концептуализација/планирање, се креираат дијаграми на текови (преглед) кои ја илустрираат навигациската структура на вашата веб-страница. Во фазата на моделирање, се создаваат статични жичени рамки (груб нацрт) кои го илустрираат скелетниот распоред за секој дел од вашата веб-страница. Откако ќе се креираат жичените рамки, графиката, боите и текстот се користат за креирање на дизајнот на вашите веб-страници врз основа на распоредот на жичените рамки. Во фазата на извршување, вашиот дизајн се претвора во формат поддржан од веб-прелистувачи, се додаваат текст и содржина и конечно, вашата веб-локација се објавува во живо на Интернет за светот да ја види (конечен нацрт).

Сите три фази од процесот на дизајнирање се подеднакво важни. Многу веб дизајнери прескокнуваат фаза со цел да заштедат време или затоа што мислат дека тоа не е потребно. Сепак, сите три фази се неопходни ако вашата цел е да создадете успешен дизајн и респектабилна веб-страница. Дури и ако се користат трите фази, има многу грешки што веб-дизајнерите можат да ги направат што ќе доведат до веб-локации со слаб квалитет и не-кориснички. Време е да го исчистите кабинетот од лоши практики за веб дизајн и да го наполните со добрите.

Фаза 1: Концептуализација и планирање
Оваа фаза се прескокнува почесто од другите две фази. Повеќето писатели не уживаат да создаваат контури за истражувачки трудови, а повеќето веб-дизајнери не сакаат да создаваат дијаграми на текови. Не бидете мрзливи. Ако вложите труд и ја испланирате вашата веб-страница, тогаш ќе најдете дека процесот на веб дизајн ќе оди непречено со помалку грешки направени на патот.

Има неколку работи што ќе ви требаат за ефикасно да ја конципирате и планирате вашата веб-страница:

• мозок
• пенкало и хартија
• (опционално) софтвер за дијаграм на текови
• општа идеја за различните делови на вашата веб-страница

За почеток, земете го пенкалото и хартијата или стартувајте го омилениот софтвер за дијаграм на текови. Ние користиме OmniGraffle Professiona за Mac OS X која чини 150 долари по лиценца, но вреди ако создавате веб-локации на редовна основа. Ако сте на компјутер, тогаш SmartDraw е одличен БЕСПЛАТЕН софтвер за дијаграм на текови што можете да го користите. Сепак, пенкалото и хартијата функционираат добро.

Постојат многу методи за креирање дијаграми на текови. Ќе ви го покажеме најосновниот начин да го направите тоа заради времето и должината на оваа статија. Ако сакате да дознаете повеќе за дијаграмите на текови, побарајте дијаграми на текови на Google или Yahoo.

Погледнете го дијаграмот на текови што го создадовме при конципирањето на Chromatic Sites. (1) На врвот на дијаграмот на текови го наведуваме името на нашата веб-локација. (2) Следно, го вклучуваме секој примарен дел од нашата веб-страница: Дома, За и Услуги. Овие делови се главната навигација за вашата веб-страница. Кои ќе бидат имињата на секој дел целосно зависи од содржината на вашата веб-страница. Обидете се да користите што е можно помалку делови за вашите посетители да не се преоптоваруваат кога се движат низ вашата веб-страница.

(3) Следно, додадете ги сите секундарни страници (подделови) што ќе бидат наведени на секоја од примарните страници. За Дома, вклучивме професионален веб дизајн, развој на веб и оптимизација на пребарувачот. Секундарната навигација треба да биде поописна од примарната. Колку е подлабока навигациската хиерархија на вашите веб-локации, толку поописна треба да биде секоја ознака.

ДОС

• Помалку е повеќе; да го задржите бројот на примарни делови на минимум. Ние користиме 6 секции на нашата веб-страница што е повеќе од доволно
• Без разлика дали користите пенкало и хартија или софтвер за дијаграм на текови, одржувајте ги работите што е можно почисти и организирани. Иако вие (и секој што работи со вас) сте единствените што ќе ја користат шемата на текови, сепак треба да има смисла - Вашите примарни делови треба да користат пошироки термини, додека секундарните и терцијарните термини треба да бидат поописни

На Donts
Креирањето дијаграм на текови е прилично едноставно; сепак, постојат неколку грешки кои лесно може да се направат:

• Не користете многу описни термини во вашата примарна навигација, освен ако целата ваша веб-локација не се фокусира на една тесна тема - Не обидувајте се да собирате повеќе теми на истата страница. Направете општ дел за овие теми и од тој дел креирајте подсекции. Ова ќе ја направи потсекцијата (описните) веб-страници со поголема веројатност да имаат подобро рангирање во пребарувачите (Google, Yahoo, MSN, Ask). на процесот на веб дизајн:

Фаза 2: Моделирање
Во фазата на моделирање, се создаваат статични макети со „жична рамка“. Секоја макета илустрира голи скелет на распоредот за секоја од веб-страниците што ќе бидат вклучени во вашата веб-страница. Оваа фаза е важна затоа што ни дава идеја каде ќе бидат поставени различни елементи во нашиот дизајн. Некои од овие елементи се:

• логото
• навигациско мени
• содржина
• слики, видеа

За да ги креирате овие макети, можете да користите пенкало и хартија или претпочитаниот софтвер за макети. Во минатото користевме Photoshop, но во последно време користиме OmniGraffle Professional. OmniGraffle не е толку интензивна на ресурси како Photoshop и ни овозможува многу побрзо да ги составиме нашите макети за жичана рамка.

Дополнително, проверете дали ги имате дијаграмите на текови кои сте ги создале во близина бидејќи ќе треба да ги повикувате од време на време за да бидете сигурни дека ги исмевате сите страници што ќе се појават на вашата веб-локација.

Еве го нашиот пример за тоа како треба да изгледа моделот на жичаната рамка. Како што можете да видите, нема вклучени бои или графики. Токму вака треба да биде макетата со жичана рамка - скелетен распоред на вашиот дизајн. Целта е да може да се има општа идеја каде ќе биде поставен секој од елементите на веб-страницата.

Обично започнуваме од горе лево и одиме надолу кон дното. Не постои конкретен начин на кој треба да изгледа жичната рамка. Користете ја вашата имагинација. Сепак, погрижете се при креирањето на вашите жичени рамки да не заборавите да ги вклучите најважните елементи на веб-локацијата (лого, навигациско мени, поставување содржина, поставување слики/видео).

Ако некои од вашите страници ќе го користат истиот распоред, тогаш не е неопходно да ги исмевате сите тие страници (иако сигурно можете). Само погрижете се да го подигнете секој уникатен распоред што ќе го има вашата веб-страница. Ќе се заблагодариш подоцна.

На Do's

• макетирање на сите уникатни страници
• вклучете важни елементи (лого, навигација, поставување содржини, слики/поставување видеа) -почнете од горе и одете надолу -референцирајте ја вашата дијаграм на тек создадена во фаза 1 за да не заборавите да макарате која било страница -зачувајте, зачувајте, зачувај – како и со било што на компјутерот, зачувувајте ги вашите макети на секои 10 минути или така
• фокусирајте се на чисти, кориснички распореди - означете ги вашите елементи за да не заборавите кои се тие кога ги повикувате во фаза 3, извршување - користете други веб-страници како инспирација; нема ништо лошо во тоа да земете елементи од други сајтови и да ги направите свои (видете „не“)

На Dont's

• не вклучувајте графика или бои (тоа е за следната фаза) - не правете ги вашите макети премногу „зафатени“; фокусирајте се на чисти, добро организирани, кориснички распореди - не ја прескокнувајте оваа фаза; тоа е исто толку важно како и првиот и последниот - ако земате елементи од други веб-локации, погрижете се да не правите плагијат; постои разлика помеѓу тоа да бидете инспирирани од друга веб-локација за да креирате одредени елементи од вашиот дизајн и бесрамно да ги откинете нивниот распоред и бои

Фаза 3: Извршување
Во третата и последна фаза, извршувањето, планирањето од фазите 1 и 2 се комбинираат за да помогнат во креирањето на жива, интерактивна веб-страница.
Третата фаза е убедливо најинтензивна, бидејќи ќе бидете 1) креирање на графика 2) креирање на содржината и конечно, 3) конвертирање на веб-дизајните од слики во код што веб-прелистувачите го користат за да ја претстават вашата веб-страница на светот.

До моментот кога ќе стигнете до третата фаза, треба да имате јасна идеја за:

• како вашите посетители ќе стигнат од едно до друго место (фаза 1, дијаграм на текови) - како ќе бидат поставени вашите веб-страници (фаза 2, макети на жичани рамки)

Ако немате јасна претстава за овие две работи, вратете се на првата и втората фаза и продолжете да ги развивате. Ќе откриете дека третата фаза е најлесна кога сте конструирале јасен, концизен борбен план за дизајнирање на вашата веб-страница.

Отфрлете ги пенкалото и хартијата
Во фаза 3, треба да користите Photoshop или друга програма за уредување слики бидејќи ќе користите бои и графики за да го креирате распоредот за вашата веб-страница.

Обично започнуваме прво да ја креираме „почетната“ страница (индекс). Користете ги вашите жичени рамки што сте ги создале во фаза 2 како образец за секоја од страниците што ги креирате. Меѓутоа, наместо да користите цврсти кутии, наместо тоа користете графика, бои и текст. Секоја страница мора да изгледа точно како сакате да изгледаат на Интернет бидејќи ова е последната фаза од процесот на дизајнирање.

Не заборавајте да ја вклучите позадината за вашата навигација (но всушност не додавајте го текстот на вашата слика). Кога се конвертира со помош на CSS (каскадни стилски листови), вашата навигација треба да биде во форма на текст, а не во форма на слики. Пребарувачите не можат да ги индексираат сликите (клучните зборови што се користат во вашата навигација нема да бидат индексирани на страниците со резултати од пребарувачот, што значи дека помалку луѓе ќе можат да ја најдат вашата веб-страница).

Кога сте задоволни со вашите дизајни и чувствувате дека тие се подготвени да се стават на Интернет, време е да ги разделите дизајните за да можете да креирате распоред базиран на CSS. За повеќе информации за конвертирање на вашите распореди во CSS или означување на вашата веб-страница во CSS, посетете ја w3schools.com. По разгледувањето на Интернет, не можевме да најдеме пристоен туторијал за слика-во-CSS - затоа очекувајте еден од нас во наредните недели. Претворањето на вашите дизајни во CSS е исклучително важно бидејќи распоредот на табелите е нешто од минатото.

Еве пример на речиси завршена веб-локација на распоредот што го исмевавме во фаза 2. Ова е преземено директно од нашиот веб-прелистувач и како што можете да видите, сега има лого, бои, убав систем за навигација, подножје, и што е најважно, чист, организиран распоред.
Благодарение на планирањето во фазите 1 и 2, нашиот распоред е добро организиран и лесен за користење.

ДОС

• упатете се на вашите шаблони што беа креирани во фаза 2; иако е во ред да отстапувате од вашиот оригинален распоред, не треба да го правите тоа
• направете истражување пред да го креирате вашиот вистински дизајн; Добијте идеи од други сајтови и направете ги свои (без плагијат)
• вклучете боја и графика за да го создадете конечниот изглед на вашите веб-страници - користете CSS (каскадни стилски листови) за да ги конвертирате вашите дизајни од слики во ознаки разбирливи од веб-прелистувачите - упатување на вашата шема на текови од фаза 1 кога ги кодирате вашите страници со хиперврски; подобро е да користите паѓачко мени кое ги вклучува сите (или мнозинството) врски во вашата веб-страница на секоја страница; ова ќе овозможи полесна навигација, а исто така ќе го олесни индексирањето на вашите страници кога ќе застанат пајаците на пребарувачот; одлично место за добивање CSS паѓачки менија е на DynamicDrive.com - финализирајте го вашиот дизајн додека работите во Photoshop или кој било софтвер за уредување слики што го користите; може да биде тешко да направите промени во вашиот дизајн откако ќе се претвори во означување (код)

На Donts

• не го вклучувајте текстот во вашите менија за навигација при конвертирање во CSS; наместо да користите текст со слика, користете обичен текст што е читлив од пајаците на пребарувачот
• не користете табели при конвертирање; дури и ако треба да купите книга на CSS, ќе вреди; масите се мртви
• не прескокнувајте ги првите две фази само за да заштедите време; вашата веб-страница ЌЕ биде подобра ако започнете од почетокот на процесот на веб дизајнирање (наместо на крајот)
• не заборавајте да ги компресирате вашите слики кога ќе се разделат за CSS; нема ништо полошо од бавно вчитување веб-локација поради големи датотеки со слики; Photoshop има опција „Зачувај оптимизирано за веб“ (CS3 – „Зачувај за веб и уреди“)

Процесот го прави совршен
Следејќи го процесот на веб дизајн како оној што е илустриран во овој напис, ги зголемувате шансите да креирате веб-локација која е добро организирана, лесно пловидлива и многу прифатлива за корисниците. Да се ​​соочиме со тоа - ако посетителите се изгубат или се збунат додека се обидуваат да сурфаат на вашата веб-страница, тие би можеле да го притиснат копчето за назад и да бараат веб-локација попријатна за корисниците. Луѓето не сакаат да размислуваат кога станува збор за пронаоѓање пат околу веб-страниците. Не ги терајте да размислуваат. Размислувате со планирање на вашата веб-страница од фаза 1 до фаза 3 и ќе откриете дека повеќе луѓе ќе уживаат во посета на вашата веб-страница.