16:["$","$L18",null,{"data":[{"custom_excerpt":"21-22 червня у Сан-Франциско відбулася глобальна конференція компанії Figma — Config 2023. На ній були представлені оновлення, які компанія впровадила у свій продукт.","id":"64a42158dc6dee0001dee1d9","title":"Оновлення в Figma 2023","slug":"onovliennia-v-figma-2023","feature_image":"https://merge-academy.ghost.io/content/images/2023/07/------------Figma-2023.jpg","html":"

21-22 червня у Сан-Франциско відбулася глобальна конференція компанії Figma — Config 2023. На ній були представлені оновлення, які компанія впровадила у свій продукт. То ж давай подивимось, що там!

Режим розробника

Figma представила новий робочий простір під назвою Dev Mode, створений спеціально для розробників. Він включає кілька функцій, які допомагають подолати розрив між дизайном і розробкою.

По суті, це — робочий простір у Figma, призначений для задоволення потреб розробників і спрямований на те, щоб вони почувалися як вдома на платформі. Figma традиційно розглядалася як інструмент проєктування, і з появою Dev Mode Figma прагне подолати розрив між дизайном і розробкою.

Режим Dev наразі знаходиться в бета-версії та доступний безкоштовно для всіх користувачів до кінця 2023 року.

Підключення до інструментів і кодової бази

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

Трекінг того, що готово до розробки

Це зручна функція, яка допомагає розробникам відстежувати елементи дизайну та зміни, які потрібно впровадити в кінцевий продукт.

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

Figma Visual Studio Code

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

Розширення Figma для VS Code дозволяє переміщатися та перевіряти файли дизайну, співпрацювати з дизайнерами, відстежувати зміни та пришвидшувати впровадження дизайну. Використовувати розширення Figma for VS Code зручно, щоб:

переглядати коментарі та дії, відповідати на них у реальному часі;
отримувати пропозиції коду на основі дизайну;
пов’язати файли коду з компонентами дизайну.

Змінні

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

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

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

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

Наприклад, у тебе можуть бути змінні кольору для світлої теми, наприклад light-backgroundі light-text, і відповідні змінні для темної теми, як-от dark-backgroundі dark-text. Ці змінні не обмежуються лише кольорами, вони також можуть містити інші елементи дизайну, такі як типографіка, інтервали або логічні значення, які керують відображенням певних елементів.

Після визначення цих пов’язаних із темою змінних ти можеш легко перемикатися між темами у своєму дизайні, просто перемикаючи режим змінних.

Підтримка плагінів і REST API

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

Підтримка REST API дозволяє інтегрувати проектні дані Figma з іншими системами через інтерфейс прикладного програмування (API). Це означає, що до змінних у Figma можна отримати доступ і керувати ними програмно поза межами програми, а також зовнішні дані можна використовувати для оновлення змінних у Figma.

Розширене прототипування

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

Змінні в прототипуванні можуть містити такі значення як числа, текст, кольори або логічні значення (true/false). Ці значення можна використовувати у прототипі для створення більш динамічних взаємодій. Наприклад, змінна може містити підрахунок того, скільки разів було натиснуто кнопку, або зберігати поточний стан перемикача.
Умови дозволяють створювати логіку у прототипах. Можна вказати різні дії або результати на основі поточного значення змінної. Наприклад, у тебе може бути правило, яке говорить: «Якщо кнопку натиснуто більше 5 разів, перейдіть на інший екран».
Вирази дозволяють виконувати обчислення або перетворення змінних. Наприклад, ти можеш збільшувати змінну лічильника щоразу, коли натискаєш кнопку, або обчислювати новий колір на основі введення користувача.

Редагування в контексті та вбудований попередній перегляд

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

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

Покращена авто-лейаутів

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

Wrap по суті дозволяє елементам дизайну заповнювати простір як текст. Якщо у тебе є група елементів, розташованих горизонтально, і група стає занадто широкою для кадру, елементи автоматично «переносяться» на наступний рядок. Це особливо корисно під час розробки компонентів, які потрібно адаптувати до різної кількості вмісту чи розмірів екрана, як-от теги в списку тегів або елементи в сітці.
Мінімальна або максимальна висота/ширина допомагає підтримувати послідовність і цілісність дизайну. Визначивши ці обмеження, ти можеш гарантувати, що елемент ніколи не стане занадто малим (що може зробити його нечитабельним або неможливим для клацання) або занадто великим (що може порушити макет або накластися на інші елементи), незалежно від вмісту або розміру екрану, на якому він переглядається.

Оновлений засіб вибору шрифтів

Новий удосконалений засіб вибору шрифтів дає змогу дизайнерам знаходити ідеальний шрифт швидше та легше:

Пошук дозволяє дизайнерам швидко знайти саме той шрифт, який вони шукають, ввівши його назву. Це особливо корисно під час роботи з великою бібліотекою шрифтів, оскільки позбавляє від необхідності вручну прокручувати список, щоб знайти потрібний шрифт.
Фільтрування дає змогу звузити список шрифтів на основі певних критеріїв, наприклад: із зарубками, без зарубок, моноширинні тощо. Це може бути дуже корисним, якщо ти не певен, який шрифт використовувати, і хочеш порівняти кілька варіантів у певній категорії.
Попередній перегляд назв шрифтів. Раніше потрібно було застосувати шрифт до тексту у дизайні, щоб побачити, як він виглядає. Тепер ти можеш переглянути кожен шрифт прямо в панелі вибору, що заощадить багато часу та кліків. Це також дозволяє з першого погляду побачити, як характеристики та індивідуальність кожного шрифту можуть вписатися у твій дизайн.

Оновлення файлового браузера

Оновлення дозволяє користувачам швидко знаходити файли чи проєкти, використовуючи певні ключові слова чи фрази. Це особливо корисно під час роботи з великою кількістю проєктів у Figma.

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

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

Отже, оновлення дійсно варті того, щоб зробити свій вибір у пользу Figma, якщо ти його ще не зробив 😉 Вдалих тобі проєктів!

","tags":[{"id":"631f3f649f55b5003d6890f9","name":"#дизайн","slug":"dizain","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"21-22 червня у Сан-Франциско відбулася глобальна конференція компанії Figma — Config 2023. На ній були представлені оновлення, які компанія впровадила у свій продукт.","reading_time":5},{"custom_excerpt":"Один з ключових аспектів успішного дизайну інтерфейсу користувача — вибір кольорів.","id":"64747609227c1c0001a45024","title":"Підбираємо кольори для інтерфейсу користувача: прості кроки для стильного дизайну","slug":"pidbiraiemo-kolori-dlia-intierfieisu-koristuvacha-prosti-kroki-dlia-stilnogho-dizainu","feature_image":"https://merge-academy.ghost.io/content/images/2023/05/----------------------------------------------.jpg","html":"

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

Як вибрати кольори для успішного дизайну веб-сайту

Для того, щоб створити ефективну палитру, варто врахувати кілька ключових факторів:

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

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

А для того, щоб додати трохи конкретики, ось тобі декілька порад:

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

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

","tags":[{"id":"631f3f649f55b5003d6890f9","name":"#дизайн","slug":"dizain","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Один з ключових аспектів успішного дизайну інтерфейсу користувача — вибір кольорів.","reading_time":1},{"custom_excerpt":"Дизайн веб-сайту — важливий етап при розробці інтерфейсу користувача. Він визначає вигляд, структуру та функціональні можливості сайту, аце впливає на задоволення користувачів та їхню здатність досягати своїх цілей.","id":"646e3a776b071a0001aefb16","title":"Як визначити користувацьку мету для успішного дизайну веб-сайту","slug":"iak-viznachiti-koristuvatsku-mietu-dlia-dosiaghniennia-uspikhu-u-dizaini-vieb-saitu","feature_image":"https://merge-academy.ghost.io/content/images/2023/05/---------------------------------------------------------------------------_.jpg","html":"

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

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

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

Вивчення цільової аудиторії: перед тим, як почати розробку дизайну, необхідно ретельно вивчити цільову аудиторію. Хто вони? Які потреби та очікування у них є? Що вони хочуть досягти на сайті? Відповіді на ці питання допоможуть уявити, яким повинен бути веб-сайт, щоб створити крутий user expirience.
Аналіз конкурентів: ретельний аналіз сайтів може дати цінні вказівки. Порівняй, як конкуренти забезпечують потреби своїх користувачів та які функціональні можливості вони пропонують. Це допоможе знайти прогалини та розробити унікальну користувацьку мету для свого сайту.
Встановлення пріоритетів: після аналізу аудиторії та конкурентів, визнач найважливіші користувацькі мети для вашого веб-сайту. Подумай про те, що є найбільш значущим для користувачів та для досягнення цілей бізнесу. Наприклад, можливі мети: купівля товару, замовлення послуги, отримання інформації або реєстрація на сайті.
Створення структури та макетування: після визначення користувацької мети, переходь до створення структури та макету веб-сайту. Розташуй важливі елементи на сторінках таким чином, щоб користувачі могли легко досягнути своєї мети. Забезпеч інтуїтивно зрозумілий навігаційний шлях та простоту використання.
Тестування та оптимізація: після завершення дизайну веб-сайту проведи тестування з реальними користувачами. Спостерігай, як вони взаємодіють з сайтом та досягають своєї мети. Збирай фідбек та аналізуй дані, щоб виявити можливі недоліки та вдосконалити дизайн.

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

","tags":[{"id":"631f3f649f55b5003d6890f9","name":"#дизайн","slug":"dizain","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Дизайн веб-сайту — важливий етап при розробці інтерфейсу користувача. Він визначає вигляд, структуру та функціональні можливості сайту, аце впливає на задоволення користувачів та їхню здатність досягати своїх цілей.","reading_time":1},{"custom_excerpt":"Для айтівців 2022 минув неспокійно: у найбільших технологічних компаніях, як-от Google, Amazon, Twitter та Microsoft, сталися масові звільнення робітників. Кількість людей, які втратили роботу, вимірюється сотнями тисяч.","id":"644f93254d9302003d274360","title":"Скорочення світових корпорацій: що на нас чекає?","slug":"skorochiennia-svitovikh-korporatsii-shcho-na-nas-chiekaie","feature_image":"https://merge-academy.ghost.io/content/images/2023/05/--------------------IT_--------------------_-2.jpg","html":"

Для айтівців 2022 минув неспокійно: у найбільших технологічних компаніях, як-от Google, Amazon, Twitter та Microsoft, сталися масові звільнення робітників. Кількість людей, які втратили роботу, вимірюється сотнями тисяч.

Ось трохи статистики від Layoffs.fyi:

Google звільняє 12,000 (це 6% персоналу).
Microsoft звільняє 10,000 (5%).
Spotify також звільнив 600 людей. Цікаво, що у відкритому доступі лежать їх контакти, які дають самі ж люди.

То що ж призвело до таких радикальних рішень?

Пандемія

На піку пандемії уряди західних країн «роздали» населенню чимало грошей, через що згодом наздогнала інфляція. Вона «з’їла» частину відновлювального зростання, яке розпочалося 2022 року, та економіки розвинених країн залишилися контрольованими. Допоки не сталося повномасштабне вторгнення росії в Україну.

Війна

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

Очікування катастрофи

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

Напруження

Попереднє суттєве зростання великих IT-компаній спиралося на модель high risk=high reward. Коли ж світова економіка почала кульгати, а рівень безробіття зріс навіть у розвинених країнах, Big Tech похитнулися. Техгіганти першими зазнали величезних хвиль скорочень, та схожі процеси ми очікуємо побачити і в інших галузях, як-от креативна індустрія, банківський сектор, медіа тощо.

Які перспективи українського IT-ринку?

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

В LinkedIn можна знайти багато дописів від IT-фахівців, які втратили свою роботу через масові звільнення. Але за дослідженням порталу ZipRecruiter, 80% звільнених фахівців знайшли нову роботу протягом трьох місяців. Така тенденція виникла через пандемію і це не є нічим несподіваним. Індустрія адаптується і вирівнюється, що є нормальним явищем.

Можливо, в найближчому майбутньому технологічні гіганти будуть менше вкладати в амбітні проекти, наприклад, метавсесвіти або футуристичні гаджети, і зосередяться на своїх головних перевагах. Google, наприклад, буде працювати над покращенням алгоритмів пошуку, а Meta нарешті зосередиться на покращенні своїх основних продуктів - соціальних мереж Facebook і Instagram.

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

","tags":[{"id":"644f939c4d9302003d27437c","name":"#новини","slug":"novini","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":"#39653e"}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Для айтівців 2022 минув неспокійно: у найбільших технологічних компаніях, як-от Google, Amazon, Twitter та Microsoft, сталися масові звільнення робітників. Кількість людей, які втратили роботу, вимірюється сотнями тисяч.","reading_time":2},{"custom_excerpt":"Не Pinterest єдиним як то кажуть. Шукати натхнення, а разом з ним і референси — ледь не 50% роботи дизайнера.","id":"644c1f3d4d9302003d27433e","title":"Де знайти натхнення дизайнеру?","slug":"die-znaiti-natkhniennia-dizainieru","feature_image":"https://merge-academy.ghost.io/content/images/2023/04/-------------------------------_.jpg","html":"

Не Pinterest єдиним як то кажуть. Шукати натхнення, а разом з ним і референси — ледь не 50% роботи дизайнера. Ось декілька сервісів, які допоможуть веб-дизайнерам підсилити надивленність і відшукати кльові приклади як можна візуалізувати свої ідеї.

Pixelfika
Галерея реальних сайтів з крутими дизайнами, яка щоденно поповнюється новими роботами.
Minimal Gallery
Велика галерея вебсайтів, курована Пітом Терхейденом.
Dark Mode Design
Ресурс для натхнення вебсайтами, виключно у темній кольоровій гамі або ті, що мають можливість перемикатися.
Web Design Inspiration
Щодня на платформі публікуються нові кейси та найкращі тенденції вебдизайну.
Toools design
Іконки, мокапи, типографіка тощо для твоїх проєктів.
Savee
Від фотографії до типографії та дизайну інтер’єрів — словом, є на що подивитися.
Design inspiration
Сайт, що максимально схожий на Pinterest за функціоналом.

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

","tags":[{"id":"62bc1d77abf18c003d398acf","name":"#натхнення","slug":"hash-natkhniennia","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Не Pinterest єдиним як то кажуть. Шукати натхнення, а разом з ним і референси — ледь не 50% роботи дизайнера.","reading_time":1},{"custom_excerpt":"Правила, які допоможуть тобі не загубитися у компонентах проєкту та запобігти хаосу.","id":"63e4fd10d9ac98004d869caa","title":"Як називати свої проєкти в Figma","slug":"iak-nazivati-svoyi-proiekti-v-figma","feature_image":"https://merge-academy.ghost.io/content/images/2023/02/----------------------------Figma.jpg","html":"

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

Організація сторінок

Всередині проєкту у вас буде декілька обов’язкових сторінок. Знову ж, вони можуть відрізнятися в залежності від того, як ви звикли працювати, проте є база:

Mockups — основний файл, в якому ми працюємо.
References — добірка візуальних матеріалів, які допомагали нам створювати дизайн або були надіслані клієнтом.
Components — тут лежать усі компоненти, які ми використовуємо в проєкті.
Backlog — тут зберігаються файли, які не були використані в основному макеті.
Cover — обкладинка, яка буде висвічуватися в прев’ю нашого файлу.

Назви макетів

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

Щодо назв макетів — існує система, яку ми намагаємось використовувати всюди:

Номер flow.
У нас може бути багато сторінок і всі вони будуть відноситись до різних частин сайту чи продукту. Тому ми називаємо їх різними цифрами.
Номер екрану.
Назва сторінки (наприклад, Home page).
Вказуємо розмір макету у квадратних дужках (наприклад Dekstop [1920]).
Використовуємо емоджі (cntrl+cmmnd+space) для того, щоб позначити статус. Наприклад, палітра — якщо макет ще малюється. Галочка — якщо макет готовий.

Це основні правила, які допоможуть тобі структурувати робочий простір і легко в ньому орієнтуватися. Дізнавайся більше лайфхаків та ставай упевненим юзером Figma на курсі від Merge Academy!

","tags":[{"id":"631f3f649f55b5003d6890f9","name":"#дизайн","slug":"dizain","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Правила, які допоможуть тобі не загубитися у компонентах проєкту та запобігти хаосу.","reading_time":1},{"custom_excerpt":"У своєму майстер-класі Паша Целуйко поділився особистим досвідом ведення бізнесу та збереження ресурсу під час війни.","id":"63e4fb6dd9ac98004d869c8b","title":"Майстер-клас «Як вистояти в буремні часи»","slug":"maistier-klas-iak-vistoiati-v-buriemni-chasi","feature_image":"https://merge-academy.ghost.io/content/images/2023/02/---------------------------.jpg","html":"

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

То як зберігати працездатність і рухатися вперед за таких умов? У своєму майстер-класі Паша Целуйко — CEO Merge та Merge Academy, поділився особистим досвідом ведення бізнесу та збереження ресурсу під час війни.

Паша присвятив трансляцію актуальним питанням:

Що зараз відбувається на ринку?
Наскільки IT-бізнесу та стартапам зараз погано?
Що відбувається з українським IT-бізнесом зараз?
Які головні принципи незламності?

Також розповів про те, як запускали Merge Academy під час війни та поділився безкоштовним чек-листом “Принципи B2B продажів”.

Дивіться запис майстер-класу тут і ставайте незламними разом з нами!

","tags":[{"id":"62bc1d77abf18c003d398acf","name":"#натхнення","slug":"hash-natkhniennia","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"У своєму майстер-класі Паша Целуйко поділився особистим досвідом ведення бізнесу та збереження ресурсу під час війни.","reading_time":1},{"custom_excerpt":"Майстер-клас «Основи роботи з Figma» від автора Lead designer Merge Володимира Миронця та CEO Merge Паші Целуйко.","id":"6380a2a7bcf272003d131ede","title":"Майстер-клас з Figma","slug":"maistier-klas-z-figma","feature_image":"https://merge-academy.ghost.io/content/images/2022/11/----------------Figma.jpg","html":"

Продовжуємо нашу традицію майстер-класів перед запуском курсів і цього разу обговорюємо роботу з Figma.

На майстер-класі розглядаємо:

🔹 основні переваги Figma для дизайнерів та не дизайнерів;

🔹 як побудований інтерфейс програми;

🔹 як працювати з Figma.

А ще розповідаємо, чому тобі варто завітати на наш новий курс Figma!

Спікери: Володимир Миронець — Lead Designer агенції Merge Development та автор програми курсу Figma від Merge Academy та Павло Целуйко — СЕО Merge Development та Merge Academy.

Дивись майстер-клас за посиланням.

А продажі курсу Figma уже відкрито! Тому після того, як надихнешся нашим майстер-класом, дізнавайся подробиці щодо навчання на нашому сайті.

","tags":[{"id":"631f3f649f55b5003d6890f9","name":"#дизайн","slug":"dizain","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Майстер-клас «Основи роботи з Figma» від автора Lead designer Merge Володимира Миронця та CEO Merge Паші Целуйко.","reading_time":1},{"custom_excerpt":"Де закінчується початківець і де починається junior? Якими скілами має володіти middle? Як дорости до senior? Давай розбиратися, who is who.","id":"637cfb6cd34772003d773ceb","title":"Junior, middle, senior designer: як їх відрізняти?","slug":"junior-middle-senior-designer-iak-yikh-vidrizniati","feature_image":"https://merge-academy.ghost.io/content/images/2022/11/----------------------------------.jpg","html":"

Де закінчується початківець і де починається junior? Якими скілами має володіти middle? Як дорости до senior? Давай розбиратися, who is who.

Початківець vs junior

Початківцев у IT-галузі називають trainee. По суті, від junior їх відрізняє тільки відсутність комерційних проєктів у портфоліо. Але це доволі вагомий фактор для прийома на роботу.

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

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

Middle

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

Як визначити, що ти middle:

маєш 2-4 роки досвіду роботи;
у твоєму портфоліо є приклади робіт з різних проєктів;
можеш самостійно працювати в команді;
ініціюєш власні способи вирішення проблем.

Senior

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

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

Хочеш перейти на новий рівень? Приходь в Merge Academy! Окрім курсів для початківців ми робимо освітні програми для тих, хто вже має досвід. А попереду у нас ще багато нових програм. То ж слідкуй за новинами і не забудь підписатися на розсилку 😉

","tags":[{"id":"631f3f649f55b5003d6890f9","name":"#дизайн","slug":"dizain","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Де закінчується початківець і де починається junior? Якими скілами має володіти middle? Як дорости до senior? Давай розбиратися, who is who.","reading_time":2},{"custom_excerpt":"У цій статті розбираємо що таке “no code” і як з ним працювати.","id":"637cf3add34772003d773c50","title":"Що таке no code?","slug":"shcho-takie-no-code","feature_image":"https://merge-academy.ghost.io/content/images/2022/11/--------no-code_.jpg","html":"

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

Термін “no-code”

No-code — це спосіб створення програмного забезпечення за допомогою інструментів та платформ для швидкої розробки. Це не означає повної відмови від коду, а лиш дає змогу створювати програми з мінімальним його знанням.

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

Зазвичай термін “no-code” використовується стосовно:

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

Без коду, але з навчанням

Не думай, що «без коду» значить, що ти можеш просто сісти, тапнути два рази по клавіатурі та створити неймовірний сайт. Як і в будь-якій справі, тут потрібно спочатку пройти навчання. Проте, якщо ти хочеш розробляти “no-code”, то зможеш зосередити свою увагу на логіці та мовах платформ, якими будеш користуватись. Так, наприклад, за два тижні можна навчитись створювати сайти курсі Webflow-розробки у Merge Academy.

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

Так чи інакше, навчання “no-code” не буде тривати так довго, як курси для розробників. Тому ти зможеш витратити час на підтягнення знань в інших галузях та опанувати різні інструменти.

Як працює “no-code”

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

Платформи no-code підключають бази даних, утиліти та інші інструменти за допомогою API — інтерфейсів прикладного програмування. Так, наприклад, ти можеш опублікувати фотографію у стрічку Facebook напряму з якогось фоторедактора. Це працює за допомогою API: розробник використовує його у Webflow без коду, створює посилання на аутентифікацію, таким чином отримуючи доступ до фото зі стрічки.

No-code розробники можуть також втручатися в код. Так, наприклад, ти маєш змогу створити вебсайт у Webflow без знання, або ж налаштувати деякі інструменти за допомогою коду.

Різниця між “low-code” та “no-code”

Інструменти no-code не вимагають у тебе кодувати. Проте платформи для розробки надають таку можливість та дозволяють прискорити та спростити процес створення вебсайтів за допомогою вбудованих компонентів та графічних інтерфейсів. Їх можна використати при створенні різних типів додатків.

При розробці сайтів no-code та low-code ти користуєшся готовими компонентами з бібліотеки платформи. Але відмінність полягає у тому, що low-code розробка припускає спрощене кодування для налаштування певних функцій. Так, наприклад, на курсі webflow розробки є декілька уроків вивчення елементарного кодування.

Які переваги та недоліки “no-code”?

Розробити сайт на webflow без коду — звучить прекрасно. Але огляньмо повну картину плюсів та мінусів програмування no-code.

Переваги:

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

Недоліки:

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

Інструменти для створення сайту з no-code

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

Airtable. Це інструмент для електронних таблиць і баз даних. Він дозволяє створювати програми разом з командою, має інтуїтивно зрозумілий користувальницький інтерфейс. Добре підійде для новачків.
Webflow. Цей інструмент веб-дизайну no-code включає велику бібліотеку попередньо створених шаблонів, які можна налаштувати відповідно до ваших потреб. Це також дозволяє користувачам додавати інтерактивність, як-от анімацію, ефекти наведення та багато іншого.
Zapier. Його функції автоматизації можуть допомогти тобі заощадити час, інтегруючи різні програмні рішення разом із мінімальними зусиллями з вашого боку, але Zapier має обмеження щодо того, які функції можна автоматизувати між різними платформами.

Рух без коду набирає популярності протягом останніх кількох років, адже це перспективна альтернатива класичній розробці. Ти можеш спробувати пройти навчання і вже за невеликий проміжок часу опанувати нову професію та отримувати замовлення. Якщо ти не хочеш витрачати час на вивчення мов кодування — це чудовий варіант долучитися до IT-галузі. У такому разі, велкам на курс Webflow від Merge Academy!

","tags":[{"id":"628b51821dd38d004d5ba1fc","name":"#розробка","slug":"development","description":"Говоримо про веб-розробку зрозумілою мовою. Розказуємо про проблеми, що можуть виникнути при розробці сайтів та проєктуванні інтерфейсів.","feature_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-2.jpg","visibility":"internal","og_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-1.jpg","og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"У цій статті розбираємо що таке “no code” і як з ним працювати.","reading_time":3},{"custom_excerpt":"Зібрали перелік сайтів і каналів, де можна шукати роботу в Україні та країнах Європи.","id":"634d07d09c62d8004d007e1d","title":"Де шукати роботу українцям?","slug":"die-shukati-robotu-ukrayintsiam","feature_image":"https://merge-academy.ghost.io/content/images/2022/10/---------.jpg","html":"

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

У цьому матеріалі ми зібрали канали, де можна знайти роботу в Україні та країнах Європи. Сподіваємось, що цей перелік допоможе тобі.

Маркетинг

Telegram-канали:

Віддалена работа — тут можна знайти роботу на проєктах за різними спеціальностями. Зручний пошук по хештегах, досить детальні описи вакансій.
Workado — добірки вакансій для віддаленої роботи.
Uпошуку — платформа для пошуку роботи у Європі. Тут діляться ресурсами та каналами. Є пошук по країнам.
Крезюме — канал з вакансіями українських компаній.
Happy monday — окрім добірок вакансій постять ще корисні матеріали та анонси подій.
Cases jobs — канал з вакансіями українських агенцій.
Marketing Remote Jobs Websites — добірка сайтів з віддаленою роботою для спеціалістів з маркетингу.

Сайти:

UATalents — волонтерський сайт допомоги з працевлаштуванням для українців, які вимушено залишили свої домівки і перемістилися до інших міст України чи за кордон. Можна відгукнутись на конкретну вакансію або заповнити форму на сайті.
Help ukrainians від Jooble — допомога в працевлаштуванні українців у Європі. Необхідно створити профіль та заповнити форму.
Jobs for Ukraine — вакансії в Естонії, Німеччині та Чехії.
Project Ukraine — проєкт для українців, які втратили роботу через війну. На сайті можна заповнити форму для допомоги.
RocketJobs — вакансії, які відкриті для громадян з України. Є зручний пошук за містами на інтерактивній мапі.
Supjobs — вакансії для розробників, дизайнерів, маркетологів та інших спеціалістів.
Skipthedrive — вакансії для тих, хто бажає знайти роботу дистанційно. Є пропозиції для різних спеціалістів: редакторів, розробників, рекрутерів та інших спеціалістів.

IT

Telegram-канали:

Lobby X — прогресивні вакансії в Україні.
Робота в IT — канал з вакансіями для IT-спеціалістів у різних країнах або віддалено.
Cases jobs — канал з вакансіями українських агенцій.
Uпошуку — платформа для пошуку роботи у Європі. Тут діляться ресурсами та каналами. Є пошук по країнам.
MiU — канал з добірками проєктних робіт та фултаймів.

Сайти:

Jungle — вакансії для українців у європейських компаніях.
UpWork — фріланс-вакансії та проєкти для віддаленої роботи.
Fiverr — ще один сервіс для фрілансерів.
Dou — багато вакансій в українських та закордонних компаніях, віддалена робота.
Remote Ukraine — вакансії для українців в європейських компаніях та допомога з візами в Сполученому Королівстві.
Hire for Ukraine — сайт з можливістю працевлаштування в європейській компанії. Створюєте профіль і роботодавець сам з вами звʼяжеться.
Jobs for Ukraine — вакансії в Естонії, Німеччині та Чехії.
Project Ukraine — проєкт для українців, які втратили роботу через війну. На сайті можна заповнити форму для допомоги.
RocketJobs — вакансії, які відкриті для громадян з України. Є зручний пошук за містами на інтерактивній мапі.
Relocate — вакансії для IT спеціалістів з можливістю переїзду.
Supjobs — вакансії для розробників, дизайнерів, маркетологів та інших спеціалістів.
Велика табличка вакансій з можливістю переїзду або участю у фріланс проєкті.
Skipthedrive — вакансії для тих, хто бажає знайти роботу дистанційно. Є пропозиції для різних спеціалістів: редакторів, розробників, рекрутерів та інших спеціалістів.

Різне

Telegram-канали:

UaJob — канал з різними вакансіями: від кухарів до контент-мейкерів
Коментарі Workado — можна написати свій нік та рід діяльності у коментарях до допису.
Pracya — різні вакансії, у тому числі для дистанційної роботи.
Робота для українців — волонтерський проект, який допомогає шукати роботу під час війни. Тут українці знайдуть актуальні вакансії в містах України, Європи та віддалено.

Сайти:

Jooble — віддалена робота для людей з досвідом та без по всій Україні.
Flagma — переважно виробничі спеціальності у Чехії.
Imagine Ukraine — вакансії для українських переселенців. Є можливість зареєструватись і вам допоможуть з пошуком роботи.
Delucru — вакансії для українців у Молдові.
Jobware — вакансії з різноманітних спеціальностей у Німеччині.
Europa Jobs — вакансії переважно виробничих спеціальностей у Німеччині.
Група для українців у Польші, де публікують багато різноманітних вакансій.
Jobs for Ukraine — вакансії для науковців, представників виробничих спеціальностей та творчих професій.
SAP — спеціальна програма працевлаштування людей, які вимушено покинули Україну, в наступних країнах: Польщі, Румунії, Угорщині, Словаччині, Чеській республіці і Німеччині. У вас є змога подати заявку на наявні позиції, або просто створити обліковий запис у спільноті талантів без будь-яких документів.

Ми в Merge Academy також допомагаємо з працевлаштуванням: після завершення коротких програм наші студенти отримують доступ до закритої спільноти, де розміщуються проєкти від Merge Development та дружніх компаній. Ми вже маємо такий канал в телеграмі зі студентами курсу з Webflow-розробки. А от після проходження довгих програм, кращим студентам ми пропонуємо роботу в агенції або у партнерів.

","tags":[{"id":"62bc1d77abf18c003d398acf","name":"#натхнення","slug":"hash-natkhniennia","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Зібрали перелік сайтів і каналів, де можна шукати роботу в Україні та країнах Європи.","reading_time":3},{"custom_excerpt":"Спойлер: так, вам доведеться його вивчити, щоб стати девелопером. ","id":"633c1d389fd614004dc2736f","title":"З чого почати вивчення JavaScript?","slug":"z-chogho-pochati-vivchiennia-javascript","feature_image":"https://merge-academy.ghost.io/content/images/2022/10/7.jpg","html":"

Якщо ви плануєте перехід до IT-галузі в якості розробника, то скоріш за все вже почали розбиратися, що таке ui/ux дизайн і мабуть чули щось про JavaScript.

Що таке JavaScript і для чого він потрібен

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

анімована графіка;
фото слайд-шоу;
пропозиції автозаповнення тексту;
інтерактивні форми.

Щоб краще зрозуміти, що робить JavaScript, подумайте про функції, якими користуєтеся щодня: ваша стрічка Facebook оновлюється, Google пропонує додати певні слова до пошукового запиту або дописує за вас фразу.

Сила трьох: HTML, CSS І JavaScript

Більшість людей починає вивчати мови кодування з HTML і CSS, а потім долучає до них знання про JavaScript. Разом ці три елементи утворюють основи веб-розробки.

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

CSS — контролює вигляд сторінки: налаштування шрифтів, кольорів, фону тощо.

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

JavaScript має обов’язково знати розробник. Але часом трапляється, що і ui/ux дизайнери вивчають мови програмування. Навіщо? Це допомагає застосувати певні фічі при створенні прототипу сайту або додатку, додати стек технологій та правильно організувати архітектуру проєкту. Детальніше про це зможете дізнатися на курсах дизайну.

JavaScript — мова сценаріїв. Як це працює?

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

Як конкретно це працює?

JavaScript повідомляє веб-сайтам або веб-додаткам, «що зробити». Простими словами, ця мова наказує зображенням анімувати себе, фотографіям — циклічно показувати слайди або автозаповнювати певні частини форм. Розроюники, які використовують Javascript, створюють ці сценарії, а якими такі функції мають виконуватися автоматично.

Тим часом, усі основні веб-браузери мають вбудовані механізми, які можуть відтворювати JavaScript. Це означає, що команди цієї мови можна вводити безпосередньо в документ HTML, і браузери зможуть їх зрозуміти. Іншими словами, використання JavaScript не потребує завантаження додаткових програм чи компіляторів.

Що ще вміє JavaScript?

Про додавання інтерактивності до веб-сайтів ми вже казали. Але крім цього у Javascript ще багато галузей використання:

розробка програм для мобільних пристроїв,
створення ігор для браузера,
внутрішня веб-розробка.

Робота з JavaScript

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

Як додати JavaScript на веб-сайт?

Насправді додавання коду JavaScript до веб-сторінки є досить простим процесом. А якщо ви вже встигли ознайомитись з HTML і CSS, то він буде ще й знайомим. JavaScript можна додати безпосередньо до коду сторінки за допомогою тегів <script> і надання їм атрибуту типу text/javascript. Цей процес дуже схожий на додавання CSS на сайт. Порівняймо:

CSS:

<style>

Сюди йде CSS

</style>

JavaScript:

Тут міститься код JavaScript

</script>

Вуаля! Код JavaScript також можна додати до сторінки як окремий файл заголовка з розширенням .js (зазвичай це робиться, якщо це код, який ви хочете включити на декілька сторінок одночасно). Потім сценарій завантажується та обробляється у веб-браузері кожного користувача, перетворюючи його на динамічні об’єкти та ефекти, які вони бачать на своєму екрані.

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

Як вивчити JavaScript

У той час як HTML і CSS — навички, які дозволять кодувати базову веб-сторінку, JavaScript — це мова програмування, яка оживить ваш проєкт. Незважаючи на те, що HTML і CSS самі по собі дозволять вам виконувати роботу розробника-початківця, витративши час на вивчення JavaScript, ваші перспективи роботи стрімко зростуть.

Якщо ви готові зануритися у світ веб-розробки, велкам ту Merge Academy!

","tags":[{"id":"628b51821dd38d004d5ba1fc","name":"#розробка","slug":"development","description":"Говоримо про веб-розробку зрозумілою мовою. Розказуємо про проблеми, що можуть виникнути при розробці сайтів та проєктуванні інтерфейсів.","feature_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-2.jpg","visibility":"internal","og_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-1.jpg","og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Спойлер: так, вам доведеться його вивчити, щоб стати девелопером. ","reading_time":3},{"custom_excerpt":"Що таке http та https, чим вони відрізняються, як впливають на безпеку вебсайту і взаємодію з користувачами?","id":"6334504247a8c2003d90a726","title":"Http vs https: у чому різниця і як зберегти дані?","slug":"http-vs-https-u-chomu-riznitsia-i-iak-zbierieghti-dani","feature_image":"https://merge-academy.ghost.io/content/images/2022/09/http.jpg","html":"

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

Що таке HTTP і HTTPS?

HTTP (Hypertext Transfer Protocol) і HTTPS (Hypertext Transfer Protocol Secure) — це протоколи, які використовуються для передачі даних через Інтернет.

Наприклад, коли відвідувач твого веб-сайту натискає на посилання, його браузер надсилає запит http або https на сервер сайту щодо вмісту нової сторінки. У свою чергу ваш сервер генерує відповідь http або https, щоб відповісти і завантажити вміст.

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

То яка різниця між HTTP і HTTPS?

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

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

На відміну від цього, запити та відповіді https захищають інформацію твоїх користувачів за допомогою шифрування, роблячи його випадковим і нерозбірливим для будь-яких сторін, які не мають узгодженого ключа шифрування. Встановити такий зв’язок між твоїм веб-сервером і браузером твого користувача можна на етапі розробки сайту за допомогою методу SSL (Secure Socket Layer) або TLS (Transport Layer Security, оновлена версія SSL).

4 факти, чому https важливий

Https забезпечує безпеку для тебе і твоїх користувачів.

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

Якщо твій сайт використовує https, більшість браузерів відображатимуть заспокійливу піктограму замка в рядку URL-адреси поруч із доменним ім’ям та адресою, що вказує на зашифроване з’єднання. Без сертифіката SSL браузери можуть відображати червоний значок або взагалі не завантажити його, попереджаючи, що сайт не є безпечним.
Https формує довіру споживачів.

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

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

Як захистити свій веб-сайт за допомогою http

Це можна зробити через послугу веб-хостингу, яка включає сертифікацію SSL. Більшість авторитетних постачальників хостингу зроблять це безкоштовно. Конструктор сайтів Webflow, наприклад, використовує https за замовчуванням. Також можна використати спеціальні сертифікати SSL, видані центром сертифікації, або ж переспрямувати сайт з http до https через перенаправлення 301.

Хочеш створити безпечний та зручний продукт без знання коду? Радимо використати Webflow. З його допомогою можна зосередитися на візуальній частині та функціональності, сервіс автоматично генерує код відповідно до задач. А Webflow уроки можна знайти у Merge Academy, навіть повний курс!

","tags":[{"id":"628b51821dd38d004d5ba1fc","name":"#розробка","slug":"development","description":"Говоримо про веб-розробку зрозумілою мовою. Розказуємо про проблеми, що можуть виникнути при розробці сайтів та проєктуванні інтерфейсів.","feature_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-2.jpg","visibility":"internal","og_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-1.jpg","og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Що таке http та https, чим вони відрізняються, як впливають на безпеку вебсайту і взаємодію з користувачами?","reading_time":2},{"custom_excerpt":"CEO Merge і Merge Academy зібрав поради щодо ефективного тайм-менеджменту за власним досвідом.","id":"63330a524c8f6f003d2d9cb7","title":"Тайм-менеджмент: поради від Паші Целуйко","slug":"taim-mieniedzhmient-poradi-vid-pashi-tsieluiko","feature_image":"https://merge-academy.ghost.io/content/images/2022/09/3-----------------------------------.jpg","html":"

У кожного, хто працює над проєктом чи керує командою, були дні з неймовірною кількістю задач. Це саме той момент, коли ти жалкуєш, що у добі всього лише 24 години. Паша Целуйко — CEO Merge і Merge Academy, зібрав поради щодо ефективного тайм-менеджменту за власним досвідом.

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

Тож як зламати це прокляття та почати ефективніше розпоряджатися своїм часом?

Крок 1. Налаштуй свій календар.

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

Розподіли події за типом.

Переглянь свій календар і щотижневі завдання та відсортуй їх за категоріями. Оптимально використовувати до п’яти. Наприклад:

бізнес;
проєкти;
керування командою;
особисте;
навчання.

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

Плануй повторювані події.

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

Призначай не більше чотирьох зустрічей на день.

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

Формуй звички.

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

Крок 2. Делегування, а не мікроменеджмент.

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

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

Мікроменеджмент не принесе користі твоїм співробітникам. Їм потрібно навчитися брати на себе відповідальність у прийнятті рішень і прокачувати лідерські навички. Вони також повинні робити помилки, щоб вчитися на них. Роль CEO тут полягає в тому, щоб наставляти та направляти їх.

Крок 3. Не відволікайся

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

Порада наостанок: зосередься на важливому.

Пам’ятай, що твій час є найціннішим у світі. З усіх планів і заходів завжди варто вибирати ті, які принесуть тобі найбільше користі. Якщо робиш щось, що не приносить задоволення — відмовляйся від цього. Це стосується навіть людей. Якщо спілкування з кимось не приносить тобі задоволення — чи ти дійсно хочеш витрачати на це час?»

","tags":[{"id":"62bc1d77abf18c003d398acf","name":"#натхнення","slug":"hash-natkhniennia","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"CEO Merge і Merge Academy зібрав поради щодо ефективного тайм-менеджменту за власним досвідом.","reading_time":2},{"custom_excerpt":"Живемо в такі часи, коли віддалена робота — то вирішення багатьох проблем. Але з чого почати і де шукати замовлення?","id":"6329a012cbab03004d61012e","title":"Як почати роботу на Upwork","slug":"iak-pochati-robotu-na-upwork","feature_image":"https://merge-academy.ghost.io/content/images/2022/09/--------------------Upwork.jpg","html":"

Спершу треба зазначити, що для роботи на фрілансі необхідно мати певну професію. Якщо ж ви ще не визначились, хочете спробувати нове, але боїтеся занурюватися в складності розробки — спробуйте наш курс з Webflow. Уже за два тижні зможете створювати повноцінні сайти навіть без знання коду, приєднаєтесь до спільноти Merge Academy та зможете брати замовлення.

Upwork: що це?

Upwork — це найбільша біржа праці для фрілансерів. Там можна обрати один з 12 напрямків:

Web, mobile & software Dev
IT & Networking
Data Science & Analytics
Engineering & Architectures
Design & Creative
Writing
Translation
Legal
Admin Support
Customer Service
Sales & Marketing
Accounting & Consulting

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

Як оформити свій профайл та почати працювати?

Профайл

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

Відгук на вакансію

На Upwork можна самостійно обирати вакансії, які вас зацікавили. Рекомендуємо відгукуватися на ті, що відповідають вашому досвіду. Адже якщо ви не зможете впоратися з завданням, ризикуєте отримати поганий відгук від клієнта, через що ваш рейтинг буде знижено. Також майте на увазі, що на біржі є ліміт: 30 вакансій на місяць. Додатково можна придбати ще 10 вакансій за 10$.
Порада: подавайте заявки на вакансії, що були опубліковані протягом останньої доби. І ще звертайте увагу на кількість людей, які вже подалися. Якщо їх забагато, то вірогідність, що виберуть саме вас значно знижується.

Супровідний лист

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

Інтервʼю з клієнтом

Якщо ви успішно пройшли всі попередні пункти, ще й клієнт вам відповів — вітаємо! Але то ще не все. Скоріш за все вас запросять на невелике інтервʼю, щоб познайомитись. Частіше за все це трапляється якщо співпраця довгострокова.

Більшість інтервʼю відбуваються в скайпі за такою схемою:

клієнт розповідає про себе, свою компанію та проєкт;
він запитує вас про ваш досвід;
потім просить розповісти ваше бачення — як може бути вирішена задача;
обговорення умов: оплата, дедлайни, обовʼязки.

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

Що робити після?

Ймовірність того, що під час співбесіди клієнт погодиться на співпрацю — 50%. Також він може взяти час на те, щоб подумати і повернутися згодом. Проте якщо протягом тижня ви не отримаєте жодної відповіді — можете написати коротеньке повідомлення-нагадування з запитанням.

Upwork передбачає два типи контрактів:

оплата за годину роботи;
фіксована оплата за весь проєкт.

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

А для того, щоб здобути нову професію приходьте в Merge Academy 😉

","tags":[{"id":"62bc1d77abf18c003d398acf","name":"#натхнення","slug":"hash-natkhniennia","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Живемо в такі часи, коли віддалена робота — то вирішення багатьох проблем. Але з чого почати і де шукати замовлення?","reading_time":2},{"custom_excerpt":"Чи є життя після того, як став front-end розробником? Однозначно.","id":"63299341cbab03004d6100ab","title":"Ти став front-end розробником. Що далі?","slug":"ti-stav-front-end-rozrobnikom-shcho-dali","feature_image":"https://merge-academy.ghost.io/content/images/2022/09/8-4.jpg","html":"

Чи є життя після того, як став front-end розробником?

Однозначно. Більше того — є багато різних напрямків, у які можна поринути та розвиватись далі. Зібрали декілька прикладів із короткими поясненнями, куди можна зростати front-end спеціалістам.

Senior front-end developer

Що робить:

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

Як їм стати:

мати багаторічний досвід у front-end розробці;
дуже добре знати JavaScript і особливості його роботи;
навчитися круто взаємодіяти з колегами;
вміти самостійно здійснювати повний цикл front-end розробки;
мати в арсеналі досвід роботи з декількома front-end фреймворками і вміти швидко опанувати будь-який інший.

Full-stack developer

Що робить:

розробляє архітектуру веб-сайту або додатку;
проєктує, яку кнопочку ти будеш нажимати і куди це тебе приведе на сайті (взаємодія користувача з ПЗ);
розробляє API.

Як їм стати:

володіти основними мовами інтерфейсу: HTML, CSS і JavaScript;
опанувати front-end та back-end фреймворки: Angular, Vue, React, Next.js, Express, Laravel, .NET, Django, Ruby on Rails;
опанувати одну з серверних мов: JavaScript, Python, Ruby, PHP, Java, C#;
розумітися на технологіях баз даних: реляційних — MariaDB, MySQL, PostgreSQL, та нереляційних — MongoDB, OrientalDB, Redis.

Team lead

Що робить:

відбирає задачі у тих, хто дуже зайнятий і перекидує на тих, хто б’є байдики;
менторить новачків;
мотивує, надихає, підбадьорює і дає чарівного пенделя команді.

Як їм стати:

комунікувати як боженька;
знаходити шляхи вирішення конфліктів;
знати кожну деталь, над якою працює відділ;
вміти критично оцінювати роботу колег.

В IT дуже багато різних професій, то ж їх вистачить на всіх. Головне — не зупинятися і рухатися вперед. Віримо, що у тебе все вийде 😉

","tags":[{"id":"628b51821dd38d004d5ba1fc","name":"#розробка","slug":"development","description":"Говоримо про веб-розробку зрозумілою мовою. Розказуємо про проблеми, що можуть виникнути при розробці сайтів та проєктуванні інтерфейсів.","feature_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-2.jpg","visibility":"internal","og_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-1.jpg","og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Чи є життя після того, як став front-end розробником? Однозначно.","reading_time":1},{"custom_excerpt":"Когнітивні перетворення допомагають нам розрізняти важливі деталі та обробляти величезну кількість інформації.","id":"631f3bd79f55b5003d68907e","title":"10 когнітивних перетворень, які формують наш світ","slug":"10-koghnitivnikh-pierietvorien-iaki-formuiut-nash-svit","feature_image":"https://merge-academy.ghost.io/content/images/2022/09/-----3.jpg","html":"

Що таке когнітивні перетворення?

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

10 когнітивних перетворень

Метод доступності

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

Метод афекту

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

*Що таке ux/ui дизайн? — Це створення частини веб-сторінок та додатків, яка повʼязана з користувачами. UI-дизайнери розробляють візуальний вигляд інтерфейсів, а UX-дизайнери визначають, як він має працювати.

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

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

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

Ефект якорю (привʼязки та коригування)

Одне з найпоширеніших когнітивних перетворень. В UX-дизайні ця концепція дуже часто використовується для впливу на прийняття рішень користувачів.

Прив’язка – це використання відпускних цін у роздрібних магазинах. Наприклад, товар може продаватися за 100 доларів, а потім ціну буде знижено до 60 доларів. Більшість людей це сприйме як вигоду і купить, навіть, якщо в інших магазинах цей товар коштуватиме дешевше.

Ефект володіння

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

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

Ретроспективне викривлення

Це тенденція вважати, що подія була більш очевидною або передбачуваною, ніж вона була насправді.

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

Раціоналізація після покупки

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

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

Соціальний доказ

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

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

Ефект Даннінга-Крюгера

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

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

Ефект IKEA

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

В UX-дизайні є багато прикладів ефекту IKEA:

створення спеціального аватара для профілю;
додавання спеціального підпису до електронної пошти;
налаштування макета блогу.

Ефект дефіциту

Звісно ж, зараз нас дратують позначки «залишилось 1 місце» чи «до старту 1 день 9 годин 48 хвилин і 34 секунди». Але ми все одно реагуємо на це, навіть несвідомо. Так працює ефект дефіциту: він збільшує ймовірність того, що люди куплять продукт, коли думають, що він закінчиться або його заберуть.

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

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

UX дизайн та когнітивні перетворення

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

Якщо ти вже знайомий з UI/UX дизайном і хочеш перейти на наступний рівень та називатися middle-спеціалістом — приходь на курс від Merge Academy!

","tags":[{"id":"631f3f649f55b5003d6890f9","name":"#дизайн","slug":"dizain","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Когнітивні перетворення допомагають нам розрізняти важливі деталі та обробляти величезну кількість інформації.","reading_time":4},{"custom_excerpt":"Спікерка курсу з UI/UX дизайну Елізабет Гилюк розбирає проблеми джунів, їх відмінності від мідлів і розповідає про актуальність професії.","id":"6315b0600f3bcd003d8a981c","title":"Майстер-клас з UI/UX дизайну","slug":"maistier-klas-z-ui-ux-dizainu","feature_image":"https://merge-academy.ghost.io/content/images/2022/09/-----2.jpg","html":"

Продовжуємо говорити про IT-професії, розбирати актуальні проблеми та питання. Тому перед стартом курсу записали для тебе майстер-клас з UI/UX дизайну!

Спікерка та менторка курсу — Елізабет Гилюк, Head of UI/UX design у Merge з досвідом роботи понад 4 роки та 60+ проєктів у портфоліо.

На МК говорили про:

🔹 актуальність професії;
🔹 відмінності джунів, мідлів та сеньйорів;
🔹 типові помилки дизів, які застрягли між джун та мідл рівнем.

А також розповідали про наш майбутній курс з UX/UI дизайну: що на ньому буде і для кого він. Готуй снеки і нумо переглядати запис майстер-класу!

","tags":[{"id":"62bc1d77abf18c003d398acf","name":"#натхнення","slug":"hash-natkhniennia","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Спікерка курсу з UI/UX дизайну Елізабет Гилюк розбирає проблеми джунів, їх відмінності від мідлів і розповідає про актуальність професії.","reading_time":1},{"custom_excerpt":"Коли ти заходиш у пошукову систему і друкуєш певне слово чи фразу, твій браузер робить запит на сервер — тобто місце, де зберігається інформація, домени і так далі. ","id":"63107d9f905e6f003ddbbfa3","title":"З чого почати вивчення front-end розробки у 2022 році?","slug":"z-chogho-pochati-vivchiennia-front-end-rozrobki-u-2022-rotsi","feature_image":"https://merge-academy.ghost.io/content/images/2022/09/blogFE.jpg","html":"

Як працює вебсайт?

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

Тобто, відображення контенту на твоєму пристрої і є контент.

Що робить front-end розробник?

Front-end розробник реалізує відображення контенту. Тобто, все, що ми бачимо у вікні браузера, відвідавши сайт, — створив саме front-end девелопер. Це також стосується мобільних додатків, веб ігор і так далі (навіть інтерфейс банкомата).

Але front-end розробка — це не тільки картинка для користувача. Розробник також має продумати логіку того, як оброблюються запити, як працюють певні функції тощо.

З ким працює front-end розробник?

Project manager
Відповідає за завантаження розробника, ставить задачі, слідкує за наданням всіх необхідних матеріалів. Також контролює дедлайни та веде комунікацію з клієнтом.
UI/UX дизайнер
Створює дизайн і прототип проєкту, який front-end девелопер потім втілює в життя.
Back-end розробник
Відповідає за дані: їх структуру, як вони надходять на front-end, бази даних тощо.
QA (тестувальник)
Перевіряє вебсайт або додаток на зручність користування, виявляє помилки.

Основні технології у front-end розробці

Є три основні мови програмування: HTML, CSS та JavaScript. Розробнику не обов’язково потрібно одразу занурюватись у всі три та одночасно їх вивчати. Наприклад, для розробки сайту може бути достатньо лише HTML.

Коротко про те, за що відповідають ці мови:

HTML — мова розмітки текстових та інших елементів. З її допомогою розробник створює структуру сторінки та розташовує контент певним чином: додає заголовки, списки та абзаци.
CSS — стилізує зовнішній вид документа: можна створити шрифт, обрати колір, розташувати блоки на сайті в певному порядку.
JavaScript — допомагає оживляти сторінки та реагувати на дії користувачів: надсилає повідомлення, пересилає запити на сервер і завантажує дані. Також JavaScript можна використовувати для створення декстопних додатків і навіть ігор.

Також, існує багато різних фреймворків — тобто, інструментів, які полегшують розробку складних рішень. Наприклад: React, Next.js, Angular.js тощо.

Порада від Сашка Ратушного: якщо ви вивчите JavaScript, вам буде простіше опанувати будь-який фреймворк або, навіть, декілька одразу.

Поради для новачків

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

Курс з front-end розробки

Хочеш розпочати свій шлях у IT-галузі? Велкам ту Merge Academy!

Ми тут ділимось усім своїм досвідом, створюємо сучасні освітні програми і навчаємо тих знань, яких набули за роки співпраці з міжнародними клієнтами.

Зараз ми відкриваємо набір на курс «Front-end девелопер» для всіх, хто хоче за 6 місяців вирости від початківця до впевненого розробника.

На курсі ти:

🔹 вивчиш базу основних мов програмування (HTML, CSS, JavaScript);

🔹 опануєш інструменти, якими користується Frontend (React, Storybook, Git);

🔹 навчишся не тільки створювати проєкти, а й правильно їх упаковувати.

А що після курсу?

✅ зможеш створювати вебсайти та додатки;

✅ отримаєш реальні кейси в портфоліо та рекомендації від менторів Merge;

✅ будеш вміти правильно презентувати себе на співбесідах;

✅ зможеш влаштуватися в Merge або компанії-партнери.

Наша фішка: повертаємо 70% від ціни найкращому студенту на потоці та 50% — ще чотирьом найстараннішим студентам.

Записуйся на курс і починай створювати своє майбутнє прямо зараз!

","tags":[{"id":"62bc1d77abf18c003d398acf","name":"#натхнення","slug":"hash-natkhniennia","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Коли ти заходиш у пошукову систему і друкуєш певне слово чи фразу, твій браузер робить запит на сервер — тобто місце, де зберігається інформація, домени і так далі. ","reading_time":2},{"custom_excerpt":"Разом з нашим курсом Webflow.Basic ми в Merge Academy підтримуємо молодих спеціалістів безкоштовними майстер-класами. На них розбираємо основні питання, ділимось досвідом і даємо поради.","id":"62ecd25e49b096003d0d1dd9","title":"Основні помилки роботи з Webflow","slug":"osnovni-pomilki-roboti-z-webflow-i-iogho-korist-dlia-dizainiera","feature_image":"https://merge-academy.ghost.io/content/images/2022/08/----5.jpg","html":"

У цій статті зібрали для вас найцікавіше з майстер-класу «Основні помилки роботи з Webflow і його користь для дизайнера». Спікери: Паша Целуйко – СЕО агенції Merge та Merge Academy, веду подкаст «CEO Сучасності» та Олег Чинчик – розробник в агенції Merge та куратор курсу Webflow.Basic.

Переваги Webflow-розробників в кризу. Що зараз на ринку праці?

За даними опитуваннями Нацбанку, у приватному секторі зарплати впали на 25–50%, як порівняти з довоєнним часом. У середньому, дохід майже всіх українців після початку повномасштабного вторгнення знизився на 20%.

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

Через те, що компанії зменшують бюджети та обмежують найм, швидкі та дешеві технології набирають обертів. Сюди відносимо no-code розробку, а саме Webflow.

Можливості роботи на фрілансі за допомогою Webflow

Наразі Webflow розробник може гідно заробляти як на фрілансі, так і на part time та full time роботі. Наприклад, на Upwork Webflow розробникам пропонують рейти від 40$ на годину.

Переваги роботи з Webflow:

увійти в сферу ІТ, не маючи особливих навичок кодування;
можна працювати на себе;
співпраця з іноземними клієнтами.

З чого почати пошук потенційного замовлення?

Паша Целуйко створив детальний гайд «З чого почати фріланс?». Тут ви можете дізнатись не тільки про те, як шукати замовлення на біржах (адже там доволі велика конкуренція), а й навчитися холодному пошуку в LinkedIn, дізнатися, як оформити свій профіль тощо.

Також на нашому курсі Webflow.Basic є окрема лекція від Паші щодо пошуку замовлень і старту роботи на фрілансі.

Навіщо дизайнеру Webflow?

Створення сайту без знання коду — Webflow займає високі позиції серед no-code платформ.
Одним спеціалістом можна закрити весь проєкт і зробити сайт, не залучаючи додаткових розробників.
Виконуючи проєкт самостійно дизайн і розробку ви отримуєте весь бюджет проєкту, що буде набагато більше, ніж просто за дизайн.
Webflow дозволяє 100% відобразити дизайн як ви зробили на макеті.

Також однією з головних переваг Webflow перед іншими конструкторами є багатофункціональність: ви можете не занурюватися в код, а можете зазирнути і побачити, як працює та чи інша функція; дуже велика низка бібліотек, які можна використовувати.

Основні помилки новачків, що працюють з Webflow

Забагато неорганізованих класів.

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

Більшість людей, що починають працювати з Webflow, забувають стискати та змінювати розмір своїх зображень. Як правило, для того, щоб сайт завантажувався швидше, а отже, мав вищий рейтинг у пошукових системах – розмір зображення не має перевищувати 200 кілобайт.
Дублювання сторінок замість використання CMS

Якщо ви дублюєте однаковий контент більше двох разів, або його потрібно буде легко змінювати — вам буде корисно налаштувати колекцію CMS. Новачки зазвичай уникають використання CMS, але її дуже просто налаштувати. На курсі Webflow.Basic Олег розповідає, як це зробити. Принцип DRY.
Не звертати увагу на «незначні» помилки

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

Курс Webflow.Basic

Хочеш зануритися в IT-галузь, але думаєш, що нудне кодування не про тебе? Тоді приходь в Merge Academy на курс Webflow.Basic!

Програма складається з 14 відеолекцій. Після кожного другого урока студент буде отримувати практичні завдання у чат-боті та фідбек від ментора (про пакет).

Після курсу ти:

будеш створювати вебсайти та зможеш працювати з міжнародними проєктами;
приєднаєшся до закритої спільноти Merge Academy та отримуватимеш замовлення напряму від агенції Merge та компаній партнерів.

IT-галузь прямо зараз допомагає багатьом людям отримати робочі місця, опанувати нову професію та забезпечити майбутнє. А ще підтримує економіку нашої країни. Приєднуйся!

Долучайся до курсу: https://merge.academy/webflow

","tags":[{"id":"628b51821dd38d004d5ba1fc","name":"#розробка","slug":"development","description":"Говоримо про веб-розробку зрозумілою мовою. Розказуємо про проблеми, що можуть виникнути при розробці сайтів та проєктуванні інтерфейсів.","feature_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-2.jpg","visibility":"internal","og_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-1.jpg","og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Разом з нашим курсом Webflow.Basic ми в Merge Academy підтримуємо молодих спеціалістів безкоштовними майстер-класами. На них розбираємо основні питання, ділимось досвідом і даємо поради.","reading_time":3},{"custom_excerpt":"Минуло вісім років з тих пір, як Webflow був у групі американського бізнес-інкубатора Y-Combinator. З тих часів популярність сервісу для розробки сайтів дуже сильно виросла.","id":"62bc1a60abf18c003d398aa9","title":"Топ-6 компаній, які зробили свій сайт на Webflow","slug":"op-6-kompanii-iaki-zrobili-svii-sait-na-webflow","feature_image":"https://merge-academy.ghost.io/content/images/2022/06/----6.jpg","html":"

Минуло вісім років з тих пір, як Webflow був у групі американського бізнес-інкубатора Y-Combinator. З тих часів популярність сервісу для розробки сайтів дуже сильно виросла.

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

Ми зібрали список з топ-6 сайтів на Webflow від компаній YC, що отримали інвестиції понад 10 мільйонів доларів:

Pangea

Це стартап, мета якого — законектити компанії зі студентами-фрілансерами. Їх основний меседж полягає в тому, що таким чином можна отримати не лише короткострокові проєкти, а і повноцінну фул-тайм роботу.

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

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

Albedo

Ця компанія пропонує широкий асортимент аерофотозйомки за доступною ціною. Мережа супутників (які вони спроектували), яка розташована високо над землею, забезпечує комерційну фотографію високої роздільної здатності різноманітним клієнтам.

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

Regent Craft

Компанія, що виробляє літаки, які підіймаються трохи над поверхнею води. Regent Craft, що працює від електрики та повітряних потоків, пропонує вид транспорту без викидів. Їх CTA «See It In Action» розкривається у відео, де Sea Glider летить над поверхнею океану.

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

ContentFly

Для компаній, які хочуть якісного копірайтингу, але не хочуть орієнтуватися на численних веб-сайтах-фрилансерах, ContentFly пропонує щомісячну послугу підписки без зобов’язань, яка надає добре написаний контент на вимогу.

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

Lendflow

Цей продукт дає змогу підприємствам пропонувати фінансові послуги, вбудовані в їхнє програмне забезпечення через API бізнесу.

У FinTech інколи важко представити, як працює ваше програмне забезпечення. Але завдяки Lendflow набагато легше показати всі можливості вашого продукту. Сайт має цікаві візуальні елементи, включаючи контент, пов’язаний з програмуванням, як-от фрагменти коду. Це ідеальний баланс між технічною інформацією та захоплюючим дизайном.

Abacum

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

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

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

Хочете навчитися працювати з Webflow та створювати власні проєкти? Велкам на наш курс з Webflow-розробки: https://merge.academy/webflow

","tags":[{"id":"62bc1d77abf18c003d398acf","name":"#натхнення","slug":"hash-natkhniennia","description":null,"feature_image":null,"visibility":"internal","og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Минуло вісім років з тих пір, як Webflow був у групі американського бізнес-інкубатора Y-Combinator. З тих часів популярність сервісу для розробки сайтів дуже сильно виросла.","reading_time":2},{"custom_excerpt":"26 травня у Merge Academy пройшов перший майстер-клас з Webflow!","id":"62a8532701fa7e004da84838","title":"Майстер-клас з Webflow","slug":"masterclass-webflow","feature_image":"https://merge-academy.ghost.io/content/images/2022/06/---------1-1.jpg","html":"

Перед тим, як запустити курс з Webflow-розробки ми вирішили створити пілотну версію, щоб затестити те, на що ми так довго очікували. Наші спікери — Павло Целуйко, СЕО Merge та Merge Academy, та Олег Чинчик, розробник Merge та куратор курсу Webflow.Basic — виклалися на повну.

Про що говорили в ефірі:

Запуск Merge Academy;
Можливості роботи на фрілансі за допомогою Webflow;
Як користуватися Webflow, про його роботу та переваги;
З чого почати пошук потенційного замовлення: оформлення Linkedin, холодний пошук та лайфхаки від Паші;
Що буде на курсі та після?
Відповіді на питання глядачів: все про роботу з Webflow, замовлення, наш курс тощо.

Подивитися майстер-клас можна за посиланням: https://youtu.be/SFoF3QX-JvE

А продаж нашого курсу з Webflow вже відкрито! На вас чекає навчання та практика з досвідченим куратором Merge, а ми – чекаємо на вас.

","tags":[{"id":"628b51821dd38d004d5ba1fc","name":"#розробка","slug":"development","description":"Говоримо про веб-розробку зрозумілою мовою. Розказуємо про проблеми, що можуть виникнути при розробці сайтів та проєктуванні інтерфейсів.","feature_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-2.jpg","visibility":"internal","og_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-1.jpg","og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"26 травня у Merge Academy пройшов перший майстер-клас з Webflow!","reading_time":1},{"custom_excerpt":"Сервіс Webflow дозволяє розробникам інтерфейсу зосередитися на швидшому доведенні дизайну до виробництва. Зрештою, CSS — це про стиль, який дизайнери звикли робити у Sketch, Figma та Photoshop, але Webflow надає потужність HTML і CSS візуально.","id":"629788e3fabe7f003dafb330","title":"5 причин, чому front-end розробники мають користуватися Webflow","slug":"5-prichin-chomu-front-end-rozrobniki-maiut-koristuvatisia-webflow","feature_image":"https://merge-academy.ghost.io/content/images/2022/06/----02.jpg","html":"

Сервіс Webflow дозволяє розробникам інтерфейсу зосередитися на швидшому доведенні дизайну до виробництва. Зрештою, CSS — це про стиль, який дизайнери звикли робити у Sketch, Figma та Photoshop, але Webflow надає потужність HTML і CSS візуально.

Webflow — інструмент для професіоналів

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

Розробники швидко зрозуміють інтерфейс Webflow. Однією з найскладніших речей у застосуванні сервісу є те, що для його опанування потрібен деякий попередній досвід. Це важливо, якщо ви дизайнер або маркетолог, який ніколи не вивчав основ HTML і CSS. Але для розробників, які вже мають ці знання, Webflow буде легко зрозуміти.

Підтримка та оновлення сайту

Візуальне оформлення елементів у Webflow за допомогою CSS — це чудово. Але що робити, якщо ви хочете повторно використовувати або оновити такі ж стилі на своєму сайті? Хороші новини: як і CSS, Webflow побудовано за допомогою класів. Це означає, що Webflow не лише полегшує створення сайтів, а й підтримує їх та оновлює.

Завдяки Webflow ви не обтяжені зміною стилів CSS за допомогою коду. З таким візуальним інтерфейсом можна легко змінити всі сайти. Коли ви стилізуєте та змінюєте кожен елемент, ви побачите, що оновлення відбуваються миттєво. Ви можете створювати стилі CSS на всьому сайті для певного елемента або мати повний контроль над окремим елементом за потреби.

Публікація сайту в один клік

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

Гнучка та потужна CMS

Створювати статичні сторінки у Webflow – це круто. Але, як знає будь-який досвідчений розробник, веб-сайти, які призначені для життя та розвитку, в значній мірі покладаються на CMS. Це дозволяє їхнім товаришам по команді або клієнтам оновлювати сайт, не заважаючи розробці в майбутньому.

З цією метою Webflow CMS є надзвичайно гнучким і потужним інструментом, який поєднує в собі елементи керування візуальним дизайном, властиві Webflow, з гнучкістю CMS, яка не прив’язує вас до певних форматів чи типів публікацій. За допомогою Webflow ви маєте свободу створювати будь-який тип вмісту, який потрібен вашому сайту, а потім створювати дизайн навколо цього вмісту з нуля.

Можливості налаштування взаємодій та анімацій

Створення макетів з нуля – це перший рівень розробки у Webflow. Наповнення цих макетів користувацьким вмістом CMS — рівень другий. Але навіщо зупинятися? Рівень третій — це інструменти взаємодії та анімації, які відкривають нові можливості для візуальної веб-розробки.

Це особливо чудова новина для розробників інтерфейсу, які добре володіють HTML і CSS, але все ще думають про тонкощі JavaScript або відкладають їх вивчення. Webflow має на меті перенести силу анімації та взаємодії веб-сайту безпосередньо у візуальний інструментарій, що робить розробку веб-дизайн більш візуально креативною та доступною.

Хочеш навчитися працювати з Webflow, створювати круті проєкти та підтримувати економіку країни? На відеокурсі у Merge Academy ви зможете опанувати весь інструментарій для створення сайтів та подальшої співпраці з іноземними клієнтами.

Що вивчаємо на курсі:

Основи HTML та CSS;
Flex і grid;
Navbar;
Breakpoints;
Mobile navbar;
CMS;
Collections List.

Куратор: Олег Чинчик — фронтенд-розробник, який працює з Webflow понад рік. За цей час він сформулював багацько лайфхаків, про які й розповідатиме на курсі.

Велкам на наш сайт для реєстрації на курс.

","tags":[{"id":"628b51821dd38d004d5ba1fc","name":"#розробка","slug":"development","description":"Говоримо про веб-розробку зрозумілою мовою. Розказуємо про проблеми, що можуть виникнути при розробці сайтів та проєктуванні інтерфейсів.","feature_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-2.jpg","visibility":"internal","og_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-1.jpg","og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"Сервіс Webflow дозволяє розробникам інтерфейсу зосередитися на швидшому доведенні дизайну до виробництва. Зрештою, CSS — це про стиль, який дизайнери звикли робити у Sketch, Figma та Photoshop, але Webflow надає потужність HTML і CSS візуально.","reading_time":2},{"custom_excerpt":"У світі вебдизайну дуже велику роль грає час виходу на ринок. Через це більшість продуктових компаній намагається максимально скоротити строк створення сайту, при цьому не втративши якість дизайну.","id":"6283933c75f9fc003df5e836","title":"Що таке Webflow?","slug":"shcho-takie-webflow","feature_image":"https://merge-academy.ghost.io/content/images/2022/05/image--1-.png","html":"

Для того, аби створити гідний сайт протягом короткого часу, було створено вже багато сервісів. Зазвичай, команди використовують один інструмент для графіки та візуального дизайну, інший для створення прототипів і інший для кодування. Натомість сервіс Webflow допомагає спростити процес веброзробки.

Що таке Webflow?

Webflow — це конструктор, що допомагає створити вебсайт будь-якої складності. Він виходить за рамки шаблонів та надає вам повний контроль над створенням зовнішнього вигляду та функціоналу сторінок.

Незалежно від складності розробки, Webflow має багато можливостей. Сервіс використовується для створення різних типів вебсайтів, лендингів, сайти електронної комерції, блогів і сайтів b2b. Також є Webflow CMS (система керування вмістом), через що сервіс використовується як хостингова платформа.

Чи потрібно кодити?

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

Оскільки Webflow — це CMS, що пропонує повний візуальний вебдизайн, ви можете самостійно створити потрібний продукт. Чудова особливість сервісу в тому, що навіть якщо ви звернетесь до розробника за певним функціоналом, то потім зможете самостійно вносити незначні зміни. Необовʼязково знов звертатись до спеціалістів, щоб, наприклад, оновити інформацію або змінити картинку.

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

Яку мову програмування використовує Webflow?

Webflow дає вам можливість працювати з трьома мовами кодування: HTML, CSS і JavaScript. Але для роботи над проєктом ви можете навіть не розумітись на них. Сервіс створює весь код автоматично, коли ви проєктуєте сайт за допомогою візуального редактора.

Але знати трішки більше про мови програмування варто для розуміння процесів:

HTML використовується для створення вмісту сторінки: усіх заголовків, абзаців, кнопок та посилань на сторінці. Це те, що ви змінюєте, додаючи елементи та текст на свій вебсайт.
CSS визначає, як виглядатимуть усі елементи під час їх завантаження, враховуючи розміри, шрифти, кольори тощо. Це обробляється панеллю стилів у редакторі Webflow.
JavaScript відповідає за функціональність та інтерактивність, починаючи від простих функцій, таких як меню або повзунки зображень, до складніших елементів, як-от ефекти 3D-анімації. Бібліотека компонентів Webflow використовує JavaScript, щоб зробити вебсайт комфортним для користувачів, робить його інтерактивним та унікальним.

Досвідчені дизайнери, використовуючи редактор коду Webflow, можуть за допомогою бібліотеки JavaScript додавати власні елементи на вебсайт. Це означає, що розробники ніколи не будуть обмежені самою платформою. Отже, Webflow пропонує вам всю гнучкість, необхідну для створення привабливого вебсайту.

Де навчитися робити сайти на Webflow?

На короткому курсі у Merge Academy ви зможете опанувати весь інструментарій для створення сайтів та подальшої співпраці з іноземними клієнтами.

Програма 2-тижневого курсу включає:

Основи HTML та CSS;
Flex і grid;
Navbar;
Breakpoints;
Mobile navbar;
CMS;
Collections List.

А що після курсу?

будеш створювати вебсайти та працювати з міжнародними замовниками;
приєднаєшся до закритої спільноти Merge Academy та отримуватимеш замовлення напряму від агенції Merge.

Вже скоро ми відкриємо реєстрацію на курс, а поки слідкуй за новинами на наших сторінках в Instagram та Facebook!

","tags":[{"id":"628b51821dd38d004d5ba1fc","name":"#розробка","slug":"development","description":"Говоримо про веб-розробку зрозумілою мовою. Розказуємо про проблеми, що можуть виникнути при розробці сайтів та проєктуванні інтерфейсів.","feature_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-2.jpg","visibility":"internal","og_image":"https://merge-academy.ghost.io/content/images/2022/05/cover-facebook-1.jpg","og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null,"codeinjection_head":null,"codeinjection_foot":null,"canonical_url":null,"accent_color":null}],"authors":[{"id":"1","name":"Павло Целуйко","slug":"pavel-2","profile_image":"https://merge-academy.ghost.io/content/images/2023/04/T0156F3E293-U014T4DTPF1-17872da910d9-512.png","cover_image":null,"bio":"CEO та Founder Merge і Merge Academy. В Merge ми допомагаємо компаніям з UI/UX дизайном і розробкою. В Merge Academy ми навчаємо людей UI/UX дизайну і розробці.","website":"https://merge.rocks","location":"CEO","facebook":null,"twitter":null,"meta_title":null,"meta_description":null}],"excerpt":"У світі вебдизайну дуже велику роль грає час виходу на ринок. Через це більшість продуктових компаній намагається максимально скоротити строк створення сайту, при цьому не втративши якість дизайну.","reading_time":2}]}]