Как научиться верстать и реализовывать современные веб-приложения?  Публичный пост

Ситуация: я — бэкенд разработчик с небольшим опытом во фронтенде. Примерно понимаю, как работает JS/браузер, методом тыка могу сверстать небольшой блок/страничку, знаком с Bootstrap и еще парой CSS фреймворков (или как они называются).

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

Все мои попытки что-то задизайнить в итоге скатываются в сторону сайта из 2009 года или лэндингу стартапа, но как сделать что-то информативное, легкое, красивое и современное я не понимаю.

Есть что-то под рукой, что можно почитать, чтобы я мог научиться дизайнить приятные страницы и реализовывать их с помощью Html/CSS? Было бы классно еще почитать что-то базовое по UX, чтобы делать не по интуиции, а по уму.

31 комментарий 👇
Sergey Khomyuk, Sr. Front-End Developer 7 июня 2020

Честно говоря, сколько не искал хороших курсов по UX/UI дизайну приложений для разработчиков - так ничего толкового и не смог найти.

Но из неплохих ресурсов могу посоветовать:

  • Designmodo - статьи, вдохновение, Flat UI.
  • Smashing Magazine - статьи.
  • CSS Tricks - статьи, примеры.
  • Behance - вдохновение.
  • Codrops - примеры.
  • Sidebar - 5 ссылок о дизайне каждый день.
  • WrapBootstrap - готовые шаблоны.
  • Semantic UI - неплохая альтернатива Bootstrap (куда больше компонент из коробки).
  • BEM - методология верстки.

Выработал для себя следующий подход, когда в команде нет dedicated UX/UI дизайнера:

  • Ищу вдохновение в виде похожих по тематике/структуре приложений на Behance.
  • Беру пару-тройку шаблонов на WrapBootstrap и выбираю оттуда отдельные блоки.
  • Прошу сторонних людей оценить удобство приложения с точки зрения UX.

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

Великолепно, спасибо большое, картинка начинает складываться!

  Развернуть 1 комментарий
Vitaliy Emeliyantsev, Фулстек веб-разработчик 7 июня 2020

Расскажу, что помогло и помогает лично мне:

  1. Поставил https://usepanda.com на первую вкладку хрома – каждый день смотрю дизайн-работы с behance и dribbble.

  2. Крутые работы с беханса сохраняю в тематические коллекции: https://www.behance.net/gambala/collections – при работе над проектами пользуюсь как референсами.

  3. Просто пользуясь сервисами в сети, подмечаю крутые решения и цветовые схемы, и переношу в свои проекты (закрепляю на практике).

  4. Читаю теорию, на https://bureau.ru/school/designers/27aug2018/ есть раздел «Системные требования», там перечислены здоровские книги, я прочел «Настольная книга газетного дизайнера» от и до, и пробежался по остальным, которые мог достать в pdf (не люблю бумагу).

  5. В том же «Бюро» есть раздел «Советы» с вопросами и ответами, тоже много годноты

  6. Копирайтинг сюда же. Инфостиль, микротексты.

  7. Есть кайфовая техника оптических струн, https://medium.com/@SkillstoreJack/1-6d08aaac132b – эта и последующие статьи

  8. В верстке мне сильно помогает БЭМ для сложных компонентов и атомарные utility-классы для набрасывания дизайна. Атомарные классы долгое время использовал самописные (fz-12px, mb-30px, fw-700), полгода назад перешел на Tailwind CSS, это оч сильно ускорило мне процесс дизайна и верстки.

  9. CSS-фреймворки не использую. Хотя первые несколько лет плотно сидел на Twitter Bootstrap'е. У него (и у многих других css-фреймворков), есть нерешаемые даже костылями косяки с каскадностью стилей (стилизация вложенных тегов ul li a, !important стили в utility классах), с этим невозможно работать в серьезных проектах.

  10. Еще один минус традиционных css-фреймворков – они слишком высокоуровневые в плане стиля. Бутстрап дает хороший набор компонентов, но что, если его недостаточно? Ок, нужно всего лишь создать стили под новые уникальные компоненты. Но какие в этих компонентах использовать отступы, размеры шрифтов, цвета? Бутстрап не дает явных правил дизайн-системы. В этом еще одно выгодное отличие Tailwind CSS – он дает набор правил по типографике (модульная сетка), цветам (хорошая гибкая палитра), отступам и высотам (относительные в rem, хорошо для современной адаптивной типографики).

  Развернуть 1 комментарий
