Веб дизайн с чего начать: Как стать веб-дизайнером – четкий план в 10 шагов по старту с нуля

Веб дизайн с чего начать – как стать веб дизайнером самостоятельно

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

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

Сначала небольшое лирическое отступление для дизайнеров, которые случайно забрели почитать эту статью. «Я занимаюсь веб дизайном», наверно, вы не раз говорили кому-то эту фразу и испытывали холодный страх, когда вам отвечали что-то вроде: «Круто! А научи-ка меня, как это делается? Как стать веб дизайнером с нуля?» Многие просто предполагают, что они щелкнут мышкой, перетащат пару значков на экран, и дизайн готов. Но, к сожалению, это не так. Поэтому, в следующий раз, когда кто-то спросит вас, как создавать дизайн сайтов, просто покажите им эту статью.

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

Для кого эта статья о веб дизайне?

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

Требования к начинающим веб дизайнерам

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

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

Также, вам пригодятся знания основных языков кодирования, а именно HTML и CSS, об этом мы тоже поговорим.

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

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

Как использовать этот руководство по веб дизайну для начинающих

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

Дизайн в браузере для начинающих

Возможно, знаете, что большинство дизайнеров сначала используют графические редакторы, а уже потом отдают свои проекты кодеру на верстку. Photoshop – это наиболее часто используемый инструмент, но дизайнеры также используют такие программы, как Sketch, GIMP, Inkscape и Illustrator.

Бесспорно, нужно попробовать несколько из них и использовать те инструменты, которые лучше всего подходят именно вам. Однако, если вы хотите создавать именно сайты, то старайтесь сразу же делать это в их естественной среде обитания – в браузере! В идеале – делайте это в нескольких браузерах – потому что люди не просматривают сайты в Photoshop и не видят их так, как вы через интерфейс графического редактора.

Рабочий процесс на основе браузера имеет ряд других преимуществ:

1) Вы точно видите, что получаете. Даже профессиональные мокапы не передают интерактивные или анимированные части сайтов. Создавая дизайн на основе браузера вы сможете точно видеть, как он работает.

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

2) Дизайн на основе браузера может сделать вас лучшим дизайнером. Когда вы сами знаете весь процесс, вы сможете понять что и как работает, и предостеречь себя от многих ошибок. Кошмар любого дизайнера (или верстальщика, которому это придется делать), работающего в, скажем, Photoshop, это дальнейшего его «натягивание» на живой сайт.

В любом случае, вот несколько ресурсов, которые могут быть полезными в работе с графическими редакторами.

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

Навыки, которые вам понадобятся, чтоб стать веб дизайнером

Если вы хотите стать профессиональным веб дизайнером самостоятельно, вам понадобятся некоторые специальные навыки. В этом разделе мы ответим на вопрос “Как стать веб дизайнером самостоятельно?”, а также сосредоточимся на навыках, необходимых для фактического проектирования и создания сайта. Конечно, вам также понадобятся деловые и коммуникативные навыки, но это уже немного другая история. Итак, чтоб стать веб дизайнером самостоятельно вам необходимо знать следующее.

UX / UI дизайн

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

Больше информации об этом можно найти в статье «Что такое UX/UI дизайн на самом деле?»

Эстетические навыки

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

Сочетание шрифтов и типографика

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

Чтоб провести вас «от А до Я», предлагаю просмотреть книгу Эмиля Рудера «Типографика» . Чтение может быть довольно долгим, потому для желающих сразу же приступить к практике – короткое видео по теме, а так же гайд по определению шрифтов по картинке (это если вдруг вы уже нашли хороший пример текста, и хотели бы идентифицировать его шрифт).

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

Многие люди, включая меня, выбирают свои шрифты из Google Web Fonts. Шрифты Google можно «встраивать» в сайт, и это довольно удобно. Более того, можно пользоваться готовыми комбинациями шрифтов:

Другие подобные примеры можно найти в Интернете.

Если вы хотите создать свои собственные пары шрифтов Google, попробуйте «Комбинатор веб-шрифтов». Это инструмент, который позволяет вам быстро просматривать комбинации шрифтов в режиме реального времени, меняя шрифт, размер, цвет, ширину строки.

Если Google шрифтов мало, то можно заглянуть на WebDesignerDepot, Fonts-online, и другие сайты.

Теория цвета и цветовые схемы

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

Из обязательных инструментов – Adobe Color CC

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

Композиция и общая организация

Как стать веб дизайнером без знаний основ композиции? Да никак! Для меня эта часть является едва ли не самой важной. Ведь можно подобрать прекрасные шрифты, отличную цветовую схему, а потом банально напороть с правильным расположением блоков, иерархией и пропорциями и получить «отвратительнейшее блюдо из отличных продуктов».

Есть несколько полезных публикаций по этой теме, после которых доходит с первого (или почти с первого) раза.

Веб дизайн тренды

В трендах в веб дизайне можно говорить бесконечно. Какую роль они играют? Все заказчики, скорее всего, перед тем как прийти к вам уже посмотрели несколько примеров крутых модных сайтов, и возможно даже прочитали парочку статей с веб дизайн трендами. Знать моду и популярные элементы дизайна просто необходимо чтоб понимать, что они просят, и чтоб было что им предложить.

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

• abduzeedo.com
• behance.net
• noupe.com
• webdesignerwall.com
• flickr.com
• awwwards.com

Как стать веб дизайнером: HTML и CSS

HTML это «Язык гипертекстовой разметки». Каждый сайт, на который вы когда-либо смотрели, сделан на основе HTML. HTML – это тот язык, воспринимая который ваш браузер понимает, что на сайте есть текст, изображение, ссылка, видео или другие элементы. Ваш браузер затем переводит код в то, что вы видите на экране.

Другой язык, который простыми словами делает сайт красивым, называется CSS, это значит «Каскадные таблицы стилей». CSS сообщает браузеру, какой шрифт задан в тексте, и какие цвета используются. CSS, проще говоря, определяет внешний вид вашего сайта (кнопки, стили, цвета, анимация).

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

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

Выливка на живую

Готовы разместить свой сайт в Интернете? Есть доменное имя (например: mywebsite.com) и хостинг (пространство на компьютере, постоянно подключенном к Интернету или онлайн хостинг, приобретенный у сторонних провайдеров)? Загрузите файлы на хостинг, откиньтесь в кресле, расслабьтесь и …

Что делать после запуска сайта

Поправьте ошибки и допилите то, о чем забыли

“Ах, да, вот это вот… я точно хотел это поправить.”– С кем не бывает. Почти неизбежно после запуска любого сайта всплывают ошибки. И чем больше сайт, тем больше вероятность, что вы пропустили ошибку или что-то забыли. Для вашего удобства, вот довольно подробный контрольный список-чеклист :

Соберите отзывы

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

Как стать веб дизайнером – итоги

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

А если вы уже готовы опробовать свои навыки на живом проекте, и Вам нужен хороший хостинг – в качестве бонуса, вы можете купить хостинг на год от нашего партнера Inmotion всего за 1$.

Купить хостинг за $1

С чего начать изучение Web-дизайна, как научиться дизайну

Оплатить участие в мероприятии можно следующими способами:

• Банковской картой на нашем сайте
• Через систему «Расчет» (ЕРИП)
• В отделение банка
• За безналичный расчет путем банковского перевода
• Картой рассрочки Халва до 2 месяцев по Халва Mix и до 9 месяцев по карте Халва Max (подробности на сайте МТБанка)

Мы принимаем платежи по следующим банковским картам:

К оплате принимаются карты международных платежных систем VISA, MasterCard.

Безопасность совершения платежа обеспечивается современными методами проверки, шифрования и передачи данных по закрытым каналам связи.

Ввод данных карточки осуществляется на защищенной авторизационной странице банка. Для оплаты необходимо ввести реквизиты карточки: номер, имя держателя, срок действия и трехзначный код безопасности. Трёхзначный код безопасности (CVV2 для VISA, CVC2 для MasterCard) — это три цифры, находящиеся на обратной стороне карточки. Если карточка поддерживает технологию 3DSecure, для ввода кода безопасности Вы будете перенаправлены на страницу банка, выпустившего карточку.

Предоставляемая Вами персональная информация (например: имя, адрес, телефон, e-mail, номер банковской карты и прочее) является конфиденциальной и не подлежит разглашению. Данные карточки передаются только в зашифрованном виде и не сохраняются на данном интернет-ресурсе.

Если услуга была оплачена банковской картой через сайт, то возврат осуществляется на карту, с которой была произведена оплата. Срок поступления денежных средств на карту — от 3 до 30 дней с момента осуществления возврата Продавцом (Исполнителем).

Для оплаты банковской картой через систему «Расчет» (ЕРИП) вам необходимо:

Оплатить услуги UX Mind School Вы можете через систему ”Расчет“ (ЕРИП), в любом удобном для Вас месте, в удобное для Вас время, в удобном для Вас пункте банковского обслуживания – интернет-банке, с помощью мобильного банкинга, инфокиоске, кассе банков, банкомате и т.д.

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

Для проведения платежа небоходимо выбрать:

1. Выбрать
   – Пункт “Система “Расчет” (ЕРИП)
   – Образование и развитие
   – Дополнительное образование и развитие
   – Тренинги, семинары, консультации
   – г.Минск
   – ИП Колесень И.Г.
   – Посещение занятий
   – Ввести ФИО ученика и сумму для оплаты
2. Совершить платеж.

Если Вы осуществляете платеж в кассе банка, пожалуйста, сообщите кассиру о необходимости проведения платежа через систему ”Расчет“ (ЕРИП).

Условия возврата

– При отказе от посещения мероприятия возврат денежных средств происходит на карту, с которой был осуществлен платеж.

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

– Если вы решили не посещать мероприятие (курсы, интенсив, мастер-класс) и сообщили об этом не позднее 7 (семи) календарных дней до начала мероприятия, возврат оплаченной суммы происходит за минусом 10%. В теме письма напишите «отказ», в письме укажите, какое мероприятие вы не можете посетить, ваше ФИО, контакты телефон. Наш менеджер свяжется с вами в течение следующего рабочего дня для подтверждения вашего отказа и уточнения суммы возврата.

– Если мероприятие не состоится по каким-либо причинам — наш менеджер свяжется с вами для уточнения суммы возврата.

– В остальных ситуациях возврат денежных средств, оплаченных за мероприятиях, возврату не подлежат.

что читать и где учиться? — статьи на Skillbox

История веб-дизайна начиналась в 1990 году, когда британский учёный Тим Бернерс-Ли разработал язык HTML (англ. HyperText Markup Language) — язык гипертекстовой разметки. С его помощью 6 августа 1991 года команда Бернерса-Ли сделала первый в мире сайт — http://info.cern.ch.

Главная страница первого в мире сайта info.cern.ch

Первые сайты представляли собой страницы с текстовыми ссылками, которые вели на другие сайты. Речи о дизайне и вёрстке тогда не шло — у первой версии HTML не было возможностей мультимедиа, которые доступны нам сегодня.

Быстрый прогресс веб-технологий привёл к тому, что в 1993 году сайты стали поддерживать до 16 цветов, появилась возможность добавлять картинки и располагать контент по сетке. Тогда создатели сайтов задумались над тем, как сделать веб-страницы более привлекательными и удобными для пользователей.

Поисковик Yahoo! в 1993-м выглядел такВ 1997-м сайт Apple был далек от минимализма, который прославил компаниюСайт, посвященный истории и развитию интернета в 1996 году

В 1994 году появился Консорциум Всемирной паутины, известный как W3C. Эта организация и сегодня разрабатывает и утверждает технологические стандарты интернета.

До 1996 года Консорциум выступал в роли консультативного органа, где крупнейшие мировые компании вырабатывали цельный подход к развитию HTML. Благодаря единым стандартам и набору тегов веб-сайты работают в разных браузерах и на разных устройствах. Сегодня мы называем это кросс-платформенностью.

Настоящий веб-дизайн, близкий к тому, который мы знаем сегодня, появился в период с 1994 по 1998 год. Тогда интернет-технологии совершили бешеный рывок вперёд.

1994

Первая версия браузера Opera.

1995

Появились Internet Explorer 1, JavaScript и PHP.

1996

CSS и запуск технологии Flash, которую стали использовать для векторной графики, игр и мультимедиа.

1997

Релиз Internet Explorer 3 и HTML 4.0 — в мире уже 100 млн пользователей.

Именно технологический прорыв привёл к появлению веб-дизайна.

• Разрешение мониторов увеличилось до 800×600 пикселей.
• Мониторы стали отображать 256 цветов и оттенков, что привело к появлению сайтов с салатовым текстом на синем фоне.
• Первая типографика: на сайтах появились веб-шрифты Times New Roman и Courier New.
• Первая баннерная реклама, видеоплееры, анимированные GIF-изображения и цветные кнопки с 3D-эффектом.

