Блог hippostyle

Регистрация

  Сентябрь 2010  

Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

Hippostyle.ru - создание сайтов с трендовым дизайном

Теги

david shwerin  frank neulichedl  hand-made  hippopotamus  hippostyle  john o’nolan  jumble tone blues  minimalistic does not mean simple design  start designing emotions  stop designing aesthetics  the elegance of imperfection  web design trends for 2010  webdesign depot  блюз  бумага ручной работы  джаз  дизайн  минимализм  начинайте создавать эмоции  несовершенство  портфолио  сайты  создание сайтов  статьи  тренды  хватит создавать эстетику 


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

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

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

Наш адрес в сети: hippostyle.ru

Понимая веб-дизайн

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

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

Если мы хотим, чтобы сайты стали лучше, работа успешнее, а клиенты осведомленнее, начинать обучение необходимо с нас самих.

Предпочесть недвижимость, а не архитектуру

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

Новостные медиа слишком часто воспринимают Интернет неправильно. Слишком много продажной интернет журналистики – слишком мало творческих иллюстраций и оригинальных идей. Руководимые редакторами, на которых давит издательство, которое обеспокоено нехваткой рекламодателей, журналисты, даже те, кто понимает Интернет, проводят большую часть времени за написанием статей о сделках и за цитированием участников сделок. Многие делают это даже в том случае, если цитата заведомо абсурдна и преследует корыстные цели – например, вспомним «Закон Марка Цукерберга».

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

И вот подтверждение однобокости новостных сюжетов. В 1994 году Интернет был странным и диким – для них. В 1999 он стал влиятельной силой. В 2001 – напастью. В 2002 ребята из новостей обнаружили существование блогов. В 2004 приглашенные блоггеры, покрывшись испариной, объясняли на CNN, как городские журналисты вновь изобрели новости и демократию, и как они собираются определить победителя наступающих выборов в президенты. Не помню, как они выкрутились.

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

Замкнутый круг себялюбия

Новостные медиа – не единственные непонимающие. Профессиональные ассоциации тоже ежедневно показывают свое непонимание и ежегодно празднуют свою неправоту, устраивая фестиваль. Раз в год журналы о рекламе и дизайне совместно с профессиональными организациями устраивают конкурс за звание «новый медиа дизайн» («new media design»), который судят победители предыдущего года. То, что они называют это «новым медиа дизайном», им ни о чем не говорит, зато нам с вами говорит о многом.

Хотя и существуют некоторые исключения, большая часть создателей, выигрывающих конкурс, рассматривают Интернет как еще одну платформу для рекламы и маркетинговых кампаний, в которых пользователь пассивно воспринимает Flash и видео материал. Для активных пользователей существует игровой подход – но то, что мы с вами рассматриваем как «активный Интернет», у них ограничивается кнопкой «Разместить на Digg».

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

Критики тоже ничего не понимают

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

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

Более опытные критики понимают, что веб-среда и печать – разные категории, и что в каждом виде дизайна есть свои ограничения. Но даже эти умники иногда становятся жертвами ложных сравнений. (Я сам тоже этим занимался, но давно и лишь для смеха.) Критики вопрошают, где же шедевры веб-дизайна? Google Maps можно рассматривать как Мона Лизу нашего времени – сайт великолепно удовлетворяет многих из нас, предоставляя нужную информацию, но не удовлетворяет критиков по дизайну, которые ищут прямые параллели с… даже не знаю, скажем, с каноническим постером, изображающим Боба Дилана, созданным Милтоном Глейзером.

Типографика, архитектура и веб-дизайн

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

Архитектура (та, что из стекла и бетона) – еще одно из возможных сравнений, по крайней мере, более оправданное, чем сравнение с постерами. Архитектура создает плоскости и направляющие, которые поддерживают динамику поведения людей. Однажды сконструированная, архитектура отпускает контроль. С течением времени люди, использующие здание, корректируют под себя первоначальный архитектурный дизайн, что-то добавляя, а что-то убирая.

