Тз для дизайнера: Как ставить ТЗ дизайнерам. Гайд для клиентов / Хабр

Содержание

Как ставить ТЗ дизайнерам. Гайд для клиентов / Хабр

Командой Lemon.media собрали свой опыт и подготовили гайд, как прийти к взаимопониманию с дизайнерами. Читайте ниже:

Многие недооценивают технические задания или брифы в дизайн-студиях. И на момент между «нам нужен новый лого» и «новый лого» закладывают слишком мало времени и сил. Хотя простонародное ТЗ — это залог, что нужный вам лого вообще появится.

Поэтому сегодня разберемся, как ставить ТЗ/заполнять бриф, чтобы результат был не ХЗ.

От каких проблем убережет грамотное ТЗ

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

Грамотное же техническое задание предотвращает от множества проблем. Каких именно, разберем на примерах:

1. Представьте, что вы хотите лого с парусом в верхнем левом углу. В ТЗ дизайнеру написано — на лого должен быть парус. В итоге 50/50, что он будет расположен в верхнем левом углу. И если нет, будут правки, переделки, возможно придется менять композицию и тд. Это долго и ресурсозатратно.

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

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

Здесь советуем максимально подробно обсудить с ЛПР-ами концепцию и согласовать ее. А потом так же подробно расписать все для студии/дизайнера и тд. Либо можно ограничить круг тех, кто принимает дизайн.

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

На что обратить внимание

Окей, с возможными проблемами разобрались. Теперь о том, на что обратить внимание:

1. Контекст задачи

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

Пример, как стоит ответить на вопрос в брифе

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

2. Целевая аудитория

Сосредоточьтесь на описании целевой аудитории. Так как дизайн в первую очередь должен привлекать её. И нужно будет найти компромисс между вашим видением и тем, как будут воспринимать бренд потенциальные клиенты.

Прям распишите: возраст, пол, сферу интересов, боли, мечты.

Например: молодые мамы 20-30 лет, в детских вещах ценят качество и минимализм. Им не нравятся слишком яркие цвета игрушек, поэтому большинство магазинов детских товаров их бесит.

К сожалению, несовпадение желаний клиента и ЦА — частая проблема. И здесь стоит отойти от своих «хочу» и выбрать то, что будет эффективно и понятно аудитории.

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

3. Информация о вас

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

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

4. Форматы

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

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

5. Добавьте примеров

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

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

Где искать референсы: pinterest, behance, брендинг конкурентов или смежных областей.

Помните о сроках

На всякий случай уточним, история «мне нужен логотип через 2 часа, потому что я печатаю наклейки» — не работает.

Самый важный момент в коммуникации с заказчиком — адекватно оценивать сроки и объем задачи. А лучше сначала уточнить, за сколько возможно сделать определенную работу и после поставить дедлайны.

Если что-то срочное, можно поговорить о более быстром исполнении (скорее всего за доплату).

Ещё, когда у вас объемная задача типа — 10 страниц сайта и фирменный стиль — разбейте ее на подзадачи и обсудите дедлайны промежуточных согласований.

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

Резюмируем

Дайте как можно больше информации о продукте и аудитории. Каждая мелочь может существенно повлиять на восприятие.
Заложите на составление ТЗ много времени. Так как в этом деле нужна максимальная подробность и въедливость в детали.
Если несколько человек принимают решение, согласуйте ТЗ со всеми. Это поможет избежать разногласий внутри вашей компании.
Не забывайте прописывать форматы и размеры нужного вам дизайна. Конечно, просто любой дизайнер не сделает, но время на дополнительный вопрос и ожидание ответа вы потратите вместе.

7 правил, или, как написать ТЗ для дизайнера | Альянс Свободных Предпринимателей

Хочешь сделать хорошо — сделай сам? Мы бы поспорили.
Хочешь сделать хорошо — расскажи Хорошему исполнителю что и как. Такой подход сработает всегда.

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

В статье даем советы, как правильно составить ТЗ для дизайнера.

1. Начать с формы.

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

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

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

2. Поделиться информацией о компании или проекте.

Дизайнер не придумает бизнес за вас. Поэтому расскажите о проекте или компании. Кто вы? Чем вы занимаетесь? Какие цели стоят перед вами? Какие интересные и полезные «фишки» есть у вас?

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

Добавляем в файл информацию:

какие квесты у нас есть;
почему они нравятся детям;
как проходит игра;
почему праздник запомнится;
стоимость и что в нее входит;
социальные доказательства: сколько праздников провели, фотографии и отзывы.

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

3. Обозначить целевую аудиторию.

Описать ваших клиентов — важный пункт того, как составить ТЗ для дизайнера. Знание, кто клиент и чего он хочет, помогает оправдать ожидания.
Пусть информация о ЦА не будет формальной. Лучше узнать основные характеристики у менеджеров по продажам или администраторов.

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

Тогда ЦА можно описать как:

женщины 25 — 35 лет;
мамы детей 7 — 12 лет;
читают и смотрят вместе с детьми сказки;
ценят качественное обслуживание и соотношение цены и качества.

Для целевой аудитории мы добавили блок: почему квест нравится детям. Дизайнер знал плюсы и особенности нашей работы. Вот что получилось:

4. Показать примеры.

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

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

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

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

Примеры приблизят вас к тому, как правильно составить ТЗ для дизайнера.

5 способов, как быстро составить логотип

5. «Поиграть со шрифтами»

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

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

Так вы разом решите проблему «брутальный шрифт на романтично розовом фоне».

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

6. Учитывать сроки исполнения

Что-то можно отрисовать за 2 часа, а что-то за 2 месяца. Обсудите сроки сдачи, бонусы за раннюю сдачу и штрафы за задержку.

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

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

Как проверить дизайнера и где его найти рассказываем тут

7. Уважать дизайнера

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

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

Понять, что все идет хорошо — просто. По результатам нет большого количества правок. Если вы в 10 раз переделываете макет, вероятно, что ТЗ составлено нечетко и стоит его пересмотреть.

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

О том как создать постоянный поток клиентов в бизнес с помощью социальных сетей и силы интернета мы рассказываем на открытой онлайн-встрече.

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

Удачи!

надо ли и как писать. Критика примера / Хабр

При создании объекта есть два способа описать требования: «что должен уметь/делать объект» (описание цели) и «каким должен быть объект» (описание реализации). Прощу прощения если формулировка не точна, источника сией мысли я не знаю, формулирую сам. Далее речь пойдет о втором способе описания объекта — дизайна сайта.

