С чего начать дизайн сайтов? Рассказываем про свой стартовый шаблон в Figma — Дизайн на vc.ru
Мы сделали стартовый шаблон для наших проектов. Рассказываем подробности, а в конце статьи оставляем на него ссылку.
14 102 просмотров
Привет! Меня зовут Александр Щетинин. Я дизайнер в The Architect — диджитал-компании, которая создает продукты и комплексные решения для застройщиков в цифровой среде.
Мы сделали стартовый шаблон для наших проектов. Рассказываем подробности, а в конце статьи оставляем на него ссылку.
Для чего нужен стартовый шаблон
Его цель – систематизировать дизайн. Это минимизирует потерю времени – любой дизайнер может быстро вникнуть в проект.
Как было раньше
Каждый дизайнер делал новый проект в Figma и наполнял его. Когда к проекту подключался другой человек, он был вынужден постоянно спрашивать, где находится тот или иной элемент. Мы тратили время на лишнюю коммуникацию и поиски.
Как сейчас
Есть понятная система наименований, размеров для экранов и компонентов. Плюс у каждого проекта появляется своя обложка – все проекты в списке выглядят единообразно и стильно.
Стартовые шаблоны наших проектов в Figma
В начале проекта дизайнер дублирует шаблон и начинает заполнять все страницы по простым шагам.
Из чего состоит шаблон
Cover
Или обложка проекта. Сюда вставляем логотип клиента и название проекта.
Creative concept
Перед созданием сайта мы разрабатываем креативную концепцию. Продумываем, как сайт будет отражать посыл бренда или проекта и через какие элементы транслируется информация.
Prototype
В прототипе собираем будущую структуру сайта, формируем страницы, которые будут использоваться, и наполняем их содержанием. Другими словами, создаем UX – user experience.
Главное правило – не нужно делать из прототипа дизайн, все должно быть схематично. Задача здесь – сгенерировать понятный интерфейс и адаптивный продукт, тогда пользователю будет легче совершить целевое действие.
В конце обязательно настраиваем все ссылки на страницы, чтобы презентовать прототип клиенту.
Desktop, Tablet, Mobile
На этих страницах делаем дизайн. Здесь есть свои правила – давать имена компонентов, групп и фреймов. Об этом подробнее.
UI kit
В ките содержатся все элементы и компоненты дизайна. Дизайнер создает под каждый проект свои компоненты и помещает их в фреймы.
На странице уже есть базовые компоненты – поля ввода, кнопки, сет стандартных иконок, набор шрифтов для компьютера и телефона, набор отступов и стандартная сетка в 1200 px.
Archive
В архиве хранятся элементы и страницы, которые не используются, но удалять их не хочется. Например, разные версии дизайна. Здесь правило одно – необходим строгий порядок в расположении.
Нюансы, которые нужно знать
Как называть цвета
Для названия цвета нужно использовать формулу «Категория/название».
В шаблоне уже есть нужные стандартные цвета:
theme – основные цвета дизайна;
- primary – основной акцентный цвет,
- secondary – второстепенный цвет,
- text – цвет для текста,
- gray – серый.
functional – цвета, имеющие функциональный смысл: «ошибка», «успех»;
brand – комплект оттенков, сочетающихся с основной гаммой;
gradients – градиенты.
Как называть текстовые слои
Для названия цвета нужно использовать формулу «Категория/название».
Стандартный список всех текстовых стилей
Какие размеры фреймов использовать
Мы используем пять популярных экранов: 1280, 980, 640, 480, 320px.
Про отступы
В файле есть базовый компонент – offset – он содержит варианты отступов. Все они кратны 8px.
Как пользоваться стартовым шаблоном
Просто скопируйте шаблон, измените название и начните его заполнять.
В итоге мы смогли систематизировать дизайн и ускорить workflow за счет готовых компонентов и стандартизации. Да, мы не открыли Америку, а просто показали, как пользуемся Figma. Если у вас есть способы, позволяющие еще больше оптимизировать процесс дизайна сайтов и приложений, будем рады их услышать.
Подписывайтесь на дизайнерский дайджест от команды The Architect. В нем раз в две недели делимся своими находками, обучающими материалами и полезными фичами.
И на нашу страницу в Instagram 👋
Проектирование сайта: что такое, из каких этапов состоит
Подпишись на наш telegram-канал
Не пропусти новые полезные статьи и держи под рукой старые.
В статье представлены базовые принципы проектирования сайта и мобильного приложения. Определение проектирования сайта, из каких этапов состоит, сколько закладывать времени.
Этапы разработки сайтаЧтобы понять, что такое проектирование сайта, давайте кратко о том, из каких этапов состоит разработка сайта. Укрупнённо она состоит из пяти пунктов:
- Проектирование сайта
- Дизайн
- Вёрстка и программная часть
- Наполнение контентом + тестирование
- Запуск
В чистом виде такой процесс встречается крайне редко. Обычно несколько этапов проходят параллельно либо проект разрабатывается итерациями. Но сейчас, на самом старте можно опустить эти детали.
Что такое проектирование сайтаПроектирование сайта — это первый и ключевой этап разработки сайта. И, по-хорошему, как раз с него нужно начинать разработку. И это правильный подход, который сэкономит вам много денег, времени и нервов. Многие начинают сразу с дизайна и потом получают сайты, которые не решают задачи бизнеса, не продают и вообще не понятно для чего сделаны.
В процессе проектирования мы определяем зачем нужен сайт, как он будет решать проблемы и боли компании и её клиентов, какие в нем будут разделы и как они будут выглядеть. То есть продумываем полностью весь сайт в самом начале, «на берегу». После, уже по продуманному сценарию, садимся и спокойно разрабатываем дизайн, программную часть и наполняем контентом и тд. То есть проектирование сайта – это база, основа для дальнейшей разработки.
Пример про океан
Он не из digital, но очень наглядно отражается суть проектирования.
Представьте, что перед вами океан. Вам нужно построить подводную лодку, на которой будут передвигаться морских жители. Под водой свой огромный мир, свои правила, законы, морские обитатели. Вы в общем виде понимаете, что он из себя представляет. Но деталей, самих законов не знаете. Кто они — эти морские жители? Чего хотят, как живут, какая подводная лодка им нужна? По каким законам передвигается подводная лодка? Какой у неё должен быть вес, водоизмещения? Какой люк?
Чтобы построить лодку, которая будет не только плыть под водой, но и выполнять все требуемые от неё функции, вам нужно нырнуть под воду, все рассмотреть. Изучить, поспрашивать всех морских обитателей, посмотреть другие подводные лодки. Изучить законы, которые работают в океане. После на основе этих данных сделать план-схему будущей лодки и передать её инженерам-конструкторам для строительства.
Считайте, что проектирование это именно об этом. Быть первооткрывателем, изучить все с нуля, понять, что и как работает в этом мире и предложить лучшее решение из всех возможных.
Другими словами, проектирование сайта — это погружение в мир компании, для которой вы делаете сайт. Изучение окружения, условий, в которых она работает. Составление схемы и плана дальнейшей разработки.
Этапы проектирования сайта
Проектирование сайта условно можно разбить на десять этапов. Я выстроила их в виде последовательности работ.
- Выясняем для чего делаем сайт
- Сбор данных
- Исследования: метод персонажа, бенчмаркинг, юзабилити-тестирование и др.
- Информационная архитектура сайта
- Userflow – сценарии использования сайта
- Прототипы интерфейса
- Проектирование программной части
- Техническое задание
- Контент-план
- Customer Journey Map (CJM)
Самые важные этапы – первый, второй, четвертый и шестой, они выделены жирным шрифтом. Без определения целей, сбора данных, разработки структуры и прототипов не обойтись.
Все остальные нужны, важны, но их можно добавить/убрать в зависимости от свободного времени и бюджета проекта. Если вам сложно разобраться, то начните с выполнения только этих. Остальные добавите немного позже, когда освоите ключевые.
Зачем нужно проектирование
Как доказать заказчику или руководителю компании, что новый сайт или приложение необходимо проектировать? Зачем тратить на это деньги и время? Ниже три веских аргумента.
1. Мы точно сделаем тот сайт, который нужен компанииНа старте проектирования вам нужно будет ответить на вопрос «Зачем нам сайт? Чего хотим добиться?» Если не знать куда мы хотим прийти, высок риск прийти не туда. И кажется, что и так все понятно. Но обычно в процессе разработки сайта цели растекаются, нужно все и сразу. И этот раздел, и этот. Или наоборот что-то забывается. И в итоге получаем сайт компании, а не решение проблем бизнеса. По-простому — слив бюджета, потеря денег, клиента, разочарование и уверенность в том, что «онлайн не работает».
2. Не придется гадать, как сделать правильноРеальная история из моей практики. Переговорка, в ней маркетолог, директор, бухгалтер и коммерческий обсуждают новый сайт. Что разместить на главной странице сайта, какие пункты в меню. И спорят час или два.
Бухгалтер хочет добавить пункт меню «Документы» и разместить там уставные и реквизиты. Потому что все контрагенты уже замучили её запросами и звонками с просьбами эти документы отправить. Коммерческий против, потому что этот пункт будет отвлекать от основного — продажи услуг. Бухгалтер работает с основания компании и влияния на директора у неё больше, чем у коммерческого. Директор соглашается, пункт меню добавляют.
Конечно, это очень глупое решение. Страницу «Документы» разместить на сайте нужно, но уж точно не в первом приоритете. Перенести в раздел «О компании», например. Но какие у вас аргументы, чтобы отказать бухгалтеру? А вот если бы вы провели исследование методом персонажа и спросили реальных клиентов, что они ожидают увидеть на сайте, вы убедили бы всех в обратном.
3. Не придется переделывать дизайн и верстку сайтаЭто очень больно, но если вы не обсудили, что будет на каждой странице сайта на этапе разработки прототипов, то скорее всего придется всё это сделать в дизайне. И переделать часть макетов дизайна. Замучить дизайнера, себя, потратить огромное количество времени.
Ещё хуже — сверстать дизайн и потом, по-живому, в вёрстке все двигать. Тогда переделывать и дизайн, и программную часть. Сравните: поменять поля в калькуляторе услуг в ч/б картинках или на листочке, или изменить дизайн онлайн-калькулятора и программировать его снова. Уже чувствуете усталость? Плюсаните недовольство клиента, сорванные сроки и выход проекта в минус. У нас таких примеров было не много, но были. Это всегда эмоциональнотяжело. Я уж не говорю про деньги и время.
Слева прототип, справа дизайн одной и той же страницы. Что проще поправить?
Сколько времени закладывать на проектирование сайта
Краткий ответ — все зависит от сайта. У вас может быть сервис с личным кабинетом для трейдеров или лендинг по продаже печей-буржуек. Вы потратите разное время на выполнение этих задач. Вилка: от двух дней до двух месяцев.
Подробный ответ — в табличке по типам сайтов. Надеюсь, так проще ориентироваться.
Сайт |
Время на проектирование |
Лендинг |
2 —3 дня |
Корпоративный сайт |
5 — 7 дней |
Корпоративный сайт с каталогом услуг/продуктов |
6 — 10 дней |
Интернет-магазин |
10 дней |
Веб-сервис с личным кабинетом |
14 — 20 дней |
Веб-сервис высокой сложности с минимум аналогов на рынке, интеграцией с внешними системами |
от 25 дней до нескольких месяцев |
Мобильное приложение |
10 — 20 дней |
Сюда включено выполнение всех пунктов из списка выше кроме CJM, в исследованиях только одно – методом персонажа. Вам нужно заложить эти рабочие дни в бюджет и сроки проекта.
Подведём итоги
- Проектирование сайта — это первый и ключевой этап разработки. Это база, основа. В процессе проектирования мы определяем зачем нам сайт, какие в нем будут разделы и как они будут выглядеть.
-
Цели, сбор данных, структура и прототипы — обязательно. Всё остальное — по желанию и бюджету.
-
-
Проектирование нужно, чтобы не переделывать сайт на этапе дизайна и программной части. Чтобы не гадать какой раздел и где разместить. Чтобы не слить бюджет проекта.
Остались вопросы, нужен совет по проекту? Добавляйтесь в закрытый телеграм-чат для проектировщиков. Там мы обмениваемся опытом, отвечаем на вопросы.
Екатерина
Титаева
Специализируется на проектировании интерфейсов сайтов и мобильных приложений.
Поделись с друзьями
Как открыть собственную компанию по веб-дизайну
Решение начать бизнес по веб-дизайну или разработке — непростая задача. Чтобы начать работать на себя, требуется определенная степень усердия, упорства и амбиций. На этом пути вы столкнетесь с некоторыми очень трудными решениями, которые могут повлиять на успех и рост вашего предпринимательского предприятия.
Чтобы помочь вам начать работу, мы собрали наши самые популярные статьи и руководства в обширную коллекцию. Эти посты охватывают все этапы вашего пути, включая работу фрилансером, поиск клиентов и управление ими, а также советы, как вывести свои творческие усилия на новый уровень. Если вы думаете о создании собственной дизайнерской фирмы, прежде чем приступить к работе, ознакомьтесь с приведенными ниже ресурсами.
Удачи!
Развивайте свой бизнес с помощью партнерской программы Shopify
Независимо от того, предлагаете ли вы услуги в области маркетинга, персонализации или веб-дизайна и разработки, партнерская программа Shopify поможет вам добиться успеха. Присоединяйтесь бесплатно и получите доступ к возможностям распределения доходов, инструментам для развития вашего бизнеса и увлеченному коммерческому сообществу.
Зарегистрироваться
Начало пути фрилансера Обучение основам фрилансаПрежде чем вы начнете управлять агентством, полным дизайнеров, вы, скорее всего, начнете свой путь в качестве независимого фрилансера. Если вы никогда раньше этим не занимались, работа на фрилансе может стать проблемой — теперь вы сами себе начальник и отвечаете за все аспекты ведения бизнеса, от поиска клиентов до создания прототипов каждого дизайна и выставления счетов (нужна помощь с прототипированием? Узнайте подробнее о быстром прототипировании и ознакомьтесь с отличными инструментами для прототипирования).
В этом разделе мы поделимся советами и идеями по управлению переходом и достижению успеха в качестве фрилансера.
Осуществление переходаКак только вы решите, что готовы пойти по пути фриланса, перед вами встанет множество проблем и задач, которые, вероятно, будут для вас чужды. Мы вышли и спросили некоторых из наших партнеров, как они осуществили переход — вот некоторые из их советов.
- Мой первый год работы фрилансером
- Как один подросток из Шри-Ланки изменил свою жизнь с помощью фриланса
- 7 секретов, как совместить внештатные проекты с вашими 9до 5
- 10 успешных веб-дизайнеров делятся своими лучшими советами для начинающих фрилансеров
- 5 профессиональных лайфхаков, чтобы стать больше и лучше в вашей карьере внештатного дизайнера
- Руководство фрилансера по отпуску
- Развивайте свою сеть фрилансеров: решайте проблемы, получайте клиентов
Понимание того, что нужно для получения оплаты в качестве фрилансера, поможет вам добиться успеха. Эти стратегии и методы, от ценообразования проектов до выставления счетов клиентам, помогут обеспечить прибыльность вашего нового делового предприятия.
- Почему фрилансерам нужно заботиться о бухгалтерии
- Руководство веб-дизайнера по стратегиям ценообразования
- 7 советов по расчету ставки фрилансера
- Почему у вас недозарядка и как это исправить
- 8 быстрых советов по заключению пуленепробиваемого внештатного контракта
- Почему вы должны выставлять счета на 100 % вперед
- 7 Тактика работы с просроченными платежами и неуплатой
- Написание счета-фактуры для фрилансера, благодаря которому вам будут платить быстрее
Даже самому организованному фрилансеру иногда нужна дополнительная помощь. Существует множество задач, которые вы можете упростить и даже автоматизировать с помощью программного обеспечения. Мы собрали некоторые из наших любимых инструментов, которые могут помочь любому фрилансеру стать более организованным и продуктивным.
- 6 лучших приложений для отслеживания времени для дизайнеров, разработчиков и агентств
- 12 бесплатных инструментов для удаленных разработчиков и дизайнеров
- 9 инструментов, которые помогут вам эффективно сотрудничать в качестве фрилансера
- 5 инструментов для выставления счетов фрилансерам без головной боли
- 5 бесплатных инструментов CRM, которые помогут организовать ваш бизнес веб-дизайна
- 5 бесплатных (и увлекательных) онлайн-ресурсов для обучения дизайнеров и разработчиков
- 5 основных инструментов фрилансера на 2018 год
Теперь, когда вы сделали прыжок во фриланс, ваш следующий шаг — создать основу, которая поможет вам продвигать свой бизнес. Ваш веб-сайт — отличное место для того, чтобы начать развивать и продвигать свой бренд. Мы включили несколько полезных советов ниже, чтобы получить максимальную отдачу от веб-сайта вашего бизнеса и создать сильное портфолио веб-дизайна.
- Фриланс 101: как продвигать малый бизнес
- Что такое личный брендинг? Руководство фрилансера
- 20 запоминающихся портфолио веб-дизайна, которые вдохновят ваш собственный веб-сайт
- Важность инвестирования в собственный веб-сайт
- Как создать привлекательное портфолио веб-дизайна
- Полное руководство по получению эффективных отзывов клиентов (с 6 простыми вопросами)
- Как написать пример веб-дизайна, который привлечет новых клиентов
- Почему ваша контактная страница является самой важной частью вашего веб-сайта портфолио
- 3 простых способа, которыми ваше агентство может использовать контент-маркетинг для создания лучшего бренда и поиска новых клиентов
Поиск новых клиентов
Ваш бизнес настроен, и ваш веб-сайт работает — теперь все, что вам нужно, это несколько клиентов.
Поиск новых клиентов — одна из самых больших проблем, с которыми вы столкнетесь, когда начинаете свой бизнес в области веб-дизайна. Существует бесчисленное множество тактик для получения новых контрактов, и мы включили несколько ниже, которые гарантированно помогут вам начать работу.
- Противоречивый подход к поиску первого клиента
- Как мотыльки на пламя: как привлечь (и удержать) клиентов своей мечты
- 7 идей контента, которые принесут доход вашему агентству
- Как социальные сети могут помочь вам развивать свой внештатный или агентский бизнес
- 4 забытых тактики поиска клиентов в автономном режиме
- Эксперты по веб-дизайну делятся своими советами по привлечению следующего клиента
- Стратегии успешного определения и победы в клиентских проектах
- В тебе нет ничего особенного: как выделиться на переполненном рынке
- Полное руководство по поиску клиентов для веб-дизайна
- 5 советов по проведению грандиозной встречи Shopify
Работа с клиентами
Хотя поиск клиентов и заключение сделок, несомненно, сложная задача, это только начало битвы. Настоящая работа начинается, когда вы начинаете работать над их проектами и управлять бюджетами, сроками и ожиданиями. В приведенных ниже статьях рассказывается о том, почему, что и как управлять отношениями с клиентами.
- Пять шагов к успешному управлению клиентами
- Как создать процесс приема клиентов, который сэкономит ваше время и избавит от головной боли
- Самые трудные вопросы клиентов и ответы на них
- Как убедить других в своем дизайнерском направлении
- 4 важных шага к построению прочных отношений с клиентами
- Руководство веб-дизайнера по адаптации клиентов
- Самые трудные вопросы клиентов и ответы на них
- Как создать процесс приема клиентов, который сэкономит ваше время и нервы
- 4 быстрых способа завоевать доверие нового клиента
Ресурсы по управлению проектами
Управление проектами — чуждый процесс для многих дизайнеров и разработчиков, особенно тех, кто работает фрилансерами. Чтобы вы могли построить прочные рабочие отношения с вашим клиентом, вам необходимо обеспечить максимально гладкий рабочий процесс вашего проекта, от создания эффективного описания проекта до предотвращения расползания объема. К счастью, мы собрали несколько статей, которые помогут вам создать свой набор инструментов для управления проектами.
- Управление бюджетом проекта: как сделать так, чтобы ваши клиенты были довольны
- Техническое задание: как отодвинуть прошлые предложения и привлечь больше клиентов
- Как составить внештатный контракт 101
- 3 организационных стратегии предотвращения расползания области действия
- Руководство веб-дизайнера по расписанию проектов
- Как написать краткое описание дизайна, чтобы ваши проекты веб-дизайна не отставали
- 4 способа усовершенствовать свой подход к творческому управлению проектами
Может наступить момент, когда вы почувствуете необходимость расширить свою внештатную деятельность до чего-то большего. Хотя развитие вашего бизнеса — это увлекательно, вам потребуются трудные решения и серьезное стратегическое мышление, чтобы превратить вашу работу, состоящую из одного человека, в бизнес с несколькими сотрудниками. В следующих постах вы найдете идеи и советы, которые помогут вывести ваш бизнес в области веб-дизайна или разработки на новый уровень.
- 10 советов по расширению бизнеса веб-дизайна
- 20 важных бизнес-уроков, которые мое агентство усвоило в 2016 году
- От фрилансера до агентства: советы по развитию вашей команды
- 8 практических советов по созданию креативного агентства и расширению бизнеса
- 7 лет бизнеса. 7 советов. Как «Мы делаем веб-сайты» стали номером 1
- Как Pixel Union диверсифицировала свои предложения услуг и увеличила свой бизнес в 10 раз
Ваши отношения с клиентами не должны заканчиваться после создания их сайта или приложения. Ваш путь к долгосрочным отношениям с клиентами вымощен добавлением дополнительных услуг помимо вашего основного предложения. Вас наняли для снижения показателя отказов в магазине; но вы можете предложить дополнительные услуги, чтобы постоянно повышать их коэффициент конверсии. Приведенные ниже статьи познакомят вас с некоторыми новыми возможностями, которые помогут расширить ваши услуги.
- Прибыльный дизайнер электронной коммерции
- Как внедрить юзабилити-тестирование во все, что вы делаете
- Работа на предоплате: почему выживание вашего девелоперского бизнеса зависит от постоянных клиентов
- Зачем, как и когда использовать юзабилити-тестирование
- Как выбрать правильную стратегию A/B-тестирования для ваших клиентов
- 5 простых отчетов Google Analytics, которые вы должны создать для каждого клиента
- Как создать последовательность сообщений электронной почты о брошенной корзине
- 6 социальных сетей, которые вы можете предложить своим клиентам
- 6 советов по созданию отличной веб-копии, которая конвертирует
Том 3: Создание прибыльного бизнеса в области веб-дизайна
Получите бесплатную копию тома 3: Создание прибыльного бизнеса в области веб-дизайна, отправленную на ваш почтовый ящик.
Указав свой адрес электронной почты, мы также будем отправлять вам маркетинговые электронные письма, связанные с Shopify. Вы можете отказаться от подписки в любое время. Примечание. Руководство не будет доставлено по электронной почте на основе ролей, например info@, developer@ и т. д.
Наши виртуальные винтики крутятся.
Обратите внимание, что доставка нашего электронного письма
до вашего почтового ящика может занять от
до 15 минут. Создайте свой бизнес с Shopify Начало работы с темами Shopify
Если вы работаете с клиентом электронной коммерции, Shopify предлагает простую в использовании платформу для создания магазинов электронной коммерции и шаблонов. Мы собрали следующие статьи, чтобы помочь вам ознакомиться с дизайном и разработкой темы Shopify.
- Обзор Liquid: язык шаблонов Shopify
- Объявление Shopify Примеры кода Liquid для партнеров
- Основной список ресурсов для разработчиков тем Shopify
- 4 основных совета по созданию вашей первой темы Shopify
- 3 простых шага для настройки локальной среды разработки тем Shopify
- Введение в Shopify Theming для разработчиков тем WordPress
- Лучшие практики разработки масштабируемых (и устойчивых) тем Shopify
- Shopify Жидкие учебники
Shopify также предлагает множество возможностей для разработчиков приложений. Если вы хотите создать приложение для магазина электронной коммерции или помочь продавцам Shopify в целом, вот несколько советов для начала.
- Как брендировать свое приложение Shopify, чтобы зарабатывать больше в App Store
- Как увеличить удержание пользователей на протяжении всего жизненного цикла использования приложения
- Как получить максимальную отдачу от новой системы дизайна Shopify Polaris
- Новые рекомендации и ресурсы для включения в список в магазине приложений Shopify
- Как создать токен API Shopify
- Как улучшить процесс адаптации вашего приложения Shopify
- Совет эксперта о том, как увеличить поддержку приложений в 10 раз
- Основной список ресурсов для разработки приложений Shopify
- Как создать приложение Shopify за одну неделю
- Essential App Marketing: 11 способов успешного продвижения вашего приложения
Сотни компаний, занимающихся веб-дизайном и разработкой, создали и расширили свой бизнес с помощью Shopify. От разработчиков приложений до специалистов по дизайну электронной коммерции партнерская программа Shopify предоставляет ресурсы, поддержку и технологии, необходимые для начала вашей карьеры в веб-дизайне. Ниже мы включили истории успеха некоторых дизайнеров и разработчиков в экосистеме Shopify.
- Как веб-разработчик из Индии бросил свою основную работу и создал агентство
- От Reddit к редизайну: как Fuel Made увеличила выручку одного продавца на 30%
- 2 Ребята. 6 месяцев. 7 приложений.
- Из любви к строительству
- Как Bluegg вышла из своей зоны комфорта с помощью перехода на Magento и увеличила конверсию продавца на 40%
- Как Shopify Plus Partner Createur помог перенести одного из ведущих интернет-магазинов Австралии
- Как сингапурская компания Jumpstart Commerce завоевывает мир
- Всегда слушай Мо: как Мохамед Али Агуэль стал суперзвездой образования в области электронной коммерции
- В поисках американской мечты: как Ethercycle добилась успеха с Shopify
Grow Volume 1: Руководство для начинающих по развитию вашего бизнеса
Получите бесплатную копию Grow Volume 1: Руководство для начинающих по развитию вашего бизнеса, отправленную на ваш почтовый ящик.
Указав свой адрес электронной почты, мы также будем отправлять вам маркетинговые электронные письма, связанные с Shopify. Вы можете отказаться от подписки в любое время. Примечание. Руководство не будет доставлено по электронной почте на основе ролей, например info@, developer@ и т. д.
Наши виртуальные винтики крутятся.
Обратите внимание, что доставка нашего электронного письма
до вашего почтового ящика может занять от
до 15 минут. Открытие собственной компании, занимающейся веб-дизайном, — важное дело
Будь то обучение внештатному бизнесу, поиск новых клиентов или рост вашего бизнеса до новых высот, этот обзор ресурсов — отличная отправная точка. Мы надеемся, что это поможет вам совершить прыжок и следовать за своей мечтой.
Удачи — у вас есть это.
Как начать бизнес веб-дизайна из дома
Веб-дизайнеры используют свое творческое мышление для разработки или редизайна веб-сайтов для своих клиентов. Это может включать в себя выбор цветов, шрифтов, макета и изображений, а также обеспечение функциональности сайта и легкости доступа к содержимому. Хотя веб-дизайнеров и веб-разработчиков часто называют взаимозаменяемыми, между ними есть определенные различия. Веб-разработчик отвечает за создание общей структуры веб-сайта с использованием таких языков программирования, как Java, HTML или CSS. Веб-дизайнер делает сайт привлекательным, привлекательным и удобным для пользователя. Чтобы воплотить свои проекты в жизнь, дизайнеры могут сами заняться разработкой или работать с разработчиком.
Есть две особенности, на которых сосредоточится большинство компаний, занимающихся веб-дизайном: UX (пользовательский опыт) и/или UI (пользовательский интерфейс). Как следует из названия, дизайнеры UX сосредотачиваются на пользовательском опыте — глубоко погружаясь в стратегию бренда, отзывы пользователей, Google Analytics, визуальный дизайн и тестирование. Дизайнеры пользовательского интерфейса концентрируются на элементах управления, используемых для взаимодействия с веб-сайтом. Они будут определять форму кнопок, значков, ползунков и полос прокрутки, устанавливая руководство по стилю для обеспечения единообразия на всем веб-сайте.
1
Прежде чем приступить к работе, вам необходимо понять, какие ресурсы вам потребуются и как на практике монетизировать свой бизнес. Ниже мы ответили на самые важные вопросы о клиентах, затратах и прибыли.
Как найти клиентов?
Чтобы стать успешным внештатным веб-дизайнером, требуется много терпения, решительности и самодисциплины. Вначале много вашего времени и усилий уйдет на привлечение первого клиента. Вот несколько шагов, которые вы можете предпринять, чтобы быстро начать создавать свой список клиентов.
- Общайтесь: Поделитесь своим портфолио на Facebook, Instagram, LinkedIn и Pinterest — это один из лучших способов продвижения вашего бизнеса. Социальные сети по своей сути являются визуальной платформой, позволяющей вам продемонстрировать свою прекрасную работу и доступную личность. Ссылайтесь на страницы, которые вы разработали, и используйте соответствующие хэштеги, чтобы постоянно взаимодействовать с вашей аудиторией. Вы также можете продемонстрировать свою работу на таких сайтах, как Zerply или Hunie.
- Обратитесь к местным жителям: Свяжитесь с вашими любимыми кофейнями, розничными магазинами или некоммерческими организациями в вашем районе. Хотя у них уже могут быть веб-сайты, могут быть возможности для улучшений и/или обновлений.
- Ознакомьтесь с торговыми площадками для фрилансеров: Toptal, AwesomeWeb и Behance — популярные торговые площадки, ориентированные на взаимодействие компаний с веб-дизайнерами. В своем профиле вы можете указать свое резюме, образцы работ, расценки и контактную информацию. Это также отличный способ для довольных клиентов оставить положительные отзывы.
- Дизайн целевых страниц: С помощью таких программ, как Paperform или Unbounce, вы можете создать серию «обычных» целевых страниц, чтобы продемонстрировать свои творческие способности, уровень навыков и диапазон.
- Найди свою нишу: Существует более 1,5 миллиарда активных веб-сайтов, и еще больше только и ждут своего создания. Таким образом, хотя спрос на веб-дизайнеров, безусловно, будет продолжать расти, конкуренция также высока. Поиск вашей конкретной области знаний поможет вам выделиться в уже переполненной профессии. Если у вас есть предыдущий опыт работы в розничной торговле или производстве, вы можете размещать рекламу для этих видов бизнеса — вы уже знаете язык, то, как люди работают в отрасли, и их целевую аудиторию.
Как бизнес веб-дизайна зарабатывает деньги?
Компания веб-дизайна обычно принимает работу на полный или неполный рабочий день, в зависимости от условий контракта и требуемых обязательств. Например, некоторые клиенты будут нанимать вас для создания и обслуживания всего веб-сайта, в то время как другим может потребоваться только базовая настройка или редизайн. Кроме того, для завершения проекта вам может понадобиться помощь программиста, разработчика и/или графического дизайнера.
Большинство дизайнеров предпочитают взимать почасовую оплату, поскольку проекты часто могут занимать больше времени, чем планировалось, и клиенты часто просят внести несколько изменений, прежде чем веб-сайт будет завершен. Если вы решите предложить фиксированную ставку, убедитесь, что вы поговорили с клиентом, прежде чем договориться о цене — это гарантирует, что вы понимаете его потребности в бюджете и требования проекта.
Сколько нужно денег, чтобы начать?
Ваши начальные затраты будут в значительной степени зависеть от того, какое оборудование и программное обеспечение у вас уже есть. Если вам необходимо приобрести новый компьютер и программное обеспечение, ваши первоначальные затраты могут быстро возрасти.
Программное обеспечение для дизайна абсолютно необходимо для любого бизнеса веб-дизайна. Однако вам также понадобится компьютер, который может поддерживать и эффективно запускать программное обеспечение. Надежный ноутбук будет стоить минимум 1000 долларов. Weebly, WordPress, Joomla! и другие программы управления контентом могут стоить несколько сотен долларов в год, поэтому некоторые дизайнеры начнут использовать бесплатные версии, однако имейте в виду, что в конечном итоге вам придется платить за подписку. Программное обеспечение для дизайна, такое как Adobe Dreamweaver, которое позволяет вам кодировать свои проекты, будет стоить минимум 20,9 долларов США.9 в месяц.
Еще одним важным элементом вашего бизнеса будет веб-сайт, который будет выступать в качестве маркетингового центра для вашей компании. Как веб-дизайнер, клиенты будут внимательно смотреть на ваш сайт как на пример вашего стиля дизайна и возможностей. Ваш сайт должен включать портфолио ваших лучших работ, в идеале с большим количеством вариаций.
Сколько ежегодно зарабатывают веб-дизайнеры?
По данным Salary.com, средний бизнес веб-дизайна зарабатывает 64 908 долларов в год. Аляска, Калифорния, Коннектикут и Массачусетс входят в число самых высокооплачиваемых штатов — более 70 000 долларов. Хотя в большинстве штатов платят примерно столько же, сколько в среднем по стране — от 64 000 до 67 000 долларов, — небольшая горстка, такая как Южная Дакота, Монтана и Небраска, находится на более низком уровне — чуть более 55 000 долларов.
Сколько я должен брать?
Новые веб-дизайнеры обычно берут от 30 до 80 долларов в час в зависимости от опыта. Кроме того, вы можете включить фиксированную ставку в стоимость своих услуг. Например, вы можете взимать почасовую ставку за разработку нового веб-сайта, а затем перейти на фиксированную ставку для любого дополнительного обслуживания, которое потребуется позже в будущем. Или вы можете предложить серию пакетов, включающих фиксированные цены. Также важно точно указать, что предоставляет каждый пакет — клиенты хотят знать, за какие услуги они платят. В среднем веб-сайт может стоить от 500 до 5000 долларов — в зависимости от сложности проекта и необходимой поддержки.
2
У вас есть отличная идея для имени? Прежде чем приступить к маркетингу и брендингу своего бизнеса, вам необходимо убедиться, что ваше имя доступно. В большинстве штатов запрещается или ограничивается использование предприятиями уже используемых названий. Даже если это разрешено законом, подражание имени подвергает ваш бизнес риску судебного иска.
Узнайте, доступно ли название вашей компании в вашем штате, с помощью нашего бесплатного поиска по названию компании.
Товарные знаки и доменные имена
Планируете зарегистрировать торговую марку своей компании? Вы можете увидеть, доступен ли товарный знак на веб-сайте, таком как Trademarkia. Также рекомендуется проверить, доступно ли доменное имя, что вы можете сделать на таких веб-сайтах, как Network Solutions и GoDaddy. Даже если вы не планируете сразу создавать веб-сайт, вы можете купить доменное имя, чтобы быть уверенным, что его никто не заберет.
3
Нужно ли создавать ООО? Индивидуальное предприятие? Ваш выбор бизнес-структуры повлияет на многие аспекты вашего бизнеса, от ответственности до налогов.
Индивидуальные предприниматели и полные товарищества
Если вы не подаете какие-либо документы для юридического оформления другого вида бизнеса, вы являетесь индивидуальным предпринимателем или полным товариществом. По сути, это бизнес-структуры «по умолчанию». У индивидуального предпринимателя один владелец, а у товарищества несколько владельцев.
У этих структур есть несколько первоначальных преимуществ. Они просты, быстры и дешевы в запуске и обслуживании. Однако ограничения и риски этих бизнес-структур быстро становятся более очевидными по мере роста вашего бизнеса. В обоих этих типах бизнеса вы являетесь своим бизнесом с юридической точки зрения. Юридическое название вашей компании — это ВАШЕ имя, поэтому вам понадобится администратор базы данных, чтобы работать под любым другим именем. Любой деловой долг — это ВАШ личный долг. Если кто-то предъявляет иск вашему бизнесу, он предъявляет иск ВАМ лично.
ООО и корпорации
Компании с ограниченной ответственностью (ООО) и корпорации являются хозяйствующими субъектами, созданными на государственном уровне. Организация юридически отделена от своих владельцев, что означает, что владельцы не несут личной ответственности по долгам и обязательствам бизнеса. Как отдельная организация, бизнес также имеет несколько вариантов выбора налогов. Например, как LLC, так и корпорации могут облагаться налогом как S-corp, если они соответствуют требованиям.
ООО и корпорации не так просты и недороги, как стандартные структуры. ООО и корпорации предъявляют формальные требования, такие как государственные отчеты. У них также больше сборов, чем у структур по умолчанию, таких как плата за формирование и годовой отчет. Однако преимущества ООО или корпорации, особенно защита ответственности и налоговая гибкость, значительны.
Ознакомьтесь с разделами «ООО и корпорация» и «Зачем превращать ИП в ООО», чтобы узнать больше о выборе наилучшей структуры для вашего бизнеса.
4
Если вы выберете индивидуальное предприятие или товарищество с полной ответственностью, вам не нужно будет оформлять официальные документы для юридического создания вашего юридического лица — вы просто начнете продавать свой продукт или услугу. Однако у вас не будет никакой защиты ответственности или налоговой гибкости.
LLC и корпорации формируются путем подачи документов в государственное учреждение, как правило, секретарю штата. Чтобы открыть ООО, вы регистрируете устав организации. Чтобы создать корпорацию, вы регистрируете учредительные документы. В большинстве штатов вы можете подать эти формы онлайн или загрузить бумажную форму с веб-сайта штата.
Независимо от того, создаете ли вы ООО или корпорацию, в ваших статьях потребуется определенная основная информация о вашем бизнесе, например, название вашей компании:
- название
- служебный адрес
- зарегистрированный агент и офис
- деловая цель
- имена и адреса членов/менеджеров или директоров/должностных лиц
- количество и тип объявленных акций (для акционерных обществ)
Вам также потребуется подпись лица, уполномоченного подписывать документы от имени компании, а также государственная пошлина за регистрацию. Сборы варьируются в зависимости от штата, но обычно составляют от 100 до 200 долларов. Если вы нанимаете компанию Northwest для создания ООО или корпорации, мы заполним и подаём документы для создания от вашего имени всего за 100 долларов США плюс государственные пошлины.
Начните свое ООО или корпорацию прямо сейчас!
НАЧАТЬ
5
Важно изложить внутренние политики и процедуры вашей компании в письменном виде, особенно если вы начинаете свой бизнес с другими. Товарищества имеют партнерские соглашения. ООО имеет операционные договоры. Корпорации имеют устав.
Эти документы выглядят немного по-разному для каждого вида бизнеса, но служат одной и той же цели. Они обеспечивают четкое решение любой серьезной проблемы, которая может возникнуть, от смены владельца до закрытия бизнеса. ООО и корпорациям также обычно требуется операционное соглашение или устав, чтобы открыть банковский счет.
Получите бесплатный образец операционного соглашения LLC или устава корпорации.
6
Почти все LLC и корпорации должны будут запросить федеральный идентификационный номер работодателя (EIN) в IRS. Если вы подаете корпоративные подоходные налоги, имеете сотрудников или подаете определенные налоги на франшизу, вы должны иметь EIN. EIN также является распространенным требованием для открытия счета в коммерческом банке. Большинство предприятий могут запросить EIN, заполнив онлайн-форму IRS.
Ваш EIN предназначен для федеральных налогов, но, скорее всего, у вас также будут налоговые обязательства штата и местных налогов. Скорее всего, вам потребуется создать учетную запись в Департаменте доходов штата, а также подать заявку на получение налогового идентификатора штата или лицензии на налог с продаж.
Узнайте больше о том, как получить EIN для вашего бизнеса.
7
Бизнес-счет в банке позволяет хранить ваши личные финансы отдельно от коммерческих финансов. Для ООО и корпораций ведение отдельных финансов имеет важное значение для обеспечения защиты ответственности. Чтобы открыть счет, компаниям с ограниченной ответственностью и корпорациям обычно необходимо принести в банк копию своего устава, операционного соглашения или устава, а также свой EIN.
8
Многим предприятиям для работы требуется лицензия. Информацию о лицензировании, а также любые требования к зонированию или другие разрешения обычно можно найти на веб-сайте города или округа.
Если ваш дом является частью ассоциации домовладельцев, на вас также распространяются любые ограничения для домашнего бизнеса. В некоторых районах от домашних предприятий также может потребоваться получение Свидетельства о праве собственности (документ, удостоверяющий, что владелец собственности дал разрешение на ведение бизнеса).
После того, как ваш бизнес запущен и работает, есть несколько дополнительных шагов, которые вы можете предпринять по мере роста:
- Получите страховку бизнеса: Хотя ООО и корпорации защищают вас от личной ответственности, вы не хотите, чтобы ваш бизнес обанкротиться перед лицом несчастного случая, травмы или другого бедствия. Как минимум, это хорошая идея, чтобы изучить страхование гражданской ответственности. Домашние предприятия могут иногда добавлять страховку в полис своего домовладельца.
- Наем сотрудников: Наем сотрудников требует довольно много шагов. Вам нужно будет собирать формы W-4 и I-9 от сотрудников, сообщать штату о новых сотрудниках, устанавливать удержания, платить за страхование по безработице, распространять все необходимые документы и уведомления среди сотрудников, а также отображать информацию о заработной плате и безопасности в рабочее место. Хорошим местом для начала является сайт Employer.gov, за которым следует налоговая инспекция или служба по трудоустройству вашего штата.
Как узнать, подходит ли мне бизнес веб-дизайна?
Каково на самом деле работать в сфере веб-дизайна?
Помимо разработки веб-сайтов, веб-дизайнерам часто приходится работать с программистами, разработчиками, художниками-графиками и специалистами по маркетингу. Веб-дизайнеры должны тесно сотрудничать с клиентами, чтобы определить их цели и эстетику, а также общую цель сайта, презентацию и целевую аудиторию. Они также изучают поведение потребителей и создают логические пути на каждой странице, следя за тем, чтобы макет был удобным для пользователя.
Что нужно для успеха в мире веб-дизайна?
Поскольку бизнес веб-дизайна — это постоянно растущая отрасль, которая по-прежнему пользуется большим спросом, важно отделить себя от большей толпы. Полезно развивать свои навыки в пользовательском интерфейсе и UX, демонстрируя глубокое понимание визуального дизайна и пользователей веб-сайта. Постоянное проявление страсти к проекту вашего клиента, а также к его клиентам поможет использовать вашу подлинную индивидуальность. Кроме того, спросите себя, можете ли вы использовать дополнительные веб-навыки. Можете ли вы кодировать или предлагать SEO или управление с оплатой за клик? Готовы ли вы предложить пакеты поддержки и обслуживания? Вы раньше работали в какой-то конкретной отрасли, например, в производстве, образовании или розничной торговле? Когда вы используете свои сильные стороны и сферу интересов, это будет иметь решающее значение при поиске клиентов.