Сделать сайт сегодня может сделать практически каждый желающий, умеющий более или менее пользоваться интернетом, а так же владеющий базовыми навыками верстки. Этому способствует множество инструментов, которые позволяют упростить процесс создания сайтов, использующие некоторые готовые прототипы шаблонов, конструкторы и т.д. Однако есть один нюанс, во-первых, вы ограничены возможностями данных инструментов, во вторых, уникальность. Говоря об уникальности, то если вы занимаетесь или хотите заниматься этим более серьезно, то одних готовых конструкторов и шаблонов вам рано или поздно станет мало, и вы естественно придете к тому, что вам нужно будет создать что-то своё, уникальное, качественное, продуманное. Вот здесь в роль вступают ваши навыки и возможности.
На самом деле нет жестких правил и стандартов, или говоря иначе как правильно и как не правильно, но в процессе обретения опыта у вас в багаже знаний будет некий набор правил, который существует только формально, но именно он вам позволяет делать хорошие вещи, и избежать в последующем косяков, каких можно наклепать, будучи имея малый опыт.
Веб-студии часто придерживаются правил, которые регламентированы внутри компании относительно проектирования сайтов. Это хорошо тем, что когда в компании появляется новый человек, то для него это может послужить хорошим подспорьем, и начать работать с проектами с меньшей амплитудой погрешности, и так называемым быстрым вхождением в «рабочую калию».
Данный пост послужит хорошей памяткой для начинающих специалистов в этой сфере деятельности. Итак, мы решили проектировать сайт, и дошли до этапа создания прототипа шаблона, с чего же начать.
Семь раз отмерь, один раз отрежь
Вспомните, так нас учили в школе, вот это правило работает и в сайтостроении. Не беритесь делать макет на компьютере, возьмите чистый лист бумаги и карандаш. На бумаге вы можете наложить то, что задумали и уже должным образом представить себе, куда разместить блоки, элементы графики, и т.д., и прорисовать какие-либо детали. Проделайте это дело со всеми типами страниц сайта, у вас появиться черновик, с которого вы уже будете переносить на компьютер.
Придерживайтесь модульной сетки
Относительно модульной сетки мы размещаем основные блоки и элементы, таким образом, модульная сетка образует каркас, через который проходят все страницы сайта. Придерживаться модульной сетки является хорошим тоном разработки макета проектов. Кроме того модульная сетка играет значительную роль в придании интерфейсу целостности сайта, некому внутрисайтовому порядку размещения элементов, а самое главное улучшенному восприятию интерфейса сайта пользователем. Стремление к интуитивно-понятному интерфейсу является одной из главных задач разработки макета.
От абстракции к детализации
Такой метод используют многие художники, и получается хорошо. Это применимо и в проектировании эскиза сайта. Вы рисуете общую картину представления интерфейса сайта, согласно нашему правилу мы получаем абстракцию того чего хотим, после чего нам следует прорабатывать какие-либо детали, это мы будем называть детализацией. Так достигается хорошая связка всех элементов интерфейса сайта, поэтому можно взять на вооружение.
Адаптация под мобильные устройства
Современный сайт должен быть адаптирован под мобильные устройства. Интернет сегодня имеет масштабы больше чем вчера, а завтра это повториться снова. Иными словами индустрия развивается, и в быт современного общества крепко вошли мобильные устройства, такие как телефоны, планшеты, и т.п., доля которых сегодня составляет значительную часть. Это говорит о том, нужно считаться с этими обстоятельствами, и по возможности делать интерфейс не только на десктопные компьютеры, но и на мобильные устройства.
Масштабируемость в пределах интерфейса
Ещё одна особенность, которую следует взять, как привычку — это предусматривать возможность увеличения объема данных на сайте. Когда сайт создается – мы обладаем базовым набором данных для сайта, возможно, он не так мал, но следует помнить и то, что эти объемы могут увеличиваться в десятки, в сотни, в тысячи раз. Как правило, элементы меню, навигации, и прочие компоненты должны быть предварительно продуманы под такие объемы данных.
Выдержка цветовой палитры и шрифтов
Известно, что цветовая палитра, а так же шрифты на сайте способны в значительной степени влиять на восприятие сайта пользователем. Определитесь с основным набором палитры цветов для сайта. Выберите один или несколько шрифтов, которые вы будете использовать на всем сайте. Эти цвета и шрифты будут основной составляющей интерфейса сайта, постарайтесь выдержать данный стиль на всех страницах, это создаст хорошее восприятие сайта, а так же его целостности. Для хорошего примера, возьмите какую либо книгу, и посмотрите, как там выдержан стиль. Заголовки, текст, сноски, и т.д. всё выдержано одинаково в одном стиле на протяжении всей книги. Люди, создающие книги знают об этом не мало, и у них есть чему поучиться.
Механика управляющих элементов
Здесь вам следует продумать то, как будет выглядеть и реагировать на события управляющие элементы сайта, к ним можно отнести ссылки в тексте, постраничная навигация, табы, элементы управления галереей, чекбоксы и т.д. Эти элементы важная часть интерфейса, и поэтому следует отнестись к этому с должным вниманием. Передать понимание, что происходит с управляющим элементом на момент воздействия на него пользователем очень важно. Продумывать эти вещи следует на этапе проектирования дизайна сайта. Помните, среднестатистический пользователь привык видеть ту или иную реакцию при воздействии на управляющие элементы, будь то кнопка, выпадающий список, и т. д. А это значит, что нужно быть аккуратнее со спец. эффектами дабы не ломать логику понимания происходящего с этими элементами у пользователей. Хорошей практикой так же является разделение ссылок по типам, к примеру, на многих сайтах существуют так называемые псевдо-ссылки, которые открывают/закрывают какой-то текст без перезагрузки страницы, такие ссылки привычно обозначают пунктирным подчеркиванием. Это привычно пользователю, потому что он уже с этим сталкивался на других сайтах, а значит, первое восприятие управляющих элементов будет ему более понятно.
