Блог Eлены Изотовой
Как продавать свои знания и опыт в интернете,
зарабатывая на этом больше, чем твой начальник?

Как избежать ошибок при создании макета сайта

Автор: / Дата: в 10:51
Блог Eлены Изотовой

Как избежать ошибок при создании макета сайта

Здравствуйте, дорогой читатель. Как я понимаю, вас интересует следующий вопрос: «Как сделать макет сайта?» и именно поэтому вы пришли сюда. Тогда не буду тратить ваше драгоценное время, а скорее поделюсь своими знаниями и опытом, чтобы помочь вам найти ответ на поставленный вопрос.

Какие понадобятся инструменты

Единственное, что вам придется найти – photoshop. Эта программа создана не только для корректировки изображений, но и помогает создать довольно интересный макет вашего планируемого интернет ресурса. Конечно, можно использовать и другие приложения, однако, для работы с ними потребуются дополнительные знания. Я понимаю, что не каждый, из читающих мой обзор, владеет программированием, поэтому не буду мудрить, а предложу довольно простую методику сотворения дизайна.

Что еще нужно, для создания макета интернет ресурса? Конечно же, определенная тематика и идея. Вы должны понимать, что дизайн сайта – это то, что делает его уникальным, интересным, функциональным. Поэтому не торопитесь хвататься за первые шаблоны, попавшиеся вам на глаза. Их вы можете использовать в качестве некой платформы, на основании которой и будете разрабатывать свой макет. Что это значит?

Например, вы планируете создать интернет ресурс туристической тематики. Какой дизайн вы бы выбрали? Естественно, что на сайте должны присутствовать манящие пейзажи или фотографии с известными достопримечательностями и т.д. Плюс, необходимо предоставить будущим интернет пользователям своего рода навигационное меню, чтобы они могли спокойно передвигаться по сайту. Это понятно?

maketПолучается, что для того, чтобы создать макет сайта нужно:

  • время;
  • желание;
  • готовый план будущего сайта;
  • специальная программа (фотошоп).

 

Ошибки при создании макета

Перед тем, как начать рассказывать последовательность сотворения макета, я хочу поделиться с вами рекомендациями, которые упростят работу:

  • Не приступайте к творению в программе без имеющегося под рукой наброска. Для этого вам нужно самостоятельно распланировать рабочую область или посетить просторы интернета с целью подпитаться идеями и получить вдохновение.
  • Используйте только web-формат при создании файла. Это действие упростит дальнейшую работу (вам не придется рассчитывать сантиметры и миллиметры при передвижении некоторых блоков по макету). Поэтому не торопитесь сразу кликать по клавише «Создать».
  • Обязательно корректируйте размеры будущего макета, выбирая высоту, ширину создаваемого файла. В противном случае, ваш макет может не так смотреться на сайте (вы заранее определяете области для будущей рекламы, положения меню и т.д.).
  • Обязательно сразу после создания файла, выставляйте направляющие, а только потом приступайте к творчеству. Это делается для того, чтобы вы имели четкое представление о структуре своего будущего ресурса.
    gotovyje-makjety-sajtov
  • При создании макета обязательно используйте сетку. Многие говорят: «А зачем эта головоломка и дополнительная рутина?», но вот те, кто «съел на этом собаку», теперь плачут. Почему? Да все потому, что при просмотре интернет ресурса на компьютере, никаких проблем не возникает, а вот как только гость входит на сайт с мобильного телефона или планшета, сразу начинаются неполадки (появляются пустоты, текст съезжает и т.д.).

 

Хотите, чтобы ваш ресурс выглядел идеально всегда? Не ленитесь учесть рекомендации, данные в этом обзоре.

  • Старайтесь не забывать о том, что интернет- ресурс отличается от печатных изданий, поэтому старайтесь максимально использовать различные варианты ссылок (активные, скрытые и т.д.).
  • Не забывайте о том, что вам придется выставлять тексты на интернет- ресурс, а это значит, что для них нужно подготовить определенное место. При этом не забывайте учитывать примерный шрифт, который вами задуман и длину заголовков. Это нужно для того, чтобы во время работы ваш ресурс не терял своей задумки (например, для заголовков вы нарисовали облако, следовательно, они должны располагаться только там и нигде больше). Это понятно?

 

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

