25.01.2012

28 порад для кожного веб-дизайнера, і не тільки…

Цей текст є способом компенсувати той невдалий тренінг, який я нещодавно проводив в університеті Шевченка. Можливо, якби все вийшло краще, то я б зараз не переймався і не починав би це писати серед ночі. Подана стаття – це суміш технологічних порад і якихось життєствердних постулатів, якими я намагаюся керуватися щодня. Сподіваюся, що вони дозволять Вам подивитися на сферу сайтобудування під іншим кутом і дещо взяти для себе.

1. Обирайте роботу не лише, щоб заробити

Гроші – це важливий фактор у нашому матеріальному світі. Без них не матимеш найнеобхідніших для комфорту речей. Однак коли вони стають головною метою праці, то часто опісля її завершення виникає відчуття недостатньої реалізації. Вони швидко витрачаються, а чогось більшого отримати Ви не прагнули. Тим паче, одна і та ж грошова сума може мати різний потенціал залежно від того, скільки роботи і які емоції були вкладені в процесі її притягнення до себе.

Натомість, якщо Вас “зачіпає” сама ідея проекту, Ви хочете створити якісний і оригінальний продукт, або ставите за мету, створюючи його, примножити якісь позитивні цінності, то навіть після витрачання заробітку веб-сайт буде для Вас знову і знову ставати джерелом натхнення, класних спогадів і настрою. А крім цього, саме проекти, від яких отримуєш задоволення, викликають найбільше реакції як у простих відвідувачів, так і замовників. Тому встановлення високої планки і обрання проектів з глибинною ідеєю – це інвестиція в себе і найкраща окраса Вашого портфоліо.

 

2. Побувайте “в шкірі” замовника і пройміться його ідеями

Перед початком втілення проекту спробуйте максимально відчути дух тих людей, які хочуть замовити у Вас сайт. Дізнайтеся, чим вони живуть, що вони закладали в назву проекту, чому вони обрали саме ці кольори, на що вони звертають увагу. Добре відчуття ідеї викличе правильні візуальні асоціації і дозволить краще розробити бренд, інтерфейс та способи досягнення мети проекту. Ви повинні пройнятися і глибоко симпатизувати як самій ідеї, так і людям, які її хочуть втілити. Це передумова отримання хорошого результату “на виході”.

3. Спробуйте побачити продукт в уяві

Візуалізація ідеї є первинною дією. Оригінальні ідеї та їх бачення народжуються не в результаті копіювання чи використання існуючого досвіду, а саме в миті найвищого прояву натхнення, коли в якусь секунду Вас пронизує немов би позитивним струмом. Звісно, так чи інакше, ми використовуємо вже існуючий досвід, та Ви можете уявити оригінальний спосіб суміщення несумісного, новий шлях у втіленні здавалося би звичних речей.

4. Створюйте візуальні та текстові акценти

Зробіть так, щоб користувач не “загубився” на вашій сторінці. Майте на увазі, що під час відкриття веб-сторінки, людина не може прочитати і охопити все. Вона повинна за щось зачепитися і поступово розгортати свій інтерес до Вашого проекту. Тому правильні акценти повинні допомогти це зробити. Вони мають бути послідовними. Ви повинні самі продумати, що варто було б насамперед розказати людям. Якщо це веб-візитівка для компанії, яка створює дизельні генератори, то найбільше уваги на головній сторінці має привертати велика фотографія найкращого з-поміж цих генераторів. Це перший акцент. Другим за вагомістю може бути абзац на 2-3 речення, в якому Ви розкриєте всю суть діяльності компанії, її “фішку” та чим ці генератори особливі.

5. Зробіть сайт зрозумілим навіть для бокового зору

Акценти це візуальні виокремлення, які підштовхують людину спочатку звернути увагу на якийсь об’єкт. Акценти успішні тоді, коли навіть боковим зором, не дивлячись на монітор, людина зрозуміє, де їй подають найважливіші речі, а де другорядні. Акценти мають бути у всьому, навіть у звичайному тексті. Читачеві треба допомогти відокремити “зерно від полови”. Інакше він або піде з сайту взагалі або просто не дізнається, чого Ви від нього хотіли. Люди не читають великих текстів. Вони читають речення чи два. Якщо їхній інтерес згасає, то вони закривають вкладку оглядача. Для звичайного тексту перший акцент – це заголовок. Якщо людина ним зацікавилась, вона починає шукати в тексті акценти меншої вагомості. Це підзаголовки, фотографії, фрагменти, виділені кольором або жирним шрифтом. Якщо цього немає або виділено все, то виникне ефект, який в російському сленговому середовищі жартома називають “многа букаф”.

