9 безглуздих способів відкрити .sketch-файл. І один нічого такий

Отже: потрібно відкрити .sketch-файл, створений програмою Sketch. Тієї самої, яка є тільки на повне mac ' ах.

А повне mac ' a немає. Є тільки Windows і цей дурний .sketch-файл, який хтось прислав. І у цього когось Mac є. А в тебе немає. Тільки Windows.

Читати далі →

4 правила роботи в Sketch над великими проектами

image
Поява редактора Sketch сильно полегшило роботу дизайнерів. Артборды, Символи, Стилі, велика кількість плагінів і інтуїтивно зрозумілий інтерфейс — все це зробило нас трохи щасливішими. В цій статті спробую навести правила і прийоми, які виробив при роботі над проектами, адже важливі не тільки інструменти, але і правильне їх використання.
Читати далі →

Проектна папка дизайнера. Частина 2

image
Вивчивши коментарі до попереднього посту про проектної папки, вирішив перебудувати процес, пов'язаний з версіями файлів та їх зберіганням. Розумні люди говорили, що в наш час неправильно дублювати файлики вручну, створюючи архів версій, а потрібно користуватися сучасними технологіями Git, Subversion і подібними. В цьому пості напишу про систему до якої прийшов і з задоволенням тепер користуюся. Я став спокійнішим, їм краще і міцніше сплю, адже тепер я зовсім не переживаю за робочі файли і їх збереження. Залишилося стати хорошим дизайнером.
Читати далі →

Дизайн багатомовних додатків

Уявіть собі: ви вперше знайомитеся з новим додатком. У відгуках на Твіттері всі сходять від неї з глузду, кажуть, що воно чудове, чудове, все життя ним змінило.

Ви запускаєте додаток і бачите наступне:



Хм. Щось тут не так. Зверху вбудоване відео, але текст в ньому — мовою, якої ви не розумієте. Формулювання якісь дивні, а напис на кнопці навіть не влазить на саму кнопку. Як таке може подобатися людям?

Виявляється, справа в тому, що додаток спочатку створювалося не на вашій рідній мові. Його розробили на ельфійське, а потім вже перевели. Більшість людей використовує ельфійську версію і не знає, як все це виглядає на вашій мові.

Читати далі →

Кейси: розробка специфікацій і гайдлайнов (web ui kit)



Сьогодні я поділюся досвідом розробки графічної документації по гайдлайнам. Це виявилося моє друге завдання для Viline. І як Ви не пам'ятаєте з першої частини, я робив редизайн сторінки відео-курсу. У даній статті я опишу процес розробки стилістики всіх елементів і різних станів. Придумаю і сформулюю деякі правила, щоб інтерфейс вийшов збалансованим і доступним з урахуванням аудиторії…

Читати далі →

Введення в систему 8-піксельних сіток

Будь-якого дизайнера, над чим би він не працював — сайтами, журналами або мобільними додатками, напевно, доводилося чути термін «сітка». Існують сітки для всіляких варіантів розташування контенту. Ми застосовуємо стовпчик сітки, щоб вибудовувати контент по горизонталі, сітки базових ліній, щоб вирівнювати блоки тексту по вертикалі, гнучкі (soft) та жорсткі (hard) сітки — в залежності від того, наскільки суворо збираємося їх дотримуватися. Я зацікавився системою 8-піксельних сіток, коли почув, з яким захопленням говорить про неї Брін Джексон, і вирішив подивитися, які переваги вона може дати моїм дизайнам (і чи взагалі).




Читати далі →

Мобільний досвід Яндекса в трьох відеокурсу: дизайн, розробка, інтерфейси

У минулому році Яндекс провів експериментальний освітній проект, який отримав назву «Мобілізація». Наша мета була в тому, щоб учасники попрацювали у цій команді і створили справжній продукт — причому продукт мобільний. «Мобілізація» об'єднала Школу мобільного розробки, Школу менеджерів, Школу мобільного дизайну і Школу розробки інтерфейсів
image
Ми запросили 126 студентів з 25 міст; 91 учасник успішно завершив програму. Перший етап складався з лекцій, другий — з тієї самої командної роботи. Зазвичай студента оточують люди тієї ж спеціалізації, що і він сам: менеджери навчаються разом з менеджерами, дизайнери — з дизайнерами і т. д. Але в реальності вам потрібно хоча б по одному представнику кількох професій. У кожну команду увійшли студенти різних шкіл: дизайнер, менеджер і один-два розробника.
Лекції студентам читали співробітники Яндекса, які кожен день стикаються з реальними завданнями і роблять програми для мільйонів користувачів. Спеціально для читачів Хабра ми зібрали повну програму курсу за мотивами лекцій «Мобілізації».
Читати далі →

Інтуїтивний дизайн проти вірусного


Інтерфейс Snapchat бентежить багатьох користувачів. Не в докір старшому поколінню, простежується така тенденція: люди, які переступили певний віковий рубіж, з великим трудом розбираються в самих базових функціях цього додатка — заміни осіб, наприклад. Я вже збився з рахунку, скільки людей плакалися мені щодо Snapchat. «Нічого не розумію», — вигукують вони. «Чому все так складно?»

Я тут, щоб заявити: незрозумілий дизайн Snapchat — це не баг, а фіча. Як і у випадку з Tinder, це дизайн, який ставить своєю метою затягнути користувача і підштовхнути його до того, щоб він ділився досвідом з оточуючими. Насправді, це одна з ключових складових гучного успіху Snapchat.

Читати далі →

Створення музичних інтерфейсів

Дзвінок будильника, характерний писк, з яким відкриваються дверцята машини — ми постійно взаємодіємо з технікою за допомогою звуків. Тим не менш, у багатьох зберігається переконання, що інтерфейс транслює інформацію переважно через вікно, в той час як величезний потенціал мови звуків залишається без уваги.



Я займаюся дизайном вже 16 років, а у вільний час пишу музику. Володіння цими навичками ствердило мене в думці, що інтерфейси повинні поєднувати в собі як мінімум звук і зображення. Команда з компанії Udemy, де я зараз працюю, в даний момент розробляє новий підхід до навчання. В ході мозкового штурму виникла ідея підключити звукові сигнали до проміжним екранів. Я захопився і почав експериментувати з синтезатором and MIDI-семплами, щоб забезпечити користувачеві аудиофидбэк в процесі проходження та завершення курсу. Ми пробували різні інструменти, акорди і темп. Складність полягала в тому, щоб аудіоконтент осмислено демонстрував прогрес і разом з тим, висловлював цінності нашої компанії. Які звуки можуть розповісти про нас? У результаті ми зупинилися на коротких, ненав'язливих мотиви в ля мажор, награних на маримбе та арфі.


Читати далі →

Серйозне проектування серйозних сайтів. Частина 2. Візуалізація

Це друга частина статті про проектування великих сайтів. У ній ми розповімо про візуальну частину проектування, про інтерфейси. Якщо ви не читали першу частину, то рекомендую це зробити тут: habrahabr.ru/company/SECL_GROUP/blog/318598

Динамічний прототип


Рис. 9. Демонстрація динамічного прототипу для проекту «Маркетплейс».

На цьому етапі ми переходимо від аналітики до інтерфейсів, до візуальної частини. На основі Mind map необхідно спроектувати інтерфейси для кожної функції і сторінки. Таких інтерфейсів в нас буде багато, від декількох десятків до декількох сотень унікальних прототипів, а ще є розкадровки, коли одна сторінка може мати ряд станів, спливаючих вікон, що випадають блоків і т. д. У процесі всі прототипи об'єднуються в один великий динамічний прототип і зв'язуються між собою.

Читати далі →