Какво да правите и какво да не правите в страхотния уеб дизайн

Когато се следва, това ръководство ще се окаже доста ценен ресурс за уеб дизайн, особено ако планирате да използвате софтуер за разработка на уебсайтове в бъдеще. От неопитния до опитния, това ръководство има по нещо за всеки.

Процесът на страхотен уеб дизайн Само за да сме сигурни, че всички сме на една страница, нека започнем с основното определение за „уеб дизайн“. Според Wikipedia уеб дизайнът е:

„процес на концептуализация, планиране, моделиране и изпълнение на доставка на електронни медии през интернет под формата на език за маркиране, подходящ за интерпретация от уеб браузър и показване като графичен потребителски интерфейс“ .

Процесът на уеб дизайн може да се сравни с процеса на писане на изследователска статия. В етапа на концептуализация/планиране се създават блок-схеми (контур), които илюстрират навигационната структура на вашия уебсайт. В етапа на моделиране се създават статични телени рамки (грубият проект), които илюстрират скелетното оформление за всяка секция на вашия уебсайт. След като телените рамки са създадени, графики, цветове и текст се използват за създаване на дизайна на вашите уеб страници въз основа на оформлението на телените рамки. В етапа на изпълнение вашият дизайн се преобразува във формат, поддържан от уеб браузърите, добавят се текст и съдържание и накрая уебсайтът ви се публикува на живо в интернет, за да го види светът (окончателна чернова).

И трите етапа на процеса на проектиране са еднакво важни. Много уеб дизайнери пропускат етап, за да спестят време или защото смятат, че това не е необходимо. И трите етапа обаче са необходими, ако целта ви е да създадете успешен дизайн и уважаван уебсайт. Дори ако се използват трите етапа, има много грешки, които уеб дизайнерите могат да допуснат и които ще доведат до лошо качество, неудобни за потребителя уебсайтове. Време е да изчистите кабинета от лоши практики за уеб дизайн и да го презаредите с добрите.

Етап 1: Концептуализация и планиране
Този етап се прескача по-често от другите два етапа. Повечето писатели не обичат да създават планове за научни статии, а повечето уеб дизайнери също не обичат да създават диаграми. Не бъдете мързеливи. Ако положите усилия и планирате уебсайта си, тогава ще откриете, че процесът на уеб дизайн протича гладко с по-малко грешки, направени по пътя.

Има няколко неща, от които ще се нуждаете, за да концептуализирате и планирате ефективно уебсайта си:

• мозък
• химикал и хартия
• (по избор) софтуер за блок-схеми
• обща представа за различните раздели на вашия уебсайт

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

Има много методи за създаване на блок-схеми. Ще ви покажем най-основния начин да го направите в името на времето и дължината на тази статия. Ако искате да научите повече за блок-схемите, потърсете блок-схеми в Google или Yahoo.

Вижте блок-схемата, която създадохме при концептуализиране на хроматични сайтове. (1) В горната част на блок-схемата изброяваме името на нашия уебсайт. (2) След това включваме всяка основна секция на нашия уебсайт: Начало, Информация и Услуги. Тези секции са основната навигация за вашия уебсайт. Какви ще бъдат имената на всеки раздел зависи изцяло от съдържанието на вашия уебсайт. Опитайте се да използвате възможно най-малко секции, така че посетителите ви да не бъдат претоварени, когато навигират през уебсайта ви.

(3) След това добавете всички второстепенни страници (подсекции), които ще бъдат изброени на всяка от основните страници. За дома сме включили професионален уеб дизайн, уеб разработка и оптимизация за търсачки. Вторичната навигация трябва да бъде по-описателна от основната навигация. Колкото по-дълбока е навигационната йерархия на вашия уебсайт, толкова по-описателен трябва да бъде всеки етикет.

Dos

• По-малко е повече; сведете до минимум броя на основните секции. Ние използваме 6 раздела на нашия уебсайт, което е повече от достатъчно
• Независимо дали използвате химикал и хартия или софтуер за блок-схеми, поддържайте нещата възможно най-чисти и организирани. Въпреки че вие ​​(и всеки, който работи с вас) сте единствените, които ще използват блок-схемата, тя все още трябва да има смисъл -Вашите първични раздели трябва да използват по-широки термини, докато вторичните и третичните термини трябва да са по-описателни

Донтите
Създаването на блок-схема е доста лесно; обаче има няколко грешки, които лесно могат да бъдат направени:

• Не използвайте много описателни термини в основната си навигация, освен ако целият ви уебсайт не се фокусира върху една тясна тема – Не се опитвайте да събирате няколко теми на една и съща страница. Създайте общ раздел за тези теми и от този раздел създайте подраздели. Това ще направи по-вероятно подсекциите (описателни) уеб страници да имат по-добро класиране в търсачките (Google, Yahoo, MSN, Ask). След като създадете кратка и описателна блок-схема, вие сте готови да преминете към втория етап на процеса на уеб дизайн:

Етап 2: Моделиране
В етапа на моделиране се създават статични „wireframe“ макети. Всеки макет илюстрира ясен скелет на оформлението за всяка от уеб страниците, които ще бъдат включени във вашия уебсайт. Този етап е важен, защото ни дава представа къде ще бъдат поставени различните елементи в нашия дизайн. Някои от тези елементи са:

• лого
• навигационно меню
• съдържание
• изображения, видеоклипове

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

Освен това се уверете, че имате блок-схемите, които сте създали, наблизо, тъй като ще трябва да ги препращате от време на време, за да сте сигурни, че макетирате всички страници, които ще се появят на уебсайта ви.

Ето нашия пример за това как трябва да изглежда макетът на wireframe. Както можете да видите, няма включени цветове или графики. Точно такъв трябва да бъде макетът на телена рамка – скелетно оформление на вашия дизайн. Целта е да имате обща представа къде ще бъде поставен всеки от елементите на уеб страницата.

Обикновено започваме от горния ляв ъгъл и продължаваме надолу към долу. Няма конкретен начин, по който трябва да изглежда телената рамка. Използвай въображението си. Уверете се обаче, че когато създавате своите телени рамки, не забравяйте да включите най-важните елементи на уебсайт (лого, навигационно меню, разположение на съдържанието, разположение на изображения/видео).

Ако някои от вашите страници ще използват същото оформление, тогава не е необходимо да се подигравате на всички тези страници (въпреки че със сигурност можете). Просто не забравяйте да направите макет на всяко уникално оформление, което вашият уебсайт ще има. Ще си благодариш по-късно.

The Do's

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

The Dont's

• не включвайте графики или цветове (това е за следващия етап) - не правете вашите макети твърде „натоварени“; съсредоточете се върху чисти, добре организирани, удобни за потребителя оформления - не пропускайте този етап; то е също толкова важно, колкото първото и последното - ако вземате елементи от други уебсайтове, уверете се, че не плагиатствате; има разлика между това да бъдете вдъхновени от друг уебсайт, за да създадете определени елементи от вашия дизайн, и безочливо да изтръгнете тяхното оформление и цветове

Етап 3: Изпълнение
В третия и последен етап, изпълнението, планирането от етапи 1 и 2 се комбинира, за да подпомогне създаването на жив, интерактивен уебсайт.
Третият етап е определено най-интензивният във времето, тъй като ще 1) създавате графики 2) създавате съдържание и накрая 3) конвертирате уеб дизайна от изображения в код, който уеб браузърите използват, за да представят вашия уебсайт пред света.

Докато стигнете до третия етап, трябва да имате ясна представа за:

• как вашите посетители ще стигат от едно място на друго (етап 1, блок-схема) - как ще бъдат оформени вашите уеб страници (етап 2, макети на телена рамка)

Ако нямате ясна представа за тези две неща, върнете се към първия и втория етап и продължете да ги развивате. Ще откриете, че третият етап е най-лесен, когато сте изградили ясен, кратък боен план за проектиране на вашия уебсайт.

Зарежете писалката и хартията
В етап 3 трябва да използвате Photoshop или друга програма за редактиране на изображения, тъй като ще използвате цветове и графики, за да създадете оформлението на вашия уебсайт.

Обикновено първо започваме да създаваме „началната“ страница (индекс). Използвайте телените си рамки, които сте създали в етап 2, като шаблон за всяка от страниците, които създавате. Въпреки това, вместо да използвате плътни кутии, използвайте графики, цветове и текст. Всяка страница трябва да изглежда точно както искате да изглежда в Интернет, тъй като това е последният етап от процеса на проектиране.

