Как создавать веб дизайн сайта

Как делать дизайн сайта

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

Хороший профессиональный дизайн сразу показывает уровень компании, уровень вложенных в сайт денег, уровень разработчика. К сожалению очень часто красивые сайты – малофункциональны и неудобны. Думаю многие замечали что многие популярные сайты в Интернете не имеют приличного дизайна, (конечно постепенно ситуация улучшается) и это совсем не мешает им развиваться и приносить деньги. Не циклитесь на дизайне! Простая незапутанная навигация и не жгущие глаза цвета – на первом этапе этого достаточно.

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

Как делать веб-дизайн быстро

Этапы создания дизайна сайта.

1. Смотреть другие сайты.

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

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

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

2. Делать макет в карандаше.

Дизайн в карандаше делается примерно за один день, а если говорить реально, то за несколько часов. Работа в карандаше – это черновик, который вы сможете поправить, почеркать что-то, чтобы затем была возможность перерисовать все это в графическом редакторе.

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

3. Верстка в графическом редакторе.

Практически все используют Photoshop, как универсальное средство для работы с графикой. Обычно работа по созданию дизайна может занять от одного дня до нескольких недель. Это будет зависеть, сколько страниц стоит разрабатывать. Если нужна только главная и внутренняя – это несколько дней, если вы будете делать иные страницы, например, под какие-то сервисы, значит, стоит понимать, что это отдельный дизайн, который нужно делать заново, что займет больше времени.

4. Исправление сделанных ошибок.

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

Веб дизайнер — с чего начать и как стать. Основы веб-дизайна с нуля

5. Верстка дизайна в html.

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

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

Некоторые начинающие веб-студии заявляют, что они предоставляют на выбор клиенту три макета, какой больше понравится тот и возьмете. Я считаю, что это плохая практика: все три макета получаются или плохими или очень похожими друг на друга. Хотите получить три макета – закажите их 3 разным людям, а лучше разным компаниям. Потом можно будет выбрать тот, который нравится больше.

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

Советы веб-дизайнеру

1. Делайте то, что от вас хотят. Клиент всегда прав. Если вам говорят сделать желтый текст на красном фоне, извольте покрутиться и не растерять читабельность с привлекательностью.

2. Не увлекайтесь графикой. Графика это хорошо, но ведь существуют и другие вещи. Поэкспериментируйте с цветными таблицами и CSS. Разгрузите ваш сайт и старайтесь придерживаться планки до 50kb на страницу.

3. Держите стиль. При создании дизайна пляшите от тематики. Есть такое понятие, как стиль. Он должен пронизывать весь сайт.

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

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

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

6. Удобная навигация – залог успеха. Пользователь не должен часами бродить по вашему сайту (хотя было бы неплохо…), это раздражает. Для небольших сайтов можно ограничиться навигационной полоской с выходами к основным разделам, а для сайтов с глубокой структурой стоит делать, что-то помощнее. Неплохо даже подумать о функции поиска.

7. Ваш браузер не единственный, разрешение экрана не уникально. Созданный вами сайт должен читаться при 256 цветах, при разных разрешениях ( 1024х768, 1280×1024 и др.) и пониматься двумя основными браузерами: Opera, FireFox.Также не забудьте про Internet Explorer, хоть он и считается самым ненадежным.

8. Если заказчик не может сформулировать задачу, дайте волю фантазии. Бывают случаи, когда заказчик ничего не понимает в Интернет и соответственно не может четко сформулировать, чего он хочет. Не стоит отчаиваться, дайте волю фантазии, проявите себя и постарайтесь не разочаровать своего клиента.

9. Любите себя в меру. Авторские права – это хорошо, но если любовь к себе превращается в манию это уже плохо. Влепите копирайт в самом низу титульной страницы и остановитесь. Не надо подписывать все страницы, да еще и комментарии в гифы пихать.

В конце концов, кому страничку делаем?

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

11. Точность – вежливость королей. Графический дизайн сайта должен быть подогнан с точностью до одного пикселя. Не ленитесь, пусть работы будет больше, но и эффект значительно солидней.

12. Авторские права не шутка. Не стоит воровать чужую графику. Во первых это не хорошо, а во вторых если не умеешь делать сам, то какой же ты дизайнер!