Есть два вопроса: нужно ли формализованное ТЗ на дизайн и если да, как его следует писать? Мое мнение, что ТЗ необходимо, а как его писать… мне нравится приложенный пример. Предлагаю рассмотреть и покритиковать. Естественно, не суть, а скорее форму изложения и перечень рассмотренных вопросов.
Интересует мнение руководителей проектов, арт-директоров и дизайнеров.

Разработке подлежит дизайн сайта компании АА (имя сайта АА-company.ru)

Исходные материалы: логотип, визитка, буклет, примеры продукции компании, фотографии работ, текстовое наполнение (15 стр в doc).

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

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

Конкуренты
Основные:

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

— Конкурент 2
Достоинства: обширное портфолио.
Недостатки: дизайн сайта крайне примитивен, как и навигация.

— Конкурент 3
Достоинства: яркая, хотя и не очень впечатляющая, графика. Много грамотно написанных текстов (встречаются ошибки).
Недостатки: каталог товаров и услуг не проиллюстрированы фотографиями и ценами. приходится качать файлы прайсов.

Дополнительно рассмотрены:

— Конкурент 4
Достоинства: достаточно интересный классический дизайн
Недостатки: внутренние страницы, в частности по сувенирке, не проработаны. масса странных ссылок и страшных фотографий

— Конкурент 5
Достоинства: нет.
Недостатки: скучный дизайн, примитивное оформление страниц

— Конкурент 6
Достоинства: удачный дизайн с применением флеш-элементов. Персонажики повсюду. Применены разумно. Много различного контента.
Недостатки: сайт не растягивается, что портит неплохой дизайн (половина экрана белая), внутри проблемы со структурой страниц.

— Конкурент 7
Достоинства: нетрадиционный дизайн во всем: структура, шрифты
Недостатки: шрифты трудночитаемы, фотографии размещены неудобно для скачивания, внутри стиль первой и вторых страниц не соблюдается.

— Конкурент 8
Достоинства: яркий и простой дизайн с применением флеш-анимации. Простая и понятная навигация.
Недостатки: шрифты страниц неконтрастны, плохо читаемы.
Хороший дизайн и концепцию испортили наполнением.

— Конкурент 9
Достоинства: проработанный дизайн, множество иллюстраций
Недостатки: внутри сайта нет фотографий, тексты смотрятся слепыми

— Конкурент 10
Достоинства: яркий дизайн, качественное наполнение, удачная флеш-анимация.
Недостатки: нет

— Конкурент 11
Достоинства: любовно и старательно наполнен
Недостатки: некоторые странные решения по дизайну и огрехи по наполнению
В целом очень достойно

— Конкурент 12
Достоинства: яркие страницы, простой и хорошо структурированный каталог.
Недостатки: глаза устают.
Сайт абсолютно классический, на твердую 4.

— Конкурент 13
Достоинства: флешка красивая.
Недостатки: крайне неприятная цветовая гамма, наполнение сделано странно.

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

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

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

Слоган для использования на сайте:
главная ценность нашей компании — наши клиенты

Сайты, на стиль исполнения которых следует обратить внимание, т.к. они нравятся заказчику:
www.alfa-suvenir.ru
www.elenara.ru
www.tipograf.info
www.vremenagoda.biz
www.viveska.info
www.emotiondesign.ru
www.driada-pr.ru — не открылся
www.corporative.ru
www.credo-positive.ru

Образцами можно считать:
alfa-suvenir.ru — да
www.viveska.info — да, построение шапки, стиль оформления текстов и меню
www.vremenagoda.biz — да, структура страницы. можно использовать как образец при наличии исходных материалов для создания коллажей. создание иллюстраций не включается в разработку сайта

Пункты меню главной страницы:
О компании
Новости
Услуг
Портфолио
Контакты
Полезно знать (статьи о рекламе)
Заказать

Оплаченные модули и графические средства:
— статичный дизайн — да
— анимация — нет
— система текстовых страниц
— каталог услуг
— лента работ
— лента заказчиков
— лента новостей
— лента статей (полезно знать)
— форма заказа

На всех страницах — шапка, меню, логотип.

Первое предлагаемое решение по созданию дизайна сайта.
Сайт создается как растягивающийся на любую ширину страницы.
1. Стартовая и внутренние страницы имеют разную структуру. общие цвета: белый/кремовый, оранжевый, гамма синего, буквы черные.
2. Стартовая страница:
— содержит крупный логотип (до 25% высоты сайта) и в качестве шапки цветовую полосу (может быть неправильной формы) с блоками, иллюстрирующими направления деятельности (или конкретные работы) компании
— имеет структуру, собранную из информационных блоков: о компании, наши преимущества, что умеем, полезно знать, последние работы, наши услуги, новости, баннер перехода на форму, возможно еще что-то (скомпоновано по принципу www.ra-alterego.ru/?id=manufacture). Каждый блок построен по принипу вынесения главного или самого современного. Все блоки одного размера. В будущем возможно расширение и обновление сайта путем замены одного блока на другие.
2. Основные страницы (портфолио, клиенты, новости, услуги):
— логотип и шапка имеют меньшую высоту (10-15%), шапка содержит коллаж из работ или иллюстрацию (при наличии)
— имеют трехколоночное построение (лого, шапка, вертикальное меню, поле дополнительной иформации). В поле дополнительной информации выводятся небольшие блоки информации, которая может быть интересна при просмотре раздела (в новоястях-портфолио, в клиентах-услуги и т.п.) или блоки, аналогичные блокам на главной.
3. Внутренние и текстовые страницы имеют двухколоночное представление: шапка+меню+текст страницы.
4. Наобходимо придумать визуальное решение, позволяющее подчеркнуть широкий спектр оказываемый услуг и собственную производственную базу.