Не забравяйте да включите фона за вашата навигация (но всъщност не добавяйте текста към вашето изображение). Когато се преобразува с помощта на CSS (каскадни стилови таблици), вашата навигация трябва да е под формата на текст, а не на изображения. Изображенията не могат да се обхождат от търсачките (ключовите думи, използвани във вашата навигация, няма да бъдат индексирани в страниците с резултати от търсачката, което означава, че по-малко хора ще могат да намерят уебсайта ви).

Когато сте доволни от дизайните си и почувствате, че са готови за пускане в интернет, е време да разделите дизайните, за да можете да създадете оформление, базирано на CSS. За повече информация относно конвертирането на вашите оформления в CSS или маркирането на уебсайта ви в CSS посетете w3schools.com. След като разгледахме интернет, не можахме да намерим приличен урок за преобразуване на изображение в CSS – така че очаквайте такъв от нас през следващите седмици. Преобразуването на вашите проекти в CSS е изключително важно, тъй като оформленията на таблиците са нещо от миналото.

Ето пример за почти завършен уебсайт с оформлението, което измислихме в етап 2. Това беше взето директно от нашия уеб браузър и както можете да видите, сега има лого, цветове, красива навигационна система, долен колонтитул, и най-важното, чисто, организирано оформление.
Благодарение на планирането в етапи 1 и 2, нашето оформление е добре организирано и лесно за използване.

Dos

• препратка към вашите шаблони, които са създадени в етап 2; въпреки че е добре да се отклонявате от първоначалното си оформление, не би трябвало да го правите
• направете малко проучване, преди да създадете действителния си дизайн; вземете идеи от други сайтове и ги направете свои (без да плагиатствате)
• включете цвят и графики, за да създадете окончателния облик на вашите уеб страници - използвайте CSS (каскадни стилови таблици), за да конвертирате вашите дизайни от изображения в маркиране, разбираемо от уеб браузърите - препратете към блок-схемата си от етап 1, когато кодирате страниците си с хипервръзки; по-добре е да използвате падащо меню, което включва всички (или по-голямата част) от връзките във вашия уебсайт на всяка страница; това ще позволи по-лесна навигация и също ще направи страниците ви по-лесни за обхождане, когато паяците на търсачките се отбият; страхотно място за получаване на CSS падащи менюта е DynamicDrive.com - финализирайте дизайна си, докато работите във Photoshop или друг софтуер за редактиране на изображения, който използвате; може да е трудно да правите промени във вашия дизайн, след като той бъде преобразуван в маркиране (код)

Донтите

• не включвайте текста във вашите навигационни менюта, когато конвертирате в CSS; вместо да използвате текст на изображението, използвайте обикновен текст, който може да се чете от паяците на търсачките
• не използвайте таблици при конвертиране; дори ако трябва да купите книга за CSS, ще си струва; масите са мъртви
• не пропускайте първите два етапа само за да спестите време; уебсайтът ви ЩЕ бъде по-добър, ако започнете от началото на процеса на уеб дизайн (вместо в края)
• не забравяйте да компресирате изображенията си, когато се разрязват за CSS; няма нищо по-лошо от бавно зареждащ се уебсайт поради големите файлове с изображения; Photoshop има опция „Запазване, оптимизирано за уеб“ (CS3 – „Запазване за уеб и устройства“)

Процесът прави перфектен
Следвайки процес на уеб дизайн, като този, илюстриран в тази статия, вие увеличавате шансовете за създаване на уебсайт, който е добре организиран, лесен за навигация и много удобен за потребителя. Нека си го кажем – ако посетителите се изгубят или се объркат, докато се опитват да сърфират във вашия уебсайт, те може да натиснат бутона за връщане назад и да потърсят по-удобен за потребителя уебсайт. Хората не обичат да мислят, когато става въпрос за намиране на път в уебсайтове. Не ги карайте да мислят. Вие мислите, като планирате уебсайта си от етап 1 до етап 3 и ще откриете, че повече хора ще се радват да посетят уебсайта ви.