Один из первых сайтов Рунета — tema.ru — сохранился в неизменном виде с 1995 года

Веб-дизайн: с чего начать новичку?

Информационные технологии

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

Определить, подходит ли профессия

Без этого шага все остальные не имеют смысла. Первым делом советуем посетить пробное занятие на курсах либо посмотреть вводные видеоуроки по теме. Это позволит понять специфику работы, ввести в курс дела, прояснить важные вопросы и получить дополнительную мотивацию. Ведь чем чётче видишь цель, тем легче её достигнуть. Кстати, ты также можешь пройти небольшой тест на профориентацию «Станешь ли ты web-дизайнером?».

Прочесть базовые книги

Чтобы развиваться, каждый начинающий веб-дизайнер должен следить за современными тенденциями, смотреть туториалы от профессионалов и, конечно, знать базу. Проще всего (и надёжнее) черпать необходимые знания из литературы. Среди них «‎Отзывчивый веб-дизайн» Итана Маркотта, «‎Эмоциональный веб-дизайн», Аарон Уолтер и другие книги.

Следить за профессиональными сайтами

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

Курс веб-дизайнаПо ходу курса вы сможете сделать 9 полноценных работ для своего портфолио. Также мы расскажем как правильно презентовать свои проекты.Записаться на пробное занятие

Записаться на курсы веб-дизайна

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

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

Максимилиан Антипенко, UX/UI-дизайнер и преподаватель курса по web-дизайну Адукар

Узнать ошибки начинающих специалистов

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

Спланировать подготовку портфолио

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

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

Спасибо, что дочитал до конца. Мы рады, что были полезны. Чтобы получить больше информации, посмотри ещё:

ИТ-курсы с трудоустройством Адукар

Кому не стоит идти в ИТ?

Гуманитариям больше не стоит бояться идти в ИТ

Не пропускай важные новости и подписывайся на наш YouTube, ВК, Instagram, Facebook и уведомления на adukar.by.

***

Если хотите разместить этот текст на своём сайте или в социальной сети, свяжись с нами по адресу [email protected]. Перепечатка материалов возможна только с письменного согласия редакции.

70+ лучших ресурсов о веб-дизайне

Следим за разными источниками по дизайну интерфейсов: от блогов до Slack-сообществ. В основном, читаем подборки со статьями, но есть и качественные авторские материалы.

То, что кто-то из нашей компании мониторит эти источники, совсем не значит, что это делают все. Тут кто во что горазд — сплошная вкусовщина.

КриэйтивРаша. Slack-сообщество «про дизайн вообще».

Дизайн-кабак. Дизайн-сообщество на Medium.

UX club. UX-сообщество в фейсбуке.

Сообщество дизайн-менеджеров в фейсбуке.

Design Thinking Russian Group. Российское сообщество о дизайн-мышлении в фейсбуке.

Дизайн-мышление. Еженедельная рассылка-дайджест от проектировщика интерфейсов Лёши Ревы с подборкой полезных статей.

Интерфейсы без шелухи. Еженедельная рассылка-дайджест от Антона Жиянова. Только лучшие статьи и только на русском.

Дизайнерский дайджест. Платная рассылка-дайджест о графическом дизайне от создателя Awdee.

Дайджест продуктового дизайна. Рассылка и блог Юры Ветрова, сотрудника Mail.Ru Group

Vc.ru. Читаем статьи об интерфейсах и узнаем российские отраслевые новости.

Хабрахабр. В основном, читаем статьи об интерфейсах, пользовательском опыте и часто заглядываем в рубрику «Технологии».

Internet9000. Телеграм Сергея Сурганова, арт-директора «Медузы», в котором он делится интересными ссылками и мыслями.

Блог о дизайне и интерфейсах. Автор — Максим Шайхалов, проектировщик интерфейсов — готовит подборки статей и полезных инструментов, делится личным опытом.

Заметки UX-проектировщика. Полезные статьи, видео, наблюдения по теме дизайна интерфейсов.

UX Podcast. Грамотный подкаст на узкие темы.

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

Tumblr. Тут можно найти и отыскать актуальные тренды, не только визуальные.

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

Sketchapp.me. Нюансы использования инструмента Sketch.

А еще мы с особым интересом следим за социологическими исследованиями:

Хочу стать веб-дизайнером: с чего начать?

10. Анализировать работу других
Я собираю инспирейшн по сей день. Это борды на Пинтересте, папка в Дропбоксе и ссылки в Эверноте. Ссылки я собираю по интересным проектам своего стиля (фешн, минимал лендинги, интерактивные промо). Когда заходит проект проще открыть готовые референсы, чем опять искать то же самое.

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

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

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

В Киеве могу посоветовать Projector School и MEAT Studies, в Москве — Британку. И да, не жалейте денег на образование, понимание этого приходит только спустя время, все мои даже захудалые курсы по фотографии сейчас возвращают сполна. И я даже немного жалею, что в свое время не пошла на курс английского в Прожекторе и что отказалась от приглашения в Школу Яндекса в июне прошлого года. Если есть возможность уехать учиться загруницу — не думайте ни секунды.

Из онлайн люблю самый полный курс по веб-дизайну от Тильды — Digital Design Basic Course. Там именно вся база, которую важно знать. И еще недавно Макс Ширко запустил курс по основам веб дизайна и по Тильде — Тильдошная.

13. Поработать в другой стране
Наверно это уже не для начинающих, но все же. Я не говорю о “валить из страны”, просто уехать на пару месяцев в другую страну и вернуться другим человеком. Это меняет полностью, это чистит голову и дает понять насколько мир огромный, и насколько твоя война ничего не значит. Это дает неимоверное количество мотивации и уверенности, появляются новые цели. Другие люди, другой язык, другой подход, другая страна. А вернуться в свой город никогда не поздно.

14. Поставить цели
Я фанат списков и заметок, записываю все подряд. Я верю, что это освобождает голову для следующих мыслей (и ничего не забываю, и никого не подвожу). Можно расписать цели на полгода, например, нарисовать 3 фейка до мая, оформить портфолио, найти стажировку до июля, закончить этот проект, запустить блог, пойти на курсы в апреле, прочитать две книжки до конца месяца, выучить Иллюстратор до конца лета. Потом это все разбивать на более мелкие цели и на недели, и каждый день заходить перечитывать, чтобы не забывать куда, а главное зачем, идешь. Часто я слышу фразу “я не уверен что это мое”. Окей, но это надо проверить. Например, поставить себе цель — если до конца этого года у меня ничего не получится и это будет уже не в кайф, начну пробовать что-то другое. И до конца года не сомневаться, а бежать как можно быстрее. И уже ближе к намеченной дате смотреть по ощущениям, твое или нет.

15. Все советы делить на два
Будут окружать люди, которые много чего говорят. “Ты не сможешь этим зарабатывать, ты слишком молод, ты слишком стар, это очень дорого, не в нашей стране, на что ты будешь жить, это надо много времени, это сложно, это делается не так, это делается так, тут ты делаешь неправильно, и вообще какой из тебя дизайнер”. Все это нужно делить на два. А лучше на двадцать. Прислушиваться, но идти своей дорогой. Особенно сложно, когда это говорят самые близкие люди, я понимаю. Мама говорила, что я не смогу зарабатывать дизайном, “а вот главбухи знаешь сколько получают!”. Было сложно, потому я всегда все делала на характер, вопреки. Доказывать что-то другим это хорошая мотивация, потому что в первую очередь ты доказываешь себе.

16. Найти опору
Важно найти то, что успокаивает. Человека, на которого ровняться. Цель, которая греет. Это может быть даже незнакомый человек, идеализированный образ из интернета, главное чтобы читая его нутро успокаивалось: “я тоже могу не смотря ни на что”. И никому об этом не рассказывать, пусть это будет личное.

17. Не бояться ошибиться
К счастью, у наших жизней абсолютно нет никаких целей, потому тут важно только прожить эту сотню лет счастливо и в удовольствие. Потому не стоит слишком заморачиваться или относиться сверх серьезно к чему-то. Если что-то вдруг долго не идет — бросай. Нелюбимую работу, скучную книжку, сложные отношения. Если вдруг загорелся быть дизайнером, но через год оно как-то не идет — бросай и занимайся новым. Чем больше перепробуешь, тем проще будет сделать правильный выбор. Я начинала заниматься очень многим, танцами, каллиграфией, фотографией, копирайтерством, программированием, шитьем (!), фешн дизайном, журнальной версткой, сьемкой видео и все бросала на каком-то этапе. Да, может это выглядело, как будто я не довожу ничего до конца, но все эти начинания помогают в итоге, без этого опыта я не была бы там, где есть. Начинать и бросать это нормально. И прислушиваться только к себе, а не к социальным нормам.

18. Make in your own way
Важно еще приучить себя жить по своим правилам. Быть нишевым дизайнером или делать все по чуть-чуть. Желать получить Каннского Льва или не думать о наградах вовсе. Хотеть уехать в Нью-Йорк или развивать дизайн в своей стране. Идти на курсы или учиться онлайн. Разряжать строчные или быть адептом классики. Общаться с дизайнерами или игнорировать их. Читать о веб дизайне или публично хейтить это. Ругаться матом в Твиттере или делать вид, что ты порядочный. Быть на Дрибббле или не быть. Работать в маленькой компании или в крупном сетевом агентстве. Запускать свои проекты или работать над чужими. Рисовать в Скетче или Фотошопе. Прототипировать на бумаге или на компе. Следить за популярными дизайнерами или не следить. Делать свой выбор. Не поддаваться на общие тренды и всегда иметь свое мнение. Жить по своим правилам. Because nobody really cares.

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

20. Да, получать удовольствие!
Ну конечно, это основа любого профессионализма. Когда работа не в удовольствие — достичь высот сложно, даже нереально. Любить то что делаешь, и делать то что любишь. Пробовать и начинать. Не бояться. Воспитывать вкус и самоуверенность каждый день. Не терять время. Ставить цели, добиваться и ставить новые. Много рисовать, смотреть, рисовать, рисовать. И постоянно помнить, что можно добиться чего угодно.

Итого, с чего начать? Записаться на курсы или пройти курс онлайн. Рисовать фейки. Оформить Биханс. Много рисовать, каждый день. Смотреть чужие работы и повторять. Искать проекты через знакомых. Не сомневаться.

Буду рада ответить на любые вопросы в комментариях, если есть какие-то более обширные вопросы или “я вообще похож на дизайнера?” можете писать с линками на свои работы на почту [email protected], что-то посоветую.

Больше о дизайне рассказываю в Сторис у себя в Инстаграме, мое портфолио можно посмотреть на Dribbble или Бихансе,

И да, все получится. У меня же получилось, и у вас получится. Work hard and have fun!

Март 2016
@elenabazu

способы изучения для начинающих — Lemarbet

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

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

Так много вариантов!

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

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

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

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

Лучшие книги для изучения веб-дизайна

Основные технологии, которые нужно освоить начинающим, чтобы работать с большинством задач при создании сайта, – HTML и CSS. Не лишним будет, конечно, Java Script и PHP, но это уже вторая ступенька. Кстати, если освоитесь с первыми двумя языками веб-разработки, с остальными будет уже гораздо проще.

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

Джереми Кит. “HTML5 для веб-дизайнеров”

Настольная книга для тех, кто хочет освоить стандарты последней версии HTML, разобравшись при этом с особенностями данного языка в целом. Семантическая разработка и создание доступных интерфейсов – два направления, за которыми будущее. И данная книга позволит вам научиться этому в полной мере. И стоит отметить, что «Манн, Иванов и Фербер» — одно из самых авторитетных издательств на просторах СНГ. Так что их книги однозначно стоит рекомендовать.

Дэн Сидерхолм. “CSS3 для веб-дизайнеров”

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

Автор — Дэн Сидерхолм – практикующий веб-дизайнер, который прошел путь от фрилансера и владельца небольшой студии до разработчика в штате таких всемирно известных компаний, как Google и Yahoo.

Дженнифер Роббинс. “HTML5, CSS3 и JavaScript. Исчерпывающее руководство”

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

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

Стив Круг. “Web-дизайн, или Не заставляйте меня думать”

Мировой бестселлер Стива Круга, который выдержал несколько переизданий. Дело в том, что в веб-дизайне важны не только технологии, но и общее удобство использования сайта, которое называют «юзабилити». Эта посвящена именно теме проектирования сайта с позиции его доступности и полезности для пользователя.

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

Тим Кедлек. “Адаптивный дизайн. Делаем сайты для любых устройств”

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

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

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

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

Платформы для онлайн-обучения

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

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

