Идея - набросок - реализация. Пути удачного дизайна

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

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

Наброски

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

Это очень простое и часто нарушаемое правило. Особенно молодыми дизайнерами.

Опытные дизайнеры постоянно твердят, что стоит сперва начертить будущий макет сайта на бумаге обычным карандашом или на крайний случай в Photoshop, если для вас это ближе. Сделайте быстрые черновые эскизы будущего проекта, найдите композицию, постройте приблизительную сетку страницы (отступы, основные блоки, расположение элементов), а так же какие-то наброски будущих иллюстраций. Не стоит бояться, что таким образом, кому-то может не понравиться ваша идея, если какие-то элементы будут не доделаны и смотреться сыро; веб дизайн - это не дело пяти минут и в большей степени ни одного вечера. И только после этого садитесь за компьютер, открывайте Adobe Photoshop или тот редактор, к которому вы больше всего привыкли начните творить...

Очень часто на данном этапе может получаться не очень красиво или даже ужасно, но постепенно страница начнёт приобретать нужные черты и превращаться из "гадкого утёнка" в прекрасного лебедя, то есть Настоящий Профессиональный Веб Дизайн Сайта.

Модульная сетка

Модульная сетка - этин из самых важных приёмов для создания успешного макета для сайта и, кроме того, отсутвие или неправильное использования которой является одной из самых распространённых ошибок у молодых и неопытных дизайнеров. Единый каркас, схема, проходящая через все страницы сайта так, что бы наметить расположение всех элементов, которые так или иначе присутсвуют на странице.

Сетки бывают простые и сложные, гибкие в использовании и не очень. Это не столь важно. Важно то, что если вы при проектировании дизайна задали определенную сетку модулей — будьте добры ей следовать. От первой до последней страницы своего проекта. А если в процессе прорисовки внутренних страниц у вас появились элементы, не ложащиеся в принятую сетку — значит вы недостаточно времени уделили её проектированию.

Кстати, для тех, кто не знает, подобные линейки можно  включить в AdobePhotoshop Просмотр / Линейки или CTR + R.

Подготовка макета для начала работы

Как только мы поняли, что будущий дизайн может быть удачным, можно приступать к дальнейшим этапам: выбор цветов для фона сайта, для каких-то отдельных его частей (шапка, сайдбар, если это блог, основной текст, какое-то меню и так далее…).  Случается, что модульная сетка нарушается, то есть какой-то конкретный элемент на странице не совсем следует всем этим границам, которые мы для него задумали. В таком случае, мы допустили одну из нескольких распространённых ошибок: либо с самого начала неправильно разработали сетку, либо наш элемент стоит «выбросить» или переработать заново.

Такой простой ход в разы продуктивнее, экономит кучу времени и помогает находить более интересные решения.

Спасибо iderins за изображения и идею для статьи.