Конечно, любые сравнения грубы по определению. Что такое «London Calling» для телевидения? Кто такая Джейн Остин в дизайне автомобилей? «Мадам Баттерфляй» не становится менее красивой от отсутствия авто погонь, а ореховая паста менее вкусной от того, что не умеет танцевать.

Так что такое веб-дизайн?

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

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

Давайте повторим еще раз, с выражением:

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

Она идет во всей красе

Великий веб-дизайн сравним с великими шрифтами: некоторые, как Rosewood, персонализируют любое наполнение, на которое накладываются. Другие, как Helvetica, сливаются с фоном (по крайней мере, пытаются), чудесно поддерживая любой тоновый окрас наполнения. (Завтра, возможно, мы будем спорить, действительно ли шрифт Helvetica так же нейтрален, как вода.)

Какой дизайн можно привести в пример? Для начала, макет Дугласа Баумэна для Blogger – белый «Minima», который используется, наверное, миллионом блоггеров – и при этом, каждый раз складывается ощущение, что он индивидуален. Это – великий дизайн.

Великий веб-дизайн сравним с великими строениями. Все офисные здания, даже совсем разные, имеют вестибюль, ванные и лестницы. Сайты так же имеют свои стандарты.

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

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

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

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

Автор: Jeffrey Zeldman

Перевод: Hippopotamus

Теги: hippopotamus|hippostyle|статьи|дизайн

Хватит создавать эстетику, начинайте создавать эмоции

Несмотря на провокационный заголовок, забывать об эстетике все же не стоит.

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

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

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

 

Теги: stop designing aesthetics|webdesign depot|start designing emotions|хватит создавать эстетику|начинайте создавать эмоции|john o’nolan|hippopotamus|сайты|статьи|создание сайтов|тренды|hippostyle|дизайн

что такое??

ниче не работает..

Тренды веб-дизайна 2010

Мы следим за трендами в веб-дизайне и активно используем новые веяния в своих проектах. Следите и Вы! Свежепереведенная и очень любопытная статья от профессионалов веб-дизайна о том, что мы любим делать. Очень советуем ознакомиться и посмотреть вдохновляющие примеры.

Тренды веб-дизайна 2010

Пурист скажет, что великий дизайн существует вне времени. Да, в идеальном мире тренды из этой статьи можно смело игнорировать.

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

Технологии меняются, и это решительно расширяет возможности медиа.

В 2010 году мы наблюдаем, как дизайнеры продолжают расширять границы веб-дизайна, определяя следующие тенденции:

Дизайн печатной продукции

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

Шрифты класса Serif

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Крупные заголовки

Дизайнеры печатной продукции всегда использовали крупные заголовки для привлечения внимания. Печатная периодика должна быть кричащей, чтобы ее вообще кто-то захотел прочитать. Если бы Вы увидели скучную брошюру на столе, Вы бы потрудились взять ее? Скорее всего, нет.

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Многоколоночная верстка

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Большие иллюстрации

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Диаграммы и инфографика

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Простота

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

Хик Ло рассказал нам про то, что время, затрачиваемое на принятие решения прямо пропорционально количеству вариантов. Так же теория «сигнал-шум» говорит, что если что-либо не добавляет информативности или функциональности сайту (сигнал), то оно мешает и делает дизайн менее эффективным (шум). Простой дизайн легче использовать и понимать, а так же он способствует чистоте коммуникационного сообщения.

Минималистичный дизайн по сетке

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Одностраничный сайт

Существует много путей упростить дизайн. Одностраничный сайт-визитка использует сразу два подхода: сокрытие и извлечение.

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Много белого пространства

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

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Типографика

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Технология CSS3

Не уверены, что можете извлечь пользу из CSS3? Подумайте еще раз. Пионеры веба, такие как Энди Кларк и Джереми Кейт проповедуют «прогрессивную модернизацию» в веб-дизайне. Прогрессивная оптимизация означает создание сайтов таким образом, что они корректно отображаются старыми версиями браузеров и в то же время остаются современными для тех, кто использует последние технологии.

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

Анимация CSS3

