Домик
[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

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

CheckMyColours
[info]natio2
http://www.checkmycolours.com/

Инструмент для анализа цветов сайта — контраст фона и текста и прочие полезности.
Основан на W3C

Эволюция логотипов
[info]natio2


Новая правда о «Коке коле»



Пять шагов к улучшению модульной сетки – шаг 2
[info]natio2

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

Относительные системы

Золотое сечение – это отношение которое именуется как число Фи. Можно смело проектировать сетку по этому закону. Используя золотое сечение можно быть уверенным, что вы достигнете эффекта естественной гармонии.
Это важный момент который обсуждался много веков. Эстетика измерима, и, что очень важно, эти законы можно использовать как угодно. Обязательное их использование не всегда приводит к желаемому эффекту, но знание принципов обязательно :)
 


Композинг методов

Эта теория называется «Эффект удобной красоты». Согласно этой теории все вещи, которые выглядят красивыми приводят к более удобному их использованию. Хорошо продуманная сетка делает дизайн не только более удобным и читабельным но и полезным.
 


Использование на практике

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


Формирование страницы

Для формирования сетки мы будем использовать соотношение страницы для определения частей под контент. Построение происходит довольно простым способом.
grid_pt2_1
Мы получаем область необходимую для построение сетки.
 



Применение золотого сечения

Мы используем не метод разделения, а с использованием числа Фи. Получаем колонки А и В.
grid_pt2_2
 


Создание системы

Итак, у нас есть колонны, теперь мы должны конкретизировать сетки чтобы иметь возможность справиться с различным содержанием и типов страниц. Аналогичным способом отделяем части под колонки.
grid_pt2_3
Аналогичным способом определяем горизонт.
 



grid_pt2_4
Использование расширенных линий позволяют добавить области для структуры.
grid_pt2_5

 

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

 

Релативная сетка

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


Рендермаркет


Пять шагов к улучшению модульной сетки – шаг 1
[info]natio2

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

Отношения — основа любой хорошей сетки в дизайне. Некоторые из пропорций рациональны, к примеру 1:1 или 2:3 другие рациональны: 1:1,414. Первая часть расскажет как комбинировать и использовать отношения для построения гармоничных сеток.
 

Начало с чистого листа


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


Разделение отношений


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

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

На изображениях 1−6 видно, что простым делением мы получаем необходимое.
grid_pt1_1
grid_pt1_2

Добавим изюминку


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

На изображении 7 показано текстовое наполнение, 8-9 показывают насколько гибкой может оказаться сетка для разных форматов изображений.


Первый этап


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

Оригинал статьи
Перевод: Опанасенко Сергей

Home