Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 1
  • 1
Форум о uCoz и Web » Веб-программирование и дизайн » Дизайн » Основы дизайна интерфейса
Основы дизайна интерфейса
SleepWalkerДата: Вторник, 16.12.2008, 00:30 | Сообщение # 1
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
Fundamentals of Interface Design
Основы дизайна интерфейса

-------------------------------------------------
Серия уроков Part Digital Designs


-------------------------------------------------

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

примечание: Я не собираюсь охватить каждую мелкую деталь во всех подробностях. Предполагается, что вы имеете хоть какое-то базовое знание photoshop.

Что вам понадобится:

  • Карандаш и бумажка.
  • Adobe Photoshop.

Часть 1: Осмысление.

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

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

Брендинг
Что насчет темы и бренда? Какое впечатление должны получить люди от этого? Хотите ли вы, что б ваш сайт был узнаваемый с первого взгляда? Брендинг это широко используемая стратегия в бизнесе, например вся продукция компьютерной компании Apple распознается их изящным использованием блестящих белых и гладких краев.

Так же обратите внимание, что вся ихняя продукция использует похожие имена "iMac", "iPod" и т.д. То есть продукция узнается не только по внешнему виду и конструкции, но и по имени тоже. Благодаря этой не очень уж и мудрой стратегии компания Apple одна из самых узнаваемых компаний в мире.

Кто будет моей аудиторией?
Какой категории люди преимущественно будут использовать сайт? Если вы делаете обучающий сайт (к примеру, как pixel2life.com), тогда разумно будет предположить, что большая часть пользователей используют мониторы с довольно большой диагональю с современными браузерами. В этом случае вы можете создать свой сайт большего размера и использовать более продвинутые технологии (такие как AJAX).

Берите все это на рассмотрение, когда вы пишите идее для вашего сайта, это сделает дизайн и разработку намного легче.

Часть 2: Какое расположение элементов будет на вашем будущем сайте?

Есть три стандартных схем расположения элементов страницы:

Расположение в одну колонку:

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

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

Рсположение в две колонки:

Плюсы:
Это расположение элементов страницы довольно таки распространенное в интернете, и это верно, так как это элегантное решение для маленького и среднего сайта.

Минусы:
Тме не менее существует несколько ограничений . Особенно когда вы доберетесь до подразделов. Это расположение элементов разрешает вам делать вложение до второго уровня. Так же вы жертвуете не малое место для навигации.

Расположение в три колонки:

Плюсы:
Это самое часто наблюдаемое расположение элементов страницы в интернете. Это расположение удобно тем, что можно обеспечить лучшую навигацию по сайту и достаточное место как для контента сайта, так и для дополнительной информации, включая рекламу.

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

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

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

Часть 3: Визуализация.

Перед тем как я начинаю какую либо работу на компьютере я зарисовую свои идеи на бумаге. Этот шаг очень важен, так как он отвечает за креативность. Рисуя эскиз вам не надо волноваться про какие-либо технические проблемы серьезнее использования карандаша. (Если же карандаш таки оказался для вас тяжелым инструментом, то возможно вам сперва надо попробовать какие-то другие уроки :p).

Эскиз №1
Это мой первый набросок интерфейса. Я знаю, что мне нужен каркас из трех колонок, потому я сразу же начал с наброска этого каркаса. Мне понравилось количество блоков, которое я нарисовал, но все же чего-то в этом не хватало.

Эскиз №2
Я продолжал работать с эскизом, что бы увидеть выйдет ли разработать что-то, что мне по-настоящему понравится. Чем больше я работал, тем больше мне нравилось расположение блоков, но меньше всего мне нравились закругленные углы. Еще я чувствовал, что секция портфолио ("portfolio", на рисунке) может быть усовершенствована.

Эскиз №3
Я начал рисовать поверх моего эскиза и наконец-то добился чего-то, что меня удовлетворило. Секция портфолио была очень упрощена и углы блоков я сделал острыми.

Эскиз №4
Потом я начал играть с сочетаниями цветов. Я не много делал с светло-голубым цветом, потому я решил использовать его как основу.

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

Часть 4: Тело.

Откройте PhotoShop и создайте новый документ. Установите разрешение 800 x 600 пикселей.

Нажмите U, что бы выбрать инструмент Rectangle Tool, убедитесь в том что выбран инструмент Rounded Rectangle Tool. Установите радиус 10px.
Нарисуйте прямоугольник от левого верхнего угла холста до нижнего правого угла холста. Не волнуйтесь за цвет, мы его изменим позже.

Смените Rounded Rectangle Tool на инструмент Rectangle Tool. Нажмите + на клавиатуре (или нажмите Add to Shape Area в настройках инструмента, вверху окна PhotoShop). Нарисуйте прямоугольник в верхней части холста, что бы убрать закругленные углы. Обратите внимание, что другой цвет прямоугольника на рисунке, это для демонстрации. У вас прямоугольник должен быть такого же цвета как и прошлый.

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

Нажмите Stroke в эффектах слоя и примените настройки как на следующем рисунке:

У вас должно выйти что-то вроде этого:

Нажмите Ok и давайте добавим footer - нижнюю часть сайта.

Часть 5: Нижняя часть сайта (Footer).

