ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Гайды и уроки по вебдизайну » Как сделать дизайн форума/сайта? Все о создании своего дизайна.


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

Сообщений 1 страница 3 из 3

1

О статье
Старую версию статьи вы могли видеть у нас на форуме: Как сделать дизайн форума? Все о создании стиля на примере Mybb форума
К сожалению, со временем некоторая информация потеряла актуальность, к тому же были потеряны картинки.

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

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

Если вы хотите поддержать и смотивировать меня на скорейшее создание этого опуса, вы можете ЗАДОНАТИТЬ на кофе, шоколадку и нормальный микрофон (для видосов).

PS: За копирование статьи на другие ресурсы БЕЗ ссылки на источник откушу жопу! Будьте людьми, в благодарность за труд хотя бы не копипастите это без ссылки!


Оглавление

Начало разработки дизайна

Создание макета

0

2

Начало разработки дизайна
Как запланировать проект дизайна, какие ошибки допускают новички.

Самые важные задачи дизайна
Основная проблема новичков в сфере вебдизайна - концентрация на стандартных шаблонах, попытки понатащить к себе лишнее и ненужное (увиденное на других сайтах), а также желание срочно продумать цветовую гамму (а не шаблон).
Проблема возникает потому, что в голове новичка "дизайн" - это "красота сайта". На самом деле "дизайн" - это прежде всего ЮЗАБИЛИТИ: то есть удобный ИНТЕРФЕЙС для работы с сайтом/форумом.

Что будет удобно, а что - нет, зависит от информации, которую должны содержать страницы (или наоборот - не должны содержать) и от тематики ресурса.
Касательно тематики сайтов момент продумывания шаблона еще более-менее понятен новичкам, но на форумах с этим большая проблема. С точки зрения дизайна, форумы тоже бывают разные: форумы общения, форумы а-ля "блоги", форумы для публикации статей и гайдов (как наш), ролевые игры, форумы для пользователей мобильных устройств и т.д.
Поэтому просто открывать другие сайты/форумы и брать понравившийся шаблон для себя (просто меняя цвета и картинки) - это действие нуба, а не профи.

Для начала дизайнеру нужно определиться со следующим:
1. какой контент содержат страницы и как лучше его разместить
Это касается стандартного функционала движка. Например, в интернет-магазине есть вывод товаров, категории товаров, контент на странице товара, корзина и т.д. На форуме есть список категорий, список топиков, сообщения на странице топика, профиль пользователя и т.д.
Всё это можно и НУЖНО изменить "под себя" - в этом и есть первостепенная задача СВОЕГО дизайна: чтобы форум стал удобнее для нужд конкретной аудитории.

2. какой дополнительный контент должны содержать страницы и как лучше его разместить
Это касается не стандартного функционала движка, а вашего встроенного: что НУЖНО будет выводить на сайте или форуме, какие виджеты будут необходимы и полезны, что из этого стоит разместить только на главной, а что - на каждой странице, и т.д.
Это делается на этапе продумывания дизайна, чтобы потом не было проблемы "куда же это засунуть" и не тащить к себе как сорока все прикольное и блестящее, а только реально нужное.

3. какая стилистика шаблона больше подходит для вашей тематики и как это скажется на юзабилити
Это касается уже больше всяких творческих "красивостей", однако на этом этапе мы думаем о них не как о чем-то красивом, цветном и офигенном, а как о ФУНКЦИИ, которую оно должно выполнять в дизайне.
Например, стоит ли пихать в шапку форума сисястую эльфийку? понравится ли это аудитории сайта, привлекательно ли это для пользователей? а подходит ли это под нашу тематику сайта? а какого размера должна быть эльфийка, чтобы шапка не была слишком большой? а если нам нужно, чтобы помещались не только сиськи эльфийки, но и попа, что нам лучше сделать: уменьшить ее или сделать эту эльфийку не в шапке, а на фоне, чтоб её попа как-нибудь сбоку торчала и не увеличивала высоту шапки?
Все наши творческие изыски нужно продумать как абстрактные элементы, и для каждого придумать функцию, которую они выполняют в дизайне.
Такой ход мысли также научит вас не просто копировать чьи-то дизайн-решения, а самому продумывать: где вам нужна рамочка, а где не нужна, что от чего стоит отделить, как лучше расположить элементы на странице, чтобы это было не только красиво, но и читабельно.

Наверх к оглавлению


Примеры продумывания шаблонов

Интернет-магазин игровых услуг.
В обычном интернет-магазине правильно было бы сделать картинки товаров, чтобы на странице пользователь мог раскрыть картинки товара или покрутить объект в зд, оценив со всех сторон дизайн телевизора/смартфона/труселей (или что он там покупает).
Но что лучше сделать, если наш "товар" - это услуга по прохождению какого-то контента из онлайн-игры? "Убийство Архимонда" в картинках изобразить можно, но это было бы странно.
Интересное дизайн-решение: интегрировать фоновую картинку вместо стандартной картинки товара:

Дизайн для проекта ForumD.ru или MyBB Bright Flat.
На обычном форуме для общения сам шаблон дизайна может быть стандартным. Но что, если наш проект - это скорее "блог", чем форум? Например, на главной форума нужны длинные описания разделов и много ссылок для быстрого перехода, на страницах списка тем нужно выделять заголовки топика, а на страницах топиков важен контент (статья), а не куча полей профиля пользователя.
Дизайн-решение: переписываем полностью форумные таблицы в блоки - так, чтоб они соответствовали формату блогов, а не форума.

Продуманные и НЕпродуманные шаблоны для ролевых форумов
Для меня почти любой дизайн ролевого форума выглядит недоделанным. Скорее всего это связано с тем, что они чаще всего выполняются по общему шаблону, просто меняются фоновые картинки, но факт того, что лишь единицам приходит в голову эти шаблоны "подлатать" на лицо.
На данный момент работа над дизайном ролевой - это придумать шапку, низ, окантовку для "тела форума", окантовку для профиля (+ иногда делают окантовку для названия и описания разделов в категориях). Можете зайти на любой арт-форум (где тусуются дизайнеры ролевых) и увидите там макеты, которые состоят только из перечисленной графики, и ни одной строчки текста в этих макетах нет. На выходе получается вот такое (абсолютно рандомные дизайны с первой страницы ролевых на вебтоке):

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

Вот так (текстурой) можно отделять строки таблицы, если страдаешь нелюбовью к линиям в таблицах

Вот так ровно и аккуратно можно оформить список тем, если страдаешь нелюбовью к линиям в таблицах

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

Наверх к оглавлению


Как придумать свой шаблон?
Как можно прийти к хорошему дизайну? Для этого нужно для начала закрыть все понравившиеся сайты и думать только своей головой. Делается свой собственный дизайн поэтапно, ориентируясь на СВОЮ аудиторию, а не путем выдирания и нагромождения трендов с других форумов/сайтов.
Важно понимать, что в принципе что-то где-то подсмотреть, приметить и применить к своему дизайну - это не плохо. Плохо будет, если это будет делаться непродуманно, хаотично и без оглядки на СВОЮ тематику, СВОЮ аудиторию.

Этап 1. Составляем список нужного и ненужного.
Считайте этот этап подготовкой ТехЗадания (брифа) по дизайну для самого себя. Этот этап позволит учесть все особенности вашего движка, весь дополнительный контент и все технические фичи, которые понадобятся на сайте.
Итак, форумы/сайты конкурентов мы закрываем и открываем чистый лист для заметок. На нем надо разместить:

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

  • Весь дополнительный контент, который нужно встраивать на сайте
    Это касается всяких слайдеров, галерей картинок, текстов и дополнительных меню

  • Все нужные и НЕ нужные элементы движка
    Вы уже настроили функционал движка так, как вам нужно, а теперь необходимо изучить "голый" (без дизайна или со стандартным дизайном) движок и выписать всё, что вам необходимо отображать, а что - скрыть

Причем составлять эти списки лучше ПОСТРАНИЧНО. Отдельно решаем, что у нас размешается в шапке, подвале (или, например, сайдбаре) на каждой странице, а потом разбираем движок на "кусочки паззла": что у нас есть на главной, что оттуда надо убрать и что туда надо добавить; что у нас есть на странице "портфолио", что оттуда надо убрать и что туда надо добавить - и так со всеми основными страницами.
Даже на сложных движках (например, форумных) это выручает при разработке макета. В противном случае и получается, что нарисуешь какую-нибудь красивую окантовку для поста и профиля, а на этапе верстки встает вопрос: куда пихать дату поста, рейтинг и голосовалку за пост? "ой, чет оно же никуда не влазит, ладно пусть висит где-то как попало" :D . Возможно, дизайны, где названия и описания разделов в красивой окантовке, а все остальные данные висят в круговерти пустоты, именно так и появились.

