Как веб-программисту научиться создавать веб-сайты? [дубликат]

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

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

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

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

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

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

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

Спасибо, Дэвид

РЕДАКТИРОВАТЬ: Лучшие веб-дизайнеры в агентстве, в котором я работал, встречались с профессиональными художниками по верстке до того, как научились делать графику для веб-сайтов.

Редактировать 2: здесь есть еще один хороший ответ: исходя из опыта программирования, с чего мне начать изучать веб-дизайн? , ответы там и здесь все отличные. Этот пост по-прежнему актуален, потому что один с Востока, другой с Запада. Вместе они должны охватывать все аспекты, и никому больше не нужно задавать этот вопрос ;) (конечно, если кто-то из Антарктиды не задаст вопрос в третий раз!)

Также дубликат graphicdesign.stackexchange.com/q/31/23061

Ответы (4)

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

Итак, вы когда-нибудь спрашивали своих дизайнеров, для которых вы реализовывали решения (за один день), сколько времени они потратили на дизайн? Если ответ состоит в том, что они использовали 1-2 недели, чтобы сделать это, то то, что вы испытываете, верно.

Дизайн также довольно много проб и ошибок, что вы и делаете. Вам просто нужно начать делать это методом проб и ошибок быстрее. Так ты делаешь наброски на бумаге? Рисование эскизов может помочь вам быстрее протестировать многие вещи, поскольку вы можете получить грубую оценку за минуты, а не за часы.

Независимо от того, печатаете вы или размещаете в Интернете, большую часть времени хитрость заключается в управлении двумя важными вещами, которые сами по себе могут создавать отличные дизайны даже без фотографий/иконок/и т. д.:

  1. пробел
  2. типография

Если вы посмотрите на некоторые очень современные веб-сайты (Apple, Revolut и т. д.), то увидите, что они в основном созданы с использованием 1 и 2, а также некоторого сексуального фото/видео контента. Все остальное в основном рутина:

  • опыт: чем больше работы вы делаете, тем легче вы будете справляться с 1 и 2 и понимать, как они связаны со всем (выравнивание, сетка, поток контента и т. д.)
  • вдохновение: просто быть в курсе того, что делают другие дизайнеры
  • работа с обратной связью и внесение изменений
@OB7DEV, я хотел бы усилить первый и второй пункт списка. Зайдите на Dribble, Behance, Awwards, Templatemonster, Themeforest... или куда угодно, где вы можете найти современный дизайн и просто воспроизвести некоторые из них. Через некоторое время вы очень естественно усвоите то, что делает типичный веб-сайт. Если вы не знакомы с приложениями для веб-дизайна, таким же образом очень легко изучить инструменты. Вы просто прогрессируете очень линейно, по одному блоку или элементу за раз и гуглите то, чего не знаете. Это дает вам очень специфический набор навыков, которые помогут вам создать свой собственный дизайн.

Для начала проведите небольшое исследование, найдите другие компании, которые продают тот же продукт или имеют такое же название. Ищите предметы, которые имеют отношение к компании. Это уже должно дать вам некоторое представление о том, в каком направлении вам нужно двигаться в дизайне. Как только вы это сделаете, вы начнете процесс проектирования.

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

Карта разума

Это поможет вам с идеями для интерактивности на сайте и для любого дизайна, который вы, возможно, захотите использовать.

  1. Следующий шаг — мудборд. Вы делаете доску в фотошопе с картинками, связанными с компанией. Доска должна дать вам идеи по цвету, а также по дизайну. Вы ищете картинки с цветами, которые, по вашему мнению, могли бы вам подойти. Это может быть что угодно: от объектов до фотографий природы и фотографий людей. На доске настроения вы также размещаете цветовую палитру.

Вы можете посмотреть на эти примеры:

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

  1. Возьмите чистый лист бумаги и начните рисовать макеты каждой страницы сайта, который вы хотите создать. Уточните детали, например, что будет интерактивным, какой цвет будет и так далее.

  2. Теперь вы открываете Photoshop и делаете полностью подробный макет своей домашней страницы в Интернете. Вставьте все, что происходит на самом веб-сайте.

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

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

Последний совет. Если вы сделали всю подготовку и начали программировать, а потом решили, что дизайн на самом деле вам не подходит, не бойтесь начать все сначала. Иногда это необходимо.

Удачи.

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

PS. Я делал это и делаю до сих пор.