Второе предлагаемое решение по созданию дизайна сайта.
Идея решения заключается в использовании в дизайне в качестве рамки символов печати (штампа), сувенирной продукции, других примеров продукции компании. Сайт будет иметь фиксированную ширину. По периметру располагаются графические элементы, созданные на основе графики продукции компании (печати, буклеты, сувенирка).
По высоте сайт растягивается либо путем добавления белого пространства слева и справа по периметру, либо повторяющегося рисунка.
1. Стартовая и внутренние страницы имеют разную структуру. общие цвета: белый фон, графика фона с приглушенными серо-сине-желтыми тонами, заголовки в гамме синего, буквы черные.
2. Стартовая страница:
— содержит крупный логотип (до 25% высоты сайта) и левое текстовое меню с графическими маркерами (стиль как на www.viveska.info)
— имеет структуру, собранную из вертикально следующих информационных блоков: о компании, наши преимущества, что умеем, полезно знать, последние работы, наши услуги, новости. Каждый блок построен по принципу вынесения главного или самого современного. Все блоки одного размера. В будущем возможно расширение и обновление сайта путем замены одного блока на другие.
Под меню можно разместить ленту работ.
2. Основные страницы (портфолио, клиенты, новости, услуги):
— логотип имеет меньшую высоту (10-15%), левая колонка содержит коллаж из работ или иллюстрацию (при наличии)
— имеют двухколоночное построение (лого вертикальное меню).
3. Внутренние и текстовые страницы имеют двухколоночное представление: шапка+меню+текст страницы.

ТЗ написано по результатам изучения брифа, двух бесед с руководителем и изучения продукции заказчика.
Имена заказчика и конкурентов я поубирал. Если кто-то поделится своими образцами или требованиями к ТЗ на дизайн (из фрилансеров), будет здорово.

Как составить ТЗ для разработчика и веб-дизайнера

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

Что такое ТЗ и кому оно нужно

ТЗ — это документ, в котором прописаны все требования к создаваемому продукту. В нашем случае — к сайту или интернет-магазину. Помните поговорку “без внятного ТЗ — результата ХЗ”? Вот это оно и есть: если задание будет малоинформативным, размытым, непонятным — такой же сайт вы в итоге получите. Если вообще получите: хорошие веб-дизайнеры не возьмутся за работу, пока все детали не будут четко обговорены. Никому не хочется работать телепатом и угадывать желания заказчика. Никому не хочется тратить время и выполнить работу, которая потом не понравится и не будет оплачена. В то же время, если ТЗ не выполнит исполнитель, у заказчика появляется законное право напомнить ему обязательства и потребовать внесения правок.

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

Кто должен составлять ТЗ?

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

И правильно делают! Больше того: клиентам и не нужно знать об основных правилах веб-дизайна или способов повышения конверсии. Они не маркетологи, не продажники, не пиарщики. Они — владельцы бизнеса, которые заказывают услугу по разработке сайта. За свои деньги заказчики хотят получить крутой продающий сайт и вовсе не обязаны знать, КАК это будет сделано. Именно поэтому брифы и ТЗ серьезным компаниям составляют специальные люди. Как правило, это рекламные агентства, digital-студии, проект-менеджеры или сами разработчики.

Так что же получается, ТЗ должен составлять исполнитель? Скажем так, лучше делать этот этап в соавторстве. Без участия заказчика тоже ничего дельного не выйдет: исполнитель не знает тонкостей вашего бизнеса, ЦА и ее проблем, основных возражений клиентов, каналов сбыта и доставки. Обо всем этом заказчик сайта должен рассказать без утайки, как на духу. Только в этом случае он получит сайт точно по индивидуальному проекту.

Итак, что в ТЗ должен написать клиент?

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

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

Что должен указать исполнитель?

описать требования к хостингу, систему управления сайтом, инструменты, на которых будет проходить работа. В общем, вся техническая сторона;
структура сайта — чем подробнее, тем лучше. Хорошие спецы продумывают структуру каждой страницы вплоть до отдельных элементов. Можно составить прототипы, чтобы наглядно показать заказчику, что его ждет;
дизайн сайта: типографика, основные цвета, шрифты, фоны;
рекламные баннеры и место их размещения;
интерактивные элементы и их расположение;
список контента, если это входит в ТЗ;
отдельным пунктом можно указать словарь терминов, которые использовались в ТЗ. Лучше упростить и объяснить все простыми словами, но в крайнем случае можно сделать сноски и пояснения.

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

Теперь давайте подробнее рассмотрим основные пункты ТЗ

1. Информация о компании

Это все, что относится к вашей компании и может повлиять на особенности создания сайта. Если разработана миссия и корпоративная культура — можно отобразить это на главной странице. Если сформирован коллектив профессионалов — можно создать раздел “Лица”, поместить фотографии сотрудников и коротко рассказать о каждом. Если четко определена целевая аудитория — нужно делать сайт и дизайн конкретно под нее. Каждая информация может стать ниточкой, потянув за которую, у разработчика может возникнуть огненная идея.

2. Технические требования

Если у вас как у заказчика есть пожелания по требованиям к хостингу, панели администратора, движку сайта — обязательно укажите их. У разработчика могут быть свои любимые инструменты — ваши мнения могут не совпасть. И да, если ТЗ составляет исполнитель, техническая сторона должна быть отображена максимально полно.

3. Адаптивная версия

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

4. Структура сайта

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