Этап 2. Продумываем общий схематический дизайн шаблона.
Прежде, чем открывать фотошоп или искать самую красивую сисястую эльфийку, которая идеально впишется в ваш дизайн, необходимо взять чистый лист бумаги и схематично от руки нарисовать как вы видите ваш будущий дизайн.
Желательно - постранично. Можно это делать поэтапно, особенно, если работаете со сложносоставным движком с кучей разных страниц типа интернет-магазина или форума. На примере форумов: сначала нарисовали себе главную и приступили к макету, а список тем, посты, профили и прочее будем подрисовывать отдельно, когда до них дойдет дело.
Однако хотя бы общим концептом надо озаботиться СРАЗУ.

Вот примеры моих каракулей при продумывании разных дизайнов:

Сообщения на странице топика для ФД

Идея

Воплощение

http://forumfiles.ru/uploads/0007/e3/f7/2/734292.jpg

http://forumfiles.ru/uploads/0007/e3/f7/2/721507.jpg

Необычное меню для форума

Идея

Воплощение

http://forumfiles.ru/uploads/0007/e3/f7/2/333594.jpg

http://forumfiles.ru/uploads/0007/e3/f7/2/451853.jpg

Невоплощенное (лендинг для ФД и идея ролевого дизайна)

http://forumfiles.ru/uploads/0007/e3/f7/2/343402.jpg

http://forumfiles.ru/uploads/0007/e3/f7/2/946037.jpg

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

Только после этих этапов можно приступать к макету. А прорисовка макета будет буквальным продолжением этих этапов.

Что важно: хочу вдохновить и успокоить новичков, которые не берутся продумывать нестандартный шаблон просто из боязни не осилить верстку.
Ваша фантазия относительно шаблона может быть ограничена только фактором УДОБСТВА для пользователей. То есть вы на этапе подготовки должны знать, что ЛЮБОЙ стандартный элемент движка можно куда-нибудь подвинуть, в любое место вставить красивые рамочки, в любое место добавить какой-нибудь свой контент или блок для картинок. Даже проблемы с технически ограниченными движками типа mybb, wix, ucoz и т.д. (где нет доступа в html-код) решаемы (хоть и через жопу).
Решить свои проблемы с воплощением дизайна можно на нашем форуме или других подобных ресурсах, задавая нужные вопросы и демонстрируя свои макеты. Так что отсутствие навыков при желании научиться делать дизайн круто, индивидуально и правильно не должно вас останавливать. Придумывайте сложные вещи, учитесь их исполнять и со временем вы сможете верстать что угодно для какой угодно платформы.

Наверх к оглавлению
[html]<style>.punbb #p138967 {margin-left: 30px;}</style>[/html]

+1

3

Создание макета
Основы разработки дизайна на макете.

В качестве предисловия к этой части важно сказать, что конкретно в этом гайде будут только трюки по работе в фотошопе для новичков и общие советы по работе с макетами, которые сделают вашу жизнь проще.
Сама разработка макета - это дело скилла конкретного дизайнера в конкретном графическом редакторе. Нет какого-то универсального курса из комплекта уроков, который научит рисовать любые макеты с нуля. Дизайн в графических редакторах - это практика. Необходимо ставить задачи, искать пути их решения, гуглить уроки и т.д.
Лично я когда-то давно зарегистрировала этот форум именно с этой целью. Идеей было получать бесплатные заказы, чтоб на практике учиться делать что-то в ФШ. Вы можете тоже поискать себе подобный источник практики, либо же просто выполнять уроки по работе с графическими редакторами один за другим.
Перечислять здесь миллион уроков по работе в фотошопе, увы, нет никакого смысла. Во-первых, фотошоп - это не единственный подходящий для разработки дизайна редактор. Если быть честным, то во многих случаях он самый неподходящий. :) Во-вторых, уроков, которые я смогу из себя выдавить, все равно не хватит для специфического дизайна - невозможно предусмотреть все дизайнерские изыскания. Зато мы поговорим о работе в ФШ конкретно со спецификой макетов, а не красивых картинок.

Как делать макет для дизайна форума/сайта?
Для кого-то это может быть открытием, поэтому на всякий случай сразу обозначим: макет для дизайна форума/сайта рисуется целиком, а не по отдельным частям.
Макет - это второй этап продумывания дизайна, где вы размещаете весь контент сайта, разрисовываете, придаете элементам форму и т.д.
Вот так это выглядит:

Потом макет "нарезается" на отдельные элементы, которые вставляются в код сайта.

