Актуальные новости и статьи
Слова «контент – король всего», сказанные основателем Microsoft Билом Гейтсом в 1996 за последнее время неоднократно оспаривались экспертами SEO-индустрии. Трафик, коммуникации, работа с клиентами – все влияет на наши желания узурпировать трон Интернет-маркетинга. Затронутые моменты верны и правдивы, однако мне стоит напомнить читателям, что нельзя забывать о работе с контентом.
Я прошел через такой же удручающий опыт, когда писал статьи в блог, а их практически никто не читал и посещаемость блога не росла. Несколько месяцев я боролся с чувством разочарования от маленького трафика, пока не понял горькой правды о том, что вся проблема была в контенте. Я проанализировал его и нашел 10 факторов, влиявших на общие недостатки блога, и хотел бы поделиться ими с остальными блогерами, столкнувшимися с подобными проблемами.
1. Посредственные статьи – Сколько я ни писал статей в блог, ни одна из них не могла предложить читателю ничего оригинального. Тогда я понял, что в статье должно быть что-то, что выделяло бы ее среди остальных статей. Вам нужно дать посетителям повод посещать именно ваш блог, а не сотни других блогов с подобным содержанием.
2. Отсутствие идентичности – Кроме уникального содержания, в статьях должен прослеживаться ваш индивидуальный подход, ваш голос, который бы выделял их среди остальных статей. Я был одним из безликих блогеров среди океана блогосферы, писал монотонные статьи, в которых не было ни капли отличающей их изюминки. Вам следует создать связь с читателями, и она начинается с идентификации вашей работы, которую они смогут признать и принять для себя.
3. Статьи без вдохновения – Эта проблема обычно вытекает из первых двух причин, однако заслуживает отдельного внимания. Я не мог привлечь внимания потенциальных читателей из-за моего стиля письма, который зачастую был сложным для чтения. Избегайте такой ловушки, делая статьи легкими для чтения и, в то же время, побуждающими читателя что-то сделать.
4. Неинтересные темы – Здесь все понятно, но даже я, должен признаться, писал статьи скучнейшей тематики только для того, чтобы включить в них популярные ключевые слова. Уделите немного времени на чтение того, о чем люди говорят в социальных сетях, и сделайте хорошую статью на эту тему. Только помните, надо добавить чего-то интересного для продолжения общения с читателями и не пишите лишь то, о чем уже все давным-давно сказано.
5. Скомканные статьи – Следующей серьезной ошибкой будет описание нескольких тем в статье, пытаясь разместить в одном посте несколько ключевых слов. Я перескакивал от одной темы к другой и в результате читатели теряли интерес к статье. Потому сфокусируйтесь на одной-двух темах, чтобы на них сосредоточить внимание посетителей.
Сентябрьский выпуск обзора новинок для веб-дизайнеров и разработчиков включает в себя новые веб-приложения, CSS-инструменты, email-шаблоны, ресурсы для вдохновения, приложения для повышения продуктивности, jQuery-ресурсы, инструменты для создания паттернов, а также несколько хороших новых комплектов шрифтов.
Большинство из представленных ниже инструментов бесплатны или не сильно дорогие, и будут полезны многим дизайнерам и разработчикам.
Как обычно, если мы упустили что-то, обязательно напишите об этом в комментариях!
01. Gravit
Gravit представляет собой новый open source инструмент для работы с дизайном, который на данный момент доступен в стадии бета-тестирования. Он предлагает возможности для разработки полноценного дизайна, укомплектованные в небольшое приложение.
02. CSS Guidelines
CSS Guidelines – это подборка качественных советов по написанию многофункциональных и удобных таблиц. Подборка была составлена Harry Roberts.
03. Transactional HTML Email Templates
Коллекция Transactional HTML Email Templates позволит вам без труда создавать самые ходовые и удобные трансакционные email-письма, включая счета, запросы, спросы пароля и многое другое. Эти шаблоны отлично работают как на настольных ПК, так и на мобильных устройствах.
04. New Slides editor
Slides – это новый редактор, доступный в стадии публичного бета-тестирования. Была проделана очень большая работа, и редактор стал гораздо более привлекательным внешне.
05. Shrthnd
Shrthnd – это простое в использовании веб-приложение с условными обозначениями СSS. Просто внесите ваш стандартный CSS-код, а Shrthnd выдаст вам укороченную версию, которой гораздо проще пользоваться.
06. GoMoodboard.com
GoMoodboard.com – это бесплатный конструктор досок настроения (moodboard), который позволяет вам создавать специальные доски из всего, что вам нравится. Начинайте с пустой доски, либо используйте один из представленных шаблонов.
07. Responsive Web Design Podcast
Responsive Web Design Podcast публикуется совместно авторами Karen McGrane и Ethan Marcotte, и в каждом эпизоде присутствует интервью с людьми, кто работал над адаптивными дизайнами для известных сайтов, включая Capital One, Marriott и других.
08. The Colors of Motion
The Colors of Motion разбивает цветовую палитру известных фильмов на покадровой основе. UI выполнен очень просто и удобно, и вам остается просто кликнуть по фильму, а приложение само обнаружит все нужные вам цвета в кадре.
09. Электронная книга Web UI Design Patterns 2014
Электронная книга Web UI Design Patterns 2014 от Chris Bank и Waleed Zuberi позволяет глубже взглянуть на сайты типа Amazon, Kickstarter, AirBnB, Eventbrite, Mailchimp и другие, и понять, какие паттерны в них используются, и почему.
10. UXPorn
UXPorn – это подборка вдохновляющих UX для дизайнеров. Сюда включены шаблоны прототипов, дизайн паттерны в интерфейсах и многое другое.
11. The Stocks
Если вы ищите бесплатные стоковые фотографии, которые выходят за рамки стандартных стоковых фото-сайтов, то вам обязательно следует познакомиться с The Stocks.
12. Grid Lover
Gridlover – это очень удобный инструмент для создания модульных систем типографики. Инструмент предоставляет вам настраиваемые посредством CSS размер шрифтов, высоту строки и поля.
13. Aesop’s Fables с Google Fonts
Эта вручную собранная коллекция от Aesop’s Fables создана с использованием Google-шрифтов. Отличный ресурс для вдохновения, особенно если вам хочется понять, какие шрифты лучше всего сочетаются.
14. CommonMark
CommonMark – это очень конкретная и совместимая реализация Markdown, направленная на создание универсального стандарта синтаксиса Markdown.
15. Folllowing
Folllowing – это простой способ поиска Twitter-аккаунтов дизайнеров из Dribbble. Все, что вам нужно сделать, это просто связать эти аккаунты.
16. Fibonacci Flexbox Composer
Fibonacci Flexbox Composer позволяет вам без труда создавать шаблоны Flexbox и затем экспортировать их в HTML и CSS-коды. Несмотря на название, на самом деле здесь не используются принципы Fibonacci.
17. Plain Pattern
Plain Pattern – это приложение для создания бесшовных SVG-паттернов, которое позволяет вам клонировать фигуры и скачивать изображения паттернов.
18. UILang
UILang – это язык программирования, ориентированный на создание UI, который идеально подходит веб-дизайнерам. Он позволяет без труда создавать всплывающие окна, галереи, наложения, вкладки и многое другое.
19. Pexels
Pexels – это поисковая система для поиска бесплатных фотографий по всему миру. Все они распространяются под лицензионным соглашением Creative Commons Zero, поэтому их можно копировать, изменять, публиковать и использовать по собственному усмотрению.
20. Animsition
Animsition – это jQuery-плагин для реализации переходов по страницам при помощи CSS-анимаций. Здесь предложено 18 разных анимаций, включая виды затемнения, вращения, увеличения и так далее.
21. jQuery FocusPoint
jQuery FocusPoint предлагает интеллектуальную систему обрезки изображений. Она позволяет вам указывать точки фокусировки изображения, и обрезать все остальное, что в принципе дает практически адаптивные изображения.
22. Userium Usability Checklist
Userium Usability Checklist – это отличный способ выявить самые основные ошибки в юзабилити, что помогает сэкономить время и деньги.
23. Adorable Avatars
Adorable Avatars представляет собой сервис по созданию аватаров, который позволяет вам делать полноценные аватары на базе уникальной идентификации, которую вы же и предлагаете.
24. One Hundred Patterns
One Hundred Patterns – это блог в Tumblr, который представляет собой постоянно растущую коллекцию паттернов.
25. Flynn
Flynn включает в себя компоненты для решения операций, с ресурсным фреймворком нижнего уровня, и возможностью создания компонентов последующих уровней. Все вместе позволяет вам быстро реализовать, поддерживать и изменять приложения базы данных.
26. Bowery
Bowery предоставляет вам полноценную среду разработки без необходимости использовать дороги серверы, виртуальные машины или локальные установки. Просто укажите ваше приложение, подключите Browery, и затем делитесь им или работайте над ним всем коллективом.
27. Mailpile
Mailpile – это размещенный в интернете почтовый клиент, предоставляющий шифрование для защиты информации пользователей, а также настройки безопасности. Эта система очень быстра и адаптивна, и предлагает вам продуманный функционал поиска и применения тэгов.
28. Aerobatic
Aerobatic – это облачный сервис, разработанный специально для создателей внешних интерфейсов. Он облегчает вам задачу по разработке полноценных одностраничных HTML5-приложений в облаке.
29. Slack
Slack представляет собой коммуникационную платформу «все в одном» для команд. Здесь интегрируются все нужные сервисы, включая Dropbox, Google Drive, GitHub и многое другое.
30. 92Five App
92Five App представляет собой размещенное в интернете веб-приложение, предназначенное для проект-менеджмента, которое включает в себя все необходимые функции для управления простым приложением. Здесь можно отметить наличие проектов, задач, расписания, календаря, списков запланированных действий, отчетов, профилей пользователей и многое другое.
31. DesignCrit.io
DesignCrit.io – это приложение для получения отзывов о дизайнах, которое позволяет вам создавать и подписывать веб-сайты всего в несколько кликов.
32. Briefbox
Требуется вдохновение для новых дизайн-проектов? Briefbox предлагает вам различные советы от дизайнеров, подкрепленные визуальным вдохновением.
33. Dude Hank Pro (плата по усмотрению)
Dude Hank Pro – это новое дополнение к семейству Dude, которое представлено в трех шрифтах: Hank Sr., Hank Jr. и Hank III. Сюда также включен шрифт Catchwords. Кириллица не поддерживается.
34. Rasmus ($10)
Rasmus представлен с 4 стилями (обычный, полужирный, наклонный и наклонный полужирный), и разработан он был под вдохновением классическими шрифтами с засечками. Кириллица не поддерживается.
35. Ballpoint Script ($25)
Ballpoint Script – это неформальный письменный шрифт в едином уровне плотности. Он должен создавать ощущение рукописного шрифта. Кириллица не поддерживается.
36. Hardy ($10)
Hardy – это экранный шрифт, который включает в себя округлые разрезы. Кириллица не поддерживается.
37. Show Stopper ($20)
Show Stopper – это экранный шрифт, разработанный под вдохновением индустрией штамповки знаков. Кириллица не поддерживается.
38. Reidfork ($17)
Reidfork – шрифт в винтажном стиле, который представлен в 3 стилях: обычном, рукописном и шероховатом. Он также поставляется с дополнительными векторами и винтажной печаткой. Кириллица не поддерживается.
39. Say Less ($12)
Say Less представляет собой кастомный винтажный шрифт с засечками, выполненный в рукописном стиле. Кириллица не поддерживается.
40. Olive ($15)
Olive – это рукописный шрифт в романском стиле. Он представлен в 3 стилях: узком, обычном и с дополнительными декорациями. Кириллица не поддерживается.
41. Factoria ($129)
Factoria это шрифт, разработанный под вдохновением индустриализмом, и выполненный в геометрических квадратных формах. Он представлен в 8 уровнях плотности и дополнительными наклонными. Кириллица не поддерживается.
42. Timber ($10)
Timber – это рукописный шрифт с винтажным стилем. Кириллица не поддерживается.
Типографика — критически важный элемент любого дизайн-проекта, идет ли речь о печатной продукции или же веб-дизайне. Ни один сайт или постер не будет выглядеть завершенным без текста. Однако мало просто добавить текст. Важно правильно его расположить на странице, учитывая множество факторов. Об этом и поговорим сегодня.
Для прогрессивной визуальной разработки нельзя просто внедрить пару тройку фишек. Нужно радикально изменить сознание и фундаментально поменять подход. Я не буду разбивать процесс на избитые заезженные этапы. Опишу более свежо. Две основных составляющих агрессивно нового подхода: «Дизайн в Браузере» и «Автоматизация фронт-энда».
Начнем с первого — «дизайна». Тут проблема в отношении к дизайну как к статической .psd. По ощущению это должно было потерять свою актуальность в тот момент, когда появился адаптив, добавилась динамика и доработка на живую макета стала привычным делом. Теоретически смерть статичных .psd-шек наступила вместе с отходом табличной верстки. Зачем пытаться оживить то, что отслужило?! Тогда это было актуально, так как фактически в таблицу запахивалась картинка макета, только в нарезанном виде. Сейчас же макет выполняет роль ориентира. В большинстве случаев мы не вырезаем ни пикселя. А просто держим макет открытым в соседнем окошке. Для того, чтобы написать всю эту «красоту» кодом.
Дизайн меняется
Сегодня получать картинку с огромным описанием поведения, которое «дизайнеры» определили на глаз в инструменте крайне отдаленном от веба, глупо и неразумно. Макет, вышедший с экрана дизайнера может поменяться по пути к верстальщику. И вы получите огромное количество комментариев и пожеланий, которые невозможно отразить на картинке. Альтернативный подход — разрабатывать дизайн непосредственно в родной среде, то есть в браузере. Видно, как стремительно набирает популярность такой подход.
Кто использует прогрессивный подход?
Ребята на питерском WSD достаточно наглядно показали свои живые прототипы финансовых аппликаций.
Буквально в начале месяца был отличный доклад Антона Виноградова (@awinogradov) из Альфа-лаб на BEMup, где он буквально за несколько минут оперативно набросал верстку приложения Яндекс.такси
Ну и конечно, ждем связку внутренних продуктов ребят из «Одноклассников» Lego + SourceJS. Насколько я понял из небольшой демки в скринкасте от Роберта (operatino), интерфейс будет собираться из подготовленных, сверстанных и задокументированных блоков. А пока можно навести порядок, используя документацию верстки на SourceJS. Полезная привычка, которая окупается сполна.
И, конечно же, доклад Ильи Пухальского(@pukhalski) Rest in PS. Очень здорово и наглядно разъяснил аналогичную тему.
Это самое заметное, что видел за последнее время. Плюс несколько моментов, обсуждаемый в частных беседах. Этих аргументов и примеров вполне достаточно, чтобы понять превосходство такого подхода. Остается попробовать и вряд ли вы вернетесь обратно к старому «пещерному ремеслу» вычиканивания .psd.
Переход в «правильную» среду
Разработка веб-дизайна в инструментах для него не предназначенных — отчаянный и тупиковый подход. Если отбросить дрибббльную эйфорию, я не знаю, насколько конкретно могу назвать дизайнерами тех, кого принято считать таковыми в не совсем заметных агентствах. Это, как правило, «персонажи», на которых сваливают непосильные обязанности. В общем, они рисуют весь внешний вид, не всегда опираясь на логику, и команда слепо верит на слово. Часто они лезут не в свою область, пытаясь опровергнуть привычное поведение. Но при этом верстальщик должен им отправить макет, который они пристально осматривают и говорят правки. Самое абсурдное, что за эталон в сравнении берут свой .psd файл. Который часто противоречит здравой логике. Глупая ситуация, не так ли?
Наблюдая метания верстальщиков между написанием «велосипедов» для упертых псевдо-дизайнерских решений и необходимостью угодить тестировщикам, это здорово подстегивает меня внедрить логику в процесс. С которым команда может работать на один результат, а не губить проект в пользу своих амбиций.
С толку сбивает огромное количество разношерстных инструментов, которые используются для визуальной части: Axure, Sketch, Photoshop и еще несколько менее известных вещей уже на любителя.
С анимацией дела обстоят гораздо печальней. Тут о привязке к среде вообще речь не идет. Над анимацией извращаются в редакторах для видео, или фигачат несколько картинок, чтобы склеить в .gif. Но в итоге все переписывается на HTML/CSS. Не сильно ли трудозатратный процесс с размазанными промежуточными этапами?!
Переход к единой среде разработке качественно прокачает творческих ребят, придаст дополнительную логику в структуре и предоставит серьезное, более детальное понимание о том, что они делают. Откроет дополнительные возможности, как в анимации, так и в резине. Это будет реальный продукт, который можно переиспользовать и дорабатывать по необходимости. А не очередная глупость, сделанная недальновидными «художниками» с затуманенным сознанием и полностью атрофированным логическим мышлением.
Как внедрить в работу
Есть вариант сделать все довольно безболезненно. Для этого стоит отбросить клише в виде «дизайнер — проектировщик, …, верстальщик». А использовать сильные навыки участников команды. Базовые этапы выглядят так:
1. Разработка общих гайдов
Базовые элементы, которые нужно стилизовать: заголовки, h1 h2 h3, абзацы, ссылки, списки, таблицы, копки, инпуты, селекты и.т.д. Основные стили мы можем сложить в базовый CSS файл. Он будет всегда лежать в нашем стартовом ките.
2. Логические независимые блоки
Обычно это 20-30 размеченных основных блоков. C которых можно легко стартовать. В дальнейшем, пополняя библиотеку, делая ее более масштабной и удобной. Штурмовать каждый новый проект с таким арсеналом будет все приятней. К примеру, это может быть форма регистрации/авторизации, комментарии и другие часто встречающиеся в ваших проектах блоки. Все они аккуратно докумментируются, что позволяет с легкостью их переиспользовать и модифицировать.
Мы делаем:
набросок версткой структуры блока;
общую стилизация, учитывая гайды (1 этап);
разные состояния и анимацию.
3. Сама структура сетки
Берем во внимание поддерживаемые устройства и медиа-запросы. Упор идет на продумывание базового фундамента. Для любителей адаптива это будет максимально полезно, так как есть возможность сфокусироваться на каркасе, это даст большую осмысленность. Как вариант, продумать качественную сетку (возможно, взять готовое решение и доработать по необходимости).
4. Интеграция
Здесь не нужно много думать над разработкой. Мы просто интегрируем заранее подготовленный модули (2 этап) в наш каркас (3 этап). Достаточно сделать пару небольших допилов и восторгаться результатом. Так сказать, ощутить всю магию модульного подхода.
Фанатики продавят идею
Понятно, что стартовать меняя привычную систему в целом либо страшно, либо влом. Но есть масса ребят, пропагандирующих и наслаждающиеся методологией. Масса — это сила, которая толкает вперед. Так что процитирую одного дизайнера: «велкам в секту». И поменьше вам статики.
А знаете ли Вы, что в современном мире, где люди стремятся как автоматизировать как можно больше процессов, роботы умеют делать многое. Есть роботы, которые изготавливают детали на крупных предприятиях, есть те, которые помогают по дому или огороду. Да мало ли, какие еще роботы изобретены пытливым человеческим умом для облегчения своей жизни.
В этой статье я постараюсь объяснить, как повысить посещаемость сайта бесплатно и, по возможности, при минимальных временных затратах. Аспекты СЕО оптимизации затронуты не будут, упор делается на другие методы увеличения посещаемости.
Узнайте, как превратить любительский сайт в по-настоящему профессиональный, используя современные принципы веб-дизайна:
Согласитесь, на слух название «плоский дизайн» может показаться не таким заманчивым. Но знали ли вы, что на деле — это один из самых значимых дизайн-трендов последнего времени? В этой статье мы поясним, что же это за тренд, и покажем, как его можно применить в дизайне вашего сайта.
При планировании сайта многие пользователи стремятся придумать стильный, оригинально-выглядящий дизайн и подобрать самые эффектные фотографии. Но мало кто помнит об очень важном критерии оценки качества сайта – его юзабилити, или удобстве использования.
Верстка сайтов – очень длительный, кропотливый и важный процесс, избежать которого при создании сайта невозможно. Ведь недостаточно только придумать и нарисовать на бумаге или в специальных программах Ваш сайт, нужно ведь чтобы он появился в сети и стал доступным пользователям. Именно для этого и существует верстка.