Negur Design

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

UX/UI Дивився курс по UX/UI дизайну
[Максим Кузнецов] UI/UX дизайн курс (2022) link2
Курс займає 8 гігабайт. Багато чого я знав, щось нове виніс для себе.
За курсом створював UX-артефакти в Miro: Site map, User Flow, Functional map
Читав книги:
100 главных принципов дизайна. Как удержать внимание.
С. Уэйншенк - 100 главных принципов дизайна (Библиотека специалиста) 2012
Сьюзан Уэйншенк - 100 новых главных принципов дизайна 2016
Дизайн привычных вещей. Дон Норман
Не заставляйте меня думать 3-е изд. Стив Круг
Выйди из зоны комфорта. Брайан Трейси
Статті:
Как провести UX-исследование самостоятельно: 6 проверенных методов
Как провести A/B-тест сайта: инструменты и популярные гипотезы
Полное руководство новичка по UX исследованию
7 конечных результатов ux: что я буду делать в качестве ux-дизайнера
Как мы делаем проекты: проектирование и прототипирование
Как создать User Story, сценарии и кейсы
Мобильные UX-паттерны, которые используются неправильно
Что такое гайдлайны мобильных приложений и зачем они нужны?
Анаит Бадалян — «Психология как инструмент дизайнера», UX-марафон
Комплексное руководство по дизайну мобильных приложений
Пользовательский опыт: все, что нужно знать продакту
Пользовательские сценарии: что это такое, как и для чего их нужно строить
Тестирование прототипов при разработке программного продукта
Дизайн-система: что это и в чем ее ценность для продукта и экосистемы | Глава 1
Создание дизайн системы — пошаговое руководство | Глава 2 Вивчав принципи Material design * * iOS * IxD Можу виконувати задачі по Interection дизайну: інтерактивності під час взаємодії з різними елементами інтерфейсу, як на сайтах, так і в мобільних додатках та інших інтерфейсах. Вивчав різні програми проєктування прототипів, в яких можна робити інтерактивності. Можу робити lottie анімації, motion дизайн, наприклад, в After Effects, Adobe Animate, GWD та інших програмах. Приклад відеоуроку: What is Interaction Design? Learn Interaction Design in Product Design like a Pro!

Графічні програми і прототипування

Lucidchart * Miro * Balsamiq * Marvel * > Flinto * > Principle * >
Figma * Abode Xd * Sketch * InVision * * Axure * Framer * > >
Робив у Framer сторінки під час вивчення Spline:
How to Easily Design a Glass Cube in 3D with Spline, робив сцену у Spline і додав її у Framer
  Spline 3D Images in Cubes Framer
Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline, робив сцену у Spline і додав її у Framer
  Spline 3D Room у Framer
Designing a 3D website with Spline and Framer, робив по ньому
  Адаптивна сторінка у Framer

Photoshop * > Приклади обробки зображень у фотошопі з AI Illustrator * > > > > > Lightroom Classic * > CorelDRAW * Mockflow * Zeplin * >

