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

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

Время на прочтение: 6 минут

Вре­мя на про­чте­ние: 6 минут(ы)
5
(2)

Введение

В дан­ной ста­тье мы раз­бе­рем эта­пы раз­ра­бот­ки сай­та. Очень часто к нам при­хо­дят с запро­сом сде­лать ПРОДАЮЩИЙ И КРАСИВЫЙ сайт за один-три дня и что­бы было недо­ро­го. Мно­гие люди дума­ют, что сде­лать сайт — это украсть у кон­ку­рен­та струк­ту­ру, вста­вить туда свои тек­сты, наки­дать про­стой дизайн и быст­рень­ко свер­стать в кон­струк­то­ре.

Отку­да взя­лось мне­ние, что сайт мож­но сде­лать за такой корот­кий срок? — Всё про­сто. Мно­гие, что­бы мень­ше пла­тить, обра­ща­ют­ся к нович­кам, либо пыта­ют­ся сде­лать сами. Нович­ки, конеч­но, гото­вы рабо­тать деше­во или вооб­ще за отзыв. Толь­ко будет ли резуль­тат от тако­го сай­та? — Ско­рее все­го нет. Мож­но ли за два дня сде­лать хоро­ший сайт? — Конеч­но же нет.

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

У нас в раз­ра­бот­ке сай­тов есть 5 эта­пов. Пока­зы­ва­ем их на реаль­ном про­ек­те, что­бы вы пони­ма­ли, из чего состо­ит каж­дый этап и сколь­ко при­мер­но он зай­мет вре­ме­ни.

Разработка маркетинговой структуры

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

Краткая структура сайта
Крат­кая струк­ту­ра сай­та

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

Структура сайта
Раз­вер­ну­тая струк­ту­ра сай­та

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

Ана­лиз и состав­ле­ние струк­ту­ры обыч­но зани­ма­ет око­ло трёх дней.
Резуль­тат дан­но­го эта­па: На выхо­де это­го эта­па вы полу­ча­е­те тща­тель­но про­ра­бо­тан­ные тек­сты в Google Docs, что­бы обес­пе­чить удоб­ный доступ к мате­ри­а­лам для всей коман­ды, вклю­чая заказ­чи­ка, копи­рай­те­ра, дизай­не­ра и мар­ке­то­ло­га. Этот фор­мат поз­во­ля­ет лег­ко остав­лять ком­мен­та­рии, вно­сить прав­ки в режи­ме реаль­но­го вре­ме­ни и кон­тро­ли­ро­вать вер­сию доку­мен­та, что дела­ет про­цесс согла­со­ва­ния и дора­бот­ки быст­рым и про­зрач­ным.

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

Составление мудборда

Что такое муд­борд?
Муд­борд (mood board) — это визу­аль­ная дос­ка, на кото­рой собра­ны изоб­ра­же­ния, тек­сту­ры, цве­та и дру­гие эле­мен­ты, что­бы пере­дать кон­цеп­цию и настро­е­ние про­ек­та.

На дан­ном эта­пе фик­си­ру­ют­ся все идеи о про­ек­те. На рисун­ке ниже видим при­мер муд­бор­да.

Мудборд этапы разработки сайта
Муд­борд

Каж­дое изоб­ра­же­ние сопро­вож­да­ет­ся ком­мен­та­ри­ем. Напри­мер, заказ­чик пред­ло­жил исполь­зо­вать на фоне про­зрач­ное, едва замет­ное изоб­ра­же­ние древ­них наскаль­ных рисун­ков (стол­бик 1). Мы так­же рас­смат­ри­ва­ли воз­мож­ность доба­вить в дизайн изоб­ра­же­ния живот­ных по китай­ско­му горо­ско­пу (стол­бик 2), но впо­след­ствии реши­ли отка­зать­ся от этой идеи. Кро­ме того, на муд­бор­де пред­став­ле­ны изоб­ра­же­ния всех пяти сти­хий для вдох­но­ве­ния (стол­бик 3).

Что такое рефе­ренс?
Рефе­ренс (от лат. reference) — это при­ме­ры, образ­цы или источ­ни­ки вдох­но­ве­ния, кото­рые помо­га­ют дизай­не­рам и раз­ра­бот­чи­кам понять и визу­а­ли­зи­ро­вать идеи для сво­их про­ек­тов. Рефе­рен­сы могут вклю­чать в себя изоб­ра­же­ния, цве­та, шриф­ты, интер­фей­сы и дру­гие эле­мен­ты, най­ден­ные на суще­ству­ю­щих сай­тах или в дизай­нер­ских рабо­тах. Они слу­жат ори­ен­ти­ром для созда­ния ново­го дизай­на, помо­га­ют опре­де­лить стиль и функ­ци­о­наль­ность, а так­же могут иллю­стри­ро­вать жела­е­мый резуль­тат для кли­ен­та.
Мудборд этапы разработки сайта
При­мер сбо­ра рефе­рен­сов

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

Референс
Понра­вив­ший­ся рефе­ренс

Обыч­но на состав­ле­ние муд­бор­да ухо­дит 1 день.
Резуль­тат дан­но­го эта­па: опре­де­ле­на сти­ли­сти­ка буду­ще­го сай­та, шриф­ты и основ­ные цве­то­вая палит­ры.

Прототипирование

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

Про­сты­ми сло­ва­ми про­то­тип — это ске­лет сай­та. Он пока­зы­ва­ет, где будут рас­по­ла­гать­ся все эле­мен­ты на сай­та.

Прототип сайта этапы разработки сайта
Так выгля­дит про­то­тип сай­та

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

