Информация и задание для дизайнера сайтов в компании Tecama.Ru

а) Зарегистрироваться на этом сайте, 

б)  внимательно прочитать эту статью, которая ниже и написать под ней свой комментарий - где вы выразите свое мнение об этой должности и расскажете о себе, 

в)  внимательно прочитать эту статью "Послание к Гарсии" и написать комментарий к ней - доказывающий ваше понимание и мнение по информации, изложенной в статье, 

г)  далее, вы создадите свой собственный макет-дизайн сайта (на произвольную тему или можете получить задание от нас по запросу),

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

 

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

 

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

 

 

 

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

 

Помните всегда о том, что веб-дизайнер должен тесно сотрудничать с верстальщиком, чтобы не случилось различных казусов.

 

Уважаемый дизайнер! Если у вас стоит тридцатидюймовый дорогущий монитор, то это вовсе не означает, что вы должны рисовать макет в 3000 px по ширине. Вы должны понимать – вы пока в меньшинстве. У львиной доли посетителей, пришедших на сайт, разрешение экрана будет 1024 – 1280 px. Здесь существуют некоторые правила и стандарты.

 

Ширина макета указывается в пикселях и должна быть с точностью до одного пикселя, т.е. круглые цифры и никаких там 899 px или 955 px, к примеру. Также это касается всех блоков, которые у нас будут присутствовать в макете: левая, правая колонки, форма авторизации, различные модуля и т.д.

 

Определяемся  с шириной макета основного блока (контейнера) сайта. Обычно ширину макета подстраивают под самое распространенное разрешение экрана. Мои требования к дизайнеру – 1000 px, т.к. распространенное разрешение экрана это 1024 px по ширине. Вычитываем из нее ширину ползунка вертикальной прокрутки – у нас получается 1000 px. Раз вы решили подстраивать под ширину 1000 px (или это указано в ТЗ), то обязательно придерживайтесь этих размеров, а не 1020 px, или 1050 и т.д. Поймите, эти несколько десятков неучтенных пикселей могут повлечь за собой в итоге серьезные последствия.

 

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

 

 

Все слои в макете должны быть тщательно разгруппированы и подписаны адекватными именами. Помните такое правило: «Если один элемент в макете имеет более двух слоев, то его обязательно следует заключить в общую группу». Вот к примеру, на сайте есть различные модуля. У каждого модуля присутствует заголовок. Так вот, заголовок в макете имеет два слоя: сам текст названия и задний фон. Таким образом, мы эти два слоя объединяем в общую группу и называем, например, «Заголовок» или «Title». Данная группа также может лежать в родительской группе с названием модуля, т.е. в группе модуля «Новости» лежит подгруппа «Заголовок новости». Исходя из выше сказанного, должна быть некая иерархия групп слоев. Такая группировка очень упрощает жизнь верстальщику. Также не забываем подписывать сами слои, чтобы не было там никаких “Layer1″ или “Layer2″…

 

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

 

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

 

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

 

 

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

 

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

 

Если в качестве заднего фона используется текстура, то желательно сохранить один повторяющийся фрагмент для верстальщика отдельным файлом в формате jpg, png или gif.

 

 

Веб-дизайнер при подборе шрифтов для сайта должен учитывать следующее: использовать не более трех семейств шрифтов; не использовать нестандартные шрифты в основных блоках контента. У 99% посетителей, вошедших на сайт, могут подгружаться стандартные системные шрифты.  Нестандартные шрифты можно использовать, но делать это нужно осторожно. Какие бывают стандартные шрифты для веб-дизайна можете почитать в интернете – их не много. Можете их выписать и держать в качестве шпаргалки.

 

Нестандартным шрифтом можно оформить те же заголовки модулей, или логотип красивым текстом, можно оформить слоган сайта, можно оформить контактные данные на сайте и т.п.  Также помните, что нестандартные шрифты могут нарушить кроссбраузерность  сайта, т.е. некорректное отображение в различных браузерах.

 

Использовать различные скрипты типа “cufon” для подгонки нестандартных шрифтов крайне не желательно. Помните, никогда не стоит идти на поводу у клиентов. Если клиент хочет супер пупер шрифт, объясните ему, чем это все закончится.

 

Если на в макете используются нестандартные шрифты, то обязательно приложите их отдельно к макету сайта.

 

Размеры шрифта обаятельно указываем целыми числами, размеры типа 19,82 px и тому подобное не допустимы. Никаких трансформаций и издевательств над шрифтом. Если у дизайнера возможностей в этом плане много, то у верстальщика их меньше.

 

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

 

Все текстовые элементы должны указываться без сглаживания, т.е. указываем стандартный шрифт.

 

И последнее, что касается шрифтов – никогда не растрируйте текстовые блоки. За данное деяние вам точно оторвут голову, не в буквальном смысле конечно.

 

 

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

 

 

Сайт это в первую очередь динамичный ресурс, на котором может быть анимация и будут выполняться различные действия. Например, обязательно следует указывать цвета ссылкам, как активных, так и при наведении (даже желательно нарисовать руку). То же касается любых других активных элементов. Это все предусматривает дизайнер в своем макете. Поймите, верстальщик не должен об этом думать.

 

 

Тщательно изучите тех. задание

Ширина основного контейнера сайта минимум 1000 px. Не важно сайт резиновый или фиксированный

Фиксированному сайту не забываем указать задний фон

Все слои в макете должны быть сгруппированы

Не ленитесь отрисовывать каждый элемент, будь то форма авторизации или форма поиска

Использовать на сайте только стандартные шрифты. Нестандартные в умеренных масштабах.

Качественно пройдитесь по макету и доработайте все недостающие элементы. Если это сделает верстальщик, то скорее всего сломает весь макет.

Дизайнер должен тщательно организовать свою работу, не забывая о том, что после него будут работать другие люди.

Подготовить макет для сдачи верстальщику – сохранить макет в формате PSD и скриншот в формате JPEG. Также, желательно нарисовать иконку сайта favicon и watermark для фото.

Не отключать и не удалять направляющие, т.к. с ними будет работать еще верстальщик

Все блоки на сайте должны быть выравнены строго по пикселям, т.е. полпикселя недопустимо.

Чем качественнее нарисован макет, тем качественнее он будет сверстан верстальщиком.

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

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