LINUX.ORG.RU

Как сделать макет сайта?

 , ,


0

1

Всем доброго вечерочка! Тут такое дело, хочу сделать сайт. Сам я строитель по профессии, так что это мне пока далековато, но постепенно учусь. Начал изучать html, уже простые странички получаются, статические правда. Прочитал, что еще понадобится минимум java script, чтоб можно было что-то вводить и сохранять. Это все понятно.

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

Сначала хотел сделать макет в разрешении 1920x1080 (как самое популярное), но потом вспомнил, что существуют десятки разрешений только у обычных мониторов (и не только прямоугольные, но и квадратные). А еще есть мобилы и планшеты... Это что же получается, придется создавать десятки макетов в Krita? Ведь сайт в 4:3 и 16:9 будет выглядеть по разному, а на мобилах вообще непонятно как будет, ничего не поместится в этот экранчик.

Есть ли инструмент в Krita, который позволит расположить элементы сайта не по пикселям, а по % относительно одной из сторон?

А еще в Krita есть специальный шаблон для дизайна «Веб-дизайн», но я не понял что на нем нарисовано и как с этим работать. :(

boris_delaet_site
() автор топика

да пока делайте 1 макет на 1080 пикселов по ширине, не мучайтесь. потом, если не надоест, сделаете отдельное оформление для мобил.

ещё вместо криты возьмите инкскейп или вовсе проприетарную фигму, в которой сейчас все делают.

то, что блоки сайта будут выровнены не по пикселям а про процентам, указывается в стилях css странички.

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

anonymous
()

По нужным разрешениям, ориентируйся на Bootstrap сетку.

И вместо Krita лучше использовать более подходящие для веб-дизайна инструменты, например Figma, оттуда и верстать проще будет.

neocrust ★★★★★
()

Не нужен никакой JS тебе, без него делай.

Макеты целых страниц вообще не нужны, нужно понимать что ты пытаешься сделать и макеты отдельных элементов.

На маленьких экранах проблема не только в том, что там места мало, но ещё и в том, что элементы управления должны быть хотя бы немного больше пальца.

И не забывай ещё что на мобильнике с одной стороны может быть шапка браузера с вкладками и адресом, а с другой стороны экранная клавиатура. И после такого сценария даже 2.4" экранчик покажется огромным.

Goury ★★★★★
()
Ответ на: комментарий от anonymous

да пока делайте 1 макет на 1080 пикселов по ширине, не мучайтесь. потом, если не надоест, сделаете отдельное оформление для мобил.

Да вот тоже думаю начать с простого, сделать один макет 1920x1080, как самый популярный формат. Раскидаю блоки и кнопочки, потом уже буду думать что с этим делать в других разрешениях.

ещё вместо криты возьмите инкскейп или вовсе проприетарную фигму, в которой сейчас все делают.

Как-то уже к Krita привык, долго осваивал кнопочки, и теперь вроде как понимаю где что находится...

то, что блоки сайта будут выровнены не по пикселям а про процентам, указывается в стилях css странички.

Про css уже знаю. Мне бы хотелось отмерять по % и в редакторе, когда буду макет переделывать в другие разрешения, чтоб не по пикселям отмерять, а по % экрана.

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

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

boris_delaet_site
() автор топика

Для макета бери ширину 1280 пикселей, это как бы минимум для десктопных и ноутбучных мониторов. Длина может быть любой, ибо прокрутка.

А для мобилок всё равно по-хорошему нужно отдельный дизайн делать.

Deleted
()
Ответ на: комментарий от Goury

Не нужен никакой JS тебе, без него делай.

А как делать, чтоб сайт был динамическим? Формы там, инфу принимал/отправлял, всякое делал.

На маленьких экранах проблема не только в том, что там места мало, но ещё и в том, что элементы управления должны быть хотя бы немного больше пальца.

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

И не забывай ещё что на мобильнике с одной стороны может быть шапка браузера с вкладками и адресом, а с другой стороны экранная клавиатура. И после такого сценария даже 2.4" экранчик покажется огромным.

А как можно протестировать свой сайт без смартфона? Их же миллион, смартфонов и разрешений, а у меня мобила древняя, сайты тормозят, даже не пользуюсь. Покупать новую не хочу, в инет с мобилы все-равно ходить не буду, но как-то же можно наверняка на обычном компе это тестить?

boris_delaet_site
() автор топика
Ответ на: комментарий от Deleted

А для мобилок всё равно по-хорошему нужно отдельный дизайн делать.

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

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

boris_delaet_site
() автор топика
Ответ на: комментарий от boris_delaet_site

как сайт определяет что человек зашел с мобилы или с домашнего компа?

По юзер-агенту вроде

Deleted
()

Для начального определения с размерами посмотрите CSS breakpoints и что такое CSS viewport units.

Далее, макеты можно уже подгонять под модельный ряд размеров + учет ориентации мобильных устройств + Responsive Design Mode.

anonymous
()
Ответ на: комментарий от boris_delaet_site

А вот еще непонятно, как сайт определяет что человек зашел с мобилы или с домашнего компа?

Вот, тебе аноним самый лучший совет дал «посмотрите CSS breakpoints и что такое CSS viewport units + Responsive Design Mode», большая часть вопросов про «сколько и каких дизайнов делать» сразу уйдёт.

vvn_black ★★★★★
()
Ответ на: комментарий от Deleted

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

boris_delaet_site
() автор топика
Ответ на: комментарий от boris_delaet_site

Такой сайт - это весьма сложная и амбициозная задача. Есть очень большая вероятность, что вы потратите кучу времени, а в конце будет разочарование:

* вариант 1: результат будет так себе, времени потрачено слишком много * вариант 2: результат будет хороший, но времни будет потрачено вообще столько, что стыдно будет весь ближайший год.

В эту ловушку попадают очень многие.

anonymous
()
Ответ на: комментарий от boris_delaet_site

Такой сайт - это весьма сложная и амбициозная задача. Есть очень большая вероятность, что вы потратите кучу времени, а в конце будет разочарование:

  • вариант 1: результат будет так себе, времени потрачено слишком много
  • вариант 2: результат будет хороший, но времни будет потрачено вообще столько, что стыдно будет весь ближайший год.

В эту ловушку попадают очень многие.

anonymous
()
Ответ на: комментарий от boris_delaet_site

Я бы посоветовал:

а) либо группу в контакте.

