Як «прокачатися» дизайнеру: поради та корисні посилання від російських експертів



Фото: Flickr / Tobias Toft / CC

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

Денис Кортунов, директор по UX в Acronis
Дизайнери повинні постійно вчитися і «прокачувати» свої навички. В цьому суть професії. Якщо перестав вчитися або робити щось нове, то ти мертвий як дизайнер. Таким чином, всі «живі» дизайнери знають, як і де вчитися. Не думаю, що я можу їм щось корисне порадити. Але я спробую:

  1. Потрібно постійно практикувати дизайн. Вирішувати нові завдання, малювати концепти, пробувати модні штуки, вчити нові інструменти. Можна бути хорошим дизайнером лише в теорії.
  2. Іноді варто дивитися, що роблять інші дизайнери. Використовувати їх ідеї, але по-своєму. Але цим не варто захоплюватися, немає ніякого сенсу кожен день переглядати всі блоги про дизайні.
  3. Вивчати і пробувати щось ще, крім дизайну. Кращий дизайн завжди виходить на стику з технологіями або з іншими предметними областями. Я ось недавно витратив кілька днів, щоб зібрати величезний трактор Lego Technic — мені здається, це буде корисно і в роботі.
  4. Дизайнерські тусовки і конференції — дуже корисний спосіб провести час. Всім дизайнерам дуже раджу поїхати на OFFF в Барселону.
Антон Шинефт, дизайнер, працював над проектами Cossa.ru, ПостНаука
Насамперед варто усвідомити, що дизайн — це досить широке поле діяльності, і якщо ви все-таки зважилися піти на цей відчайдушний крок, то будьте готові витрачати весь свій вільний час на це заняття. Втім, впевнений, що це правило відноситься і до будь-яким іншим видам діяльності.

Зазвичай дизайнери-початківці стикаються з проблемою «абстрактних» знань, які вони знаходять малоприменимыми для себе. Неймовірна кількість лекцій, околодизайнерских тим, що мотивують і надихаючих матеріалів та історичних нарисів. З досвідом ці речі стануть ціннішими, так як проблеми, які торкаються автори в цих роботах, насправді лежать за межами дизайну — в тому значенні, в якому розуміє це новачок. Хоча впевнений, що навіть у початківців дизайнерів вже до початку навчання може бути сформований цілісний погляд на предмет.

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

Для загального розвитку існує ціла серія книг A Book Apart, охоплює різні сфери дизайну.

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

Для того щоб працювати «не в стіл», є також величезна кількість ресурсів. Мотивуючи себе в тому числі і виставленими термінами, можна спробувати взяти участь в онлайн-конкурсах. Наприклад, 99designs.

Зрозуміло, це вимагає витримки і посидючості. Знаю чоловіка, який починав практикуватися в дизайні на цьому сайті і через три місяці знайшов постійного клієнта з США з контрактом.

Ну і звичайно, Dribbble. До речі, є два запрошення. Віддам тим, чиї роботи сподобаються.

Павло Горщиків, дизайн-директор Redmadrobot
Якщо говорити насамперед про дизайн інтерфейсів, то ще кілька років тому значна частина дизайнерів були самоучками, часто з досить хаотично сформованим багажем знань, отриманих на практиці. Зараз ситуація змінилася: колишнього нестачі інформації немає, а ринок підтягнувся і наповнився професіоналами, готовими поділитися своїм досвідом.

Самонавчання залишається варіантом для новачків, які тільки починають цікавитися дизайном інтерфейсів, ми зазвичай рекомендуємо наступні матеріали:

  • Apple: iOS Human Interface Guidelines і Design: Apple Developers
  • Android: Google Design і Material Design Guidelines
  • «Представлення», Едвард Тафти
  • «Головні принципи інтерактивного дизайну», Брюс Тогнаццини
  • «Психлікарня в руках пацієнтів», Алан Купер
  • «Дизайн для реального світу», Віктор Папанек
  • «Дизайн: форма і хаос», Ренд Пол
  • «10 правил гарного дизайну», Дітер Рамс
  • «Tapworthy», Josh Clark
  • «don't Make Me Think», Steve Krug
Хочу зазначити, що для успішного старту будуть вкрай корисні настанови професіоналів — будь то онлайн-курси чи офлайнові навчальні заклади з відповідними програмами. Варіантів досить багато, але я б хотів відзначити наступні курси:

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

