На каком движке делают крутые лендинги?

Question

[webov_web]

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

Читал в интернете про какие-то движки специальные для красивых презентационных лендингов. Что это за движки такие?

Подскажите, в какую сторону гуглить. Скиньте какую-нибудь полезную информацию именно в техническом плане. Как лендинги правильно верстать? Что за движки бывают? Может, Вы знаете крутые примеры лендингов или агенств, которые занимаются созданием лендингов? Очень интересно.

И если не сложно - напишите свой ТОП ошибок, при создании лендинга (или вообще при вёрстке), которые Вам приходилось совершать.

Answer 1

[Александр Аксентьев]

html css js - любой степени крутости можно сделать.

Comments

[webov_web]

Александр Аксентьев ну да, это понятно. Не понятно в какую сторону двигаться, чтобы не разрабатывать всё с нуля каждый раз, и чтобы, при этом, не делать шаблонно. Крупные студии и фрилансеры ведь не делают каждый раз с нуля. Может есть какие-то особенные фреймворки или ещё что-нибудь?

[Александр Аксентьев]

webov_web, крутые делают с нуля.

Лендинг это не супер большой и сложный проект который невозможно каждый раз с нуля делать.

Для него только сетку css можно брать, остальное как правило уникальное.
Если говорить про лендинги которые делают дизайнеры, а не "скачал бутстрап, сейчас наваляю что-нибудь супер крутое".

Дизайн не в браузере и не редакторе кода делается.

[Mikhail Derkach]

webov_web, ты сначала напиши с нуля n лендингов, чтобы изучить элементы и их свойства, синтаксис языка, базовые правила и принципы
и я тебе гарантирую, в процессе этого ты выработаешь свой собственный шаблон.

Не стоит бежать поперед батьки в пекло, все начинают с начала, а не с бутстрапа. У тебя поэтому и "не совсем то получается", потому как ты не можешь пользоваться всеми возможностями. И наверняка тебе бутстрап может оказаться попросту ненужен

Answer 2

[Mikhail Derkach]

Крутые лендинги делаются руками. Нет ничего сложного в освоении html5+css3+js. А применяя flexbox и/или grid намного облегчают расположение элементов и экономят время, но до этого нужно сперва дойти
А крупные агенства наверняка используют собственные движки.
Топ ошибок?
1) Использовал Adobe Muse
2) Спешка и невнимательность

Answer 3

[Robert Bl]

Самая главная ошибка это использовать софт вроде Adobe Muse. Потом эти люди идут на фриланс биржу и хотят, чтобы им сделали этот "кусок" кода адаптивным.

Answer 4

[kulaeff]

А что значит крутой лендинг? Дизайн или какие-то красивые анимации, переходы, эффекты? Для первого есть масса ресурсов, где можно почерпнуть идеи - dribbble.com, behance.net, pinterest.com. deviantart.com и еще куча всего. Для второго - каких-то специальных движков нет и быть, в принципе, не может. Ибо крутой лендинг - вещь довольно эксклюзивная, творческая, ручной работы так сказать. Нужно знать стандартный набор html/css/js, а также все, что касается анимаций: transition, transform, canvas, webgl, tween. Для каких-то совсем крутых эффектов, нужно знать математику, геометрию, и даже физику.

Comments

[webov_web]

kulaeff webgl - это 3d-анимация? tween - это просто анимация или что-то в этом роде, как я понял. А canvas на javascript - это для рисования на странице или как-то так? Не правильно я понял?

[kulaeff]

webov_web, да, webgl - это 3d. tween - это плавное изменение какого-то значения с применением ease-функции. Например, библиотека GSAP и ее компоненты TweenLite, TweenMax и прочие, часто используются при сложной анимации. Canvas для рисования (также можно рисовать покадрово, используя requestAnimationFrame). Можно еще SVG упомянуть, на нем тоже можно рисовать сложные штуки и анимировать их.

[webov_web]

kulaeff вот оно что. Может быть, Вы знаете крутой пример использования 3d-анимации на сайте? Не могу представить как это выглядит, если честно.

[kulaeff]

webov_web, вот тут https://threejs.org/ куча реальных примеров.

[webov_web]

kulaeff, понял. Спасибо за ответ!

Answer 5

[Alexandr Alexandrov]

Проще и быстрее взять за основу bootstrap, uikit, foundation, material base или что там ещё из сборок есть и делать на основе. Не помешает прошерстить themeforest, подглядеть как ребята делают, компануют блоки, какие используют эффекты и скрипты. Со временем сформируется своё представление - что нужно, а что нет; как лучше сделать, а как быстрее.