6. Дослухайтеся до інтуїції

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

7. Обирайте гармонійні кольори

У природному середовищі панує колірна гармонія. Здавалося б просто зелений листок на дереві насправді має тисячі або й мільйони відтінків і переливається з одних в інші залежно від пори дня чи року. Натомість, все, чим намагається оперувати людина, не завжди досконале. Навіть люди, які не знайомі із законами кольороподілу скажуть, що один колір до іншого добре пасує, а з іншим “конфліктує”. Тому в роботі над проектом прагніть відчути гармонію і нею керуватися. Якщо цей спосіб у Вас не дуже “працює”, то є онлайн сервіси на зразок colorschemedesigner.com. Скористайтеся ними.

8. Робіть так, щоб нічого вас не “муляло”

Коли елемент верстки чи дизайну стоїть не на своєму місці і “проситься” в інше, то виникає ефект, який я називаю “мулянням”.. От ця кнопка тебе ніби “зачіпає”, “не хоче бути” там, де вона зараз розташована. Це своєрідний прояв візуальної інтуїції. Нею також слід користуватися.

9. Подайте життя проекту з головної сторінки

Я кілька років пропрацював кореспондентом новин, хоча журналістиці не навчався. Тому всі ази цього фаху брав з практики. Одного разу зняв непоганий матеріал, але змонтував його дуже невдало. Як кажуть: “Уміла готувати, та не вміла подавати”. За що справедливо отримав на горіхи від ведучого новин. Він запитав мене, чи знаю я про ефект “оберненої піраміди“? Я звісно не знав. Ведучий мені коротко розповів, і надалі я почав керуватися цим постулатом у роботі. Згодом цей же принцип я переніс у веб-дизайн. Суть його в тому, щоб уявити перевернуту піраміду, в основі якої вся суть. І усе найважливіше подавати вгорі, спочатку. Цим ми можемо тримати увагу відвідувача. Спочатку він візьме суть за принципом “Що? Де? Коли? Навіщо?”, а вже потім цікавитимиться всією додатковою інформацією.

Тому всюди ми починаємо з найцікавішого. А на головній сторінці подаємо максимальну кількість “зачіпок”, які засвідчують, що цікавого є на Вашій сторінці. На новинних порталах це стрічки останніх новин та публікацій різної тематики, в мережі Facebook – це оті цифри червоним кольором вгорі, які показують, скільки нових повідомлень нам надіслали, а для інтернет магазину – це виокремлені товари та переліки розділів з лічильниками, які засвідчують, скільки товару є у крамничці та які знижки чи цікаві пропозиції нам пропонують.

10. Не примушуйте відвідувача думати

Інтернет-користувач – ледача істота. Він все робить підсвідомо. За цим же принципом відчуває, де навігація, де логотип, який відіграє роль переходу на головну сторінку, де може бути кнопка “Like”, щоб вподобати статтю. Коли він заходить на новий ресурс, то шукає речі, які вже були в його досвіді. І якщо кількість незрозумілостей переважить інтерес до цього проекту, то він скаже: “Якась фігня”, і піде з сайту. Такий же ефект може викликати сайт з великим масивом інформації, але без акцентування, про яке я писав вище.

Тому робіть все так, щоб не було процесу думання. Якщо в навігації розділ “Зв’язок”, то ясно що там буде мейл з телефонами. Якщо на інформаційному порталі буде розділ “Новини”, то ми знаємо, що там потік інформації у хронологічному порядку. А якщо поряд з розділами “Економіка”, “Політика” та “Суспільство” буде розділ “Буревій”, то в кращому випадку людина скаже: “До чого тут це?”

Назви розділів повинні бути не лише зрозумілими, а й бути такими, що відповідають єдиній ідейній лінії чи функціональному призначенню. Не бажано в одному місці подавати речі, які позначають види медіа-інформації, як от “Видиво”, “Аудіо” та “Світлини”, і в тому ж меню писати як тематичні так і, до прикладу, географічні прив’язки. Користувач повинен чітко знати, що в першому меню він знайде перелік областей України, на які поширюється послуга, в другому – перелік способів доставки, а в третьому – інформацію про замовника. До того ж, якщо на сайті є кілька видів навігації, то якась має бути вагомішою за іншу.

11. Не обходьтеся без графіки чи іконок

Графіка – це обличчя проекту. Без неї найзапальніший текст не матиме достатнього впливу на користувача. Звісно, є різні психотипи людей. Одні більше сприймають візуальну інформацію, інші – тексти. Однак, ймовірність того, що користувача зацікавить, скажімо, смартфон, буде вищою, якщо поряд з ціною можна буде побачити ще й його вигляд. Також свій ефект і особливість веб-проекту надають звичайнісінькі іконки біля назв розділів чи засобів навігації. Вони знову ж таки допомагають людям зрозуміти функціональне призначення певної ланки і часто зберігають простір. А якщо іконки намалювали Ви самі, то це ще краще, бо тоді у відвідувачів не виникатиме відчуття того, що десь вони це вже бачили. А Ваш сайт вони запам’ятають за цими елементами.

12. Дотримайтеся правила трьох клацань

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

13. Відкладіть роботу, якщо вона “не йде”

Я називаю процес підготовки до роботи “накопиченням енергії”. Цей внутрішній резерв, який спонукає нас в миті особливого натхнення робити проект ночами, навіть забуваючи про їжу, і є тим прикладом внутрішнього потенціалу. Він не завжди в достатній кількості. Коли енергії немає, то робота не робиться. Ти сідаєш, намагаєшся просунутися далі, однак “тупцюєш на місці”. Можна себе силувати, що не завжди дає бажаного результату. А можна відкласти роботу і почати робити іншу або просто піти погуляти чи подивитися цікаве кіно. Ви відчуєте, коли будете готові до роботи. Відчувається своєрідний магнетизм і бажання втілювати. Якщо у Вас є кілька проектів, то беріться за той, до якого зараз є більша тяга. Зробите його швидше і це буде стимулом для роботи над іншим проектом. Кожна втілена робота створює ефект задоволення і підсилює реалізацію подальших планів. Це ніби ти втрапив у правильну течію і тебе несе у потрібному напрямку. Кущами по берегу пробиратися значно важче.

14. Обирайте оригінальні шрифти

Попри те, що ще багато людей користуються Internet Explorer’ом версій 6-8, тобто оглядачем, який своєю застарілістю підгальмовує розвиток всієї галузі, все ж є достатньо можливостей покращити вигляд Вашого сайту. Зокрема, бажано спробувати використовувати нетипові шрифти, надаючи тим харизму веб-ресурсу. Йдеться про техніку @font-face. Одні з найдоступніших способів підключення шрифтів – використання сервісу Google Web Fonts, генератора на сайті fontsquirrel.com або ж альтернативних javascripts-додатків на зразок Cufon.

15. Сайтобудування – це теж творчість

Внизу офіційної сторінки двигунця WordPress, який я часто використовую у роботі, написано “Кодування – це поезія”. Що б Ви не робили, коли Ви це любите, то проявляєте свій творчий потенціал у втілених продуктах. Навіть програмний код можна подавати творчо. А у візуалізації ще більше можливостей відчути себе митцем. Веб-дизайн – це також художня робота, тільки, окрім можливості естетичного задоволення, ми ще й створюємо інструмент… естетичний інструмент.

16. Не женіться сліпо за модою

Як і будь-яка інша сфера, веб-дизайн не позбавлений такого моменту як мода і тенденції. Змінюється обладнання, типова ширина екрану, технології подачі інформації, засоби її поширення, логіка пошуковиків, а звідси і візуальні тренди. І від них не треба відмовлятися. Завжди є конструктив і його треба брати до уваги. Тим паче – це колективна творчість всіх людей, які “б’ють в одну точку”. Однак ця увага не повинна перетворитися на копіювання і калькування, не має заміщувати Ваше творче начало. Пам’ятайте, що моду хтось створює. Це люди, які не ведуться на модні штучки і просто мають сміливість бути собою. А їхній успішний приклад впливає на розвиток галузі. Тому якщо Ви бачите елемент дизайну чи спосіб програмного рішення по своєму, то сміло втілюйте його. І можливо саме Ваш приклад стане ознакою нововведень.

