Tag Archives: icons

Реализм графических пользовательских интерфейсов

17 Авг

Дизайн интерфейсов за свою историю всегда шёл к реализму в своих графических решениях. Компьютеры становились быстрее, дизайнеры добавляли детали такие как цвет, псевдотрёхмерность, тени, блики и даже намёки на физику поведения. Некоторые изменения помогали юзабилити. Тень под окошком операционной системы помогает узнать активное окно. Физические качества и возможности iPhone делают его более привычным в использовании.

В других направлениях, положительные эффекты от детализации, в лучшем случае, остаются под вопросом. Графические пользовательские интерфейсы (GUI) обычно полны символов. Большинство элементов, которые вы видите на мониторе, используются, чтобы донести до вас конкретные концепты. Маленький домик на рабочем столе означает не «жилище», а «Вернуться в начало». Глаз — не глаз, а «взгляните на выбранный элемент». Маленький треугольничек — не треугольничек, а «нажми на меня и увидишь допольнительные опции для использования». Иконки предназначены не для имитации реальных объектов, а для передачи обобщённого представления — концепта.

Графические детали и реализм могут отвлекать от истинной задачи иконки. Мне поможет вырезка из книги «Понимаем комиксы» Скотта Макклауда (Scott McCloud’s «Understanding Comics»), книга, которую должен прочитать каждый дизайнер.

Страница из книги «Понимаем комиксы»
«…Еще одна вещь — универсальность. Например, чем менее лицо походит на настоящее, тем больше типажей лиц им может описать.»

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

Настоящий фотоаппарат на кнопке вводит в заблуждение.

Читать далее

Весь интерфейс iPhone 4 в одном PSD-файле

17 Авг

Не Xcode единым — макетировать интерфейс iPhone-программы можно не только средствами Apple, привычный Photoshop выглядит более чем достойной альтернативой. А если вы нацелились на iPhone 4 с его роскошным Retina Display, то здесь никак не обойтись без последней работы студии Teehan+Lax — втиснутые в гигантский PSD-файл размерами 4074 × 2986 точек все базовые элементы графического интерфейса iOS, перерисованные под экранные 640 × 960 пикселей iPhone 4.

Скачать iPhone 4 GUI PSD (Retina Display) (20,8MB).

Объем собственно файла получился не менее устрашающим — в разархивированном виде iPhone_4_GUI_PSD_Retina_Display.psd занимает на жестком диске 62,7 Mb. Распространяются эти шестьдесят два целых и семь десятых мегабайта совершенно бесплатно, но с предложением заплатить за титанические усилия дизайнеров Teehan+Lax сколько не жалко. На данный момент времени среднестатистический взнос «сколько не жалко» составляет 10 долларов и 55 центов.

via DeepApple.ru

Элементы интерфейса для проектирования под iPad

22 Май

iPad Stencil for Omnigraffle by iA

iPad PSD GUI by Teehan + Lax

iPhoneOS Design Stencil for iPad and iPhone by David Morford

iPad editable PSD by Kevin Andersson

iPad Wireframe PSD by Neil Cowburn

iPad Icon Set by Chris Spooner

Printable iPad Template PDF by Arash Keshmirian

via

Где брать иконки?

21 Май

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

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

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