AI Тестував нейромережі:   Мій аналіз з зображеннями 10 доступних графічних нейромереж за одним запитом "txt to image".
Цей аналіз нейромереж я робив влітку 2023 року, тому в нейромережах з'явилися зміни.
1. Open AI Dale тестував, результати не такі виразні, як у інших безкоштовних, начебто платна але знову є ліміт.
2. Discord Midjourney подобається, платна. Вивчав на тестовому акаунті, зараз він закритий. >> >> app.fengmyshui.com >>
3. Discord BlueWillow безкоштовна, не така гарна як Midjourney, іноді добрі результати, деякі слабкі. * >> >>
4. Leonardo.AI безкоштовна, швидко закінчуються токени, десь 4 генерації по 4 зображення на добу. >> >> >> >> >> >>
5. Stable Diffusion локальний і зовнішні сервери: >> багато тонких налаштувань для генерації зображень. >> >> >>
Вивчав різні відео, тестував налаштування, генерував зображення. Використовуються спеціальні моделі, вони дозволяють краще генерувати потрібну графіку. Встановлював AbsoluteReality на StableDiffusion * >   Мої приклади AbsoluteReality на StableDiffusion
6. Easy Diffusion v2.5 7. clipdrop.co/stable-diffusion * >> генерує швидко, 3 результати по 4 картинки, безкоштовний добовий ліміт.
8. stablediffusionweb.com безкоштовно генерує 512 пікселів, 30 секунд, обмежені розміри, різні стилі.
9. fusionbrain.ai * генерує швидко безкоштовно 1024x1024 достатньо якісні зображення, є різні стилі. >>
10. replicate.com генерує швидко, робить помилки, розміри до 1024, безкоштовно. Інші >> генерують 3-5 хвилин, результати не чіткі.
11. Photoshop 25.0 Beta AI   Мої приклади Photoshop 25.0 Beta AI   12. Adobe firefly >> PS 25.0 Beta AI генерує швидко по три варіанти до запиту, які можна дороблювати, виділяючи необхідні області, вводячи нові запроси. Робить якісні результати дуже швидко у порівнянні з Stable Diffusion, не потребує додаткових налаштувань, потужної відеокарти й сторонніх платних серверів.
13. InvokeAI * >> >> Можна встановити на ком'ютері і працювати безкоштовно, є платні тарифи.
14. playgroundai.com Генерує 512 зображення протягом 10 секунд, реалістично, можна зробити upscale 4x. Результати не чіткі.
15. starryai.com Показує багато результатів, схожих на запит вже згенерованих зображень, але вони неточні. Можна безкоштовно згенерувати 5 зображень, коли я тестував зображення вони були не фотореалістичні.
16. lexica.art Був короткий тестовий період, результати неточні, потім платна підписка. lexica.art/aperture 768x1152, результати точні, зображення професійні, але заблюрені в 3d іграшковому стилі, фентезі стилі, є розбіжності. Усього 20 тестів.
17. bing.com/create 100 безкоштовних генерацій з 4х зображень. Запити точні, зображення якісні, але у поганому освітленні.
18. picfinder.ai генерує прості запроси 512 досить якісно, якісні запроси не робить.
19. imagine.art >> >> Генерує 512 за 30 сек., можна зробити upsale 1024, неточні результати. Є 6 стилів. 10 швидких зображень на 12 годин.
20. ideogram.ai можна генерувати текст з графікою 1024, шукаючи якісні промти у прикладах.
21. freepik.com/pikaso/ai-image-generator Можна згенерувати 20 безкоштовних зображень на добу.
  AI, заміна обличчя        Огляд графічних і відео нейроних мереж
Використовую нейромережі: clipdrop.co, letsenhance.io, upscale.media, aiseesoft.com, iloveimg.com, overscale.imagewith.ai, vectorizer.ai, vmake.ai, adobe.com (remove-background), myheritage.com, huggingface.co для реставрування обличчя >>, watermarkremover.io для видалення водяних знаків. ChatGPT, аналізував beta.dreamstudio.ai, instantart.io та інші.
image-to-video-ai.com FireFly *

Web-розробка приклад: мій сайт без фреймворку

