Веб-дизайн *

 

Давайте представим, что дизайн — это лес, а дизайнеры — его обитатели. Какими они могут быть?

Бобер

Бобер — трудяга. Кропотливо строит хатки и плотины. Может построить всё, что угодно — только скажите ему что, как это должно быть устроено, как должно выглядеть. Бобер — дизайнер, который не боится рутины, делает всё отлично, но по каким-то внутренним причинам не способен придумать что-то новое.

Статья — мое личное мнение, попытка разобраться как удобнее. Данный материал не является руководством. Так же не является критикой каких либо дизайнерских решений.

Собственно тема топика, это векторы, направления подачи информации. Возможно я не верно выражаюсь, и это необходимо называть другими словами, но я думаю моя мысль будет вам ясна.

Навигация: меню, пейджинги

Я, как и многие наверное, человек привычки. Я привык что так правильно и что так удобно. Но есть же и очевидные вещи, которые идут вразрез с тем что правильно. Я говорю о противоречиях. На многих новостных сайтах и блогах, мы видим постраничную навигацию (paging) И вроде бы уже привыкли к одному и тому же направлению. Так ведь? Слева направо. Именно этот вектор вбит в нам с детства как Правильный. И на большинстве сайтов я вижу именно этот вектор. Мы его встречаем везде, в программах офиса, в браузерах файлов, и в бразуерах интернета.

Это перевод поста из Facebook Engineering Blog, который интересен, наверное, даже не столько сутью решения, которое в нем описано, сколько рассказом о «кухне» разработки в Facebook. Речь идет об обновленном функционале просмотра фотографий, который появился в конце сентября 2010 г. и был немного еще улучшен на днях.

Задумавшись об обновлении Photo Viewer, мы столкнулись с множеством трудностей. Очевидно, что фотографии это наиболее востребованная функция Facebook. Ежедневно наши пользователи загружают более 100 миллионов фотографий, а предназначенный для этого функционал был создан довольно давно и явно нуждался в доработке.

Благодаря проделанной работе, пользователи стали просматривать на 5% больше фотографий, что в количественном выражении означает примерно один миллиард дополнительных просмотров ежедневно.

Как нам это удалось
Мы начали с составления списка текущих проблем:

• Наибольшие проблемы возникали с надежностью. Изображения загружались медленно, и иногда процесс зависал на неопределенное время. Пользователям приходилось обновлять страницу в браузере, чтобы увидеть фотографии и комментарии к ним.
• При просмотре фотографий из Ленты новостей приходилось либо открывать их в новой вкладке, либо мириться с тем, что после просмотра нужно было заново прокручивать ленту вниз, чтобы вернуться к предыдущей позиции. Для разбирающихся в компьютере людей это не составляло особых проблем, но многие из наших пользователей испытывали связанные с этим неудобства.
• Функционал просмотра комментариев к фотографиям был также реализован не самым удобным образом. Процесс выглядел так – нужно было посмотреть фотографию, промотать страницу вниз, чтобы увидеть подпись и комментарии к ней, а потом вернуться обратно наверх, и так каждый раз.
• JavaScript, предназначенный для загрузки и кэширования фотографий, а также для публикации комментариев, был также реализован не самым лучшим образом. Он оставался неизменным на протяжении многих лет, на фоне того, что технологии работы браузеров и требования к ним значительно ушли вперед.

Перед нами стояла задача решить вышеописанные проблемы и, в идеале, создать новый, более приятный в работе функционал, способный объединить просмотр фотографий, расстановку меток для людей на них, возможность комментировать и отмечать понравившиеся снимки «лайками».

С чего все началось

Вскоре после прибытия в Китай летом 2005 года я стал замечать некоторые сложности в отличиях китайской и западной культур. И я не имею в виду очевидные вещи вроде языка, внешнего вида, государственной философии и так далее. Больше всего выделяться стали тонкие различия, например, в чувстве юмора, интересах и художественных предпочтениях.

Я заметил, что не мог найти китайский веб-сайт, который показался бы мне визуально привлекательным. Из банального любопытства я попросил местных составить список регулярно посещаемых сайтов, которые, по их мнению, имеют хороший дизайн.