б) либо используя конструктор сайтов, типа https://ru.wix.com. (Есть и другие, конечно.)

anonymous
()
Ответ на: комментарий от vvn_black

Хотелось бы разобраться с нуля, а не использовать готовые решения. Пусть мой сайт будет и хуже поначалу, чем на готовом, но это будет мой сайт. :)

boris_delaet_site
() автор топика
Ответ на: комментарий от anonymous

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

boris_delaet_site
() автор топика
Ответ на: комментарий от boris_delaet_site

хотелось отмерять по % и в редакторе

в инкскейпе и фигме так можно.

А в чем именно принципиальность векторной графики? Это же всего лишь макет, мне его ни растягивать не придется, ни сжимать.

как раз-таки чего-нибудь растягивать и сжимать приходится частенько. а то ещё и поворачивать на не кратные 90° углы.

ну в крите ещё ладно, там векторка есть, хоть и не с самым удобным интерфейсом. но в целом, если делать полностью в растре, то неизбежно будет возникать мыло при масштабировании/повороте элементов; выравнивание объектов (слоёв), обычно в растровых редакторах неадекватное или вовсе отсутствует; чтобы что-то растровое перекрасить, приходится приседать с выделением, масками/альфаканалами; сама концепция списка слоёв вообще неудобная в работе, куда проще ткнуть мышкой в нужный объект, чем рыться в списке с зажопленными превьюшками...

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

а вообще, хороший дизайнер должен в совершенстве владеть и тем и другим и даже лучше ещё чем-нибудь третьим.

anonymous
()
Ответ на: комментарий от boris_delaet_site

Прислушайтесь к последним анонимным комменариям.

Чтобы получился самостоятельный приемлимый результат вам придётся освоить несколько направлений, так или иначе связанных с разработкой:

  • дизайн, самое простоя для освоения и самое сложное с точки зрения получения хорошего результата;
  • фронтенд, xml, html, css, JavaScript, jsx и фиг знает, что ещё всплывёт;
  • бэкенд, как минимум что-то одно из php, nodejs, python и т.п.;
  • базы данных;
  • всякое попутное в виде DNS, хостингов, веб-серверов и т.п.

Есть пути полегче.

vvn_black ★★★★★
()
Ответ на: комментарий от anonymous

как раз-таки чего-нибудь растягивать и сжимать приходится частенько. а то ещё и поворачивать на не кратные 90° углы.

Я думал об этом. Насчет поворота не знаю, если в Krita поворот элементов. Наверно должен где-то быть, как же без него. А почему в Krita поворот не на 90 градусов будет хуже, чем в Inkscape?

ну в крите ещё ладно, там векторка есть, хоть и не с самым удобным интерфейсом. но в целом, если делать полностью в растре, то неизбежно будет возникать мыло при масштабировании/повороте элементов; выравнивание объектов (слоёв), обычно в растровых редакторах неадекватное или вовсе отсутствует; чтобы что-то растровое перекрасить, приходится приседать с выделением, масками/альфаканалами; сама концепция списка слоёв вообще неудобная в работе, куда проще ткнуть мышкой в нужный объект, чем рыться в списке с зажопленными превьюшками...

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

boris_delaet_site
() автор топика
Ответ на: комментарий от vvn_black

Ну я никогда легких путей не искал. Надо, значит освоим. Я еще вначале прочитал, что нужно как минимум несколько языков программирования знать: html, java script, css, php... Хотя кто-то в этой теме говорит, что java script не нужен, а что вместо него тогда?

бэкенд, как минимум что-то одно из php, nodejs, python и т.п.;

А из этого что лучше выбрать для начинающего?

boris_delaet_site
() автор топика
Ответ на: комментарий от boris_delaet_site

https://habr.com/ru/post/445056/

Как пример первой ссылки из поиска. Там ссылки на площадки для обучения. Можно и самому по видосикам осваивать.

vvn_black ★★★★★
()
Последнее исправление: vvn_black (всего исправлений: 1)
Ответ на: комментарий от vvn_black

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

boris_delaet_site
() автор топика
Ответ на: комментарий от boris_delaet_site

А как делать, чтоб сайт был динамическим?

А зачем?
Всегда начинай с вопроса «зачем», а не «как».
Отправка формы с перезагрузкой страницы выглядит в 99.9998% случаев точно так же как и AJAX, но глючит в сто раз меньше.

Формы там, инфу принимал/отправлял, всякое делал.

Ну вот указываешь в параметре action формы адрес для отправки данных и в method метод отправки и вешаешь внутри формы input с типом submit и когда юзер нажмёт на этот инпут — браузер отправит все не отключённые инпуты из этой формы по нужному адресу нужным методом.

А потом получит ответ и покажет его пользователю.
Ну и зачем тут JS?
Работало всё это без JS и десять и двадцать лет назад, и ничего сегодня не мешает работать.

нужно ли мне делать сайт под телефоны

Нужно подумать над оформлением.
Телефоны сегодня дают 60-90% трафика, особенно в продажах.
Тут скорее можно забить на особую версию для больших экранов, но для мелких обязательно надо.

А как можно протестировать свой сайт без смартфона?

Средствами тестирования в браузерах.
Сейчас во всех настольных есть эмулятор мобильника.
И симулятор тормозов, и симулятор медленного интернета, и маленьких экранов, и тача. F12 нажми и документацию изучай.

Goury ★★★★★
()
Ответ на: комментарий от boris_delaet_site

почему в Krita поворот не на 90 градусов будет хуже, чем в Inkscape

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

на самом деле много кто делает макеты в растре, даже для полиграфии. но лично я на такой процесс смотрю с сожалением.

anonymous
()
Ответ на: комментарий от Goury

Так а чем плох java script, не пойму. Ты уже второй в этой теме, кто против.

Сейчас во всех настольных есть эмулятор мобильника. И симулятор тормозов, и симулятор медленного интернета, и маленьких экранов, и тача. F12 нажми и документацию изучай.

Ничего себе, да там целый арсенал. Сколько пользовался файрфоксом, ни разу такой штуки не видел. :)

boris_delaet_site
() автор топика
Ответ на: комментарий от anonymous

Теперь понял. Ну хорошо, попробую в обоих редакторах, посмотрю как это будет выглядеть при увеличении и повороте. Я еще не думал о совсем больших мониторах (4к, и теперь уже 8к не за горами), там наверно сайт совсем поедет. И тут уже видимо без векторной графики совсем не обойтись, чтоб не перерисовывать все в большую сторону?

boris_delaet_site
() автор топика
Ответ на: комментарий от boris_delaet_site

А чем он хорош?
Давай заодно засунем в сайт вообще всё что только можно, включая флеш, яву, сильверлайт, анимации, звуки, горизонтальный скролл и WRML. Чего уж там.

Он плох тем, что во-первых ты его пытаешься засунуть туда, куда не надо, а во-вторых вместо того чтобы учиться делать как надо.
Учись сразу как делать правильно.
Форму правильно отправлять нажатием на submit, а не через JS.
То, что через JS тоже можно — не значит что нужно.
Уж точно не раньше чем придёт понимание.

целый арсенал

Да, мы за последние годы сделали очень много интересного и полезного туда.

Goury ★★★★★
()
Ответ на: комментарий от boris_delaet_site

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

anonymous
()
Ответ на: комментарий от boris_delaet_site

Да не обязательно перерисовывать всё.
CSS pixel ≠ device pixel

Goury ★★★★★
()
Ответ на: комментарий от trashymichael

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

anonymous
()
Ответ на: комментарий от vvn_black

И есть еще один нюанс. Сайты про кино уже есть. Хорошо сделанные, с огромной посещаемостью.

Теоретически, даже если мы здесь соберем команду и забацаем сайт, высока вероятность что туда просто никто не будет ходить. Она примерно 99.9%.

anonymous
()
Ответ на: комментарий от anonymous

сэнькс. получается 65/35 примерно, в пользу мобильного трафика.

anonymous
()
Ответ на: комментарий от Goury

А чем он хорош?

Не знаю, а чем плох? На нем же сайты делают. А на чем еще? Вот прочел, что если отключить java script, то половина сайтов вообще работать не будет. Так в чем тогда смысл его не использовать? Он же для этого и существует.

Давай заодно засунем в сайт вообще всё что только можно, включая флеш, яву, сильверлайт, анимации, звуки, горизонтальный скролл и WRML. Чего уж там.

Так flash это коммерческая технология, он редко где используется насколько я знаю, и лично у меня сайты на флеше тормозили все время, и к тому же все уже от него давно отказались. Silverlight это тоже что-то коммерческое. Java script же это открытая технология, в чем проблема никак не пойму?

То, что через JS тоже можно — не значит что нужно.

Пока от вас не последовало ни одного объяснения, почему не надо использовать java script, и что надо использовать вместо него.

Форму правильно отправлять нажатием на submit, а не через JS.

Так почему во всех книгах по веб-программированию java script всегда присутствует, а вы советуете не использовать его? По вашему для каждой задачи есть только один путь решения? Где почитать про список «нежелательных» языков программирования в веб-дизайне?

boris_delaet_site
() автор топика
Ответ на: комментарий от boris_delaet_site

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

что надо использовать вместо него

Ой, всё. Если ты даже прочитать прямые ответы не в состоянии — объяснять тебе что-либо у меня времени нет.

Goury ★★★★★
()

очень мало сайтов которые используют макет полностью отрисованный.
В основном, особенно информативные сайты делают с использованием техники: Responsive Design --- сайт состоит из блоков и эти то блоки в зависимости от размера окна перераспределяются ну или растягиваются (например текстовые блоки). Только уже в крайнем случае используется совсем другой дизайн (например на мобильных).
Поэтому, прежде чем чтото рисовать нужно разобраться в компоновке блоков, какие, где и когда. Вот для работы с блоками (читай - квадратами) инкскейпс и подойдет.
Для понимания как это работает: открой какой нибудь сайт попроще (даже лор подойдет) нажми f12 и смотри как изменются размеры блоков при изменении размера окна, как это в css определяется.

kontranik
()
Ответ на: комментарий от Goury

«Советчик» из тебя не очень, откровенно говоря. Пока я услышал только «java script плохо, потому что flash, silverlight, госдура». Если хочешь донести до других свою мысль, ее надо аргументировать.

boris_delaet_site
() автор топика
Ответ на: комментарий от kontranik

Про адаптивный дизайн уже прочитал пару статеек, буду осваивать Inkscape, спасибо за советы.

boris_delaet_site
() автор топика
Ответ на: комментарий от anonymous

действительно мобильный трафик уже перевалил десктопный.

а также, возможно еще и доля легаси устройств явно не нулевая

anonymous
()
Ответ на: комментарий от boris_delaet_site

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

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

anonymous
()
Ответ на: комментарий от anonymous

похвастаться перед другими.

В том смысле, перед теми людьми, которые в теме. Типа, смотрите пацаны, как я могу, сдеалал сайт без долбаного яваскрипта!

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.