Существуют ли руководящие указания в отношении определения размера контента?

Question

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

Допустим, мне нужно сделать что-то простое, например, всплывающее модальное изображение в CSS.Я мог бы обернуть скрытый контент в div с классом modal, его содержимое в div с классом modal__content, сделать button, чтобы закрыть его, и некоторый текст в нем.Семантически правильный HTML не является проблемой.Анимации и цвета?Хорошо, ты понял.Я просто понятия не имею, как это сделать.Вот тогда я понимаю, что знаю CSS только в теории.Я могу закодировать его, но я просто не знаю, должен ли модальный размер окна 300x200 px для экрана рабочего стола или, возможно, использовать проценты?

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

Я использовал Bootstrap и Semantic UI.Это очень крутые и удобные инструменты, но я хотел бы знать некоторые подробные рекомендации, когда дело доходит до определения размера, так как я не знаю, как на самом деле должно выглядеть что-то.Большую часть времени я просто смотрю на все размеры шрифтов, отступы, поля и т. Д.

Answer 1

Я тоже не очень хорош в графическом дизайне. Мало кто преуспевает как в графическом дизайне, так и в программировании / написании скриптов.

В SitePoint есть несколько книг на эту тему, особенно первая (каждая из них доступна в мягкой обложке и в виде электронной книги):

• Принципы прекрасного веб-дизайна, 3-е издание
• Sexy Web Design

Универсальные принципы проектирования могут охватывать такие темы, как те, о которых вы спрашиваете, хотя я этого не читал.

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

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

Смежность подразумевает отношения. Например, обычно лучше давать заголовки, например, <h2>, верхнее поле больше, чем нижнее.

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

Анимации служат нескольким целям. Существуют различные анимации импульса / пульсации, чтобы указать, что контент загружается или происходит какой-то другой вид обработки. Существуют переходы, которые показывают не мгновенное изменение между состояниями, например, Открытие / закрытие или изменение меню - это представления слайдера контента / изображения. В то время как другие в основном из эстетических соображений, чтобы добавить визуальный интерес.

Я рад, что вы упомянули семантику. Используете ли вы <label> элементы, где это уместно?

P.S. Слишком много людей, называющих себя «веб-дизайнерами», не знают или не признают различий между графическим дизайном для Интернета и для печати. ​​