Как самостоятельно сделать хороший дизайн сайта и печатной продукции

Как самостоятельно сделать хороший дизайн сайта и печатной продукции
Как самостоятельно сделать хороший дизайн сайта и печатной продукции

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

Поделитесь этими советами с друзьями.

О видах и формах буклетов, о том, как составить грамотное техническое задание, на встрече рассказал Денис Бондарев, дизайнер и фрилансер.

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

По содержанию буклеты разделяют на несколько типов:

  • инфор­ма­ци­он­ные;
  • ими­д­же­вые;
  • для поч­то­вой рас­сыл­ки;
  • по акции.

Пер­вая груп­па содер­жит инфор­ма­цию о това­ре или услу­ге про­из­во­ди­те­ля. Основ­ное тре­бо­ва­ние к таким бук­ле­там – заин­те­ре­со­вать потре­би­те­ля. Здесь при­ня­то рисо­вать кар­тин­ки, чер­те­жи, через гра­фи­ку доно­сить инфор­ма­цию.

Основ­ные ошиб­ки – пере­гру­жен­ность инфор­ма­ци­ей, стрем­ле­ние рас­ска­зать о това­ре как мож­но боль­ше. Сто­ит пом­нить, что писать мно­го тек­ста и рисо­вать мно­го гра­фи­ков не нуж­но.

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

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

А послед­ний тип – по акции – мы часто видим в мага­зи­нах.

По форме все буклеты можно разделить на:

  • стан­дарт­ные (А3, А4, А5);
  • евро­фор­мат;
  • мно­го­стра­нич­ный бук­лет (бро­шю­ра).

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

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

Пре­иму­ще­ство – объ­ем пред­став­лен­ной инфор­ма­ции, посколь­ку каж­дая новая стра­ни­ца содер­жит текст и кар­тин­ку.

Печать такой про­дук­ции быва­ет двух видов: офсет­ная и на лазер­ном прин­те­ре. Пер­вым спо­со­бом про­из­во­дят­ся боль­шие тира­жи (не менее 500 экзем­пля­ров). Это самый деше­вый спо­соб.

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

Для печа­ти исполь­зу­ет­ся бума­га плот­но­стью от 120 до 250 грамм. Если бума­га тон­кая, ее фаль­цу­ют, т.е. скла­ды­ва­ют. Если плот­ная – дела­ют бигов­ку.

Человек держит в руках буклет минут 5–7. За это время он должен понять всю информацию, которая в нем есть. Поэтому, как уже было сказано, ее не должно быть много. Лучший вариант, когда часть информации передана с помощью графики. Человек любит смотреть, а не читать. Первое, что может его привлечь, – обложка. Сделать ее нужно так, чтобы она захватывала внимание.

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

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

Для того что­бы создать макет бук­ле­та, суще­ству­ют два основ­ных паке­та про­грамм: CorelDRAW и Adobe. Напри­мер Adobe InDesign – мощ­ная про­грам­ма, но в ней слож­но рабо­тать нович­ку. Ее нуж­но изу­чать.

Самый удоб­ный для рабо­ты – CorelDRAW. Она поз­во­ля­ет манев­ри­ро­вать тек­сто­вы­ми фраг­мен­та­ми, кар­тин­ка­ми, цве­та­ми и про­чим. Вооб­ще, для этой рабо­ты необ­хо­ди­мы базо­вые пред­став­ле­ния о цве­то­вых моде­лях, напри­мер, CMYK.

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

Изоб­ра­же­ние долж­но быть каче­ствен­ным (мини­мум 300 пик­се­лей на дюйм). Нуж­но дать понять, что вы хоти­те видеть в ито­ге. Какие эле­мен­ты круп­нее, где раз­ме­стить лого­тип, текст, какая цве­то­вая гам­ма и так далее.

Так созда­ет­ся стан­дарт­ный бук­лет.

А если гово­рить о чем-то ори­ги­наль­ном, то уяс­ним одно: в Пен­зе кре­а­тив не нужен. И это уже про­ве­ре­но неод­но­крат­но. У людей пред­став­ле­ние о вещах бази­ру­ет­ся на несколь­ких сте­рео­ти­пах.

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

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

Выступает Светлан Гущин. Фото
Высту­па­ет Свет­лан Гущин. Фото: Вик­то­рия Костен­ко.

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

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

Сайт – это, преж­де все­го, элек­трон­ный спо­соб пере­да­чи инфор­ма­ции, обык­но­вен­ный инстру­мент. Поэто­му боль­ше вре­ме­ни сле­ду­ет потра­тить на то, что­бы отве­тить на вопрос – «для чего этот сайт?», а не «как сде­лать его луч­ше и кра­си­вее?».

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

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

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

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

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

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

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

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

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

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

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

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

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

Текст: Вик­то­рия Костен­ко.