Идея - набросок - реализация. Пути удачного дизайна
С этой статьи хотелось бы начать новую серию уроков по веб дизайну, которые помогут новичкам понять азы современного дизайна сайтов, а уже опытным мастерам, которые практикуют и возможно даже зарабатывают на этом, заполнить проблемы в теории и возможно даже, найти что-то для себя новое и актуальное.
В этот раз хотелось бы поговорить с вами о самом процессе начала работы над макетом сайта, проще говоря, на самой идее нового дизайна. Как это часто бывает, новички начинают работу над сайтом с какого-нибудь отдельного элемента, например, с клипарта, шапки сайта, отдельной кнопки или иконки. Иногда это даже приводит к красивому и аккуратному ресурсу, но чаще всего подобное начало - это путь к анархии и беспорядку в веб дизайне будущее сайта. Не хотелось бы, что бы будущий, возможно даже, успешный проект испортился на стадии идеи.
Наброски
Всегда помните, что сперва придумываем идею для будущего макета и только потом переходим к конкретным деталям, постепенно занимаясь каждым отдельным клипартом, уголком и кнопкой. Только так можно контролировать весь процесс работы и оценивать что именно получается и что можно ожидать.
Это очень простое и часто нарушаемое правило. Особенно молодыми дизайнерами.
Опытные дизайнеры постоянно твердят, что стоит сперва начертить будущий макет сайта на бумаге обычным карандашом или на крайний случай в Photoshop, если для вас это ближе. Сделайте быстрые черновые эскизы будущего проекта, найдите композицию, постройте приблизительную сетку страницы (отступы, основные блоки, расположение элементов), а так же какие-то наброски будущих иллюстраций. Не стоит бояться, что таким образом, кому-то может не понравиться ваша идея, если какие-то элементы будут не доделаны и смотреться сыро; веб дизайн - это не дело пяти минут и в большей степени ни одного вечера. И только после этого садитесь за компьютер, открывайте Adobe Photoshop или тот редактор, к которому вы больше всего привыкли начните творить...
Очень часто на данном этапе может получаться не очень красиво или даже ужасно, но постепенно страница начнёт приобретать нужные черты и превращаться из "гадкого утёнка" в прекрасного лебедя, то есть Настоящий Профессиональный Веб Дизайн Сайта.
Модульная сетка
Модульная сетка - этин из самых важных приёмов для создания успешного макета для сайта и, кроме того, отсутвие или неправильное использования которой является одной из самых распространённых ошибок у молодых и неопытных дизайнеров. Единый каркас, схема, проходящая через все страницы сайта так, что бы наметить расположение всех элементов, которые так или иначе присутсвуют на странице.
Сетки бывают простые и сложные, гибкие в использовании и не очень. Это не столь важно. Важно то, что если вы при проектировании дизайна задали определенную сетку модулей — будьте добры ей следовать. От первой до последней страницы своего проекта. А если в процессе прорисовки внутренних страниц у вас появились элементы, не ложащиеся в принятую сетку — значит вы недостаточно времени уделили её проектированию.
Кстати, для тех, кто не знает, подобные линейки можно включить в AdobePhotoshop Просмотр / Линейки или CTR + R.
Следование единой модульной сетке в рамках проекта не только увеличит цельность и логичность восприятия сайта, но и многократно упростит труд разработчикам.
Подготовка макета для начала работы
Как только мы поняли, что будущий дизайн может быть удачным, можно приступать к дальнейшим этапам: выбор цветов для фона сайта, для каких-то отдельных его частей (шапка, сайдбар, если это блог, основной текст, какое-то меню и так далее…). Случается, что модульная сетка нарушается, то есть какой-то конкретный элемент на странице не совсем следует всем этим границам, которые мы для него задумали. В таком случае, мы допустили одну из нескольких распространённых ошибок: либо с самого начала неправильно разработали сетку, либо наш элемент стоит «выбросить» или переработать заново.
Такой простой ход в разы продуктивнее, экономит кучу времени и помогает находить более интересные решения.
Рекомендуем почитать
