- PVSM.RU - https://www.pvsm.ru -
В этой статье я постараюсь разместить все по полочкам для начинающего веб-дизайнера. Начну с самых основ, постараюсь рассказать и показать основные веб-элементы интерфейса веб-сайта, какие существуют сложности в дальнейшей реализации макета, воплощения его в жизнь. И что должен знать веб-дизайнер, чтобы избежать неприятных столкновений с программистами, верстальщиками, фронтендщиками и бэкендщиками.
Главное, что должен понимать веб-дизайнер при создании самого крутого и умопомрочительного дизайна — это то, что не все, что вы рисуете в графическом редакторе (будь то photoshop или illustrator, или еще что...) можно воплотить в жизнь и сделать это кроссбраузерным.
Существует базовый набор элементов интерфейса, который можно встретить практически на любом сайте.
Для начала хотел бы обратить внимание на слойность нашего макета.
Нашу страничку можно разбить на несколько логических частей:
Исходя из нашего макета, слойность должна выглядеть примерно следующим образом:
Важная часть любого дизайна — придерживаться каким то правилам, пускай эти правила вы сами для себя определили. К примеру, вы решили, что отступы между элементами должны быть 20px, эту цифру вы должны сохранить от шапки до подвала вашего макета. Когда программист начинает работу над вашим дизайном, он часто сталкивается с проблемой отступов.
Чаще всего это происходит из за того, что дизайнер и программист пользуются разными инструментами в своей работе. К примеру, форматирование текста, дизайнер в графическом редакторе не разделяет заголовок и текст, а просто в одной текстовой области вписывает заголовок, текст, в итоге получается один слой, где дизайнер решает, как все будет выглядеть, это могут быть просто пробелы, может быть высота строк, там же и «ентеры»… Правильней будет позиционировать заголовок и текст, как два отдельных слоя.
Всегда используйте напрявляющие, на картинке вы видите, есть направляющие, есть отступы везде по 20px, есть раздельные слои для нашего текста.
Я наблюдал в своей практике, когда дизайнер делал столбики пробелами и «ентерами», очень не приятная картина.
Есть основные элементы веб-интерфейса, о которых должен знать веб-дизайнер, практически на каждом сайте вы их можете встретить.
На самом деле элементов больше, поэтому поставлю картинку, которая даст общее представление, думаю вы сразу поймете о чем шла речь.
Мне очень нравится Flat Design, поэтому картинка вот такая:
Заметьте, на картинке есть курсор в виде пальца, это говорит нам о том, что при наведении на элемент наш элемент визуально поменяется. Это даст понять юзеру, что сюда можно кликнуть. Запомните, такое действие называет Hover, если вы заметили, когда мы говорили о слойности, на картинке есть группа под названием «hover». Я предпочитаю все hover эффекты помещать в отдельную группу, так удобнее и программист легко сможет узнать, как ему оформить кнопочки, иконки, любые другие элементы при ховере.
Этот пункт для дизайнера может показаться пустяковым. Ну что дизайнеру стоит вставить новую картинку в макет, обрезать ее, как душе угодно, либо сделать из нее фон или еще что… на самом деле сложности появляются когда за работу берется программист.
Вообще, что делает программист с вашим макетом, вы думали об этом? Он его кромсает. В прямом смысле слова.
1. Не забывайте, что после вас будут работать программисты.
2. Лишний раз создайте новый слой, любая мелочь в новый слой.
3. Слои всегда группируйте по смыслу, элементы в шапке сайта, значит группа называется «Header».
4. Всегда используйте направляющие и соблюдайте отступы между элементами.
P.S.: это моя первая статья, не судите строго. Всем спасибо за внимание!
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/pesochnitsa/79618
Ссылки в тексте:
[1] CSS: https://ru.wikipedia.org/wiki/CSS
Нажмите здесь для печати.