Где и как научиться веб-дизайну, будучи программистом?
Здравствуйте.
Я, можно сказать, более-менее начинающий программист, пишу на Ruby. И, хотя практически вся моя деятельность завязана на около Ruby-on-Rails'ном окружении, большую часть времени на работе я провожу за какими-то оптимизациями, прописывании логики, т.е. фронтэндной частью практически не занимаюсь (частично это связано со спецификой проекта).
Но частенько меня посещают довольно странные мысли, и касаются они того, что я не могу стать полноценным веб-программистом без умения сделать сайт с нуля. А упирается здесь все в практически полное отсутствие навыков верстки и веб-дизайна (я могу немного путаться в терминологии и называть вещи чужими именами, не обессудте). Я не говорю про какие-то сложные сайты, макеты в фотошопе и т.п. Даже обычный одностраничник для какого-нибудь проекта, склепанного за выходные ради освоения технологии, вызывает у меня чувства потерянности и полной безнадежности.
При этом я довольно хорошо справляюсь с задачами по правке чего-то, все-таки знаю html, css и js на каком-то базовом уровне, но вот сделать с нуля… прямо трагедия.
Я даже не уверен, можно ли это привить каким-либо образом, просто вижу, что некоторые только начинающие программисты клепают странички с довольно интересным дизайном, и становится немного не по себе. К тому же, например, такое направление, как фриланс (иногда хочется попробовать хотя бы из любопытства), практически перечеркивается неумением сделать проект от начала и до конца, а под этим часто подразумевается и минимальный дизайн какой-то.
Если хоть один человек дочитал до этого места, может быть посоветуете какие-нибудь уроки, скринкасты, что-то еще, чтобы научиться делать минимальные дизайны страниц. Понять какие-то концепции, паттерны, принципы. Если это еще будет с ориентацией на уже знакомых со сферой людей, вообще отлично.
Как вы, наверное, поняли, мне не нужен учебник по html или нечто подобное. Просто сейчас действительно много появляется креативных и интересных материалов по различным темам, вдруг что-то из удовлетворяет моим требованиям.
я нифига не дизайнер, такой же программист-фрилансер и такая же проблема была у меня лет пять назад
я для себя разделил «дизайн» сайта на три фазы:
1 придумать что-то типа концепции или общей картины что будет и где, какие блоки, какие страницы
2 детализовать концепцию до макетов страниц — часто приходит программисту в виде картинок
3 придумать как это будет верстаться и сделать, то есть допилить до состояния как на картинке в пункте 2
Про первое мало что могу посоветовать — это как «решить задачу» — есть какие-то алгоритмы, но все они сводятся к декомпозиции: сначала формулируем общую идею, например «магазин фуфла» или «блог о прекрасном». Потом потихоньку определяем из чего эта идея может состоять — магазин нуждается в списках товара, которые надо видеть, искать и сортировать, товары надо покупать. Потом каждую из состовляющих делим до элементов, которые понятны. Все это превращаем в некие блоки на странице(ах). Тусуем, что-то выкидываем, что-то добавляем. На выходе получается что-то, что называется скетчем или наброском
Второе — это чисто навык работы с изображениями и инструментами по работе с ними. Плюс фантазия и талант «сделать красиво». У меня таланта нет, фантазия тоже в этом плане хромает, так что я либо делаю какими-нить прямоугольниками, либо подсматриваю детали на других сайтах. С изображениями работать могу, но не люблю это дело, так что ищу сеты изображений, если надо, а лучше совсем без них — минимализм наше все
Третье в целом называется версткой. По хорошему это опять же должен сделать дизайнер, хотя бы для понимания как его дизайн будет выглядеть, но у них руки и голова заточены не в эту сторону, и как правило приходиться переделывать. С другой стороны верстка делается на декларативных языках и обычному программеру надо тоже немного свернуть сознание, что бы думать готовыми блоками и их взаимодействием. Навык работы в функциональных языках или регэкспах тут немного помогает, ага.
Причем есть большая разница между создать макет с нуля и переделать или исправить. Я не знаю почему, но это сильно больше чем разница между начать писать код с нуля vs правка кода. Может быть дело в том что в верстке вариантов намного больше, может быть у меня мышление все еще повернуто бедром.
Как научиться? как всегда — делать, пробовать и разбирать что и почему не так. Я для начала делал всякую фигню. Потом смотрел и переделывал. И опять и снова. У моей домашней странички было что-то около 20 вариантов. Причем некоторые я переверстывал. Последний держиться уже пару лет, но уже хочется что-то изменить, но пока не сформулировалась концепция что и во что менять.
Книги и курсы я не могу посоветовать, потому что с ними у меня не складывается. Редко попадается книга, которая стоит времени, потраченного на нее. А курсы… в общем также. Я вообще стараюсь извлекать знания из того что попадается — увидел сайт — глянь код, но подготовленные к употреблению «блюда» вызывают разочарование.
Придумайте себе простой тестовый проект, нарисуйте его на бумаге (где лого, где меню, где содержание), перерисуйте в фотошопе/гимпе как умеете, сверстайте.
внутри оказалось много ссылок, одна из которых на книжку по типографике,
еще очень интересными мне показались ссылки из блога бобука по соответствующим тегам,
поскольку этого не достаточно, я опять в поиске. :)
Вообще конечно же можно использовать готовые решения, вроде bootstrap, но это довольно комплексное и сложное решение. Моя цель получить полностью подконтрольное мне, гибкое решение.
У меня такая же проблема, но я фронт-енд разработчик, работаю по готовым дизайн-макетам. Тут есть небольшой нюанс — так как я знаю всю «кухню» воплощения нарисованного макета в интерактивную вёрстку, то рисуя сам я невольно буду упрощать некоторые сложные в вёрстке элементы. Дизайнер же не знает вёрстку и не знает подводных камней, поэтому не станет ограничивает себя в визуальной фантазии!
Согласен с приведенным выше примером на psd.tutsplus.com, смотреть, изучать современные тренды дизайна, библиотеки элементов: creattica.com, smashingmagazine.com, «google: web-design inspiration»
Во-первых есть мнение, что человеку ближе либо технарское (математика, программирование), либо гуманитарное (в т.ч. рисование, дизайн). Исключения, как водится, есть, но их немного.
Во-вторых, развитый западный мир узкоспециализирован. Это на диком пост-советском пространстве ценятся многорукие шивы
В-третьих, все равно времени на полноценную прокачку во всех направлениях не хватит. Специализируйтесь на каком-то одном направлеии и будьте счастливы.
P.s. Никто не запрещает упражняться в дизайне в свободное время. Но помните, что вероятно вы не станете в нем хорошим специалистом. Тем не менее главное мерило ценности от занятия любой деятельностью — удовольствие, а не зависть «вон Вася сам играет, сам поет, сам билеты раздает» сайты пишет-продает :)
Спасибо за совет. Я, конечно же, имел ввиду не совсем зависть в классическом понимании, а просто складывается впечатление, что это не очень сложно. И все это в контексте именно дополнительного навыка, а не профильного, по большей части для себя.
Не сходите сума щас в пределах 70-80 баксов вполне можно найти вменяемые дизайны на тех же templatemonsters. Там много шлака но есть интересные вещи до которых вам пилить и пилить. Поверьте по трудозатратам выставление всех этих рюшечек - самое муторное из фронтэнда. А так купил шаблон - нарезал в фотошопе (если psd) и вуаля - лучший дизайнер на деревне :)
Интересный ты человек,хочешь все ,просто так еще и с наваром и чтоб за тебя делали,нее,тупые вопросы не задавай-просто практикуйся,я тоже могу спросить ,я не космонавт,как им стать?
Делай,а будут проблемы задавай сюда вопросы!
Простой