Дизайнерская компания Volkside сделала подарок веб-разработчикам, выпустив бесплатный букмарклет Wirify, с помощью которого можно отобразить каркас (wireframe) любого сайта одним щелчком мыши. Полезная вещь, чтобы быстро оценить некоторые аспекты дизайна сайта: модульную систему вёрстки, визуальную иерархию, свободное пространство, симметрию, золотое сечение, правило третей и т.д.

Между дизайном и разработкой существует тонкая грань, которая, с переходом в новое десятилетие, становится всё более размытой. Достаточно ли просто нарисовать красивый макет в Фотошопе? Может быть пять лет назад этого и было достаточно. В наши дни среднестатистический пользователь интернета требует большего. Весь лоск сайта со временем надоедает, если в нем нет никакой сути. Если ваша единственная цель поразить дизайнерское сообщество вашими яркими работами долго на плаву вы не продержитесь. 2011 год характеризуется не красотой, а функциональностью. А теперь собственно тренды нового года и ближайшей декады: виртуальная реальность, постоянная связь и интерактивный дизайн.

Как остаться релевантным дизайнером в 2011? Главная цель дизайнера не ослепить, а завлечь. Любой дизайнер может получить «охи» и «ахи», которые легко забываются. Величайший дизайнер способен создать среду, которая чарует и пленяет пользователя так, что он даже и не думает о том, чтобы искать кнопку «назад». Несколько элементов собраны воедино, чтобы создать прекрасный мир в котором есть все: гармония цвета, интуитивный дизайн, легко доступная информация и быстрый отклик. Кроме того, никогда нельзя недооценивать силу простоты. Конечно это всегда было так, но в 2011 вы не только под всепрощающей эгидой десктопов и лэптов. Сейчас ваш дизайн должен справлятся с нетбуками, смартфонами и таблетками. Вы готовы?

Взглянем на ТОП 11 трендов в 2011 году.

Сегодня мне случилось побывать на лекции Эрика Райса (Eric Reiss), специалиста по вопросам информационной архитектуры, юзабилити и user experience.

И хоть термины эти звучат довольно страшно, а у последнего и вовсе нет перевода на русский язык, но описываемая ими предметная область важна для всех, работающих как со структурой и дизайном сайтов, так и их содержанием.

Лекция была посвящена набору правил (Эрик называет их догмой), следование которым позволит создавать сайты для пользователей, свободные от диктата технологий и моды.

Вот эти 10 правил.

Да не подходит эта деталька, видно же!

Недавно попалась весьма приятная дизайнерская диковинка.
Страницы блокнота — это не только хорошие подложки для набрасывания вьюшек, но и, в своем роде, фреймворк для разработки концепции проекта и структуризации связанных с ним мыслей.



Можно скачать pdf и можно заказать

Цвет, безусловно, является важным источником эмоции. Цвета могут устанавливать правильный тон и передавать необходимые эмоции посетителям, могут взволновать, вызвать множество чувств и стимулировать к действиям. Он является чрезвычайно мощным фактором воздействия на пользователей.

Добрый день, уважаемые хабралюди!

Стал я сегодня углубляться в прошлое блога «Веб-дизайн» (по-моему, очень интересный и полезный). Часто попадались очень полезные статьи, реже — неактуальные (перерос их самостоятельно)… Но вот что меня реально зацепило — это вопрос о резиновости сайтов! Сам не знаю почему. Наверное, потому, что все так рьяно дискутируют, так отстаивают свои позиции, что любо-дорого читать! Отсюда делаю вывод, что тема острая, и пишу свой очередной топик.
Под катом порядка 3 Мб

В 2007 году, сайт «Get Elasic» опубликовал интересную подборку кнопок «Положить в корзину» из различных интернет-магазинов, сопроводив это некоторым анализом надписей и внешнего вида кнопок. Я решил, что будет полезным освежить эту тему. Было собрано более двухсот кнопок «Положить в корзину», в том числе с сайтов самых популярных онлайновых продавцов.