Богдан Стефанюк, Full-Stack developer (.NET) 7 июня 2020

Я тоже бекендер, верстать умел только таблицами, и то только десктопные сайты. Потом друзья подсказали небольшой курс, который можно за недельку пройти. Он даст базовые понимания как работают блоки, как их размещать на страницу и как их подстраивать под экран пользователя.

Ссылочка: https://www.internetingishard.com/html-and-css/

  Развернуть 1 комментарий

Это отлично, спасибо, я сейчас быстренько полистал и частично там есть темы, которые мне нужны. Фишка в том, что я периодически делаю что-то с версткой, плюс на работе частенько поглядываю в то, что делают фронтендеры, потому большинство фишек типа "как работают блоки и как подстраивать под экран" я знаю, но орудую ими как макака палкой.

Это в целом выглядит, как хорошее саммари для начинающих, в любом случае пригодится, спасибо!

  Развернуть 1 комментарий
Valery, Фронтовик-джаваскриптизёр 7 июня 2020
  Развернуть 1 комментарий
Kirill Malev, Data chéf @ Data Kitchen 7 июня 2020

Hard skills:

Freecodecamp.org + проекты оттуда выполнить

Soft / Design / насмотренность:

  1. раз, базовое, верстка:

http://maximilyahov.ru/trenazher/

(и прочитать «Облик книги» Чихольда)

  1. https://cantunsee.space

Вот тут проходить, пока не прокачается

  Развернуть 1 комментарий

Отличные тренажеры, правда во второй ссылке не круто, что не объясняют, почему так лучше, т.к. иногда выглядит как вкусовщина (скругленные углы или прямые, например).

Спасибо!

  Развернуть 1 комментарий

@APilosian, сейчас глянул, и там больше про inconsistency решений (типа если у тебя на одной плашке углы круглые, почему они на другой такой же прямые; или почему ENABLE капсом, а Camera — нет). Алсо, там объясняют, что не так, но то, что ты это не увидел — косяк UX-дизайна)))

  Развернуть 1 комментарий

@takheer, не, я увидел, что справа снизу от картинок отбъясняют, что не так, но не говорят, почему должно быть так. Одна из "задач" там была просто Search инпут, ничем не отличаются, один с круглыми углами, второй с прямыми, дескрипшн был "Round corners" и все, но чем это лучше и почему так ультимативно -- хз

  Развернуть 1 комментарий

ахах, у ильяхова я стабильно всегда выбираю неправильный вариант

  Развернуть 1 комментарий

@APilosian, а, ну это да. Вообще, есть в вёрстке какие-то базовые правила, типа ширину текста лучше не делать больше 80 символов или что кнопкам и инпутам лучше скруглять углы, но почему так — сложно навскидку вспомнить. Обычно отвечаю, что так привычнее пользователям, но откуда я это знаю — не говорю. Вот современный UX-дизайн примерно этим и занимается — собирает фокус-группу, на ней тестирует фичи и статистически доказывает, что круглые углы лучше, чем некруглые

  Развернуть 1 комментарий