17. Не повторюйтеся. Відмовляйтеся від шаблонів

Завжди прагніть у роботі чогось вчитися і втілювати щось нове. Навіть якщо основа сайту буде тою самою, все ж Ви знайдете цікавий плагін до системи управління сайтом чи може використаєте ajax-рішення, яке Ви до цього не застосовували. Або ж вбудуєте в дизайн сайту велике зображення, яке самі намалювали. У мене буває таке, що перед початком проекту я хочу щось втілити, але ще не уявляю, як я це зроблю. Наприклад, є задача створити індивідуальне рішення для веб-крамнички, бо існуючі не відповідають специфічним вимогам. Формується задача, і в процесі втілення я навчаюсь, шукаю на форумах підтримки, як це зробити. В результаті набувається корисний досвід, і Ви стаєте на голову вище. А використання готових шаблонів – це спосіб недумання. Варто від них відмовлятися, хоча на початках вони можуть бути дуже корисним засобом для навчання. На прикладах легше вчитися.

18. Подавайте контент інтерактивно

Йдеться про використання мультимедійних рішень як доповнення до тексту. Жива картинка сприймається краще, аніж просто текст. А якщо матеріал доповнений роликом з Youtube чи унікальним аудіо-матеріалом, то це ще краще. Важливо, щоб матеріал був багатим. А це багатство забезпечується якомога різноманітними формати подачі певної теми. Крім цього, якщо ми публікуємо фотографії, то вони мають бути якісними і символічними. Так Ви привчите людей, що у Вас на сайті є що подивитися. І люди повертатимуться навіть, щоб просто ще раз помилуватися красою чи показати друзям.

19. Готуючи сайт для пошуку, уявляйте логіку відвідувачів

Дуже важливо створити чіткий і зрозумілий бренд, підібрати ключові слова і сформувати вміст таким чином, щоб він відповідав потребам обраної Вами аудиторії. Спробуйте уявити себе в шкірі Вашого потенційного клієнта. Які ключові слова чи словосполучення він вводитиме в пошуковик, щоб випадково наштовхнутися на Ваш проект? Чим Ви його зачепите? Майте на увазі, що найбільший вплив на позицію в пошуку впливають сталі словосполучення, подані на початку мета-тегу “title”. Ефект підсилює розширена інформація в тезі “description” та формування адреси цільової сторінки відповідною транслітерацією з української мови. Наприклад, Google виділяє жирним шрифтом слова в адресі сайту, які збігаються з Вашим дописом.

20. Не переймайтеся невмінням. Натомість спробуйте зробити

Ми можемо розкрити свої здібності тільки на практиці. Як можна виявити закладене природою вміння малювати, якщо ми ні разу це не спробували? Вчіться методом спроб і помилок. Років 10 тому я освоїв багато програм, купуючи їх на дисках і пробуючи, як вони працюють. Якщо програма відповідала моїм вимогам, то ставала інструментом для роботи. Сьогодні головне – мати задачу і бажання, а шляхи досягнення легко можна знайти в мережі. Якщо це програмування, то є купа сайтів, гуртів за інтересами, де з Вами поділяться досвідом. До прикладу, сервіс запитань-відповідей stackoverflow.com. Якщо вас цікавить візуальний дизайн, то є тематичні статті з порадами, техніками векторного дизайну, способами візуалізації ідей.

21. Майте власну позицію і вмійте її відстояти

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

22. Вірте в успішність свого проекту. Все можливо

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

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

23. Не нівелюйте жодної з речей, яка впливає на успішність ресурсу

Сайт це комплекс різних складових, кожна з яких робить свій внесок в загальну успішність проекту. Якщо Ви створили чудовий дизайн і верстку, але не оптимізували його під пошуковики чи не спробували заявити про себе своїм друзям через соцмережі, то про Вашу чудову ідею може ніхто не здогадатися. Не нав’язуйтеся дуже відверто, але спробуйте органічними способами розповісти про своє існування. І бажано такими матеріалами чи ідеями, які викличуть захоплення в людей.