maket-dlya-sayta

Виды макетов

Как вы уже заметили, я заострила ваше внимание на выставлении ширины будущего макета. Это нужно для того, чтобы облегчить дальнейшую работу и предоставить будущим посетителям онлайн ресурса полноценный сайт. Такой макет называется с фиксированной шириной.

Он имеет определенный минус – у читателей с устройств, размер которых не соответствует  разрешению 600-800 пикселей, будут возникать проблемы с ознакомлением материала, размещенного на данном ресурсе. Однако, вы должны понимать, что в таком случае, посетители с компьютера будут довольны сайтом.

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

Если это вам не подходит, то попробуйте остановиться на адаптивном резиновом макете. Он отличается тем, что в настройках не задается ширина файла (можно просто поставить 100% и наслаждаться тем, что шаблон займет все выделяемое для него место). Учитывая этот факт, работать с таким макетом довольно сложно. Почему? Да потому, что мы люди, жадные до свободного места (нам хочется заполнить все пространство), а результатом этого становится перегруженность онлайн- ресурса.

Это выглядит так, как будто на гостя, только вошедшего на сайт, вот-вот упадет стойка с книгами, журналами и т.д. Этот наглядный пример показывает вам, что лучше оставить место для свободы и сделать сайт легким, нежели взгромождать туда «тяжелые старинные деревянные шкафы». dizayn

Рецепт изготовления макета

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

Второе действие, хотя его можно было сделать и первым – сделать своеобразный набросок планируемого дизайна сайта. Почему я это говорю? Потому что при составлении макета, вам нужно будет понимать: какие блоки нужны, а какие нет, что добавить, как повернуть и т.д. Это просто невозможно сделать, не имея под рукой своеобразный шаблон.

Когда все готово, можно приступать к творчеству:

  1. Создаете файл (web с определенными размерами).
  2. Выстраиваете направляющие.
  3. Выбираете фон (для начала я рекомендую сделать белым, а вот уже в конце – добавить красок).
  4. Используйте линейку для разлиновки созданного пространства. Вот здесь-то вам и понадобится план будущего сайта.
  5. Вставляйте логотип, иконки социальных сетей, заголовки меню и т.д. Только не забывайте работать аккуратно и периодически производить сохранение наработанного материала.
  6. Любите свои идеи, фиксируйте их на бумаге и тогда вы сможете создать не только уникальный, но и полезный, красочный и многофункциональный ресурс.

devushka-s-noutom

Для тех, кто хочет создать блог, получить пошаговое руководство по созданию макета и научиться зарабатывать на своей детище, я советую записаться к Александру Борисову в «Школу блоггеров». Все дело в том, что автор очень подробно раскрывает важность каждого шага, проделанного вами, дает понять необходимость осуществления той или иной операции, что непременно необходимо новичкам.

Несомненным плюсом является тот факт, что Саша принимает на свои тренинги и тех людей, которые уже имеют личные ресурсы, дает им консультацию, помогает скорректировать недочеты и т.д. Другими словами, данное обучение – это не просто набор вебинаров, а индивидуальный подход к каждому участнику обучающего мероприятия.

У вас остались вопросы по рассматриваемой теме? Задайте их мне, оставив комментарий под обзором. Если вы хотите поделиться полученными знаниями со своими коллегами, то можете смело кликать по клавишам социальных сетей, находящимися чуть ниже. Совершив всего пару кликов, вы заметите в своей ленте новостей ссылку на мой блог.

На этом все, буду рада встретиться с вами вновь, поэтому говорю вам: «До свидания, до новых встреч мой дорогой читатель».

С уважением, Елена Изотова.

1 звезда2 звезды3 звезды4 звезды5 звезд (1 голосов, средний: 5,00 из 5)
Загрузка...
Добавить комментарий
Имя*
Mail*
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: