[Асмодиан]

Прекрасно помню себя, когда я задался вопросом: как делаются интернет сайты, и наткнулся на книгу "веб-дизайн для чайников", в которой рассматривались шаги создания "сайта" на MS frontpage.
Ну а что, ведь я же тогда вообще ничего не знал!
И я вижу многих людей, которые приходя сюда, обладают знаниями немногим большими, чем у меня тогда. Некоторые из них даже выставляют работы, на которые без слёз действительно не взглянешь.

Сам я дизайнером так и не стал, так как мне ближе работа программиста - это то, чем я занимаюсь более 10 лет, и последние 2 из них - профессионально. Но развитие одного дизайнера прошло у меня перед глазами. От работ на MS FP, над которыми можно только посмеяться, до профессиональных работ уровня первых страниц фриланса.

Для новичков, которые даже не знают: что и как делать и посвещена эта тема.

Итак, начнём с главного: дизайнер ли вы.
Ну к примеру, я. Я программист, и работы лучше и интереснее я не знаю. Каждый мой рабочий день для меня реально интересен и приятен. Сможете ли вы стать хорошим дизайнером, сможете ли вы разрабатывать дизайн сайтов по многу часов в день, считая данное времяпрепровождение приятным и интересным? если да, то читайте дальше, если нет, то подумайте, что вам действительно интересно. Основное большинство людей, которые считают себя дизайнерами, на самом деле являются веб-программистами или верстальщиками. Думая о создании сайта, они представляют себе процесс создания html - страницы или программирование самого сайта. Разуммется, вы можете быть проф программистом, верстальщиком и дизайнером в одном флаконе, но тогда вы невероятно талантливы. Отличный дизайнер уделяет на свою работу от 10 часов в день и больше. Если же вы занимаетесь ещё и программированием, то 10 часов у вас не получится никак... В общем, для начала сделайте выбор: готовы ли вы забить на программирование и с упоением заняться дизайном. Если да, то советы для начинающих:


Инструментарий:
Когда вы освоитесь в дизайне, вашими инструментами будут разнокалиберные графические редакторы, но для того, чтобы понять специфику веб-дизайна, для начала лучше вам поупражняться также и в html с css, чтобы понять ограничения, накладываемые вебом на дизайн. Итак, джентельменский набор (один из вариантов).
- Adobe Photoshop CS3 или
Adobe Photoshop (ниже CS3) + Adobe ImageReady
- (Macromedia / Adobe) Dreamwaver (лучше чтоб не ниже 7-го (MX))
Да и хватит.

Разумеется, тут некоторые начнут возражать: мол почему именно Photoshop, ну и я с ними соглашусь. Главное, как выполнена работа, а ни на чём. Но сразу скажу.
Для создания дизайна сайта, вам нужен именно профессиональный графический редактор! Paint никак не подойдёт, ни для чего! И DreamWaver с FrontPage - это программы для вёрстки полностью нарисованного сайта - пока дизайн не готов, их вообще открывать не надо.

Если вы не сильны в графических пакетах, то возможно вам для начала стоит порисовать на (Macromedia / Adobe) Flash. Она заметно проще, и функционал у неё для новичка неплох, но она может далеко не всё.

Если же вы сразу ориентируетесь на то, чтобы стать профессионалом, то всё же рекомендую Adobe Photoshop, так как в веб-дизайне это промышленный стандарт (и не спроста он стандарт)!

Этапы или путь к совершенству
Ну, первый этап я уже указал. в программе dreamwaver/frontpage/блокнот дизайн не создаётся.
Дизайн сайта - это изображение всех уникальных страниц сайта.
Как правило для новичка достаточно одной страницы. И весь сайт будет однотипен. Страницы будут похожи друг на друга, отличаясь лишь содержимым.
Стандартная работа - это 2 страницы: главная страница сайта и вложенная (то есть главная страница отличается от всех остальных, а остальные друг от друга отличаются лишь контентом).
Пример (возможно не самый удачный) - http://www.salonfermata.ru
И весь дизайн полностью сначала нужно нарисовать в графическом редакторе. Пример - http://www.daon.ru/index.php?page=fo...e=item&item=15.

Подход паззла, когда на программах типа dreamwaver создаётся разметка страницы, а потом в неё впихивается содержимое (каждое изображение рисуется отдельно - непременим даже для зала дебютантов).

Добавлено через 21 минуту

