Що можна і чого не можна робити в чудовому веб-дизайні

Якщо дотримуватися, цей посібник виявиться досить цінним ресурсом для веб-дизайну, особливо якщо ви плануєте використовувати програмне забезпечення для розробки веб-сайтів в майбутньому. Від недосвідченого до досвідченого, цей посібник знайде щось для кожного.

Процес чудового веб-дизайну Щоб переконатися, що ми всі на одній сторінці, давайте почнемо з базового визначення «веб-дизайну». Відповідно до Вікіпедії, веб-дизайн – це:

«процес концептуалізації, планування, моделювання та виконання доставки електронних медіа через Інтернет у формі мови розмітки, придатної для інтерпретації веб-браузером і відображення як графічний інтерфейс користувача» .

Процес веб-дизайну можна порівняти з процесом написання наукової роботи. На етапі концептуалізації/планування створюються блок-схеми (схема), які ілюструють навігаційну структуру вашого веб-сайту. На етапі моделювання створюються статичні каркаси (приблизний проект), які ілюструють скелетний макет для кожного розділу вашого веб-сайту. Після створення дротяних каркасів графіка, кольори та текст використовуються для створення дизайну ваших веб-сторінок на основі макета дротяних каркасів. На етапі виконання ваш дизайн перетворюється у формат, який підтримується веб-браузерами, додається текст і вміст, і, нарешті, ваш веб-сайт публікується в Інтернеті, щоб його міг побачити весь світ (остаточний проект).

Усі три етапи процесу проектування однаково важливі. Багато веб-дизайнерів пропускають етап, щоб заощадити час або тому, що вважають це непотрібним. Проте всі три етапи необхідні, якщо ваша мета — створити успішний дизайн і респектабельний сайт. Навіть якщо використовуються ці три етапи, веб-дизайнери можуть зробити багато помилок, які призведуть до створення веб-сайтів низької якості та незручних для користувача. Настав час очистити шафу від поганих практик веб-дизайну та поповнити її хорошими.

Етап 1: Концептуалізація та планування
Цей етап пропускається частіше, ніж два інших. Більшість авторів не люблять створювати плани для наукових статей, і більшість веб-дизайнерів також не люблять створювати блок-схеми. Не лінуватися. Якщо ви докладете зусиль і сплануєте свій веб-сайт, ви побачите, що процес веб-дизайну пройде гладко з меншою кількістю помилок.

Є кілька речей, які вам знадобляться, щоб ефективно концептуалізувати та спланувати свій веб-сайт:

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

Для початку візьміть ручку та папір або запустіть свою улюблену програму для створення блок-схем. Ми використовуємо OmniGraffle Professiona для Mac OS X, яка коштує 150 доларів США за ліцензію, але вона того варта, якщо ви створюєте веб-сайти на регулярній основі. Якщо ви користуєтеся комп’ютером, то SmartDraw — це чудове БЕЗКОШТОВНЕ програмне забезпечення для створення блок-схем, яким ви можете скористатися. Проте ручка та папір працюють чудово.

Існує багато методів створення блок-схем. Ми збираємося показати вам найпростіший спосіб зробити це заради часу та довжини цієї статті. Якщо ви хочете дізнатися більше про блок-схеми, шукайте блок-схеми в Google або Yahoo.

Перегляньте блок-схему, яку ми створили під час концептуалізації хроматичних сайтів. (1) У верхній частині блок-схеми ми вказуємо назву нашого веб-сайту. (2) Далі ми включаємо кожен основний розділ нашого веб-сайту: Домашня сторінка, Про нас та Послуги. Ці розділи є основною навігацією вашого сайту. Назви кожного розділу повністю залежать від вмісту вашого веб-сайту. Намагайтеся використовувати якомога менше розділів, щоб ваші відвідувачі не були перевантажені під час навігації вашим веб-сайтом.

(3) Далі додайте всі вторинні сторінки (підрозділи), які будуть перераховані на кожній з основних сторінок. Для Home ми включили професійний веб-дизайн, веб-розробку та пошукову оптимізацію. Додаткова навігація має бути більш описовою, ніж основна. Чим глибшою є навігаційна ієрархія ваших веб-сайтів, тим більш описовою має бути кожна мітка.

Дос

• Менше значить більше; мінімізуйте кількість первинних секцій. Ми використовуємо 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 вам потрібно використовувати Photoshop або іншу програму для редагування зображень, оскільки ви будете використовувати кольори та графіку для створення макета свого веб-сайту.

Зазвичай ми спочатку починаємо створювати «домашню» сторінку (індекс). Використовуйте каркаси, які ви створили на етапі 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, і ви побачите, що більше людей із задоволенням відвідуватимуть ваш сайт.