HTML5CSS3 > > Flexbox > > > > CSS Grid > > > > > SCSS > > > Tailwind CSS * > > > > > Bootstrap 5 * >
SVG > > > > Web-анімація Anime.js Мій банер на anime.js Js Gsap > * > > Node.js > > Gulp Xampp * Git > > > > >
JS (середній рівень) Вивчав JavaScript онлайн-підручник learn.javascript.ru послідовно всі теми, вирішував, розбирав завдання.
Вивчив першу і другу частину, дійшов до частини 3, вивчав також по цьому сайту.
Мої результати навчання: розбір, тестування js прикладів.
Дивився інші курси > > >
Про ООП (освоїв матеріал, крім dep injection) jQuery * > Zepto.js * > JSON > Основи PHP * > Twig Handlebarsjs * Vue.js * Вивчав основи: > > > > > React * Маю знання основ React.
Дивився відео уроки
Вивчив розділи: Установка і основні поняття
Вступ та Швидкий старт
Руководство ReactJS props та state
Вмію на реакті прикрутити верстку в додаток, рознести верстку на компоненти.
Вивчав, тестував курс React JS фундаментальний курс от А до Я
Visual Studio Code * > * Адаптивна верстка. Приклади:
Study online
products.fieldbee.com - лендинг, який я дизайнив і верстав на конструкторі Flexbe, а потім переверстував на html, css, javasсript, bootstrap, php. Це робилось тому, що конструктор Flexbe на російській платформі і доступ до неї могли закрити.
AldertonGlobal
Harley Hair Street Skin Clinic
Cellular Genetic Health Institut
SunTour
London Dealing House

CMS