пункты меню (если это интернет-магазин — главная страница, “О компании”, “Условия оплаты и доставки”, “Политика конфиденциальности”, блок вопросов-ответов;
каталог товаров — категории, подкатегории, фильтры, метки или теги;
основные интерактивные элементы (кнопка корзины, иконки соцсетей, виджет обратной связи, сервис товарных рекомендаций и другие фишки).

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

5. Возможные сценарии

Сайт — это не простая линейная структура, но и цепочки взаимодействия с посетителями. Вот и нужно написать, как все это работает. Например, посетитель смотрит карточку товара, кладет его в корзину. Затем сайт предлагает посмотреть рекомендованные товары — отлично, пользователь переходит на другую страницу, опять наполняет корзину. Видит кнопку “Перейти в корзину”, идет туда и жмет на кнопку “Оформить заказ”. И далее по плану.

6. Контент на сайте

Если заказчик заказывает еще и контент — это обговаривается отдельно. Контент — это тексты, фото, видео, анимация — любая информация, которая дается посетителю. Исполнители пишут обычно текст на главную, новости, страницу “Услуги”, часто задаваемые вопросы и ответы на них, карточки товаров, статьи для блога.

7. Дизайн сайта

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

Каким должно быть ТЗ? Базовые правила для заказчика и исполнителя

На что нужно обратить внимание, чтобы облегчить жизнь и себе, и исполнителю?

1. Не пишите размыто. “Сделать сайт круче, чем у…” — весьма достойная цель, но что входит в понятие “круче”? Когда вы составляете бизнес-план на ближайший год, вы же не пишете в нем “стать еще круче, чем были”, а указываете точные цифры: “увеличить годовой оборот на 10 %”, “расширить ассортимент на три категории” и “заключить договоры с поставщиками М и Ж”. Да и оцениваете эффективность бизнеса и рекламного продвижения вы не по пятибалльной шкале, а с помощью специальных показателей. Так и здесь: ставьте четкие цели и задачи: добиться конверсии не менее 5-10%; привлечь дополнительную ЦА — молодежь и студентов, отбить часть рынка у таких-то конкурентов.

Изучая ТЗ, который прислал исполнитель, обратите внимание на отсутствие сложных терминов, понятных лишь специалистам. И, конечно, без воды и неточностей: “современные виджеты обратной связи” — это прекрасно, но позвольте спросить, какие? Заказчик тоже имеет право это знать. Для того и пишется ТЗ, чтобы обе стороны как можно лучше поняли друг друга.

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

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

3. Дайте всего да побольше. Знаете, каких собеседников любят журналисты? Разговорчивых. Пусть наговорит всего и побольше — из этого проще сделать классное интервью, чем из односложных ответов молчуна. Так и здесь: не умалчивайте информацию, давайте ее как можно больше. Когда в ТЗ входит наполнение сайта контентом — пришлите все, что у вас есть. Если даже добрая половина не войдет в итоговый вариант сайта — ну и что, пусть будет. Профессионал выберет из горы информации лучшее.

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

А если ТЗ не нравится?

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

А что потом?

А потом — кипи, работа! Исполнители (чаще это разработчик и веб-дизайнер) анализирует ТЗ, вносит правки при необходимости и начинают колдовать над будущим сайтом. Создают в специальных программах прототипы каждой страницы, прорисовывают детали вплоть до мелких — иконок, кнопок призыва к действию, делают красочный дизайн, наполняют сайт современными функциями. В зависимости от договоренности многие показывают работу клиенту на промежуточном этапе — тот согласовывает ее с ТЗ, оценивает визуально (нравится — не нравится). Если все хорошо — работа идет дальше до победного конца.

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

Как писать четкие ТЗ программистам, дизайнерам и даже себе — Карьера на vc.ru

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

Красивая картинка для обложки статьи — будет отлично смотреться при шейринге везде! Используйте этот лайфхак :) by designers from Dupers!

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

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

Заголовок/название задачи должен отвечать на вопрос «Что Сделать?»

Хорошие примеры:

Разработать дизайн анимированных баннеров для FB/Insta & Google для {CLIENTNAME}
Исправить отображение страницы /pricing на мобильных устройствах

Плохие примеры:

Баннеры для {CLIENTNAME}
Верстка на странице цен

Ответ на вопрос «что сделать?» уже подразумевает действие и побуждает к нему
В хорошо сформулированной задаче должен быть видимый/ощутимый результат
Когда ты понимаешь желаемый результат — в итоге меньше прокрастинации и больше готовности приступить к задаче и сделать ее

Заголовок задачи должен давать понимание приблизительного объема работы

7 советов по составлению ТЗ для дизайнера

В советское время дизайнеров называли художниками-оформителями. Название сменилось, а суть осталась. Дизайнер — тот человек, который просто оформляет конкретную бизнес-идею, слова и цифры в приемлемую визуальную форму. И все. Кто-то делает это лучше, кто-то — хуже. Но конечный результат всегда зависит от чёткости постановки задач. Не зря ведь говорят «Без внятного ТЗ — результат ХЗ». Дизайнер Ника Александрова даёт советы о том, как составить понятное техническое задание для дизайнера.

1. Опишите свой бизнес в деталях

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

2. Аргументируйте

Когда я вижу странное цветовое сочетание или нагромождение информации в ТЗ, то каждый раз спрашиваю: «Зачем?». Ответ часто такой: «Ну вот хочется. Сделай просто и все».

Мне не жалко, но лучше объяснять почему вы хотите именно это и именно так. Может просто клиент боится, что его вывеску не будет видно на фоне здания? Я сделаю вывеску красной, а она сольется с соседней. А если бы нарисовали белую, то всё выглядело бы лучше. Если дизайнер знает, в чем истинная проблема, ему будет проще её решить.

3. Набросайте примеров

Сделать высококлассный проект можно в рамках любого бюджета. Это реально. Надо просто чётко задать дизайнеру вектор проекта.

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

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

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

4. Начинайте с формата

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

5. Подберите цветовое решение

Подбор цвета злит обычно обе стороны. У меня в голове зеленый цвет — это салатовый ближе к желтому. Многие, представляя себе зеленый, видят скорее изумрудный цвет. У всех разные цвета в голове — это факт. А что видите вы, когда думаете про зеленый цвет?

Если хотите конструктивно обсудить цвета с дизайнером, подберите гамму в интернете. Например здесь — http://color.romanuke.com/

Все вопросы на тему «размыто-зеленых» и «задумчиво-лиловых» решаются этим же способом.

6. Определитесь со шрифтами

Есть несколько тысяч разных шрифтов, но их типов гораздо меньше. Клиент не обязан знать чем антиква отличается от гротеска, но есть выход: https://www.google.com/fonts/.

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

7. Учитываем реальные сроки

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

Как понять, что все идет как надо и первоначальное задание было составлено хорошо?

Очень просто: нет большого количества правок. Это до 5 итераций, которые по времени не занимают больше 2-3 часов каждая (хотя, конечно, на больших проектах это время может быть и значительно больше). Когда на почту прилетает тридцатый по счету вариант правок, то становится ясно, что либо где-то неправильно составили ТЗ, либо людей, влияющих на принятие решения о дизайне, многовато.

Об авторе:

Ника Александрова,

дизайнер

Поделиться ссылкой:

Понравилось это:

Нравится Загрузка…

Как ставить ТЗ дизайнерам. Гайд для клиентов — Дизайн на vc.ru

Многие недооценивают технические задания или брифы в дизайн-студиях. И на момент между «нам нужен новый лого» и «новый лого» часто закладывают слишком мало времени и сил.

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

От каких проблем убережет грамотное ТЗ

Грамотное же техническое задание предотвращает от множества проблем. Каких именно, разберем на примерах:

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

2. Еще момент — проблемы удваиваются, когда несколько людей согласовывают дизайн. Есть риск, что вы разойдетесь во мнении не только с дизайнером, но и с коллегами. Здесь советуем максимально подробно обсудить с ЛПР-ами концепцию и согласовать ее.

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

3. Если дело все дошло до правок — не оставляйте подробности. Замечания в духе «не зажигает»/«хочется чего-то другого» делу не помогут, нужен только констр

Создание графического интерфейса на Python 3 с Tkinter ~ PythonRu

