30 советов веб-дизайнерам для ускорения работы

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

Нам удалось убедить занятых веб и графических дизайнеров поделиться своими секретами и трюками. Получился настоящий кладезей полезной информации.

В этой статье вы найдете как малоизвестные ноу хау, так и хорошо известные сервисы, трюки и приемы веб индустрии и CSS, которые упрощают дизайн для использования на разных платформах. Будь вы начинающим, или бывалым ветераном дизайна, в этой в этой статье найдется один или два интересных трюка, которые вы обязательно включите в свой рабочий процесс. Автор подборки советов: Karl Hodge

Пишем код быстро

01. CodeKit для браузеров без перезагрузки

CodeKit позволяет напрямую видеть изменения в своем браузере без перезагрузки. «Если у вас Мак, то CodeKit создан для вас» — пишет совладелец Viewport Industries, Кеир Уайтейкер. «Функция перезагрузки браузера сама по себе уже многого стоит. Дни ручной перезагрузки закончились».

codekit

02. Добавляем глобальные изменения

Небольшой совет от музыканта, продюсера и веб разработчика Еллиотта Финберга. Этот трюк позволит вам быстро и в целом менять любой элемент веб-дизайна на любой стадии работы. Используйте прямое правило подстановки CSS — при помощи звездочки и селектора можно менять глобальный вид всей страницы, переписывая код поверх старого. К примеру, чтобы изменить шрифты на всей странице на sans-serif, достаточно написать:

[su_note note_color=»#ffffdb»]*{font-family:arial, helvetica, sans-serif;}[/su_note]

Отличный прием для быстрых изменений кода. Конечно, не стоит оставлять код в таком виде в финальной стадии.

03. Устанавливаете яркие цвета

Все гениальное просто — совет от Кристофера Мерфи из Web Standardistas. «При работе с медиа запросами, устанавливайте окантовки ярких раскрасок» — пишет Мерфи. «Например:

[su_note note_color=»#ffffdb»]{outline:10px solid green/red/yellow/blue;}[/su_note]

Таким образом вам сразу будет понятно какое конкретное правило применяется к какому элементу».

04. Проверяйте длину строчки

«45-75 букв на строку в целом приемлемое количество текста для комфортного чтения», — утверждает Трент Уолтон, основатель и дизайнер Paravel. «Чтобы убедиться в поддержке плавающего дизайна существует простой прием. Разместите текст заглушку на странице с звездочкой на 45-той букве и звездочкой на 75-й. Далее сжимайте и разжимайте браузер, тестируйте сайт, на предмет соответствия этим параметрам».

05. Применяем FitVids для встроенных видео

HTML5 упростил встраивание видео, но у дизайнеров до сих пор две проблемы. Во первых, проблемы с адаптивностью видео, во вторых масштабирование видео для Flash в том случае, когда HTML5 не поддерживается. Посетите FitVids, небольшой скрипт на jQuery, который позаботится об этих проблемах.

Работаем с картинками

06. Smushit для уменьшения размеров изображения

Сайты с оптимизированными изображениями загружаются быстрее, работают лучше, работают на большем количестве устройств. Этот метод не уменьшает качество фотографий, но уменьшает их вес. SmushIt хороший скрипт для уменьшения размера фаила», — утверждает веб разработчик и поклонник Microsoft Мартин Бибай. Мы согласны. В качестве альтернативы можно попробовать скрипт Трента Уолтона ImageOptim

imageoptim

07. Экспортируем фотографии как 8bit PNG

Мартин Бибай выдает одл-скульный совет: «Если экспортируете картинки из Фотошопа в PNG, и вам не нужна полупрозрачность,  экспортируйте их в 8bit PNG». «В большинстве случаев качество не пострадает, но размер картинок будет радикально меньше».

08. PNGQuant для конвертации фотографий

Если хотите сохранить прозрачность и минимизировать размер фаила, воспользуйтесь сервисом PNGQuant. Этот ресурс может конвертировать 24/32bit PNG в bit PNG, сохранив альфа канал. Отлично!

Работаем с макетами

09. Используйте GuideGuide

GuideGuide — панель для разметки колонок, рядов и средних точек в Фотошопе.

«Лучшие веб сайты созданы по сетке», — говорит Рис Литтл, директор дигитального маркетингово агенства Plug and Play. Устанавливать в Фотошопе разметки и сетку с нуля слишком затратно. Он рекомендует использовать  Guide Guide: «Ускоряет процесс разметки и сохранит вам массу времени на разметку руками».

guide

10. Используем  12-колонную сетку.

Еще один совет от Риса Литтал: «В целом полезно работать с сеткой, колонки которой делятся на 2, 3 и 4. Таким образом 12 колонная сетка является наиболее популярной сеткой в веб дизайне». Используйте фреимворк 960grid — в котором имеются все необходимые макеты с сетками под все виды устройств.

11. Находим интересные палитры

Kuler от Adobe — уже очень круто, но Мартин Бибай открыл способ, о котором мы не задумывались ранее: «Я не могу подобрать цвета, поэтому когда я занимаюсь очередным проектом и собираю палитры вместе, я всегда использую Кулер». Он так же посоветовал сообщество Colour Lovers — ресурс, на котором можно найти новые идеи, палитры, вдохновение для дизайна.

Веб типографика

12. Typecast для типогравских палитр

Typecast поможет в быстром создании палитры типографики. Это приложение создано талантливой командой дизайнеров Front. С его помощью работа с типографикой страницы ускоряется в разы. «Приложение позволяет быстро выстроить всю типографику для типовой страницы блога или сайта», — пишет Кристовер Мерфи.

typecast

13. Используйте Typecast с Google Fonts

Monotype недавно объединился с Google чтобы выпустить новый, бесплатный и публичный Typecast. Войти в него можно через Google Fonts14. Font Squirrel для бесплатных шрифтов

Бесплатные для коммерческого использования шрифты как нельзя кстати. Теперь, когда есть Font SquirrelGoogle Web Fonts и атрибут @font-face  в CSS, вам не грозят проблем веб дизайнеров прошлого десятилетия.

Планируем идеальный сайт

15 Используем Dropbox для контроля версий

Dropbox PRO можно использовать для в качестве системы управления версиями сайта.

Кеир Уайтайкер предложил использовать Dropbox Pro в качестве системы контроля версий сайта. Вы получите не только 100GB места в сети, но и 30-дневную историю изменения фаилов. «Более чем достаточно для предохранить работу от случайных удалений», — говорит Уайтайкер.

dropbox

16. Притормози

Креативные дизайнеры всегда норовят ринуться в бой. Айдан Мартин, главный дизайнер Alienation Digital, говорит что нам всем нужно притормозить. «Не начинайте работать с дизайном, пока не продумали основную идею работы. Для начала определите поставленную цель, составьте план, и только после этого приступайте к дизайну».

17. Опишите дизайн на стикере

Умещается ли ваша идея на канцелярских стикерах, которые клеят к столу и монитору? «Я всегда записываю ключевую идею на небольших стикерах, чтобы лучше сконцентрировать внимание», -пишет Эллиотт Фрайенберг. «Помогает понять что действительно важно, а что вторично».

18. Планируйте пользовательский интерфейс

Не знаете что делать с оставшимися стикерами? Упражнение можно расширить на полное планирование пользовательского интерфейса». — добавляет Эллиотт Файенберг. «Ваш проект гарантированно станет более сфокусированным». Конечно, стикеры доступны и виртуально: Sticky Notes для Windows и Stickies для OS X.

Рабочая среда в Фотошопе

19. Давайте название слоям

Будьте максимально содержательны, давайте осмысленные названия всем слоям.

Рис Литтл предлагает делиться макетами Фотошопа с другими членами команды. «Будьте максимально содержательны, когда называете слои в Фотошопе. Дать ему короткое но понятное название займет секунду. А вот переделывать все слои после займет несколько часов».

organise

20. Откладывайте запасные слои

Выкидывайте все запасные слои из дизайна, добавляет Рис Литтл. «Если хотите сохранить их про запас, архивируйте версию файла со всеми слоями. Но основной файл должен содержать только все необходимое для других дизайнеров и разработчиков, что бы минимизировать количество вопросов после».

21. Организуйте папки

«Убедитесь в том что в папке исходников (ASSETS Folder) находится все необходимое — шрифты, картинки, логотип, все что использовалось в проекте», — заключает Рис Литтл. «И дайте всем папкам корректные понятные названия.»

22. Создавайте последовательные названия

Рис Литтл предлагает сохранять последовательность в наименованиях. Конкретный дизайн сайта всегда будет иметь то же название, вместо того, чтобы называть файлы по ситуации.  Старые файлы нужно поместить в архивную папку. Например:

ARCHIVE
WEBSITE.PSD

23. Храните все на сервере

«Не забывайте сохранять работу на сервер», добавляет Рис Литтл. Даже если уже вечер и вы заканчиваете работу, «если отсылаете файл, убедитесь что он так же присутствует на сервере и любой член команды может получить к нему доступ даже в том случае, если вы уже ушли».

Счастливые клиенты

24. Используем Pinterest для доски настроения

Pinterest — отличный способ создать совместную доску настроения вместе с клиентом.

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

pinterest

25. Вовлекайте клиента в процесс работы с самого начала

«Вовлекайте клиента как можно раньше в процесс создания дизайна», советует Айдан Мартин. «Помните, клиент лучше всего понимает суть своего бизнеса, и только соединив его знания и ваши навыки, можно получить хороший результат».

26. Прототипирование — основа

Работайте с инструментами прототипирования, чтобы получить ранние версии дизайна как можно скорее. Она может быть простой как прототип в Fireworks или сложной функциональной, как в вайрфрейме  Balsamiq. «Создайте прототипы до того как запрыгивать в Фотошоп, работать станет значительно проще», — советует дизайнер фрилансер Гэвин Эллиотт.

Пробиваемся по карьерной лестнице

27. Просим помощи

Воспользуйтесь сервисом совместной работы, чтобы получить помощь от друзей, если чувствуете что застряли. Не стоит бояться просить помочь. С такими приложениями совместной работы как  Trello и Redbooth вам даже не нужно находиться в одной стране!

trello

28. Работаем над портфолио во время простоя

» Не надо ждать предложений и реакции он других людей», — советует Бен Хауди, разработчик из Wapple.net. «В промежутках между работой,  работайте над своим портфолио для себя. И чем интенсивнее, тем лучше.

29. Говорим ДА новым вызовам

У Бена Хауди своя стратегия работоспособности: говорим да работе даже если мы находимся вне комфортной зоны. «Беритесь за работу, которая несет в себе вызов для вас, позволит вам научиться новым навыкам, расширит умения больше чем любой урок. Дедлайны — мощный мотиватор обучения на работе».

30. Обратная связь на Dribbble

Чужая критика никогда не помешает. «Посещайте места вроде Dribbble для вдохновения», советует Бен Хауди. В социальных сетях для дизайнеров, где можно поделиться работой, и сразу получить обратную связь, всегда найдется для вас хороший совет. Иногда работу стоит показать другому дизайнеру, чтобы понять что с ней не так.

А у вас есть свои трюки и секреты в веб-дизайне? Поделитесь ими в комментариях!