Wordpress * З Joomla і Wordpress я знайом близько 15 років, вмію повністю розробити сайт під ці cms. Робив раніше сайти на WP. Дивився курси і створював по ним сайти, щоб зафіксувати що не знаю.
Создание wordpress темы (шаблона) с нуля.
Меню в WordPress
Приклад сайту по уроку:   Лендінг-сторінка на WP, плагін Elementor
Курс по WordPress
Виконаний приклад по курсу:   Cайт по курсу на WP
Как перенести WordPress сайт с localhost на хостинг?
Elementor Review 2023 - Is Elementor Still Best in 2023?
Joomla. * JoomShopping * Розроблював сайт на Joomla JoomShopping для одного невеликого інтернет магазину, використовував розроблену тему, доверстував адаптивну версію, дороблював дизайн. Наповнював контент сайту і всі сторінки. Shopify * > У Shopify є тестовий період на 3 дні, я тестував Shopify на кількох акаунтах. У цьому відео можна ознайомитись з роботою у адмін панелі сайту: Best Shopify Tutorial and Ultimate Step by Step Guide for Beginners to Set up your Shopify store.
Shopify має різні теми, як безкоштовні, так і платні. Можна використовувати шаблон без редагування коду тільки через панель адміністратора, але є можливість редагувати код у режимі розробника і змінювати шаблон.
Я вивчав відео уроки, як створюються шаблони для Shopify Liquid, це об'ємна робота. Шаблон Shopify Liquid складається з великої кількості файлів зі спеціальним синтаксисом. Організація структури файлів у шаблоні специфічна, у папці sections є файли з розширенням .liquid, у папці templates є json файли, приклад Theme Development Tutorial, дивився відео, аналізував, вивчав розробку шаблону Shopify Liquid. В окремій папці шаблону assets файли css і js. У файлах шаблону .liquid багато коду з різними перевірками liquid синтаксису, css перевірки стилів, json коди {% schema %}. Автор ролика синхронізував роботу файлів на локальному комп'ютері з файлами на гітхабі та підключив гітхаб на сайті shopify. Процес додавання синхронізації.
Під час редагування коду шаблону додавання контенту shopify іноді довго реагує, реакція може бути від 1 до 5 секунд або більше.
Shopify Liquid має набір класів для css, які можна використовувати, наприклад, для розмітки сітки у коді.
Для різних елементів можна знаходити певні частини коду, сніпети та використовувати готові рішення, не верстаючи їх з нуля.
Я маю знання html, css, javascript, можу створювати сайт на Shopify, знаю як користуватися гітом.
Корисна інформація: Shopify Обзор 2024 – плюсы, минусы и отзывы пользователей How to Edit HTML Code in Shopify - Shopify Tutorials
Shopify. How to edit html/css files Does Shopify Have FTP? Полный Гайд по Shopify Liquid template language Liquid reference Організація структури How to Use Alternate Templates in Shopify Theme Developmen How to Use Liquid to Create Custom Landing Page Templates Что такое Shopify Жидкость? Краткое изложение основ Webflow * Webflow Conf 2023     Ціноутворення Webflow (план і ціни на 2024 р.)
Мені подобається Webflow, це самий кращий конструктор (візуальний редактор) сайтів, з яким я працював, але він платний.
Експертний огляд Webflow (2024): гідний інструмент чи черговий конструктор сайтів?
Дивився відео Як швидко зверстати дизайн сайту на Webflow. Огляд конструктора. і по ньому зробив   Мій приклад сторінки на Webflow.   Зробив бордери у блоків щоб можна було бачити сітку верстки сторінки.
Раніше тестував з прикладів Webflow такий невеликий сайт
Дивився такий урок верстки одного сайту, тестував по ньому верстку сторінки:   Моя робота на Webflow   Скрін у Webflow
Приклади анімацій у Webflow:   Анімація1   по уроку1   Анімація2   по уроку2
Переглянув всі трансляції на каналі Kirill Zharkiy, який вчить Webflow, я дивився ньанси роботи у Webflow. Він проводив огляди різних інших конструкторів і порівнював їх з Webflow. Приклади   CMS у Webflow     Анімації у Webflow   з Marketplace
По цьому уроку Control a Cinema 4D animation with your mouse on a webpage — After Effects & Lottie in Webflow зробив   Анімація 3d Galaxy у Webflow   (28 mb, затримка при завантаженні). По цьому уроку Animate a 3D render on scroll (same technique as Apple's AirPods Pro site) — Webflow + After Effects зробив   Анімація обертання смартфону у Webflow
Вивчав курс Figma to Webflow. Вирішив повністю його виконати по відео, щоб пройти весь процес від 3d моделювання, візуалізації, анімацій, розробки сайту у Webflow, публікації сайту на хостингу.   Мій результат по цьому курсу
Спочатку розробники Webflow створювали проект у Figma у low fidelity та mid fidelity, потім для розробки high fidelity продовжують роботу у Cinema 4D та Octane. У мене не було платної ліцензії, звернувся до Octane підтримки, вони дали ліцензію на 3 місяці навчення. Тестував роботу Octane рендер у Cinema 4D з уроку курсу та по іншим відео. Виконував спочатку все за автором, створював головну сцену, потім коли було багато роботи з іншими сценами в моделюванні, анімацією, дивився їх, аналізував. Оскільки вже були готові зображення для Webflow, використовував їх. Використовував After Effects для створення web-анімації з Сinema 4D у json та використання у Webflow. Створив лендинг у Webflow.
Вивчив плагін Figma to Webflow plugin. Дивився Webflow Labs introduces the Figma to Webflow plugin. Мій результат:   1. з Figma у Webflow   Інший курс: How to Use the Figma to Webflow Plugin | FREE COURSE. Мій результат:   2. з Figma у Webflow
Подивився цей курс Webflow 101. Лендинг, який розробники створювали за цим курсом: getcalendarapp.com
Пройшов тестування після курсу Webflow 101 Certification exam   Мій результат тестування   Отримав   Webflow certification
Інші відео і документація по Webflow: youtube.com/@Webflow university.webflow.com
Можу додати форми у Webflow, як в уроці Безлімітні форми для Webflow | Використовуємо Xano, можу вивчати Xano. Flexbe *

2d анімація: html5 банера >> презентації з анімацією >>

Google Web Designer * > Adobe Animate | Flash * Маю досвід роботи з Flash, створював 2d анімації, рекламні банери.
Вмію працювати з кістковою анімацією, як в уроці. AS3/JS, основи CreateJS >
Lottie * Вмію створювати анімацію Lottie та SVG у Figma, використовуючи Plugin Animix Editor. На app.aninix.com можна створити безкоштовно лише два проекти. Є експорт у формати Media: mp4, webm, gif (не більше 50 FPS); Lottie: json (normal), lottie(optimized), tgs(telegram); Інші: svg, png (sequence).
Анімацію Lottie можу створити також у After Effects та у SVGator. > > > * > * SVGator * Можу створювати анімацію у SVGator
Мій приклад анімації Cat Walk скріншот у app.svgator.com, яку я створив за уроком How to Create an Animated Cat.
Дивився всі уроки з SVGator на каналі: videos tutorials
SVGator дозволяє експортувати у безкоштовному режимі лише у формат SVG з анімаціями, додаючи логотип, який можна видалити у коді. Доступні інші формати для експорту в платному режимі: Lottie JSON (.json/optimized.json), React Native (iOS/Android.dart), Video (.mp4/.avi/.mov/webm/mkv), Gif (.gif / .png / .webp / sequence).
SVGator має більш розширений інтерфейс створення анімації в порівнянні з app.aninix.com, але він не інтегрований з Figma та з іншими програмами. У SVGator можна імпортувати анімацію lottie у форматі json, створену в іншому проекті, слої з анімованими кадрами працюють вірно. При необхідності можна перенести проект, створений у app.aninix.com у форматі json у app.svgator.com і продовжити роботу.
Я раніше працював з Adobe Animate, створював у ньому анімовані Html5 банера, презентації з анімаціями та анімації для сайту. Adobe Animate дозволяє експортувати анімацію в Html5 Canvas, відео формати, анімований gif, PNG покадрову анімацію, а також VR та WebGl. Adobe Animate має великі можливості щодо вибору інструментів для роботи з анімацією. Але Adobe Animate не підтримує експорт у SVG, Lottie JSON формати. Робота з SVGator схожа на створення анімації в Adobe Animate та Adobe After Effects зі своїми обмеженнями у виборі інструментів. > > > Основи кісткової анімації в Spine * > * >> Dragon Bones * > > > Вивчав створення кісткової анімації в програмах Spine та Dragon Bones. Приклад ходи 2d персонажа

Онлайн реклама, аналітика

DoubleClick Studio * > Раніше я вивчав DoubleClick Studio від Google - майданчик для керування рекламними анімованими креативами під web.
Проходив онлайн тестування. Отримав сертифікації: HTML5 Studio, Dynamic Creatives, Google Web Designer, Custom Lightbox, Vpaid Badge, Youtube Badge, QA. > Google Analytics *

Дизайн і верстка друкованих матеріалів >>

InDesign * QuarkXPress * Розробка презентацій у Figma * Power Point * Google Slides *

Моушн дизайн, відео монтаж

After Effects * Вивчав та тестував деякі туторіали: After Effects tutorials

Вивчав курс Міхаїла Бичкова Super After Effects 2022
Мої роботи по курсу

Вивчав курс Супер After Effects 2 (Відеокурс) + Бонуси 2017
Детальніше

Вивчав курс по After Effects CC Супер Моушн 2015
Мої роботи по курсу

Мої роботи у After Effects > Premiere Pro * Вивчав та тестував туторіали: Premiere Pro tutorials Final Cut Pro * DaVinci Resolve * Вивчав туторіали в розділі: DaVinci Resolve Edit
Приклади Pictory * Приклади

3ds Max * З 3ds Max я знайомий досить давно, вивчав з перервами. Маю знання розробки інтер'єрів та екстер'єрів, можу створювати низькополігональні моделі за кресленнями, uv текстури. Деякі приклади моїх робіт. Cinema 4D * Cinema 4D вивчав Супер Cinema 4D, 2018
Мої роботи по курсу Octane * Приклади Arnold * Приклади
Курс Arnold MographPlus Vray * * Приклади Corona * Приклади
* * > >> Adobe Maximo * Unity * Вивчав основи роботи з Unity
Мої роботи по урокам SketchUp * > > > Dimension * Вивчав та тестував всі туторіали: Dimension Get Started
Adobe Dimension. 3D design made simple. Fusion * > (початковий)
Spline * Вивчав Spline і виконував усі уроки по відео на YouTube каналах, мої результати
Мій приклад моделювання Polaroid Go у Spline

Операційні системи

Маю досвід роботи та установки Windows Mac OS Ubuntu