Сегодня я решил нарисовать простой лист покупок:

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

Если изменить название списка или добавить хоть одну позицию, то лист сохранится. Если этого не сделать, то лист не добавится.

Картинка для пятого Айфона.

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

Меня попросили рассказать, как я рисую тени.

Расскажу про два типа теней от объекта: который лежит на поверхности и который стоит на ней.

Если объект лежит на поверхности и слегка отстаёт от неё, то тень рисуется очень просто:

Исходник

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

Далее, беру инструмент размытия и начинаю размазывать границу тени: чем дальше от места соприкосновения объекта и фоновой поверхности — тем сильнее мою.

Готово.

Если объект стоит на поверхности, придётся немного повозиться:

Исходник

1. Беру объект, который должен стать на поверхность.
2. Делаю «острую» ставящую тень. Она делается так же, как и в случае с лежащим объектом. Если у объекта есть массивное «дно», которым он должен стоять, то ставящая тень будет слегка размытой копией этого дна. У меня же объект стоит на носике, поэтому в качестве ставящей тени я использовал пиксельную полоску размытую по краям.
3. Нужно чуть доработать ставящую тень. Размываю в горизонтальном движении то, что получилось в предыдущем шаге и уплотняю тень в месте стыка с носиком объекта.
4. Для того, чтобы нарисовать падающую тень, копирую объект, искажаю его, так чтобы он лёг на фоновую поверхность. Беру инструмент размытия и размываю по всё тому же правилу (чем дальше от места стыка с объектом — тем сильнее). Затем стёркой приглушаю тень по краям (чем дальше тень от стыка с объектом — тем она прозрачнее).
5. Чуть дотюниваю то, что получилось. На этом этапе становится понятно, что ставящая тень слишком далеко убежала от объекта — поднимаю её на пиксель. Также слегка уплотняю падающаю тень в районе носика.
6. Если объект был цветной, неплохо бы бросить от него рефлекс на фоновую поверхность. Для этого рисую какаую-то ромбовидную фигуру цвета объекта, чуть темнее. Блюрю её Гаусом слегка и пару раз размываю в горизонтальном движении (пару, а не один, — чтобы замаскировать страшный результат фотошопного размытия в движении). Затем настраиваю прозрачность и цвет.

Готово.

Кому интересно узнать больше про рисование интерфейсных элементов, приглашаю на московский курс «Интерфейсы для айфона».

Вторым донором для апп-субботника по просьбе Сергея Короля стал «Гетвеар».

«Гетвеар» — это сервис, с помощью которого люди заказывают себе джинсы по индивидуальным меркам. Я задизайнил интерфейс снятия мерок:

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

Макет для просмотра на пятом айфоне (манекена ретинизировать, к сожалению, не успел).

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

В качестве задания для первого апп-субботника я взял приложение Максима Панфилова — путеводитель по Ибице.

Текущее приложение выглядит так:

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

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

Получилось такое приложение:

Картинки для пятого Айфона: ночь, день

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

Привет. Я — дизайнер веб-интерфейсов и айос-приложений (в основном Айфон), но так получилось, что, по разным причинам, мне нечем заполнить своё портфолио. Я хочу это исправить, для этого объявляю апп-субботники и мне нужна ваша помощь.

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

Чтобы принять участие в апп-субботнике нужно:

1. В комментариях к этому посту описать идею приложения настолько подробно, насколько это возможно (или дать ссылку на готовое приложение, если оно у вас уже есть). Приложения, в основе которых лежит карта, очень вероятно я не возьму на субботник, потому что не интересно.
2. По желанию дать референсы того, что нравится.
3. Быть готовым к тому, что результат субботника и исходное задание будут доступны общественности.

Участие абсолютно ФО ФРИ

Из всех заданий на дизайн, пришедших до субботы, я вибираю одно; в субботу рисую; в воскресенье выкладываю результат в свой блог и на Дрибл.

Бонус: если вам понравится результат, нарисованный по вашему заданию, с радостью нарисую для вас всё приложение целиком. Но уже не фо фри, конечно.

Буду проводить апп-субботники пока есть задания или пока не надоест. Поехали.

Я очень люблю задаваться вопросами типа «А что, если...?».

Ну, например:

1. А что, если лет через 500 Венецию затопит или наоборот уровень моря понизится, цивилизация и вся информация о ней сгинет, и будут археологи новой цивилизации ломать голову, отчего двери в дома находятся на высоте нескольких метров от уровня тротуара (дна каналов)?

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

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

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

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

Системы сеток, как и всё автоматизированное, — отстой, потому что отключают мозг дизайнера.

Существует много различных систем сеток — 12-, 16-, 24-колоночные и прочие. Выглядят они, например, вот так:

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

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

Всё зависит от размеров элементов и их вида:

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

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

И совсем беда если страница должна иметь более сложную вёрстку, нежели простой четырёх- или трёхколоночник. Например, левый широкий столбец с плиткой фотографий + боковой столбец:

Очевидно, что заданный сеткой шаг колонок тут не подходит и нужно уменьшать отступы между картинками основного столбца и увеличивать расстояние между основным и боковым столбцом. Есть ли такая система сеток, позволяющая всё это сделать? Конечно — 1000-колоночная сетка пикселей.

Переехал на форэваэлон стэндэлон-блог. Все старые заметки доступны в ЖЖ. Теперь буду писать только сюда.