Одна из ведущих платформ в области онлайн-образования мирового уровня, которая работает по схеме ежемесячной подписки. Основные направления обучения – языки верстки и веб-разработки (HTML, CSS, Javascript), а также создание iOS-приложений, в частности на основе набирающего популярности Swift.

Хотя для работы с сервисом и потребуется оплатить ежемесячный абонемент, видео снято действительно очень профессионально. Множество уроков охватывают практически все аспекты веб-дизайна и разработки.

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

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

Каждый из примеров показывает ту или иную грань конкретного языка веб-разработки, будь то HTML, CSS или PHP. И с помощью этих примеров вы можете хорошо освоить саму структуру языка. При прохождении уроков код обрабатывается прямо в браузере и сопровождается хорошими объяснениями.

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

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

Доступны как бесплатные, так и платные курсы, а практические задания сопровождаются пояснениями от преподавателя. Видеозаписи занятий позволяют при желании освежить пройденный материал в случае необходимости. Всего доступно 58 курсов по 16 профессиям, а ознакомиться с бесплатными занятиями можно по этой ссылке.

Другие способы на заметку

Один из самых доступных способов – видеоуроки и тематические каналы на YouTube. Это второй по посещаемости поисковик в мире (после Google), в котором интегрирован и функционал, свойственный социальным сетям. Чем он хорош в контексте изучения веб-дизайна, так это тем, что вы можете сразу же приступить к практике на основе примеров, увиденных на видео. Кроме того, все мы знаем такую хорошую пословицу – лучше один раз увидеть, чем сто раз услышать.

Достаточно всего лишь ввести нужный запрос, и вот к вашим услугам огромное количество видеоуроков по самым разным темам:

Еще один хороший метод – изучение существующих сайтов, для чего вам достаточно щелкнуть правой кнопкой мышки на нужной странице в браузере и выбрать пункт контекстного меню «Просмотр кода страницы» или другой подобный в зависимости от используемого браузера:

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

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

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

• Автор: Владимир Федоричак

30 советов по изучению веб-дизайна за 30 дней

Изучение основ веб-дизайна все еще в вашем списке «когда-нибудь»? Почему ты еще не начал? Мы собрали 30 советов и ресурсов, которые помогут вам начать изучать веб-дизайн в этом месяце (и, возможно, даже найти себе новый карьерный путь!)

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

Выполните следующие шаги, чтобы начать изучение того, как создать свой первый веб-сайт, лучшие отраслевые практики и многое другое — и все это за 30 дней!

1.Создать сайт

Лучший способ начать изучать веб-дизайн — это начать им заниматься. Это совет Дэвида Кадави, автора книги Design Hackers.

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

Вам не нужно начинать с огромного веб-сайта или безумного дизайна; начать с малого.Поиграйте с сайтом, выясните, что заставляет его работать. (И обязательно изучите код, чтобы начать знакомство с тем, что заставляет ваш веб-сайт работать.)

Хотите быстро начать работу? Конструктор веб-сайтов, такой как Wix, может помочь вам начать работу со стильным дизайном веб-сайта, когда вы начнете изучать концепции и строительные блоки того, что входит в состав веб-сайта.

2. Прочтите все, что сможете

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

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

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

3. Будьте эффективным коммуникатором

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

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

4. Подпишитесь на Tuts + и Envato Elements

Рассмотрите возможность подписки на Envato Elements, которая также даст вам доступ к отличному учебному ресурсу Tuts +.

Tuts + издает регулярные курсы по графическому и веб-дизайну, от базовых методов до новейших передовых подходов и разработок.Обучение ведется исключительно в индивидуальном темпе под руководством опытных инструкторов. Вы также получите доступ к Envato Elements, который является отличным ресурсом для поиска графики, шаблонов и многого другого, что можно использовать в своей работе по веб-дизайну.

5. Думайте в HTML

HTML, или язык разметки гипертекста, является краеугольным камнем дизайна веб-сайтов. HTML — это каркас, который помогает создать структуру веб-сайта, и как только вы научитесь читать на этом языке, мир веб-дизайна станет более понятным.

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

6. Играйте с кодом в Codeacademy

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

Вы можете выбрать курс Codeacademy в любом месте и в любое время, а также начинать и останавливаться по мере необходимости. Выберите предмет для изучения — веб-разработка, программирование, наука о данных — или язык, на котором нужно сосредоточиться — HTML и CSS (отличное место для начала), Python, Java, SQL, Ruby и другие.

7. Научитесь понимать CSS

CSS или каскадные таблицы стилей определяют представление документа, написанного в HTML или XML и SVG.

Согласно определению Mozilla

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

Mozilla также имеет отличную коллекцию ресурсов CSS для начала работы с подробным описанием того, как работает CSS, включая селекторы и свойства, написание правил CSS, применение CSS к HTML, как указать длину, цвет и другие единицы в CSS, каскад и наследование, основы блочной модели и отладка CSS.Затем модули переходят к объяснению стиля текста и полей.

8. Примените свои навыки дизайна в Интернете

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

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

9. Обращайте внимание на любимые сайты

Обратите внимание на сайты, которые вам нравятся. Что в них нравится вам? (И как вы можете научиться воспроизводить эти элементы?) Обратите внимание на:

• Типографика
• Навигация
• Использование изображений и пространства
• Дизайн форм
• Анимация и эффекты прокрутки
• Цвет

10.Нарисуйте каркас

Wireframing — это мозговой штурм веб-дизайнера.

В чистом виде каркас — это набросок того, каким будет веб-сайт. Это не набросок эстетических элементов, а скорее план веб-сайта. Рисование каркаса — это не столько внешний вид дизайна, сколько его информационная структура.

Не знаете, как создать каркас? В Digital Telepathy есть руководство по передовому опыту, которое поможет вам в обучении.

11. Найдите время, чтобы изучить набросок

Sketch — это инструмент векторной графики для Mac, который упрощает создание элементов дизайна.Многие дизайнеры обращаются к Sketch для создания элементов пользовательского интерфейса и повторяющихся блоков дизайна.

Он содержит плагины и позволяет экспортировать код для облегчения использования и доступа. Это один из самых мощных и популярных инструментов со времен Adobe Creative Suite, который стоит вашего времени.

12. Будьте в курсе технологий

AI, VR, AR, 360-градусное видео, боты.

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

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

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

13. Почувствуйте себя комфортно с SEO

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

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

Фрилансеры, для вас это тоже жизненно важно. Большинство клиентов достаточно сообразительны, чтобы попросить веб-сайт, оптимизированный для SEO.Если вы работаете в одиночку, вам нужно знать достаточно, чтобы создать прочную структуру, которую Google может прочитать (и уметь направить клиента к специалисту по SEO, если необходимо выполнить дополнительную работу).

14. Играйте с помощью конструктора сайтов

Конструктор веб-сайтов может быть отличным способом освоить передовой опыт и начать создавать и разрабатывать веб-сайты.

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

Затем разберитесь по частям в конструкторе веб-сайтов. Посмотрите, как они разработаны и закодированы, чтобы понять, как все это сочетается. Вы будете поражены тем, что можно выяснить, просто выбрав другой дизайн.

15. Найдите наставника

Есть ли кто-то, с кем вы работаете и которым вы восхищаетесь как веб-дизайнер? Пригласите их на обед и обсудите их мысли об отрасли.

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

16. Присоединяйтесь к сообществу CodePen

Как только вы освоитесь с кодом и программированием, вы захотите присоединиться к сообществу CodePen. Сообщество с открытым исходным кодом позволяет вам публиковать и редактировать фрагменты кода в своего рода социальной сети.

Вот еще кое-что от основателей сайта: «CodePen — это среда социального развития.По сути, он позволяет писать код в браузере и видеть его результаты по мере сборки. Полезный и освобождающий инструмент для разработчиков любого уровня подготовки и особенно расширяющий возможности для людей, обучающихся программированию. Мы ориентируемся в первую очередь на интерфейсные языки, такие как HTML, CSS, JavaScript, и синтаксисы предварительной обработки, которые превращаются в эти вещи ».

17. Возьмите класс

Для некоторых учеников лучше всего подходит более формальная классная комната.

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

18. Хотите что-нибудь сделать? Google It

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

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

19. Обратите внимание на удобство использования

Ничто не может сделать или сломать веб-сайт так, как дизайн для пользователей. Вам нужно это спланировать и понять.

Вот как Interaction Design Foundation описывает UX-дизайн:

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

UX-дизайнеры, или дизайнеры, которые осведомлены о процессе формирования опыта, стремятся сознательно создавать и формировать факторы, влияющие на процесс. Для этого UX-дизайнер рассмотрит, почему, что и как использовать продукт.

20. Обратите внимание на тенденции дизайна

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

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

21. Создавать без цвета

Начинайте каждый дизайн без цвета. Один великий дизайнер однажды сказал мне, что если ваш дизайн работает в черно-белом цвете, он будет безупречным по цвету.

Это может не всегда работать, но это отличная отправная точка.

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

22. Научитесь любить шрифты Google

Google Fonts — ваш друг.

Независимо от того, как вы относитесь к Google, важна возможность просматривать, сортировать и выбирать шрифты, которые, как вы знаете, будут работать в дизайне веб-сайтов. Вам не нужно думать о лицензировании или о том, совместимы ли гарнитуры с определенными браузерами или нет.

Ограничение в том, что у вас есть только то, что есть в библиотеке Google Fonts для работы. Но если вы попробуете, то сможете найти что-то, что подойдет практически для любого проекта. В конечном итоге это сэкономит вам много времени.

23. Разобрать UI Kit на части

Загрузите пользовательский интерфейс или набор значков и разберите их.

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

Найдите комплект для загрузки, который включает элементы в различных форматах для дисплеев с высоким разрешением. (Если вы загрузите кучу файлов в формате JPEG, это вам не поможет.)

Затем попробуйте создать или настроить один или два элемента самостоятельно.

24. Стать типографом

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

Начните с книги Эллен Луптон «Мыслить шрифтом». (Есть также книга с таким же названием.) Луптон является авторитетом в области типографики, и ее информация мгновенно заставит вас задуматься, как типограф.

25. Перейти в JavaScript

Когда вы начинаете чувствовать себя довольно хорошо, увлекаясь веб-дизайном, снова бросьте вызов себе и изучите JavaScript. После HTML и CSS это самый важный язык Интернета.

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

В

Learn JS есть интерактивное руководство, которое поможет вам начать работу.

26. Обновите свое портфолио

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

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

27. Испытай себя

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

Единственная особенность этого поля в том, что оно постоянно меняется; всегда есть что узнать или попробовать.

28. Получите максимум впечатлений

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

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

Чего вы ждете? Прекратите откладывать на потом.

29. Попросите отзыв

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

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

30. Продолжайте учиться новому

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

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

Веб-дизайн для начинающих: простое (но полное) руководство

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

Выберите что-нибудь базовое для своего первого дизайна сайта

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

Блог — отличное место для начала. Это будет хорошее упражнение по дизайну и , вы узнаете, как работает система управления контентом (CMS), что будет важно знать при разработке дизайна сайта в будущем.Лучше всего то, что вам не нужно начинать с нуля. Существует множество шаблонов блогов, которые упрощают создание одного из них.

Шаблоны — ценный инструмент обучения. Наблюдая за тем, как стилизованы и сочетаются элементы HTML, CSS и Javascript, вы сможете глубже понять, что заставляет дизайн работать. Вы можете использовать шаблоны в качестве основы для внесения изменений и настроек.

Может быть, вы не хотите заводить блог — попробуйте заняться творчеством или хобби.Как насчет того, чтобы продемонстрировать свои навыки фотографии или сборник рассказов? Создание дизайна, отражающего вашу страсть, сделает первый проект приятным.

Найдите вдохновение у других дизайнеров

Вы, несомненно, встречали веб-сайты, которые поразили вас своим потрясающим дизайном.

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

Помимо открытий, которые вы делаете самостоятельно, есть несколько тщательно отобранных коллекций, которые вы должны проверить.

• У Awwwards всегда есть новые и свежие работы и разнообразные тематические коллекции.
• Behance — фантастический сборник работ по дизайну веб-сайтов, в котором основное внимание уделяется качеству и творчеству.
• Dribbble ориентируется на отдельных дизайнеров, обеспечивая форум для получения отзывов и общаться с другими о своей работе

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

Ищите источники вдохновения за пределами сети

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

Обратите внимание на типографику

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

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

Позвольте изобразительному искусству влиять на вас

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

Изучение истории искусства еще больше расширит ваши дизайнерские знания.

‍

Изучите различные типы дизайна

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

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

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

‍

Подготовьте контент перед тем, как начать

Ставить контент на первое место, означает подготовить контент для работы до того, как вы начнете создавать свой первый веб-сайт.

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

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

Сохраняйте свой дизайн простым и интуитивно понятным

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

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

Понимание основ взаимодействия с пользователем (UX)

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

