Вве­де­ние

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Верст­ка

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

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

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

Реко­мен­ду­ем про­чи­тать ста­тью “Что выбрать: сайт на коде или на кон­струк­то­ре? Срав­не­ние”.

[su_custom_shortcode_4327 title=“Что такое Tilda?”]Tilda — это онлайн-кон­струк­тор сай­тов, кото­рый поз­во­ля­ет лег­ко созда­вать веб-стра­ни­цы без про­грам­ми­ро­ва­ния, исполь­зуя гото­вые шаб­ло­ны и бло­ки.[/su_custom_shortcode_4327]

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

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

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

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

Вывод

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

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