Веб дизайн что нужно знать: Базовые навыки веб-дизайнера — Айтилогия

Базовые навыки веб-дизайнера — Айтилогия

Базовые навыки веб-дизайнера

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

Веб-дизайн

11 сент. 2019

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

Сегодня веб-дизайнер должен:

1. Хорошо знать Adobe Photoshop или другой редактор для создания и проектирования сайтов, например, Figma или Sketch.

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

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

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

2. Уметь работать с изображениями, графикой, обрабатывать фотографии.

Для этого подойдут такие программы, как Adobe Photoshop Adobe Lightroom или Adobe Illustrator.

3. Разбираться в типографике (шрифтах) и уметь работать с ней

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

4. Понимать принципы построения гармоничной и правильной композиции

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

5. Понимать процесс вёрстки

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

6. Знать тайны психологии и того, как устроен мозг человека

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

7. Уметь работать с цветом

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

8. Разбираться в интернет-маркетинге, обладать логическим и аналитическим мышлением

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

9. Иметь чувство вкуса, стиля и эстетики

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

10. Обладать высокой насмотренностью

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

11. Уметь общаться с клиентами и командой

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

Но главное — веб-дизайнер должен обладать диким желанием постоянно развиваться !

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

Что должен уметь веб-дизайнер? Главные навыки веб-дизайнера | Глава 2

← Назад | Продолжение (Глава 3) →

(Перед вами бесплатный курс Рафаля Томаля «Интро в веб-дизайн». В курсе 7 глав. Если вы здесь впервые, то лучше начните сначала)

Мир изменился. Как мы уже выяснили в предыдущем уроке, ценность дизайна выросла, а вместе с ней — и требования к профессии дизайнера.

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

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

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

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

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

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

Графический дизайнер

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

Графический дизайнер — очень широкое понятие. Раньше граф дизайнер совмещал в себе все роли, которые я перечислю ниже. Для многих людей за пределами дизайн-индустрии, любой UI/UX-дизайнер, веб-дизайнер или бренд-дизайнер — это просто “графический дизайнер”. Так что если не хотите долго объяснять свою должность на очередном семейном ужине, просто говорите, что вы графический дизайнер.

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

Визуальный дизайнер

Рис 2.1: Визуальный дизайнер создает макеты сайтов, веб-приложений, мобильных приложений, а также руководства по стилю, шаблоны и т.п. Все примеры на картинке — работы с CreativeMarket.com.

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

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

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

Бренд-дизайнер

Рис 2.2: Бренд-дизайнер в основном создает логотипы, руководства по стилю, руководства по брендингу, цветовые палитры, руководства по шрифтам, иконки, иллюстрации и другие элементы визуальной айдентики. В примерах выше — работы Benjamin Garner, Eddie Lobanovskiy и Claire Coullon.

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

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

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

Дизайнер интерфейсов (UI)

Рис 2.3: Дизайнер пользовательских интерфейсов создает макеты экранов приложений и руководства по стилю в интерфейсе. Примеры выше — работы Regen G., Cuberto и Greg Dlubacz.

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

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

UX-дизайнер

Рис 2.4: UX-дизайнер проводит исследования, интервью с пользователями и клиентами, создает пользовательские истории, пути пользователя (user flow), вайрфреймы и т.д. Примеры выше — работы Alex Sailer, Janna Hagan, Autumn Mariano, а также мои собственные проекты.

Хотя проектирование пользовательского опыта — дисциплина с уже некоторым стажем, ее место в дизайн-процессах устоялось не так давно.

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

Работа по проектированию пользовательского опыта — это исследования пользователей, интервью с клиентами, определение проблем, поиск решений, рисование путей пользователя (user flows) и вайрфеймов.

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

Веб-дизайнер

Рис 2.5: Веб-дизайнер обычно создает вайрфреймы, макеты страниц и руководства по стилю в веб. Примеры выше — это работы, которые я делал для своих клиентов.

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

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

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

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

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

Дизайнер-единорог

Рис 2.9: Дизайнер-единорог умеет дизайнить и кодить — и всегда сварганит чашечку чудесного кофе.