Не рисуйте элементы дизайна отдельно
Вы можете нарисовать что-то сложносоставное отдельно. Например, логотипы надо разрабатывать отдельно в широком формате: они могут использоваться для рекламы, для печати и т.д., а на макет вставлятся мини-лого, так что, будет проблемой, если лого делать на макете маленьким, а потом думать как его перерисовать в большом формате. Или, например, если в шапке используется что-либо нарисованное из миллиона слоев и эффектов, можно заняться этим отдельно, а на макет перекинуть уже готовую версию элемента.
Но в целом рисовать отдельно шапку, отдельно иконки и отдельно окантовки - это НЕ нормально. Как минимум макет дизайна должен дать вам полную картину о том, что с чем сочетается стилистически, везде ли одинаковые оттенки и цвета и т.д.

Делайте ПОЛНЫЕ подробные макеты
Макет - это финальный этап продумывания дизайна (почти окончательный этап), где вы решаете где какой текст должен быть расположен, какого он должен быть размера и какого цвета. Чем подробнее макет, тем меньше проблем с его версткой. Когда вы что-то не вносите на макет потом будете сталкиваться с проблемой "а куда это засунуть".
Представьте, что макет будете верстать не вы и всего что на макете нет, не будет и на сайте - и вот с таким подходом рисуйте ВСЁ. Да, это сложно, это дольше, зато это - профессиональный и правильный подход к дизайну, который убережет вас от многих проблем.

Конечно, макет - это ВАШ рабочий инструмент, и он НЕ обязан содержать каждую внутреннюю страничку и каждую точечку. К тому же, часто бывает, что в процессе верстки некоторые мелочи меняются, переносятся, добавляются. Но это не повод отказаться от подробного макета.
На просторе рынка ролевых дизайнов можно наблюдать вот такие макеты:

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

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

Рисуйте окантовки прямо на макете так, чтоб их можно было разделить на эти части.
А еще когда рисуете двойную окантовку следите, чтоб ее можно было "разрезать" на одинаковой высоте. Например:

Паттерн на фоне повторяется без швов на этой высоте, "зубчики" окантовки размножены ровно настолько, чтоб примыкать к повторению "бордюра". Зачем всё это нужно? Позже мы поговорим о форматах графики, но помимо этого следует учесть, что вы не напасётесь селекторов для вставки всяких "подюбников" отдельными картинками. А я очень часто при верстке чужих макетов сталкивалась с тем, что каждый подобный элемент окантовки имеет разную высоту и необходимо перерисовывать половину макета. Чтоб вас не постигала беда с возможными дорисовками и доделками на стадии верстки, старайтесь делать такие вещи заранее.

Ошибки новичков в разработке дизайна
Это уже более субъективные вещи, с которыми приходилось сталкиваться. Однако, может быть, они кому-то пригодятся.
Во-первых, при подборе исходников следует учитывать, что не бывает неподходящего цвета. Любую картинку можно перекрасить под ваш дизайн. Некоторые, конечно, "красятся" с трудом, но в любом случае вам следует озадачить себя поиском уроков по колоризации различных элементов в графическом редакторе, а не искать неприменно "красную" эльфийку - это вам поможет в будущем, и, если не умеете, лучше начать этому учиться уже сейчас. Когда подбираете исходники, смотрите на форму, а не на цвет.
Во-вторых, не надо смешивать стили рисовки. Например, анимешный персонаж + компьютерная графика + фото реального человека одновременно в одной шапке смотрятся нелепо. (если только сайт не посвящен кино/комп.играм, но даже в этом случае 2д и 3д объекты рядом никак не смотрятся - надо выбирать: либо засовываем нарисованное, либо реалистичное, либо разграничиваем это как-то отдельно.) То же можно сказать и про элементы дизайна: реалистичная металлическая рамочка не подойдет под дизайн в стиле рисованной графики.
В-третьих, не всегда стоит пихать в дизайн слишком много исходников и графики. Например, в шапке сайта очень органично смотрится ОДИН персонаж, а не десять. Но новички любят понапихать побольше или сделать шапку-коллаж из кучи всего сразу. Другой пример - не каждому форуму/сайту нужен "графонистый" дизайн, состоящий из кучи картинок, мелочей, кнопок и окантовок. Если речь о фентези-ролевой, то это актуально, но если форум больше сконцентрирован на общении или контенте, то вам ни к чему настолько "атмосферный" дизайн и следует быть проще.

Наверх к оглавлению


[html]<style>.punbb #p139112 {margin-left: 30px;}</style>[/html]

+2


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Гайды и уроки по вебдизайну » Как сделать дизайн форума/сайта? Все о создании своего дизайна.