Веб-дизайн *

Сегодня, в честь 150-го дня рождения Лазаря Заменгофа, основателя языка Эсперанто, Google немножко видоизменил свой логотип во многих странах, и в России это тоже не стало исключением.



Tio estats tre agrabla kaj tre grava signo, kara kamaradoj!

Год назад мы с stervec решили сменить работу. Одним октябрьским вечером мы встретились на кухне девятиэтажного дома и начали воспитывать свое новое детище (старое, кстати, не умерло, а просто спит).
Назвались — «Девять утра», а заниматься решили интернет-проектами и делать сайты для клёвых компаний нашего региона (для не клёвых сначала не делали).
Ох, через что нам пришлось пройти и сколько открытий сделать — стыд и позор, но об этом отдельный сказ. Сегодня мы хотим рассказать, в чем была наша основная ошибка.

Перевод свеженького поста «Questions to ask clients before designing their website» Брайана Хоффа, автора блога «The Design Cubicle».

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

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

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

Удивительно, но основываясь на результатах моего недавнего исследования существует немало пользователей Fireworks. Лично я им никогда не пользовался. Обычно, я использую Photoshop при ежедневной работе. Но, знаете ли вы, что Fireworks лучше, чем в Photoshop сжимает изображения? Я не программист, я не могу объяснить, почему Fireworks  сжимает лучше. Но я могу доказать это, показав серию экспериментов, которые я провел.

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

Лучший выход из ситуации — создать простую страницу-«заглушку», которая будет рассказывать посетителям, что здесь, в конечном счёте, появится. Хорошая страница-«заглушка» может быть двух вариантов: информационная страничка, которая просто расскажет, что здесь будет после запуска; или страница, которая предлагает посетителям подписаться на уведомления или оставить запрос на бета (или альфа) тестирование. Ниже вы увидите несколько отличных примеров обоих типов, следуя которым, вы сможете создать свою такую страницу-«заглушку». Разумеется, среди них вы не увидите обычных страниц «В разработке» (с надоевшим дизайном), которых целая куча в сети.

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

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

Данная статья представляет 51 веб приложений для дизайнеров и разработчиков.

Приветствую всех! Я представляю вам свой Первый Пост На Хабре, он является объединяющим симбиозом нескольких постов моего личного блога [], и речь сейчас пойдёт о универсальной вещи, которая поможет увеличить продажи вашего товара, задержать на вашем сайте лишний десяток посетителей, и сделать из сложной многобуквенной статьи простой доходчивый рассказ. Также будут даны описания и адреса хранилищ этих вещей.

А вещь эта называется «Картинка».

В чём суть?

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

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

Некоторое время назад, наша компания — www.eye-tracker.ru — провела тест на главной странице русскоязычного сайта известной CMS Друпал – www.drupal.ru Задачей теста было найти ссылку на демо-сайт этой CMS. В качестве испытуемых бралось две группы по 5 человек – «компьютерщики» и «менеджеры». Обе группы не имели отношения к сайтам и не работали с CMS.

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



Данная статья содержит список нескольких преимуществ простого дизайна сайта, также некоторые легкие методы для упрощения процесса дизайна.

Тот факт, что iPhone предлагает наиболее развитый мобильный браузер среди мобильных платформ, пожалуй, ни у кого не вызовет сомнений. Однако не все знают, что довольно небольшими усилиями можно сайт сделать еще более дружественным к тем, кто смотрят его на iPhone или iPod Touch.

Ниже предлагаются простые 5 шагов, с которых можно начать, на примере сайта WHOIS Digger.

Шаг 1. Аналог favicon.ico

Когда пользователь создает ссылку на ваш сайт в виде иконки в SpringBoard, iPhone автоматически формирует картинку из скриншота страницы. В результате почти всегда получается неразборчивая каша, которая на гордое звание «иконки для iPhone» никак не тянет. Пропишите этот тег в заголовке страницы:

<link rel="apple-touch-icon" href="res/iphone_icon.png" />

