Для отрисовки наброска можно использовать бумагу и ручку, Photoshop, любой другой редактор графики (раньше часто использовали Adobe Fireworks). Важно отметить, что данный этап – это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок, выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.
Часто создаётся 3 макета под разрешения iPhone (Android Phone), iPad (Android Tablet) и Desktop.На данном изображении показаны оба подхода. Сверху блок «отзывается» на любые изменения размера контейнера, снизу «адаптируется» под определённую ширину
Наиболее популярной системой является модульная сетка 960 Grid System (http://960.gs), которая максимально делит страницу на 12, 16 и 24 колонки. Максимум в ширине сетка имеет 960 пикселей. Данное решение основано на том, что большинство современных мониторов, на момент создания сетки, имели разрешение не меньше 1024 на 768 пикселей. Создание макета на основе данной сетки, в дальнейшем, поможет ускорить процесс разработки (вёрстки).
Так же стоит отметить, что при разработке «резинового» макета страницы существует понятие максимальной ширины. Данное утверждение основывается на удобстве восприятия информации. Если предположить, что наш сайт не имеет максимального значения по ширине, то на больших мониторах информация будет сильно растягиваться и её неудобно будет читать. Чаще всего ограничиваются шириной в 1280 пикселей.
Модульная сетка 960GS отвечает концепции «фиксированного» дизайна, для «резинового» дизайна можно обратить внимание на адаптацию этой же сетки на сайте http://www.
designinfluences.com/fluid960gs/ или воспользоваться сеткой, которую предлагает фрэймворк Bootstrap (http://getbootstrap.com/css/#grid).
Благодаря модульной сетке блоки контента и элементы будут располагаться на определённом расстоянии друг от друга, будут иметь удобоваримую ширину, что в дальнейшем визуально будет приятно пользователю и не будет вызывать у него какие-либо неудобства в восприятии сайта.
Модульная сетка, по сути, – это некая визуальная абстракция, визуальное деление страницы на равные по ширине столбцы с равными отступами между ними. Визуализировать данную модель можно посредствам направляющих или отдельного слоя, на котором будут изображены эти столбцы. Именно такое решение вы найдёте в шаблонах сетки 960gs.
Полезные ссылки и материалы:
На данном этапе сайты с таким типом навигации составляют большинство. Удобство такого подхода легко объяснить тем, что в данном случае у нас остаётся больше пространства для контента, составляющего наш сайт.
Данный подход учитывает практически весь цикл разработки, поэтому мы ещё к нему вернёмся.
Усвоив всё вышесказанное можно переходить к следующему этапу – Дизайн.
Один из способов определения основного цвета в проекте – это составление mood board. Для этого необходимо выписать себе все синонимы, связанные с темой проекта, а затем каждый синоним набрать в поиске по картинкам Google или Yandex. На основе найденных изображений выписать себе цвета, которые чаще всего встречаются на них (каких цветов больше). Найденные цвета будут составлять визуальное восприятие нашего проекта и вызывать у пользователя соответствующие чувства.
Для работы с выбранным цветом и составлением палитры цветов нашего сайта можно использовать следующие инструменты:
com/csd-3.5/). Помимо выбора цветовой схемы данный сервис позволяет посмотреть пример того, как выбранные цвета будут смотреться на сайтеПри работе над дизайном главной и внутренних страниц стоит помнить о некоторых основных принципах.
Данные элементы оформляются таким образом, что пользователю должно хотеться непременно на них нажать. Например, это может быть кнопка с призывом к действию (Нажми, Купи, Сэкономь), яркий баннер с заманчивым предложением, яркой картинкой и пр.Данное понятие хорошо вписывается в принцип AIDA (Attraction Interest Desire Action).
Таким образом становится понятен принцип построения дизайна, опирающегося на данное понятие: например, яркая картинка, баннер должны привлечь внимание пользователя, сопутствующий посыл в тексте должен вызвать в нём интерес и желание, а завершающим аккордом должна стать, например, кнопка с призывом к действию.
Но и данный принцип не работает сам по себе без некоторых других: схема просмотра страницы (наиболее, естественный путь движения глаз по странице), визуальные направляющие.
На первом изображении взгляд невольно следует за указательным пальцем мужчины, а его прямой взгляд невольно привлекает внимание к себе при первом взгляде на страницу.
Тот же эффект продемонстрирован на втором изображении с наложенной тепловой картой: в первом случае нас привлекает в основном прямой взгляд ребенка (прямо в глаза), во втором случае направление взгляда ребенка и его поза невольно обращают взгляд пользователя на блок справа.
Использование данных библиотек может в значительной мере сэкономить время при разработке проекта (дизайне, вёрстке), правда в то же время может сделать ваш сайт похожим на другие, если использовать элементы дизайна фрэймворков как есть.
На основе каждого фрэймворка можно найти огромное количество платных и бесплатных тем и страниц, а так же разработать свои.
Готовые элементы дизайна из Bootstrap, Foundation и Material Design Lite (MDL)
Во-первых, стоит упомянуть о так называемых лэндинговых страницах, которые подразумевают под собой длинную страницу, разделённую на соответствующие секции и знакомящие пользователя с основным контентом сайта. Часто лэндинг является единственной страницей, на которой сразу удаётся показать всю необходимую информацию, не заставляя пользователя переходить по страницам. Лэндингам обычно сопутствует хороший дизайн, выверенная и продуманная подача информации, элементы call-to-action, интерактивность (счётчики, анимация и пр.).
Стоит так же сказать о внешнем виде страниц и вспомнить такие понятия как скевоморфизм и плоский дизайн.
Не маловажную роль на тренды в веб-дизайне оказало развитие мобильных операционных систем. Чаще всего двигателем прогресса становятся решения от компании Apple, которая в своих дизайн-решениях iOS сначала использовала имитацию реальных объектов, а затем всё упростила до плоского дизайна (Flat UI).
Сейчас в вебе главенствует Flat дизайн и Material дизайн, который активно развивает Google.
Неплохой сайт-сравнение двух концепций: http://www.flatvsrealism.com/
По основам веб-дизайна и прототипированию неплохим подспорьем может стать данная книга: Джейсон Берд: Веб-дизайн. Руководство разработчика.
От части, все эти редакторы похожи по принципу работы, когда при установке мы получаем редактор, в который затем можем «доставить» необходимые модули и плагины, так сказать, «редакторы на стероидах». Разница лишь в технологиях, которые были использованы при написании редакторов, если Sublime Text написан при помощи C++ и Python, то 2 других используют JavaScript, HTML, CSS (Less).
За счёт этой разницы Sublime Text может работать чуть быстрее своих коллег.
Существуют так же более продвинутые IDE (студии) такие, как Web Storm, PHP Storm и пр., но для вёрстки проекта вполне подойдёт редактор кода, а не целая студия (IDE).
Чтобы определиться, что подходит лично вам для разработки, стоит самим покопаться в многообразии средств и выбрать то, что больше всего удовлетворяет вашим потребностям.
Обзоры текстовых редакторов:
Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку images или img, css в папку css, javascript в папку js.
В корне будет лежать только index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдая эти правила вы никогда не запутаетесь в проекте.
Так же стоит сказать и об именовании файлов проекта. Чаще всего применяются следующие имена: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js или app.js, минимизированные версии файлов имеют префикс .min, картинки носят не пространные названия на русском языке или набора цифр, а отражают то, что на них изображено, например, button.png, download-icon.png, logo.png и т.д.
Учитывая вышесказанное, мы можем условно разделить работу над проектом на следующие этапы:
com/afarkas/html5shiv), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (https://modernizr.com/) (html5shiv входит в сборку Modernizr), которая определяет возможности браузера, с помощью которого просматривается сайт.При вёрстке сайтов в настоящее время, априори, используется блочный подход, никаких таблиц, iframe’ов и пр. Таблицы выполняют только свою прямую роль – представление информации в виде таблицы. В вёрстке таблицы используются лишь при работе с электронными письмами.
На этапе написания HTML мы, как бы, создаём скелет страницы, её абстрактную модель при помощи тэгов (языка разметки HTML). Стоит отметить, что структуру может быть проще написать, если у нас есть прототип, составленный на первом этапе или же, если мы сами, глядя на дизайн-макет, на бумаге схематично разрисовали себе все блоки страницы.
При написании разметки мы так же сразу можем прописывать элементам классы и идентификаторы.
Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Каждый элемент страницы являет собой сущность, которая может существовать независимо от контекста, тогда мы говорим о Блоке (.
block) или же только в контексте другой сущности, тогда мы говорим об Элементе (.block__element). Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. За подобные свойства будет отвечать Модификатор (.block__element_mod).
Таким образом мы представляем наш код, как композицию блоков, элементов и их модификаций.
Более полная информация о методологии: https://ru.bem.info/
Информация о методологии и онлайн книга: https://smacss.
com/
Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss
Важно помнить, что любое соглашение по именованию призвано создать определённый уровень абстракции, благодаря которому работать с проектом будет удобно и он не будет перегружен излишним кодом и прочими артефактами.
Небольшой курс по основам HTML: Смотреть
Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.
У обоих сводов правил есть свои плюсы и минусы, на данный момент популярен normalize.css. Популярность данного свода правил обусловлена ещё и тем, что вам не приходится при разработке заново прописывать основные свойства для базовых элементов страниц, а лишь модифицировать их по необходимости.
Так же стоит упомянуть о, так называемом, «быстром сбросе», когда мы абсолютно для всех элементов страницы с помощью селектора * прописываем свойства {margin: 0; padding: 0}. Таким образом мы сбрасываем все внутренние и внешние отступы для всех элементов страницы. Но данную технику не рекомендуется использовать, так как она замедляет процесс отрисовки страницы, да и по сути имеет мало смыла (на мой взгляд).
Так же стоит отметить, что все размеры и отступы берутся непосредственно из дизайн-макета.
Для получения данных значений нам необходимо использовать инструмент «линейка» и направляющие (речь про инcтрументарий Adobe Photoshop), а затем переносить полученные значения в код. Если мы работаем с фиксированным макетом, то значения переносятся в пикселях как есть, если же у нас «резиновый», то значения нужно переводить в проценты. Основная формула – это ширина элемента, делённая на ширину контекста (ширина содержащего блока). Например, если блок, содержащий текст и картинку имеет на макете ширину 400px, а блок с текстом в нём должен иметь ширину 340px, то в процентном выражении это будет (340 / 400) * 100%, то есть 85% будет занимать блок с текстом.
Не стоит перегружать ваши стили чрезмерной специфичностью, например, если мы хотим, чтобы ссылка внутри списка имела красный цвет, то не обязательно записывать всю линейку классов и тэгов: .main –nav ul li a, достаточно просто указать .main-nav a. Слишком «специфичные» правила делают правила контекстно зависимым и заставляют вас писать лишний код, а так же влияют на скорость отрисовки страницы, так как при разборе правил CSS парсер читает их справа налево и ему сначала, если брать описанный выше пример, нужно взять все ссылки (a), затем отбросить все ссылки, которые не лежат в li и т.
д. пока он не доберётся до содержащего класса.
Специфичность кода, так же означает чрезмерную привязку к базовым тэгам. Например, если мы хотим, чтобы элемент внутри .block был синим и при разметке использовали элемент span (в правилах мы написали .block span {background-color: blue}), то при замене его на div, например, нам нужно будет написать новое правило уже для div внутри .block. Таким образом наш код будет обрастать ненужными правилами, которые по сути дублируют друг друга. Гораздо проще определить всего лишь один класс (класс элемента), который при присвоении внутренним элементам будет приводить нас к желаемому результату.
Ещё один пример контекстной зависимости кода – это использование имен тэгов вместе с именами классов, например, div.block {display: block}. Если мы захотим тот же класс применить к span, то нам придётся написать опять span.block {display: block} или span.block, div.block {display: block}, что в любом случае приведёт к увеличению кода на лишнюю строчку.
Почему это важно? Во-первых, вы не делаете лишнюю работу, во-вторых, вам не нужно потом среди 10000 строк искать нужное правило и, наконец, чем больше строк кода, тем больше размер файла, а большие по объему файлы медленнее передаются по сети, что в свою очередь может быть причиной долгой загрузки, а излишняя специфичность причиной долгой отрисовки вашей страницы.
Если, вы используете правила, относящиеся к спецификации CSS3, то не поленитесь проверить необходимость использования браузерных префиксов на сайте http://caniuse.com.
Возвращаясь к Mobile First, стоит сказать, что при работе в данной концепции написание стилей стоит начинать с мобильной версии, а затем с помощью медиа запросов добавлять правила, которые будут работать на других разрешениях. Зачастую, при расширении правил от мобильной версии к десктопной, приходится писать гораздо меньше кода, чем при работе наоборот: от десктопной версии к мобильной.
Полезные ссылки и материалы:
При создании веб страниц стало, практически, стандартом использование библиотеки jQuery, которая позволяет с лёгкостью манипулировать элементами web-страницы (DOM узлами), навешивать прослушку событий, отправлять запросы на сервер, обрабатывать результат выполнения и пр. Но не стоит слепо доверять трендам, на сегодняшний день нативный JavaScript достиг такого уровня, что вам возможно уже не нужен jQuery. Поэтому, прежде чем слепо прикреплять jQuery, стоит задуматься, так ли он нужен для ваших задач и не достаточно ли встроенных возможностей языка JavaScript.Есть неплохой ресурс, который приводит альтернативы одних и тех же манипуляций на языке JavaScript и с помощью библиотеки jQuery: http://youmightnotneedjquery.com/, так же неплохим подспорьем является сайт https://developer.mozilla.org/ru/, на котором, помимо описания методов и свойств JavaScript, можно найти полифиллы для тех или иных методов (библиотека или часть кода, которая добавляет в старые браузеры поддержку возможностей современных функций и методов JavaScript).
Важно отметить, что не рекомендуется использовать JavaScript для стилизации, то есть не стоит для того или иного объекта DOM (элемента страницы) добавлять портянку CSS свойств с помощью JavaScript, чтобы выделить его состояние и пр. Рекомендуется использовать классы, то есть заранее в CSS определить классы-состояния (активный, не активный, скрытый, использованный и пр.) и при манипуляции элементами просто добавлять или убирать соответствующие классы.
Например, у нас есть элемент списка с классом .list__item, для того, чтобы показать активный элемент в данный момент (выбран пользователем) или нет, можно просто добавить класс (.list__item—active), а не прописывать все стили, присущие этому классу в JS:
document.querySelector(‘.list__item’).style.color = ‘red’;Не рекомендуется решать задачи, которые явно относятся к уровню CSS с помощью JavaScript, пытаясь как-то выровнять объект или добавить ему стили при наведении и пр.
Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).
При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.
Подход Mobile First чем-то схож с Progressive Enhacement.
Для этого можно использовать online средства:Статьи с рекомендациями по написанию JS, HTML и CSS:
<div>
<div>
<div>
.
..
</div>
<div>
...
</div>
<div>
...
</div>
</div>
<div>
...
</div>
</div>
..
</div>
<div>
...
</div>
<div>
...
</div>
</div>
<div>
...
</div>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
width: 100px;
height: 150px;
background-color: #ff0;
В плане CSS, например, становится легче работать с браузерными префиксами, так как одна строчка с CSS3 свойством может быть раскрыта в несколько с добавлением необходимых префиксов.
org/en/, http://nodejs.ru/).mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html
Так же, благодаря Sass в проекте можно придерживаться принципа модульности, храня части разметки в соответствующих файлах и подключать их все в основной, затем с помощью консольной команды можно собрать весь код в один css файл, так же поддерживается сборка результирующего файла на лету по мере написания стилей. Опять-таки для работы с Sass потребуется командная строка. Процесс установки пакета можно изучить здесь: http://sass-lang.com/install.
Данные сервисы помогают использовать в разработке, например, вышеописанные средства Jade и Sass, автоматически преобразовывать их в соответствующие файлы html и css, сжимать их, если необходимо, а так же проверять, например css свойства, на необходимость использования браузерных префиксов и подставлять их в автоматическом режиме.
Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Полезным будет данное сравнение: http://frontender.info/gulp-grunt-whatever/
Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.
При подключении файлов фрэймворков в проекте мы можем использовать определённые в них классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.). Таким образом мы экономим время, например, на описание расположения блоков дизайна, их размеров в зависимости от разрешения, внешний вид полей формы, кнопок и их состояния.
Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:
Надеюсь, что все описанные вещи будут полезны вам в изучении темы веб-дизайна и фронтенд разработки.
С чего начать, когда приступаете к работе над проектом, как не запутаться в массе данных, учесть интересы всех заинтересованных лиц? Виктор Степанов, руководитель проектного офиса холдинга «Изовак», тренер компании BusinessTools, эксперт в сфере управления проектами рассказал о необходимых действиях на старте проекта. Они помогут эффективно подготовиться к работе и достичь результатов.
Фото с сайта termalfudro.netВ самом начале следует ответить на вопрос: кому и зачем нужен этот проект? В случае с внешним заказчиком все просто – там есть конкретный клиент. Во внутренних же проектах главное заинтересованное лицо – это владелец проекта.
В разной литературе его также называют спонсором или заказчиком. Все это синонимы и они обозначают человека, для которого делается проект.
Подчеркиваю: это именно человек, а не компания, бизнес или общество.
Определить владельца проекта можно по двум признакам: проект решает какую-то проблему этого человека, и сам он способен решить судьбу проекта (дать ему «зеленый свет» или остановить). До тех пор, пока вы не поймете, для кого делаете проект, можно даже не начинать работу: без увлеченного владельца проект обречен. Рано или поздно интерес к нему угаснет.
В каждом проекте кроме владельца есть такие обязательные роли, как:
Бывают также члены команды проекта, их руководители (проекты редко ограничиваются одним подразделением компании), руководитель программы (если проект является частью стратегической программы), поставщики и подрядчики, внешние контролеры, – словом, все, чьи интересы затрагивает проект. В проектной методологии заинтересованных лиц называют «стейкхолдерами».
Причем, их интересы не только различаются, но часто противоречивы.
Например, руководители членов команды проекта, как правило, не могут выделить столько времени своих людей, сколько хотел бы получить руководитель проекта; поставщики и подрядчики заинтересованы поднять цены, а внешние контролеры накладывают серьезные ограничения на те или иные затраты или действия.
Любой проект ориентирован, прежде всего, на цели его владельца. Если проект не соответствует интересам, скажем, поставщика или специалиста – в проекте просто будет другой поставщик или специалист, и это не трагедия. Но если владелец проекта не получает то, что ему нужно – проекта не будет.
Проект-менеджеру важно детально обсудить с владельцем проекта, зачем ему все это нужно, какие проблемы должны быть решены или какие должны быть использованы возможности. Например, компания разрабатывает новый продукт. Зачем это делается? Чтобы продавать больше имеющимся клиентам? Или чтобы привлечь новых клиентов, диверсифицировать риски и потеснить конкурентов? Ответы на эти вопросы и становятся целями.
Цели и результаты проекта – отчасти синонимичны, ведь и то, и другое для нас желанно. Но если цели – это «зачем» проекта, его движущая сила, то результаты – это нечто конкретное: вещи, документы, программное обеспечение, которые берется получить команда к концу проекта.
Например, при разработке нового продукта (пусть это будет пирожок с начинкой) результатами будут: рецептура пирожка, калькуляция себестоимости, возможно, печи для выпекания, если их не было раньше, необходимые разрешительные документы.
За получение результатов ответственность полностью лежит на команде проекта. Когда результаты будут получены и переданы владельцу проекта, далее уже он будет достигать целей проекта. И совершенно нормально, если понимание успешности проекта может прийти лишь спустя некоторое время после того, как он будет завершен.
Результаты проекта – это четкое обязательство команды проекта, в то время как цели проекта – его путеводная звезда.
Вы можете пойти не тем путем, выбрав ошибочный способ реализации проекта; но вы всегда можете «перезагрузить» проект, согласовав с его владельцем новые результаты проекта, притом, что цели его останутся неизменными.
Все мы хорошо знаем, что реализовывать чужие идеи никто не хочет. Планы, разработанные без нашего участия не вызывают у нас доверия: сроки кажутся нереальными, сам подход к решению проблем может вызывать сомнения. Поэтому для выработки плана нужно работать не в одиночку, а всей командой.
Я рекомендую такой прием: соберите команду на так называемый «семинар по планированию». Выберитесь из стен компании в отдельное помещение (если бюджет проекта не позволяет, можно собраться у кого-то дома или на даче) и посвятите целый день проработке проекта. Закажите пиццу, возьмите большие листы, фломастеры и стикеры – это позволит не отвлекаясь работать с большим объемом разрозненной информации и не упустить важные детали.
Уточните формулировки целей и набор результатов, «поштурмуйте» разные подходы к реализации проекта, вместе оцените сроки и прикиньте бюджет.
День пролетит быстро, не факт, что вы получите идеальный план, но можете быть уверены: это будет основа, на которую команда «подпишется» вместе с вами.
Кстати, этот день даст наблюдательному проект-менеджеру очень много информации о том, кто у него в команде. Насколько эти люди умеют слушать других, есть ли у них свои идеи, на что они готовы ради успеха проекта, можно ли на них положиться? Сейчас еще не поздно кого-то «высадить на берег». Те, кто останутся в проекте и сформируют костяк команды, должны ясно понимать, за что отвечает каждый член команды проекта.
Зафиксировать все это (цели, результаты, критерии успеха, ответственность каждого) можно в уставе проекта. Готовый устав проекта должен утвердить его владелец.
Нужен ли этот документ для любого проекта? Здесь я могу провести аналогию между началом проекта и открытием бизнеса. Сегодня можно зарегистрировать фирму за один день, и никто в исполкоме даже не будет читать ваш устав: за содержание этого документа полностью ответственны учредители.
Но чем хуже проработан устав регистрируемой компании, тем сложнее будут разбирательства на более поздних стадиях развития бизнеса (причем, как в случае проблем, так и в случае успеха бизнеса).
Отсюда и совет: не закладывайте мину под свой проект, договаривайтесь на берегу. Я считаю, 80% своей пользы устав приносит на старте, т.к. помогает всем участникам проекта понять друг друга, устранить разночтения, зафиксировать обязательства.
Разумеется, небольшие проекты не нужно перегружать методологией и процедурами. Не нужно писать устав проекта офисной вечеринки на дюжину сотрудников. Хотя проделать всю описанную выше работу в уме организатору вечеринки не помешает. Тогда довольны будут и сотрудники, и босс.
Виктор Степанов
Консультант по управлению и инвестициям, руководитель проектов. Автор и ведущий ряда семинаров по управлению проектами, в том числе курса «Менеджер профессионал advanced».
Опыт ведения корпоративных программ обучения проектному подходу и инструментам проектного управления: «Геймстрим» (Wargaming), «Велком», «Милавица», «Санта Бремор» и др.
Образовательный проект создается в том случае, когда у автора существует отличная идея по улучшению системы образования и есть вероятность получения финансирования. Важно знать принципы написания такого проекта.
Инструкция
1.Ознакомьтесь с содержанием требований к образовательным проектам.
Основные требования кобразовательному проекту:
2.Составьте список задач, которые необходимо решить перед отправкой проекта на рецензию. Отметьте в календаре крайний срок проверки. За это время четко распишите по дням, когда вы будете собирать данные, писать, редактировать и рецензировать работу.
3.Обозначьте проблему, решением которой должен стать ваш образовательный проект. Используйте данные исследований, а не мнения некомпетентных людей о характере и степени проблемы. Напишите то, как реализация учебного проекта улучшит условия образования, как решит его основные задачи.
4.Подготовьте подробный отчет о деятельности вашей образовательной организации.
В нем должны быть указаны:
5.Создайте план реализации вашего проекта.
Он должен включать:
Каждый пункт плана должен иметь отдельную цель, которая будет связывать воедино весь проект и все обозначенные проблемы. Обсудите итог с администрацией образовательного учреждения и внесите поправки. Определите бюджет для реализации нового образовательного плана. Используйте только проверенную информацию о заработной плате, пособиях, расходах и т.д.
6.Заполните специальные документы для получения финансирования. Сделайте это согласно всем требованиям. Некоммерческие организации будут благосклонны в том случае, если вы будете использовать глаголы в активном залоге, представлять реальные факты и отвечать на ключевые вопросы.
Им важно знать, почему именно вам должны дать средства для проекта, и какие выгоды получит организация. Если вы покажете много преимуществ, вам выделят средства для реализации образовательного проекта. Тогда вы уже сможете реализовать его согласно заготовленному плану.
Виды проектов:
a.Исследовательский проект по структуре напоминает научное исследование.
Он включает :обоснование актуальности избранной темы
При этом используются методы современной науки: лабораторный эксперимент, моделирование, социологический опрос и другие.
b.Информационный проект направлен на сбор информации о каком-то объекте, явлении с целью ее анализа, обобщения и представления для широкой аудитории.
Продуктом такого проекта часто является публикация в СМИ, в том числе, в Интернете.
Характер контактов между участниками проекта:
c.Межрегиональные и международные проекты обычно, являются телекоммуникационными, иак как требуют для координации деятельности участников взаимодействия в сети Интернет и, значит, ориентированы на использование средств современных компьютерных технологий.
Классификация проектов по продолжительности:
a.Мини– проекты могут укладываться в один урок или менее.
b.Краткосрочные проекты реализуются в течение 4 – 6 уроков.
Уроки используются для координации деятельности участников проектных групп, в то время как основная работа по сбору информации, изготовлению продукта и подготовке презентации осуществляется во внеклассной деятельности и дома.
с.Недельные проектывыполняются в группах в ходе проектной недели.
Их выполнение занимает примерно 30 – 40 часов и целиком проходит при участии руководителя.
d.Годичные проекты (долгосрочные) могут выполняться как в группах, так и индивидуально. Весь годичный проект – от определения проблемы и темы до презентации выполняются во внеурочное время.
День пятницы. Вы поговорили со своей командой, ваши проекты достигли цели, и вы готовы к следующей неделе. Ваши выходные выглядят яркими.
Внезапно к вашему столу приходит начальник с интересными новостями. Вы возглавите следующий крупный многосторонний проект с ключевым клиентом, и его начало состоится на следующей неделе. Это отличные новости, но теперь этот призрак нависает над вашими выходными. Вам нужно будет организовать проект как можно скорее, но с чего начать?
Процесс планирования проекта может быть сложным, особенно когда проекты становятся более сложными.
По данным Forbes, 25% технологических проектов терпят поражение, что является мрачной статистикой для руководителей проектов. Хорошая новость в том, что вам не нужно быть экспертом по управлению проектами или жертвовать своими выходными, чтобы спланировать успешное начало проекта за короткий промежуток времени. Вам просто нужно понять 8 простых шагов, как написать план проекта.
Первый шаг в любом проекте — определить «что» и «почему».Ключевые заинтересованные стороны имеют влияние и полномочия для определения успешности проекта, и их цели должны быть выполнены. Даже если проект исходит от самого генерального директора, вам все равно нужна его поддержка.
Используйте этот начальный разговор, чтобы согласовать, определить цели и определить ценность проекта. В этой части процесса планирования проекта обсудите потребности, ожидания и установите исходные данные для содержания проекта, бюджета и сроков.
Это создает прочную основу для рабочего плана вашего проекта.Для начала рассмотрите возможность использования шаблона плана проекта. Venngage предлагает более 30 шаблонов планов проектов для визуализации вашей стратегии и обеспечения успеха вашего проекта.
Вопросы, которые следует рассмотреть вместе с заинтересованными сторонами:
По словам руководителей, отсутствие четких целей является причиной неудач проекта в 37%.Без четких целей вы обнаружите, что требования, задачи и сроки, которые вы устанавливаете для рабочего плана проекта, не имеют ничего общего с ними. Но теперь, когда у вас есть список потребностей ключевых заинтересованных сторон и их заинтересованность, начните соотносить их с целями и OKR.
OKR — это метод планирования и постановки целей, ставший знаменитым для Intel и Google. Ваш проект должен соответствовать OKR вашей команды и компании.
Попробуйте записать цели проекта на доске плана проекта и связать их с требованиями заинтересованных сторон, которые они решают.Исходя из этого, выстраивайте структуру, этапы и задачи, необходимые для достижения этих целей. Контрольные точки могут определять контрольные точки на протяжении всего проекта, чтобы каждому было ясно, как выглядит прогресс, каковы ожидания и когда они будут измеряться.
Теперь, когда у вас есть набросок проекта, ваши задачи согласованы с целями и поддержка команды, пора создать документ о содержании проекта, в котором подробно описаны элементы проекта, перечисленные на шаге 2.
Посмотрите на каждый результат и определите серию задач, которые необходимо выполнить для достижения каждой из них. Для каждой задачи определите время, необходимое для выполнения, необходимые ресурсы и ответственных за выполнение.
Завершите и запишите детали проекта, чтобы у каждого был единый источник правды. Сделайте документ легко доступным для совместного использования, как в вашем инструменте управления проектами, чтобы снизить вероятность дорогостоящего недопонимания.
Хотя подготовка документации по содержанию проекта и расчет освоенной стоимости должны быть стандартной практикой, каждый четвертый руководитель проекта, опрошенный в рамках исследования Wellingstone State of Project Management Survey, сказал, что они «никогда» или «иногда» готовят стандартные документы по определению объема работ.Его создание поможет вам выделиться из толпы и поможет всем оставаться на одной волне.
С вашими целями, задачами и этапами, уже обозначенными для вас, пора начать включать ваш проект в расписание. Диаграмма Ганта — это удобный инструмент, который помогает легко визуализировать временную шкалу проекта. Это интерактивная временная шкала, которая дает вам полное представление о ходе проекта, объеме работ и зависимостях.
Зависимости — это задачи, которые необходимо выполнить, прежде чем можно будет начать другие задачи.При планировании задач используйте подзадачи, чтобы разбить более крупные на более мелкие. Это может упростить создание отчетов (вы можете ознакомиться с нашим руководством по написанию отчета об управлении проектом!) И управление ресурсами. Определим каждую:
Совет от профессионала: Хотите узнать маленький секрет? По мере их настройки добавляйте подушки к ключевым задачам, чтобы у вас было пространство для маневра для пожарных учений или неожиданных узких мест — например, если клиенту нужно дополнительное время для проверки или член команды позвонит по болезни.
В идеальном мире некоторые задачи могут занять день. Так что, может быть, в вашем плане будет два.Тем не менее, не нужно давать подушку для каждой задачи. Взвесьте риски и добавьте их туда, где это наиболее целесообразно. Будущее тебе скажет спасибо.
Ресурсы — это люди, оборудование или деньги, необходимые для завершения проекта. Выбрав инструменты и получив бюджет, не забывайте о своих сотрудниках. Даже люди, которые уже знают, как составить план работы над проектом и сделали это сотни раз, могут недооценивать свои потребности в рабочей силе.
Диаграмма RACI помогает вам конкретно определить, кто и что будет делать для вашего проекта. Это матрица всех задач проекта, связанных с ответственными (назначенными для выполнения работы), подотчетными (имеет право да / нет / вето), с которыми проводились консультации (необходимо одобрить или вносить вклад) и информированными (необходимо знать о действии) или решение). Здесь вы найдете все, что вам нужно знать о диаграммах RACI.
Когда вы начнете назначать задачи, убедитесь, что учитываете пропускную способность. Уточните обязанности и ожидания каждого человека.Имейте в виду, что 95% сотрудников сообщают, что работают более чем в одной команде или над несколькими проектами одновременно, и если проекты не согласованы, рабочие нагрузки становятся слишком стрессовыми для команд. Согласно нашему недавнему докладу «Эпидемия стресса», стресс заставляет около 50% работников искать другую работу, а 25% вообще бросают текущую работу.
При планировании проекта подумайте о том, как вы будете фильтровать входящие запросы, которые влияют на график или бюджет проекта. Знание того, как рассчитать освоенную стоимость, чтобы отслеживать уровень выполненной работы над проектом по сравнению с планом, является обязательным.Для руководителей проектов такие инструменты, как Wrike Resource, могут помочь визуализировать задачи вашего проекта с точки зрения рабочего процесса команды, обеспечивая наглядность и гибкость для балансировки рабочих нагрузок.
По данным McKinsey, сотрудники тратят около 20% рабочей недели на поиск и сбор информации. Кроме того, неэффективное общение и сотрудничество — две основные причины стресса на рабочем месте.Когда заинтересованным сторонам приходится копаться на страницах электронных писем или постоянно спрашивать обновления, они разочаровываются и мотивация падает.
Сгладьте разочарование, разместив все элементы проекта — такие как активы, разговоры, задачи, сроки выполнения, обновления, отчеты — в одном месте, как инструмент для совместной работы. Это позволяет легко отслеживать прогресс, делиться обновлениями и вносить изменения. Определите, как каждый должен общаться на протяжении всего проекта, и сохраните его в одном инструменте, чтобы каждый мог получить доступ к информации.
Даже если вы эксперт и уже знаете, как написать план проекта, правда в том, что у всех проектов есть перипетии — вот что делает их интересными.
Вы дали себе передышку во время процесса планирования, вы убедились, что все знают свою роль, и вы наладили общение.
Но перед запуском сядьте и определите потенциальные проблемы, такие как предстоящие отпуска для членов команды, праздники или внешние группы, которые могут быть задействованы. Создайте четкую цепочку команд и перечислите ключевые контакты в рамках проекта. Сообщайте заранее о рисках, чтобы вся команда была готова к их совместному устранению.
Каждому успешному проекту нужен толчок.Назначьте быструю встречу с ключевыми заинтересованными сторонами и составьте четкую повестку дня. Ваша цель должна состоять в том, чтобы собрать всех на одной странице, указав цели, роли, процессы и сроки. Ваша повестка дня должна включать все, на чем вы сосредоточились на шагах выше:
Бонусный совет: Вам не нужно каждый раз начинать с нуля! Теперь, когда вы знаете, как написать план проекта, который будет использоваться вашей командой, вы можете скопировать план проекта в шаблон, чтобы использовать его снова и снова.По мере вашего роста вы можете создавать несколько шаблонов для определенных типов планов работы по проекту. Давайте сразу приступим к работе с этими бесплатными образцами шаблонов планов проектов.
Похоже, ваши выходные спасены! Пожалуйста. Теперь у вас есть полномочия для процесса планирования проекта, и после этого у вас будет простой шаблон плана проекта, который поможет вам привести к успеху ваш следующий проект, а затем и следующий за ним. На самом деле все эти сложные проекты станут настолько легкими, что, может быть, вы начнете чувствовать, что в отпуске.Правильно?
Теперь, когда вы научились составлять план проекта, вот основные советы по управлению проектами, которые помогут вашей команде работать более эффективно.
План управления проектом (PMP — не путать с сертификацией Project Management Professional) определяет не только, когда проект будет реализован, но и то, как он будет реализован. Если документ содержит только то, что и когда будет сделано, это не настоящий План управления проектом.
Это может сбивать с толку, поскольку существует ряд веб-сайтов о том, как создать план управления проектом или план проекта, которые не включают ключевые компоненты. Полный план управления проектом должен включать в себя то, как проект выполняется, отслеживается и контролируется. Согласно Project Management Institute, он должен ответить на все вопросы, перечисленные ниже:
Создание вашего плана должно начинаться с шаблона плана управления проектом.Объем и уровень детализации плана будет зависеть от вашей организации и проекта. Многие компании уже имеют внутренний шаблон, который они предпочитают использовать, в котором указывается уровень необходимой им информации. План всегда должен начинаться с титульной страницы, истории версий и оглавления. Сильный план управления проектом будет включать в себя всю следующую информацию:
В зависимости от проекта могут также быть дополнительные дополнительные планы, такие как:
Очевидно, много информации уходит в создание плана управления проектом.Поэтому разумно задаться вопросом, как менеджер проекта собирает все это воедино. Во-первых, вы должны знать, что планы проектов часто считаются «живыми» документами. Это означает, что ожидается, что они будут обновляться и изменяться по мере развития проекта и / или обнаружения новой информации, требующей изменения плана. Во-вторых, составление надежного плана управления проектом требует времени и усилий. Вы можете выполнить следующие шаги, чтобы сделать это как можно более эффективно:
Даже если заинтересованные стороны проекта уже указаны в другом документе, таком как бизнес-модель или устав проекта, это важно. чтобы просмотреть список и убедиться, что он по-прежнему точен.Затем встретятся все заинтересованные стороны проекта, чтобы обсудить цели и объем проекта. Это гарантирует, что все будут на одной странице, особенно в отношении предположений, ограничений и ожидаемых результатов. Обсудите процесс планирования с заинтересованными сторонами и убедитесь, что вы готовы помочь в этом процессе.
Все ключевые заинтересованные стороны должны быть предложены внести вклад в части проекта, относящиеся к ним. Чтобы справиться с этим, важно определить, какие заинтересованные стороны вовлечены в каждую область проекта.Это часто является частью плана управления заинтересованными сторонами или даже частью плана управления коммуникациями. Соответствующие заинтересованные стороны включают спонсора проекта, членов команды, конечных пользователей и любых других людей, непосредственно участвующих, например, бизнес-экспертов, аудиторов или тестеров качества.
На этом этапе вы должны быть готовы разработать базовый объем, график и бюджет. Часто проще всего начать с объема, затем завершить график и закончить базовым планом бюджета. Однако эти три параметра взаимозависимы, поэтому имейте в виду, что любое изменение одного из них, скорее всего, повлияет на два других.
После создания базовых планов у вас должен быть план управления ими.Это включает в себя отчетность по ним, мониторинг отклонений и управление ими, а также описание обстоятельств, которые потребуют обновления базовых показателей.
Как вы знаете, планирование — огромная часть роли менеджера проекта. Чем сильнее ваш план, тем больше вероятность, что ваш проект будет успешным. Итак, недостаточно просто спланировать, как вы будете управлять базовыми показателями. Также должны быть созданы планы для управления всеми другими важными аспектами или входами в проект.Как обсуждалось ранее, может быть широкий спектр планов управления, но минимум должен включать управление ресурсами, управление рисками и управление коммуникациями.
Загрузите наш бесплатный шаблон плана коммуникации и мгновенно создайте план коммуникации для своего проекта.
Успешные проекты работают на эффективном общении.Вот почему так важен план коммуникации.
Давайте подробнее рассмотрим, что такое план коммуникаций по проекту, и как и почему вы должны реализовать его для своих проектов.
План коммуникации по проекту — это простой инструмент, который позволяет вам эффективно общаться по проекту с вашим клиентом, командой и другими заинтересованными сторонами. Он устанавливает четкие инструкции о том, как будет передаваться информация, а также о том, кто несет ответственность и должен быть включен в каждый обмен информацией по проекту.
Как руководитель проекта, вы уже наметили каждую задачу и результат, чтобы вы смогли добраться до финиша. Почему бы не сделать то же самое для коммуникаций проекта? В конце концов, план вашего проекта требует постоянного обмена информацией, чтобы не сбиться с пути.
План коммуникации играет важную роль в каждом проекте:
Не существует единого правильного способа общения по проекту.Фактически, ваш план коммуникации может и должен включать в себя множество способов коммуникации. Вот некоторые из них:
Итак как узнать, что подходит для проекта? Просмотрите прошлые проекты, чтобы увидеть, что сработало, а что нет. Затем поговорите со своей командой, клиентом и другими заинтересованными сторонами, чтобы убедиться, что вы принимаете во внимание их стиль общения.В конце концов, еженедельное электронное письмо бесполезно, если его никто не читает!
Готовы изложить свой план коммуникации на бумаге? Составить план коммуникации для управления проектом так же просто, как выполнить следующие 5 шагов:
Вы лучше всех знаете свою команду и заинтересованные стороны, поэтому как организовать детали — решать вам.Просто убедитесь, что это легко понять. Эти примеры показывают вам 3 различных варианта построения одного и того же коммуникационного плана.
Пример простого матричного плана коммуникаций Пример плана коммуникаций по методам Пример плана коммуникаций по аудитории
Хотите использовать этот формат плана коммуникации для своих будущих проектов? Загрузите наш бесплатный шаблон плана связи здесь.
С TeamGantt легко применить ваш план коммуникации в повседневной практике.Вот лишь несколько способов упростить взаимодействие по проекту и управлять им с помощью TeamGantt: