20:02 КАК СДЕЛАТЬ ДИЗАЙН САЙТА | |
 КАК СДЕЛАТЬ ДИЗАЙН САЙТА?В каком редакторе лучше делать дизайн сайта?Сделать дизайн будущего Интернет-ресурса можно в том графическом редакторе, в котором Вы привыкли работать. Мне, например, удобнее пользоваться программой Adobe Illustrator, хотя большинство дизайнеров, как правило, используют для этих целей фотошоп. Связано это, от части, с тем, что браузеры не отображают векторных изображений. То есть для верстки сайта все графические элементы переводятся в растр. Чаще всего это .jpg. Если нужен прозрачный или полупрозрачный фон - используют .png или .gif. Но большинство дизайнеров пользуются фотошопом не только из-за того, что он является одним из лучших редакторов именно растровой графики, графики, которую понимает html, а так же потому, что эта программа достаточно известна, и, соответственно, большинство желающих стать дизайнерами начинают изучать компьютерную графику именно с Adobe Photoshop. Вот, две основные причины, по которым фотошоп считается самой удобной программой для того, чтобы сделать дизайн сайта. И, если Вы не будете сами верстать свой сайт, стоит пользоваться именно им, потому что html верстальщики привыкли получать исходники в .psd. Хотя, повторюсь, сделать дизайн можно в любом удобном для Вас графическом редакторе. Во-первых, если нам заказали дизайн сайта, необходимо на время забыть о таком понятии, как dpi и о метрической системе. Размеры блоков и вставленных изображений при верстке сайта указываются в пикселях или процентах от ширины/высоты окна браузера. Если размеры в нашем сайте указаны в процентах, такой сайт называют резиновым. Резиновые сайты не всегда удобны. Так что, если Вы не до конца понимаете, что Вы делаете, лучше создавайте дизайн сайта фиксированной величины. Если же Ваш заказчик настаивает на резиновом дизайне сайта, то, прежде, чем сделать дизайн, пожалуйста, очень хорошо подумайте, какие блоки у вас будут растягиваться при увеличении окна, а какие - нет. Отобразить это в дизайне можно следующим образом - сделать несколько файлов с нескольких стандартных рамеров (например: 1280x1024, 1920x1280 и 1024x768), в которых отбразить, как будет выглядеть сайт, в зависимости от разрешения монитора. Написать в приложении к шаблону максимальные и минимальные размеры блоков. Так какой такой фиксированной величины должен быть сайт? Когда мы делаем макет визитки или листовки, мы знаем конечный размер готовой продукции. В деле же с дизайном сайта все немного сложнее. Не все мониторы имеют одинаковое разрешение, то есть количество пикселей по ширине и высоте. И это необходимо учитывать в дизайне. Большинство мониторов имеют разрешение 1024 или 1280 пикселей в ширину. Как правило, на это большинство и равняются. Однако не стоит делать текстовые блоки шире 800 пикселей. Если при разрешении 800 х 600 пикселей мы теряем во внешнем виде сайта - это не страшно. Но когда строка не помещается на нашем мониторе, читать становится крайне неудобно. Лучше всего сделать сайт 1024 пикселей в ширину и добавить в наш макет "свободное пространство" до размера 1280. Сайт в макете может быть выровнен по левому, по правому краю или по центру. С отступами или без. Причем это "свободное пространство" не обязательно белое поле. Оно может быть любого другого цвета или состоять из повторяющихся графических элементов. Как вариант - бесшовной текстуры. Можно, конечно, использовать в качестве фона какое-то неповторяющееся изображение, растягивать его на 100% в ширину и запретить прокручиваться, но это, во-первых - не очень удобно, во-вторых - сайт с таким фоновым изображением получится весьма увесистым и будет долго загружаться. Как сохранять исходник?Исходники лучше всего сохранять с расширением .psd, где каждый графический элемент находится на своем слое. Причем называть слои желательно так, чтобы в них можно было разобраться. Например: "Общий фон сайта", "Фон текстового блока". Слои можно группировать по смыслу. Например, текст и фон, на котором находится этот текст, сгруппировать и назвать эту группу "основной текстовый блок". Или сгруппировать блок ссылок с фоном и назвать группу "ссылки такие-то". В общем, пытайтесь сделать этот psd так, чтобы html-верстальщик не звонил Вам каждые пять минут и не выяснял, что же Вы хотели этим сказать. Слово сочетание "красивый сайт" может легко напугать грамотного веб-мастера. Сайт, в первую очередь должен быть функционален, во-вторую - сайт должен быстро загружаться и быть удобным для пользователей. А "Красота" важна в намного меньшей степени. К тому же, на вкус и цвет все фломастеры разные. Так что научить Вас делать "красиво" вряд ли кто-либо сможет. Создавая новый дизайн, неплохо было бы думать, в первую очередь, о функциональности этого ресурса. И располагать элементы таким образом, чтобы посетитель легко мог найти нужную ему информацию. Так же стоит позаботиться о том, чтобы попавший на сайт пользователь не убежал с него сразу, испугавшись или руководствуясь рвотными позывами. Для этого не стоит спользовать в дизайне много анимированных объектов. Такие сайты напоминают сайты с порнографией, с которых вот-вот на Ваш компьютер полезут ужасные вирусы. К тому же они отвлекают внимание от основного составляющего сайта - текста. Так же не стоит использовать в дизайне различную "няку" вроде миленьких котиков или "кавайных" песиков. Такого хлама навалом в интернете. Постарайтесь придумать что-нибудь поинтереснее. Исключение можно сделать лишь для тех, кто создает ресурс с информацией подобной "Меня зовут Коля, это моя собачка". Таким людям следует сразу отрубить себе руки. Работа с текстомВо-первых, никогда не забывайте о типографике. Цвета текста и фона должны быть максимально контрастными по яркости, основной текст удобочитаемым, а навигация заметной. И не забывайте о том, что если у пользователя не установлен какой-либо шрифт, он будет заменен браузером на шрифт, настроенный "по умолчанию". Это чревато тем, что Ваш сайт много потеряет во внешнем виде. Так что используйте в дизайне распространенные шрифты. Если же Ваш заказчик уперт и настаивает на корпоративном шрифте, эту проблему можно попытаться решить несколькими способами: 1. Убить заказчика. Но это не приносит денег, является нарушением действующего уголовного кодекса и имеет мало отношения к дизайну. 2. Растрировать шрифт и вставить текст картинкой. Однако это не лучше первого варианта. Во-первых: на буквах появятся засечки и читаться это будет с трудом; во-вторых: этот текст не будет индексироваться поисковыми системами и добиться высоких позиций в выдаче будет достаточно тяжело; в-третьих: картинки имеют больший размер и такой сайт будет достаточно долго загружаться. Особенно, если пользователь выходит в интернет через модем. 3. Подгрузить шрифт на компьютер пользователя средствами CSS. Что практически невозможно, потому что вряд ли пользователь будет давать согласие на установку неизвестных ему шрифтов, теряя на это трафик и время 4. Подобрать более распространенные шрифты, похожие на необходимый Вам корпоративный и прописать их по убывающей от более похожего к более популярному. То есть сделать задание верстальщику, в котором он пропишет эти шрифты. Действовать это будет так: если на компьютере нет нужного шрифта, браузер смотрит, на какой его можно заменить, и выбирает первый из списка, который установлен на компьютере. Хотя возникнет проблема, если у заказчика на компьютере нет нужного шрифта. 5. Воспользоваться сервисом Cufon от jquery. Это позволит с минимальными жертвами подгрузить нестандартные шрифты на Ваш сайт. Работает только с Tru Type шрифтами (шрифтами в формате .ttf) 6. Переделать бренд бук компании заказчика и поменять корпоративный шрифт на Arial. Успехов Вам в дизайне!
Интересные записи | |
|
| |
| Всего комментариев: 0 | |