Здравствуйте! <br/> Я работаю веб-дизайнером на фрилансе и иногда передаю свои макеты верстальщикам. У меня возникают сомнения по поводу того, насколько корректно будут реализованы мои идеи. <br/> <br/> Мне хотелось бы заранее ознакомиться с основами верстки, чтобы понимать, что можно реализовать, а что нет. Я хотела бы узнать о возможных размерах экранов, правилах адаптации блоков на разных устройствах, аспектах анимации, а также о нюансах, о которых нужно информировать при передаче макетов. Кроме того, я хочу лучше различать, где может быть лень верстальщика, а где действительно требуется переработка дизайна. <br/> <br/> Могли бы вы порекомендовать ресурсы, видео или статьи, которые подробно освещают эти вопросы? Заранее спасибо!
Здравствуйте! Отлично, что вы хотите углубить свои знания в области вёрстки, это действительно поможет вам эффективнее взаимодействовать с разработчиками и верстальщиками. Вот несколько ключевых аспектов, которые следует учитывать: ### 1. **Основы вёрстки** - **HTML и CSS**: Понимание основ этих технологий поможет вам лучше оценивать возможности верстки. HTML отвечает за структуру контента, а CSS — за его оформление. - **Модульная сетка**: Знание принципов работы с сетками (например, на основе Flexbox или Grid) поможет вам создавать более структурированные и адаптивные макеты. ### 2. **Адаптивный и отзывчивый дизайн** - **Размеры экранов**: Знайте стандартные размеры экранов (мобильные, планшеты, десктопы). Например, размеры для мобильных устройств обычно находятся в пределах 320px-768px, а для десктопов — от 1024px и выше. - **Медиа-запросы**: Это техники CSS, которые позволяют применять разные стили в зависимости от размеров экрана. Знание о том, как они работают, поможет вам задать гибкие размеры в макетах. ### 3. **Принципы адаптации блоков** - **Гибкость макета**: Использование относительных единиц измерения (%, em, rem) вместо фиксированных (px) позволяет лучше адаптировать контент к различным экранам. - **Приоритетные элементы**: Определите, какие элементы могут быть скрыты или перераспределены на меньших экранах, чтобы улучшить пользовательский опыт. ### 4. **Анимации и переходы** - **CSS-анимации**: Знание простых анимаций и переходов (transitions, animations) поможет вам задать более интерактивные элементы. - **Производительность**: Обратите внимание на то, чтобы анимации не ухудшали производительность сайта на низких устройствах. ### 5. **Документация и общение с верстальщиками** - **Спецификация макета**: Предоставьте верстальщикам четкие указания по всем элементам — цвета, размеры, шрифты, анимации. - **Элементы дизайна**: Выделите, какие элементы не должны изменяться, а какие допускают вариации. Это поможет избежать недопонимания. ### 6. **Разделение ответственности** - **Лень vs. переработка**: Понимание технологических ограничений и лучшие практики помогут вам объективно судить о работе верстальщика и определять, действительно ли нужно что-то переделывать или адаптировать. ### Рекомендуемые ресурсы - **Книги**: - "HTML и CSS. Разработка и дизайн веб-сайтов" — Джон Дакетт. - "JavaScript и jQuery. Интерактивная веб-разработка" — Джон Дакетт. - **Онлайн-ресурсы**: - [MDN Web Docs](https://developer.mozilla.org/ru/) — отличная документация по HTML, CSS и JavaScript. - [CSS Tricks](https://css-tricks.com/) — множество статей и руководств по CSS и вёрстке. - [Codecademy](https://www.codecademy.com/) и [freeCodeCamp](https://www.freecodecamp.org/) — платформы для изучения основ вёрстки. - **Видеоуроки**: - Каналы на YouTube, такие как Traversy Media, The Net Ninja или Academind, предлагают множество материалов по веб-разработке и вёрстке. Удачи в вашей работе веб-дизайнера и в изучении вёрстки! Надеюсь, эти советы помогут вам лучше взаимодействовать с верстальщиками и создавать качественные веб-сайты.
Просто приведу один пример из текущей работы по верстке:
Лень дизайнера:
Докину своих замечаний:
- Всегда делайте макета для FullHD эакрана в 1920px, даже если у вас контент на 1000px, не надо делать макета шириной 1200px, а потому удивляться, что шапка, которая тянется на весь экрана внезапно, увеличилась в размерах на FullHD и потеряла в качестве.
- Все элементы которые касаются блока, должны быть вложены в этот блок и сохранять иерарархию, а не так, что слайдер в одном блоке, а пагинация для него в другом.
- Не могу найти пример. Но часто встречаются кейсы, когда есть какой-то блок и к нему привязывают какой-то декоративный элемент, но этот элемент внезапно перекрывает рядом стоящий блок или что-то в этом духе и его благополучно закидывают куда-то в блок с фоном под все блоки, чтобы он не мешал . И тут хочется спросить, что в голове у дизайнера? Если ты сам не смог подцепить этот декорирующий элемент сохраняя иерархию и увидел проблему, какого чуда ты ждешь от верстки, если там такое реализовать еще сложнее?
- Если вам нужен какой-то более-менее стандартный шрифт используйте Google Fonts, это проверенные шрифты, которые гарантированно работают как надо. А использование каких-то аналогов с глубин интернета это, во-первых, может быть не совсем законно, так как шрифт может быть платным и это надо учитывать. Кроме того, если в дизайне вы используете допустим только ttf, то для web это все надо конвертировать в другие форматы, что может принести проблемы и как итог в верстке шрифт выглядит совсем иначе.
- Еще момент, нужно сразу примерно понимать на каких языках будет сайт и убедиться в том, что эти шрифты поддерживают необходимые языки. Так как бывает даже такое, что делают дизайн используя текст на английском со шрифтами в которых нет кириллицы, когда сайт верстает для ру сегмента.
хочу знать, где верстальщик ленится
Чаще бывает, что верстальщик просто не опытный и не знает как решать задачу.
Вот еще классические страдания для верстки. Темы такие все время закрывают, так как они якобы решены, но по факту те решения не покрывают и половины возможных кейсов, например, когда фон будет не одноцветный в один тон, то больше половины решений отпадают. И часто для простоты задают вопросы не описывая реальный кейс, а потом удивляются, почему не получается