Штучечки
[info]natio2
Делал портальчик — детализировал сколько позволяет нотик. Запорол «рожки», переделоваю



Вот еще страшненькое личико, но радует сетка (позже покажу) да и для первого раза сойдет :)



Сиетл
[info]natio2
Добавили уже домики на сайт



первый пиксель-арт :)

Карты выдавливания
[info]natio2
Тест на карты выдавливания для моделирования ландшафтов. Тест удался :)


Вечера моделирования продолжаются
[info]natio2
Еще 2 жучка в армию, остался 1 и текстуринг.



И оставшиеся узорчики на домик.

Метки: ,

Домик
[info]natio2


На выходных занимался узорами :) для домика. Осталась финальная часть в крыше

Армия пополняется
[info]natio2


Теперь их двое

Иинтернет-магазин
[info]natio2
Завершил редизайн магазина http://q-p.com.ua
Верстку еще правлю :) дотираю





Наброски жучка
[info]natio2


Еще вариантов 5 надо бы сделать и приступать за хайполи версии, а дальше текстурки, анимация :)

Barrel
[info]natio2


Низкополигональная бочка :)

Текстуры на рендере

Концепт «Мурзика»
[info]natio2

Криво, не понятно, но вот где-то так

Планета Земля
[info]natio2
А так забавно выглядит планета наша без воды :)


Камешки и не только
[info]natio2


Такие вот камешки получились - здесь с текстурами http://rendermarket.com/2009/10/27/tekstura-kamnya/





А это попытки человеко-моделизма :) З.Ы. на бошку ему не смотрите :)

Деревца
[info]natio2





Анализ «топовых» брендов
[info]natio2
cc
Businessweek опубликовала топ 100 брендов.


Вот первые 50: Coca-Cola, Microsoft, IBM, GE, Intel, Nokia, Walt Disney, McDonald’s, Toyota, Marlboro, Mercedes-Benz, Citi, Hewlett-Packard, American Express, Gillette, BMW, Cisco, Louis Vuitton, Honda, Samsung, Dell, Ford, Pepsi, Nescafé, Merrill Lynch, Budweiser, Oracle, Sony, HSBC, Nike, Pfizer, UPS, Morgan Stanley, JPMorgan, Canon, SAP, Goldman Sachs, Google, Kellogg’s, Gap, Apple, Ikea, Novartis, UBS, Siemens, Harley-Davidson, Heinz, MTV, Gucci and Nintendo.





Анализ первых 50-ти брендов





  • Название не указывает на продаваемый товар (94%)

  • Девиз не включен в логотип (90%)

  • Чистый и четкий шрифт (84%)

  • В логотипе используется 1 цвет (74%) (черный и белый не считать цветом)

  • В логотипе используется шрифт без символов (74%)

  • Имя сокращено либо акроним (72%)

  • Лологотип имеет прямоугольную форму (66%)

  • Логотип - просто слово (62%)

  • Логотип включает товарный знак (54%) и находится в правом верхнем углу (48%)

  • Имя - 6 букв или менее

  • В имени используется верхний и нижний регистр (44%) (за исключением акронимов)

  • Однородный фон (52%)

  • Включает в себя 3 символа (44%)

  • Базовый цвет синий (40%)



top-50-brands1

Источник

Якоб Нильсен — 110 правил юзабилити
[info]natio2
Юзабилити это один из самых важных элементов продвижения сайта. Неудобный сайт пользователь скорее покинет, чем будет разбираться в том, что же хотел донести веб-разработчик или владелец сайта.