В этом уроке мы узнаем, как разрабатывать графические пользовательские интерфейсы, с помощью некоторых примеров графического интерфейса Python с использованием библиотеки Tkinter.

Библиотека Tkinter установлена в Python в качестве стандартного модуля, поэтому нам не нужно устанавливать что-либо для его использования. Tkinter — очень мощная библиотека. Если вы уже установили Python, используйте интегрированную интегрированную IDE, используя Python, эту IDE, написанную с использованием Tkinter.Звучит круто!

Мы будем использовать Python 3.7, поэтому, если вы все еще используете Python 2.x, следует перейти на Python 3.x, если вы не в курсе нюансов изменения языка, с целью, чтобы вы могли настроить код для запуска без ошибок.

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

Создание своего первого графического интерфейса

Для начала следует импортировать Tkinter и создать окно, в котором мы зададим его название:

  из tkinter import *


окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.mainloop ()

Результат будет выглядеть следующим образом:

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

В случае, если вы забудете вызвать функцию mainloop , для пользователя ничего не отобразится.

Создание виджета Этикетка

Чтобы добавить текст в наш предыдущий пример, мы создадим фунтов , с помощью класса Label , например:

  lbl = Этикетка (окно, текст = "Привет")

Затем мы установим позицию в окне с помощью функций grid и укажем ее следующим образом:

  фунт.сетка (столбец = 0, строка = 0)

Полный код, будет следующим образом выглядеть:

  из tkinter import *
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
lbl = Метка (окно, текст = "Привет")
lbl.grid (столбец = 0, строка = 0)
window.mainloop ()

И вот как будет выглядеть результат:

Если функция grid не будет вызвана, текст не будет отображаться.

Настройка размера и шрифта текста

Вы можете задать шрифт текста и размер. Также можно изменить стиль шрифта. Для этого передайте параметр font таким образом:

  lbl = Этикетка (window, text = "Привет", font = ("Arial Bold", 50))

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

Отлично, но стандартное окно слишком мало.Как насчет настройки размера окна?

Настройка размеров окна приложения

Мы можем установить размер окна по умолчанию, используя функцию geometry следующим образом:

  окно. Геометрия ('400x250')

В приведенной выше строке устанавливается ширина до 400 пикселей и высотой до 250 пикселей.

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

Добавление виджета Кнопка

Начнем с добавления кнопки в окно.Кнопка создается и добавляется в окно так же, как и метка:

  btn = Кнопка (window, text = "Не нажимать!")
btn.grid (столбец = 1, строка = 0)

Наш код будет выглядеть вот так:

  из tkinter import *
  

окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
lbl = Label (window, text = "Привет", font = ("Arial Bold", 50))
lbl.grid (столбец = 0, строка = 0)
btn = Кнопка (window, text = "Не нажимать!")
btn.сетка (столбец = 1, строка = 0)
window.mainloop ()

Результат будет следующим:

Обратите внимание, что мы помещаем во второй столбец окна, что равно 1. Если вы забудете и поместите кнопку в том же столбце, который равен 0, он покажет только кнопку.

Изменение цвета текста и фона у Кнопка

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

  btn = Кнопка (window, text = "Не нажимать!", Bg = "black", fg = "red")

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

Кнопка Нажмите

Для начала, мы запишем функцию, которую нужно выполнить при нажатии кнопки:

  def нажал ():
    lbl.configure (text = "Я же просил ...")

Затем кнопки мы подключим ее с помощью, указав новую функцию:

  btn = Кнопка (окно, текст = "Не нажимать!", Команда = нажата)

Обратите внимание: мы пишем защелкивались , а не защелкивались () с круглыми скобками.Теперь полный код будет выглядеть так:

  из tkinter import *
  
  
def clicked ():
    lbl.configure (text = "Я же просил ...")
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
lbl = Label (window, text = "Привет", font = ("Arial Bold", 50))
lbl.grid (столбец = 0, строка = 0)
btn = Кнопка (окно, текст = "Не нажимать!", команда = нажата)
btn.grid (столбец = 1, строка = 0)
окно.mainloop ()

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

Круто!

Получение ввода с использованием класса Entry (текстовое поле Tkinter)

В предыдущих примерах GUI Python мы ознакомились со способами добавления простых виджетов, теперь попробуем получить пользовательский ввод, используя класс Tkinter Entry (текстовое поле Tkinter).
Вы можете создать текстовое поле с помощью класса Tkinter Entry следующим образом:

  txt = Запись (окно, ширина = 10)

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

  из tkinter import *
  
  
def clicked ():
    lbl.configure (text = "Я же просил ...")
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
lbl = Метка (окно, текст = "Привет")
lbl.grid (столбец = 0, строка = 0)
txt = Запись (окно, ширина = 10)
txt.grid (столбец = 1, строка = 0)
btn = Кнопка (окно, текст = "Не нажимать!", команда = нажата)
btn.сетка (столбец = 2, строка = 0)
window.mainloop ()

Полученный результат будет выглядеть так:

Теперь, если вы нажмете кнопку, она покажет то же самое старое сообщение, но что же будет с отображением введенного текста в виджет Запись ?

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

  def нажал ():
    res = "Привет {}".формат (txt.get ())
    lbl.configure (текст = res)

Если вы нажмете на кнопку — появится текст «Привет» вместе с введенным текстом в виджете записи. Вот полный код:

  из tkinter import *
  
  
def clicked ():
    res = "Привет {}". format (txt.get ())
    lbl.configure (текст = res)
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
lbl = Метка (окно, текст = "Привет")
фунт.сетка (столбец = 0, строка = 0)
txt = Запись (окно, ширина = 10)
txt.grid (столбец = 1, строка = 0)
btn = Кнопка (окно, текст = "Клик!", команда = нажата)
btn.grid (столбец = 2, строка = 0)
window.mainloop ()

Запустите вышеуказанный код и проверьте результат:

Прекрасно!

Каждый раз, когда мы запускаем код, нам нужно нажать на виджет ввода, настроить фокус на ввод текста, но как насчет автоматического фокуса?

Установка фокуса виджета ввода

Здесь все очень просто, это вызвать функцию focus :

  txt.фокус ()

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

Отключить виджет ввода

Чтобы отключить виджет ввода, отключите свойство состояния:

  txt = Entry (окно, ширина = 10, состояние = 'отключено')

Теперь вы не сможете достичь какой-либо текст.

Добавление виджета Combobox