Создайте новую группу(Group) слоев, назовите ее Footer.

Создайте новый слой в той группе, назовите его Base.

С выбранным слоем Base нажмите Ctrl+левый клик на маске формы в палитре слоев для того, что бы создать выделение. Зажмите Alt и перетащите выделение вверх, что бы убрать выделение с верхней части формы. Залейте оставшееся выделение цветом #3c4549

Нарисуйте узенькую прямоугольную форму поверх слоя Base.

У вас должно получится примерно как на следующем рисунке.

Часть 6: Шапка.

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

Потом нарисуйте узенький прямоугольник и установите прозрачность на 28%

У вас должно выйти что-то вроде этого

Я не собираюсь охватывать в этом уроке создание каждой иконки, вместо этого я покажу вам свою технику, которую я использовал для одной из иконок и потом вы, используя эту технику, сделаете свои собственные иконки :).
Сперва я сделал эскиз.

Потом я добавил paths(пути) в Photoshop.

Далее я вставил полученную картинку в меню шапки и добавил эффект outer glow

Со всеми иконками и текстом, дизайн должен выглядеть примерно так

Графика для выделенной иконки очень проста, я просто сделал прямоугольник и добавил следующие настройки

Потом я нарисовал белую форму поверх того прямоугольника и установил ее прозрачность на 14%

И вот что у меня получилось

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

Для текст использовался шрифт Arial. Я так же добавил светлый градиент к этому тексту. Дальнейшие улучшения я собираюсь погрузить на вас. Развлекайтесь! smile

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

Часть 7: Меню портфолио.

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

С меню портфолио ваше творение будет смотреться примерно так

Часть 8: Контент.

Создайте новый прямоугольник в центре вашего интерфейса. Залейте его цветом #effaff и назовите Panel Base. Добавьте к прямоугольнику рамочку(stroke) в 1px, цветом #869ca4, установите позицию рамочки на Inside(внутри)

Создайте еще один прямоугольник.

Выполните следующие настройки

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

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

Я очень хотел сделать секцию "добро пожаловать" что бы выделиться, и я чувствовал, что одного текста будет не достаточно. Потому я сделал планету, покрытой рамкой из проводов, что б добавить к приветствию ощущения "интернета".

Примечание про цвет.
Хорошее правило, которое следовало бы соблюдать каждому - это использовать весьма ограниченную палитру цветов. 4 или 5 цветов максимум. Я стремлюсь выбирать цветовую схему (в этом случае синею) и использовать разные насыщенности и яркости этого цвета. Если вы не можете определиться с тем, какую цветовую схему использовать, посетите сайт www.colorschemer.com, этот сайт поможет вам подобрать хорошие цветовые схемы для последующих экспериментов с ними.

Часть 9: Блок новостей.

Как видите блок новостей весьма прост. Просто убедитесь в том, что дата и описание новостей легкоразличимые. Если вы имеет, какие либо ссылки там, выделите их другим цветом. Я использовал оранжевый. Разве это не симпатично?

Часть10: Панель уроков.

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

Шаблон иконки
Я создал PSD файл со всеми стилями и графикой, которые я хотел присваивать моим иконкам. После чего я начал использовать этот файл в качестве шаблона для моих иконок

Часть 11: Результат.

Соберите все части воедино, и вы получите то, что видите ниже

Заключение.

Я надеюсь, этот урок был полезным. Не бойтесь оставлять какие либо комментарии.

Источник: http://www.partdigital.com/
Перевод: http://udf.su/

Как установить кнопки социальных сетей?

Time Waits For No One
 
АртёмДата: Понедельник, 19.01.2009, 15:26 | Сообщение # 2
Лейтенант
Сообщений: 41
Репутация: 2
Социальная репутация:

Статус: Offline
клёво smile
 
VovichДата: Понедельник, 19.01.2009, 21:22 | Сообщение # 3
Полковник
Сообщений: 204
Репутация: 12
Социальная репутация:

Статус: Offline
biggrin Класс!!!
Ultra-Warez.Net - Журналы | Девочки | Автомото | Интересное
 
JesseДата: Четверг, 22.01.2009, 20:54 | Сообщение # 4
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Offline
Vovich, Артём, учите, учите..))
На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
PsixiatorДата: Суббота, 13.02.2010, 19:28 | Сообщение # 5
Генерал-лейтенант
Сообщений: 586
Репутация: 27
Социальная репутация:

Статус: Offline
кул
 
END111Дата: Суббота, 13.02.2010, 21:20 | Сообщение # 6
Рядовой
Сообщений: 3
Репутация: 0
Социальная репутация:

Статус: Offline
Хороший пример для тех кто начинает мутить такие вещи.
 
PsixiatorДата: Суббота, 13.02.2010, 21:40 | Сообщение # 7
Генерал-лейтенант
Сообщений: 586
Репутация: 27
Социальная репутация:

Статус: Offline
END111, да я согласен(сори за флуд)

Сообщение отредактировал Gaara10 - Суббота, 13.02.2010, 21:41
 
Форум о uCoz и Web » Веб-программирование и дизайн » Дизайн » Основы дизайна интерфейса
  • Страница 1 из 1
  • 1
Поиск: