Проектирование для не дизайнеров

Например, проектировщик заботится не только о том, что пользователь может видеть на экране, но и о том, что пользователь в конечном итоге увидит в ответ на какое-то событие. Событие может быть чем-то вроде щелчка мыши, завершения таймера или даже возникновения ошибки. Мы должны заботиться о том, как продукт будет реагировать на то, что происходит, когда пользователь взаимодействует с ним. Хотя наша работа обычно отображается на двухмерном экране, мы должны мыслить как минимум в четырех измерениях.

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

В каждом из этих слоев может быть множество других уровней, каждый из которых требует различных знаний, навыков и специализаций. Например, если вы группируете два верхних слоя (Пользовательский интерфейс и Архитектура навигации), вы находитесь на территории UX-дизайнера, потому что их основная задача - оценить, как эти элементы работают или не работают на благо Пользователь. Группировка двух нижних слоев дает вам дизайн системы.

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

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

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

1. Знай свои сильные стороны

Это очень помогает, если ты уже знаешь, в чем ты лучше. Ты хорош в кодировании? Затем сосредоточьте 80% ваших производственных усилий на кодировании. Ты хорошо рисуешь? Затем сфокусируйте 80% ваших производственных усилий на этом. Ты хорош в обоих? Воспользуйтесь этим преимуществом и найдите кого-нибудь, кто будет заниматься делом. Кстати, знать свои сильные стороны также означает выявление своих слабых мест, и именно на этом вы должны сосредоточить 80% своих усилий на обучении, чтобы вы могли их устранить.

2. Объединиться

Независимо от того, насколько вы экономны или жадны, этот совет, который вы получили в дошкольных учреждениях и которым приятно поделиться, на самом деле довольно твердый. Проще говоря: хотите ли вы работать на одном веб-сайте в месяц за $ 2000 или же вы хотите работать на веб-сайтах 20 в месяц за долю 20% в $ 40,000? Наличие талантливой команды сотрудников означает, что вы можете сделать больше за меньшее время, при условии, что вы все можете хорошо работать вместе (это еще одна вещь, которую мы изучили в дошкольных учреждениях).

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

Просто убедитесь, что, если вы привлекаете аутсорсинг, вы не получите свой талант от таких конкурентных сайтов, как O-Desk и E-Lance. Они полны подражателей и бездельников, поэтому найти настоящий талант - все равно что искать алмаз в огромной угольной горе.

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

Так что за места? Вот несколько предложений:

  • StackOverflow для кодеров
  • ProBlogger для авторов контента
  • Сеть художников-фрилансеров для иллюстраторов
  • Toptal для UI, UX и визуальных дизайнеров

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

Имейте в виду, что большинство людей переоценивают свои навыки, поэтому не обращайте особого внимания на то, что люди говорят, что они могут сделать. Делайте больший акцент на то, что люди показывают, что они могут сделать. Также следует помнить о каскадировании. Что это такое? Что ж, когда вы передаете на аутсорсинг кому-то, кто, в свою очередь, передает эту работу кому-то, кто, возможно, сам выполняет эту работу на аутсорсинге ... вы можете увидеть, какой здесь риск.

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

3. В крайнем случае, вы всегда можете отследить

Используя комбинацию GIMP и InkScape, вы можете создавать практически любой вид графического дизайна, который только можно придумать. Но если вы на самом деле не тот дизайнер, который умеет хорошо рисовать, вы всегда можете срезать углы и обманывать. Эта статья действительно повторяет все уроки, которые вы выучили в дошкольных учреждениях, не так ли? Но эй, зачем рисовать, когда ты можешь проследить, верно?

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

Трассировка, с другой стороны, все еще создает оригинальную работу, если конечный результат не слишком похож на оригинал. Но вам не обязательно отслеживать чужую работу в любом случае. Вы также можете отслеживать свои собственные оригинальные фотографии. Вы также можете использовать фильтры PhotoShop для преобразования фотографий в эскизы, но это не очень хорошо работает.

Давайте посмотрим, что техника в действии

В этом сценарии ваш клиент запросил создание логотипа мыши для своего веб-сайта, и это необходимо сделать в срочном порядке. Человек, который обычно делает все рисунки для вас, отсутствует и не может быть достигнут, и нет времени, чтобы нанять кого-то другого без огромного риска. Так что ты можешь сделать?

Хороший способ начать - просто сфотографировать вашу мышь.

Затем отредактируйте изображение в GIMP или PhotoShop, чтобы изменить его размер до более практичного и убрать всю информацию о цвете. Я обнаружил, что обесцвечивание с настройкой Luminosity дало лучший результат с точки зрения уменьшения тени.

Экспортируйте изображение как новый JPG и закройте редактор. Откройте новое изображение в InkScape.

Нажмите на изображение, чтобы выбрать его, а затем нажмите Ctrl + X, чтобы отправить его в буфер обмена.

Теперь выберите «Слои» в меню «Слой» и нажмите кнопку, чтобы добавить новый слой, который можно назвать «фоновым».

Нажмите Ctrl + Alt + V, чтобы выполнить операцию «Вставить на месте». Это вернет изображение в то же положение, в котором вы его вырезали (если вы просто делаете обычную вставку, оно может быть смещено).

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

Добавьте новый слой, который вы можете назвать «trace».

Теперь просто выберите карандашный инструмент (нарисуйте линии от руки) и аккуратно обведите линии. Это будет работать намного проще, если вы используете стилус и графический планшет, но все же это можно сделать с помощью мыши. Это может помочь увеличить изображение. Делайте работу в небольших разделах, чтобы сделать ее менее утомительной при исправлении ошибок.

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

Теперь у вас должно быть близкое к идеальному очертание предмета изображения. В зависимости от задания вы можете использовать заливку и заливку или оставить его как монохромное контурное изображение.

Скрыть или удалить фоновый слой и сохранить этот шаблон в формате SVG.

Теперь вы можете немного поиграть с изображением. Может быть, добавить немного цвета.

Тогда текстура.

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

Теперь просто добавьте артефакты логотипа, например:

И вуаля! Готовый шедевр. Это обычно тот момент, когда раздраженный клиент звонит вам и жалуется на то, что вы поставили компьютерную мышь, когда на самом деле им нужна была мультипликационная мышь. Это тема для нашей следующей статьи, Работа с трудными клиентами.

изображение заголовка любезно предоставлено Ramotion

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.