и добавьте соответствующую картинку res/iphone_icon.png размером 57х57 пикселов. iPhone сам добавит скругленные углы и полукруглый блик, сделав вашу иконку похожей на остальные.

Вот так выглядит исходная картинка и иконка на рабочем столе iPhone:

Каждый согласится, что юзабилити является важным аспектом веб-дизайна. Несмотря на то, работаете ли вы над дизайном сайта портфолио, над он-лайн магазином или веб-приложением, важно сделать страницы удобными и простыми для пользователей. В протяжении последних лет было сделано много исследований о разных аспектах веб-дизайна и дизайна интерфейсов. Результаты этих исследований весьма значимы и помогают нам улучшить качество наших работ. Данная статья содержит 10 полезных выводов и принципов юзабилити, которые помогут вам улучшить впечатления пользователей от ваших сайтов.

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

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

Вся сущность CSS:


По настойчивым просьбам трудящихся: заказать за $12.95. Таки напечатать будет дешевле.

Горизонтальные меню – пожалуй, самый популярный вид навигации в веб-дизайне. Можно с уверенностью сказать, что на сегодняшний день большинство сайтов используют такой тип меню с целью упрощения просмотра страниц.
Тем не менее, в современном веб-дизайне очень много видов горизонтальных меню. Некоторые предлагают преимущества в удобстве использования для определенных типов сайтов, а другие эстетически лучше смотрятся.

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

 

Дизайнерские решения, которые раз и навсегда изменили мир интернета :-)

№1. Паззл

вряд ли этот шедевр нуждается в комментариях :-)

Практически каждый дизайнер хотя бы раз в своей практике сталкивался со следующей проблемой: вроде бы всё хорошо получилось, но что-то где-то не так, есть ощущение какой-то недоделанности и неряшливости. Кто-то в этом случае привычно махнёт рукой и, надеясь на некомпетентность клиента, выведет недоделанный сайт в Сеть. Кто-то начнёт череду поисков решения проблемы и зайдёт в глубокие дебри бесконечных переделок и доработок. И почти никто не обратится за помощью к специалистам, занимающимся непосредственно данной категорией проблем — к дизайн-аудиторам. А зря. Аудит сайтов в целом лишь относительно недавно стал вызывать интерес в нашей стране, появились специалисты в области юзабилити сайтов, продвижения и раскрутки. А вот непосредственно улучшением внешнего вида занимаются лишь единицы, да и то о них мало кто знает.

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

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

ВНИМАНИЕ: в статье имеется большое количество крупных изображений.

Многие веб-разработчики часто забывают или совсем не используют параметр tabindex, который определяет последовательность перехода между полями при нажатии на клавишу «Tab». Таким образом, при переходе из одного поля в другое прощелкиваются еще несколько элементов, что рано или поздно начинает уничтожать нервные клетки пользователей.

Знаете, фавикончики в ico это как-то прошлый век =) Давайте будем модными, современными и все такое. Короче, берем иконку в png (да-да, с прозрачностью и всеми делами), сохраняем в размере 16×16, на сайте (в блоке <head>, ага) подключаем так:

<link rel="icon" type="image/png" href="favicon.png" />

Особенно под впечатлением владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

<link rel="apple-touch-icon" href="apple-touch-favicon.png"/>

Над записью витает дух уже почти сгнившего трупа IE6, который вообще не знает о чем это все, ну да и фиг с ним =) Все, изыди.

UPD: Спасибо хабраюзеру NickyX3 за интересное уточнение:

Автор забыл указать, что иконда для springboard тачей и яблофонов будет в таком варианте закруглена по углам и на нее будет наложен блик автоматически самоим девайсом. Для избежания этого (совсем красивая кастом иконка) вместо apple-touch-icon следует написать apple-touch-icon-precomposed.

Это просто заметка.

Якоб Нильсен писал о распределении участников в социальной сети. 1% пользователей вносят значительный вклад, 9% проявляют активность время от времени, 90% посетителей пассивно читают информацию, но не вносят никакой информации.



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

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

Статья Нильсена тут:
www.useit.com/alertbox/participation_inequality.html