2 шаг -изучение инструментария. Данное изучение лучше всего проводить по книгам, НО нужную книгу найти сложно. На самом деле в любом уважающем себя книжном есть целая полка, забитая книгаи по Photoshop, но скорее весго все они (ну кроме 1-2) - будут тупым пересказом (да ещё и неполным) Help-а по Photoshop. После 30-го урока рисования квадратика вас затошнит, уверяю.
Лучшее, что я видел, это серия "Трюки и эффекты". Есть Трюки и эффекты для Photoshop, Corel, Illustrator - все эти книги являются замечательным пособием, в котором вы узнаете не только инструменты программы, но и для чего они, и что с помощью их можно сделать и что обычно делают!
После прочтения такой книги и самопрактики самое правильное - искать уроки Photoshop в интернете. Там будут тоже всевозможные методы и подходы, но уже более сложные и интересные.


Новый шаг - приобщение к вебу.
Итак, получив немного практики в графических редакторах, следует поучиться рисовать не что-нибудь - а именно сайты. Как это сделать - а порисуйте немного с натуры (ну а как художники учаться).
Поищите в инете сайты, которые вам понравились, которые вы считаете верхом проффесионализма.... И попробуйте их срисовать! Да, для начала тупое копирование (ну не Copy-Paste, естественно). Такое занятие вас будет очень быстро обучать особенностям и подходам. Пытаясь и ковыряясь, вы прочувствуете, что есть хорошо, а как делать плохо.
Сойдёт даже нелюбимая на форуме тема - перерисовка шаблонов (слава богу диск с шаблонами купить не сложно).
Но учтите, что вы должны НЕ делать сайт из шаблона, а перерисовать шаблон. Почему шаблон, да потому что на диске идёт графический макет на Photoshop, в котором вы можете посмотреть, как это выглядит изнутри. Но не стоит заострять внимание на шаблонах, так как долгое их копирования даст неприятный отпечаток на вашем стиле . Лучше копировать "Живые" сайты.

Разумеется, вся такая работа - она лишь для самообучения, такие работы не стоит кудато выставлять...

Ну и последнее - аккуратность, блин.
не забывайте об аккуратности ваших работ. Самый простой способ проверить вашу аккуратность и получить советы по её совершенствованию - выставиться на этом вот форуме. Аккуратность приходит с практикой, стиль тоже!

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


PPS. Ну да, чуть не забыл. При этом при всём не забывайте рисовать и придумывать своё, а то всё учиться и учиться без результатов - это неинтересно, всёже

[Iriska]

Действительно полезное разъяснение, совсем недавно не могла понять, что значит рисовать сайт и как происходит верстка ( впрочем, что это такое тоже было загадкой). Еще б также просто и доходчиво про движки, здесь полный мрак...
В моих начинаниях http://dezigner.homepictures.ru/ обязательно все отразится рано или поздно.

[lordelis]

По-моему ссылка на сайт была абсолютна излишней. Так как нет ни дизайна, ни контента как такового - чистый 0!

[Асмодиан]

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

[Асмодиан]

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

Рекомендации по шрифтам:
Шрифт текста:
шрифт 11px для промо-сайта или сайта с небольшим содержанием контента.
шрифт 12px для сайта, ориентированного на чтение (блоги, форумы, итд).
больше 12px, или bold-шрифт - сайт извращенцев, если только подобный большой шрифт не используется на специальизированных промо сайтах и является фишкой дизайнера. И то данный подход я бы назвал оооочень редким

Заголовки:
Как правило выделяются, относительно шрифта текста либо большим шрифтом либо bold-ом. Редко для выделения заголовков используется курсив.
Заголовки часто деляться на уровни: те заголовок 1, 2, 3, 4,.. уровня.
Заголовок последнего заданного вами уровня максимально приближен к основному тексту, и иногда отличается лишь цветом (например)
Но вариант, когда заголовок 1-го уровня достигает размера 24px и больше - это только в случае, когда заголовок 1-го уровня является заголовком страницы, или орять же как супер фишка дизайнера.

Шрифт на отдельных элементах дизайна:
Если это шрифт в каких-нибудь информационных блоках, то как правило он равен шрифту контента +-1px.
Отдельные элементы, особо требующие внимания к себе (например телефон для связи), можно выделить шрифтом большого размера...
Шрифт навигации же (кнопок) как правило не превосходит заголовок последнего (самый маленький) уровня. и колеблится в интервале (шрифт контента, шрифт контента +2px)
Использование разных шрифтов на однотипных элементах (кнопки) недопустимо.

Начертания шрифтов:
Для начала лучше использовать следующие начертания шрифтов:
Arial
Virdana
Tahoma

