Как научиться верстать и реализовывать современные веб-приложения?
Публичный постСитуация: я — бэкенд разработчик с небольшим опытом во фронтенде. Примерно понимаю, как работает JS/браузер, методом тыка могу сверстать небольшой блок/страничку, знаком с Bootstrap и еще парой CSS фреймворков (или как они называются).
Настали тяжелые времена и я захотел научиться дизайнить, верстать и разрабатывать приятные и адекватные веб страницы. Хочу понять за грид системы, за флексы, за то, как вообще нормальные люди компануют на странице контент, нужен ли бутстрап или все на коленке грид системы лепят и вот все такое.
Все мои попытки что-то задизайнить в итоге скатываются в сторону сайта из 2009 года или лэндингу стартапа, но как сделать что-то информативное, легкое, красивое и современное я не понимаю.
Есть что-то под рукой, что можно почитать, чтобы я мог научиться дизайнить приятные страницы и реализовывать их с помощью Html/CSS? Было бы классно еще почитать что-то базовое по UX, чтобы делать не по интуиции, а по уму.
Честно говоря, сколько не искал хороших курсов по UX/UI дизайну приложений для разработчиков - так ничего толкового и не смог найти.
Но из неплохих ресурсов могу посоветовать:
Выработал для себя следующий подход, когда в команде нет dedicated UX/UI дизайнера:
В итоге из плагиата и заемных кирпичиков что-нибудь да собирается. Ну и с каждой итерацией получается все лучше и лучше.
Плюс, конечно же, сильно помогает опыт тесной работы с профессиональными дизайнерами.
Расскажу, что помогло и помогает лично мне:
Поставил https://usepanda.com на первую вкладку хрома – каждый день смотрю дизайн-работы с behance и dribbble.
Крутые работы с беханса сохраняю в тематические коллекции: https://www.behance.net/gambala/collections – при работе над проектами пользуюсь как референсами.
Просто пользуясь сервисами в сети, подмечаю крутые решения и цветовые схемы, и переношу в свои проекты (закрепляю на практике).
Читаю теорию, на https://bureau.ru/school/designers/27aug2018/ есть раздел «Системные требования», там перечислены здоровские книги, я прочел «Настольная книга газетного дизайнера» от и до, и пробежался по остальным, которые мог достать в pdf (не люблю бумагу).
В том же «Бюро» есть раздел «Советы» с вопросами и ответами, тоже много годноты
Копирайтинг сюда же. Инфостиль, микротексты.
Есть кайфовая техника оптических струн, https://medium.com/@SkillstoreJack/1-6d08aaac132b – эта и последующие статьи
В верстке мне сильно помогает БЭМ для сложных компонентов и атомарные utility-классы для набрасывания дизайна. Атомарные классы долгое время использовал самописные (fz-12px, mb-30px, fw-700), полгода назад перешел на Tailwind CSS, это оч сильно ускорило мне процесс дизайна и верстки.
CSS-фреймворки не использую. Хотя первые несколько лет плотно сидел на Twitter Bootstrap'е. У него (и у многих других css-фреймворков), есть нерешаемые даже костылями косяки с каскадностью стилей (стилизация вложенных тегов ul li a, !important стили в utility классах), с этим невозможно работать в серьезных проектах.
Еще один минус традиционных css-фреймворков – они слишком высокоуровневые в плане стиля. Бутстрап дает хороший набор компонентов, но что, если его недостаточно? Ок, нужно всего лишь создать стили под новые уникальные компоненты. Но какие в этих компонентах использовать отступы, размеры шрифтов, цвета? Бутстрап не дает явных правил дизайн-системы. В этом еще одно выгодное отличие Tailwind CSS – он дает набор правил по типографике (модульная сетка), цветам (хорошая гибкая палитра), отступам и высотам (относительные в rem, хорошо для современной адаптивной типографики).
Я тоже бекендер, верстать умел только таблицами, и то только десктопные сайты. Потом друзья подсказали небольшой курс, который можно за недельку пройти. Он даст базовые понимания как работают блоки, как их размещать на страницу и как их подстраивать под экран пользователя.
Ссылочка: https://www.internetingishard.com/html-and-css/
Это лучшее что есть, а больше и не нужно.
https://bespoyasov.ru/front-not-pain/
http://webmasters.teamdev.com/
https://frontendmasters.com/books/front-end-handbook/2019/
https://andreasbm.github.io/web-skills/?compact
Hard skills:
Freecodecamp.org + проекты оттуда выполнить
Soft / Design / насмотренность:
http://maximilyahov.ru/trenazher/
(и прочитать «Облик книги» Чихольда)
Вот тут проходить, пока не прокачается
Когда то давно я думал, что буду UX/UI делать. В то время прочитал много книг и больше других про дизайн запомнилась «Дизайн для недизайнеров» Робина Уильямса. Считаю лучшей книгой для новичков. После неё перестаешь косячить в очевидных местах
Просто брать и копировать понравившееся пиксель в пиксель. Со всеми аспектами. Скопировал одно - пробовать второе. И так, пока не набьешь руку.
Просто скриншот в одной половине экрана, а в другой - твой дизайн (удобно еще включить полупрозрачность и фигачить поверх). Добиваешься идентичности. Сейчас это модно/удобно делать в figma.
Как научишься быстро копировать сам дизайн - можно продолжить это упражнение в коде, только теперь сравнивать с картинкой готовую верстку.
Все нужное освоишь по ходу.
Кто-то скажет, зачем промежуточный шаг в виде дизайна? Дело в том, что иначе ты не поймешь, по каким принципам и из каких блоков строится макет. Что именно делает его красивым/не красивым. И твой визуальный максимум будет - сайты из 90х. Т.е. технологически адекватно, но безблагодатно.
Совет на втором шаге. Попробуй сделать верстку сам, параллельно отдав это же какому-нибудь адекватному фрилансеру с опытом. Потом оцени то, что сделал он и ты. Я таким образом очень быстро освоил реакт, так как ты видишь - как бы то что ты делаешь, сделал бы опытный человек, перенимаешь приемы и начинаешь использовать.
по хорошему нужно шарить за следующие штуки
вроде усе...пиши если нужна будет консультация
p.s мне после 7 лет во фронте дико хочется в бэк. а кому то наоборот. иронично))
p.s.s ну и про nodejs не забудь) без сейчас особо ничего не сделать. ну точнее можно сделать, но руками, а это раз в 50 дольше
У HTML Academy неплохие интерактивные курсы по вёрстке. Можно въехать в какие-то топики, по которым нет понимания.
Если вопрос больше про "задизайнить", то тут только развивать насмотренность. Вы свои машин лёрнинги так же обучаете: показываете говно и говорите, что это говно, показываете не говно, и говорите, что это не говно. Просто пытайся понять, что говно, а что не говно: смотри на понравившиеся тебе сайты, пробуй их сверстать на чём-нибудь самостоятельно. Можно ещё бизнес-линч Лебедева смотреть, там он как правило сайты обозревает, но бывает и айдентику всякую, промдизайн тоже, лишним не будет.
UX в современном понимании — это больше про фокус-группы и критерии Дикки-Фуллера и Льюнг-Бокса, тебе это не надо с вероятностью 95% и p-value < 0.05))) Достаточно просто подумать, как пользователь будет пользоваться твоим продуктом и как ему в этом помочь. А это можно делать на уровне интуиции и пресловутой насмотренности.
Насчет дизайна правильно уже написали, что это приходит только со временем, когда насмотрелся на разные примеры или сервисы.
Для совсем базового старта может подойти HTML Academy, может правда бесить, что они совсем с тобой как с маленьким общаются, но теорию дают отличную. Если брать какие-то отдельные курсы по темам например про флексбокс или про гриды, то хорошо могут зайти небольшие курсы от WesBos – CSS Grid и What is the flexbox?. Еще у него же можно посмотреть какие-то другие несложные курсы связанные с JS или платные уже углубленные связанные с React, Node.js и т.д.
Про CSS могу только посоветовать отличную книгу Lea Veru – CSS Secrets
Если захочется переходить к фреймворкам, то обычно у них самих можно найти полезные ссылки, например у React
С точки зрения UX тут на самом деле все очень просто, UX это когда приятно и удобно пользоваться. Т.к ссылки на статьи уже посоветовали, то я посоветую книгу Не заставляйте меня думать – небольшая книжка, но показывающая примеры хорошего юзаблити
Могу посоветовать книгу https://refactoringui.com/book/
Для девелопера как раз.
У меня сейчас тоже стоит задача нарисовать гуя, но палехчи поскольку есть готовый макет. Но все равно во фронте я не шибко силен поэтому все эти цсс штуки все ещё тёмный лес.
Вообще современные технологии это такое на мой взгляд дерево скиллов а-ля Path of exile (кто не в курсе посмотрите :)) В отдельности каждая нужная технология спокойно изучается за пару вечеров, но при этом их столько что без минимального гайда тебе даже не понять какие из них тебе нужны.
Сижу и переношу комментарии в сохраненные.
Ох, мне тоже интересно, но пока не очень нужно было. Когда потребовалось сделать страничку, просто использовал Tilda. Получилось офигенно и за два часа.
Интересно узнать, что думают профильные специалисты про Flutter в вебе. Пробовал под iOS приложеньку накидать — понравилось. Только скобок — как в Lisp))));)););
Tailwind CSS FTW!
Из того, с чем сталкивался - HTML Academy и FreeCodeCamp, но их тут уже озвучивали.