Чтобы добавить виджет поля с выпадающим списком, використовуйте класс Combobox из ttk следующим образом:

  от tkinter.ttk import Combobox


combo = Поле со списком (окно)

Затем добавьте свои значения в поле со списком.

  из tkinter import *
из tkinter.ttk import Combobox
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
combo = Поле со списком (окно)
combo ['values'] = (1, 2, 3, 4, 5, «Текст»)
combo.current (1)
combo.grid (столбец = 0, строка = 0)
окно.mainloop ()

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

  combo.get ()

Добавление виджета Checkbutton (чекбокса)

С целью создания виджета checkbutton , використовуйте класс Checkbutton :

  от tkinter.ttk import Checkbutton


chk = Checkbutton (window, text = 'Выбрать')

Кроме того, вы можете задать значение по умолчанию, передается его параметр var в Checkbutton :

  из tkinter import *
из tkinter.ttk import Checkbutton
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
chk_state = BooleanVar ()
chk_state.set (Истина)
chk = Checkbutton (window, text = 'Выбрать', var = chk_state)
чк.сетка (столбец = 0, строка = 0)
window.mainloop ()

Посмотрите на результат:

Установка состояния Checkbutton

Здесь мы создаем переменную типа BooleanVar , которая не является стандартной Python, это переменная Tkinter, затем передаем ее классу Контрольная кнопка , чтобы установить состояние чекбокса, как True в приведенном выше примере.

Вы можете установить для BooleanVar значение false, что бы чекбокс не был отмечен.
Так же, використовуйте IntVar вместо BooleanVar и установите значения 0 и 1.

  chk_state = IntVar ()
chk_state.set (0)
chk_state.set (1)

Эти примеры дают тот же результат, что и BooleanVar .

Добавление виджетов Радиокнопка

Чтобы добавить радио кнопки, використовуйте класс RadioButton :

  rad1 = Radiobutton (window, text = 'Первый', value = 1)

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

  из tkinter import *
из tkinter.ttk import Radiobutton
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
rad1 = Radiobutton (window, text = 'Первый', value = 1)
rad2 = Radiobutton (окно, текст = 'Второй', значение = 2)
rad3 = Radiobutton (окно, текст = 'Третий', значение = 3)
rad1.grid (столбец = 0, строка = 0)
rad2.grid (столбец = 1, строка = 0)
rad3.grid (столбец = 2, строка = 0)
окно.mainloop ()

Результатом вышеприведенного кода будет следующий:

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

  rad1 = Radiobutton (окно, текст = 'Первая', значение = 1, команда = нажата)

def clicked ():

Достаточно легко!

Получение значения Radio Button (Избранная Radio Button)

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

  из tkinter import *
из tkinter.ttk import Radiobutton
  
  
def clicked ():
    lbl.configure (текст = selected.get ())
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
selected = IntVar ()
rad1 = Radiobutton (window, text = 'Первый', value = 1, variable = selected)
rad2 = Radiobutton (окно, текст = 'Второй', значение = 2, переменная = выбрана)
rad3 = Radiobutton (окно, текст = 'Третий', значение = 3, переменная = выбрана)
btn = Кнопка (окно, текст = "Клик", команда = нажата)
lbl = Метка (окно)
рад1.сетка (столбец = 0, строка = 0)
rad2.grid (столбец = 1, строка = 0)
rad3.grid (столбец = 2, строка = 0)
btn.grid (столбец = 3, строка = 0)
lbl.grid (столбец = 0, строка = 1)
window.mainloop ()

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

Добавление виджета ScrolledText (текстовая область Tkinter)

Чтобы добавить виджет ScrolledText , використовуйте класс ScrolledText :

  из tkinter import scrolledtext


txt = текст с прокруткой.ScrolledText (окно, ширина = 40, высота = 10)

Здесь нужно указать ширину и высоту ScrolledText , иначе он заполнит все окно.

  из tkinter import *
из tkinter import scrolledtext
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
txt = scrolledtext.ScrolledText (окно, ширина = 40, высота = 10)
txt.grid (столбец = 0, строка = 0)
window.mainloop ()

Результат:

Настройка содержимого Scrolledtext

Используйте метод insert , чтобы настроить содержимое Scrolledtext :

  txt.insert (INSERT, 'Текстовое поле')

Удаление / очистка содержимого Scrolledtext

Чтобы очистить содержимое данного виджета, викорируйте метод удалить :

  txt.delete (1.0, КОНЕЦ)

Отлично!

Создание всплывающего окна с сообщением

Чтобы показать всплывающее с помощью Tkinter, використовуйте messagebox следующим образом окно:

  из окна сообщений импорта tkinter


окно сообщения.showinfo ('Заголовок', 'Текст')

Довольно легко! Давайте покажем окно сообщений при нажатии на кнопку пользователя.

  из tkinter import *
из окна сообщений импорта tkinter
  
  
def clicked ():
    messagebox.showinfo ('Заголовок', 'Текст')
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
btn = Кнопка (окно, текст = 'Клик', команда = нажата)
btn.сетка (столбец = 0, строка = 0)
window.mainloop ()

Когда вы нажмете на кнопку, появится информационное окно.

Показ сообщений о предупреждениях и ошибках

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

  messagebox.showwarning ('Заголовок', 'Текст')
messagebox.showerror ('Заголовок', 'Текст')

Показ диалоговых окон с выбором

Чтобы показать пользователю сообщение «да / нет», вы можете использовать одну из следующих функций messagebox :

  из окна сообщений импорта tkinter


res = messagebox.askquestion ('Заголовок', 'Текст')
res = messagebox.askyesno ('Заголовок', 'Текст')
res = messagebox.askyesnocancel ('Заголовок', 'Текст')
res = messagebox.askokcancel ('Заголовок', 'Текст')
res = messagebox.askretrycancel ('Заголовок', 'Текст')

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

Если вы кликнете OK , yes или retry , значение станет True , а если выберете без или отменить , значение будет False .
Единственная функция, которая возвращает одно из трех значений, является функцией askyesnocancel ; она возвращает Верно / Ложь / Нет .

Добавление SpinBox (Виджет спинбокс)

Для создания виджета спинбокса, використовуйте класс Spinbox :

  spin = Spinbox (окно, from_ = 0, to = 100)

Таким образом, мы создаем виджет Spinbox , и передаем параметры от и до , чтобы указать диапазон номеров.
Кроме того, вы можете установить ширину виджета с помощью средства шириной :

  spin = Spinbox (окно, from_ = 0, to = 100, width = 5)

