Где и как научиться веб-дизайну, будучи программистом?
========================================================

 Здравствуйте.  

  

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

  

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

  

При этом я довольно хорошо справляюсь с задачами по правке чего-то, все-таки знаю html, css и js на каком-то базовом уровне, но вот сделать с нуля… прямо трагедия.  

  

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

  

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

  

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

  

В общем, спасибо за ответы. 

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

я для себя разделил «дизайн» сайта на три фазы:   

1 придумать что-то типа концепции или общей картины что будет и где, какие блоки, какие страницы   

2 детализовать концепцию до макетов страниц — часто приходит программисту в виде картинок  

3 придумать как это будет верстаться и сделать, то есть допилить до состояния как на картинке в пункте 2  

  

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

  

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

  

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

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

  

Как научиться? как всегда — делать, пробовать и разбирать что и почему не так. Я для начала делал всякую фигню. Потом смотрел и переделывал. И опять и снова. У моей домашней странички было что-то около 20 вариантов. Причем некоторые я переверстывал. Последний держиться уже пару лет, но уже хочется что-то изменить, но пока не сформулировалась концепция что и во что менять.  

  

Книги и курсы я не могу посоветовать, потому что с ними у меня не складывается. Редко попадается книга, которая стоит времени, потраченного на нее. А курсы… в общем также. Я вообще стараюсь извлекать знания из того что попадается — увидел сайт — глянь код, но подготовленные к употреблению «блюда» вызывают разочарование. 

 Twitter Bootstrap. 

 Если вам нужен дизайн (и с английским ок), то посмотрите эти руководства [psd.tutsplus.com/category/tutorials/interface-tutorials/](http://psd.tutsplus.com/category/tutorials/interface-tutorials/)  

Там есть как создавать и кнопочки, и страницы.  

  

Придумайте себе простой тестовый проект, нарисуйте его на бумаге (где лого, где меню, где содержание), перерисуйте в фотошопе/гимпе как умеете, сверстайте. 

 С азами дизайна освоиться помогла в свое время книга Дмитрия Кирсанова «Веб-дизайн» 

 Начните с базового проекта для себя, глядя на [bemclub.in/](http://bemclub.in/), [chikuyonok.ru/2010/01/liquid-site-markup/](http://chikuyonok.ru/2010/01/liquid-site-markup/), [habrahabr.ru/blogs/webdev/77179/](http://habrahabr.ru/blogs/webdev/77179/), [vitaly.ya.ru/replies.xml?item\_no=5778](http://vitaly.ya.ru/replies.xml?item_no=5778) и т.п. 

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

  

Поскольку что и как почти не разделимо, я поступил следующем образом:   

* взял с [учебника](//diveintohtml5.info/) по html5 css стиль,
* внутри оказалось много ссылок, одна из которых на книжку по типографике,
* еще очень интересными мне показались ссылки из [блога](//addmeto.cc) бобука по соответствующим тегам,
* поскольку этого не достаточно, я опять в поиске. :)

  

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

 У меня такая же проблема, но я фронт-енд разработчик, работаю по готовым дизайн-макетам. Тут есть небольшой нюанс — так как я знаю всю «кухню» воплощения нарисованного макета в интерактивную вёрстку, то рисуя сам я невольно буду упрощать некоторые сложные в вёрстке элементы. Дизайнер же не знает вёрстку и не знает подводных камней, поэтому не станет ограничивает себя в визуальной фантазии!  

Согласен с приведенным выше примером на psd.tutsplus.com, смотреть, изучать современные тренды дизайна, библиотеки элементов: creattica.com, smashingmagazine.com, «google: web-design inspiration» 

 Автор, не заморачивайтесь вы так.  

  

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

  

Во-вторых, развитый западный мир узкоспециализирован. Это на диком пост-советском пространстве ценятся многорукие шивы 

[Уроки на Codecademy](http://www.codecademy.com/tracks/web). 

 Не сходите сума щас в пределах 70-80 баксов вполне можно найти вменяемые дизайны на тех же templatemonsters. Там много шлака но есть интересные вещи до которых вам пилить и пилить. Поверьте по трудозатратам выставление всех этих рюшечек - самое муторное из фронтэнда. А так купил шаблон - нарезал в фотошопе (если psd) и вуаля - лучший дизайнер на деревне :) 

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

Делай,а будут проблемы задавай сюда вопросы! 

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

 тем временем в параллельной вселенной: <https://news.ycombinator.com/item?id=8182084>