С чего начать дизайн сайта

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

1. Стиль минимализма в дизайне.

Дизайн — это творчество, которое не имеет предела возможностей. «Взяв в руки карандаш» вы можете нарисовать все, что вам вздумается, но не нужно перебарщивать и наполнять свой веб-сайт всевозможными фишками: всплывающие окошки, баннеры, анимационные иконки, выпуклые 3D кнопки. Не перегружайте пространство яркими деталями. Это портит первое впечатление и посетитель уходит. Старайтесь придти к минимализму в дизайне. Чем меньше деталей, тем понятней информация. Выделяйте только главные аспекты вашего бизнеса, например, шрифтом или большими картинками.

перегруженный дизайн сайта

Рис. 1. Пример перегруженного дизайном сайта.

Вы видите, насколько сильно режет глаз эта страница? Из-за перенасыщенности иконками и цветом, не за что зацепится — взгляд рассеивается по всей странице. Скорей всего на этом сайте вы долго не продержитесь, а закроете его через несколько секунд.

пример удачного веб дизайна

Рис. 2. Пример правильного дизайна.

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

2. На вкус и цвет.

Обычно при составлении ТЗ у дизайнера возникает первый вопрос — какой цвет будет на сайте? Безусловно, для фона страницы лучше брать белый или светло-серый цвета, так как использование ярких или темных оттенков просто режет глаз. Что же касается основных цветов макета, то вам нужно обязательно выбирать сочетающиеся цвета. Например, вы создаете сайт о продвижении бизнеса в интернете, то вам следует придерживаться спокойных оттенков. Вы можете сочетать голубой со светло-серым или бордовый с белым и серым цветами. Но ни в коем случае не нужно перегружать дизайн разными оттенками. Используйте не больше трех цветовых гамм.

единая цветовая гамма

Рис. 3. Пример правильного сочетания цвета.

3. Пропитайтесь идеей.

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

Сравните дизайн с сайтами конкурентов

Рис. 4. Приглядитесь к сайтам конкурентов.

4. Шрифты и тексты.

Текстовое наполнение — достаточно важный элемент. Так как если на сайте не будет хорошего и понятного текста, то посетитель просто не задержится на нем долго и закроет страницу. Вот вы же сейчас тут? Читаете эту статью и вам интересно? Значит, мы все сделали правильно!

    Как правильно использовать шрифты:

  • Не используйте завитые и необычные шрифты в тексте — это приведет к неудобству, за чем последует закрытие страницы. Подбирайте стандартные шрифты, которые привычны людям .
  • Берите за основу 1 или 2 шрифта, не больше. Так же играйте с масштабами шрифтов. Чтобы привлечь внимание к какому то разделу, который важен для вас можете сделать шрифт, например, 40 пикселей, а то и больше.
  • Мелкий шрифт — это ваш враг. Шрифт меньше 12 пикселей плохо виден. Не заставляйте посетителя напрягать зрение.
  • Цвет шрифта должен контрастировать с фоном. Хороший пример: черный шрифт на белом фоне. Плохой пример: желтый шрифт на белом фоне.

шрифты в веб дизайне

Рис. 5. Шрифты на сайте — это очень важно!

5. Идите в ногу со временем!

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

Адаптивный дизайн сайтов

Рис. 6. Адаптивный дизайн — поможет удержать трафик с мобильных устройств.

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

1. Допустим, есть сайт, который верстали только под компьютер, т.е. он не адаптивный. Вы решили зайти на него через свой мобильный телефон. И что мы видим? Мелкий шрифт — 1. Неудобная навигация — 2. Постоянно приходится все увеличивать, чтобы хоть что-то прочитать, и прокручивать страницу из стороны в сторону. Так как размеры не соответствуют вашему устройству, сайт ужимается и становится неудобным. Итог — если вы знаете похожий сайт с адаптивным дизайном вы скорей всего уйдете на него.

сайт не оптимизированный под мобильные экраны

Рис. 7. Сайт, не оптимизированный под экраны мобильных устройств.

2. А теперь представим, что вы попали на страницу адаптивного сайта. Как только вы открыли его то сразу видите что у него есть адаптивное меню, которое может выезжать либо сверху либо слева при нажатии на определенную кнопку, как в обычных мобильных приложениях. И это удобно. Страница создана по ширине экрана вашего устройства и все картинки соответствуют размеру экрана, гармонируя с крупным шрифтом, который удобно читать прокручивая страницу только вниз, а не в лево вправо. И конечно же все кнопки сделаны так, что вам удобно нажимать на них пальцами. «Этот сайт так удобен», подумаете вы, — «пожалуй я зайду сюда еще раз».

пример сайта с адаптивным дизайном

Рис. 8. Сайт с адаптивным дизайном.

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