Антон Шеїн, керівник служби дизайну пошукової видачі Яндекса
На початку грудня Антон написав на «Хабре» статті, в якій розповів і про те, з чого дизайнерові варто починати вивчення веб-технологій. Наводимо витяги його відповідей.

чи дизайнер вміти працювати з веб-технологіями?

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

З чого почати вивчення веб-технологій?

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

Так і тут. Почати потрібно з двох дуже важливих навичок:

  • Десятипальцевий сліпий друк.
  • Базове вміння читати англійською.
  • Десятипальцевий сліпий друк.
Кілька порад

В якості тренажера краще використовувати The Typing Cat або Клаварог. Інші тренажери — знущання над психікою, і від них більше шкоди, ніж користі.

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

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

Базове вміння читати англійською

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

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

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

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

Онлайн-курси

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

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

Бонус: кілька виступів Антона по темі дизайну і прототипування:

Михайло Шишкін, засновник і креативний директор брендингового агентства SHISHKI
Сьогодні зростає попит на фахівців, які не просто «прокачані» у своїй області, але і вміють дивитися по сторонах (T-shaped person). Чим ширше кругозір, тим вище ймовірність того, що в певний момент свіжа ідея з іншої області знань збагатить поточний проект, допоможе поглянути зі сторони або застосувати нові цікаві рішення з іншої області.

Саме тому, я вважаю, що сучасним дизайнерам варто обов'язково вивчити основи верстки. Я б виділив чотири основних причини, чому це обов'язково потрібно:

  • Знання верстки дає розуміння обмежень того, що ти робиш, щоб не намалювати що-то нераціонально здійсненного. Хороший верстальник сверстает все, тільки от чи буде це ідеально з точки зору трудовитрат?
  • Кругозір. Знання технічних прийомів — це не тільки знання обмежень, але і навпаки, можливостей, які дає технологія. Щоб завчасно не включити самоцензуру і не «заупрощать» все потрібно розуміти, що насправді можна. Сміливість рішення ґрунтується на розуміння можливості його реалізувати. Знаєш, що це можливо — запропонуєш класний хід. Не впевнений — состорожничаешь.
  • Не дати ледачому верстальщику себе залякати. На всі «так не зверстати» ти зможеш відповісти «навіть я знаю як» якщо звичайно, так можна зверстати, і ти хоча б приблизно знаєш, як це зробити.
  • Емпатія. Чули про таку? Це коли ти співпереживаєш проблем інших людей — дуже корисно для здорових і продуктивних стосунків з людьми, з якими ти безпосередньо спілкуєшся по роботі. Зрозумій проблеми колег, і ти легше розташуєш їх до себе.
Вадим Макєєв, веб-євангеліст HTML Academy
У 2015 році я читав доповідь «Про сміються верстальники» на конференції Design Prosmotr у Москві (див. відео і слайди). Крім рад дизайнерам верстальників, які я зібрав в Твіттері (именуйте шари, будьте готові до даних та інші), я показав публіці знайомий інтерфейс для анімації в Photoshop і нагадав, як тужно робити анімацію і в якому дубовому форматі GIF вона звідти виходить.



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

@keyframes wave {
from { background-position: 0 0 }
to { background-position: 0 622px }
}

.wave {
background-image: url(wave.png);
background-position: 0 0;
background-repeat: repeat-y;

animation-name: wave;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

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

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

  • Зробіть гумову адаптивну сітку на флексах або гридах і самі перевірте, як вона виглядає на різних пристроях — замість того, щоб малювати цеглу під три дозволу, адже їх мінімум триста три.
  • Анімуються випадіння меню або розгортання акордеона саме так, як вам хочеться, а не так, як зумів ваш верстальник. З напівпрозорість, правильної плавністю і прискоренням.
  • Здивуєтеся наскільки різною буває згладжування шрифтів на різних платформах: від macOS до Windows (або найпростіших мобілок) і перестаньте вже вимагати, щоб воно було суворо таким, до якого звикли в Photoshop.
Експериментуйте, пробуйте, знайте властивості і динаміку поверхні, на якій «надрукують» ваш веб-дизайн, навчитеся користуватися її можливості на всі 100%.

За надихаючими прикладами інтерфейсів в коді йдіть на Codrops, пробуйте свої сили самі на CodePen і читайте всю серію A Book Apart — можу рекомендувати буквально кожну книгу, чого тільки коштує «JavaScript for Web Designers».
Джерело: Хабрахабр

0 коментарів

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