Ниже приведены 110 принципов usability, которые помогут не допустить промахи и сделать сайт ориентированным на пользователя. Данные правила составлены по книге "Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов", Якоб Нильсен, Мари Тахир, Издательство: Вильямс, 2002 г.







    1-10


  • Название и/или логотип компании должны иметь подходящий размер и располагаться в заметном месте (например, в левом верхнем углу)

  • Добавить к странице рекламный лозунг, который четко характеризовал, чем именно занимается компания

  • Подчеркнуть особенности сайта с точки зрения пользователей, его отличия от основных конкурентов

  • Четко выделить первостепенные задачи, чтобы попав на главную страницу, посетитель сразу понимал с чего начинать

  • У сайта должна быть только одна "официальная" домашняя страница

  • В пределах главного сайта слово сайт не должно относиться ни к чему другому, кроме как веб-сайту в целом

  • Оформление домашней страницы должно четко отличать ее от остальных страниц веб-сайта

  • Сгруппировать информацию о компании, ее инвесторах, связях с общественностью, имеющихся рабочих вакансиях и другие подобные сведения в одном месте

  • Необходимо добавить ссылку на раздел "О нас" ("About Us"), в котором содержались сведения о компании и ссылки на более подробную информацию относительно ее товаров, услуг, инвестиций, бизнес-предложений, руководящей команды

  • Необходимо добавить ссылку "Связаться с нами" ("Contact Us"), указывающую на соответствующую страницу с контактной информацией о компании







  • 11-20


  • Чтобы о компании писали в СМИ, добавить к домашней странице "Пресс-релизы" или "Новости компании"

  • С точки зрения пользователей веб-сайт и компания должны составлять единое целое

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

  • Не размещать на общедоступном веб-сайте "внутреннюю" информацию

  • Если на веб-сайте выполняется сбор информации о посетителях, добавить к домашней странице ссылку "Правовая информация" или "Конфиденциальность"

  • Разъяснить, каким образом веб-сайт "зарабатывает" деньги, если это не очевидно

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

  • Необходимо избегать чрезмерности

  • Не употреблять слишком умных фраз или рекламного жаргона, которые затрудняют понимание

  • Строго следить за применением прописных букв и соблюдением речевого форматирования





  • 21-30


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

  • Избегать одноэлементных списков и категорий

  • При форматировании использовать неразрывные пробелы между словами, которые по смысловым соображениям должны находиться вместе в одной строкеФормулируя задания для посетителей необходимо использовать только повелительное наклонение. Эту форму глагола при необходимости можно несколько смягчить

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

  • Избегать восклицательных знаков

  • Реже употреблять слова, набранные только прописными буквами, или не употреблять их совсем

  • Не вставлять дополнительные пробелы или знаки препинания туда, где это не нужно

  • Примеры должны раскрывать, а не просто описывать содержимое сайта

  • Каждый пример должен сопровождаться ссылкой на подробное описание данного продукта, а не категории, к которой он принадлежит

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





  • 31-40


  • Ссылки на подробную информацию о конкретном продукте должны отличаться от ссылок на категорию в целом

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

  • Названия ссылок должны отличаться друг от друга и быть удобочитаемыми

  • Не использовать в названии ссылок инструкций общего характера "Нажмите здесь"

  • Ссылку, стоящую в конце списка элементов, не следует называть неопределенным именем вроде "Еще:" или "Больше:"

  • Цвета просмотренных и непросмотренных ссылок должны отличаться

  • В названии ссылки или группы ссылок не употреблять само слово "ссылка". Чтобы показать, что данное слово или фраза является ссылкой, подчеркните его/ее и выделите голубым цветом

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

  • Главная панель навигации должна находиться в заметном месте страницы, предпочтительно рядом с ее основной частью

  • Сгруппируйте области навигации, чтобы подобные элементы находились рядом друг с другом





  • 41-50


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

  • Домашняя страница не должна содержать активной ссылки на саму себя

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

  • Если на сайте предусмотрена "Корзина" для покупок, создать ссылку на нее на домашней странице

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

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

  • Поля ввода должны быть достаточно длинными, чтобы пользователь смог ввести и отредактировать запрос среднего размера

  • К области поиска справа от поля добавить кнопку "Найти" ("Search")

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

  • По умолчанию поиск должен охватывать весь сайт





  • 51-60


  • Не включать в поисковую систему сайта функцию поиска по Интернету (кроме порталов)

  • Домашняя страница должна обеспечивать прямой доступ к первостепенным службам сайта

  • Не добавлять на сайт службы, не имеющие отношения к его основной тематике

  • Не выставлять на сайт службы, которые повторяют стандартные функции обозревателя, такие как выбор стартовой страницы или создание закладки

  • Графика должна отображать реальное содержание сайта, а не только служить его украшением

  • Фотографии и рисунки должны быть подписаны, если их смысл не до конца понятен из контекста статьи, к которой они прилагаются

  • Фотографии и диаграммы должны быть отредактированы в соответствии с основным разрешением экрана

  • Для рисунков следует избегать употребления "водяных знаков"

  • Не использовать анимацию только для того, чтобы привлечь внимание к какому-нибудь элементу домашней страницы

  • Никогда не подвергать анимации основные элементы страницы, такие как логотип компании, рекламный лозунг или главный заголовок






  • 61-70


  • Позвольте посетителю самому решать, хочет ли он видеть анимированную заставку к сайту - не запускать ее по умолчанию (относится к Flash-заставкам)

  • Ограничить применение различных гарнитур шрифтов и другого текстового форматирования (размеры, цвета)

  • Использовать высококонтрастные цвета шрифтов и фона страницы

  • Стараться обойтись без горизонтальной прокрутки для для наиболее распространенного разрешения экрана

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

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

  • Необходимо быть крайне осмотрительным в использовании логотипов, помимо основного логотипа компании

  • Никогда не применять элементы интерфейса, если пользователь не должен на них кликать

  • Не увлекаться использованием раскрывающихся списков, особенно если их элементы требуют каких-либо пояснений

  • Избегать использование полей ввода, особенно в верхней части страницы, где обычно принято размещать средства поиска






  • 71-80


  • Title должен начинаться со слова, несущего смысловую нагрузку

  • Не включать в Title имя домена верхнего уровня, если только он не является частью официального названия компании

  • Не включать в Title словосочетание "домашняя страница"

  • Title должен содержать краткое описание веб-узла

  • Title должен состоять не более чем из семи-восьми слов и содержать не более 64 символов

  • Домашние страницы коммерческих компаний должны иметь адрес вида http:// www.company.com, не должны использоваться сложные коды или названия страниц типа index.html

  • Если содержание веб-узла тесно привязано к конкретной стране - URL должен содержать домен верхнего уровня данной страны

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

  • Если у веб-узла несколько альтернативных доменных имен, выбрать одно из них в качестве "официального" и перенаправлять на него всех посетителей, воспользовавшихся другими адресами

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






  • 81-90


  • Составить специальное резюме (Summary) для каждой статьи или пресс-релиза, о которых упоминается на домашней странице

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

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

  • Никаких эффектных заставок и промежуточных страниц быть не должно

  • Максимально отказаться от раскрывающихся окон (PopUp-ов)

  • Не применять "маршрутные страницы" для выбора географического местонахождения посетителей (исключение несколько языковых версий и ни одна не является главной)

  • Рекламные баннеры других компаний следует вынеси "на периферию" страницы

  • Рекламные объявления "внешних" компаний должны быть небольшими и неброскими

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

  • Избегать общепринятых приемов дизайна рекламных баннеров в оформлении основного содержимого веб-сайта






  • 91-100


  • На сайте не должно быть Приветствий (в буквальном смысле этого слова)

  • Если веб-сайт "недоступен" или если важные элементы веб-узла перестали работать, необходимо немедленно сообщить об этом на главной странице

  • Заранее продумать план работы с узлом на случай внештатных ситуаций

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

  • Соблюдать сдержанность в перечислении завоеванных наград и титулов

  • Не следует автоматически обновлять содержимое страницы (авторефреш)

  • В процессе обновления страницы обновлять только содержимое, которое действительно изменилось

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

  • Не предлагать пользователям средства настройки общего интерфейса страницы (выбор цветовой схемы)

  • Не ограничиваться простыми ссылками на форму регистрации. Подробно разъяснить посетителям преимущества регистрации






  • 101-110


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

  • Если на веб-сайте поддерживается общение пользователей посредством чата или другого подобного средства, не ограничиваться только общими ссылками на них (темы обсуждений и расписание конференций)

  • Не ставить гостевые книги на деловых/корпоративных сайтах

  • Дату и время указывать только для информации, связанной с реальным временем, новостей, чатов, биржевых котировок

  • Показать посетителям время последнего обновления страницы, а не текущее время

  • При ссылке на время обязательно указывать часовой пояс (для международных сайтов)

  • Использовать стандартные аббревиатуры "p.m." или "P.M." (для международных сайтов)

  • Указывая месяц, использовать его полное название или общепринятое сокращение, а не числовое обозначение

  • Для отображения чисел, имеющих пять и более разрядов, использовать принятый в своей стране разделитель

  • Отображая столбец дробных чисел, необходимо выравнивать их по десятичной точке






Выступали на прошлой неделе
[info]natio2
Есть парочку фоток с нашего выездного концерта :)
жду пока оцифруют видео :)










И даже так


Шпаргарлка по HTML 5
[info]natio2
html5cheat

Шпаргарлка по HTML 5

Вопрос сегодня
[info]natio2
Сегодня был такой диалог:


(13:20:11 24/08/2009)
<td class="htba" valign="middle" align="left" width="50%">

(13:20:14 24/08/2009)
че значит?

я (13:20:54 24/08/2009)
<ячейка присвоить класс="htba" вертикальное выранивание="посредине" выравнивание="влево" ширина=50%>

(13:22:42 24/08/2009)
блин как сделать чтобы не уезжало при 1024?

(13:24:31 24/08/2009)
<td class="htba" valign="middle" align="left">
</td>
<td class="htba" valign="middle" align="left" width="100%">

(13:24:34 24/08/2009)
эт в индексе


Я б не против помочь если б понял о чем речь :)

Главная страница (тест на юзабилити)
[info]natio2
mock
Буду по-ходу дел переводить сборник правил по юзабельности сайта. Всего правил 247, как получится выкладывать буду смотреть :)
Но все сразу перевести и выложить не могу из-за нехватки времени, а так можно по ходу дела обсуждать пункты.




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


  • На главной странице есть поле для поиска


  • Категории предоставляемых товаров и услуг должны быть видны без проблем


  • Самая полезная информация находится на главной странице либо в 1-м клике


  • На главной странице показаны лучшие примеры реального содержания сайта


  • Меню на главной странице должно начинаться с самых важных (ключевых) слов


  • Если есть возможность/необходимость показывать на главной странице последние обновления на сайте — это стоит сделать


  • Навигационные области не должны быть похожи на рекламу


  • Главные пропозиции сайта должны быть четко указаны на главной странице


  • Главная страница может содержать максимум графики относительно внутренних страниц, но это не просто фотографии или модели товара


  • Навигация расположена в максимально логичной части сайта


  • Точный логичный заголовок для людей и поисковиков


  • Вся корпоративная информация собрана в одном месте, например, страница «О компании»


  • Пользователь сразу понимает ценность предложения


  • С первого взгляда легко понять, что делать дальше


  • На главной странице показаны все возможные пути по сайту


  • Адрес главной страницы легко запомнить


  • Главная страница создает позитивное впечатление для посетителей


  • Дизайн главной страницы побуждает пользователей к дальнейшему изучению сайта


  • Главная страница должна отличаться от внутренних и пользователь четко понимать, что он находится именно на главной странице




Оригинал

«Стандартные» шрифты
[info]natio2
В этом посте я приведу примеры стандартных шрифтов для платформ Windows и Mac. Это так называемые «безопасные шрифты».
Можно конечно использовать возможности css для загрузки собственных шрифтов, но пока это не так хорошо работает, как хотелось бы и лучше использовать те наборы, что есть у большинства.


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

Windows fonts / Mac fonts / Font family
Normal style Bold style
Arial, Arial, Helvetica, sans-serif Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, Courier6, monospace Courier New, Courier New, Courier6, monospace
Georgia1, Georgia, serif Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino6, serif Palatino Linotype, Book Antiqua3, Palatino6, serif
Tahoma, Geneva, sans-serif Tahoma, Geneva, sans-serif
Times New Roman, Times, serif Times New Roman, Times, serif
Trebuchet MS1, Helvetica, sans-serif Trebuchet MS1, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol2, Symbol2) Symbol, Symbol (Symbol2, Symbol2)
Webdings, Webdings (Webdings2, Webdings2) Webdings, Webdings (Webdings2, Webdings2)
Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)
MS Sans Serif4, Geneva, sans-serif MS Sans Serif4, Geneva, sans-serif
MS Serif4, New York6, serif MS Serif4, New York6, serif

1. Georgia и Trebuchet MS входят в стандартный набор Windows 2000/XP и поставляются с IE Font Pack, поэтому встречаются часто на Windows 98.
2. Символьные шрифты отображаются только в Internet Explorer, для других браузеров стоит заменять их (хотя и Symbol работает в Opera, и Webdings работает в Safari).
3. Book Antiqua так же как и Palatino Linotype, Palatino Linotype включена в Windows 2000/XP, хотя ANTIQUA поставлялась вместе с Windows 98.
4. Это TrueType шрифты поэтому они выглядят отлично только в некоторых размерах (8, 10, 12, 14, 18 и 24 точки при 96dpi)
5. Эти шрифты работают в Safari, но только в обычном стиле, а не с полужирным или курсивом. Comic Sans MS работает только в жирном начертании но не в наклонном.
6. Эти шрифты установлены на классических Mac OS


Как выглядит эта таблица на разных платформах


Mac OS X 10.4.8, Firefox 2.0, ClearType enabled (скриншот Juris Vecvanags)

Mac OS X 10.4.4, Firefox 1.5, ClearType enabled(скриншот Eric Zavesky)

Mac OS X 10.4.11, Safari 3.0.4, ClearType enabled(скриншот Nolan Gladius)

Mac OS X 10.4.4, Safari 2.0.3, ClearType enabled(скриншот Eric Zavesky)

Windows Vista, Internet Explorer 7, ClearType enabled(скриншот Michiel Bijl)

Windows Vista, Firefox 2.0, ClearType enabled(скриншот Michiel Bijl)

Windows XP, Internet Explorer 6, ClearType enabled

Windows XP, Firefox 1.0.7, ClearType enabled

Windows XP, Internet Explorer 6, Basic font smoothing enabled

Windows XP, Firefox 1.0.7, Basic font smoothing enabled

Windows 2000, Internet Explorer 6, Basic font smoothing enabled

Windows 2000, Firefox 1.0.7, Basic font smoothing enabled

Linux (Ubuntu 7.04 + Gnome), Firefox 2.0

Если у кого-то еще какие интересные комбинации будут — пишите в коментах и на почту :)

Home