Создание дизайна сайта. От креатива до проектирования. Поделитесь секретами.

[Derag]

Хочу поинтересоваться у "Web-дизайнеров" как они зарабатывают дизайны для своих сайтов. Нет меня не интересует переделка с шаблонов, а интересует разработка с нуля.
Так вот меня интересуют как же делать дизайн сайтов. Хочу услышать ваши советы, трюки. Может ссылки на статьи, книги.
Мне просто в голову не лезет даже макеты сайтов, открываю фотошоп и ... я не собираюсь делать крутую гафику, простенький шаблончик, где усилие идёт на выбор цветов взаимодействующих. Я даже этого не могу, леплю цвета, не в кассу.

 

[dee_motard]

мне проще всего начинать работать над макетом не в Фотошопе а в Кореле. В нормальном векторном редакторе набрасываю примерную структуру сайта, подбираю шрифты, прорисовываю элементы меню и тп. Всё делаю в оттенках серого, чтобы на этом этапе не тратить время на подбор цвета. Далее экспорт в растр и импорт в Фотошоп, где уже с помочью hue-saturation-brightness и colorise "раскрашиваю" базовые элементы дизайна, и работаю над более детальной проработкой графики. Широко пользуюсь эффектами над слоями.
Ну а как остаюсь доволен от статичной картинки - нарезаю кусками графику (будем считать что какую часть пускать фоном, какую - картинкой, прикинуть проблем не возникает) и в ШТМЛ-редакторе собираю эту графику назад div-ами в единое целое, не забывая про растягиваемость дизайна. Дальше в цсс прописываю параметры шрифтов, картинок, таблиц-слоёв для разных элементов дизайна, и вуаля.

 

[alex-bot]

Ну сперва наверно с идеи и тематики начинаю, если в голову совсем ничего не идет, то вперед смотреть сайты конкурентов, если сайты конкурентов галимые , то идем напрямую в забугорные магазины шаблонов, там точно идея есть...
Далее прикидываем что хотим соорудить, идем в любой графический редактор, с основным набором инструментов. (ЗЫ Я лично не художник, и монстров типа Corel & Photoshop не использовал).
Пока хватало Файрворкса вот рисуем там наш дизайн.

Перед тем как приступить к малеванию, нужно выделить от 2 до 5 рабочих цветов.
Они и состовят 100% цветовую гамму всего сайта.

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

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

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

 

[Derag]

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

Кстати, да. Что то я совсем забыл. Если знаете хорошие, буду рад, если напишите.

нужно выделить от 2 до 5 рабочих цветов.

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

 

[scarm]

Кстати, да. Что то я совсем забыл. Если знаете хорошие, буду рад, если напишите.

Все товары с забугорных магазинов шаблонов обычно хранятся здесь:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Заметьте, совершенно бесплатно

 

[Derag]

Заметьте, совершенно бесплатно

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

 

[rim89]

1. Нужна идея, выбарая что угодно( если нету конкретного заказа) и придерживаеся этой идеи до конца.
2. На бумажке набрасываю концепцию, что где и зачем + размеры + то что возможно придется переделать
*есть одно замечательное правило - думай с карандашем и бумагой, я его стараюсь придерживаться
3. В шопе размечаю то что набрасал на бумаге( границы элементов )
4. Идёт непосредсвенно вопложение задуманного в жизь
5. Порезка
6. Верстка
*вот примерное план действий

 

[Derag]

2. На бумажке набрасываю концепцию, что где и зачем + размеры + то что возможно придется переделать

Пробовал, но видать я размеры бумажки маленькие беру...

А ещё хотел спросить, где вы графику берёте? Ну там И кнопочки и т.д.
Я понимаю что в Яндексе - поиск картинок может прокатить, но оттуда не серьёзно будет.

 

[emil116rus]

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

 

[maksim-ineshin]

Для подбора вдохновения я беру любую понравившуеся фотографию на

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

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

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

от туда я взял несколько очень хороших идей... разумеется всё надо додумывать...

p.s. иногда бывают проблемы при вёрстке, но это всё решаемое....