UX ориентирован на понимание вашей аудитории. Что они ищут — и как ваш дизайн упростит поиск? UX — это проникновение в головы вашей аудитории и возможность увидеть ваш дизайн их глазами.

При создании своего первого веб-сайта помните об этих руководящих принципах UX:

• Делайте вещи простыми и интуитивно понятными
• Обсуждайте концепции в логической последовательности
• Удовлетворяйте потребности своей аудитории и не поддавайтесь искушению продемонстрировать свои навыки за счет удобства использования

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

Основные сведения о пользовательском интерфейсе (UI)

Если вы новичок в веб-дизайне, вас может смутить разница между UI и UX. Большинство из нас были такими. Знайте это — это два разных понятия.

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

При создании своего первого веб-сайта помните о следующих принципах пользовательского интерфейса:

• Функциональность интерактивных элементов должна быть очевидной
• Единообразие должно определять удобство использования — действия должны следовать логическим шаблонам
• Выбор дизайна должен быть сделан с четкой целью

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

Используйте принципы дизайна для руководства процессом веб-дизайна новичка

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

Макет

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

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

Структура макета должна соответствовать визуальной иерархии. Какие важные идеи вы хотите, чтобы люди увидели и в каком порядке? Визуальная иерархия должна соответствовать общим шаблонам, которые люди используют при чтении. Есть два пути, по которым люди обычно следят в сети: F-образный и Z-образный рисунок. Знание того, как работают эти шаблоны, поможет вам организовать собственный контент.

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

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

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

Цвет

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

Вот несколько простых подходов к выбору цветовой схемы для вашего первого веб-сайта.

Монохромный

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

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

Дополнительные

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

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

Типографика

Webflow поставляется с широким выбором шрифтов и возможностью добавления других.

‍

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

-Hermann Zapf

Итак, какие правила вы, неофит-дизайнер, должны знать?

Типографика информирует тон

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

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

Засечки против шрифтов без засечек

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

Ознакомьтесь с различиями между PT Serif и PT Sans (без засечек).

Вот PT Serif:

А вот PT Sans:

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

Эти маленькие линии имеют огромное значение. Вы заметите, что вышеприведенный шрифт PT Serif выглядит более формальным, а версия без засечек кажется более легким и свободным.

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

Орнамент против практичности

Петли и завитки цветного шрифта добавят индивидуальности и элегантности дизайну, но не злоупотребляйте вычурными шрифтами.Веб-сайт предназначен для общения с аудиторией через контент. Как сказал Герман Цапф, удобочитаемость — одна из важнейших характеристик шрифта.

Типографские особенности

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

Ознакомьтесь с «Веб-типографикой 101», чтобы узнать больше о типографике и о том, как ее можно стилизовать.

Начните проектировать

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

Получить отзыв

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

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

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

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

Webflow делает веб-дизайн доступным для начинающих

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

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

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

Полное руководство по началу работы в веб-дизайне

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

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

Для дизайнеров среди нас: говорили ли вы когда-нибудь кому-нибудь «Я занимаюсь дизайном веб-сайтов» и испытывали холодный страх, когда они отвечали: «Круто! Вы можете научить меня, как это сделать? » Я имею в виду, сложно объяснить, насколько трудоемким может быть дизайн.Это особенно верно, когда спрашивающий мало что знает о компьютерах. Многие люди просто предполагают, что вы нажимаете и перетаскиваете все на экран, может быть, как в PowerPoint. Я скажу вам это бесплатно: возможность экспорта «веб-страниц» в PowerPoint не помогла. Мы здесь, чтобы помочь вам исправить эту ошибку. В следующий раз, когда кто-то спросит вас, как создавать веб-сайты, укажите их здесь.

Добро пожаловать, дамы и господа, в руководство Webdesigner Depot по началу работы в веб-дизайне.Хватайте мышек и обнимайте клавиатуру, это будет долгое время. Кофе не обязателен, но настоятельно рекомендуется.

Для кого это?

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

«Минимальные требования»… низкие.Если вы знаете, что такое папки и текстовые файлы, можете начинать. Это так просто

«Минимальные требования» для людей, которые хотят создать свой самый первый веб-сайт, невысоки. Если вы знаете, что такое папки и текстовые файлы, можете начинать. Это так просто.

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

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

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

Добро пожаловать в чудесный мир веб-дизайна, новичок. Будьте готовы к большим ошибкам и не забывайте получать удовольствие!

Как пользоваться этим руководством

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

Нет, наверное, вы не хотите читать все сразу. Есть много внешних ресурсов, которые нужно прочитать, множество концепций, над которыми можно осмыслить. Я выучил это не сразу. Скорее всего, вы тоже. Это нормально.

Мы проектируем в браузере

Может быть, вы искали в Интернете и заметили, что многие люди сначала используют редакторы изображений для создания своих веб-сайтов. Они кодируют дизайн после или поручают это делать кому-то другому.Photoshop — это наиболее часто используемый инструмент, но люди также используют такие программы, как Sketch, GIMP, Inkscape и Illustrator.

Веб-сайты

должны создаваться в браузере… потому что люди не просматривают веб-страницы в Photoshop

.

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

Кроме того, рабочий процесс на основе браузера имеет ряд других преимуществ:

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

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

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

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

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

Какой образ мышления вам понадобится

Прежде чем вы откроете текстовый редактор и начнете печатать, вам необходимо понять некоторые основные принципы. Люди, которые занимаются дизайном в графическом редакторе, таком как Photoshop, могут создать такой веб-сайт:

1. Если они сообразительны, они сначала набросают некоторые идеи на бумаге. Затем они откроют Photoshop. Как любитель, я всегда начинал со второго шага — не делай своих ошибок.
2. Они вложат свое сердце, душу, кровь, пот и слезы в свои лучшие идеи. Эти идеи сформируют законченный и красивый дизайн для домашней страницы (возможно). Затем, если у них есть запрос от начальника или клиента, они могут быстро собрать несколько других вариантов дизайна / макета.
3. Клиент почти неизбежно выберет одну из «низших» концепций по собственным причинам. Даже если это не «вина клиента», может быть очень и очень сложно вернуться и изменить дизайн, который вы уже конкретизировали или «закончили».

Этот подход никому не приносит пользы. Таким образом, первое, что вам нужно знать, это:

Все повторяется

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

Вы не просто создаете веб-сайт и оставляете его там. Сайты немного похожи на детей, только они никогда не вырастают и не уходят из дома. Вы должны продолжать следить за ними, обновлять их, поддерживать их.

Но сделайте это правильно, и вы получите фантастическую отдачу от своих вложений.

Вы никогда не перестанете учиться

Когда дизайнеры перестают узнавать что-то новое о веб-дизайне, они перестают быть актуальными.Интернет — это актуальность. Серьезно, если ваш веб-сайт выглядит слишком устаревшим, есть вероятность, что многие посетители не останутся без дела, чтобы увидеть, что вы хотите сказать. Восприятие — это все.

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

Это еще не все блестящие новые тенденции дизайна. Есть также новые приложения, технологии и приемы, которые могут облегчить вашу жизнь и работу.Помните, что я говорил о долгом пребывании в этом состоянии? Ага. Это часть того, о чем я говорил.

Содержание превыше всего

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

Первый шаг в разработке веб-сайта — это… содержание веб-сайта… Оно вам нужно в первую очередь. Это не подлежит обсуждению

Вы могли видеть людей, заполняющих свои рисунки фиктивным текстом, который называется «Lorem ipsum». Вы также можете знать его как «латинский текст» или «греческий текст», хотя на самом деле он имеет мало общего с обоими языками. Это просто фиктивный текст, предназначенный для демонстрации того, как будет выглядеть дизайн, наполненный контентом. Избегайте этого, если можете. Я считаю, что дизайнеры должны стараться максимально использовать реальный контент для своего сайта.Они должны делать это даже в своих цифровых каркасах.

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

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

Следствие: типографика в основном — это веб-дизайн

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

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

Вы просматриваете Интернет иначе, чем ваши пользователи

Вы должны помнить, что люди выходят в Интернет с разных устройств и в разных средах. Вам нужно будет учесть это по-разному.

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

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

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

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

Вы что-то продаете

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

Учитывайте это во всем, что касается сайта, в том числе в содержании и фактическом макете сайта. Людям нужно видеть, что вы продаете, и быть уверенными в том, что они этого хотят. Быстрый. Им нужно показать, что есть простой способ действовать в зависимости от того, что вы продаете. Если вы блогер, этим действием может быть подписка на свой блог. Если вы продаете товар или услугу, это может быть связано с тем, чтобы дать вам деньги за этот продукт / услугу.

Навыки, которые вам понадобятся

Если вы хотите заниматься этим профессионально, вам понадобятся различные навыки.Здесь мы сосредоточимся на навыках, необходимых для фактического проектирования и создания веб-сайта. Конечно, вам также понадобятся навыки ведения бизнеса и общения. Когда вы будете готовы узнать об этом все, что сможете, ознакомьтесь с категорией «Бизнес» здесь, на WDD.

А пока мы начнем с того, что вам нужно знать в первую очередь.

Дизайн взаимодействия с пользователем

User Experience, или UX-дизайн, в данном контексте — это знание того, как большинство людей используют веб-сайты, и преобразование этих знаний в превосходный дизайн сайта.Это процесс, это философия, и это большая работа. Помните, то, как вы используете веб-сайты, может отличаться от того, как это делают другие люди. То, что имеет смысл для вас, может не иметь смысла для ваших пользователей. Веб-дизайнеры любого уровня подготовки время от времени забывают об этом, так что будьте осторожны.

Конечно, есть ресурсы, которые могут помочь вам начать работу, например What is User Experience Design? Эта всеобъемлющая статья Smashing Magazine охватывает основы UX-дизайна и включает обширный список ссылок на другие ресурсы.Как только вы закончите с этим, не забудьте прочитать «UI vs UX: в чем разница?» Дейна Миллера. (Иногда можно встретить взаимозаменяемые термины «UI (пользовательский интерфейс) дизайн» и «UX-дизайн», и это создает у людей неправильное впечатление.)

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

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

Чтобы быстро познакомиться с основными концепциями каркасов, ознакомьтесь с использованием каркасов для оптимизации процесса разработки. Чтобы получить более подробное введение с длинным списком ресурсов, прочтите «Руководство по каркасному построению для новичков».

Эстетические навыки

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

Эстетика: это непростая вещь. То, что одним людям кажется отличной цветовой схемой, другим может показаться совершенно странным. Шрифты, которые кажутся вам «подходящими», могут показаться вашим деловым партнерам совершенно неправильными. Это кажется очень и очень субъективным.

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

Типографика

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

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

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

После того, как вы изучите правила типографики, вы можете попробовать выбрать несколько шрифтов для своего проекта. Есть много хороших бесплатных, так что посмотрите вокруг.Многие люди, в том числе и я, выбирают свои шрифты из Google Web Fonts. Google Fonts позволяет вам напрямую «встраивать» шрифты для использования на вашем веб-сайте, так что это удобно. Более того, некоторые великие дизайнеры составили для вас списки комбинаций шрифтов:

Если вы хотите создавать свои собственные пары шрифтов Google, попробуйте The Web Font Combinator. Это инструмент, который позволяет быстро и разумно просматривать комбинации шрифтов. Чтобы получить более продвинутый инструмент планирования типографики, попробуйте Typecast.У него есть бесплатный план, который подойдет большинству начинающих и одиноких дизайнеров. Если вы начинаете работать с другими и вам действительно нужно предоставить им доступ для редактирования в вашем планировании шрифтов, цена совсем неплохая. Typecast также предоставит вам доступ к платным шрифтам, которых нет в библиотеке Google Fonts.

Еще одно место для поиска веб-шрифтов: Font Squirrel. Font Squirrel имеет огромную библиотеку бесплатных шрифтов для использования на веб-сайтах. В отличие от Google встраивать их не так удобно. Придется делать это самому.Если вы хотите узнать, как это сделать, вот отличное руководство. Однако прежде чем вы это сделаете, вы можете пропустить вперед и сначала изучить основы HTML и CSS.

И последнее, но не менее важное: есть много отличных шрифтов, бесплатных и платных, перечисленных прямо здесь, в Webdesigner Depot. У нас также есть много отличных статей по типографике, которые выходят за рамки основ. Поищите шрифты на сайте (некоторые из них находятся в разделе Freebies). Вы можете найти статьи по типографике здесь: https: //www.webdesignerdepot.ru / category / typography /

Теория цвета

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

Теория цвета занимается комбинациями цветов и человеческими эмоциями, которые они могут вызывать. Это настоящая наука. Чтобы получить отличное введение в теорию цвета, ознакомьтесь с этой статьей Tutsplus: Введение в теорию цвета для веб-дизайнеров.Когда вы закончите эту статью, обратите внимание на два генератора цветовых схем, показанные в конце.

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

