Создание дизайна сайта. От креатива до проектирования. Поделитесь секретами.
- Автор темы Derag
- Дата начала
- Статус
allumino
Писатель
- Регистрация
- 23 Мар 2009
- Сообщения
- 3
- Реакции
- 3
Хотя тут уже много понаписали, добавлю свой вариант.
Первое. ТЗ — одна из самых важных вещей в создании сайта. Если у заказчика нету ТЗ, то составляйте его с ним. Всё должно быть максимально подробно, иначе потом утонете в правках.
Второе, собственно, подготовка. Вникаем в ТЗ, вникаем в суть проекта. Если есть аналогичные сайты — усиленно день-два по ним лазим, выявляя общие черты. Ибо, как известно, большую часть времени "пользователи проводят на других сайтах, а не на вашем".
Т.е. если на сайтах подобной тематики поиск, например, в 90% случаев расположен в правом верхнем углу — юзеры будут его искать именно там. Ну и все в таком духе.
Третье. Проектируем. Ставим сетку, располагаем элементы. Что-то уже можно нарисовать\натехдизайнить. Учитывая, что я работаю по принципу "1 вариант дизайна заказчику, второй если он внятно объяснит мне чем ему не нравится первый", сетка уже меняться не будет, потому ей уделяем максимум внимания. Какой бы красивый сайт ни был — если он будет неудобным, то долго на нем никто не задержится.
Четвертое. Показываем наброски заказчику, корректируем, вылизываем. Если заказчик начинает бухтеть в стиле "там шрифт поменяйте, тут логотип на всю страницу раздвиньте", то обычно он у меня идет лесом. Как вам удобнее так и поступайте, ибо в правках на этом этапе тоже можно утонуть.
Пятое и далее — работа с итоговыми psd. Т.к. я не верстаю и не программирую, это уже меня не касается.
Первое. ТЗ — одна из самых важных вещей в создании сайта. Если у заказчика нету ТЗ, то составляйте его с ним. Всё должно быть максимально подробно, иначе потом утонете в правках.
Второе, собственно, подготовка. Вникаем в ТЗ, вникаем в суть проекта. Если есть аналогичные сайты — усиленно день-два по ним лазим, выявляя общие черты. Ибо, как известно, большую часть времени "пользователи проводят на других сайтах, а не на вашем".
Т.е. если на сайтах подобной тематики поиск, например, в 90% случаев расположен в правом верхнем углу — юзеры будут его искать именно там. Ну и все в таком духе.Третье. Проектируем. Ставим сетку, располагаем элементы. Что-то уже можно нарисовать\натехдизайнить. Учитывая, что я работаю по принципу "1 вариант дизайна заказчику, второй если он внятно объяснит мне чем ему не нравится первый", сетка уже меняться не будет, потому ей уделяем максимум внимания. Какой бы красивый сайт ни был — если он будет неудобным, то долго на нем никто не задержится.
Четвертое. Показываем наброски заказчику, корректируем, вылизываем.
Если заказчик начинает бухтеть в стиле "там шрифт поменяйте, тут логотип на всю страницу раздвиньте", то обычно он у меня идет лесом. Как вам удобнее так и поступайте, ибо в правках на этом этапе тоже можно утонуть.Пятое и далее — работа с итоговыми psd. Т.к. я не верстаю и не программирую, это уже меня не касается.
archiaugur
Постоялец
- Регистрация
- 19 Мар 2009
- Сообщения
- 95
- Реакции
- 6
Вполне согласен со многими здесь высказавшимися,шо главное енто техническое задание на проект, желательно подписанное заказчиком и еще главнее подписанные им эскизы сайта, распечатанные на бумаге. А то бывает, шо через несколько дней заказчик приходит и говорит: поменяйте мне, так шоб было круче, чем у моих знакомых, или проще для моего програмера. Поинтересуйтесь, чем заказчик занимается и есть ли у него какие либо свои наработки, фотки, каталоги техники, недвижимости, продукции которую он собирается рекламировать через сайт. Ведь большинство заказных сайтов делаются для компаний, занимающихся продажей недвижимости, техники, чего либо в реале, и желающих себя недорого подать для как можно болшего количества аудитории. Ищите в сети подходящие по ваше ТЗ сайты, ведь многие уже давно могли сделать чт-нить подобное и тогда вам придется только немного переделать и прекомпановать эти сайты как шаблоны под свои нужды, многие так делают. Енто не плагиат, а копирайт, или ретрайт.
Поддерживаю
Первое и самое главное!
Вы можете сами придумать мега-супер-пупер дизайн - НО он будет мега-супер-пупер для вас а для заказчика элементарно не подойдет цвет (в лучшем случае) и придется все переделывать.
Если нет ТЗ то составьте его сами и получите комментарии у заказчика (фраза сделайте мне красиво = "я не знаю чего хочу, но хочу всего, не зная чего") .
Народ, подскажите как быстрее всего получить схематический дизайн сайта с возможностью подвигать блоки, поэкспериментировать с цветами и шрифтами чтоб потом все детализировать и делать макет в PS.
Есть такая программная возможность? А то в карандаше как-то не хватает цвета
Есть такая программная возможность? А то в карандаше как-то не хватает цвета
alexzander69
Постоялец
- Регистрация
- 27 Май 2008
- Сообщения
- 92
- Реакции
- 46
GFXer
Создатель
- Регистрация
- 11 Июл 2007
- Сообщения
- 14
- Реакции
- 17
Даже добавить больше нечего =)
Если заказ - то обязательно ТЗ, либо с заказчиком сесть и общаясь вместе составить ТЗ. Если удалёнка, сделайте свой бриф на разработку. Обязательно сделайте пункт "Похожие сайты" или "Сайты которые Вам нравятся". В таком случаи, заказчик сам потрудится сделать Вам список конкурентов, что даст понять вам вкус заказчика.
Если для себя - то безусловно с тематики задуманого ресурса. Тут вам бубен в руки и пляшите)
Всё остальное стандартно, как уже писали выше.
Если заказ - то обязательно ТЗ, либо с заказчиком сесть и общаясь вместе составить ТЗ. Если удалёнка, сделайте свой бриф на разработку. Обязательно сделайте пункт "Похожие сайты" или "Сайты которые Вам нравятся". В таком случаи, заказчик сам потрудится сделать Вам список конкурентов, что даст понять вам вкус заказчика.
Если для себя - то безусловно с тематики задуманого ресурса. Тут вам бубен в руки и пляшите)
Всё остальное стандартно, как уже писали выше.
Согласен с allumino по поводу ТЗ.
На себе испытал сделать несколько сайтов без тз:
заказчик сказал - а сделай мне шото такое вот (описал поверхностно)
ну я сделал и потом он мне ещё больше недели говорил - а вот измени это, а вот давай посмотрим как будет смотреться это в другом цвете и т.д. Я уже был готов забить на него не забрав деньги !
Ну если нет ТЗ и хочете просто попрактиковаться то можно его придумать, ведь без тз будете много гадать чего хотите )
поставили задачу - сайт в простых стильных деловых тонах (наугад придумали 3 или 5 основных цветов), прикинули какой будет структура страницы (где меню, где банеры, где контент, где ещё там дополнительные блоки) для начинающего советую полазить по web2.0 страничкам и обратить внимание на оригинальность контента.
Нарисуйте в любом графическом редакторе ваш сайт(не переборщите с графикой). Я рисую не весь, рисую только меню, часть контента ну примерно 50% сайта, остальное итак понятно как будет выглядить, надо понимать где фон а где статический рисунок, чтоб можно было легко сверстать код(бывает нарисую всякого а потом сижу и ломаю голову как написать код так, чтоб оно всё не поехало и растягивалось). Порежте то что вы нарисовали и сохраните в формате jpg, png (советую jpg сжимать процентов на 35-40, внешне картинка не изменяется почти и весет меньше.) картинки которые растягиваются(рамки, беграунды) нельзя сжимать, их надо сохранять в 100% качестве (советую png или gif).
Начинайте верстать сайт. для начала я верстаю структуру (не навожу красоту а просто делаю разметку где будет меню а гдеконтент) всё выглядит грубо, рамки красного цвета чтоб видеть границы блоков, когда довожу до конца структуру начинаю наводить красоту, описываю стили, добавляю графику, заполняю любым тектос для сверки. Обязательно в контенте вставляю текст с тегом <h2> <h1> . . . <b> <a> для дальнейшей работы с типографией ! когда у нас готов внешний вид сайта с контентом менюшками НО не раскрашеным шрифтом(цвет ссылок, обычного текста, текста важных новостей и т.д) !!
Типография - очень важная часть ! я перед этим шагом обычно делаю передышку, потом на свежую голову приступаю !
Для начала я описываю обычный текст(контент), я задаю ему шрифт, цвет, ширину отступа между строк отступ от границ блока в котором находится текст ! потом описываю <h2><h1>.. теги они служат для выделеня заголовков новостей и т.д делаю так чтоб <h2> красиво и ровно смотрелся над текстом материала, отступ цвет, чтоб глаз сразу понимал что это Заголовок а ниже идет статья, описываю даже тег <b> что всё было лучше чем "норма" ведь разные браузеры могут показывать их по разному ! описываю ссылки(их цвет, дикорацию)
Чистовая обработка - Ну на конец смотрю на то что получилось, если вижу что после того как поработал над типографией есть косяки то правлю, исправляю некоторые ошибки, пересматриваю код чтоб небыло опечаток или не закрытых тегов и иду пить пиво )
На себе испытал сделать несколько сайтов без тз:
заказчик сказал - а сделай мне шото такое вот (описал поверхностно)
ну я сделал и потом он мне ещё больше недели говорил - а вот измени это, а вот давай посмотрим как будет смотреться это в другом цвете и т.д. Я уже был готов забить на него не забрав деньги !
Ну если нет ТЗ и хочете просто попрактиковаться то можно его придумать, ведь без тз будете много гадать чего хотите )
поставили задачу - сайт в простых стильных деловых тонах (наугад придумали 3 или 5 основных цветов), прикинули какой будет структура страницы (где меню, где банеры, где контент, где ещё там дополнительные блоки) для начинающего советую полазить по web2.0 страничкам и обратить внимание на оригинальность контента.
Нарисуйте в любом графическом редакторе ваш сайт(не переборщите с графикой). Я рисую не весь, рисую только меню, часть контента ну примерно 50% сайта, остальное итак понятно как будет выглядить, надо понимать где фон а где статический рисунок, чтоб можно было легко сверстать код(бывает нарисую всякого а потом сижу и ломаю голову как написать код так, чтоб оно всё не поехало и растягивалось). Порежте то что вы нарисовали и сохраните в формате jpg, png (советую jpg сжимать процентов на 35-40, внешне картинка не изменяется почти и весет меньше.) картинки которые растягиваются(рамки, беграунды) нельзя сжимать, их надо сохранять в 100% качестве (советую png или gif).
Начинайте верстать сайт. для начала я верстаю структуру (не навожу красоту а просто делаю разметку где будет меню а гдеконтент) всё выглядит грубо, рамки красного цвета чтоб видеть границы блоков, когда довожу до конца структуру начинаю наводить красоту, описываю стили, добавляю графику, заполняю любым тектос для сверки. Обязательно в контенте вставляю текст с тегом <h2> <h1> . . . <b> <a> для дальнейшей работы с типографией ! когда у нас готов внешний вид сайта с контентом менюшками НО не раскрашеным шрифтом(цвет ссылок, обычного текста, текста важных новостей и т.д) !!
Типография - очень важная часть ! я перед этим шагом обычно делаю передышку, потом на свежую голову приступаю !
Для начала я описываю обычный текст(контент), я задаю ему шрифт, цвет, ширину отступа между строк отступ от границ блока в котором находится текст ! потом описываю <h2><h1>.. теги они служат для выделеня заголовков новостей и т.д делаю так чтоб <h2> красиво и ровно смотрелся над текстом материала, отступ цвет, чтоб глаз сразу понимал что это Заголовок а ниже идет статья, описываю даже тег <b> что всё было лучше чем "норма" ведь разные браузеры могут показывать их по разному ! описываю ссылки(их цвет, дикорацию)
Чистовая обработка - Ну на конец смотрю на то что получилось, если вижу что после того как поработал над типографией есть косяки то правлю, исправляю некоторые ошибки, пересматриваю код чтоб небыло опечаток или не закрытых тегов и иду пить пиво )
- Статус