АРМАДА
Как дизайнерам побороть страх кода
Новая тема Написать ответ

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 6938
Обратиться по нику
# Добавлено:Пт Июл 31, 2015 1:50 pmДобавить в избранноеОтветить с цитатой
Дизайнеры продумывают и создают интерфейсы, воплощая в них решения пользовательских сценариев. Для работы над ними есть много полезных инструментов: например, Sketch, Macaw, Edge Reflow или Hype. Но основным инструментом многих дизайнеров остаётся редактор фотографий. Нельзя сказать, что это самый удобный инструмент, но лет 10 назад выбора особого не было. А сейчас им продолжают пользоваться по инерции.

Обучаясь работе с кодом, вы с каждым новым знанием расширяете свои возможности

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

Я расскажу о мощном инструменте для работы над интерфейсами, который недооценён многими дизайнерами из-за высокого порога входа. Речь пойдёт о веб-технологиях: HTML, CSS и JS.

Преимущества работы с кодом

Главное преимущество дизайна при помощи вёрстки — возможность работать напрямую с данными. Наибольшую выгоду это даёт в работе над повторяющимися элементами.

Работая с вёрсткой, вы можете в полуавтоматическом режиме взять подходящие данные с любого сайта и оформить их по своему желанию. Есть даже готовые визуальные редакторы для получения данных, такие как kimonolabs.com и import.io.

Также легко вы сможете поменять оформление одновременно всех карточек. Например, сделать их не вертикальными, а горизонтальными или переместить цену к рейтингу. Такой подход позволяет за час легко перебрать 5–6 совершенно разных оформлений, проверяя, как в них смотрится каждая карточка.

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

Умея верстать и программировать, вы можете создать прототип, которым можно пользоваться как настоящим продуктом

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

Умея верстать и программировать, вы можете создать прототип, которым можно пользоваться как настоящим продуктом — не просто демонстрировать его поведение, а получать от него реальную пользу. Например, для Школы дизайна я создал прототип приложения для заучивания имён и за три поездки в метро и одну субботнюю очередь в «Ашане» выучил всех слушателей моей секции по именам.

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

Люди, которые изучали вёрстку 5–7 лет назад, могут ещё помнить статьи «10 способов сверстать скруглённые углы». Да, раньше вёрстка была непростым делом, так как для повторения элементарных вещей из графического редактора нужно было обладать опытом и терпением.

Появление CSS3 и HTML5 изменили это. Теперь есть свойства для градиентов, скруглённых углов, множественных теней, разных режимов наложения, блёра и много чего ещё. Если вы пробовали верстать лет 5 назад, почитайте список современных свойств, чтобы увидеть много новых возможностей.

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

Пользу от владения веб-технологиями вы получите уже с первых шагов, и чем дальше — тем больше. У этого инструмента, в отличие от других, нет потолка. Вам всегда есть куда развиваться, и какая бы задача ни возникла, вы сможете узнать достаточно, чтобы решить её.
Реальный конверт с реальной Фарма ПП! Skype: cristina.rx2, ICQ: 676017111, Jabber:[email protected]
Новая тема Написать ответ    ГЛАВНАЯ ~ НОВОСТИ ИНТЕРНЕТА

Перейти:  





Генеральный спонсор



Партнеры