Анимация в сети прошла долгий путь. В самом начале анимировать мы могли только с помощью GIF файлов. Затем границей возможного стал Flash. Теперь мы можем выбирать между Flash, Silverlight, GIF, JavaScript и даже CSS3. Нетипичная анимация может надолго запомниться, CSS3 сделает ее загрузку легкой, а создание простым.

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Закругленные углы

Стиль Web 2,0 2005 и 2006 годов, сделал закругленные углы популярными, настолько, что они начали раздражать. В то же время, создавать их было сложно. Тогда не существовало возможности сделать действительно круглые углы. Вместо этого их приходилось имитировать средствами CSS, JavaScript и изображениями.

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

Многие дизайнеры находят серьезные преимущества в этой новой возможности браузеров в 2010 году.

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Тени от текста и блоков

Использование теней, чтобы придать глубину, использовалось часто (и иногда слишком часто) с самых ранних дней появления веб-дизайна. Но не всегда это было оправдано. Чтобы добавить тень к тексту, нужно было использовать изображения, что увеличивало время загрузки страницы и делало поддержку сложнее. Тени для блоков требовали несколько изображений и такие хитрости CSS как «раздвижные двери» («sliding doors»).

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

RGB и прозрачность

Долгие годы работа с прозрачностью в веб-дизайне была практически невозможна. Существовало три пути: имитация прозрачности с помощью простых изображений, борьба с кросс-браузерной несовместимостью формата PNG или война с базовыми настройками прозрачности и фильтрами CSS.

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Мобильная версия

Доступ в Интернет с мобильного телефона дал миллионам пользователей возможность проверить свой банковский счет во время ожидания ответа, узнать счет, проезжая в метро или написать в Twitter во время вождения автомобиля. (Угадайте, какая из этих привычек опасна?) И мобильный Интернет продолжает интенсивно развиваться. Мы дошли до главного – каждая компания должна решить, будет ли их сайт использоваться «на бегу» и, если да, как именно. Инновационные компании уже вложили большие средства в полезные и дружественные мобильные версии своих сайтов.

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Креативность

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

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

Чистые иллюстрации

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Текстурный фон

Текстурный фон не является чем-то новым в веб-дизайне. Но за последние месяцы эта техника претерпела интересные изменения. Я говорю о «микро-текстурах» - едва различимых и почти незаметных текстурах, используемых в качестве фона.

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Пиктограммы

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

В последние несколько месяцев дизайнеры стали задаваться вопросом: «Как можно оживить пиктограммы?» И это привело к прогрессу пиктограмм, который сделал их полезными и интересными.

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Акварель

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Рукописный текст

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Социальные медиа

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

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Фиксированные элементы

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

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

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Hippopotamus - cоздание сайтов с чистым дизайном

Перевод: Hippopotamus

Оригинал статьи: Web Design Trends for 2010

Теги: hippostyle|hippopotamus|web design trends for 2010|тренды|создание сайтов|дизайн|статьи|сайты|минимализм

Сайт-визитка посвященный бумаге ручной работы

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

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

Hippopotamus

Создание сайта: Hippopotamus

Теги: hippostyle|hippopotamus|бумага ручной работы|hand-made|создание сайтов|дизайн|портфолио|сайты|минимализм

Основы минимализма

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


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

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

    • Все графические элементы и дополнительные текстовые элементы имеют единственную функцию – привлечение внимания посетителя к «главной» информации. Такой подход позволяет очистить дизайн от излишеств, отягчающих работу посетителя с сайтом и ухудшающих внешний вид.
    • Преимущественное использование «простых» цветов в оформлении сайта: белый, черный, красный, синий и т.д., редкое использование градиентов и только в тех случаях, когда без них не обойтись. Чаще всего преимущество отдается белому цвету, так как за счет контраста он позволяет привлечь наибольшее внимание посетителя к информации, но так же нередко встречаются и «темные» цветовые гаммы, которые выглядят не менее эффектно за счет контраста.
    • Чем меньше элементов используется в дизайне сайта, тем лучше виден каждый недочет и просчет разработчика, а так как в 90% случаев главная информация на сайте – текстовая, то и 90% всех ошибок приходится на грамматику и типографику. В связи с этим разработчики сайтов в стиле минимализм часто прибегают к услугам копирайтеров, тратят существенную часть времени на подбор шрифтов и их начертаний.

Автор: Hippopotamus

Теги: hippostyle|hippopotamus|создание сайтов|сайты|дизайн|статьи|минимализм

Сайт группы Jumble Tone Blues от студии Hippopotamus

Jumble Tone Blues – современное сочетание блюзовых оттенков во всем разнообразии их настроений: от нежной романтики до безудержного веселья, от меланхоличной мелодии до бешеного ритма в стиле свинг.

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

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

Hippopotamus

Создание сайта: Hippopotamus

Теги: создание сайтов|hippostyle|hippopotamus|jumble tone blues|блюз|джаз|дизайн|портфолио|сайты|минимализм

Сайт Angloconsultant от студии Hippopotamus

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

Hippopotamus

Создание сайта: Hippopotamus

Теги: hippostyle|hippopotamus|создание сайтов|сайты|дизайн|портфолио|минимализм

Сайт агентства PinniCo от студии Hippopotamus

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

Hippopotamus

Создание сайта: Hippopotamus

Теги: hippostyle|hippopotamus|создание сайтов|сайты|дизайн|портфолио|минимализм

Минимализм — не примитивизм

Минимализм в дизайне – не то же самое, что «примитивный» дизайн. В минимализме используется малое число графических элементов, и служат они лишь для того, чтобы донести до пользователя какое-либо сообщение. Сообщение — важнее всего. Графические элементы, помогающие обратить внимание пользователя на сообщение, могут иметь примитивные формы, но результат их использования всегда максимален. 

«Примитивный» же дизайн не дает максимальных результатов – он дает чувство незавершенности.

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

1. Слишком большое число украшений и сложных текстур могут размыть Ваше сообщение. Избавьтесь от графических элементов, не несущих никакой функции. 

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

3. Невозможно передать хаос через минимализм. И точка.
В качестве итога этой статьи, можно заявить, что: Минимализм использует только необходимые графические элементы, чтобы подчеркнуть сообщение, «примитивный» дизайн игнорирует сообщение, чтобы подчеркнуть свою простоту.

Перевод: Hippopotamus

Оригинал статьи: Minimalistic does not mean simple design

Автор: Frank Neulichedl

Теги: hippopotamus|minimalistic does not mean simple design|frank neulichedl|hippostyle|создание сайтов|дизайн|статьи|сайты|минимализм

Очарование несовершенства

Все свои знания об очаровании несовершенства я приобрел вместе с керамической тарелкой в Киото.

Что особенного в этой тарелке? Перед запеканием она была идеально круглая, но художник намеренно сделал края неровными. Она очаровательна, и это становится еще заметнее, когда что-нибудь касается ее поверхности: блестящая зеленая груша, неряшливо отломленный кусочек шоколада, горстка обжаренного миндаля. Сейчас эта тарелка восседает на столе в моём домашнем офисе. Она символизирует важнейший урок мастерства: полезность предмета не зависит от идеальности его формы. На самом деле, урок, который я выучил о создании изящных образов – от креативного резюме до дизайна пользовательского интерфейса – включает в себя полный отказ от тяги к идеальному.

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

«Разве это не прекрасно?» – спросил мастера Дзен священник…

Мастер кивнул. «Да… твой сад прекрасен, но чего-то не хватает…»

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

«Вот то, чего не хватало», – сказал мастер.

Janwillem van de Wetering, The Empty Mirror

 

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

Леонард Корен в своей книге «Ваби-саби для художников, дизайнеров, поэтов и философов» («Wabi-Sabi for Artists, Designers, Poets & Philosophers») описывает следующие материальные проявления ваби-саби: ассиметрия, неровность, простота, скромность, интимность и естественность.

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

Как пишет Корен:

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

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

 

Классификация изящности
Джереми Алексис из Иллинойского Технологического Института Дизайна призывает нас учитывать три типа очаровательности, когда речь идет о вопросах дизайна: логическое очарование, системное очарование и эстетическое очарование.

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

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

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

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

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

