Как создать макет сайта?

Question

[Александр Шилов]

Хочу заняться серьезно front-end разработкой, но вот в чем беда - абсолютно не умею создавать макет сайта, по которому в дальнейшем можно будет верстать сайт.
Посоветуйте пожалуйста:

• Книги для создания красивого макета сайта;
  
• Программы для Linux Ubuntu, где можно спроектировать макет на подобии Adobe Photoshop в Windows;
  
• Поделитесь знаниями, что еще необходимо знать для этого, если необходимо сделать всего 2 - 3 проекта самостоятельно.
  

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

Answer 1

[Андрей Б.]

Начинать нужно не с красивых макетов, а с азов верстки и понимания работы браузера в целом.
Красивых макетов в сети полно.

Хочу заняться серьезно front-end разработкой
...
В дальнейшем не планирую этим профессионально заниматься

Это вы про дизайн говорите или про front-end? Если второе - ищите фрилансера для своих проектов

Comments

[Александр Шилов]

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

Answer 2

[McBernar]

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

Из софта для Убунту — Gimp. По-моему, другого нет.

Чтобы красиво и правильно рисовать — к сожалению, недостаточно прочитать одну-две книги. Нужны годы практики и гора теории вместе с опытом. Все как с кодом, ничем не отличается.

Comments

[Александр Шилов]

У данного направления имеется целая философия?

[McBernar]

Александр Шилов: ну вы просто откройте любой графический редактор и попробуйте нарисовать что-нибудь.

Вот небольшой перечень того, что нужно уметь, чтобы делать неплохие сайты:

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

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

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

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

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

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

7. Заодно есть куча графических приемов. Которые можно впитать только с опытом. И которые подмечаешь тоже только с опытом.

8. И никто не отменял владение инструментом. Нельзя верстать, не зная тегов. И рисовать тоже нельзя, не зная редактора.

Поэтому, да — это целая философия, как и в любом другом деле. Если бы это было не так — в Москве опытный дизайнер не получал бы 120-140 тысяч рублей.

Answer 3

[chelkaz]

В первую очередь думайте не о красоте, а о удобстве. Не изобретайте велосипеды, открывайте самые популярные сайты крупных компаний по нужной тематики и помните, там вливают огромные деньги на статистику, юзабилити, СТР и прочее, так что вам нужно брать самое лучшее. Можно сидеть 3 ночи и пробовать сделать margin-top 5 или 15 пикселай и подбирать цвета без устанки пока голова не опухнет, но по сути, это из пользователей никто не оценит и не заметит. Спросите у любого знакомого, какие кнопки в VK прямоугольные или закругленные) И посмотрите кто что скажет, хотя ежедневно им пользуются, а там border-radius 2px. Потому что плевать всем на это, главное что бы кнопку видно было и она нажималась.

Answer 4

[Igor Vakulenko]

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

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

Answer 5

[Igor Vakulenko]

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

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