по хорошему нужно шарить за следующие штуки

  1. html и dom. единственное что могу тут советовать - читать гайды на mdn (более человечные) и спеку whatwg (официальная спека все такое). семантика, микроразметка, a11y и вот это все)
  2. css - либо mdn гайды либо w3c спеки. но помни что чистый css уже не норм, и тебе еще надо будет шарить за sass/less/stylus и за postcss с его модулями, autoprefixer. есть еще всякие штуки, но это самые популярные. и еще не забудь что это просто css, а есть еще css-in-js. тут уже от окружения зависит. в react это styled-components например. и не забудь про адаптивность
  3. js. тут я думаю тебе более менее понятно что к чему. но помни что чистый js тоже особо никто не пишет. посему надо еще научиться варить всякие webpack/rollup/babel и т.д. ну и про typescript тоже нужно не забыть.
  4. еще неплохо потратить время и научиться варить такие вещи как storybook/styleguidist.
  5. svg - это подмножество xml для описания векторной графики. доя всяких красивостей/графиков нужная тема. и просто экспортировать графику из фигмы/иллюстратора порой недостаточно. так что рекомендую
  6. webgl + canvas. если ударишься в графику то это необходимая штука. но это не векторная графика как svg.
  7. фреймворки и библиотеки и их окружение. react/angular/vue и т.д
  8. тесты. сейчас народ jest юзает в основном

вроде усе...пиши если нужна будет консультация

p.s мне после 7 лет во фронте дико хочется в бэк. а кому то наоборот. иронично))
p.s.s ну и про nodejs не забудь) без сейчас особо ничего не сделать. ну точнее можно сделать, но руками, а это раз в 50 дольше

  Развернуть 1 комментарий

Спасибо, что расписал про технический стек фронта, в целом примерно так, как я и это и представлял в голове.

А для чего фронту нода?

  Развернуть 1 комментарий

@APilosian, для того чтобы юзать всякие билдеры, девсерверы и т.д. Той же джавой не соберешь react приложение (ну точнее вроде как можно но это сродни использованиясковородки для раскалывания орехов)

  Развернуть 1 комментарий

@k0shkins, а, понял, спасибо

  Развернуть 1 комментарий

Когда то давно я думал, что буду UX/UI делать. В то время прочитал много книг и больше других про дизайн запомнилась «Дизайн для недизайнеров» Робина Уильямса. Считаю лучшей книгой для новичков. После неё перестаешь косячить в очевидных местах

  Развернуть 1 комментарий

У HTML Academy неплохие интерактивные курсы по вёрстке. Можно въехать в какие-то топики, по которым нет понимания.

  Развернуть 1 комментарий
Gleb Kudriavtcev, Руководитель продуктов 7 июня 2020

Просто брать и копировать понравившееся пиксель в пиксель. Со всеми аспектами. Скопировал одно - пробовать второе. И так, пока не набьешь руку.

Просто скриншот в одной половине экрана, а в другой - твой дизайн (удобно еще включить полупрозрачность и фигачить поверх). Добиваешься идентичности. Сейчас это модно/удобно делать в figma.
Как научишься быстро копировать сам дизайн - можно продолжить это упражнение в коде, только теперь сравнивать с картинкой готовую верстку.

Все нужное освоишь по ходу.

Кто-то скажет, зачем промежуточный шаг в виде дизайна? Дело в том, что иначе ты не поймешь, по каким принципам и из каких блоков строится макет. Что именно делает его красивым/не красивым. И твой визуальный максимум будет - сайты из 90х. Т.е. технологически адекватно, но безблагодатно.

Совет на втором шаге. Попробуй сделать верстку сам, параллельно отдав это же какому-нибудь адекватному фрилансеру с опытом. Потом оцени то, что сделал он и ты. Я таким образом очень быстро освоил реакт, так как ты видишь - как бы то что ты делаешь, сделал бы опытный человек, перенимаешь приемы и начинаешь использовать.

  Развернуть 1 комментарий
Anton Kushnikov, Bullshit Handling Engineer 7 июня 2020

Если вопрос больше про "задизайнить", то тут только развивать насмотренность. Вы свои машин лёрнинги так же обучаете: показываете говно и говорите, что это говно, показываете не говно, и говорите, что это не говно. Просто пытайся понять, что говно, а что не говно: смотри на понравившиеся тебе сайты, пробуй их сверстать на чём-нибудь самостоятельно. Можно ещё бизнес-линч Лебедева смотреть, там он как правило сайты обозревает, но бывает и айдентику всякую, промдизайн тоже, лишним не будет.

UX в современном понимании — это больше про фокус-группы и критерии Дикки-Фуллера и Льюнг-Бокса, тебе это не надо с вероятностью 95% и p-value < 0.05))) Достаточно просто подумать, как пользователь будет пользоваться твоим продуктом и как ему в этом помочь. А это можно делать на уровне интуиции и пресловутой насмотренности.

  Развернуть 1 комментарий
Egor Ogarkov, Senior Software Engineer 7 июня 2020

Насчет дизайна правильно уже написали, что это приходит только со временем, когда насмотрелся на разные примеры или сервисы.

Для совсем базового старта может подойти HTML Academy, может правда бесить, что они совсем с тобой как с маленьким общаются, но теорию дают отличную. Если брать какие-то отдельные курсы по темам например про флексбокс или про гриды, то хорошо могут зайти небольшие курсы от WesBos – CSS Grid и What is the flexbox?. Еще у него же можно посмотреть какие-то другие несложные курсы связанные с JS или платные уже углубленные связанные с React, Node.js и т.д.
Про CSS могу только посоветовать отличную книгу Lea Veru – CSS Secrets

Если захочется переходить к фреймворкам, то обычно у них самих можно найти полезные ссылки, например у React

С точки зрения UX тут на самом деле все очень просто, UX это когда приятно и удобно пользоваться. Т.к ссылки на статьи уже посоветовали, то я посоветую книгу Не заставляйте меня думать – небольшая книжка, но показывающая примеры хорошего юзаблити

  Развернуть 1 комментарий

Отлично, большое спасибо за книжки. По-сути с JS фреймворками проблемы нет, всё знакомо уже, а вот всякие высокие материи — тяжело.

  Развернуть 1 комментарий
Pavlo Malitov, javaскриптонит 7 июня 2020

Могу посоветовать книгу https://refactoringui.com/book/

Для девелопера как раз.

  Развернуть 1 комментарий

“I know this looks terrible, but I have no idea why.”

Описание выглядит ровно как то, что нужно, спасибо!

  Развернуть 1 комментарий

У меня сейчас тоже стоит задача нарисовать гуя, но палехчи поскольку есть готовый макет. Но все равно во фронте я не шибко силен поэтому все эти цсс штуки все ещё тёмный лес.
Вообще современные технологии это такое на мой взгляд дерево скиллов а-ля Path of exile (кто не в курсе посмотрите :)) В отдельности каждая нужная технология спокойно изучается за пару вечеров, но при этом их столько что без минимального гайда тебе даже не понять какие из них тебе нужны.

  Развернуть 1 комментарий
Dmitry Yemelin, Senior Application Support Analyst 10 июня 2020

Сижу и переношу комментарии в сохраненные.

  Развернуть 1 комментарий

Ох, мне тоже интересно, но пока не очень нужно было. Когда потребовалось сделать страничку, просто использовал Tilda. Получилось офигенно и за два часа.

Интересно узнать, что думают профильные специалисты про Flutter в вебе. Пробовал под iOS приложеньку накидать — понравилось. Только скобок — как в Lisp))));)););

  Развернуть 1 комментарий

Тильда — это да, но хочется самому все осознавать, почему в тильде именно так, а не иначе, почему шаблоны постороены так, почему такие шрифты и так далее. Ну и тильда, честно говоря, периодически багает и выглядит странно.

  Развернуть 1 комментарий

Не совсем профильный специалист во Flutter, но всё же. Flutter for Web ещё в бете, но знакомые пишут, что для несложных проектов уже вполне себе годно, и в последних релизах пофиксили много проблем с той же скоростью и т.п. Но тем не менее своих issues ещё хватает (например автодополнение для полей и т.п.). Но думаю, когда отполируют в ближайшие полгода-год, то совсем конфетка будет.

  Развернуть 1 комментарий

Tailwind CSS FTW!

  Развернуть 1 комментарий
Дмитрий Фирсов, Координатор отдела продаж 7 июня 2020

Из того, с чем сталкивался - HTML Academy и FreeCodeCamp, но их тут уже озвучивали.

  Развернуть 1 комментарий

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб