Не так давно занимаюсь разработкой дизайнов для web-сайтов и периодически общаюсь с верстальщиками.
Часто некоторые высказывают своё «фи» по поводу дизайна и расположения элементов, мол, неудобно верстать.
Но хочу заметить, что верстали по разному, и натягивали на Бутстрап (эти люди чаще сетовали на "кривой" дизайн), и верстали обычной блочной версткой (тут редко кто говорил что-то).
Хотелось бы что-нибудь почитать/узнать, каким же должен быть хороший дизайн, чтобы потом его можно было нормально реализовать на вёрстке, не жертвуя какими-то моментами (урезали размеры шрифтов/картинок, сжали масштаб и так далее).
Что значит "неудобно верстать"? Вы видимо сотрудничали с непрофессионалами своего дела. Есть макет, верстка должна быть 1:1, либо с мелкими нюансами, но которые не заметны глазу. А проблемы верстальщика, дизайнера не должны волновать. Естественно все в пределах разумного и без крайностей.
Борис Якушев: возможно, с непрофессионалами или просто ленивыми людьми :) Но если представить вариант, что этот дизайн верстать буду я (в потенциальном будущем), хотелось бы понять, как можно упростить будущую задачу, сохранив при этом тот дизайн, который нужен мне/заказчику.
Я бы рекомендовал попробовать сверстать собственный макет самостоятельно, к примеру, на том же bootstrap. На своем опыте оцените, есть ли недостатки.
Из правил:
Дизайн не должен мешать пользователю. Чем меньше шума, тем лучше. В идеале - ничего лишнего на экране. И как можно меньше анимации.
Функциональность превыше эффектов - сначала содержимое, только потом украшения
Мыслить от абстрактного к конкретному, мыслить модульно - чистый холст делим на части (в пропорциях), потом добавляем компоненты в виде сплошных фигур, потом детализируем компоненты. Так мыслит и верстальщик, и программист. Хранить компоненты в отдельных файлах.
Красивый дизайн - логичный дизайн. Все должно быть упорядоченно, иметь обоснованные размеры, отступы, цвета и эффекты
Постоянство - одна цветовая схема, пропорции, типографика, элементы
Стандарты и традиции. Поведение предсказуемо. Стрелка вниз на панели означает, что панель развернется вниз, а не вверх. Красный - опасное действие, зеленый - безопасное. Используйте стандартные иконки, вместо никому не знакомых.
Смотрите на дизайн чужими глазами - наложите черно-белый фильтр или размытие и убедитесь, что содержимое не растворилось, акценты на месте. Продумайте, что случится с колонкой или меню, если текста будет слишком много или мало.
Растровая графика для фотографий и многоцветных изображений. Все что может быть описано в векторе - делается в векторе.
На каждое правило бывают исключения
Книги и материлаы
Design for Hackers: Reverse Engineering Beauty - технический взгляд на элементы дизайна
Прочие книги по UX и web-design в списках бестселлеров amazon / ozon
behance и dribbble - для анализа лучших практик
Руководства по стилям: Google Material Design, Modern UI, Apple Human Interface Guidelines, ibm design. Тоже для анализа практик и правил для конкретной платформы.
Данияр Кудайбергенов: смешно читать такой бред. На дриббле постят крутые дизайнеры, половина из которых работает в гуглах и компаниях подобного уровня. Добрые 70% концептов там потом без проблем появляются в передовых проектах, пока всякие васяны из колхоза продолжают это все надменно осуждать, думая что они в чем то разбираются.
behance и dribbble — только для вдохновения и поиска визуального стиля, чтобы представлять, что сейчас модно. Для анализа лучших практик полезнее смотреть реальные сайты, где можно покликать, поресайзить окно браузера.
Многие не понимают, суть таких сервисов как dribbble и behance. Во-первых их нельзя сравнивать. Dribbble — инстаграм для дизайнов, туда постят красивые картинки, для того чтобы получить отклик и признание у коллег да и просто для красоты, для некоторых это ещё вариант пропиариться и получить клиентский трафик и заказы (то что там постят красивые картинки не говорит о том, что там бестолковые дизайнеры, дрибл специально для картинок и создан). Behance — площадка для презентации своих проектов, тут можно встретить достойные работы, с рассказом о процессе и пояснением тех или иных дизайнерских решений. Но хватает и бессмысленных картинок, от тех кто ещё не понял, что такое дизайн и не понимает, как реализуются реальные проекты. Так или иначе тут тоже можно получать клиентов, поэтому большинство борется не за логичность и продуманность дизайна, а за красоту, лайки и комменты. Как написал Павел Радьков это хорошие сервисы для вдохновения в плане визуального стиля, я с этим согласен.
Странно, что никто не написал про советы бюро Артёма Горбунова.
Мне кажется начинающим дизайнерам стоит начинать именно с их советов, ставит мозги на место и помогает определиться с правильным вектором дальнейшего развития.
P.S. Не стоит тратить время на «10 советов успешного, продающего дизайна» из пабликов в вконтакте, если занимаетесь дизайном серьезно, то стоит постепенно наращивать свои знания читая книги и статьи от профессионалов своего дела и пытаться последовательно применять всё на практике. И помните, что любое утверждение и любое правило можно и нужно подвергать сомнению.
на хабре помню всплывала очень интересная статья по этому вопросу, там советы дизайнеру именно о том, как готовить дизайн для верстальщика. Там в статье был особый упор на сетку и на то, чтобы верстальщик сразу видел в комментариях код, с помощью которого можно все сделать на css.
UPD. Во, нашел, статья на подобии этой была - habrahabr.ru/post/175083
"чтобы верстальщик сразу видел в комментариях код, с помощью которого можно все сделать на css"
коммент с хабра наиболее широко открывает мысль
"Да-да, а дизайнеры автомобилей должны сразу инженерные чертежи делать. Хотя чего уж там, пусть сразу за станок идут, машины собирают, а то рисуют каляки-маляки…"
Возьмите .psd с сеткой бутстрапа и рисуйте дизайн, чтобы основные блоки занимали целое количество столбцов.
Если в каком-то элементе много подэлементов, его тоже можно разделить на 12 равных столбцов, далее аналогично.
А вообще, лучше почитать про основы верстки, тогда будет понятно, что реализовать можно, а что сложно.
Если есть конкретные вопросы, пишите в комментарии, я верстальщик.
Ну, скажем, верстать блочной версткой я умею. Т.е. через :)
Был опыт: всю красоту и расположение элементов делал через CSS, конечно, не всегда пиксель в пиксель получалось, отсчитывал от начальных точек (и последующего измерения расстояний в макете .psd). В этом случае всё понятно, в принципе.
А вот на тот же Бутстрап, видимо, делается чуть по другому, с учетом 12 столбцов и размещения элементов внутри этих столбцах.
Ingword: просто соблюдается сетка при расставлении элементов. psd с разлинованной сеткой есть в интернете. а про пиксель в пиксель - не заморачивайтесь, верстка ведь не под одно разрешение делается, а пиксельперфект подразумевает именно это и просят его как правило те, кто вообще мало шарит в этом.
ничего лишнего.
всякое украшательство должно быть уместно, преизбыток, как делают новички - признак безвкусицы.
то есть всякое украшательство должно быть лишь, если без него не обойтись.
никакой назойливости, автоплея звука или видео, если для этого не заходят.
интуитивно-понятный интерфейс, понятное меню.
не нужно фантазировать оригинальничать настолько, чтобы человек зашел и изучал что и где.
1. Правильное соотношение цветов. Для того что-бы на дизайн сайта было приятно смотреть можно поискать в интернете правильное соотношение цветов. На практике без тренировки выйдет ужас.
2. Разнообразие. В виде минимализного украшения дизайна и добавление всем давно привычного
3. Удобство. Понятность и минимализм дизайна. Сейчас это в моде.
Сам верстал и сейчас иногда верстаю, и скажу честно, дизайнер, которые рисует по сетке, очень многово стоит.
К слову я одного обучил рисовать по сеточному макету и он через месяц сменил место работы с окладом 3*(умножить)предыдущий оклад.
Дизайн -- это производная от моды. Если вы не кутюрье с именем и громадным ресурсом репутации своего модельного дома, то никакой моды ни в парфюме, ни в расцветке тканей, ни в прическах или чем-то там еще вы не создадите. Вы можете сделать удобно, практично, нигде не жмет -- не это не будет называться "стильно", "модно", "дизайнерски".... Остается только наедятся, что вам вам попадется заказчик который имея весь необходимый репутационный ресурс сделает ваше способ делать удобно-практично-нежмет -- модой. Но это должно быть точно "удобно-практично-нежмет"
Простой
Средний
