Скрипты

coincompare-v1-4-мониторинг-статистики-криптовалют CoinCompare - это веб-приложение PHP, которое отображает общую информацию, интерактивные исторические диаграммы для более чем 1700 криптовариантов. Он...
josh-шаблон-для-разработки-на-laravel Josh Admin - это шаблон для разработчика, основанный на Laravel 5. Создайте ваш следующий проект на Laravel. Используйте эту тему и сохраните свое...
social-network-система-социальных-сетей Социальная сеть - PHP Social Networking System - мощный PHP-скрипт, разработанный, чтобы позволить вам создать свою собственную социальную сеть! Он...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Основные аспекты при создании дизайна сайта

Key-aspects-of-creating-a-site-design

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

В каком графическом редакторе лучше рисовать дизайн сайта?

Вы можете проектировать ваш будущий сайт в любом графическом редакторе, в котром вы привыкли работать.
Лично для меня, например удобно использовать Illustrator, хотя большинство дизайнеров стараются использовать Photshop для этих целей.
Это частично связанно с тем, что браузеры не отображают векторные изображения.
В результате в процессе подготовки макета сайта, все графические элементы преобразуются растровые, это чаще всего JPG.
Однако если вам нужен прозрачный или полупрозрачный фон, можно использовать PNG.
Но большинство дизайнеров используют Photoshop не только поэтому, а потому что эта программа достаточно известна, и большинство желающих стать дизайнерами, как правило начинают изучение компьютерной графики с Фотошопа.
Эта программа имеет все необходимые инструменты для раскройки уже нарисованного PSD макета для дальнейшей его верстки на HTML.

Какой использовать размер, чтобы сделать сайт?

Во-первых, нужно забыть такое понятие как dpi или метрическая система.
Размеры блоков и вставки изображений на сайте указаны в пикселях или процентах (ширина и высота) окна браузера (или родительского элемента).
Если размеры на вашем сайте являются определёнными в процентах, этот сайт называется адаптивным.
Адаптивные сайты весьма удобны, ведь сайт одинаково хорошо выглядит на любых экранах, но прежде чем делать адаптивный дизайн надо хорошо подумать какие блоки будут растягиваться при увеличении окна, а какие нет.
Вы можете поступить следующим образом, создать несколько файлов с разными размерами (например, 1280×1024, 1920×1280 и 1024×768), которые наглядно покажут, как сайт будет выглядеть в зависимости от разрешения экрана.
Когда вы делаете, например макет визитки или баннера, вы знаете конечные размеры.
Но в случае с дизайном сайта дела обстоят немного сложнее.
Потому как все мониторы имеют разное разрешение экрана, то есть количество пикселей по ширине и высоте, и это должно быть учтено в конструкции дизайна.
Большинство мониторов на данный момент имеют разрешение 1280 или 1920 пикселей.
Как правило мы всегда опираемся на большинство. Но не делайте текстовые блоки больше 800 пикселей.
Когда мы имеем разрешение 800 на 600 пикселей, ты теряем внешний вид сайта, но это не так страшно.
Вот когда строка не помещается на нашем мониторе, читать текст становиться очень неудобно.
Лучше сделать сайт 1024 пикселя в ширину и добавить в макет немного свободного места до размера 1280, и выровнять его по центру.
Свободное место по краям, это необязательно белое поле, вы можете залить его другим цветом или заполнить повторяющимися графическими элементами (бесшовные текстуры).
Вы также можете использовать неповторяющиеся фоновые изображения и масштабировать их до 100% ширины и отключить прокрутку.

adaptive

 

Как сделать красивый дизайн сайта?

Фраза красивый дизайн может легко напугать грамотного вебмастера.
Сайт в первую очередь должен быть функциональным, во вторых сайт должен быстро загружаться и быть удобным для пользователя.
Понятие красота, как правило, менее важно. Кроме того все люди разные на вкус и цвет.
Таким образом, вряд ли кото сможет научить вас как сделать, абсолютно красивый дизайн для всех.
Создавая новый дизайн было бы неплохо подумать, прежде всего, о функциональности сайта.
Разместить элементы таким образом, что бы посетитель мог легко найти нужную ему информации.
Надо заботиться о том, чтобы пользователь, пришедший на сайт не убежал сразу испугавшись.
Для этого не надо использовать множество анимированных объектов в дизайне, такие сайты похожи на порнографические, с которых вот-вот полезут ужасные вирусы на компьютер.
Кроме того такие элементы отвлекают внимание от основной части сайта, текста.

typography

 

Работа с текстом.

Некогда не забывайте о типографике, цвета текста и фона должны быть контрастными и яркими, основной текст должен быть читабельным, а навигация заметна.
Не забывайте, что если вы использовали необычный шрифт, которого может не быть на компьютере пользователя, это создаёт риск что ваш сайт будет неправильно отображаться и потеряет внешний вид.
Так что используйте обычные шрифты в дизайне.
Конечно, есть способы, что бы использовать необычные, экзотические шрифты в дизайне сайта.
Вы можете растрировать текст и вставить его как изображение, но этот способ не всегда приемлем, а также поисковые системы не смогут индексировать такой текст.
Можно использовать CSS для загрузки шрифта на компьютере пользователя, хотя он вряд ли разрешит загрузку, и наконец, можно изменить шрифт с помощью jQuery Cufon.

  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...