Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

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

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

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

👍ПодобаєтьсяСподобалось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

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

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

с нуля красиво, адаптивно, по последним трендам

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

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

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

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

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

.

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

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

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

Аналог чого?

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

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

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

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

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

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

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

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

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

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

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

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

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

Это именно про дизайн, верстку, программирование.

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

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

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

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

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

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

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

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

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

флексов и гридов

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

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

создать индивидуальный проект под себя?

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

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

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

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

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

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

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

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

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

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

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

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

Да.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Особенно на том поприще, где большинство делает откровенно плохо.

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

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

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

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

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