Статья не претендует на оригинальность или абсолют. По факту, как происходила эволюция разбора этой трудовой ниши. Возможно найдете что-то оригинальное или интересное. Думаю как для начинающего можно использовать в качестве блок-схемы.
На этом этапе перехожу к верстке.
Спасибо, за пинок к развитию вот этому товарищу) ->
ТОВАРИЩ(не господин)
Пункты:
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 свернуть / развернутьприведу выдержку из рядового тех-задания:
degtyarchuk
PigmaLion
degtyarchuk
PigmaLion
1. сделай фон светлее;
2. в названии сайта «музыкант ком уа» сделай «ком» красным цветом;
3. добавь жёлтого и чёрного. как и куда надо играться.
4. обязательно воспользуйся бесплатной библиотекой изображений-пиктограмм для отображения тегов, комментарий, рейтингов, etc.
5. потрать на подбор цветов больше одного дня.
вот мой вариант, который я когда-то хотел себе сделать. дизайн сам делал.
degtyarchuk
Дрожите бета-тостЕры,
невинные в том,
что вы с детства умны
на путь дезигнЕра
стал поклонник джумлы.
Какой-то приступ спамописания напал)
PigmaLion
1. сделай цвета веселее и контрастнее. Хотя бы контрастнее. Ща все оч уныло.
2. делая шаблон принимай во внимание каждый px — все должно быть ровно и аккуратно. Все погрешности влияют на визуальное восприятие макета и трудно сказать что подправить когда весь шаблон воспринимается как «нести тяжело и выбросить жалко». Аккуратность также тебе очень поможет когда ты будешь верстать.
3: Возможно тебе и удобно делать макет в Flash редакторе, но для одного языка лучше перейти к средствам которыми пользуется большинство в этом мире. Причин для этого тысяча. Например если кто то скажет «а давай ка я тебе покажу одну фичу будет круто смотреться, только ты вышли мне файл с шаблоном». И в этот момент ты должен будешь выслать шаблон в котором все разбито по слоям, все рулесы на своих местах и тд и тп. Мне нравиться Visual Studio и Eclipse, но я по прежнему использую Pages для заполнения документа и Numbers для редактирования таблиц.
Все зависит от того что тебе надо в финале. «О да я это сделал для себя и через месяц забуду» или «о да. крутой ресурс. а кто его сделал?»
off: Никакой совет не решит ничего. Надо просто делать. Это моя первая работа «на сторону» — place-ua.com/. Сначала рисовал на листочках бумаги. Потом долго переносил. Потом получил n k долларов и остался оч доволен ))
И это. правильно делаешь что не ждешь никаких дизайнеров. Все талантливы и все могут. Надо просто захотеть
cyril
PigmaLion
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.