Советы веб-мастеру при разработке дизайна сайта.

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

2. Не выкладывайте все на одну страницу. Имеет смысл разбивать большие страницы на более мелкие. Так как некоторые до сих пор выходят в интернет через dial-up, то вид бегунка на полосе прокрутки браузера превратившегося в пиксель, вряд ли побудит к вдумчивому чтению.

3. Работайте в рамках дизайна. Дизайнер делает сайт (подробнее о создании сайта читайте здесь), а вы отвечаете за его работоспособность. Прежде чем, что-то реконструировать свяжитесь с дизайн-студией и согласуйте перемены с ней.

4. Отвечайте на все(!) письма посетителей. По своей работе вы наверняка получаете массу писем от пользователей с предложениями, замечаниями или жалобами. Не ленитесь, напишите ответ, пусть это будут примитивные фразы такие, как: “Большое спасибо” или “Мы это обязательно учтем”. Сделав этот нехитрый номер вы 100% получаете постоянного посетителя, который к тому же приведет к вам всех своих друзей.

5. Чем чаще обновления, тем больше посетителей. Как можно чаше обновляйте ваш сайт. Никто не хочет читать одно и тоже. Даже если нет ничего нового, попробуйте сменить приветственную речь или комментарии под картинками.

Эффектно, так же смотрится колонка новостей с датами обновления, особенно если эти даты еще не ушли в историю.

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

7. Никакой отсебятины. Если у вас новостной, информационный сайт, то старайтесь избегать предвзятости. Даже если вам не нравиться какое-либо событие не приписывайте к нему свеже придуманные факты. Пусть будет, как оно есть (AS IS:), а посетители и без вас во всем разберутся.

8. Ваша настольная книга – орфографический словарь. Старайтесь избегать ошибок и опечаток. Это настолько режет глаза и, так понижает солидность, что вам и в страшном сне не снилось. Возможно, стоит установить программу проверки орфографии или договориться с редактором.

9. ИМХО сабж рулез или пишите по-русски. Сленгу – нет! Мало того, что он не смотрится, так еще и часть ваших посетителей ничего не поймет. Конечно, слабенький жаргон типа: метр, прога или аська еще употребляемы, но закаленный фидошный сленг стоит исключить.

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

11. Счетчики, рейтинги и баннеры не последние вещи. Если студия создавшая сайт не занималась его раскруткой, то это придется делать вам (подробней о раскрутке здесь и здесь). Наиболее эффективной раскруткой на мой взгляд являются рейтинги. Вам абсолютно ничего не надо делать, чтоб заманивать посетителей.

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

12. Будьте вежливы. Если вам в 101 раз пишут о какой-либо неполадке, которую вы уже устраняете, не стоит посылать автора письма в одно известное место, он же для вас старается. Черкните ему фразу “Спасибо, вы нам безмерно помогли” и всем будет приятно.

Советы заказчику дизайна для своего сайта.

1. Вам действительно нужен сайт? Прежде, чем поднимать на уши дизайнеров и программистов, тратив при этом немалые деньги, подумайте хорошенько зачем он вам. Возможно, что вам нужен простой e-mail.

2. Четко формулируйте задачи. Не бойтесь загружать дизайнера работой. Ведь именно за этим вы его нанимали. Четко описывайте, что нужно сделать и, как вы это себе представляете.

Ему намного проще работать зная, что он делает.

3. Дизайнер должен иметь все. Логотипы, значки, слоганы, копирайты это все и не только это должно быть в распоряжении дизайнера. Выдайте это в первую очередь. Органично вписать логотип в готовый дизайн очень сложно, а зачастую просто невыполнимо.

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

5. Не работайте с не внушающими доверия студиями. Многие товарищи, чуть освоив свой Front Page (или, что там у них), быстренько клепают странички, называют себя Design Studio и ждут клиентов. Послушайте добрый совет – даже и не думайте связываться. Дизайнер должен уметь все делать своими руками и понимать, что он делает.

6. Одиночки – большая редкость. Дизайнеры одиночки очень редки (я имею в виду именно профессионалов). Справиться с сайтом в одиночку теоретически можно, но практически… С вами должна работать команда, в которой у каждого четко определенная роль.

7. Дизайнера не должны пугать такие слова, как: CGI, SSI и ASP. Если вы хотите получить по настоящему мощный, динамичный и информативный сайт, то простым HTML вы не отделаетесь. Погоняйте потенциального Веб-дизайнера на знание терминов и технологий. Отговорки типа: “это вам абсолютно не нужно” или “зачем такая роскошь” принимать не стоит.

Дизайнер, как минимум должен свободно владеть HTML, JavaScript и CSS.

8. Позаботьтесь обо всем заранее. Готовый сайт еще не все Даже если он у вас на руках, вам надо позаботиться о куче вещей, таких например, как: доменное имя, хостинг, рекламные кампании и о многом другом.

9. Не сковывайте фантазию. Не бойтесь фантазировать. Хороший дизайнер может воплотить любую вашу мечту (и для этого есть все средства). Если ваш дизайнер заявляет, что не может работать на таком уровне, то скорее всего вы работаете с непрофессионалом.

10. Не надо довить на людей. Работа над сайтом очень трудоемка. На изготовление любой мелочи могут уходить часы. Не торте дизайнера!

В противном случае вы рассчитываете получить блеклую штамповку.

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

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

Источник

Освоить веб-дизайн с нуля: что изучать и где обучаться

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

Действительно ли это так и как освоить веб-дизайн с нуля – разберемся в сегодняшней статье.

Кто такой веб-дизайнер

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

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

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

Выглядит все это примерно так: фреймы, слои, элементы, сетка и много дизайна.

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

Пример прототипа в Figma

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

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

Программирование чаще всего на уровне понимания, как и верстка. Здесь все зависит от того, какой путь выбрал веб-дизайнер – создает он сайты на CMS или же на конструкторе. Если в дело вступает, например, WordPress, то без верстки и программирования тут не обойтись. В случае с конструктором потребуются лишь базовые знания верстки.

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

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

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

Какие инструменты и навыки нужны

Об инструментах я уже немного сказал – в первую очередь это Figma. Идеальная программа, которая позволяет создавать прототипы и макеты сайтов. В ней можно делать все – и карту сайта, и взаимодействия пользователей, и презентации. Это Фотошоп на минималках, но отлично адаптированный для сайтов. В нем также можно создавать анимации, кликабельный прототип и дополнять функционал с помощью многовариативных плагинов.

• Photoshop – сегодня используется редко, может быть полезен, если нужно вырезать какой-то объект из фотографии. Однако и такую задачу сейчас можно решить без Фотошопа, например, с помощью специальных сервисов.
• Moqups – онлайн-сервис для прототипирования. Часто заменяется Фигмой, но подходит для более профессиональных прототипов сайтов и мобильных приложений.
• Illustrator – используется как дополнение к Фигме для прорисовки иллюстраций. Редкий инструмент в руках веб-дизайнера, потому что, во-первых, сайтов с иллюстрациями не так много, а во-вторых, на фотостоках можно найти множество подходящих картинок. Если же нужно какое-то уникальное решение, то обычно для таких задач нанимается отдельный специалист.
• Sublime Text – программа для верстальщиков. Используется только теми, кто занимается версткой. Как я говорил ранее, веб-дизайнер не равно верстальщик сайтов, но может им быть.

В общем-то, знание одной только Фигмы позволит вам стать веб-дизайнером и находить высокооплачиваемые заказы или работать в хорошей студии.

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

Вот основные качества, которые необходимы, чтобы стать веб-дизайнером:

• Умение договариваться – чтобы решать конфликтные ситуации и общаться с клиентами конструктивно.
• Любопытство – для постоянного поиска новой информации. Я бы выбрал синонимами такие определения, как «увлеченность» или «заинтересованность в деятельности». Если вам будет действительно интересен веб-дизайн, то все это будет по умолчанию.
• Желание развиваться и целеустремленность – помогут попасть в крупные проекты. Здесь опять же об увлеченности и заинтересованности. Если вы будете гореть и делать, то эти качества придут сами.
• Усидчивость и внимательность – вот эти качества, пожалуй, самые важные. Даже если вы будете гореть веб-дизайном, то это быстро может кончиться, когда наступят сложности. Может ничего не получаться, будет казаться, что это не ваше – в таких случаях как раз поможет усидчивость.

Хочу озвучить одну мысль, которую должны понять все, кто планирует заниматься творческой профессией – не стоит думать, что от рождения вы не творческий. Если вам интересен веб-дизайн, и вы смотрите на чужие работы как на что-то невероятное, то знайте, что вы можете так же. Кому-то это может даваться проще, кому-то сложнее, но прийти к хорошему результату может каждый. Здесь уже все решает усидчивость.

С чего начать начинающему веб-дизайнеру

Рекомендую начать с базового изучения сайтов – надо понять, как их создают и оформляют, какие проблемы они решают, чем отличаются. Ответив на эти и другие вопросы, связанные с вебом, вы начнете понимать суть профессии веб-дизайнера. Следующий этап – изучение Фигмы маленькими шагами. Не стоит сразу становиться гуру Фигмы – это займет много времени. Достаточно изучить базовый функционал, а затем постепенно его наращивать.

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

Четвертый шаг – тренировка, тренировка и еще раз тренировка. Как в спорте – если начали бегать и хотите результата, то продолжайте и улучшайте свои показатели.

Советую начинать с просмотра видеороликов на Ютубе – сейчас их огромное количество, хотя часть из них оторвана от реальности. Многие показывают крутые работы, учат, как их делать, выпускают клипы а-ля «Как сделать вау-эффект на сайте за 5 минут». Все это, конечно, круто, но на деле забывается уже на следующий день.

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

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

Вот лучшие русскоязычные каналы, которые хорошо прокачают вас в веб-дизайне с нуля:

– рассказывает о работе веб-дизайнера на фрилансе. Канал включает множество роликов как по Figma, так и по верстке сайтов. – блог о веб-дизайне. Если хотите разобраться в Фигме с нуля, то лучше начать с этого канала. Помимо Фигмы, есть и уроки по After Effects, Photoshop, Illustrator, а также много видеоматериала по веб-фрилансу. – рассказывает о трендах в веб-дизайне, показывает, как улучшить дизайн сайта в несколько кликов. Рекомендую приступать к этому каналу, когда вы уже получите первичные навыки и будете разбираться в веб-дизайне немного больше, чем на базовом уровне.

Этих трех каналов вам вполне хватит, чтобы стать веб-дизайнером-новичком, который сможет сделать макет сайта в Фигме и даже в формате HTML+CSS+JS.

Что делать дальше

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

Найти работы других дизайнеров вы можете на специальных сервисах:

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

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

Заключение

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

Источник

Этапы разработки дизайна сайта с нуля до готового макета

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

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

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

Этапы разработки дизайна сайта

Первое с чего начинается разработка любого дизайна сайта — это бриф, поэтому с него и начнем.

Этап 1 — Бриф

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

Обычно в бриф включены вопросы по типу:

• Контакты заказчика
• Информация о компании
• Какой сайт планируется разработать?
• Какая целевая аудитория?
• Какая структура должна быть у сайта?
• Предпочтения по дизайну (цвет, стиль и т.д.)
• Какие цели у будущего сайта?
• Какие имеются конкуренты?
• И другое

По этой ссылке я оставлю пример брифа, который вы можете адаптировать под себя. Брифовать (опрашивать) клиента лучше всего через созвон (например, в skype). Так вы сможете ближе познакомиться с клиентом и проникнуться доверием друг к другу.

Но если у вас живое общение вызывает дискомфорт, то можно отправить заказчику на электронную почту файл с брифом и попросить его заполнить. А после, попросить переслать вам обратно уже заполненный бриф.

Помимо брифа есть еще такое понятие как ТЗ (Техническое Задание). Оно составляется на основе брифа, то есть там прописывается вся структура будущего сайта и все требования к дизайну. Кто-то разделяет эти два этапа, но можно их объединить и на этапе брифа сразу проговорить все необходимые моменты.

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

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

Бриф актуален тогда, когда вы фрилансер и работаете сами на себя. Если вы работаете в компании, то брифовать клиента будут другие люди (скорей всего менеджер проекта).

Этап 2 — Анализ ниши и конкурентов

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

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

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

Где брать конкурентов? Во-первых, ваш заказчик может указать их в брифе. Во-вторых, можно зайти на Яндекс и вбить в поиск нишу клиента (например, аренда строительной техники в Москве). В выдаче у вас появятся сайты конкурентов их и анализируйте.

Все данные записывайте на какой-нибудь носитель (бумага или Word/Excell), чтобы ничего не забыть. Если в ходе анализа у вас будут возникать вопросы, то спрашивайте их у заказчика. Заказчик 100% знает свой бизнес лучше, чем вы, поэтому диалог только приветствуется.

Зачем вообще нужен этот анализ? Затем, чтобы не изобретать велосипед, потому что до вас 100% кто-то уже разрабатывал подобные проекты. Ваша задача, как дизайнера, сделать продукт своего клиента лучше, а не наоборот. Поэтому нужно опираться на чужой опыт и улучшать его.

По итогу второго этапа вы должны примерно понимать специфику бизнеса и у вас должны быть записи с анализом ближайших конкурентов.

Этап 3 — Проектирование

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

Выглядеть это может примерно так:

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

Этот этап нужен для понимания того, что вообще должно находиться на сайте. Как и в какой вариации это будет выглядеть в конечном дизайне — дело десятое. Проектировать можно как в графическом редакторе, так и на обычном листе.

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

По итогу третьего этапа у вас должна быть спроектирована вся структура будущего сайта.

Этап требует согласования с заказчиком.

Этап 4 — Сбор референсов

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

Сбор референсов можно разделить на 2 этапа:

• Референсы по вашей теме
• Референсы по любой другой теме

В первом случае, референсы по нашей теме будут помогать нам в составлении будущей стилистики нашего дизайна. Это стоит делать если в брифе клиент оставил этот пункт на усмотрение дизайнера.

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

Например, если взять 5 сайтов из fashion индустрии, то можно заметить, что на 4 из них в дизайне используются шрифты с засечками, формы кнопок и других элементов выполнены в строгом стиле, а цветовая палитра — преимущественно пастельных тонов. Соответственно вам можно придерживаться именно такой стилистики, если разрабатываете дизайн для fashion проекта.

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

Этап 5 — Прототип

С готовыми реферансами можно начинать разработку прототипа будущего сайта. Прототип — это промежуточный вариант между финальным дизайном и спроектированной структурой. Он уже имеет вид готового сайта, но без детальной проработки.

Во время создания прототипы вы уже работаете непосредственно с композицией и компоновкой, подбираете шрифты.

Выглядеть прототип может примерно следующим образом:

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

В прототипе вы можете:

• Вместо картинок рисовать обычные прямоугольники или круги
• Вместо иконок делать условные обозначения в виде обычных квадратов
• Не придерживаться строгих отступов

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

Этап требует согласования с заказчиком.

Этап 6 — Финальный дизайн

Вот мы и подошли непосредственно к самому дизайну в его привычном понимании. Как видите, работа дизайнера — это 80% анализа и проектирования и лишь 20% самого дизайна.

На этом этапе вам нужно добавить цвета в ваш прототип, выровнять все строго по сетке и подкорректировать отступы, добавить картинки и иконки туда, где они должны быть.

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

Результат преображения от прототипа к финальному дизайну может выглядеть примерно вот так:

Этап требует согласования с заказчиком.

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

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

Этап 7 — Подготовка дизайна для разработки

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

Что нужно сделать?

Во-первых, подготовьте небольшой стайл-гайд (UI-kit) вашего дизайна. Укажите какие цвета вы использовали в дизайне, какие шрифты и их начертания, различные UI-элементы и их состояния. То есть, чтобы разработчик не гадал, как будет вести себя кнопка при наведении и так далее.

Вообще стайл-гайд (UI-kit) следует формировать еще на этапе прототипа, чтобы потом вам было проще работать. В зависимости от проекта, стайл-гайды могут быть простенькими (как на фото выше), так и более объемными (при разработке сложных интерфейсов).

Во-вторых, подготовьте все картинки и фотографии, которые вы использовали на сайте. Заранее позаботьтесь о том, чтобы уменьшит их вес, потому что чем «легче» картинки, тем быстрее грузится сайт.

Во-третьих, подготовьте для скачивания все иконки, которые вы использовали в дизайне. Иконки должны быть в формате svg.

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

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

Естественно, это будет как отдельная услуга и оплачиваться будет отдельно. Здесь уже решайте сами.

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

Заключение

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

Надеюсь, статья была для вас полезной. Если остались вопросы — пишите в комментариях.

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

Источник