Ок, это не настоящая должность, а скорее внутрячковая шутка tech-стартаперов. Это такой универсал, который владеет и визуальным дизайном, и UI/UX, и проектированием взаимодействий, и продуктовым дизайном — ну и кодить конечно тоже умеет здорово.

Именно за этот невероятно редкий набор компетенций он и получил свое гордое название “дизайнер-единорог”.

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

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

Из-за обилия информации, может показаться, что освоить дизайн сложно. Сфера развивается так стремительно, постоянно появляются новые роли — например, дизайнер дополненной реальности или дизайнер 3D моделей.

Не ставьте себе цели изучить все: учитесь с умом и концентрируйтесь на том, что действительно хотите делать. Если вас привлекает цифровой дизайн (сайты, приложения, веб-инструменты и т.п.) — уделяйте максимум внимания визуальному и UI/UX дизайну.

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

Ни больше, ни меньше.

(с) Над переводом работали: Ольга Жолудова и Анастасия Свеженцева.

← Назад | Продолжение (Глава 3) →

9 направлений, в которых веб-дизайнеру нужно развить себя — статьи на Skillbox

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

Например:

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

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

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

Важно!

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

Чтобы сверстать страницу хорошо, можно пользоваться такими приемами:

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

Atelier: beauty store on Dribbble

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

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

The Design Genome Project by InVision

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

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

Знание типографики — один из основных навыков любого дизайнера, и не важно, создает ли он интерфейсы, делает макеты печатных газет или верстает плакаты.

Важно!

Типографика на странице тесно связана с другими элементами интерфейса, поэтому нужно правильно ей пользоваться.

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

Дизайнер, который разбирается в типографике:

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

Exploring The North Face on Dribbble

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

Важно!

Для работы с цветом нужно знать, какие цвета сочетаются, какие — нет, что такое гармония.

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

Цветовой круг Иоханнеса Иттена

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

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

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

На протяжении долгого времени сайты рисовали в Adobe Photoshop — универсальном графическом редакторе. Со временем появились редакторы для веб: Sketch, Figma или Adobe XD, которые работают быстрее, чем Photoshop, у них простой интерфейс и нет лишних функций. Поэтому они хорошо работают даже с большим количеством открытых макетов и их легко освоить.

Вот программы, которые пригодятся веб-дизайнеру:

• 
  Axure — для проектирования сайта;
• 
  Sketch, Figma или Adobe XD — для работы с графикой и создания макетов;
• 
  Principle и Adobe XD — для создания анимированных прототипов сайтов и приложений;
• 
  Zeplin — для передачи файлов разработчику;
• 
  Adobe Illustrator — для создания иконок и логотипов, а также для работы с любой векторной графикой.

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

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

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

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

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

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

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

Важно!

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

Начинающим веб-дизайнерам нужно знать:

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

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

Простой способ узнать, как работает верстка, — познакомиться с кодом любого сайта с помощью веб-инспектора браузера.

Веб-инспектор в Google Chrome

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

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

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

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

Хороший дизайнер не просто много знает, но и применяет эти знания в работе.

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

Курс «Веб-дизайн с 0 до PRO»

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

• 
   32 часа теории и 16 практических заданий
• 
  Живая обратная связь с преподавателями
• 
  Неограниченный доступ к материалам курса
• 
  Стажировка в компаниях-партнёрах
• 
  Дипломный проект от реального заказчика
• 
  Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Нужно ли веб-дизайнерам уметь писать код?

Нужно ли веб-дизайнерам знать основные современные методы CSS и HTML?

Да.

Почему или почему это не важно для разностороннего веб-дизайнера?

Я ответил «да», потому что вы использовали слово « основной» .

Абсолютно необходимо, чтобы веб-дизайнеры знали основные методы HTML и CSS, точно так же, как архитекторы должны знать кое-что о физике и материаловедении, дизайнеры печати должны знать кое-что о процессе печати CMYK, а дизайнеры моды должны знать кое-что о ткани.

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

Комментарии о ваших мыслях:

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

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

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

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

Вы описали UX Design — совершенно другую дисциплину. Хотя дизайн пользовательского опыта включает в себя аспекты графического дизайна, на самом деле он имеет мало общего с CSS или HTML.

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

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