Якщо на Ваш продукт не достатньо реагує споживач, то справа не у споживачеві, а у тому, що Вам наразі не вдалося створити достатньо якісний та конкурентноспроможний ресурс. Постійно пробуйте вдосконалювати вже існуюче рішення і якщо вірите, то досягнете успіху. Майте на увазі, що Вам ніхто нічого не винен. Кожен живе в своєму світі і впускає до себе ті речі, які резонують з його настроєм і внутрішніми потребами. Тому слід прагнути змінити себе і своє бачення, і тоді Ви зміните ставлення до Вашої праці.

24. Створюючи проект Ви впливаєте

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

25. Любіть світ. Довіряйте йому. Це джерело натхнення

В усьому є прояв тієї незбагненної сили, завдяки якій довкола все живе і все рухається. У всьому є дух тієї єдності і справедливості, той стан справ, який потрібен саме зараз і кожного чогось навчає. Навіть якщо Вам щось не подобається, то справа не у тій особі чи речі, яких Ви критикуєте, а справа у Вашому ставленні до них. Якщо Ви не приймаєте цей світ, то Вам буде дуже важко знаходити натхнення. Бо творча енергія приходить до Вас, коли Ви довіряєте, відкриваєтеся, коли всередині немає конфлікту. Це не виснажує Вас. А отже, Ви можете накопичувати сили для втілення їх у позитивних і хороших проектах. Не “вантажте” себе тим, що Вам не подобається, і сконцентруйтеся на тому, що Ви дійсно хотіли б. Дружіть з совістю. А чиста творча енергія – це природа, стихії, тобто сили, які є первинними, не обдумані і не втілені у матеріальних речах.

26. Отримайте задоволення від кінцевого продукту

Ви повинні любити те, що робите і просто бути щасливим від того, що у Вас виходить. Допоки Ви самі не задоволені тим, що зробили, можливо продукт зарано віддавати замовнику. Практика показує, що якщо Ви проперлися процесом і результатом, то й замовник чи кінцевий споживач матиме ті самі відчуття. Прагніть своєю працею створити людям позитивні емоції. Так Ви примножуєте якісь вічні речі.

27. Керуйтеся постулатом “спорідненої праці” Сковороди, втілюйте себе крізь проекти

Часто людина найбільше реалізується у спорідненій праці, тобто професії чи галузі, до якої у неї були задатки ще змалечку і проявлялися, наприклад, в бажанні малювати, щось конструювати чи співати. Звертайте увагу на те, що Ви любили робити в дитинстві. Якщо Ви знайшли свій шлях, то Ваша робота зливається із захопленням, і Ви живете нею день і ніч. Лягаєте спати з думками про втілення нових ідей, прокидаєтеся з ними, на сьомому небі від щастя, коли вдається досягти успіху. Ви акумулюєте свою енергію на те, що любите, і рано чи пізно результати Вашої праці почнуть помічати. Очевидно, велика кількість відомих людей колись проходили через “вузьке вушко голки”, прислухаючись до серця, і це виводило на їхню власну дорогу. Тому, якщо Ви відчуваєте, що займаєтеся не тією справою, якою б хотіли, але обставини змушують Вас терпіти, спробуйте знайти шляхи, аби ризикнути. Якщо це Ваша дорога, то Ви матимете все, про що мріяли і виправдаєте свій ризик. Важливе відчуття реалізації. Без нього тяжко жити.

28. Діліться досвідом. Даруйте.

Даруючи, ми набуваємо… Набуваємо вдячність, гарний настрій, усмішки та блиск в очах. Даруючи, ми неочікувано робимо людей щасливими. Даруючи, ми підштовхуємо людей вірити, що світ набагато позитивніший і казка поряд. Даруючи, ми маємо унікальну нагоду побачити в кожному іскорку тепла, яка з’єднує нас з чимось вищим… Насправді, є набагато більше аргументів на користь дарування. Але навіть цей перелік ДУЖЕ вагомий, бо матеріальні речі плинні, а тепла усмішка може Вас зігріти на все життя.

Даруйте, не очікуючи нічого у відповідь, і побачите, як зміниться Ваше життя. Даруйте усе, що проситься бути подарованим, бо наше внутрішнє бачення нам підказує, чого у нас багато, щоби дати його іншим. І підказує, хто найбільше потребує цього подарунку. Даруйте і Ви матимете більше можливості дарувати, бо станете провідником подарунків у цей світ. Будьте відкритими і щедрими до світу, і світ буде відкритим до Вас! 🙂

Богдан Гдаль