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

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

1.​ Узнайте основы дизайна

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

2. Изучите основы пользовательского интерфейса

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

3.​ Ознакомьтесь с веб-технологиями

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

4.​ Изучите веб-дизайн инструменты

Существует множество инструментов, которые помогут веб-дизайнерам создавать дизайны.​ Ознакомьтесь с графическими программами, такими как Adobe Photoshop или Sketch, для создания дизайнов.​ Также изучите инструменты для прототипирования, такие как Adobe XD или Figma, для создания интерактивных прототипов веб-сайтов.

5.​ Практикуйтесь и изучайте другие работы

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

6.​ Учитесь отзывам и критике

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

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

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

Дизайн

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

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

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

Дело не в таланте

В детстве я играл в игру Minecraft. Я смотрела на все красивые вещи, которые делали другие люди, но когда я пыталась сделать что-то сама, все выглядело как коробка. Ни красоты, ни стиля. А как сделать что-то красивое в Minecraft?

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

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

Выбор инструментов

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

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

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

• — Инструменты, разработанные специально для MacOS. Когда это делается вместе с миром онлайн-программирования, это становится чем-то вроде реакции дизайна. Скетч считает, что это относится к работе всех дизайнеров. Цены составляют 99 долларов США в год. — Бесплатный мультиплатформенный инструмент, продолжающий программирование, аналогичный VUE. Adobe XD не имеет такого большого сообщества, как Sketch, но к нему очень легко привыкнуть. — Это своего рода швейцарский нож в мире дизайна, который каждый может сравнить с jQuery. Adobe Photoshop за $9,99 в месяц.

Adobe XD. Основная причина такого выбора — интерактивность, так что это не похоже на то, что я решил стать заложником экосистемы Apple. Кроме того, Adobe XD имеет поддержку Adobe, поэтому можно ожидать, что этот проект будет существовать долгое время. А новичкам будет особенно приятно, что с мая 2018 года Adobe XD стал бесплатным для использования (хотя это и так редко беспокоит).

О правильном настрое

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

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

Изучение инструментов

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

Я выбрал четыре наиболее часто используемых инструмента дизайнера, чтобы вам не пришлось тратить много времени на их поиск. Лучше всего потратить время на сам дизайн. Это означает, что как только вы быстро поймете основы, вы сразу же сможете приступить к практике. Давайте поговорим об этих инструментах на примере Adobe XD.

Использование инструмента "Прямоугольник" — Инструмент "Прямоугольник".

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

Прямоугольник

текст инструмента — текст строки

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

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

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

Текстовые инструменты — однострочные метки

Инструмент "Текст" — для больших участков текста.

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

Инструмент "Текст" — многострочные текстовые фрагменты

▍ Инструмент выделения — выделение объектов.

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

Инструменты выбора

Линейный инструмент

Линии полезны, например, для разделения элементов страницы. Именно поэтому мы говорим об инструменте Line. Технически, вы можете использовать инструмент Rectangle для того же самого, но вы можете реализовать практически все, используя элементы HTML div.

Линейный инструмент

Дизайн: рекомендации и приёмы работы

▍ Упаковка.

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

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

Примеры неудачных и удачных макетов

▍ Цвет.

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

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

Примеры работы с цветом и текстом

Типография.

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

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

Примеры использования текста в верхнем регистре

Дизайн домашней страницы (или лендинга)

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

Как только я понимаю, какую историю хочу рассказать через страницы, я обычно начинаю искать вдохновение. Большим источником вдохновения для меня является проект Land-Book.com. Это полный список изысканных образцов дизайна целевых страниц, за которые вы можете проголосовать. Еще один проект, в котором вы можете найти вдохновение, — interfaces.pro. Можно выбрать определенные типы страниц. Например, это может быть страница с ценами, страница 404 или страница с информацией о сайте. Я просматриваю их все, пока не найду несколько сайтов, которые мне нравятся, пока они не будут похожи на те страницы, стиль работы которых я имею в виду.

Посадочная страница.

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

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

Выводы и рекомендации

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

Дизайн веб-приложения (или панели управления)

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

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

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

Онлайн-заявка.

▍ Магазин фиксированной ширины

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

Примеры веб-приложений, использующих постоянные контейнеры: Twitter, Buffer, DigitalOcean, Netlify и GitHub.

▍ Гибкие контейнеры

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

Примерами приложений, использующих agile-контейнеры, являются Slack, Intercom, Hotjar, Google Sheets, Trello и Spotify.

Выводы и рекомендации

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

Итоги

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

НЕ ИЗУЧАЙ веб-дизайн так!