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

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

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

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

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

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

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

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

В общем, спасибо за ответы.
  • Вопрос задан
  • 9303 просмотра
Пригласить эксперта
Ответы на вопрос 13
Wott
@Wott
я нифига не дизайнер, такой же программист-фрилансер и такая же проблема была у меня лет пять назад
я для себя разделил «дизайн» сайта на три фазы:
1 придумать что-то типа концепции или общей картины что будет и где, какие блоки, какие страницы
2 детализовать концепцию до макетов страниц — часто приходит программисту в виде картинок
3 придумать как это будет верстаться и сделать, то есть допилить до состояния как на картинке в пункте 2

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

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

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

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

Книги и курсы я не могу посоветовать, потому что с ними у меня не складывается. Редко попадается книга, которая стоит времени, потраченного на нее. А курсы… в общем также. Я вообще стараюсь извлекать знания из того что попадается — увидел сайт — глянь код, но подготовленные к употреблению «блюда» вызывают разочарование.
Ответ написан
Twitter Bootstrap.
Ответ написан
Комментировать
@habrauser
Если вам нужен дизайн (и с английским ок), то посмотрите эти руководства psd.tutsplus.com/category/tutorials/interface-tutorials/
Там есть как создавать и кнопочки, и страницы.

Придумайте себе простой тестовый проект, нарисуйте его на бумаге (где лого, где меню, где содержание), перерисуйте в фотошопе/гимпе как умеете, сверстайте.
Ответ написан
Комментировать
С азами дизайна освоиться помогла в свое время книга Дмитрия Кирсанова «Веб-дизайн»
Ответ написан
Комментировать
ArthurG
@ArthurG
У меня сейчас похожая проблема. Мне тоже не очень нужны инструкции «как делать», а больше нужны знания «что делать».

Поскольку что и как почти не разделимо, я поступил следующем образом:
  • взял с учебника по html5 css стиль,
  • внутри оказалось много ссылок, одна из которых на книжку по типографике,
  • еще очень интересными мне показались ссылки из блога бобука по соответствующим тегам,
  • поскольку этого не достаточно, я опять в поиске. :)

Вообще конечно же можно использовать готовые решения, вроде bootstrap, но это довольно комплексное и сложное решение. Моя цель получить полностью подконтрольное мне, гибкое решение.
Ответ написан
Комментировать
dshster
@dshster
Javascript, Frontend
У меня такая же проблема, но я фронт-енд разработчик, работаю по готовым дизайн-макетам. Тут есть небольшой нюанс — так как я знаю всю «кухню» воплощения нарисованного макета в интерактивную вёрстку, то рисуя сам я невольно буду упрощать некоторые сложные в вёрстке элементы. Дизайнер же не знает вёрстку и не знает подводных камней, поэтому не станет ограничивает себя в визуальной фантазии!
Согласен с приведенным выше примером на psd.tutsplus.com, смотреть, изучать современные тренды дизайна, библиотеки элементов: creattica.com, smashingmagazine.com, «google: web-design inspiration»
Ответ написан
Комментировать
lightman
@lightman
Автор, не заморачивайтесь вы так.

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

Во-вторых, развитый западный мир узкоспециализирован. Это на диком пост-советском пространстве ценятся многорукие шивы
Ответ написан
TTA
@TTA
Мутировавший технарь :)
Не сходите сума щас в пределах 70-80 баксов вполне можно найти вменяемые дизайны на тех же templatemonsters. Там много шлака но есть интересные вещи до которых вам пилить и пилить. Поверьте по трудозатратам выставление всех этих рюшечек - самое муторное из фронтэнда. А так купил шаблон - нарезал в фотошопе (если psd) и вуаля - лучший дизайнер на деревне :)
Ответ написан
Комментировать
DOC1e421
@DOC1e421
Учусь в 11 классе
Интересный ты человек,хочешь все ,просто так еще и с наваром и чтоб за тебя делали,нее,тупые вопросы не задавай-просто практикуйся,я тоже могу спросить ,я не космонавт,как им стать?
Делай,а будут проблемы задавай сюда вопросы!
Ответ написан
Комментировать
CoffeeAndNews
@CoffeeAndNews
Можно просто купить готовый уникальный шаблон за 20$ изменять его как хочешь,делать с ним что хочешь.(это как один из вариантов)
Ответ написан
Комментировать
тем временем в параллельной вселенной: https://news.ycombinator.com/item?id=8182084
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы