Мой вариант составления веб-дизайна.

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

На этом этапе перехожу к верстке.
Спасибо, за пинок к развитию вот этому товарищу) -> ТОВАРИЩ(не господин)

Пункты:
1. Выбор тематики веб-сайта
2. Написать заранее перечень необходимых разделов
3. Нарисовать общий вид сайта
4. Подобрать цветовую палитру
5. Выбор инструмента
6. Подбор шрифтов
7. Результат
1. Выбор тематики веб-сайта

Мой ресурс много раз претерпевал изменения как в видимом, так и в невидимом направлениях. Очередное изменение — «Личный блог flash разработок. Задумываю вставку „полезных“ flash кодов в популярные cms.

2. Написать заранее перечень необходимых разделов

Необходимый пункт. Потому, что если этого не сделать, то ооочень вредит дальшейшему продвижению — хочется что-то вставить или убрать и начинется лишняя суета. Заметил на себе, решил, что данный пункт мега-важен.

3. Нарисовать общий вид сайта

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

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

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

4. Подобрать цветовую палитру
Без лишних разглагольствований по порядку:

— выбрать основной цвет

Куча програмулин как оффлайн, так и онлайн. Особо меня паразили буржуйские ресурсы — целые корпорации цвета. В общем-то кроме как подбор основного цвета, больше нужды в них не испытал. Нарисую самую известную картинку thecolorwizard'a:



В общем да, много заманух — похожие, подобные, близкие цвета… Но! Того, что будет пунктами ниже — не нашел ни в одном! Где-то близко, но все же не то пальто.

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

Вычитал самый простой способ нахождения этого цвета — ОБРАТИТЬ ЦВЕТА. Данная функция есть даже у paint'a. В общем-то потренировавшись понял, что способ заслуживает уважения. И в любое время можно конечно воспользоваться (выше) thecolorwizard'ом, чтобы поиграться с более красивыми цветами.

Тривиальный пример контраста это черный и белый.

— Выбрать цвет ссылок

Тривиальный и лучший вариант цвета ссылок — синий. Потому как по умолчанию. Любой пользователь знает, что синее и подчеркнутое это ссылка. Вариации синего все тем же thecolorwizard'ом можно изменить.

Опять же смотреть по ситуации. Синий может никак не вписываться в общий дизайн, потому искать контраст.

5. Выбор инструмента

Хороший инструмент дизайнера и умение его использовать это сила)
Руки не доходят пока по Photoshop'a. Оно тяжелое. У меня есть ряд причин, чтобы пока за него не браться. Потому использую Macromedia Flash MX. Конечно есть много причин его не использовать, но мой выбор пал на него.

Вот ряд картинок по использованию его в качестве дизайна:

Работа со слоями, видимостью на шаблоне:


Создание своих библиотек слоев и страниц:


6. Подбор шрифтов

Буду честен — для полноценной компоновки как по мне надо сразу представлять какая будет верстка. Где будет резина, а где статика. В общем размеры пытался выбирать стандартные — 14, 22 — для текста, ссылок и названий разделов.

7. Результат

И вот он!

Главная страница:



Страница перечня статей в виде блога:



Ссылки кликабельны.Спасибо за внимание.

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

RSS свернуть / развернуть
+
0
как по мне, то: с таким цветом текста он не очень чётко виден на таком фоне, нет контраста, из-за этого напрягается зрение и как следствие ощущение дискомфорта. а на дизайн должно смотреть «бесконечно долго».

приведу выдержку из рядового тех-задания:

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

Визуальное оформление Системы должно реагировать на изменение четырёх основных сезонов (зима, весна, лето, осень), поэтому необходимо создать четыре варианта одно-форматных и тематических изображений. Более того, необходимо учесть следующие социальные праздники: Новый Год, 8 Марта, День Защитника Отечества. Не обязательно менять целые блоки изображений, можно воспользоваться добавлением малых, но узнаваемых значков, атрибутики, стилистических штрихов, etc.

Основными шрифтовыми гарнитурами стиля являются Arial, Helvetica, Sans-serif и Verdana. Шрифты, используемые для оформления графических элементов Сайта (на файлах изображения), не должны противоречить общему стилю. В случае отсутствия необходимых шрифтов на компьютере пользователя необходимо предусмотреть использование стандартных групп шрифтов браузеров (Arial/Helvetica, Times New Roman, Courier) таким образом, чтобы замена шрифтов из соответствующей группы не приводила к визуальному искажению текста. Размер (кегль) шрифтов должен обеспечивать удобство восприятия текста при минимально допустимом размере экрана.

