30 полезных сервисов для веб-разработчиков и дизайнеров v2 / Habr
Предыстория: я веду свой паблик ВК о веб-разработке, в связи с чем я каждый день имею дело с большим количеством материалов о веб-разработке. Однажды (3 месяца назад) мне пришла в голову идея опубликовать на хабре подборку «30 полезных сервисов для веб-разработчика». Тот пост набрал почти 100 000 просмотров, и мне приятно, что он оказался полезен сообществу. С тех пор у меня поднакопилось больше 30 новых сервисов, которые будут полезны как разработчикам, так и дизайнерам. Лучшие из них я собрал в этом посте. Осторожно, под катом много картинок!1. Learn Angular — бесплатные интерактивные уроки по AngularJS.
2. Siteliner — инструмент для seo-анализа сайта. Поиск дублирующегося контента, неработающих ссылок и многое другое.
3. HTML Template Generator — больше подойдет для ленивых разработчиков, еще не использующих никакого boilerplate. Сервис позволяет сгенерировать базовую HTML-разметку документа: добавить нужные мета-теги, скрипты, либо целые бандлы, например, Twitter Bootstrap.
4. Shortcut Mapper — позволяет освежить в памяти горячие сочетания клавиш для программ Adobe Photoshop / Adobe Lightroom, Autodesk 3dsMax / Autodesk Maya, Blender и, с недавних пор, Sublime Text 2.
5. Bounce.JS — одновременно и сервис, и JS-библиотека для быстрого создания и редактирования CSS3-анимаций.
6. CSS Shrink — онлайн-сжатие вашего CSS-кода. Кстати, не только сжатие — можно вставить уродливо отформатированный код и получить на выходе красивый.
7. JS Nice — деобфускация и базовое документирование JS-скрипта. Вставляете непонятный код, сервис его анализирует и приводит в нормальный вид — добавляет отступы, пытается назвать переменные осмысленно в зависимости от контекста, добавляет комментарии с указанием переменных и их типов и т.д.
8. Web Designers Checklist — чек-лист по подготовке проекта к сдаче для веб-дизайнера. Затрагивает многие аспекты, такие как именование файлов и слоев в макете, подготовка типографики, структура файлов и так далее.
9. HTML Hint — похож на JS Hint. Проверяет разметку на соответствие заданным параметрам.
10. Lollytin — визуальный конструктор лэйаута страницы. Использует Bootstrap 3.
11. CSS Colours — красиво оформленный список CSS-цветов, которые могут быть использованы в виде слова, например color: blue.
12. Social Good Ipsum — сервис для генерации текста-рыбы.
13. Badge Service — генерация svg-значков в стиле github.
14. CSS Triggers — подробная информация обо всех CSS-свойствах: что они делают, как влияют на рендеринг страницы и тому подобное.
15. Blockspring — создание своих API, не требующих хранения данных в БД, а также коллекция уже созданных другими юзерами API.
16. Qwecode — кодирование / декодирование строк в различные форматы: BASE64, Binary, Unicode numbers и другие.
17. Loremflickr — это как placehold.it, но с котиками 🙂
18. CSS Shortand generator — собирает специфические свойства типа background-color в одно общее свойство.
19. PX to EM — удобный конвертер из PX в EM и обратно.
20. Frame — набор готовых мокапов для демонстрации дизайна / верстки / etc. Выбираете мокап, загружаете изображение, получаете на выходе готовую картинку с вашей работой.
21. CodeFights — задачки на знание языка JavaScript.
22. Cheetyr — шпаргалки по Photoshop, Illustrator, CSS, Git и Vim.
23. SnazzyMaps — различные цветовые схемы для Google Maps.
24. Plain Pattern — создание паттернов из SVG-изображений.
25. Sass to Scss — конвертер из Sass в Scss.
26. Gitter — удобный чат, имеющий хорошую интеграцию с github’ом.
27. Fibonacci — визуальный конструктор flexbox-лэйаута.
28. Project Parfait — инструмент для быстрой нарезки .psd-макета, и вообще для ускорения верстки в целом. Позволяет узнавать расстояние между слоями, размер разных слоев и многое другое.
29. The Code Player — онлайн-уроки по HTML / CSS / JS в формате живого кодинга. Можно записывать свои уроки.
30. Типограф Муравьева — доступен также и в качестве PHP / Python библиотеки. Позволяет правильно оформить текст.
Веб-дизайн – Дизайн спасет мир / Хабр
Начнем сначала, что такое триггерные email-рассылки? Если объяснить просто, то это реакция на ваши действия после знакомства: зашли в кафе, поздоровались, ознакомились с меню и официант предлагает вам блюда в зависимости от ваших предпочтений. Триггер можно настроить на разные события: от входа на сайт и до отправки письма, если пользователь по какой-то причине не завершил покупку в интернет-магазине.Я занимаюсь развитием проекта Ratatype — это онлайн клавиатурный тренажер, который помогает обучаться слепому десятипальцевому набору на клавиатуре. В этой статье хочу рассказать наш опыт настройки триггерных email-рассылок, как они помогают возвращать пользователя на сайт и как геймификация помогает нам в этом.
Предисловие
В нашей компании Реактор существует ценность «Хорошо или никак». Поэтому когда мы создавали Ratatype, сделали его настолько хорошо, что заниматься его продвижением было достаточно легко. В первый год в функционале сайта ничего не менялось, и мы с помощью компании LivePage занимались активным продвижением под англоязычный рынок. Надо сказать, что получалось это замечательно, так как рост был действительно впечатляющий.
Если вкратце рассказать о самом продукте, то на Ratatype можно:
- проходить уроки и учиться слепой десятипальцевой печати;
- проходить тестирование и получать сертификат скорости печати;
- создавать группы для совместного обучения или соревнования;
- соревноваться с другими пользователями в рейтинге;
- приглашать друзей из facebook и следить за их прогрессом и также соревноваться друг с другом.
Кроме функционала самого сайта, у нас не было инструментов, которые бы возвращали пользователя на сайт. Ни тебе письма, ни какой-то напоминалочки. Поэтому в 2015 году мы это решили исправить. Понимаю, что сейчас 2019, но история актуальна и до сих пор приносит свои плоды.
ПутеводительВеб-технологии Курсы дизайна и фотографии Веб-дизайн
успешно закончили 5937 человек! 
|
Web design. Visual design and layout of sitesПрограмма курса соответствует требованиям профессионального стандарта. Курс рекомендован Российской ассоциацией электронных коммуникаций. Хотите научиться создавать дизайн сайтов? Нацелены овладеть современным подходами в решении творческих задач? Хотите понять, как веб-дизайнеру добиться успеха? Тогда этот курс для вас. Веб-дизайн — это то, с чего начинается сайт. Это первое впечатление, после которого пользователь решает: остаться на сайте или нет. Это решение принимается интуитивно и быстро. Поэтому во многом от дизайна зависит, сколько посетителей задержатся на сайте, какое первое впечатление о компании сложится. Веб-дизайнер – востребованная и, вместе с тем, сравнительно молодая для нашей страны профессия, которая находится на пике популярности. Веб-дизайнер должен обладать не только художественным вкусом и знаниями в области графического дизайна, но и владеть современными интернет-технологиями. Курс хорош тем, что вы начинаете знакомство с предметом изучения с самых азов и в быстрой динамике получаете необходимые знания, чтобы приступить к работе. Во время обучения вы разберётесь, какие бывают веб-ресурсы, чем они отличаются, как эти отличия необходимо учитывать и использовать дизайнеру. Вы изучите современные стили и принципы дизайна (включая Google Material Design), научитесь применять различные виды макетов (фиксированный, резиновый, адаптивный отзывчивый), сможете использовать CSS-эффекты, анимацию и микровоздействия, скрипты, узнаете, как движок сайта влияет на вашу работу, поймёте, как достигается вау-эффект. Уникальность курса ещё и в том, что вы узнаете, как дизайнеру максимально выгодно позиционировать себя, где демонстрировать свои достижения, чтобы получить заказы на фрилансе или постоянную работу в офисе, узнаете тонкости взаимодействия со «смежниками», к примеру, с верстальщиком, от которого во многом зависит, как ваши решения будут выглядеть на сайте. Курс предназначен для веб-дизайнеров, разработчиков веб-приложений, сотрудников рекламных агентств. В ходе курса вы пройдёте полный цикл работ по разработке дизайна собственного веб-проекта. Учитесь у лучших профессионалов-практиков. Приходите в «Специалист». |
Бакалавриат — Дизайн и программирование — Обучение ux, ui, веб дизайну — Профиль Школы дизайна НИУ ВШЭ — ВУЗ
Собеседование
Собеседование проводится индивидуально и предполагает интерактивный диалог членов приемной комиссии с абитуриентом. Для успешного прохождения собеседования вы должны быть готовы назвать не менее двух запомнившихся вам авторов или артефактов / или стилевую тенденцию, художественное направление, характерные для нижеперечисленных периодов истории искусства и культуры, и уметь дать им краткую характеристику: Античность, Раннее Средневековье, Высокое Средневековье, XIV век, XV век, XVI век, XVII век, XVIII век, XIX век, XX век.
Творческий проект
При подготовке творческого проекта необходимо выбрать один из профилей обучения и в соответствии с ним выполнить серию работ (от 6 до 12), объединенных одной темой, связанных единой конепцией и единым стилистическим решением.
Темы проектов для поступления на все профили (кроме профиля «Дизайн и современное искусство») выбирается абитуриентом самостоятельно и должна раскрыть его/ее творческий потенциал и уровень художественного мышления. Школа дизайна предлагает возможные, но не обязательные темы. Если поступающие выбирают для своего проекта отличную от предложенных тем, то, при условии сохранения принципа серийности, концептуальности и единства стиля комиссия рассмотрит такой проект наравне со всеми.
Каждый проект должен быть подготовлен специально для вступительных испытаний в Школу дизайна НИУ ВШЭ. Не разрешается предоставлять на просмотр проекты, выполненные для вступительных экзаменов в другие вузы, а также дипломные работы, выполненные для колледжей и других учреждений СПО.
Для успешного выполнения проекта абитуриентам предлагается два варианта: выбрать существующий в интернете продукт или придумать продукт самостоятельно. Идея может быть как совершенно реальная и возможная для реализации сегодня, так и абсолютно фантастическая и оторванная от реальности.
Цифровой продукт (реальный или придуманный) может быть стартапом / онлайн-сервисом / мобильным приложением / приложением в мире виртуальной реальности или дополненной реальности.
Абитуриент выбирает любую сферу применения цифрового продукта, например:
- Социальная сфера;
- Онлайн услуги;
- Инструменты для бизнеса;
- Искусство и др.
Для цифрового продукта (реального или придуманного) необходимо разработать фирменный стиль:
- Рекламную кампанию;
- Серию рекламных плакатов;
- Логику работы;
- Интерфейс для выбранного продукта.
Проект представляется в формате презентации, распечатанной на одном из физических носителей. Презентация должна отражать идею и логику проекта и состоять не менее, чем из серии из 6 слайдов.
дизайн — это… Что такое Web-дизайн?
Веб-дизайн (от англ. Web design) — отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений. Веб-дизайнеры проектируют логическую структуру веб-страниц, продумывают наиболее удобные решения подачи информации, а так же занимаются художественным оформлением веб-проекта. В результате пересечения двух отраслей человеческой деятельности грамотный веб-дизайнер должен быть знаком с последними веб-технологиями и обладать соответствующими художественными качествами.
В настоящее время услуги веб-дизайна предоставляют как специальные компании, так и частные лица (фрилансеры веб-дизайнеры или веб-мастеры).
Веб-дизайнер — сравнительно молодая профессия, и профессиональное образование в области веб-дизайна в России пока не распространено. В связи с увеличением спроса на интернет, растет и спрос на дизайн сайтов, увеличивается количество веб-дизайнеров и таковым может работать человек, с совершенно не связанным с дизайном образованием.
Объяснение термина
В настоящее время под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение удобства пользования ресурсом для пользователей. Немаловажной частью проектирования ресурса в последнее время стало приведение ресурса в соответствие стандартам W3C, что обеспечивает доступность содержания для людей с ограниченными физическими возможностями и пользователей портативных устройств
Формулировка задачи веб-дизайна
Создание технического задания
Составлением технического задания для специалистов занимается менеджер проекта. Работа с заказчиком начинается с заполнения брифа, в котором заказчик излагает свои пожелания относительно визуального представления и структуры сайта, указывает на ошибки в старой версии сайта, приводит примеры сайтов конкурентов. Исходя из брифа, менеджер составляет техническое задание, учитывая возможности программных и дизайнерских средств. Этап заканчивается после утверждения технического задания заказчиком. Важно сразу отметить, что этапы проектирования веб-сайтов зависят от многих факторов, таких как объем сайта, функциональность, задачи, которые должен выполнять будущий ресурс и многое другое. Однако, есть несколько этапов, которые в обязательном порядке присутствуют в планировании любого проекта.
Этапы проектирования
- Дизайн основной и типовых страниц сайта
Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.
При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.
Количество эскизов и порядок их предоставления оговаривается с проект менеджером. Так же менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап так же заканчивается утверждением эскиза заказчиком.
Утверждённый дизайн передаётся html-верстальщику, который «нарезает» графическую картинку на отдельные рисунки, из которых в последствии складывает html-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны.
В небольших студиях, html-кодированием занимается веб-дизайнер.
Далее html-кодер передает HTML-файлы программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS «движком».
В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт состоящий из заменяемых частей. «Программист» — в данном случае правильно будет назвать его просто специалистом по CMS, должен заменить стандартный шаблон, поставлявшийся с CMS на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «вебдизайна».
При программировании сайта специалисту назначаются контрольные точки сроков.
- Завершающим этапом разработки сайта под ключ является конечно же тестирование.
Вебдизайн сайта должен адекватно выглядть в различных браузерах, особенно в браузерах IE 6 (Интернет-эксплорер) и Opera.
Упомянутый IE 6 слишком по-своему видит HTML стандарты — отголоски старой борьбы за лидерство с Netscape. На данное время это морально устаревший браузер, создает много проблем для вебдизайнера, и его хотели чуть ли не объявить вне закона. Но поскольку он в стандартной поставке Windows XP, и стоит на более чем половине всех компьютеров, — никуда не дется, приходится в нем тестировать обязательно. Далее тестируется вид с увеличенными шрифтами, при отсутствующем флешь-плеере и тому подобное. Обнаруженные ошибки отправляются на исправление до тех пор пока не будут устранены.
Сроки контролирует менеджер проекта. Так же на этом этапе привлекают к работе дизайнера, чтобы он провел авторский надзор.
Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.
Сайт наполняют контентом — текстами, изображениями, файлами для скачивания и т. д. Иногда тексты составляются специалистом студии, иногда контентом занимается ответственное лицо со стороны заказчика. Это решается на этапе составления технического задания. В случае если контент составляется представителем студии, то это происходит и утверждается параллельно с другими этапами проекта.
- Внутренняя SEO-оптимизация.
Связана с некоторыми изменениями самого сайта. Начинается она с определения т.н. семантического ядра (У SEОшников своя феня:)). Здесь определяются такие ключевые слова, которые привлекут наиболее заинтересованных посетителей, по которым выиграть конкуренцию проще. Затем эти слова вносятся на сайт. Тексты, ссылки, другие теги адаптируются так, что бы поисковые системы могли их успешно находить по ключевым словам.
- Внешняя SEO-оптимизация.
Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка. К разработке сайта внешняя SEO-оптимизация не имеет отношения. Поскольку SEO-оптимизация это разновидность шаманизма — она как магия, классифицируется на «белую» и «черную» -такую, после которой сайт за две недели попадает в топ, а потом в бан. Настоящая белая SEO оптимизация это трудоемкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.
- Сдача проекта
Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.
Так же на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоны сайта.
Процесс и результат
Уникальный дизайн стоит дороже, но и предполагает отрисовку с нуля, полностью уникальную разработку под конкретный заказ. В зависимости от профессионализма и/или политики компании веб-дизайнер либо разрабатывает идею и концепцию дизайна полностью самостоятельно, либо получает ряд требований (цвет, стиль и т. п.), ожиданий и идей от заказчика или креативного директора (арт-директора) и старается держаться этого направления при разработке макета.
Иногда дизайнер может предложить дизайн-решение на основе шаблонов (своих или даже чужих), это ускоряет работу и обойдется заказчику дешевле. Некоторые дизайнеры даже специализируются на изготовлении дизайн-макетов для продажи в качестве готовых шаблонов, которые затем могут быть куплены и использоваться менее опытными дизайнерами или веб-мастерами для изготовления типовых сайтов (по сути, без уникального дизайна). Иной раз разработкой веб-дизайна называют небольшую перекомпоновку и адаптацию такого шаблона под конкретный заказ.
Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта, размером приблизительно 960х640 px (пикселей) — размер, соответствующий среднему стандарту, связанный с необходимостью дальнейшей привязки к разным разрешениям экрана монитора. Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь — отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновку и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки.
Для главной страницы и внутренних иногда рисуются отдельные макеты с дополнениями или изменениями в соответствии с тематикой страницы.
Изображение первоначально может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop или другом визуальном редакторе, но для верстальщика изображение, как правило, переводится в растровый формат.
Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений.
Примечания
Ссылки
Литература
- Якоб Нильсен Веб-дизайн. — СПб: Символ-Плюс, 2003. — 512 с. — ISBN 5-93286-004-9
- Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — С. 368. — ISBN 0-321-35031-6
- Роббинс Д. Web-дизайн. Справочник.. — «КУДИЦ-ПРЕСС», 2008. — С. 816. — ISBN : 978-5-91136-039-9
- Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник.. — «КУДИЦ-ПРЕСС», 2007. — С. 320. — ISBN : 978-5-91136-024-5
См. также
Wikimedia Foundation. 2010.