вместо reset.css лучше использовать normalize.css (necolas.github.io/normalize.css/) — он убирает все различия в браузерных стилях и не мешает в отличие от reset.css
behance и dribbble — только для вдохновения и поиска визуального стиля, чтобы представлять, что сейчас модно. Для анализа лучших практик полезнее смотреть реальные сайты, где можно покликать, поресайзить окно браузера.
Использовать айдишники для стилей — один из признаков дурного кода. Этим вы создаете проблемы себе в будущем или другому верстальщику, который будет работать с сайтом после вас.
globuzer да, именно потому, что не смог его освоить. Тут, вероятно, сыграло роль, что сначала я попробовал Fireworks. Тому, кто изучил сначала Illustrator, Fireworks может показаться простым и недоделанным. Порядок имеет значение.
Но могу точно сказать, что Fireworks выигрывает у Photoshop по скорости рисования и редактирования многостраничного интерфейса, несмотря на свою устарелость и тормознутость.
Договариваюсь о степени и способе вмешательства заранее.
В начале переговоров на этапе 1 и 3 оговариваю, что все стилистические решения принимаю я. Что я не делаю несколько цветовых вариантов на выбор, а предоставляю один финальный дизайн, который по моему профессиональному мнению лучше всего решает задачу. Один вариант (а не несколько) сокращает мое рабочее время, количество комментариев и согласований, а значит не затягивает проект.
Заказчик имеет право критиковать стилистические решения, но должен обосновать своё мнение, рассказать, почему ему не нравится текущий вариант. Обычно привожу такой пример: заказчик может сказать, что нельзя использовать синий цвет, так как похожий оттенок у конкурентов. Но если он просто скажет, давайте поменяем синий на зеленый, я спрошу, а почему вы считаете, что синий не подходит, и повлияет ли это в принципе на конверсию. Если играть шрифтами и цветами наугад, то на это можно потратить много времени и денег. Готовы ли вы оплачивать дополнительное время дизайнера?
Объясняю, что заказчику рисовать чужими руками дорого и долго. Дизайнер в уме может представить, какой вариант хорошо выглядит, какой плохо. К тому же, когда дизайнер устанет от множества бессмысленных вариантов, выдохнется, то качество проекта резко упадет, и вообще проект будет под угрозой. Поэтому экономически эффективней для всех сторон действовать по схеме «Не нравится — критикуй. Критикуешь — обоснуй».
Обычно заказчики соглашаются, что это разумно, но 5-6 раз за проект приходится всё это повторять снова, когда проект начинают комментировать новые люди со стороны заказчика и многие пытаются «порисовать дизайнером».
Со своей стороны, когда я презентую дизайн, вместе с заказчиком мы проходимся по каждой странице, где я проговариваю, почему я сделал так, а не иначе, какие могли быть варианты и какие преимущества у выбранного мной варианта. Такой рассказ о дизайне позволяет мне не рисовать несколько вариантов и показать заказчику, что проделана большая работа, результат обоснован и всё «по науке».
Так же это наносит превентивный удар по большинству хотелок заказчика: заказчику теперь надо на таком же уровне обосновать свою хотелку. А если обоснует, то это уже конструктивный диалог, которого мы и добивались.
Если просто послать заказчику дизайн, то потом придется отбиваться от хотелок заказчика. Всё будет выглядеть так, будто заказчик дурак, а дизайнер изворотливый лентяй.
А вообще иногда приходится сделать то, что просит заказчик, ведь «большому боссу нужно поучаствовать в проекте». Бывает, что спустя некоторое время получается вернуть всё как нравится дизайнеру.
Андрей Кривенко: Картинка майки в моем примере размером 1000×1000px, поэтому и viewBox="0 0 1000 1000" — размер полотна, в котором единицы измерения совпадают с пикселями. (x y width height)
А width="100%" height="100%" на элементе svg — это html-аттрибуты, такие же, как для img. Вы их можете убрать, переопределить через css и т.д.
Вам нужно во viewBox вписать размеры вашей картинки с майкой. Координаты x="0" y="0" — это точка монтирования — левый верхний угол картинки. Он совпадает с началом координат. height="1000" width="1000" — размеры картинки (в пикселях, но без указания единиц измерения). Для майки должны совпадать с viewBox.
Для наклейки на майку аналогично. Масштаб картинки с наклейкой должен быть не меньше, чем у майки. Т.е. не стоит наклейку растягивать больше, чем ее исходные пиксели.
Основной проект на работе на .Net (самописная CMS). Вспомогательные проекты (документация, сайты-саттелиты) и личный блог на Docpad (это генератор статики на Node.js).