Эти шрифты как правило легко становяться на любой сайт. И неплохо смотряться.
Можно также использовать Times new Roman, но зачастую он портит сайт, и использовать его нужно осторожно
На моей практике я видел лишь 2 приличных примера его использования:
- в качестве заголовков страницы (причём все остальные шрифты - Arial)
- Только для контента, и небольшого размера.
Также стоит помнить, что Times визуально выглядит немного меньше, чем другие шрифты

Смешение начертаний шрифтов на странице допустимо, но нетривиально.
Самый простой пример - использования больших заголовков (1 или1 и 2 уровня) другим начертанием, нежели всё остальное.
Также иногда используются отличные от контента шрифты для неконтентынх элементов: верхние кнопки меню, телефоны и пр.
- при этом зачастую используются необычные (фигурные) шрифты.

Использование шрифтов других, нежели
Arial
Virdana
Tahoma
Times New Roman
лучше избегать, так как у клиента их попросту может и не быть (Mac напимер)


Если у вас найдуться дополнения или опровержения, пишите

[Nell]

похоже появление моего сайта стало последней каплей терпения в вашем форуме.....

[letayushaya]

Очень интересно - советы по дизайну дает не дизайнер, а программист. ))
Может, кому-то из нулевых новичков это и будет полезно, но на самом деле это - советы не по дизайну, а по чему-то более близкому к верстке (особенно в последнем сообщении).

Пы.Сы. Пишется Verdana, а не Virdana.

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

[Асмодиан]

Я просто видел это всё со стороны: как дизайнер - новичок, делающий нипойми чего на MS Frontpage превратился в профессионала. И поэтому есть что посоветовать.
Первый пост относиться исключительно к дизайну. По вёрстке там ничего нет.
Да, это советы именно новичкам. То есть тем людям, которые хотят начать, но незнают как это сделать. В принципе всю данную ветку я этому и посвятил. Также я даю советы и по тем ошибкам, которые нахожу в выставляемых работах. Но это тоже - для новичков.
Насчёт последнего поста моего - позвольте с вами не согласиться: набор шрифтов задаёт именно дизайнер, верстальщик же просто создаёт css на основании того, что придумал дизайнер. Я же не описываю: как это реализовать в css - так что это полностью посвящено дизайну.

[Deli]

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

[letayushaya]

Сообщение от Makarenya

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

Да, я в общем-то не против, если заметил. ) Ну, удивило меня, что тему для начинающих дизайнеров забацал программер, но, в самом деле, чего не бывает, почему бы и нет, коли сами дизайнеры не сподобились. )
"Набор шрифтов задает именно дизайнер"... Ох, это в идеале, наверное! А на самом то деле... Ни разу за всю мою богатую верстальную работу мне дизайнеры не давали четких указаний относительно шрифтов. Хорошо, если эти шрифты были понятны из их макетов. Но частенько там приходилось их менять, так как дизайнеры не утруждали себя мыслями о том, что есть стандартные шрифты Винды, а есть те, которые стоят только на их компах. )
Так что для меня лично это упоминание размеров шрифтов - явно относится к верстке.
Хотя тыкать носом дизайнеров в шрифты - надо, надо и еще раз надо! Ибо не фиг. ))
Плюс напишу то, что с самого начала цепануло. Шрифт в пикселях (px)? Или в пунтках (pt)? Похоже, все-таки пункты имелись в виду касательно Фотошопа.
Также тогда надо упомянуть и про другие не фиксированные единицы измерения размера шрифта. Так частенько для большего удобства визуального отображения размер шрифта указывается в процентах. Меньше зависимости от расширения монитора. Ну, это уже для верстки.

Раз уж про шрифты зашла речь, то начинающим будет полезно знать перечень русскоязычных шрифтов (входящих в стандарт Windows XP), которые можно безболезненно использовать для текстов и заголовков:
Arial, Arial Black, Arial Narrow, Book Antiqua, Bookman Old Style, Century Gothic, Comic Sans, Courier New, Franklin Gothic Medium, Garamond, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif, Monotype Corsiva, Palatino Linotype, Tahoma, Times New Roman, Trebuchet MS, Verdana.
Полный перечень смотрите здесь: http://chebykin.livejournal.com/9352.html (очень показательная табличка).

Сообщение от Nataliya

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

Наталья, ну, не надо кусаться. )) Кто я - в профиле написано. И ссылка на наш сайт - тоже там есть. Все путем, давай жить дружно, как завещал нам кот Леопольд.