Апп-субботник #3
5 мая 2013, 16:02
Сегодня я решил нарисовать простой лист покупок:
При добавлении новой позиции всё, что после первой запятой оформляется как второстепенная информация. В приложении есть архив листов покупок, для этого надо просвайпить влево. Чтобы добавить новый лист, надо просвайпить вправо:
Если изменить название списка или добавить хоть одну позицию, то лист сохранится. Если этого не сделать, то лист не добавится.
Картинка для пятого Айфона.
Если вы хотите поучаствовать в апп-субботнике, пришлите мне задание на дизайн. Вот тут правила игры.
Рисование теней
1 мая 2013, 0:15
Меня попросили рассказать, как я рисую тени.
Расскажу про два типа теней от объекта: который лежит на поверхности и который стоит на ней.
Если объект лежит на поверхности и слегка отстаёт от неё, то тень рисуется очень просто:
Для этого я создаю слой под объектом и заливаю его слегка тонированным тёмным цветом (показал на картинке немного криво — сместил объект вверх и влево и сделал его полупрозрачным. Короче, тень точно под объектом нужна).
Далее, беру инструмент размытия и начинаю размазывать границу тени: чем дальше от места соприкосновения объекта и фоновой поверхности — тем сильнее мою.
Готово.
Если объект стоит на поверхности, придётся немного повозиться:
- Беру объект, который должен стать на поверхность.
- Делаю «острую» ставящую тень. Она делается так же, как и в случае с лежащим объектом. Если у объекта есть массивное «дно», которым он должен стоять, то ставящая тень будет слегка размытой копией этого дна. У меня же объект стоит на носике, поэтому в качестве ставящей тени я использовал пиксельную полоску размытую по краям.
- Нужно чуть доработать ставящую тень. Размываю в горизонтальном движении то, что получилось в предыдущем шаге и уплотняю тень в месте стыка с носиком объекта.
- Для того, чтобы нарисовать падающую тень, копирую объект, искажаю его, так чтобы он лёг на фоновую поверхность. Беру инструмент размытия и размываю по всё тому же правилу (чем дальше от места стыка с объектом — тем сильнее). Затем стёркой приглушаю тень по краям (чем дальше тень от стыка с объектом — тем она прозрачнее).
- Чуть дотюниваю то, что получилось. На этом этапе становится понятно, что ставящая тень слишком далеко убежала от объекта — поднимаю её на пиксель. Также слегка уплотняю падающаю тень в районе носика.
- Если объект был цветной, неплохо бы бросить от него рефлекс на фоновую поверхность. Для этого рисую какаую-то ромбовидную фигуру цвета объекта, чуть темнее. Блюрю её Гаусом слегка и пару раз размываю в горизонтальном движении (пару, а не один, — чтобы замаскировать страшный результат фотошопного размытия в движении). Затем настраиваю прозрачность и цвет.
Готово.
Кому интересно узнать больше про рисование интерфейсных элементов, приглашаю на московский курс «Интерфейсы для айфона».
Апп-субботник #2
28 апреля 2013, 11:30
Вторым донором для апп-субботника по просьбе Сергея Короля стал «Гетвеар».
«Гетвеар» — это сервис, с помощью которого люди заказывают себе джинсы по индивидуальным меркам. Я задизайнил интерфейс снятия мерок:
Приложение должно быть удобно как новичкам, так и продвинутым пользователям. Новички тапают в каждый измеряемый параметр, читают подсказки для снятия верных мерок и вводят значения с клавиатуры. Продвинутые же легко свайпят сантиметровые ленты и быстро выставляют нужные значения. Приложение запоминает все мерки и в следующий раз использует их по умолчанию. При желании всё можно подредактировать.
Макет для просмотра на пятом айфоне (манекена ретинизировать, к сожалению, не успел).
Если вы хотите поучаствовать в апп-субботнике, пришлите мне задание на дизайн. Вот тут правила игры.
Апп-субботник #1
21 апреля 2013, 11:46
В качестве задания для первого апп-субботника я взял приложение Максима Панфилова — путеводитель по Ибице.
Текущее приложение выглядит так:
В приложении есть список ближайших событий, путеводитель с кратким описанием мест Ибицы, календарь событий, карта мест и «консьерж», через который можно заказать вип-стол в каком-то клубе, заказать стол в каком-то ресторане, арендовать какую-то виллу и ещё несколько услуг.
Максим, не понятно, где находятся все эти заведения и как их найти.
Хороший путеводитель должен заманивать потенциальных туристов и развлекать отдыхающих. Поэтому первый экран я решил сделать вкусную фотогалерею, в которой крутятся фотографии мест и заведений, паралельно рассказывая, какие события проходят в этих местах в ближайшее время. Если пользователь приложения уже находится на Ибице, приложение это понимает и подсказывает, как далеко и в каком направлении место с фотографии. Если же пользователь за пределами Ибицы, то приложение показывает погоду в этом месте. Если приложение открыто ночью, то фотографии показываем ночные и про ночную жизнь (клубы, рестораны, вечеринки), если днём — где можно отдохнуть днём (пляжи, кафешки, парки).
Получилось такое приложение:
Картинки для пятого Айфона: ночь, день
Если вы хотите поучаствовать в апп-субботнике, пришлите мне задание на дизайн. Вот тут правила игры.
Апп-субботники
16 апреля 2013, 22:47
Привет. Я — дизайнер веб-интерфейсов и айос-приложений (в основном Айфон), но так получилось, что, по разным причинам, мне нечем заполнить своё портфолио. Я хочу это исправить, для этого объявляю апп-субботники и мне нужна ваша помощь.
Я решил каждую субботу рисовать по одному приложению. Чтобы не выдумывать себе задание на дизайн, хочу пригласить людей, у которых есть уже есть идеи, а может быть и готовые приложения, нуждающиеся в редизайне.
Чтобы принять участие в апп-субботнике нужно:
- В комментариях к этому посту описать идею приложения настолько подробно, насколько это возможно (или дать ссылку на готовое приложение, если оно у вас уже есть). Приложения, в основе которых лежит карта, очень вероятно я не возьму на субботник, потому что не интересно.
- По желанию дать референсы того, что нравится.
- Быть готовым к тому, что результат субботника и исходное задание будут доступны общественности.
Участие абсолютно ФО ФРИ
Из всех заданий на дизайн, пришедших до субботы, я вибираю одно; в субботу рисую; в воскресенье выкладываю результат в свой блог и на Дрибл.
Бонус: если вам понравится результат, нарисованный по вашему заданию, с радостью нарисую для вас всё приложение целиком. Но уже не фо фри, конечно.
Буду проводить апп-субботники пока есть задания или пока не надоест. Поехали.
А что, если...?
25 февраля 2013, 14:40
Я очень люблю задаваться вопросами типа «А что, если...?».
Ну, например:
- А что, если лет через 500 Венецию затопит или наоборот уровень моря понизится, цивилизация и вся информация о ней сгинет, и будут археологи новой цивилизации ломать голову, отчего двери в дома находятся на высоте нескольких метров от уровня тротуара (дна каналов)?

- (на самом деле, это второй пункт, но я слишком туп для Эгеи :) Или те же археологи обнаружат подводную статую «Христа из бездны» и будут стоить гипотезы о затонувшей цивилизации.

- (три) В торфяных болотах под Городом Орхус, Дания, в середине прошлого века обнаружили мумии, которым около 2000 лет. Мумии были с перерезанными глотками. Как предположили учёные, этих людей принесли в жертву духу болот, и трупы мумифицировались за две с лишним тысячи лет. Так вот, что если это были просто жертвы маньяка? Например, какую-нибдуь современную жертву, пропавшую без вести, найдут через тысячу лет в подмосковных болотах и сделают предположение о высокой причине её кончины и поместят под стекло в музей.

- (четыре) У моих родителей дом, на первом этаже которого был когда-то неиспользуемый гараж. Одно время я хотел сделать там лофт-лофт: в смотровую яму поместить выкрашенный в белый двигатель автомобиля, подсветить его, а саму яму накрыть толстым стеклом. Получился бы у меня подсвеченный движок в полу под ногами. Так вот, всё те же археологи отрыли бы мой дом и ломали голову над несколькими вещами:
— Что это за хрень в яме (наверняка, их технологии бы не знали ДВЗ)? Вероятно, предмет культа?
— Почему эта хрень (предмет культа) находится в полу жилища Хомо Сапиенса? Видимо, такая религия у них была.
Поэтому теперь, рассматривая в музее какую-нибудь закорюку с подписью «гребень из кости мамонта», я представляю себе тупую бытовую сцену из жизни людей той эпохи и иду дальше.
Почему системы сеток — отстой
22 октября 2012, 14:03
Системы сеток, как и всё автоматизированное, — отстой, потому что отключают мозг дизайнера.
Существует много различных систем сеток — 12-, 16-, 24-колоночные и прочие. Выглядят они, например, вот так:
То есть отношение ширин колонок к расстоянию между ними фиксировано. Подразумевается, что нужно все элементы расставлять по сетке, чтобы всё было окей:

Отстойность системы сеток заключается в том, что композиционные требования жертвуются ради стройности сетки, которую никто никогда не увидит. Для одних элементов 20 пикселей, выделенных сеткой, будет достаточно для из разделения, а для других — нет.
Всё зависит от размеров элементов и их вида:
Чем крупнее элемент, тем больший отступ от соседа ему нужен. Если в случае с картинками мелкий отступ может быть оправдан художественным или оформительским приёмом, то для текста такая отмазка уже не канает:

Для того, чтобы текстовые блоки в свободно свёрстанной странице смотрелись нормально приходится вводить компенсирующие отступы.
И совсем беда если страница должна иметь более сложную вёрстку, нежели простой четырёх- или трёхколоночник. Например, левый широкий столбец с плиткой фотографий + боковой столбец:
Очевидно, что заданный сеткой шаг колонок тут не подходит и нужно уменьшать отступы между картинками основного столбца и увеличивать расстояние между основным и боковым столбцом. Есть ли такая система сеток, позволяющая всё это сделать? Конечно — 1000-колоночная сетка пикселей.
Блогегея
30 августа 2012, 10:27
Переехал на форэваэлон стэндэлон-блог. Все старые заметки доступны в ЖЖ. Теперь буду писать только сюда.