Веб-технології для дизайнерів — навіщо і як

При чому тут апельсини? Просто вони — помаранчевіМене звати Антон Шеїн. Іноді я виступаю з доповідями про дизайн, прототипування і систематизацію інтерфейсів.

Після кожної доповіді, раз за разом мені задають два основних питання:
  1. Повинен дизайнер вміти працювати з веб-технологіями?
  2. З чого дизайнеру почати, якщо хочеться з ними розібратися?


Постараюся на них відповісти у цій статті.



Повинен дизайнер вміти працювати з веб-технологіями?
Якщо відповідати коротко: ні, не повинен.

Справа в тому, що ніхто нікому нічого не повинен. Як мінімум до тих пір, поки ви не підписали документів з банком або ще з ким-небудь.

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

Володіння технологіями дозволить вам:
  1. Автоматизувати рутину. Ті речі, які ви виконуєте з разу в раз, може зробити за вас комп'ютер. Наприклад, дотримуватися гайдлайны в дизайні, робити за зразком одного елементи сотні схожих, перевіряти їх на різних поєднаннях даних, міняти відразу всі елементи при зміні одного і т. п.
  2. Опрацьовувати дизайн складних систем і масштабних продуктів.
  3. Легше спілкуватися з розробкою та швидше впроваджувати свої роботи в продукт. Макет, намальований в графічному редакторі, дозволяє багато незручні моменти замести під килим. З ними все одно доведеться зіткнутися на етапі розробки, коли змінювати рішення буде вже пізно. Якщо дизайнер пропрацює всі тонкощі заздалегідь, то продукт на виході вийде більш якісним і по шляху виникне менше суперечок.
  4. Перевіряти свої рішення у життя, не чекаючи розробки. Так, є купа додатків і сервісів, які дозволяють на основі картинок зібрати клікабельний прототип. Але жоден з цих сервісів не дозволить вам скористатися вашим продуктом і перевірити його в життя до того, як він буде реалізований розробкою.
  5. Самостійно робити перші версії своїх особистих проектів, а не жаліти про те, що немає знайомого розробника. Робочий прототип, нехай і дуже простий, завжди є плюсом при продажу ідеї.


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

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

На що робити упор, кожен вирішує сам.

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

З чого почати вивчення веб-технологій?
Є багато інтерактивних онлайн-курсів. Але, по-моєму, почати треба не з них. Коли ви починаєте займатися бойовими мистецтвами, на перших заняттях вас не почнуть вчити прийомам. Спочатку вам потрібно буде навчитися бігати, віджиматися, присідати і всіляко підготувати своє тіло до занять.

Так і тут. Почати потрібно з двох дуже важливих навичок:
  1. Десятипальцевий сліпий друк.
  2. Базове вміння читати англійською.


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

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

Кілька порад:
  1. В якості тренажера краще використовувати thetypingcat.com або klava.org. Інші тренажери — знущання над психікою і від них більше шкоди, ніж користі.
  2. Почавши тренуватися друкувати наосліп, не піддавайтеся спокусі перейти назад на звичний метод. Навіть якщо дуже хочеться — швидкість навчання від цього буде прагнути до нуля, так влаштований мозок.


Навичка корисний не тільки для коду. Почавши друкувати наосліп ви будете економити купу часу на листування.

Базове вміння читати англійською
При вивчення коду у вас буде виникати багато питань. Завдяки StackOverflow.com, на них є відповіді. Але вони англійською. Крім того, англійською величезна кількість хороших туториалов і статей. Якщо ви зможете їх читати, вчитися вам буде набагато простіше.

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

Ще один спосіб навчитися читати англійською — змусити себе дивитися серіали без дубляжу. Для цього є, наприклад, чудовий сервіс Ororo.tv.

Краще почати з простих серіалів, так як «Шерлока» або «Теорію Великого Вибуху» дивитися буде важко. Сам я сильно просунувся в англійській поки дивився «Lost» під час тренувань. Там дуже простий англійську, а сюжет нехитрий настільки, що і без перекладу зрозуміло що відбувається.

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

Я б рекомендував такий порядок занять:

  1. HTML і CSS
  2. Основи JS
  3. Робота з терміналом


Але у курсів є біда — вони всі дуже поступово і повільно розжовують. Встигаєш заснути, так і не дійшовши до суті.

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

P. S.: Всі коментарі уважно прочитаю в кінці дня і відповім апдейтом посту.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.