Дизайн. Экспериментируем вместе

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

Ну а теперь первое задание.
И так… Есть дизайн ссылка
Сайт можно поклацать тут: ссылка
что вы должны сделать:
1. Нужно скопировать этот дизайн( создать послойный psd)
2. Расчертить модульную сетку, понять, как она строится.
3. Попытайтесь понять, что делает дизайн гармоничным. Обратите внимание на цвет плашек и фоток. Как по мне, это высший пилотаж сочетания цвета.
4. Попробуйте переставлять модули (комбинаторика) посмотрите к чему это приведет, как поменяется визуальная составляющая концепта.

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

З.ы. возможно лучший дизайнер получит денежный приз, а может и нет. Этот момент сейчас обсуждается с пользователем, который вызвался помочь нам : )

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

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

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

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

Читай все посты ссылка

Мне интересно, я участвую.
Сразу вопрос о шрифтах. Сейчас не проблема использовать в макете любые шрифты, но многие заказчики настаивают на использовании только web-безопасных шрифтов. Количество последних невелико, особенно кирилических. Простора для экспериментов совсем не много. Вопрос ко всем: интересует какие шрифты предпочитаете использовать вы?
Цитата ("habster"):

И как её рисовать?

я пользуюсь вот этим (плагином) ссылка
можете воспользоваться моей программкой для создания сеток, о ней я говорил в этой ветке: ссылка
Также, можете почитать урок Алексея Попова тут: ссылка

Как я узнаю какая сетка в макете.
1. смотрю на макет, анализирую, ищу закономерности в вертикальном ритме.
2. используя гиды подчеркиваю ритм
3. используя инструмент ruler tool замеряю отступы, что-бы знать параметры сетки.
4. вручную делаю сетку( красные плашки с прозрачностью)

наглядный пример: ссылка

Нашел у себя в избранном.Может кому-то будет полезным для вдохновения
ссылка
ссылка
ссылка
ссылка
ссылка
ссылка

Цитата ("Killme777"):

Как я узнаю какая сетка в макете.

Если это работающий сайт, а не картинка, можно воспользоваться этим: ссылка
Цитата ("habster"):

Плагин мне понравился. но после сохранения psd и в дальнейшем его открытия, в фотошопе ничего не отображается ((

Хм, у меня и не только у меня, все работает замечательно.

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

Я с вами. ) Уже есть идеи )

А насколько обязательно скопировать исходник? Просто как-то не очень хочется убивать на это время. Лучше сразу сделать свое, его хоть в портфель закинуть можно. А? И когда выкладывать готовые дизы? По мере готовности или все сразу в последний день зальем? )

Annakms
Цитата ("Killme777"):

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

Учиться и практиковаться - всегда полезно, поэтому с удовольствием присоединяюсь к вам)

Так, ну тогда я буду первой и покажу, что успела. Жду ваши мнения, поправки, рекомендации )

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

Grass, спасибо ) Я учту все. А цвета изначально заданы логотипом. Не хочется их менять.

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

Annakms, по поводу нахождения гармоничного сочетания цветов в макете читайте теорию цвета в живописи (обратите внимание на цветовой круг и дополнительные цвета). Возможно вам также пригодится вот это ссылка
Цитата ("Grass"):

А у кого какие мысли по поводу белой плашки вверху?

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

action-studio, Спасибо! Клевая штука! Такой давненько не хватало ) У меня изначально все было в оттенках красного. Но с учетом белого фона через 5 мин. все начинает сливаться и резать глаза. Буду переделывать гамму.

Annakms, я почитал эту статью - ссылка
В целом мне понравилось. Я не очень знаю теорию поэтому оперирую понятиями - нравится или не нравится
Но шрифты и цвет текста нравятся не очень. И упомянутая статья по моему может быть полезной

mirekua, спасибо! Прочту обязательно