Сайт должен обеспечивать корректное отображение данных в таких браузерах как Internet Explorer (версия 5.5 и выше), Opera (версия 7.0 и выше), Mozilla Firefox (версия 2.0 и выше), Google Chrome, Safari.
avatar

degtyarchuk

  • 16 июня 2010, 19:26
+
0
Все это хорошо! Критика учтена и занесена в избранное на будущее. Вопрос в следующем — что в данном варианте доделать по минимуму, чтобы оценка дотягивала хотябы до 3? Переделывать с нуля не вариант. Хочу услышать конкретную подсказку или две. Допустим цвет основного текста и шрифт. Плииз)
avatar

PigmaLion

  • 16 июня 2010, 20:06
+
0
тебе надо консультация настоящего дизайнера со тажем и талантом. я не советчик, просто говорю свои очучения ))) надо будет пригласить на програмиллу классного дизайнера. задружить с ним.
avatar

degtyarchuk

  • 16 июня 2010, 20:09
+
0
нууу..(( блин. Зачем ждать до бесконечности класного дизайнера с отличным зрением, когда у нас тут отряд плохо видящих и умных с детства! Вроде понятно выразился — перелывать не вариант. Скажите, что поменять сразу, что в глаза бросается — этого будет достаточно на текущий момент. ПииИз)
avatar

PigmaLion

  • 16 июня 2010, 20:12
комментарий был удален

+
+1
я так понял, что ты хочешь привязаться к серому. а посему:
1. сделай фон светлее;
2. в названии сайта «музыкант ком уа» сделай «ком» красным цветом;
3. добавь жёлтого и чёрного. как и куда надо играться.
4. обязательно воспользуйся бесплатной библиотекой изображений-пиктограмм для отображения тегов, комментарий, рейтингов, etc.
5. потрать на подбор цветов больше одного дня.

вот мой вариант, который я когда-то хотел себе сделать. дизайн сам делал.
avatar

degtyarchuk

  • 16 июня 2010, 20:36
+
+1
наконец! я даже такое плюсану. А завтра продолжу пыхтеть.

Дрожите бета-тостЕры,
невинные в том,
что вы с детства умны
на путь дезигнЕра
стал поклонник джумлы.

Какой-то приступ спамописания напал)
avatar

PigmaLion

  • 16 июня 2010, 21:56
+
+2
Мое скромное мнение ваще по поводу и без повода.

1. сделай цвета веселее и контрастнее. Хотя бы контрастнее. Ща все оч уныло.
2. делая шаблон принимай во внимание каждый px — все должно быть ровно и аккуратно. Все погрешности влияют на визуальное восприятие макета и трудно сказать что подправить когда весь шаблон воспринимается как «нести тяжело и выбросить жалко». Аккуратность также тебе очень поможет когда ты будешь верстать.
3: Возможно тебе и удобно делать макет в Flash редакторе, но для одного языка лучше перейти к средствам которыми пользуется большинство в этом мире. Причин для этого тысяча. Например если кто то скажет «а давай ка я тебе покажу одну фичу будет круто смотреться, только ты вышли мне файл с шаблоном». И в этот момент ты должен будешь выслать шаблон в котором все разбито по слоям, все рулесы на своих местах и тд и тп. Мне нравиться Visual Studio и Eclipse, но я по прежнему использую Pages для заполнения документа и Numbers для редактирования таблиц.

Все зависит от того что тебе надо в финале. «О да я это сделал для себя и через месяц забуду» или «о да. крутой ресурс. а кто его сделал?»

off: Никакой совет не решит ничего. Надо просто делать. Это моя первая работа «на сторону» — place-ua.com/. Сначала рисовал на листочках бумаги. Потом долго переносил. Потом получил n k долларов и остался оч доволен ))

И это. правильно делаешь что не ждешь никаких дизайнеров. Все талантливы и все могут. Надо просто захотеть
avatar

cyril

  • 17 июня 2010, 00:07
+
0
Все, пересел на фотошоп)
avatar

PigmaLion

  • 17 июня 2010, 08:41

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.
Не забываем смотреть статистику:

Яндекс цитирования