HTML и CSS

HTML означает «язык гипертекстовой разметки».Каждый веб-сайт, который вы когда-либо просматривали, сделан из HTML. HTML — это то, что сообщает вашему браузеру, просматривает ли он обычный текст, изображение, ссылку, видео и т. Д. Затем ваш браузер переводит это в то, что вы видите на экране.

Язык, который делает веб-сайт красивым, называется CSS, он расшифровывается как «Каскадные таблицы стилей». CSS сообщает браузеру, каким шрифтом должен быть текст и какие цвета использовать. CSS также определяет макет вашего веб-сайта, внешний вид кнопок, насколько все должно быть большим или маленьким … вы даже можете анимировать с его помощью.

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

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

Базовый JavaScript (необязательно)

Javascript, как указывалось ранее, является базовым языком программирования, который позволяет вам управлять содержимым вашего веб-сайта способами, с которыми не справятся только HTML и CSS. Однако на самом деле вам не нужно . К тому же это на порядок сложнее, чем базовый HTML / CSS. О, это невероятно полезно, но для вашего первого веб-сайта это не обязательно.Однако это одна из самых важных технологий, связанных с веб-дизайном, поэтому я упоминаю ее здесь.

Что с этим делать? О, такие вещи, как модные слайд-шоу, вызов нового контента без перезагрузки страницы, повышение удобства использования веб-сайта и многое другое! Если вы хотите узнать, как это сделать, моя рекомендация такая же, как и в предыдущем разделе: Академия кода. Они такие классные.

jQuery

Примечание: Code Academy также научит вас использовать jQuery, если вы того пожелаете.jQuery — это, по сути, библиотека вещей, которые другие люди уже создали с помощью JavaScript. Он упрощает использование JavaScript на веб-страницах, облегчая выбор и управление содержимым.

Если вы ничего из этого не поняли, ничего страшного. Начните с HTML и CSS. Изучите немного обычного JavaScript. Смотри на чужой код … много. Между этим и курсом Code Academy вы начнете разбираться в этом.

Инструменты, которые вам понадобятся

Программное обеспечение может быть щекотливой темой, когда некоторые люди ругаются одним графическим редактором, а другие проповедуют хорошие новости о своем любимом текстовом редакторе.Третьи будут кричать: «Нет! Вы все не правы! » Споры продолжаются. Иногда они могут быть довольно интенсивными; но вы можете спокойно игнорировать большую часть этого.

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

Других не так радуют приложения, которые они используют. Однако они чувствуют себя комфортно в конкретном приложении и не любят изменений. Такой образ мышления — смерть для любого дизайнера или программиста. Каждый должен регулярно экспериментировать с новыми инструментами, рабочими процессами и процессами.Возможно, у вас нет времени заниматься этим постоянно, и это нормально. Есть кое-что, что нужно сказать о том, что «если что-то не сломалось, не чините». Я считаю, что вы никогда не должны бояться экспериментировать с чем-то новым, особенно в этой отрасли.

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

Полный набор современных браузеров

Ах, браузер.Вы могли знать его как «Chrome», «Firefox» или, не дай бог, «That Blue‘ E ’Thingy». Ни один из них не совсем одинаковый. У всех есть свои маленькие причуды, и веб-сайты могут выглядеть немного по-разному. Они также могут выглядеть радикально по-разному, в зависимости от того, как был написан код сайта. Вам нужно будет протестировать свой веб-сайт и убедиться, что он правильно выглядит на как можно большем количестве из них. К счастью, возможности браузеров достигли точки, когда веб-сайты начинают выглядеть почти одинаково на каждом из них.По крайней мере, макеты веб-сайтов в целом больше не являются проблемой.

Тем не менее, ключом к обеспечению качества вашей работы является ее тестирование в максимально возможном количестве сред. Если на вашем настольном / портативном компьютере установлена ​​операционная система Windows, значит, у вас уже есть Internet Explorer (синий E). По крайней мере, вам понадобятся Firefox и Google Chrome.

На Mac у вас есть Safari, но у вас будут проблемы с запуском Internet Explorer. Это выполнимо, но раздражает. Если на вашем компьютере установлена ​​производная Linux, такая как Ubuntu, вы можете протестировать Safari 5 и Internet Explorer 8 и ниже. Следует отметить, что IE 8 и ниже являются наиболее болезненными версиями IE для работы, и они почти не используются.Действительно, Internet Explorer в целом выходит из моды, и с каждым годом им пользуется все меньше людей. Более того, Microsoft выпустит новый браузер вместе с Windows 10 — с Play на Linux.

Мобильные браузеры

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

Word сообщает, что Firefox для iPhone / iPad готовится к выпуску в этом году. Однако вы можете установить Chrome и Opera Mini прямо сейчас.

На устройства Android можно установить Chrome, Firefox, Opera и Opera Mini. Никакой любви к сафари, хотя это неудивительно. Apple любит хранить вещи «в семье».

Думаете, это много браузеров для тестирования? Есть еще тонны! Однако их пользовательская база сравнительно невелика. При тестировании в браузерах приходится играть большинству; или вы сведете себя с ума.

Инструменты для сборки проволоки

Ручка и бумага (или приложение для рисования)

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

Приложения для рисования

Когда вы будете готовы приступить к созданию настоящих каркасов, на которых будет основан ваш код, вам понадобится приложение для создания каркасов. Я выбрал Google Draw (это то, что я называю приложением для рисования на Google Диске), потому что в нем есть все, что мне нужно.Он поставляется со всеми основными формами, которые я когда-либо хотел, отличными функциями обмена и совместной работы. Верно, если я работаю с кем-то другим, мы можем одновременно вносить изменения в один и тот же каркас.

Я делал это раньше. Оно работает. Это круто. Да, и вы получаете около 15 ГБ свободного места для работы. Это веб-интерфейс, поэтому он работает на любой настольной ОС. Похоже, у него нет версии для планшета, что меня разочаровывает. Что ж, всего не может быть.

Для планшетов у нас есть список приложений, которые могут выполнить эту работу: Как создавать каркасы на планшете.

Редактор кода

Редактор кода — это просто прославленная версия Блокнота. Возможно, я только что заставил нескольких технарей фыркнуть и выругаться, но в основном это правда. Разница в том, что эти текстовые редакторы поставляются с множеством дополнительных функций, призванных упростить кодирование веб-сайтов и программ. Помните, что я говорил о людях, одержимых своим программным обеспечением? С толпой текстовых редакторов становится плохо.

Помните, если кто-то спросит вас о «Vim» или «Emacs», медленно отступайте, не прерывая зрительного контакта.Это твоя единственная защита.

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

Так с чего начать? Я скажу скобки. Он все еще находится в активной разработке, но стабильный. Это бесплатно. Он работает в Windows, Mac и Linux. Он разработан специально для людей, которые проектируют и создают веб-сайты в браузере.

Редактор изображений

Возможно, вы больше не создаете веб-сайты в Photoshop, но вам все равно придется создавать и редактировать отдельные изображения. Будь то фотографии, логотипы или значки, вам что-то понадобится. Опять же, используйте то, что вам подходит. Это может быть Photoshop, GIMP, Paint.Net или одно из приложений Corel.

Локальный сервер (частично необязательно)

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

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

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

Ради простоты использования я предлагаю начать с XAMPP. Вы можете установить его на Windows, Mac или Linux, и все готово.

Пример процесса

Допустим, вы приобрели определенный уровень владения всеми навыками и инструментами, необходимыми для создания своего первого веб-сайта. В качестве альтернативы можно сказать, что вы хотите впервые испытать свои навыки. Как бы то ни было, пора применить все, что вы научились использовать. Я собрал пример процесса, который вы можете использовать при разработке и кодировании своего веб-сайта; но не принимайте это как евангелие.

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

Соберите все вместе

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

Если вы пишете контент для себя, я предлагаю прочитать практически все, что написано на CopyBlogger. У них есть годы и годы советов о том, как писать хороший контент для Интернета.

Архитектура содержимого

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

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

Эта структурная организация имеет первостепенное значение и будет определять многие аспекты дизайна вашего сайта (особенно навигацию), то, как вы организуете свои файлы, и все остальное.

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

Примечание. Для этого я тоже использовал приложение Google для рисования.

Каркас

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

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

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

Создание плиток стилей (или аналогичный)

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

Плитки стиля

— отличный способ сделать это. Вот объяснение того, что такое Style Tiles, прямо с официального сайта:

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

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

Кодирование

Обычно вы открываете текстовый редактор и основной браузер, а затем начинаете печатать. Вы продолжаете набирать код до тех пор, пока в браузере не сформируется страница, которая представляет собой комбинацию структуры, запланированной вами в каркасах, и стиля, который вы запланировали в своих плитках стилей. Затем вы продолжаете набирать код, пока не будете довольны результатом.Все дело в итерациях.

Текстовый редактор, на который я ссылался выше, Brackets, имеет отличную функцию для этой части. Нажмите кнопку «Live Preview» в правой части окна Brackets, и для вас откроется окно браузера. (Для этого вам необходимо установить Google Chrome.) Окно браузера будет обновляться в реальном времени с любыми внесенными вами изменениями.

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

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

Тестирование

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

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

Если некоторые браузеры показывают разницу между пикселями, ничего страшного. Это жизнь.Самое главное — заставить его работать.

Запуск

Готовы разместить свой сайт в сети? У вас есть доменное имя (например, mywebsite.com) и хостинг (место на компьютере, который постоянно подключен к Интернету)? Загрузите эти файлы, расслабьтесь, расслабьтесь и…

Что нужно сделать после запуска

Исправьте то, что вы забыли.

О. Правильно. Эта штука … ты хотел исправить это перед запуском. Как ты это забыл? Я имею в виду давай!

Бывает со всеми.Почти неизбежно появляются ошибки после запуска. Чем больше ваш сайт, тем больше вероятность, что вы что-то пропустили или забыли. Для вашего удобства вот довольно подробный контрольный список перед запуском: http://boagworld.com/mobile-web/pre-launch-checklist/

Задавайте вопросы

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

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

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

Получить отзыв

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

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

Сделай все сначала

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

Эй, я сказал, что это много работы.

Показанное изображение, веб-дизайн через Shutterstock.

Руководство для начинающих: как научиться веб-дизайну дома | Винсент Ся

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

Визуальное + взаимодействие = ядро ​​веб-дизайна

Многие молодые дизайнеры часто неправильно понимают концепцию веб-дизайна, веб-дизайн — это дизайн, а не кодирование и разработка интерфейса. Конечно, было бы здорово, если бы вы знали какой-нибудь язык программирования (HTML, CSS, Java), но вы не можете углубиться в разработку интерфейса, это не ядро ​​веб-дизайна.Веб-дизайн предназначен для решения проблем связи между пользователями и информацией веб-страницы.

Освоить базовые правила визуального дизайна

Изучить дизайн макета

Изучить принципы цвета

Освоить базовые знания интерактивного дизайна

Придется овладеть PS и другим инструментом макета веб-интерфейса

Понимать базовый язык кодирования (HTML, CSS)

Знаком с продуктом компании и группой пользователей

По крайней мере, владею одним из интерфейсных программ редактирования кода, я хотел бы порекомендовать Dreamweaver

Знать о SEO

Макет, цвет, графика, шрифт, контент

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

1. HTML и CSS: проектирование и создание веб-сайтов

2. Изучение веб-дизайна: руководство для начинающих

3. Не заставляйте меня думать: здравый подход к веб-удобству

4. Изучение веб-дизайна Pages Functional

5. Проектирование с использованием веб-стандартов

Treehouse

Lynda

Udemy

1. Smashing Magazine

2. Блог Mockplus

3. Webdesigner Depot

4. Webdesignledger

6.Взлом UI

7. 1stwebdesigner

8. WEBAPPERS

1. W3Schools

Чтобы выучить базовый язык программирования, он включает ： HTML и CSS с простым языком, чтобы научить вас.

2. Google Code University

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

3.Code Avengers

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

30 дней для изучения HTML и CSS

Руководство по HTML и CSS для новичков

Не бойтесь Интернета

Независимо от того, на какой должности вы находитесь, обучение — единственный способ достичь вашей цели. Если вы хотите узнать, как научиться веб-дизайну дома, это все, что вам нужно знать. Перестаньте тратить свое время на Facebook или Twitter в поисках ответов. Там вы можете создать свой дизайнерский круг, но вы не можете стать веб-дизайнером, используя инструменты. Удачи тебе.

9 навыков, которые вам понадобятся, чтобы стать веб-дизайнером в 2021 году

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

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

📌 Связано: В чем разница между веб-дизайнером и веб-разработчиком?

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

Хотите БЕСПЛАТНО изучать дизайн и программирование? Присоединяйтесь к нашему Coding Camp!