Это может быть частично верно, но не полностью. Одна популярная парадигма в системах управления контентом — это MVC (модель / представление / контроллер). Многие дизайнерские магазины хотят, чтобы дизайнеры имели некоторое представление о кодировании HTML / CSS, чтобы они могли сосредоточиться на представлении контента («представление»), а разработчики — на модели / контроллере.

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

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

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

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

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

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

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

• Маркетинг
• Брендинг и позиционирование
• Генерация трафика
• Информационная архитектура
• Графический дизайн
• Производство
• Доступность и удобство (юзабилити)
• Копирайтинг

Маркетинг

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

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

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

Брендинг и позиционирование

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

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

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

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

Генерация трафика

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

Каким образом веб-сайт будет построен, его контент и стандарты производства, – все эти аспекты будут воздействовать на его способность привлечь трафик. Если ваш сайт не показывается на первой странице результатов поиска, то он не получит долю трафика, которую мог бы (первая страница получает 99% кликов).

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

Информационная архитектура

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

Графический дизайн

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

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

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

Производство (production)

Производство веб-страниц представляет собой процесс превращения графического дизайна в живой, рабочий веб-сайт. Оно включает в себя HTML (для контента и структуры) и CSS (для визуального стиля) компоненты. Они очень, очень важны! Кроме того, понимание того, как веб-страницы построенны, поможет вам открывать новые возможности (что всегда полезно).

Доступность и юзабилити

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

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

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

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

Копирайтинг

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

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

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

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

Хороший веб-дизайнер должен быть отличным копирайтером и маркетологом …

Как и где можно всему этому научиться?

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

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

Высоких конверсий!

16-03-2016

Фотобанки.инфо Веб-дизайн – что нужно знать для того чтобы стать веб-дизайнером?

Последнее изменение 24 февраля, 2021

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

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

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

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

Какие качества должны
быть у хорошего веб-дизайнера?

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

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

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

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

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

Переход с веб-версии на мобильный дизайн. Что нужно знать?

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

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

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

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

Хорошие новости: это все еще дизайн

«Как досадить своим друзьям-дизайнерам и вызвать у них мигрень.»

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

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

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

Разнообразие устройств

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

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

Основные операционные системы

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

3D-исполнение логотипа компании Apple и робота-талисмана Android, задействованных в световых боях, с логотипом Windows на заднем плане.

Просто в качестве примера. Я недавно начал работать над дизайном Android-приложения для своего личного проекта. Не так давно я перешел от использования iPhone-устройств, поэтому, к сожалению, немного подзабыл, как пользоваться Android-устройствами. Я должен постоянно напоминать себе, что есть кнопка «back» на устройствах Android и что drawermenu является основной моделью при навигации. И это лишь некоторые из незначительных различий между этими двумя ОС.

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

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

Сложность простоты

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

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

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

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

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

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

Быстро развивающийся мир приложений

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

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

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

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

Давайте сообща сделаем этот шаг от веб к мобильному дизайну приложения!

Источник

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

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

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

Многие молодые дизайнеры часто неправильно понимают концепцию веб-дизайна, веб-дизайн — это дизайн, а не кодирование и разработка интерфейса.Конечно, было бы неплохо, если бы вы знали какой-нибудь язык программирования (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 в поисках ответов. Там вы можете создать свой дизайнерский круг, но вы не можете стать веб-дизайнером, используя инструменты. Удачи тебе.

Как стать веб-дизайнером || Проект «Карьера в искусстве»

1. Начало работы в веб-дизайне

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

Базовый рисунок

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

Теория веб-дизайна

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

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

Макет и структурирование

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

Пользовательский опыт

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

Лучшие практики дизайна веб-сайтов

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

Метрики и анализ

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

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

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

Чем занимается веб-дизайнер?

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

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

Связано: Узнайте о том, как стать веб-дизайнером

Средняя зарплата веб-дизайнера

Веб-дизайнеры могут работать полный рабочий день в компании или агентстве, но часто являются фрилансерами, которые работают одновременно с несколькими клиентами.Средняя зарплата веб-дизайнеров в США составляет 22,27 доллара в час.

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

Если вы заинтересованы в карьере веб-дизайнера, попробуйте выполнить следующие шаги:

1. Развивайте необходимые навыки.
2. Получите сертификаты.
3. Создайте сайт.
4. Поиск работы.
5. Создайте свое портфолио.
6. Продвигайте себя.
7. Рассмотрим специализацию.
8. Будьте в курсе.

1.Развивайте необходимые навыки

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

Графическое программное обеспечение

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

Языки программирования

Большинству веб-дизайнеров необходимы хотя бы некоторые знания базовых языков программирования, таких как HTML, CSS, PHP, jQuery, JavaScript и Flash. Фрилансерам нужно больше знаний в области программирования, а веб-дизайнеры, работающие в агентстве, скорее всего, будут работать в команде, в которую входят программисты и графические дизайнеры.

Поисковая оптимизация

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

Теория веб-дизайна

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

Коммуникативные навыки

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

2. Получите сертификаты

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

Adobe Certified Expert

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

General Assembly Bootcamp

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

Google Mobile Web Specialist

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

3. Создайте веб-сайт

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

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

4. Поиск работы

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

Связано: Обзор вакансий веб-дизайнеров

5. Создайте свое портфолио

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

6. Продвигайте себя

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

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

Связано: Станьте сетевым экспертом за 7 шагов

7. Рассмотрите возможность специализации

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

8. Будьте в курсе

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

Часто задаваемые вопросы

Вот ответы на некоторые из наиболее распространенных вопросов о веб-дизайнере:

Является ли работа веб-дизайнера востребованной работой?

По данным Бюро статистики труда США, в период с 2018 по 2028 год прогнозируется рост в этой области на 13%, что намного быстрее, чем в среднем.

Какова рабочая среда веб-дизайнера?

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

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

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

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

«Если ваш бизнес не в Интернете, он не будет работать». Билл Гейтс сказал это более двух десятилетий назад. Сегодня в Интернете более 644 миллионов активных веб-сайтов (по данным Netcraft), и веб-дизайнеры стали центральной частью маркетинговой стратегии любой компании. Все это делает веб-дизайнеров востребованными.

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

1. Изучите теорию веб-дизайна

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

Чтобы создать привлекательный веб-дизайн, необходимо изучить теорию цвета и основные принципы визуальной иерархии. Есть отличное задание по дизайну под названием Daily UI Challenge, которое обещает, что вы станете лучшим дизайнером за 100 дней. Попробуйте!

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

2. Научитесь кодировать

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

Вам необходимо иметь необходимые навыки в HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей). HTML устанавливает структуру и содержимое страницы, а CSS определяет параметры стиля.Я рекомендую учебники от W3schools: учебники по HTML и учебники по CSS.

Также желательно изучить JavaScript — это один из самых востребованных языков программирования. Будет намного проще создавать новые сайты с помощью JavaScript. Основные обучающие платформы предоставляют бесплатный доступ к курсам JavaScript. Ознакомьтесь с введением в курсы JavaScript от Codecademy и Udacity.

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

3.Получите правильные инструменты

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

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

Графический дизайн. Несмотря на то, что графический дизайн и веб-дизайн — это две отдельные области, веб-дизайнерам часто необходимо погрузиться в графический дизайн, чтобы решить конкретную дизайнерскую проблему.Таким образом, очень важно научиться пользоваться графическим редактором, например Adobe Photoshop. Самая распространенная задача, которую веб-дизайнеры выполняют в графических редакторах, — это редактирование изображений: изменение размера или обрезка изображений, чтобы они соответствовали определенным пространствам, или сжатие изображений, чтобы они были более подходящими для просмотра в Интернете. Вот отличный учебник по Photoshop от Tutorials.ws

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

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

Прототипирование в Mockplus

Веб-дизайнерам также необходимо ознакомиться с популярной CMS (Content Management System) — программным обеспечением, которое используется для создания цифрового веб-контента и управления им.CMS делает процедуру управления контентом намного более удобной для владельцев сайта. Хотя сегодня на рынке доступны десятки различных CMS, есть три ведущих CMS — WordPress, Joomla и Drupal. Очень важно иметь практический опыт работы с одной (или всеми) системами. Вы можете начать с простых действий, таких как внесение незначительных изменений в дизайн сайта, и перейти к более сложным действиям, таким как создание шаблона для веб-сайта или разработка плагина.

4.Изучите основные правила SEO.

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

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

Процесс веб-дизайна требует оценки и анализа готовой работы. Дизайнеры должны протестировать веб-сайт, чтобы убедиться, что страницы загружаются быстро и сайт доступен как для настольных, так и для мобильных пользователей (адаптивный дизайн).Сегодня это намного проще проверить. Вы можете использовать такие инструменты, как Google Pagespeed Insights.

6. Совершенствуйте свои коммуникативные навыки

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

Эффективное общение — краеугольный камень успешных проектов.

7. Следите за будущими тенденциями

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

Вот несколько отличных ресурсов для вашего вдохновения:

Awwwards — хорошо известный веб-сайт для профессионалов в Интернете.На сайте есть номинация «Сайт дня», где дизайнеры могут найти действительно интересные образцы веб-дизайна.

Dribbble помогает дизайнерам быть знакомыми с последними визуальными тенденциями.

Behance — отличный ресурс для углубленных тематических исследований веб-дизайна.

Web UI UX Дизайн работает. Изображение: Behance

8. Присоединяйтесь к сообществам веб-дизайнеров

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

Присоединяйтесь к популярным онлайн-сообществам, таким как Sitepoint или Uxmaster

Следите за веб-экспертами, такими как Сара Соуэйдан, Брэд Фрост, Джеффри Зельдман и Джесси Джеймс Гарретт, в Twitter.

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

Конференция Websummit для веб-профессионалов. Изображение предоставлено: Flickr

9. Ищите критику и учитесь повторять

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

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

10. Сосредоточьтесь на создании своего портфолио

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

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

Персональный сайт Адхама Даннауэя

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

Заключение

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

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

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

Удачи!

10 вещей, которые нужно знать о веб-дизайне и разработке

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

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

1 Цель

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

ПОЛУЧИТЬ САЙТ
Всего 10 фунтов стерлингов в месяц

2 Выбор домена

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

3 Выбор веб-хостинга

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

4 Быстро реагируйте

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

ПОЛУЧИТЕ ВЕБ-САЙТ ECOMMERCE Всего за 20 фунтов стерлингов в месяц

5 Отличный контент

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

6 Макет

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

7 Функции и возможности

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

8 Поисковая оптимизация (SEO)

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

9 Обслуживание сайта

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

10 Аналитика

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

5 вещей, которые веб-дизайнеры не хотят, чтобы вы знали

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

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

1. Большинство обновлений обслуживания занимает менее 30 минут

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

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

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

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

2. Хостинг не очень дорогой

Хостинг довольно дешевый … особенно для довольно небольшого статического веб-сайта менее 50 страниц.

Так что это значит? Если вы не просите своего веб-разработчика очень часто менять ваш сайт, то вам не стоит платить ему много.Большинство наших веб-сайтов для малого бизнеса платят нам от 200 до 500 долларов в год за хостинг.

3. Есть возможность обновить собственный сайт

Сейчас этот факт известен больше, чем 4 или 5 лет назад. Но один из способов резко сократить расходы — это просто обновить свой веб-сайт самостоятельно через «Систему управления контентом» или CMS.

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

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

Если вы регулярно обновляете свой веб-сайт, стоит иметь CMS.

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

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

Убедитесь, что ваш сайт построен правильно. Как любая SEO фирма

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

бесплатная статья, которая ответит на вопрос, мой поиск по сайту

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

5. Ваш веб-дизайнер может не быть настоящим веб-дизайнером

Сказать что? Веб-дизайнер — это специалист в области графики

дизайн, SEO, HTML, CSS и удобство использования веб-сайтов (как минимум).

Большинство «веб-дизайнеров» — это люди, которые могут знать, как делать одну или две из этих вещей, но не все из них. Просто потому, что вы знаете HTML

не означает, что вы можете создать эффективный веб-сайт для малого бизнеса.

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

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

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

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

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

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

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