Вхід і реєстрація
Розробка · 11 листопада 2021, 11:26 1224
Aurus A

Верстали ли вы когда-нибудь сайт для себя без дизайн-макета, то есть, из головы?"

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Здравствуйте.
Есть проблема. Может, кто сталкивался?
Хочу создать сайт для музыкальной школы с нуля, и frontend и backend.
Конечно же, начинать нужно с вёрстки, но вопрос в том, как сверстать сайт с нуля, если ты не дизайнер?
Я очень долго искал готовые шаблоны, чтобы как-то вдохновиться (ну и в надежде, что найду прямо то, что нужно) на themeforest, templatemonster и просто в Google.
Все они тяжеловесные, с прелоадерами и прочими штуками, которые придётся выкинуть.
А мне очень хотелось бы сверстать с нуля красиво, адаптивно, по последним трендам и без лишнего кода и конкретно под данную школу.
Как вы решаете эту проблему, когда хотите создать индивидуальный проект под себя? Вертаете сразу из головы и всё красиво?
Поделитесь, пожалуйста, советами.

Теми: back-end, design, Front-end, веб-разработка
👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Symonenko Volodymyr software engineer 18.11.2021 06:41

Ви просто не розумієте що таке фронтенд, ви не в змозі сверстати 100+ макетів під 100+ екранів, беріть любий компонентний фреймворк (рекомендую vuetify) і вперед. І що таке юзер інтерфейс ви теж не розумієте — він повинен бути уніфікований. Викинути прелоад це взагалі смішно.
Ви наче начитались «трушних» бекендерів.

Відповісти
Підтримати
Oлександр V 18.11.2021 07:04

Прелоадер на сторінку з 1кб тексту...
O tempora, o mores

Відповісти
Підтримати
Symonenko Volodymyr
Symonenko Volodymyr software engineer 18.11.2021 07:27
с нуля красиво, адаптивно, по последним трендам

наче розмови про г*вно мамонта не було

сторінку з 1кб тексту

аналог в студію

Відповісти
Підтримати
Oлександр V
Oлександр V 18.11.2021 07:39

imo сторінки яким потрібен прелоадер просто заради прелоадера це

г*вно мамонта

.

аналог в студію

Аналог чого?
1кб тексту === 1кб контенту === 1кб тексту який люди читають

Відповісти
Підтримати
Symonenko Volodymyr
Symonenko Volodymyr software engineer 18.11.2021 07:42

Окей який фідбек дати юзеру?

Аналог чого?

Зараз будемо грати в гру а про що торік?!

Відповісти
Підтримати
Oлександр V
Volodymyr Yefremov Laravel/Vue.js dev в - - - 14.11.2021 19:33

Ищу готовый макет.
Можно найти довольно симпатичные и легкие, например на основе bulma, tailwind.
Даже всзять за прообраз понравивщийся сайт.

Відповісти
Підтримати
Віталій Web developer в vioma GmbH 12.11.2021 03:12

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

Другое дело что вёрстка сейчас как по мне не такое уж и простое занятие, если делать правильно и качественно. Если 15 лет назад я свободно и программировал и мог сверстать что угодно на таблицах, то 10 лет назад я уже не всё, но многое мог сделать на дивах и флоатах, а последнее время с приходом флексов и гридов и не знаю даже чего ещё приходится уже держать для этого специально обученного человека.

Відповісти
Підтримати
Aurus A 12.11.2021 09:39

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

Відповісти
Підтримати
Віталій
Vitaliy Siroshtan Designer 12.11.2021 09:55

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

Відповісти
Підтримати
Aurus A
Aurus A 12.11.2021 10:23

То есть, получается, что если работать на себя, делая сайты под ключ, нужно осваивать и дизайн, и вёрстку, и программирование. Интересно, такие люди существуют?

Відповісти
Підтримати
Vitaliy Siroshtan
Vitaliy Siroshtan Designer 12.11.2021 16:41

Ну, вон, Паша Дуров заявляет, что

Первые месяцы существования ВКонтакте я создавал весь код, графику, формулировки, интерфейсы, маркетинг. Совмещение позволило устранить расход времени на коммуникацию.

А вообще возможно вы просто не застали времена, когда термин «вебмастер» именно это и значил :)

Відповісти
Підтримати
Aurus A
Віталій Web developer в vioma GmbH 12.11.2021 22:56

Молодежь нынче пошла не та :)
Я читал соседнюю ветку, где парень программирует фронтденд, то ли на реакте, то ли на ангуляре, и он возмущался что его на собеседовании спросили а как вообще браузер отправляет на сервер обычную стандартную форму , что происходит когда юзер тыкает Submit. А он типа ж программист, откуда ему такое знать, и вообще у него всё JSON’ом передается.

А мне сейчас дико такое слышать, когда люди занимаются фронтендом, но понятия не имеют как вообще обычный html тег form работает. Вот до чего фреймворки доводят.

Відповісти
Підтримати
Vitaliy Siroshtan
Anton Izrailtyanko 13.11.2021 13:52

Вы про Full-Stack когда-нибудь слышали? Это именно про дизайн, верстку, программирование.
HTML, CSS, JS, PHP, SQL, и еще куча всего, что вмещается у сапиенса в голове. Даже сервера сами поднимают :)
Удивитесь, но существуют.

Відповісти
Підтримати
Aurus A
Volodymyr Yefremov Laravel/Vue.js dev в - - - 14.11.2021 19:37
Это именно про дизайн, верстку, программирование.

наверно дизайн лучше бы отсюда (круга интересов фулстека) исключить :)
для дизайна все же нужно художественное видение, чего у большинства прогеров — не всегда есть...

Відповісти
Підтримати
Anton Izrailtyanko
Anton Izrailtyanko 14.11.2021 19:48

Согласен. Скорее имел ввиду верстку UI.
Дизайнеры иногда тоже такого понарисовывают, что с точки зрения юзабилити на голову не натянешь. Зато обворожительненько.

Так что модерирование полета фантизии дизайнера — это тоже фуллстек :)

Відповісти
Підтримати
Volodymyr Yefremov
Віталій Web developer в vioma GmbH 14.11.2021 21:47

Мне кажется что если лет 10-15 назад люди которые умели и вёрстку и программирование (Full Stack) — это было нормой, то сейчас это скорее исключение. Вёрстка очень сильно усложнилась. Появился зоопарк браузеров/девайсов, и если ранее нужно было просто делать вёрстку, и потом ещё допилить её для IE — то сейчас с одной стороны IE можно забыть как страшный сон, но появилась куча тонкостей связанная именно с мобильными устройствами (вёрстка то у нас адаптивная). И сейчас нишу IE занял айфон (моё личное мнение). Хорошо сделанная вёрстка нормально выглядит как на десктопе, так и на андроид телефоне, а дополнительно приходится её допиливать именно для айфонов, потому что под iOS есть особенности.

Вёрстка требует много усидчивости и внимательности к мелочам. А программистам мне кажется усидчивости для верстки и не хватает. У нас работает человек, который и дизайнер и верстальщик, и мне кажется именно это очень удобное объединение навыков, потому что когда он рисует — то сразу же понимает, можно будет это сверстать, или это лютый треш, из-за которого верстальщик будет потом дизайнера ненавидеть.

Відповісти
Підтримати
Anton Izrailtyanko
Anton Izrailtyanko 14.11.2021 22:09

Да. Дизайнер-верстальщик — это отличная комбинация. Но он получается и программист?
Потому что я слабо себе представляю современные шаблоны без js и ajax. Здесь уже знаний css и html не достаточно.

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

А Apple сами себе злобные буратины. С тех пор, как они похоронили Safari под винду, тестить сайты под их оси стало геморройно, поэтому большинство программистов, которые не владеют зоопарком яблок, просто пошли по приципу — когда заказчик отбагрепортит о проблемах с Сафари, тогда и буду разбираться. Подозреваю, что таких большинство.

С предвкушением жду того дня, когда юзеры будут использовать Сафари только для того, чтобы скачать Хром 🤣
Их демарш с webp вообще напряг всех. В то время как все браузеры много лет как добавили поддержку — Apple принципиально дула губки и заставляла придумывать костыли и танцы с бубном.

Відповісти
Підтримати
Віталій
Oлександр V 12.11.2021 18:11
флексов и гридов

прибрали необхідність в флоатах як інструмента для позиціонування блоків в респозітів дизайні
Тобто верста таблицями під три браузери === хелл
вестка флоатами === хардкор
флекси і гріди === нормал
boostrap === easy

Відповісти
Підтримати
Віталій
K Vadym 11.11.2021 20:06

Я бы взял готовый шаблон ( html+css) пусть даже платный (может они качественнее, но не факт) и к нему писал бы backend ( Laravel, Codeigniter, Cake Php, Django... да какой по душе или по легкости входа), и вообще б «красивым дизайном» не парился.
Что красиво мне, то ugly какой-то директрисе музшколы, запросто.
А еще проще — купить готовый прототип сделанный на том framework-е, который планируешь изучать, развернуть его, и допиливать, попутно разбираясьчто там и как....
Да можно попасть на «поделку», но кто пишет без багов вообще? :)

Відповісти
Підтримати
Oлександр V 11.11.2021 19:09
создать индивидуальный проект под себя?

Унікальність робиться не дизайном, а контентом
Дизайни, що мені найбільше сподобались були на просто хтмл без цсс і тим більше жс (для дизайну)

Вертаете сразу из головы и всё красиво?

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

Практичність, мінімалізм, flat design, material design, etc — дають розуміння, що треба
Красиво — ні
Тренди — не потрібні

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

Коли намалювали беріть getbootstrap.com в css вигляді і робіть те що намалювали на папірці
Коли зробили, читаєте
archive.vn/ejotd
stackoverflow.com/...​tstrap-class-names-on-htm
І перероблюйте на sass
Освойте як ставити npm на свою ос і як користуватись ним

Відповісти
Підтримати
Aurus A 11.11.2021 19:19

Огромное спасибо за развёрнутый ответ!

Відповісти
Підтримати
Oлександр V
Oлександр V 11.11.2021 19:54

Це були були банальності

основна порада —
Використовуйте тільки англомовні _текстові_ матеріали і на англійській робіть же запити

Якщо зовсім погано з англійською, то Yuriy Artyuh aka akella на yt

Відповісти
Підтримати
Aurus A
Олексій Пєніє 11.11.2021 16:38

Быстро, качественно, недорого — здесь, как вижу, хочешь супер-качественно, чтобы вот прямо лучше всего сущего. И разумеется, быстро. Ну ты понял.

Відповісти
Підтримати
Nobody 11.11.2021 13:39
Верстали ли вы когда-нибудь сайт для себя без дизайн-макета, то есть, из головы?"

Да.

Відповісти
Підтримати
Dmitri Zorin chief в self-director 11.11.2021 13:34

Судячи з поста і особливо:

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

Ви просто хочете навчитись верстати (можливо я Вас невірно зрозумів).
взагалі тут треба задатись питанням на чьому створюється сайт. Гадаю після довгого холівару і вибору кластерів та мега ДБ вибор зупиниться на ЦМС і повангую на вордпресі :))))
взагалі робіть бекенд, а фронт натягнете. якщо з дізайном не дуже або не хочеться витрачати багато часу або ... є багато ресурсів на кшталт темплейтмонтра та і його достатньо, виберіть там і доточить так як хочеться.

Відповісти
Підтримати
Aurus A 11.11.2021 14:06

Не хочу делать на CMS. Был опыт создания сайта на MODX (именно эта CMS мне нравится больше остальных). Изучаю сейчас Laravel. В перспективе — найти работу.
А для работы надо бы иметь свои проекты. Вот, пытаюсь.

Відповісти
Підтримати
Dmitri Zorin
Anatolii Medvedchuk BackEnd Web developper 11.11.2021 14:48

ну, тоді гуглити щось на тему «free psd site template», верстати самому і натягувати на Bootstrap або щось подібне

Відповісти
Підтримати
Aurus A
Dmitri Zorin chief в self-director 11.11.2021 16:59

якщо мета просто навчитись то одне, якщо зробити то варто подивитись на October (CMS написана на Laravel) і далі вже кастомити. (ІМХО)
Беріть готовий дизайн та доробляйте під себе або нарізайте та верстайте. навіть заскріншотити з того самого (наприклад) темплейтмонстра те що пасує або подобається , намалювати в Photoshop/GIMP/Illustrator/Fireworks/etc і вперед :) (для власних нескладних проектів багато хто робить схожим чином)

