Goal abandoned
The author does not write in the goal 8 years 5 months 24 days
Обновить дизайн сайта за 1 месяц
Я занимаюсь дизайном и фронтенд разработкой сайтов с 2008 года, это уже 8 лет, я создал сотни сайтов и на протяжении всего этого времени я всегда хотел создать сайт для себя, который будет приносить пассивный доход.
В 2015 году я всё таки приступил к этому, выделяя немного времени, я медленно мастерил онлайн кинотеатр (да, я понимаю, что их уже много, но они все ужасно не удобные и я могу сделать лучше). Так как из-за официальной работы, частных заказов и спортзала остается очень мало свободного времени, дело по созданию сайта двигалось очень медленно. В начале 2016 года, я взял не большой отпуск и выделил время для проработки функционала сайта, реализовал уже многие важные вещи, такие как:
- Быстрый просмотр фильмов с кинопоиска, просто заменив в адресной строке фильма kinopoisk.ru на topkino.tv
- Вывод всех возможных озвучек сериалов
- Автоматическое запоминание просмотренных сезонов и серий сериала, а так же выбранной озвучки
- Возможность прямо с сайта скачать фильм с самых популярных торрентов
- Многофункциональный поиск по фильтрам
- И другие внутренние инструменты
Это лишь основная часть и есть еще много всего, что я буду реализовывать по функционалу. И вот, есть огромнейшая база фильмов и сериалов, начиная с 70-х годов и до сегодняшних дней, много удобных функций, которых нет на множестве подобных сайтов, а вот дизайн... дизайна, так сказать не очень... да, некоторым он нравится, но просматривая статистику сайта, я вижу как люди пользуются сайтом и понимаю, что он не особо удобен + очень тяжелый., да и вообще, как говорится "можно сделать лучше".
Вот здесь на самом деле и начинается моя самая главная проблема с которой я надеюсь справиться по средствам этой цели. Я на протяжении 4 недель уже рисую новый дизайн и с каждым разом его перерисовываю в различной структуре, различном оформлении, стилистике и так далее, мне очень сложно угодить себе самому. Каждый раз приходят новые идеи, меняется желаемый результат и так далее, это все приводит к тому, что время идет, а в результате у меня уже 4-5 недоработанных макетов нового дизайна и боюсь если я не составлю конкретный структурированный план по отрисовке и верстке нового дизайна, то я так и буду дальше создавать новые и новые макеты не "оживляя" их. Мне нужны рамки, как в работе с заказчиками, когда у меня есть конкретные пожелания, техническое задание и сроки.
Собственно сам пациент: TopKino.tv
Goal Accomplishment Criteria
Готовый новый дизайн всех страниц сайта, сверстанный заново за 1 месяц
Personal resources
Большой опыт в веб разработке
Goal ecological compatibility
Я люблю смотреть фильмы и сериалы и всегда хотел свой собственны онлайн кинотеатр, который будет красивей и удобней всех остальных
-
Составить список главных особенностей удобного сайта
Нужен точный список опорных особенностей удобного сайта, все пункты этого списка обязательно должны быть учтены в разработке дизайна. Это даст нерушимый костяк, который не позволит метаться от идеи к идее.
-
Накидать схематичную структуру сайта
Прежде чем перейти к отрисовке дизайна, необходимо накидать схематичную структуру каждой страницы сайта, так как внести в нее какие-то изменения гораздо проще, чем в готовый, стилистически оформленный макет. Учитывать при этом список главных особенностей составленный ранее. Для этого можно использовать сервис: http://ninjamock.com/
-
Главная страница
-
Страница раздела
-
Страница фильма
-
Страница сериала
-
Страница с фильтрами
-
-
Выбор цветовой гаммы
Необходимо выбрать 3 основных цвета, это:
- фоновый цвет, который определит так же и тональность сайта (светлы или темный)
- главный цвет, он отвечает за оформление больших поверхностей, которые надо выделить по отношению к фону
- акцентирующий цвет, он необходим для расставления акцентов на мелкие элементы и является дополнением к главному цвету
-
Отрисовка дизайна каждой страницы сайта
3 предыдущих шага дадут мне основной костяк и путь движения в отрисовке нового дизайна. Они четко определят все главные моменты и не дадут мне плодить бесчисленное множество вариаций дизайна. Главное в этом шаге, не включать излишнюю фантазию и четко следовать плану.
-
Дизайн главной страниц
-
Дизайн страницы раздела
-
Дизайн страницы фильма
-
Дизайн страницы сериала
-
Дизайн страницы с фильтрами
-
Дизайн профиля пользователя
-
-
Внесение мелких изменений в отрисованный дизайн
По окончанию отрисовки дизайна, необходимо будет пробежаться по всем макетам и внести мелкие исправления доведя дизайн до состояния, которым я буду доволен.
-
Формирование файловой структуры и её сборка
Когда дизайн будет готов, можно будет перейти к его верстке. В первую очередь необходимо создать файловую структуру и настроить сборку и компиляцию файлов. Для сборки и компиляции я буду использовать Grunt.js, для стилей исходным форматом станет less, а в роли стандарта нейминга классов выступит ВЭМ. JS будет реализован в виде модульной системы, что его упорядочит и сделает понятным.
-
Настройка всех основных переменных кода
Перед началом верстки необходимо настроить все основные переменные, опираясь на которые буду писать код. Это позволит сделать код гибким и избавит от расхождений в оформлении. Например, когда у одного элемента желтый цвет одной тональности, у другого другой, то же самое с отступами, шрифтами и так далее.
-
Верстка всех страниц сайта
После всех предварительных, но обязательных подготовок, можно приступить к верстке дизайна. Главная особенность этого процесса, это полное соблюдение и использование подготовленных ранее переменных и настроек проекта. Ни в коем случае не стоит спешить и пихать инлайновые стили и скрипты.
-
Верстка главной страниц
-
Верстка страницы раздела
-
Верстка страницы фильма
-
Верстка страницы сериала
-
Верстка страницы с фильтрами
-
-
Подключение статичной верстки в движок
Как будет готова верстка основных страниц, необходимо будет прикрепить ее к движку, не потеряв при этом все возможности сборки и компиляции проекта.
-
"Оживляем" верстку
На данном этапе необходимо в первую очередь заставить работать написанный нами ранее статичный код, как полноценный сайт. Для этого обернем возможности движка нашим кодом. В первую очередь пойдут основные страницы, а затем более мелкие и менее важные.
-
Мелкие доработки и финал
Вносим мелкие доработки и исправляем баги. На данном этапе должен получиться полностью функциональный сайт с новым дизайном, который можно будет со спокойной душей расширять новым функционалом, улучшать и продвигать.
Don't miss new posts!
Subscribe for the Goal and follow through to its completion