Ты выучишь:
Основы HTML и CSS
Основы визуального дизайна
Каково работать в сфере технологий

Содержание:

1. Какие технические навыки вам нужно знать, чтобы стать веб-дизайнером?
2. Навыки «мягкого» веб-дизайна, которые выделят вас
3. Как научиться веб-дизайну онлайн

Как научиться веб-дизайну: какие технические навыки нужно знать, чтобы стать веб-дизайнером?

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

1. Визуальный дизайн

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

В Skillcrush мы преподаем визуальный дизайн, потому что он ориентирован на цифровые продукты и помогает вам добиться успеха в любой дизайнерской карьере, включая веб-дизайн. Изучая визуальный дизайн, вы изучаете фундаментальные принципы дизайна, необходимые для веб-дизайнера.

📌 Связано: Что такое визуальный дизайн? Графический дизайн, дизайн пользовательского интерфейса, веб-дизайн — в чем разница?

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

2. UX

UX означает пользовательский опыт или то, как люди себя чувствуют (спокойствие, разочарование и т. Д.) при использовании веб-сайта. Прежде всего, UX-дизайн — это подход к вашему дизайну с удобной для пользователя точки зрения — как вы можете создать дизайн веб-сайта, который поможет им получить именно то, что им нужно?

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

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

Примечание. Skillcrush также имеет дополнительный курс UX, который вы можете приобрести вместе с нашим курсом Break Into Tech.

Хотите БЕСПЛАТНО изучать дизайн и программирование? Присоединяйтесь к нашему Coding Camp!

Ты выучишь:
Основы HTML и CSS
Основы визуального дизайна
Каково работать в сфере технологий

3.Программное обеспечение для графического и веб-дизайна

Как любому мастеру, как веб-дизайнеру, для работы вам нужны правильные инструменты. Знание отраслевых стандартов веб-дизайна и графического дизайна будет полезно в каждом случае и важно во многих. Хотя разработку веб-сайта можно выполнять прямо в веб-браузере, такие инструменты, как Adobe Photoshop, Adobe Illustrator и Sketch, используются в графическом и веб-дизайне для выполнения важных рабочих функций: создание макетов, разработка ресурсов (например, логотипы и изображения) и конечно, доработка и доработка фото.

Вы должны научиться их использовать (хотя, если вы только начинаете, попробуйте вместо этого несколько бесплатных альтернатив Adobe Photoshop).

4. HTML

Подождите, чтобы стать веб-дизайнером, вам нужно уметь программировать? Возможно, вы не представляли, что веб-дизайнерам потребуется знать любой код , но некоторые технические навыки необходимы — небольшое знакомство с HTML и CSS ожидается для большинства дизайнерских работ в настоящее время. HTML расшифровывается как HyperText Markup Language, язык программирования, используемый для размещения контента на веб-странице и придания ему структуры во внешнем интерфейсе.Это означает, что именно так можно превратить связку слов в заголовки, абзацы и нижние колонтитулы. А также то, как вы размещаете на веб-сайте «крутой» контент, например фотографии, видео и графику.

5. CSS

А еще есть партнер HTML, CSS или каскадные таблицы стилей. CSS — это язык кодирования, который сообщает браузерам, как форматировать и стилизовать HTML для веб-страницы. Другими словами, это то, что заставляет весь текст и другой контент хорошо выглядеть и иметь дизайн. С помощью CSS вы можете настроить цвета, изменить шрифты или добавить потрясающий фон — и многое другое! Вот где действительно проявляется ваш взгляд на дизайн и как вы можете поставить свой творческий отпечаток на каждый сайт, который вы создаете.

Совет от профессионала: Если вы хотите начать изучать веб-дизайн бесплатно, HTML и CSS — отличные навыки для начала. Если вы готовы прямо здесь и сейчас, у нас есть бесплатный лагерь программистов. В противном случае ознакомьтесь с нашим обзором бесплатных ресурсов для обучения программированию.

📌 По теме: Это те вакансии, которые можно получить с помощью только HTML и CSS

Бонус! JavaScript

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

(Вернуться к началу)

Мягкие навыки, необходимые каждому веб-дизайнеру

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

6. Тайм-менеджмент

Независимо от того, хотите ли вы изучать веб-дизайн, чтобы стать фрилансером или работать в компании, вам нужно быть в курсе своего графика и своих проектов, чтобы стать успешным веб-дизайнером. Это может означать знакомство с приложениями для повышения производительности, такими как списки задач или календари, или, особенно если вы работаете в крупной организации, изучение инструментов отслеживания проектов, таких как Trello или JIRA.Какими бы ни были инструменты, овладение искусством расстановки приоритетов и отслеживания вашей работы будет иметь важное значение для вашего успеха (и здравомыслия!) В напряженном мире веб-дизайна.

7. Навыки общения

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

8. SEO / цифровой маркетинг / социальные сети

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

9. Управление бизнесом / клиентами

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

(Вернуться к началу)

Как научиться веб-дизайну в Интернете

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

Вы можете изучить ВСЕ навыки, о которых мы говорили выше, в программе Skillcrush Break Into Tech, всеобъемлющем, полностью интерактивном курсе обучения, разработанном для того, чтобы вы с нуля начали работать в веб-разработке или в качестве веб-дизайнера за несколько месяцев.Он включает в себя быстрые пути, которые помогут вам быстро начать карьеру вашей мечты, более десятка курсов, а также дополнительные дополнения к курсам, которые помогут вам найти свою нишу и найти свой путь в технологиях.

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

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

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

(Вернуться к началу)

Хотите БЕСПЛАТНО изучать дизайн и программирование? Присоединяйтесь к нашему Coding Camp!

Ты выучишь:
Основы HTML и CSS
Основы визуального дизайна
Каково работать в сфере технологий

Как начать бизнес в области веб-дизайна (всего за 24 часа)

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

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

Кроме, конечно, когда есть…

Я дам вам несколько ярлыков. Здесь и сейчас. (Я уже слышу разочарование в голосе отца. « Разглашение коммерческих тайн ?? », — вероятно, говорит он.)

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

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

А теперь моя очередь ответить на просьбу.

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

Конечно, может занять больше времени. Но все зависит от вас. (и текущий уровень ваших навыков веб-дизайна)

Как начать бизнес в области веб-дизайна за 13 шагов

Хорошо, больше никакой болтовни. Перейдем к , работа .

1) Спросите себя: «Почему?»

Нет, серьезно.Спросите себя , почему вы хотите это сделать.

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

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

«У каждого есть план, пока он не получит удар по лицу». — Майк Тайсон

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

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

2) Найдите свою нишу

Тебе, наверное, надоело слышать, как забили до смерти это клише. Но вы хотите знать, почему это повторяется так часто?

Потому что это 100% правда.

Это особенно актуально в индустрии веб-дизайна. Веб-дизайн невероятно переполнен . Конкуренция ожесточенная.

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

Сколько раз вам приходили телефонные звонки или электронные письма на ломаном английском из Индии, которые пытались продать вам веб-дизайн? Некоторым это первое, что приходит в голову, когда кто-то начинает говорить с ними о веб-дизайне.

Между острой конкуренцией и негативными ассоциациями с вашей работой, вам придется отказаться от своей работы за вас. Недостаточно просто быть «веб-дизайнером».

Что отличает вас? Почему ты особенный? Что может предложить вам , чего не предлагает никто другой?

Ответы на эти вопросы помогут вам вырезать свой собственный маленький кусок огромного пирога веб-дизайна.

В поисках своей собственной ниши веб-дизайна я обнаружил, что, хотя все предлагали веб-сайты « красивых », « профессиональных », « отзывчивых, » и « доступных », по сути, никто не продавал быстрый веб-дизайн.

Это был мой билет.

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

СВЯЗАННЫЙ: Как я привлек одного из крупнейших руководителей в Канаде в качестве клиента

СОВЕТ ОТ ПРОФЕССИОНАЛА: Я создал первую в мире социальную сеть для веб-дизайнеров в Launchers. Присоединяйтесь к нам, и я помогу вам найти свою нишу! Подпишите здесь.

3) Создайте свой бренд

Вы знаете, как я назвал этот бизнес веб-дизайна, который специализируется на быстром дизайне веб-сайтов?

RapidWebLaunch .

Броский? Нет. Сексуально? Нисколько. Легко запомнить? Не совсем.

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

Успешный бренд именно так и поступает. Он максимально эффективно передает ваше ценностное предложение. Ваш бренд состоит из таких вещей, как:

1. Логотип
2. Цветовая шкала
3. Слоган / слоган
4. Голосовая связь / обмен сообщениями

Логотип

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

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

Цветовая шкала

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

Слоган / слоган

Сделайте это простым, но запоминающимся.

Шахта? ? Быстрый и доступный веб-дизайн. Гарантированно.

Голосовая связь / обмен сообщениями

Может быть, это вас немного сбивает с толку.

Вы должны думать о своем бренде как о личности. Каковы ценности этого человека? Симпатии и антипатии? Сильные и слабые стороны? Стиль речи? Возраст? Пол?

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

4) Зарегистрируйте свое доменное имя

Теперь, когда вы придумали название компании, торговую марку и логотип, пора зарегистрировать свой домен!

(примечание : некоторым людям нравится проверять, доступно ли их предпочтительное доменное имя. перед тем, как выбирает название компании, поэтому вы можете поменять порядок шагов №3 и №4, если вы один из этих людей. )

Существует мириад, компаний, у которых вы можете зарегистрировать домен.

Когда я только начинал, я не знал многих из них.Поэтому я остановился на GoDaddy. Теперь, когда у меня больше опыта, я бы не рекомендовал их. Меня раздражает слишком много мелочей, но этого недостаточно, чтобы переехать в другое место. Я прочитал много хорошего о Namecheap, и многие блоггеры, кажется, их используют.

Тем не менее, в зависимости от инструмента веб-дизайна, который вы решите использовать, они могут вам даже не понадобиться…

5) Выберите подходящий инструмент для дизайна веб-сайтов

Сейчас вещи становятся интереснее.

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

Давайте быстро взглянем на каждого, не так ли?

Weebly

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

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

Это позволяет легко маркировать их продукты и профессионально представлять себя.

Некоторые снобистские веб-дизайнеры называют Weebly « слишком, просто», но все зависит от вашей точки зрения. Моя целевая аудитория — владельцы малого бизнеса, которые хотят быстро и по доступной цене выходить в Интернет. У них мало или совсем нет знаний в области интернет-маркетинга.

Благодаря этому Weebly идеально подошел мне и моему бизнесу.

По крайней мере, на время.

Теперь, когда мой бизнес вырос и мои навыки улучшились, я перешел на WordPress.

СВЯЗАННЫЕ:

WordPress

WordPress — самая популярная платформа для веб-дизайна в мире, и не зря.

Он чрезвычайно универсален и настраивается. Вы можете сделать WordPress тем, чем вам нужно. Этот самый блог работает на WordPress.

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

Если вы собираетесь стать веб-дизайнером, вам стоит в какой-то момент изучить WordPress. А пока используйте более простой инструмент, например Weebly, чтобы получить некоторый опыт.

На данный момент я использую WordPress почти для всех сайтов моих клиентов.

СВЯЗАННЫЕ: Weebly против WordPress: какая платформа веб-дизайна вам подходит?

Shopify

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

Это платформа для веб-дизайна электронной коммерции №1 в мире. Они постоянно внедряют новые продукты и идеи, чтобы упростить продажу товаров в Интернете.

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

Очень рекомендую!

Squarespace

Squarespace рекламировала меня на Facebook, Twitter, YouTube, Instagram, телевидении, радио, рекламных щитах и ​​почти во всех моих любимых подкастах.Их везде .

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

Я рекомендую вам проверить их и узнать, что вы думаете.

Wix

Wix — еще одна популярная платформа для веб-дизайна своими руками. Более простой, чем WordPress, но более продвинутый, чем Weebly, он может похвастаться рядом функций, которых я так жаждал на платформе Weebly.

Но, по моему опыту, скорость загрузки веб-сайтов у Wix очень низкая.Что нужно иметь в виду. Попробуйте сами и дайте мне знать, если я ошибаюсь!

Джимдо

Я ничего не знаю о Джимдо . Честно.

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

6) Время создавать свой сайт!

Woop woop! Приступим к строительству!

Теперь у вас есть все необходимое для начала работы на собственном веб-сайте.

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

1. Будьте проще. Меньше — больше. Чисто, минималистично, красиво.
2. Ваш сайт — это ничего, без качественных изображений и видео. Они должны составлять около 70-80% вашего контента.
3. Всегда думайте о телефоне. Сейчас большая часть трафика идет с мобильных устройств. Убедитесь, что ваш сайт на 100% работает на всех устройствах!
4. Скорость — это все. Убедитесь, что вы сжали все изображения, чтобы они были как можно меньше без ущерба для качества.И не добавляйте слишком много модного кода или раздутых приложений и расширений!
5. Ваш пользовательский опыт должен быть фантастическим. Сделайте кристально ясными, то, что вы ожидаете от посетителей. Направьте их по этому пути. Хотите, чтобы они подписались на вашу рассылку новостей? Купить подогреватель чашек ручной работы? Позвоню тебе? Покажи им, как. Если вы этого не сделаете, ваши посетители уйдут так же быстро, как и прибыли.
6. Не делайте ни одной из этих распространенных ошибок веб-дизайна. ????

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

7) Выберите платформу для выставления счетов

Тебе ведь нравится, когда тебе платят?

Вам нужна платформа для выставления счетов, которая:

• Позволяет легко создавать красивые и профессиональные счета-фактуры
• Автоматически отслеживает расходы (благодарите меня в налоговый сезон)
• Имеет автоматическое регулярное выставление счетов за продукты по подписке
• Может обрабатывать платежи по кредитным картам

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

У них тоже есть бесплатная версия. Идеально для начинающих.

СВЯЗАННЫЙ: Мой полный обзор FreshBooks

8) Настройте процессор кредитной карты

Как я уже сказал, я использую Stripe.

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

У вас также будет возможность предварительно авторизовать списание средств с клиентов. Я не приступаю к работе, пока не получу 50% залог.

50% до начала работы, 50% после завершения работы. Отсекает всех отрывочных людей.

9) Продвигайте свой новый блестящий бизнес в области веб-дизайна!

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

Настройте профиль здесь:

• Google Мой бизнес ( решающий )
• Yelp (на самом деле просто как заполнитель)
• Facebook (если вы думаете, что вам нужно… Я лично ненавижу Facebook и теперь удалил его)
• Twitter (раньше был моей любимой социальной сетью, но сейчас он слишком токсичен)
• Pinterest (отлично подходит для блогов)
• YouTube (если вы не снимаете видео, значит, вы сильно отстаете)
• Instagram (я использую его не для бизнес-маркетинга, а скорее как доказательство того, что я практикую то, что проповедую)
• Reddit (может быть очень полезен, если у вас толстая кожа)
• Quora (в основном для идейного лидера)
• Лаунчеры (социальная сеть для веб-дизайнеров!)

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

СВЯЗАННЫЙ: Как получить больше отзывов в Google от ваших клиентов (за один простой шаг)

10) Поиск новых клиентов

Это самая сложная часть работы веб-дизайнера.

В Интернете есть много разных мест, где можно найти людей, которые ищут веб-дизайнеров, но позвольте мне сказать вам следующее:

Ваш самый ценный актив — ВАША сеть

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

Это займет время. Вам нужно набраться терпения и много работать. Но вы начнете видеть «эффект снежного кома», когда будете закрывать один веб-сайт за другим. Один довольный клиент рассказывает всем в своей сети и так далее, и так далее…

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

Upwork

Upwork — самая популярная в мире платформа для фрилансеров.В нем немало послов и недоброжелателей.

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

Гуру

Guru похож на Upwork, только меньше. — сказал Нуф.

Карты Google

Хотите быстро найти новых клиентов для веб-дизайна? Выбирайте местный.

Откройте Карты Google, найдите все местные предприятия в вашем районе и посмотрите, есть ли у них веб-сайты.Если они этого не сделают, сходите к ним в гости. Если они это сделают, но это отстой, иди навестить их.

Я уже слышу ваши жалобы. «Я должен разговаривать с людьми лично?» «Но я отстой в продажах!» «Я слишком стесняюсь этого».

Самое лучшее происходит в этой маленькой области как раз за пределами вашей зоны комфорта. Ты можешь это сделать. ????

Craigslist

Это старая школа, но она все еще может работать.

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

Идите туда и начните отвечать на запросы людей. Просто будьте готовы не получать много денег.

СВЯЗАННЫЙ: Как НЕ продавать услуги веб-дизайна (10 ошибок, которых следует избегать)

11) Зацикливайтесь на своем клиентском опыте

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

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

Ничего слишком мало. Каждое небольшое взаимодействие должно продвигать идею вашего бренда.

Например, вот что видят мои посетители после того, как отправят запрос на расценки:

Он маленький, но более запоминающийся, чем «Спасибо за отправку! Мы скоро свяжемся с вами.”

А вот что происходит, когда посетители моего блога получают страницу 404 в моем блоге:

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

12) Масштабирование и автоматизация агрегата

Автоматизируйте как можно больше задач и процедур. Такие вещи, как:

• Отправка счетов
• Обработка платежей
• Электронная почта
• Свинец
• Управление воронкой

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

На данный момент просто сосредоточьтесь на том, чтобы начать работу и привлечь новых клиентов.

13) Подумайте о дополнительных услугах, которые вы можете предложить

Малому бизнесу нужны веб-сайты. Но что еще нужно малому бизнесу?

Например:

Проявите творческий подход. Сколько проблем вы можете решить для своих клиентов?

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

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

Я сейчас нахожусь в том месте, где небольшая команда помогает мне идти в ногу со спросом. Рост FTW!

СВЯЗАННЫЙ: Как создать РЕАЛЬНЫЙ пассивный доход с помощью вашего веб-дизайна

Готовы начать свой собственный бизнес в области веб-дизайна?

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

«Чтобы начать, не обязательно быть великим в чем-то, но нужно начать, чтобы добиться успеха в чем-то». — Зиг Зиглар

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

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

Но это не значит, что работы не нужно делать. Простой в работе — идеальное время, чтобы заняться другими делами.

Не смотря ни на что, просто запускает .

СВЯЗАННЫЙ: Позвольте мне разобрать ваши 14 самых серьезных оправданий для того, чтобы не начинать бизнес

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

Если вам понадобится помощь, напишите мне по адресу [адрес электронной почты]

Часто задаваемые вопросы

Вот самые частые вопросы, которые я получаю при открытии бизнеса в области веб-дизайна:

Сколько мне нужно платить за дизайн веб-сайта?

Мне так часто задают этот вопрос, что я написал об этом целую запись в блоге прямо здесь. На этот вопрос нет однозначного ответа. Популярный ответ — просто « берите столько, сколько вы стоите, », но, когда вы только начинаете, все не так просто.

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

Будьте готовы поработать несколько раз бесплатно!

Как мне передать веб-сайт клиенту, когда он будет готов?

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

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

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

Когда мне следует поднять цену на дизайн веб-сайта?

Повышение цен — процесс очень постепенный.Нет конкретного числа.

Что я могу вам сказать, так это то, что когда я дошел до того момента, когда мне больше не НУЖЕН клиент для оплаты счетов в этом месяце, это дает вам полную свободу взимать плату, которую вы хотите, и выбирать клиентов, которые подходят вам. . Но на это потребуется время.

Постарайтесь не клянчить дела! В противном случае люди не будут уважать вас.

Как я могу предоставить точную расценку на дизайн веб-сайта?

Определите, какая у вас минимальная почасовая ставка, а затем укажите количество часов.Итак, если вы решите, что вам нужно зарабатывать минимум 30 долларов в час, а создание веб-сайта займет около 10 часов, вы можете указать цену в 300 долларов.

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

Какие навыки мне нужно знать, чтобы стать веб-дизайнером?

Мне так часто задают этот вопрос, что я написал об этом целую запись в блоге. Прочтите здесь: Хотите стать веб-дизайнером? Тогда вам нужно иметь эти 10 навыков

Должен ли я зарегистрировать доменное имя моего клиента самостоятельно или попросить их сделать это и предоставить мне к нему доступ?

Зависит от клиента.У большинства моих клиентов уже есть домен, поэтому они просто предоставляют мне к нему доступ.

советов по веб-дизайну для начинающих — все, что я хотел бы знать, когда начинал — Smashing Magazine

Краткое резюме ↬

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

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

Дополнительная литература по SmashingMag:

Больше после прыжка! Продолжить чтение ниже ↓

Начало работы

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

Просто сделай это

Помните, прежде всего, чтобы начать. Так часто мы зацикливаемся на предварительных шагах и соображениях и задерживаемся на них, по-видимому, на «Пауза». Будь то потому, что мы не знаем, с чего и как начать, или потому, что мы перегружены количеством шагов, задействованных в начале, мы ждем. Мы стараемся охватить все, прежде чем выйти вперед, чтобы испытать воду.Но сообщество соглашается: дерзайте!

• Что бы это ни было, сделайте это сейчас.
• Прекратите читать #smtips и создайте что-нибудь, доставляющее сообщение.
• Прекратите откладывать дела на потом и начните уже сейчас!
• Самый страшный момент всегда наступает незадолго до того, как вы начнете.
• Бойтесь, все равно сделайте, потерпите неудачу, повторите.
• Хватит бездельничать; просто начни.
• Не переусердствуйте.

Начните с карандаша и бумаги

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

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

• Начните с пера и бумаги, а не с клавиатуры и мыши.
• Лучшие идеи рождаются на бумаге.
• Всегда начинайте с карандаша и чистого листа бумаги. Это лучший способ получить лучший дизайн.
• Мой лучший совет по дизайну: забудьте про Mac, ПК и приложения и начните с бумаги с помощью хорошего острого карандаша.
• Используйте карандаш и бумагу, чтобы создать концепцию, прежде чем использовать компьютер.
• Всегда начинайте рисовать с бумаги. В рисовании есть сила.
• Набросок ваших идей в начале проекта действительно может помочь сформировать хороший дизайн.
• Всегда начинайте с бумаги.
• Делайте наброски на бумаге, а не в программном обеспечении для проектирования, чтобы не ограничивать свои идеи текущими технологическими возможностями.
• При разработке для Интернета придерживайтесь старой школы; спланируйте и создайте прототип своего пользовательского интерфейса и функций в первую очередь на бумаге.
• Выключите компьютер и вернитесь к основам; Вы не сможете превзойти первоначальные наброски, сделанные старомодными пером и бумагой.
• Совет по дизайну: начните с ручки и бумаги и обращайтесь к программному обеспечению только тогда, когда точно знаете, что собираетесь делать.
• Когда я проектирую, мне нравится рисовать идеи на большом листе бумаги и описывать функциональность того, что я пытаюсь построить.

Сроки

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

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

• Хороший дизайн требует времени; установите реалистичные сроки (затем умножьте на два).
• Стремитесь, чтобы у вас не было достаточно времени, чтобы закончить работу над дизайном.
• Слушайте своих клиентов, чтобы вы действительно знали, что им нужно, и , когда им это нужно.

K.I.S.S.

Самым распространенным ответом, который мы получали от наших подписчиков в Твиттере, был давний совет: «Будь простым, глупым.«KISS предлагается во многих отраслях, а в области дизайна он звучит как никогда правдоподобно. Дизайн — это динамичное и коммуникативное поле, в котором бесчисленные элементы объединяются, чтобы передать задуманное сообщение. Тем не менее, чем больше вы добавляете в дизайн, тем более загроможденным он становится и тем более вероятно, что сообщение будет запутанным. Итак, стремитесь создать максимально простую презентацию, которая эффективно взаимодействует.

• Будь простым, глупым.
• Простое всегда лучше.Сделайте это видимым, а не визуальным.
• Работа дизайнера — общаться самым простым способом.
• Правило троек — мое любимое правило для лаконичного дизайна: используйте три шрифта (максимум), три изображения и три цвета.
• Мой любимый совет по дизайну — следовать принципу KISS: будь простым, глупым!
• Чистота, ясность и лаконичность полезнее, чем кричащая и загроможденная! Уберите беспорядок и сделайте его потрясающим.
• Сделайте свой дизайн простым, чтобы люди сосредотачивались на содержании.
• Просто и чисто!
• Для хорошего дизайна я предлагаю использовать максимум два шрифта и несколько цветов, чтобы сделать его простым и избежать путаницы.
• Не усложняйте дизайн. Бритва Оккама говорит, что самое простое объяснение, скорее всего, будет правильным.
• Делать простое сложным — обычное дело. Делать сложное простым — удивительно простым — вот в чем творчество. Это дизайн.
• Если он не служит цели, уберите его. В конце концов, лишняя графика только отвлекает.

Белое пространство

Еще один популярный ответ, который мы получили — и он подпадает под действие K.I.S.S. зонтик — был о пустом пространстве. Пустое пространство действительно важно и, кажется, ускользает от многих дизайнеров, которые чувствуют необходимость заполнить чем-то каждый доступный дюйм. Тем не менее, многое нужно сказать об использовании белого пространства и не совершении дизайнерского греха излишнего беспорядка. Белое пространство дает элементам страницы — и тем самым тем, кто просматривает страницу — пространство для дыхания. Загроможденный дизайн вызывает дискомфорт, поэтому добавьте пустое пространство, чтобы снять напряжение.

• Пустое пространство может быть не менее (или более) эффективным, чем изображения. Используйте пустое пространство с умом.
• «Хороший дизайн — это минимум дизайна». (Дитер Рамс)
• Лучше меньше, да лучше.
• Лучший совет по дизайну, который я когда-либо слышал, был «уменьшить, уменьшить, уменьшить». Когда вам больше нечего забрать, тогда вы знаете, что все готово.
• Используйте пустое пространство и глубокие гармоничные цвета.
• Не бойтесь белого пространства.
• Не забудьте пустое пространство и следуйте указаниям.
• Белое пространство — это такой же элемент дизайна, как и фактическое содержимое.
• Постарайтесь не загромождать свою страницу слишком большим количеством изображений, фонов и ярких шрифтов. Будь проще.
• Белое пространство — это не потерянное пространство.
• Не думайте, что вам нужно заполнять все доступное пространство; забивание всех средств массовой информации бесполезными фактами не принесет вам никакой пользы.
• Белое пространство — ваш друг, а не враг.

Цвет

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

• Используйте меньше цвета, пожалуйста.
• Вот мгновенная цветовая схема, которую может использовать не дизайнер: начните с основного цвета, затем выберите более темные и светлые варианты и настройте насыщенность, но не оттенок.
• Не бойтесь цвета.
• Выбирая цвета для клиента, делайте это возле окна; солнце для всех одно, а вот освещение в помещении — нет.
• Простота превыше всего в цветовой палитре; Работайте в оттенках для большего количества вариаций. 2011 год — это год меньше значит больше.
• При выборе цветовой схемы сделайте соседние элементы контрастными, а не совпадающими (например,г. белые стены и черные шторы).

Кривая обучения

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

• Никогда не прекращайте учиться.
• Обучение подобно горизонту: оно не имеет границ (китайская пословица). Я чувствую, это относится и к дизайну.
• Никогда не переставай учиться.
• Развивайте свою страсть к учебе.
• Стремитесь узнавать что-то новое и раздвигайте границы с каждым новым проектом.

Внимание к пользователю

Всегда помните о пользователе. Это много раз всплывало. Юзабилити — это все и завершение всех требований проекта.Форма и блики — это фантастика, но если они каким-либо образом ставят под угрозу удобство использования дизайна, их следует пересмотреть. Большинство веб-сайтов в некотором роде интерактивны, поэтому функциональность и пользователь должны иметь приоритет над эстетикой, иначе проект потерпит неудачу (по крайней мере, до некоторой степени).

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

• Создавайте эстетичный дизайн, но не за счет удобства использования.
• Неважно, насколько хорош дизайн; если он не работает и не может быть найден, это бесполезно.
• Думайте, как целевой пользователь.
• Функция до формы!
• Все дизайны начинаются с анализа аудитории. Если вы не знаете, для кого вы проектируете, как вы можете узнать, что они получат ?
• Не стоит недооценивать пользователей.
• Дизайн с учетом клиента, но для конечного пользователя .В конце концов, все будут счастливы.
• Это может показаться скучным, но вот мой совет: форма следует за функцией! Это хороший дизайн, если пользователь может достичь того, чего он хочет, так, как он хочет.
• Сначала подумайте о пользователе, а затем проектируйте соответственно.
• Пользовательский опыт важнее всего. Если им нельзя пользоваться, значит, бесполезно.
• Понимание — ключ к созданию простых и удобных дизайнов. Поймите пользователей, , почему дизайна и бизнес-целей.

Экономьте… Часто!

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

• Часто используйте Command + S.
• SOS: экономить часто, глупо.
• Простой дизайн и не забывайте почаще сохранять свою работу.
• Не забывайте почаще сохранять свою работу.
• Сохраняйте файлы как можно раньше и чаще.
• Никогда не забывайте экономить. Это самый простой и полезный совет, который я могу дать.
• Вашему дизайнерскому таланту не сравниться с системной ошибкой или компьютерной аварией. Всегда сохраняйте и делайте резервные копии ваших цифровых шедевров… часто!

Вдохновение

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

• Помните, дизайнерское вдохновение может прийти в любое время, даже когда вы в душе или в туалете, поэтому не волнуйтесь, если вас ударили.
• Не создавайте дизайна в вакууме. Черпайте вдохновение у других как онлайн, так и лично.
• Носите с собой ноутбук везде; никогда не знаешь, когда придет вдохновение.
• Вдохновение исходит от того, что вы меньше всего ожидаете от него, так что держите глаза открытыми.
• Ешьте мир глазами.
• Не крадите и не копируйте творчество других, но вдохновляйтесь им.
• Возьмите с собой ноутбук везде (кровать, ванна, умывальник…).

Выходи!

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

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

Не заставляйте

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

• Пусть течет; не пытайтесь усердно, иначе это будет выглядеть суетливо.
• Не старайся. Он просто придет к вам и будет выглядеть намного лучше.
• Когда вы застряли, просто отойдите на время от проекта, а затем вернитесь к работе с новыми мыслями и свежим взглядом.
• Если вам сложно развивать идеи, сделайте перерыв, затем зайдите на @smashingmag и позвольте вдохновению взять верх.

Планировка

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

• Главное оставить как главное.
• Сделайте макет копии как можно больше основой дизайна.Сообщение не имеет значения, если оно неразборчиво.
• Создавайте черно-белые и цветные композиции, чтобы клиенты могли видеть разницу между макетом, цветом и дизайном.
• Вот простое правило хорошего макета и расположения: убедитесь, что все можно разделить на четыре.
• Используйте «тест на косоглазие», чтобы оценить графический макет: структуру, контраст, пространственные отношения, удобство использования.

Сетка

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

• Всегда проектируйте в формате сетки; это никогда не подводит. Оставайтесь организованными.
• Создайте прочный фундамент, используя возможности модульной сети, прежде чем переходить к проектированию произвольной формы.Это более интуитивно понятно!
• Невидимая сетка: то, что вы не видите, так же важно, как то, что вы делаете.
• Всегда используйте сетку. Тогда обязательно сломайте его.
• Ваш дизайн не будет выглядеть правильно, пока вы по-настоящему не разберетесь с сеткой.
• Делая верстку страницы, не оставляйте все на волю случая. Всегда используйте сетку.
• Используйте сетку. Это вас не ограничивает; это помогает вам принимать решения.
• Обратите внимание на сетку.

Визуальная иерархия

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

• Каждой странице нужен визуальный якорь, что-то, что привлекает пользователя и доминирует в дизайне.
• Установите четкую иерархию элементов. Должно быть понятно, на что смотреть первое, второе и третье.
• Максимизируйте эффективность взаимодействия, разместите элементы управления и контент в соответствующих местах и ​​сконцентрируйте внимание там, где это наиболее важно.
• Обязательно посмотрите на свой дизайн в оттенках серого. Вы увидите настоящий контраст и почувствуете иерархию.
• Доверяйте своим глазам. Если они не привлекаются естественным образом к важным частям макета, вам лучше их переместить.

Советы посторонних

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

• Не бойтесь спрашивать мнение других.
• Вы не можете проверять слишком много раз. Попросите других людей тоже проверить вашу работу.
• Учитывайте критику со стороны людей за пределами вашего творческого круга; пользователи и потребители важны.
• Опишите другу ваш новый дизайн-проект и спросите его мнение. Запишите отзыв.

Типографика

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

• Белый текст на темном фоне выглядит круто, но вы не можете его прочитать.
• Всегда используйте хороший шрифт, например Helvetica, и не используйте Arial. Если вы дизайнер, купите потрясающие шрифты.
• Не подчеркивать текст.
• Правильный шрифт выделит ваш дизайн.
• Убедитесь, что ваш веб-сайт по-прежнему работает, когда пользователи увеличивают шрифты.Это огромная (и часто игнорируемая) проблема, которая ломает веб-сайты.
• Получите действительно в типографике. Это отличает любителей от профессионалов.
• Размер вашего шрифта может и будет изменяться и искажаться браузерами, плохими мониторами и поисковыми системами. Запланируйте это.

Оригинальность

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

• Не ограничивайте себя модным. Оригинальность означает выход из зоны комфорта каждого.
• Попробуйте найти свой собственный стиль! Будь оригинальным.
• Искать вдохновение — это хорошо, но научитесь воплощать все больше и больше своих собственных идей. Из вас получится настоящий дизайнер.
• Design — это знание, когда следовать правилам, а когда их нарушать.
• Используйте других для вдохновения, но не становитесь ими. Важно развивать свой собственный стиль.
• Будьте оригинальны.
• Внимательно изучите основы своего ремесла, чтобы потом знать, когда их отбросить.
• Правила, подсказки и уловки — это здорово, но правила предназначены, чтобы их нарушать. Будьте разными, но делайте то, что кажется правильным и правильным.
• Никогда не бойтесь игнорировать тенденции; тенденции определяют визионеры-единомышленники.

Доверяйте своим инстинктам

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

• Советы по дизайну в совокупности выглядят как мантры. Это контрпродуктивно, если вы такой циничный, как я. Доверяй своим инстинктам. Бунтарь.
• Хватит на это смотреть. Это отлично!
• Доверяйте своим инстинктам.
• Изучая новую технику, попробуйте ее, прежде чем искать учебное пособие. Так вы часто узнаете больше.
• Доверяйте себе, но всегда спите на этом.
• Доверяйте своей интуиции.

Перерыв

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

• Поспите на нем, а на следующий день пересмотрите его.
• Как только вы думаете, что закончили, остановитесь. Сделайте перерыв не менее четырех часов. Вернитесь и оцените заново.
• Дизайн никогда не бывает законченным. Продолжайте пытаться улучшить то, что вы создали. Он будет меняться от хорошего к лучшему и к отличному.
• Отойдите от проекта, варите на медленном огне и вернитесь через день или два для редактирования.Даже при работе в сжатые сроки это очень важно.
• После того, как вы «закончите» свой дизайн, сделайте перерыв, затем вернитесь к нему и посмотрите, какие элементы не нужны.

Хорошо спать

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

• Больше спать.
• Высыпайтесь.
• Если у вас есть возможность посоветоваться с подушкой, сделайте это! Утро мудрее вечера.

Еще немного для дороги

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

• Перестаньте думать о «кампании» и начните думать о «разговоре».
• Оптимизируйте свой рабочий процесс для элементов, которые вы повторно используете: предустановки, действия, настраиваемые панели и макеты сетки, сэкономьте часы времени.
• У дизайна есть 56 секунд, чтобы привлечь чье-то внимание.Слайд-шоу с кнопками призыва к действию решает эту проблему.
• Дизайн в соответствии с потребностями клиента, а не для того, чтобы оставаться в зоне комфорта.
• Даже линия в один пиксель может изменить восприятие дизайна.
• Творчество означает позволять себе ошибаться. Дизайн означает знание того, какие ошибки следует избегать.
• Литература может помочь в дизайне. Инвестируйте в отличные книги, такие как The Non-Designer’s Design Book и The Smashing Book .
• Задавайте правильные вопросы.
• Нет складки.
• Дизайн, как и любовь, заключается в деталях. Внимание к деталям может сделать дизайн отличным.
• С энтузиазмом относитесь к каждому создаваемому вами дизайну. Эта страсть будет иметь значение
• Если вы сделаете все жирным, ничего не останется жирным.
• Половину времени посвящайте учебе, половину времени на занятия и половину на преподавании. Тогда отдыхай.
• Идентичность — это последовательность. Не забудьте согласовать свои изображения, сообщения, цвета и шрифты на всех дизайнерских носителях.
• Независимо от того, сколько времени потребовалось для создания, проектирования и производства вашего веб-сайта, если есть какие-либо сомнения в том, что он будет работать, начните заново или нет.
• Подумайте, прежде чем начинать. Если нет, значит, вы уже проиграли.
• word-wrap — наиболее полезное свойство CSS, которое дизайнеры игнорируют: word-wrap: break-word; .
• «Будьте последовательны»: мать всех советов по дизайну.
• Дизайн с учетом кода. Знайте возможности и ограничения XHTML, Flash, JavaScript и CSS.
• Всегда следуйте четырем основным принципам CRAP: контраст, повторение, выравнивание, близость.
• Обучите своего клиента, обучите его еще немного, а затем обучите его еще больше! Неосведомленный клиент — огромное препятствие на вашем пути к дизайну.
• Не прекращайте задавать вопросы. Ответить.
• Ваши лучшие аналоговые инструменты: ручка, бумага, ластик, линейка, кофе, конечные пользователи и точки зрения других людей.
• Цель не в том, чтобы жить вечно, а в том, чтобы создать то, что будет.
• Отказ — не конечная точка. Фактически, это отправная точка.

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