Шаблон от Template Monster - живая демка шаблона продающегося на templatemonster.com. Все, как я люблю: грандж, плавный скроллинг, ненавязчивый и очень красивый параллакс.
"Hypothetically, let’s say you started with a large, 1020px wide site. Check it out on the largest screen you can get your hands on and make sure it looks great. Now drag the window and make it smaller until the design gets ugly. There’s your first breakpoint. Set a media query for that point and fix everything that you need to address. Once you’re finished, grab that window and find the next point of ugliness. Repeat these steps until you’re satisfied with the range that you’ve accounted for. "
Yummy Gum - сайт двух дизайнеров. Идеальный сайт, оставляющий очень приятное ощущение. Все чистое и аккуратное, но при этом нет ощущения мертвости. Красивые эффекты, есть чему поучиться...
Grunge Style In Modern Web Design - стиль Grunge в веб-дизайне. Коротенький introduction и куча ссылок на материалы, туториалы и прочие ресурсы по теме. «Everything you would ever need for a perfect design in a grunge style» (c)
The Secrets Of Grunge Design - еще одна статья про Grunge. На этот раз стиль разбирается по элементам и + хороший набор примеров.
Статьи написаны в 2008 г., ссылки не все рабочие, но интересно наблюдать, насколько за 3 года изменились сайты, приводимые в пример.
P.S. У Smashing Magazine околоэппловский дизайн оО Сначала ютуб, теперь и тут... Скоро интернет станет весь серым и скучным...
CARNETTE - понятия не имею о чем сайт, но он такой красивый О_О Он в схожем стиле как и редизайн ютуба, но выглядит намного привлекательнее. Рисованные иконки очень оживляют, а на кнопки просто идеальны...
Designers are visual thinkers, we thrive through creation and experimentation using our mind’s eye and an expert knowledge of the tools of our trade. (c)
Сайт-портфолио дизайнера - это вообще отдельный жанр сайтов. На них дизайнеры стараются показать, что они умеют и ими же завлекают клиентов, особенно когда речь идет о фрилансере. Они как правило интересные, красочные и сочатся идеями. Конкретно этот зацепил, решила разобраться чем.
читать дальше1. Цвета и текстуры. Очень приятное сочетание - монохромная серо-белая палитра с всплесками красно-розового (#AC2649 ). Все очень лаконично и в меру. Бумажная текстура, рисованые линии, и "блокнотный" край - все отсылает к реальному миру, но при этом нет конкретной картинки блокнота. Ненавязчивый мягкий градиент на шапке.
2. Отдельные элементы. Как ни странно, дизайнер умудрился вместить на одну страницу все необходимые атрибуты сайта-портфолио и при этом выдержать все в одном стиле и без ощущения мешанины. Итак, мы имеем:
- навигацию состоящую из главных кнопок home - work - contact. (css3 градиенты и прочие печенюшки в действии). Фиксированное положение шапки делает навигацию еще более доступной. Кроме того, основной спектр услуг написан тут же:
- рядом - иконки социальных сетей, отделенные от навигации градиентом. - ниже идет раздел "креативность", который рчень радует - красивая рисовка, рассказы про личность дизайнера и остроумные ссылки. Интересный подход и концепт. С технической точки зрения - css transitions и красивое использование всплывающих подсказок доставляют =)
- классичекая фраза всех портолио с hire me тоже присутствует - и ни на секунду не кажется лишней. - в подвале коротко и с юмором про себя, навыки, опыт работы и социальные сети.
3. Отдельно выделю крупного размера примеры работ и чудесное расположение элементов на этих страницах.
Немного напугало поведение формы обратной связи - очень уж агрессивен розовый, когда его так много. И удивила обычная кнопка под формой - выпадает она как-то из дизайна.
С картинками в дайрах сегодня плохо, поэтому картинки вставлю позже...
rockatee.com/ - очень понравилось этот сайт-портфолио, но очень не могла понять чем именно. Будем разбираться:
1. Пиксельные фоны. В последнее время я подсела на них - очень уж интересный эффект они создают. На этом сайте они очень активно используются, временами даже слишком активно.
2. Цвета. Опять же меня плющит от тусклых цветов вообще и от бирюзового в сочетании с коричневым в частности.
3. Кнопки. Ну вы поняли, да? Правда что касается кнопок - ну не смотрится, когда при наведении мыши кнопка сливается с фоном оО
Ну и раз речь зашла о критике - что мне не понравилось.
Ботинок. Он очень вываливается. Может, немного изменить его гамму в сторону серой? Или добавить пиксельную текстурку?
rockatee.com/services - это нечитабельно вообще. Мелкий текст на пискельном фоне, да еще и с тенью. Варианты решения - сделать шрифт текста светлее. Или добавить полупрозрачный фон под текстом? Или сделать текстуру менее контрастной? (rockatee.com/blog - вот тут намного более читабельно)
Тема чисел сверху немного непонятна и больше вообще нигде не повторяется. Странно.
ULTRANOIR - сайт дизайн студии, демонстрирующий html5+css3 во всей красе. Все очень красиво и очень непонятно. Но красиво, да. Заставка в виде встроенного видео шикарна, да и внутри множество примочек. Только все это очень тяжелое...
Отдельно мне понравились выдвигающиеся блоки в блоге, сделанные предельно просто: читать дальше div изначально задается фон с вот такой тенькой:
и располагаются дивы так, что фона не видно. При hover див сдвигается отрицательными полями + css3 transitions, обнажая фон - получается эффект выдвигания.
MR. SIMON COLLISON - этот сайт приводит меня в эстетический оргазм каждый раз, когда я его вижу (а я периодически на него натыкаюсь - судьба =)))). Во-первых, это рисунки-гравюры, от которых я в принципе всегда в восторге. Во-вторых, цвета и текстуры, которые ассоциируются с бумагой. И в целом все, включая шикарную типографику, отсылает к винтажным зоологическим журналам... кааааааайф! Когда-нибудь я что-то такое сделаю... когда-нибудь...
В куче сайтов, заполненных прямоугольными формами, иногда находятся интересные примеры того, как можно нарушить привычную жесткую решетку и использовать другие формы. В данных двух случаях - круг. Ну и просто красивые сайты, да.
EMPIRE - кружочки и пунктирные линии. Шикарный ховер-эффект на кругах - достаточно простой, но я нигде такого еще не видела. Выползающие полукруги тоже доставляют.
MELONFREE - активное пользование формы круга. + мой любимый слайдер. + insert text, который в последнее время мне тоже не дает покоя и в виртуале и в реале. Очень приятный сайт.