Відповісти
Підтримати
Aurus A
Aurus A 11.11.2021 17:03

Очень мало уроков и полноценных гайдов по October. Даже сказал бы, что их нет вовсе.
Да, есть, совсем-совсем простенькие сайтики, 5 вводных уроков и всё.
Знаю эту CMS, искал. Мне хочется найти «Сайт с нуля на October» от начала и до конца. К сожалению, такие есть на Laravel, но не на October.

Відповісти
Підтримати
Dmitri Zorin
Anatolii Medvedchuk BackEnd Web developper 11.11.2021 12:55

А яка мета створення сайту? Тут можуть бути різні варіанти.

Відповісти
Підтримати
Aurus A 11.11.2021 14:03

Цель — научиться и заодно помочь музыкальной школе, создав качественный и современный сайт.

Відповісти
Підтримати
Anatolii Medvedchuk
Олексій Пєніє 11.11.2021 16:43

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

Відповісти
Підтримати
Aurus A
Aurus A 11.11.2021 17:09

Отличный сарказм, честно.
Я бы хотел написать проект с нуля, сам, чтобы получше всё понять. Без тонн лишнего неиспользуемого кода CSS-кода, без bootstrap (ну или только сетку одну лишь из него вытянуть), с админкой (простой CRUD), да и всё.
Беда в том, что вижу кучу красивых сайтов или скринов сайтов, а в голове не могу понять, как именно мой сайт должен выглядеть. Хотелось бы, чтобы он был быстрым, простым и при этом красивым.

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 11.11.2021 17:21

Тебе без вариантов придётся использовать чужие наработки. Даже с простым CRUD ты сильно накособочишь с безопасностью, если будешь писать с нуля отсебятину.

Чтобы писать с нуля, нужен опыт. Сравнимый с теми, кто до тебя уже написал с нуля. Зачастую, сильно разделив труд на отдельные модули, и тем самым задействовав сотни и тысячи человек. На несколько лет. А тут такой ты, умеющий яухин, решил что всё сделаешь сам, да ещё и качественно.

Если бы было так просто, нам бы платили меньше дворников.

Відповісти
Підтримати
Aurus A
Vitaliy Siroshtan Designer 11.11.2021 22:30

Я бы советовал взять бутстрап (или другой удобный фреймворк) и с помощью него верстать, попутно разбираясь и отрезая лишнее, либо забивая на эти мнимые «тонны» css.
(сам верстаю из головы, но я дизайнер)

Відповісти
Підтримати
Aurus A
Aurus A 12.11.2021 09:42

Круто Вам! Вы — дизайнер.
У меня, вроде, есть вкус. Но когда я пытаюсь что-то у кого-то копировать, — получается фигня.
Пробовал как-то использовать css-фреймворк material design (не помню названия) и Господи! Какой же это ужас.

Відповісти
Підтримати
Vitaliy Siroshtan
Vitaliy Siroshtan Designer 12.11.2021 09:48

Да всё ужас, но надо компромис искать — уверен, вам понадобится уйма времени на основной функционал, грех терять его на оптимизацию и внутреннюю красоту css.

Более того, если [полезный] интерфейс не откровенно кривой, то всем плевать на дизайн.

Відповісти
Підтримати
Aurus A
Олексій Пєніє 12.11.2021 22:13

КЭП: 2 варианта:
1) Отказаться от затеи с ходу сделать хорошо то, что ты не умеешь делать и никогда не умел. Особенно на том поприще, где большинство делает откровенно плохо.
2) Взять готовые конструкторы и сделать на них. Попутно изучая, как что работает, и меняя только те части, в которых разобрался.

Відповісти
Підтримати
Aurus A
Volodymyr Yefremov Laravel/Vue.js dev в - - - 14.11.2021 19:53
Особенно на том поприще, где большинство делает откровенно плохо.

вот это вызывает какие-то смешанные чувства...

с одной стороны печально, что

большинство делает откровенно плохо.

с другой — значит я не в низу пищевой цепочки, а в тренде :)

Відповісти
Підтримати
Олексій Пєніє

Підписатись на коментарі

Не підписуватись
Скористайтесь акаунтом
×
з умовами використання сайту і політикою конфіденційності.