19 декабря 2017
Уроки, Для начинающих, Веб дизайн, Adobe Photoshop,

Создание дизайна сайта


Каждый новый дизайн сайта начинается... нет не с Photoshop, с идеи и наброска на бумаге.

У каждого сайта должна быть идея, он должен быть уникален, и отличаться от большого количества сайтов похожей тематики, а  используя карандаш и бумагу можно в течении 30-ти минут создать 2-5 набросков будущего сайта, это намного быстрее чем делать это в какой то программе.

 

 

Первый вариант очень шаблонный, но можно оставить расположение блоков. Продолжаем искать уникальность.

 

 

Возможно так?

 

 

Или так? 

 

 

Для разработки прототипа, как собственно и дизайна сайта, я использую программу Adobe Photoshop, также для этих целей можно использовать Adobe Indesign, как утверждают некоторые дизайнеры, но ни в коем случае не пользуйтесь для создания дизайна векторными пакетами, такими как Corel Draw или Illustrator.

 

Так вот, приступаем к созданию прототипа. Обычно я использую стандартные сетки с сайта - www.960.gs. Сетка на 12 колонок меня вполне уcтроит. Эта, на мой взгляд более гибкая сетка, чем 16 колонок или 24, так как 12 легко делится как на 3 так и на 4, то есть можно делать, как четное так и нечетное количество блоков. 

 

Общая ширина дизайна 980px. Ширина колонки - 60px. Промежуток между колонками - 18px. 

 

 

Дальше создаем горизонтальную сетку. Кегль, который я буду использовать для основного текста, будет 12pt, интерлиньяж — 18pt (не знаю насколько он идеален, но меня устраивает).

Поэтому промежуток между строками будет - 18px.

 

 

По сетке начинаем рисовать прототип (расположение блоков).

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

 

 

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

 

 

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

 

 

После небольшой технической обработки оно готово к использованию.

Ну и... собственно сам дизайн.

 

 

По концепции главной страницы рисуем внутренние.

 

 

Работа завершена, все довольны!


comments powered by Disqus
Напомнить пароль