Динозавры были королями и королевами этой планеты. Кроме друг друга никто не вставал у них на пути. Они были разных форм и размеров. Одни питались растениями, другие — мясом. Они были сложными существами, и каждый из них был уникален по-своему.

Мне действительно интересно, чем руководствовался Гугл, делая в поисковике вот такую клавиатуру для российского пользователя:

(символы по нажатию Alt+Ctrl)
Это такой жёсткий стёб?

И ещё.
1) Почему виртуальная клавиатура не умеет набирать английские символы?
1) Почему вне зависимости от национального домена (.ru, .jp,..) можно набирать только «родные» символы? Искать на других языках (что, по идее, и должна делать эта клавиатура), она не позволяет. А символы, соответствующие моей локали, и так есть на моей «железной» клавиатуре.
2) Зачем поисковику, который не учитывает регистр символов, виртуальные кнопки смены регистра (Caps/Shift)?

Надеюсь, эти вопросы не риторические.

Внимание: теперь в дискуссии участвует разработчик клавиатуры.

Многие из нас пользуются глобальной сетью для покупки билетов или поиска информации о фильмах. Сайты, продавая билеты и развлекая посетителей, помогают сбору кассы и формированию общественного мнения. Тем не менее, разработчики сайтов не получают никакого признания. Не является ли это немного несправедливо в эпоху Интернета — не получать ни бита славы за онлайн-презентации фильмов?



Большинство современных киносайтов сделаны во Flash’е, даже если это совсем не оправдано. При создании сайтов часто не соблюдаются стандарты и требования по переходу со сплэш-страниц и доступу к контенту. Разработчики позволяют себе такую роскошь, как пренебрежение общими принципами и юзабилити-стандартами, поскольку основная задача — привлечь внимание к фильму и помочь его раскрутить. Предположим, однако, что эти разработчики получили своих «Оскаров», «Медведей» и «Пальмовые ветви». Не будет ли это мощным стимулом к созданию ярких и удобных сайтов?

Сегодня свершилось эпохальное событие. tutsplus.com — сайт, который всегда радует нас очень крутыми руководствами, открывает новый подраздел!
Встречайте GIFtuts+!

Тут вас научат:
• Рисовать адский пылающий череп!
• Делать супер-крутую табличку «Under Construction» на сайт!
• Создавать крышесносящую двигающуюся фигурку из палочек!


Спешите на открытие:
psd.tutsplus.com/articles/news/celebrating-the-launch-of-giftuts

Разрабатывая интерфейс для очередного сайта, основной аудиторией которого будут люди не очень продвинутые технически, я задумался над вопросом об обязательных для регистрации полях и минимизации их количества.

В голову пришли следующие варианты:

0 полей: при загрузке страницы незалогиненный пользователь получает сгенеренный аккаунт, который ему предлагают использовать, вот еще один пример такого подхода.
— удобно для узкоспециализированных задач и мне не подходит. По функционалу уже недалеко от куки, если бы не привязанность последних к конкретному хранилищу в браузере или по :)

1 поле: email
Пользователь оставляет email, id создается автоматически, на email он получает пароль, авторизация либо по ID либо по email, username задается пользователем уже в профиле

+ Черт, это все таки одно поле! По умолчанию может быть сгенерен устойчивый к перебору пароль.
± username свободно меняются, и могут оставаться пустыми. Учитывать пользователей по айдишникам мне не хочется
— ЧПУ приобретают вид ufosite.nl/users/18567, скорее всего пользователь захочет сменить свой пароль. При ЧПУ вида ufosite.nl/users/customusername наступает ад для поисковиков. Строить ЧПУ на основе email, который, к тому же, далеко не все захотят публиковать — это подарок спамерам и ЧПУ становятся не совсем ЧПУ.

Мне нравятся стоковые фотографии. Но мы должны оставить в прошлом людей в костюмах, пожимающих руки. Пришло время покончить с пресными  и вежливыми фотографиями.

Такие фотографии не несут смысловой нагрузки и не имеют положительного эмоционального оттенка. Возьмем для примера веб-сайт ниже:



Изображение не предоставляет никаких сведений относительно характера веб-сайта. Это просто пустышка для того, чтобы заполнить пространство.