Любой сайт, который ориентируется на чистоту дизайна, с формальной точки зрения, может считаться изящным – даже, несмотря на то, что он может быть довольно бестолковым, например как National Geographic Kids. Более удачный пример — сайт Luigi Bormoli, в котором используется AJAX для создания очаровательной презентации товаров из стекла. Как и печатный каталог, этот сайт побуждает посетителя тщательно рассматривать и изучать продукцию, без необходимости обновлять страницу. Уберите очарование, которое придает сайту AJAX и он окажется не таким уж изящным.

И я бы хотел добавить еще одну разновидность очаровательности в список Алекса. Естественное очарование – «чувство», которое сайт или приложение вызывает у пользователя через особенности своей работы с течением времени, и которое заложено в законах природы.

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

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

 

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

Сайт как книга – модель страницы:
- Многообразные визуальные особенности заставляют глаз сосредоточиться на наиболее важном контенте (ассиметрия)

- Оживляющие дизайн текстуры создают иллюзию многомерности (неровность)

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

- Аккуратно и продумано стилизованная типографика (скромность) и

- Взывающий эмоции дизайн сайта – начиная от основной идеи и заканчивая нюансами (интимность)

Список Крейга (Craigslist) – идеальный, хотя достаточно примитивный пример сайта, который демонстрирует эту модель дизайна в ее естественном очаровании. Хотя результат не поражает нас визуально, этот сайт напрямую отражает то, как люди воспринимают и делятся информацией. С течением времени список Крейга развивался по собственному естественному пути, при этом сохраняя некоторые черты настоящих досок с объявлениями.

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

Сайт как сад – модель физического мира:
- Разметка дизайна зарождается из соотношений фигуры и фона на двухмерной плоскости (ассиметрия) с иллюзией третьего измерения по оси Z

- Текстуры накладываются на объекты, симулируя реалистичность, и

- Визуальные особенности, если они не согласованы с остальными элементами, разрушают иллюзию реалистичности

The Eco Zoo берет естественное очарование и воплощает его в дизайне сайта. Здесь Вы можете «вскарабкаться» на дерево и почитать рассказы из всплывающей книги о созданиях, таких как Яги-Чан – козе, которая носит шкуру овцы.

Сайт как чашка Петри – молекулярная модель
- Разметка дизайна исходит из гравитационного взаимодействия между элементами страницы

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

- Особенности визуального представления сайта переходят от дезорганизации (поисковой) к организации (классифицированной) в один клик.

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

 

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

– Shunryu Suzuki


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

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

Перевод: Hippopotamus 

Оригинал статьи: The Elegance of Imperfection

Автор: David Sherwin

Теги: hippostyle|hippopotamus|david shwerin|the elegance of imperfection|несовершенство|создание сайтов|дизайн|статьи|сайты|минимализм

Создание сайтов с чистым и легким дизайном

В сфере веб-дизайна минимализм означает простоту и чистоту оформления сайта. Главная цель чистого дизайна – акцентирование внимания потребителя на информации.

Основные черты минимализма: 
1. Все внимание – на информацию. Оформление сайта должно быть функциональным и удобным, чтобы поддерживать диалог с посетителем. Главное на любом сайте — информация, будь то статья о деятельности компании, мировые новости или портфолио фотографа.

2. Наличие свободного белого пространства. Дизайн должен «дышать». Несмотря на кажущуюся «пассивность» белого цвета в дизайне, он лучше, чем что-либо иное акцентирует внимание посетителя на информации. Чем больше белого пространства и чем меньше элементов на сайте – тем больше внимания посетителя получит каждый элемент.

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

4. Аккуратное использование цветов. В отличие от приемов, используемых в стилях «web 2,0» и «ретро», в минимализме не приветствуется создание кричащей и чрезмерно «оживленной» палитры. Ненужные цвета отвлекают внимание посетителя и иногда вызывают головную боль.

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

Автор: Hippopotamus

Теги: сайты|статьи|дизайн|минимализм

RSS - подписка