Проверим пример полностью:

  из tkinter import *
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
spin = Spinbox (окно, from_ = 0, to = 100, width = 5)
spin.grid (столбец = 0, строка = 0)
window.mainloop ()

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

  spin = Spinbox (окно, значения = (3, 8, 11), ширина = 5)

Виджет покажет только эти 3 числа: 3, 8 и 11.

Задать значение по умолчанию для Spinbox

В случае, если вам нужно установить значение по умолчанию для Spinbox, вы можете передать значение параметра текстовая переменная следующим образом:

  var = IntVar ()
var.set (36)
spin = Spinbox (окно, from_ = 0, to = 100, width = 5, textvariable = var)

Теперь, если вы запустите программу, она покажет 36 как значение по умолчанию для Spinbox.

Добавление виджета Progressbar

Чтобы создать данный виджет, викоризовайте класс progressbar :

  от tkinter.ttk import Progressbar


bar = Progressbar (окно, длина = 200)

Установите значение progressbar таким образом:

  бар ['значение'] = 70

Вы можете установить это значение на основе любого процесса или при выполнении задачи.

Изменение цвета Progressbar

Изменение цвета Progressbar немного сложно. Сначала нужно создать стиль и задать цвет фона, а затем настроить созданный стиль на Progressbar.Посмотрите следующий пример:

  из tkinter import *
из tkinter.ttk import Progressbar
из tkinter import ttk
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
style = ttk.Style ()
style.theme_use ('по умолчанию')
style.configure ("black.Horizontal.TProgressbar", background = 'black')
bar = Progressbar (окно, длина = 200,)
бар ['значение'] = 70
bar.grid (столбец = 0, строка = 0)
окно.mainloop ()

И в результате вы получите следующее:

Добавление поля загрузки файла

Для добавления поля с файлом, використовуйте класс filedialog :

  из диалога импорта файлов tkinter


файл = filedialog.askopenfilename ()

После того, как вы выберете файл, нажмите «Открыть»; переменная файла будет этот путь к файлу. Кроме того, вы можете запросить несколько файлов:

  файлов = filedialog.askopenfilenames ()

Указание типа файлов (расширение фильтра файлов)

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

  file = filedialog.askopenfilename (filetypes = ((«Текстовые файлы», «*. Txt»), («все файлы», «*. *»)))

Вы можете запросить каталог, используя метод askdirectory :

  dir = filedialog.askdirectory ()

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

  из пути импорта ОС
файл = filedialog.askopenfilename (initialdir = path.dirname (__ file__))

Легко!

Добавление панели меню

Для добавления панели меню, використовуйте класс menu :

  из меню импорта tkinter


menu = Меню (окно)
меню.add_command (label = 'Файл')
window.config (меню = меню)

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

  menu.add_cascade (label = 'Автор', menu = new_item)

Наш код будет выглядеть так:

  из tkinter import *
из меню импорта tkinter
  
  
окно = Tk ()
окно.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
menu = Меню (окно)
new_item = Меню (меню)
new_item.add_command (label = 'Новый')
menu.add_cascade (label = 'Файл', menu = new_item)
window.config (меню = меню)
window.mainloop ()

Таким образом, вы можете добавить пунктов меню, сколько захотите.

  из tkinter import *
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
окно.геометрия ('400x250')
menu = Меню (окно)
new_item = Меню (меню)
new_item.add_command (label = 'Новый')
new_item.add_separator ()
new_item.add_command (label = 'Изменить')
menu.add_cascade (label = 'Файл', menu = new_item)
window.config (меню = меню)
window.mainloop ()

Теперь мы добавляем еще один пункт меню «Изменить» с разделителем меню. Вы можете заметить пунктирную линию в начале, если вы нажмете на эту строку, она указывает пункты меню в небольшом отдельном окне.

Можно отключить эту функцию, с помощью tearoff подобным образом:

  new_item = Меню (меню, отрыв = 0)

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

  new_item.add_command (label = 'Новый', command = clicked)

Добавление виджета Notebook (Управление вкладкой)

Для удобного управления вкладками реализуйте следующее:

Для начала создается элемент управления вкладкой, с помощью класса Notebook .
Создайте использование, используя класс Frame .
Добавьте эту вкладку в элемент управления вкладками.
Запакуйте элемент управления вкладкой, чтобы он стал видимым в окне.

  из tkinter import *
из tkinter import ttk
  
  
окно = Tk ()
window.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
tab_control = ttk.Notebook (окно)
tab1 = ttk.Frame (tab_control)
tab_control.добавить (tab1, text = 'Первая')
tab_control.pack (expand = 1, fill = 'оба')
window.mainloop ()

Таким образом, вы можете добавить столько вкладок, сколько нужно.

Добавление виджетов на вкладку

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

  из tkinter import *
из tkinter import ttk
  
  
окно = Tk ()
окно.title ("Добро пожаловать в приложение PythonRu")
window.geometry ('400x250')
tab_control = ttk.Notebook (окно)
tab1 = ttk.Frame (tab_control)
tab2 = ttk.Frame (tab_control)
tab_control.add (tab1, text = 'Первая')
tab_control.add (tab2, text = 'Вторая')
lbl1 = Метка (tab1, text = 'Вкладка 1')
lbl1.grid (столбец = 0, строка = 0)
lbl2 = Метка (tab2, text = 'Вкладка 2')
lbl2.grid (столбец = 0, строка = 0)
tab_control.pack (expand = 1, fill = 'оба')
окно.mainloop ()

Добавление интервала для виджетов (Заполнение)

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

Передайте padx и padx любому виджету и задайте значение.

  lbl1 = Метка (tab1, text = 'label1', padx = 5, pady = 5)

Это очень просто!

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

Введение в Tkinter / Хабр

Всем доброго времени суток!

Tkinter — это кроссплатформенная библиотека для разработки графического интерфейса на языке Python (, начиная с Python 3.0, переименована в tkinter ). Tkinter расшифровывается как интерфейс Tk, и является интерфейсом к Tcl / Tk.
Tkinter входит в стандартный дистрибутив Python.

Весь код в этой статье написан для Python 2.x.
Чтобы убедиться, что Tkinter установлен и работает, воспользуемся стандартной функцией Tkinter _test () :

  import Tkinter
Ткинтер._test ()

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

Отлично, теперь можно приступить к написанию нескольких простых программ для демонстрации основных принципов Tkinter.

Привет, мир

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

  из Tkinter import *
корень = Tk ()

Да-да, всего одна строка, это вам не WinAPI (=. Теперь создадим кнопку, при нажатии на которую будет выводиться текст в консоль:

  def Hello (event):
    печать "Еще один привет, мир"

btn = Button (root, # родительское окно
             text = "Нажми меня", # надпись на кнопке
             width = 30, height = 5, # ширина и высота
             bg = "white", fg = "black") # цвет фона и надписи
btn.bind ("", Hello) # при нажатии ЛКМ на кнопку вызывается функция Hello
btn.pack () # расположить кнопку на главном окне
root.mainloop ()

Всё просто, не так ли? Создаём экземпляр класса Button, указываем родителя и при желании список параметров. Есть еще немало параметров, таких как шрифт, толщина рамки и т.д.
Затем можно привязать несколько разных событий в зависимости, например, от того, какой кнопкой мыши был наш пример btn.
mainloop () запускает цикл обработки событий; пока мы не вызовем эту функцию, наше окно не будет реагировать на внешние раздражители.

Упаковщики

Функция pack () — это так называемый упаковщик, или менеджер расположения. Он отвечает за то, как виджеты будут располагаться на главном окне. Для каждого виджета нужно вызвать метод упаковщика, иначе он не будет отображён. Всего упаковщиков три:

пачка () . Автоматически размещает виджеты в родительском окне. Имеет параметры сторона, залить, развернуть .Пример:

  из импорта Tkinter *
корень = Tk ()
Кнопка (корень, текст = '1'). Pack (сторона = 'слева')
Кнопка (корень, текст = '2'). Pack (side = 'top')
Кнопка (корень, текст = '3'). Pack (side = 'right')
Кнопка (корень, текст = '4'). Pack (сторона = 'дно')
Кнопка (корень, текст = '5'). Pack (fill = 'both')
root.mainloop ()

сетка () . Размещает виджеты на сетке. Основные параметры: строка / столбец — строка / столбец в сетке, rowspan / columnspan — сколько строк / столбцов занимает виджет.Пример:

  из импорта Tkinter *
корень = Tk ()
Кнопка (корень, текст = '1'). Сетка (строка = 1, столбец = 1)
Кнопка (корень, текст = '2'). Сетка (строка = 1, столбец = 2)
Кнопка (root, text = '__3 __'). Grid (row = 2, column = 1, columnspan = 2)
root.mainloop ()

место () . Позволяет разместить виджеты в указанных координатах с указанными размерами.
Основные параметры: x, y, ширина, высота . Пример:

  из импорта Tkinter *
корень = Tk ()
Кнопка (корень, текст = '1').место (x = 10, y = 10, width = 30)
Кнопка (корень, текст = '2'). Место (x = 45, y = 20, высота = 15)
Кнопка (корень, текст = '__3 __'). Место (x = 20, y = 40)
root.mainloop ()

Теперь для демонстрации других возможностей Tkinter, напишем простейший

Текстовый редактор

Без лишних слов приведу код:

  из Tkinter import *
импорт tkFileDialog

def Выход (ev):
    глобальный корень
    root.destroy ()
    
def LoadFile (ev):
    fn = tkFileDialog.Open (root, filetypes = [('*.txt файлы ',' .txt ')]). show ()
    если fn == '':
        возвращение
    textbox.delete ('1.0', 'конец')
    textbox.insert ('1.0', open (fn, 'rt'). read ())
    
def SaveFile (ev):
    fn = tkFileDialog.SaveAs (root, filetypes = [('* .txt файлы', '.txt')]). show ()
    если fn == '':
        возвращение
    если не fn.endswith (". txt"):
        fn + = ". txt"
    open (fn, 'wt'). write (textbox.get ('1.0', 'end'))

корень = Tk ()

panelFrame = Frame (корень, высота = 60, bg = 'серый')
textFrame = Frame (корень, высота = 340, ширина = 600)

панельFrame.pack (side = 'top', fill = 'x')
textFrame.pack (side = 'bottom', fill = 'both', expand = 1)

textbox = Text (textFrame, font = 'Arial 14', wrap = 'word')
scrollbar = Полоса прокрутки (textFrame)

полоса прокрутки ['команда'] = textbox.yview
текстовое поле ['yscrollcommand'] = scrollbar.set

textbox.pack (side = 'left', fill = 'both', expand = 1)
scrollbar.pack (side = 'right', fill = 'y')

loadBtn = Кнопка (panelFrame, text = 'Загрузить')
saveBtn = Кнопка (panelFrame, text = 'Сохранить')
quitBtn = Кнопка (panelFrame, text = 'Quit')

loadBtn.bind ("", LoadFile)
saveBtn.bind ("", SaveFile)
quitBtn.bind ("", Выйти)

loadBtn.place (x = 10, y = 10, ширина = 40, высота = 40)
saveBtn.place (x = 60, y = 10, width = 40, height = 40)
quitBtn.place (x = 110, y = 10, ширина = 40, высота = 40)

root.mainloop ()

Здесь есть несколько новых моментов.

Во-первых, мы подключили модуль tkFileDialog для диалогов открытия / закрытия файла. Использовать их просто: нужно создать объект типа Откройте или SaveAs , при желании задав параметр filetypes , и вызовите его метод show ().Метод вернёт строки с именем файла или пустую строку, если пользователь просто закрыл диалог.

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

В-третьих, появился виджет Текст . Мы его создали с параметром wrap = ‘word’, чтобы текст переносился по словам.Основные методы Текст: получить, вставить, удалить . Получить и удалить, принять начальный и конечный индексы. Индекс — это строка вида ‘x.y’, где x — номер символа в строке, а y — номер строки, причём символы нумеруются с 1, а строки — с 0. То есть на самое начало текста указывает индекс ‘1.0’. Для обозначения конца текста есть индекс ‘конец’. Также допустимы конструкции вида ‘1.end’.

B в-четвёртых, мы создали полосу прокрутки ( Scrollbar ). После создания её нужно связать с нужным виджетом, в данном случае, с текстовым полем.Связывание двустороннее:

  scrollbar ['command'] = textbox.yview
текстовое поле ['yscrollcommand'] = scrollbar.set

Вот и всё. Tkinter — это, безусловно, мощная и удобная библиотека. Мы осветили не все возможности, остальные — тема дальнейших статей.

Полезные ссылки:
http://ru.wikiversity.org
http://www.pythonware.com/

Тз для дизайнера: Как ставить ТЗ дизайнерам. Гайд для клиентов / Хабр