Веб-дизайн
Статьи, примеры советы по веб-дизайну.
Дайджест ABOUT FACE #2: книги по типографике, одновременная работа с макетом, дизайнер-cатана
12 Дек 2016, 17:00, написал Максим Шайхалов в разделе «Вдохновение,Веб-дизайн»
Хорошего понедельника!
Приветствуем второй выпуск дайджеста. Для тех, кто не в теме, дайджест просеивает тонны информации из 100+ источников и оставляет для вас только самое ценное.
Кстати, за выпусками дайджеста можно следить в паблике Вконтакте, группе в Фейсбуке, моем Твиттере, или просто получать на почту. Читать дальше →
Тренды веб-дизайна 2013−2014
29 Апр 2014, 13:00, написал Максим Шайхалов в разделе «Вдохновение,Веб-дизайн»
В этот раз я попробую поиграть в пророка и предсказать актуальные тренды 2014 года, немного поговорив о сохраняющихся трендах прошлого года.
Флэт-дизайн и его элементы
Настало время всплакнуть и понять, что скевоморфизма мы будем видеть все меньше. Я не говорю, что он умрет в принципе — нет, он будет жить и выполнять нужные задачи. Но его значительно потеснит флэт-дизайн. Это ни плохо и ни хорошо — это просто тенденция.
К флэт-элементам я также отношу и такие тренды как:
- Опостылевший лонг-шедоу (long shadow) или эффект длинной тени, который довольно часто можно увидеть на иконках
- Простые цветовые схемы. Мода сделала очередной виток и теперь снова актуальны спокойные неоновые (я бы даже сказал «ретро») цвета.
- Метро-стиль. Относится сюда же хоть он и считается отдельным направлением.
Я не буду говорить о плюсах и минусах плоского дизайна, но трудно не заметить факт его повсеместного распространения.
Лайфхак со вторым монитором
11 Ноя 2013, 15:00, написал Максим Шайхалов в разделе «Веб-дизайн»
Наверняка многие из вас используют в своей работе два монитора. И я не исключение. Ведь это очень круто и удобно работать с двумя мониторами. Именно для работы два монитора очень полезны: можно разносить разные приложения по разным мониторам, что лично у меня, неплохо повышает продуктивность.
Зачем дизайнеру второй монитор?
- Удобно работать с правками. Обычно на одном мониторе я открываю список правок, на втором уже фигачу дизайн.
- Два монитора часто используются, чтобы сравнить два варианта решения одной дизайнерской задачи.
- Концентрация внимания. Например, мне нужно написать важное письмо. Я убираю все отвлекающее от почты на другой монитор. Или например, скайп и твиттер открыты у меня на втором мониторе и они совершенно не отвлекают от работы на первом.
- Источник вдохновения. На втором мониторе можно смотреть референсы и вдохновляющие примеры прямо не отрываясь от работы.
- Бывает я переворачиваю второй монитор в портретную ориентацию. Так очень удобно серфить интернет, читать статьи и просматривать получившийся дизайн.
16 px кегль в Вебе
19 Мар 2013, 14:00, написал Максим Шайхалов в разделе «Веб-дизайн,Интерфейс»
16 px – это оптимальный размер шрифта для веб-страниц.
На первый взгляд это утверждение может показаться странным и даже провокационным. Основной шрифт у большинства веб-страниц не превышает 12 пикселей и многие веб-дизайнеры убеждены в том, что это – оптимальный размер для шрифта. Эта статья призвана убедить вас в обратном.
Специалист в области юзабилити сайтов Оливер Рейхенштейн утверждает, что 16 пикселей – это стандарт для нормального отображения шрифта в браузере. При этом шрифт не будет выглядеть гигантским (чего опасаются многие дизайнеры), потому что 16 пикселей – это много только на первый взгляд, а на практике это самый удобный размер шрифта для сайта, в чем уже убедились многие разработчики.
Более того, 16 px – это минимальный размер шрифта для современного сайта, и если вы не поддерживаете этот формат, то лишь напрасно тратите деньги ваших клиентов. Ниже приведены аргументы в пользу актуальности именно такого размера для шрифта.
Доход сайта и привлечение читателей
В большинстве случаев сайт создается с целью заработка, и чем больше у вас будет посетителей, тем большим будет вероятный доход. Если ваш сайт – продающий, то тем важнее для вас привлечь потенциального клиента среди аудитории сети Интернет. Каждый из читателей вашего сайта – это ценный бизнес-актив, который в конце-концов окупит ваши затраты на создание сайта.
Именно поэтому каждый элемент вашего сайта должен быть направлен на достижение конечной цели. Текстового контента это правило касается в первую очередь. Ведь текст на сайте – это основное средство влияние на читателя.
Если в текстах вашего сайта не будет четко указано, каких действий вы ожидаете от пользователя, то он не станет вашим клиентом. А для того чтобы текст эффективно воздействовал на пользователя он должен быть, как минимум, прочитан.
Итак, все ваши действия должны быть направлены на то, чтобы повысить легкость чтения контента для ваших читателей.
Стопроцентно читабельный сайт
05 Мар 2013, 13:00, написал Максим Шайхалов в разделе «Веб-дизайн»
Однозначного определенного стандарта размещения текстовой информации в Интернете, конечно же, не существует. Все зависит от тематики сайта и качества его контента. Но если углубиться в вопрос эффективного предоставления текста в вебе, то можно убедиться в том, что большинство сайтов забито мелким плохочитаемым текстом. При этом сразу заметно стремление владельцев сайта уместить на одной странице как можно больше самой различной информации, что в большинстве случаев плохо сказывается на его читаемости.
Приемы повышения читаемости текстов на сайте
Тем не менее существует несколько несложных приемов, доступных любому начинающему веб-дизайнеру, позволяющих вашему интернет-сайту выглядеть привлекательно и не заставлять его посетителей лишний раз напрягать зрение или просто сразу уходить с него:
1. Не используйте мелкие кегли, пытаясь уместить все.
Многие хотят уместить все на одной странице. Пользователи же сети при попытке просмотра такой страницы вынуждены будут менять настройки своего браузера, чтобы комфортно прочесть текст, а некоторые при этом сразу закрывают такую страницу и пытаются найти альтернативный вариант интересующего их текста на других интернет-ресурсах. Необходимость каждый раз менять настройки своего браузера, связанные с подбором оптимального размера шрифта для комфортного просмотра текстовой информации, вызывает у большинства пользователей только лишнее раздражение и желание побыстрее закрыть такую страницу.
2. Не обязательно заполнять все пространство
Частым заблуждением у владельцев интернет-сайтов является то обстоятельство, что они считают лучшим вариантом максимально полное наполнение веб-страниц любой информацией, в том числе и не относящейся к основной тематике текста. Несмотря на визуальную привлекательность таких веб-страниц, многие пользователи стремятся получить конкретную информацию по своему запросу, поэтому графическое оформление интересующего их ресурса играет несущественную роль в изучении необходимого ему текста.
3. Используйте типографику
Многие считают, что основным необходимым условием веб-дизайна любого сайта является качественная типографика его страниц, что предусматривает грамотное оформление текста для его комфортного прочтения с экрана. Однако не следует забывать, что для большинства пользователей главным является актуальность представленной информации, а не ее графическое оформление, каким бы оригинальным оно не было.
Основы типографики: контраст, размер, иерархия, пространство
25 Июл 2012, 14:30, написал Максим Шайхалов в разделе «Веб-дизайн»
Типографика в интернете имеет довольно богатую историю со времен 1991 года, когда Тим Бёрнерс-Ли включил интернет всему миру. В далекие-далекие времена когда IE 1.0 был молодым, выражение «хорошая типографика в интернете» являлось, скорее, оксюмороном. Однако многое успело измениться. Браузеры теперь не только показывают картинки (не может быть!); современные технологии дали возможность оживлять страницы используя прекрасную типографику.
Во-первых, необходимо сказать, что типографика — это не столько умение подобрать шрифт или отличить один от другого. Ведь согласно последним экспериментам, даже дрессированные мартышки без труда узнают Гельветику в 90% случаев.
Давайте поговорим о типографике как о рецепте из четырех важнейших компонентов. Если вы когда-либо что-либо готовили сложнее пельменей, то должны понимать насколько важен рецепт. Следуйте рецепту и типографика будет вкусна… впрочем, хватит о еде, давайте разбираться.
7 преимуществ простого веб-дизайна
20 Фев 2012, 13:00, написал Максим Шайхалов в разделе «Веб-дизайн»
Словосочетание «простой дизайн» поначалу у многих вызывает нервный тик. А как же иначе, ведь воображение услужливо начинает рисовать сайты, оформление которых выполнено в лучших традициях минимализма. Хотя если дизайн ресурса называют простым, то это еще не означает, что его внешний вид будет нагонять уныние. Когда создают простой сайт, стараются исключить все лишнее элементы из кода, содержимого и дизайна. Другими словами, любой сайт, качество которого не внушает опасений, можно смело назвать простым.
Почему же упрощение сайта является такой важной задачей? Давайте разберемся.
Наиболее полный курс веб-дизайна
21 Дек 2011, 13:00, написал Максим Шайхалов в разделе «Веб-дизайн»
Я решил написать эту статью т.к. часто мне как дизайнеру и автору блога приходит много писем от новичков, которые хотят стать дизайнерами.
Первым делом я посылаю их читать книги и набирать теоретическую базу. Без теории невозможно начать правильно практиковаться. В этой статье я бы хотел показать основные теоретические аспекты, как веб-дизайна в частности, так и дизайна в принципе. После это приведу пример, как строится процесс создания дизайна сайта.
Курс в большей части рассчитан на самостоятельное изучение. Я дам лишь пути, по которым можно двигаться, а то куда вы придете — целиком зависит от вас.
Раздел 1. Теория.
То, что следует знать дизайнеру, я разбил на уровни. «Прокачав» первый уровень, можно переходить ко второму и так далее.
Левел 0. «Вы все гавно!» ©
На этом уровне стоит начать с поверхностного изучения технологий применяемых в веб-дизайне и повышению компьютерной грамотности. Ведь сайт — это в первую очередь интерактивная среда, которая сочетает в себе массу технологий. Дизайнер должен знать, на что способны современные технологии, а на что нет.
Ни о каком изучении фотошопа я бы думать пока не советовал.
Примерный список технологий:
- Кодировки. В чем разница между ASCII и UTF-8?
- HTML. Основной язык разметки интернета. Много чего можно подчерпнуть на htmlbook.ru.
- CSS. Каскадные таблицы стилей. Вся инфа так же есть на htmlbook.ru.
- Растровая графика. Принцип работы и отличия от векторной.
- Векторная графика. Преимущества и недостатки по сравнению с растровой.
- PHP и динамические страницы. Знание возможностей.
- JavaScript. Применение и основные возможности.
Диалоговые окна в вебе: хорошие примеры и альтернативы
16 Ноя 2011, 13:00, написал Максим Шайхалов в разделе «Веб-дизайн»
Совсем недавно Аза опубликовал свою заметку о модальных окнах, так называемых оверлеях — то есть, именно о тех самых известных и надоедливых диалоговых окошках, которые совершенно внезапно выскакивают на мониторе и блокируют все то, что находится за ними. В этом случае ваши действия свободны в рамках только модального окна, при этом вы не можете никак использовать ни один «закрытый» элемент до тех самых пор, пока всплывшее окно не исчезнет.
Обычно, когда речь заходит о модальных окнах, имеются в виду диалоги, как в известном сервисе GoogleDocs (на данный момент уже все работает нормально — прим. пер.). Аза критикует именно модальные окна такого рода. После открытия диалога поиска/замены, нигде нельзя кликнуть мышью. Ну, кроме самого этого диалога. Вы не сможете полистать документ, который находится под диалогом, либо скопировать из документа какое-нибудь слово и вставить в строку поиска, при этом не закрывая диалог.
Делайте сайты для клиентов
03 Окт 2011, 13:00, написал Максим Шайхалов в разделе «Веб-дизайн»
Достаточно часто приходится повторять одинаковые вещи многим клиентам, которые консультируются по юзабилити и проблемам взаимодействия. Из-за этого мной было принято решение иногда кратко опубликовывать самые популярные темы, в надежде, что люди прочитав их, не будут заваливать меня вопросами.
Начнем, наверное с самой популярной темы.
Отношение многих компаний к созданию своего сайта такое же, как при обустройстве собственной квартиры. Достаточно скрупулёзно подбирается ткань для штор, цвет паркета, форма люстры, рисунок обоев, развешиваются картины охоты и портреты, на которых изображены главы семейств в самые эпичные моменты жизни. Когда же все готово, сайт открывают, и первые посетители потихоньку оху пребывают в легком шоке.
Вам приходилось видеть это уже много раз. Сайты с миссией компании, с приветственной речью, с цитатами мудрости руководства и её святого коллектива, с фотографией генерального и его обращением, с курсом доллара и гороскопом. Сайты, изготовленные компаниями для самих себя. Данная проблема в легкой форме имеется практически у каждого сайта. Бывает даже такое, что на сайтах забывают писать — какие товары продает компания и чем конкретно она занимается.
Вы можете подумать, что тупость заразна. Однако это вполне естественное явление для каждого человека. Оно относится к «ментальным ловушкам» в нашем сознании. Оно проявляется, когда вы выбираете подарок себе, а не маме на день рождения. То есть, необходимо выбирать, пользуясь не вашим собственным опытом и вкусом, а опытом вашей мамы (либо представлением об этом вкусе). Если вы намеренно не задумаетесь об этом, то окажетесь в этой ловушке и, конечно же, купите то, что интересно вам.
Таким же образом сайты компаний делаются для себя, совершенно забывая о клиентах при этом. А как только они сами оказываются в роли клиента, то тотчас они начинают возмущаться: «где цены? где товары? wtf?!», поскольку в этот момент, обладая клиентским опытом им можно судить о том, соответствует ли сайт их задачам и целям. Я скажу вам даже еще более жуткую вещь: «Не обязательно, чтобы вам нравился ваш сайт». Но вашим клиентам он должен нравиться обязательно.
Именно здесь UX дизайн выходит на сцену, ставя своей целью проектирование веб-сайта с точки зрения опыта пользователей (UserExperience). Ведь именно в этом весь смысл дизайна взаимодействия.