Создание интерфейса пользователя

Сегодня ни для кого не секрет, что графический пользовательский интерфейс любого программного продукта является одним из ключевых факторов его популярности. Времена, когда связь между пользователем и приложением повсеместно устанавливалась при помощи командной строки, практически безвозвратно канули в лету, уступив место графическому пользовательскому интерфейсу (GUI от Graphical User Interface).

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

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

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

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

Рис. 3.5 Структура сайта

По этой структуре я начал создавать дизайн. При создании дизайна мне очень помогла программа Adobe Photoshop, которую и посвящён мой сайт.

Рис. 3.6 Первый вариант дизайна.

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

Рис. 3.7 Логотип сайта.

Новый дизайн более привлекательный чем старый, все чисто и аккуратно. Максимально проработано до мелочей. Все элементы дизайна:

Рис. 3.8 Дизайн сайта

Рис. 3.9 Форма поиска

Рис. 3.10 Навигатор сайта. Меню

Рис. 3.11 Слайдер

Рис. 3.12 Сайдбар: форма авторизации и список категорий.

Рис. 3.13 Краткая информация уроков.

Рис. 3.14 Блог комментария.

Рис. 3.15 Личный кабинет пользователя.