На созда­ние про­то­ти­па одно­стра­нич­но­го сай­та ухо­дит 1–3 дня. Созда­ние про­то­ти­па мно­го­стра­нич­ни­ка зани­ма­ет 3–5 дней.


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

Разработка дизайна

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

Дизайна сайта
Так выгля­дит гото­вый дизай­на сай­та

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

На дан­ном эта­пе так­же раз­ра­ба­ты­ва­ет­ся дизайн адап­тив­ных вер­сий, если это необ­хо­ди­мо. Если сайт будем вер­стать мы, то созда­вать адап­тив­ный дизайн не обя­за­тель­но, посколь­ку мы пони­ма­ем, как он будет выгля­деть в мобиль­ной вер­сии. Если у вас есть свой вер­сталь­щик, для него раз­ра­ба­ты­ва­ет­ся дизайн адап­ти­вов и UI-кит — набор гото­вых реше­ний для поль­зо­ва­тель­ско­го интер­фей­са. Это могут быть кноп­ки, поля вво­да, «хлеб­ные крош­ки», меню, пере­клю­ча­те­ли, фор­мы и дру­гие эле­мен­ты, кото­рые помо­га­ют поль­зо­ва­те­лям вза­и­мо­дей­ство­вать с сай­том или при­ло­же­ни­ем.

Что такое UI-кит?
UI-кит — это набор гото­вых эле­мен­тов интер­фей­са, таких как кноп­ки, фор­мы и икон­ки, кото­рый помо­га­ет дизай­не­рам и раз­ра­бот­чи­кам быст­ро созда­вать и сти­ли­зо­вать веб-сай­ты и при­ло­же­ния. Он обес­пе­чи­ва­ет еди­ный стиль и упро­ща­ет про­цесс раз­ра­бот­ки.

UI-кит этапы разработки сайта
При­мер UI-кит

В сред­нем на дизайн 6–10 бло­ков ухо­дит 7 дней. Дизайн мно­го­стра­нич­но­го сай­та может занять до 14 дней, в зави­си­мо­сти от объ­е­ма сай­та и необ­хо­ди­мо­сти раз­ра­бот­ки адап­тив­ных вер­сий.

Резуль­тат дан­но­го эта­па: гото­вый дизайн всех стра­ниц в сер­ви­се Figma.

Верстка

Верст­ка — это доволь­но слож­ный про­цесс. Сна­ча­ла необ­хо­ди­мо опре­де­лить, будет ли сайт создан на кон­струк­то­ре или с исполь­зо­ва­ни­ем кода (HTML, CSS и JavaScript).

Что такое верст­ка сай­та?
Верст­ка сай­та — это про­цесс пре­об­ра­зо­ва­ния дизай­нер­ских маке­тов в функ­ци­о­наль­ные веб-стра­ни­цы с исполь­зо­ва­ни­ем HTML и CSS. Она вклю­ча­ет орга­ни­за­цию кон­тен­та, оформ­ле­ние эле­мен­тов интер­фей­са и адап­та­цию для раз­лич­ных устройств. В каче­стве аль­тер­на­ти­вы мож­но исполь­зо­вать кон­струк­то­ры сай­тов, кото­рые упро­ща­ют про­цесс, поз­во­ляя созда­вать стра­ни­цы без необ­хо­ди­мо­сти писать код.

С исполь­зо­ва­ни­ем кон­струк­то­ра сай­тов дела обсто­ят про­ще: верст­ка зани­ма­ет мень­ше вре­ме­ни и тре­бу­ет мень­ших финан­со­вых затрат. (Напри­мер Tilda)

Что такое Tilda?
Tilda — это онлайн-кон­струк­тор сай­тов, кото­рый поз­во­ля­ет лег­ко созда­вать веб-стра­ни­цы без про­грам­ми­ро­ва­ния, исполь­зуя гото­вые шаб­ло­ны и бло­ки.
Tilda, Zero Block
Верст­ка в Tilda, Zero Block

Если вам нужен кор­по­ра­тив­ный сайт, кон­струк­тор, ско­рее все­го, не подой­дет — потре­бу­ет­ся раз­ра­бот­ка сай­та на коде.

Верстка сайта на коде в Sublime
Так выгля­дит верст­ка сай­та на коде, страш­но­ва­то 😱

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

Верст­ка сай­та из 6–10 бло­ков на кон­струк­то­ре зани­ма­ет око­ло 3 дней, а на коде — око­ло 7 дней.

Резуль­тат дан­но­го эта­па: пол­но­стью функ­ци­о­ни­ру­ю­щий сайт.


Вывод

Как вид­но, создать каче­ствен­ный сайт за несколь­ко дней прак­ти­че­ски невоз­мож­но. Каж­дый этап тре­бу­ет тща­тель­ной про­ра­бот­ки и обос­но­ван­ной мар­ке­тин­го­вой струк­ту­ры. Если вам нужен сайт быст­ро и деше­во, это может ска­зать­ся на его каче­стве. Лен­динг, воз­мож­но, мож­но раз­ра­бо­тать за 4 дня, но это потре­бу­ет допол­ни­тель­ных затрат и обыч­но уве­ли­чи­ва­ет сто­и­мость сай­та на 50–100%.

Если вы хоти­те полу­чить каче­ствен­ный сайт, свя­жи­тесь с нами, и мы помо­жем рас­счи­тать сто­и­мость и сро­ки раз­ра­бот­ки!


Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Сожалеем, что вы поставили низкую оценку!

Позвольте нам стать лучше!

Расскажите, как нам стать лучше?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *