Что нарисовать сайт: Что нарисовать? Идеи и упражнения на каждый день

Содержание

Как нарисовать вайрфрейм (даже если ты не умеешь рисовать)

Аудио перевод статьи

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

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

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

Ручка с толстым стержнем или маркер
Временные рамки
Ограниченное место для скетча

Создаем вайрфрейм шаг за шагом

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

Шаг 1. Определите соотношение сторон окна браузера или устройства

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

Популярные размеры для вайрфреймов десктопной версии сайта 1024×768 пикселей и 1920×1080 пикселей.
Для мобильной версии размеры зависят от конкретного устройства (например, планшет, телефоны разного размера). Сначала выясните, под какое устройство вам надо будет оптимизировать дизайн.

Чтобы вайрфреймы были реалистичнее, добавьте очертания браузера или устройства (например, панель инструментов браузера или кнопку “Домой” на устройстве).

Шаг 2. Нарисуйте навигацию и поиск

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

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

Примеры того, как можно показать разные типы навигации.

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

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

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

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

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

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

Шаг 4. Добавьте оставшиеся детали

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

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

Рисуем компоненты выбора. Раскрывающиеся списки можно изобразить как открытыми, так и закрытыми.

Баннеры обычно включают одну или две строки текста, также можно добавить кнопку или иконку “Закрыть”.
Диалоговые окна содержат заголовок, одну или две строки текста, одну или две кнопки и иконку “Закрыть”.
Индикатор прогресса обозначается частично закрашенным прямоугольником со скругленными углами, что позволяет показать оставшееся время ожидания.
Иконки можно показать так же, как изображения (перечеркнутым прямоугольником) или схематично (как мы изобразили иконки поиска). Хотя мы рекомендуем добавлять иконкам в интерфейсе подписи, вы можете пропустить их, рисуя иконки в вайрфрейме.

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

Пример: рисуем страницу с описанием товара

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

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

Шаг 1: Определяем правильное соотношение сторон вайрфрейма.

Шаг 2. Добавим в вайрфрейм панель навигации и поиск.

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

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

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

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

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

Заключение

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

Просто скажи ей, что рисовать! Нейросеть Midjourney создаёт фантастические картины, и они потрясающе хороши

Для работы проектов iXBT.com нужны файлы cookie и сервисы аналитики. Продолжая посещать сайты проектов вы соглашаетесь с нашей Политикой в отношении файлов cookie

Терминатор в стиле Да Винчи? Поверьте, скоро о нейросети Midjourney будут говорить все. Она создаёт исключительно впечатляющие картинки по ключевым словам. Правильная формулировка, немного опыта и midjourney поможет создать свою картину тем, кто вообще не умеет рисовать. Я залип почти на час, наверняка и вы не заметите как пробежит время. Попробовать точно стоит! Если думаете чем занять себя в свободную минуту, поверьте, это то, что нужно.

К примеру, после ряда опытов, арт-директор Монреальского офиса Ubisoft Эрик Белльфель с помощью этой нейросети создал звездолёты в стиле, который я бы охарактеризовал как «барокко-панк», сумасшедшая смесь элементов дизайна времён Да Винчи и современных высоких технологий.

Собственно, получившиеся изображения звездолётов как раз-таки и похожи на то, что нарисовал бы сам Леонардо.

Не меньше меня впечатлило как нейросеть midjourney рисовала в духе Star Wars

Из других результатов

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

Не менее впечатляющей выглядит то, как нейросеть видит героев Dota2

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

Запрос SCI-Fi flashlight дал не совсем тот результат, что я ожидал. Сначала сеть выдала какой-то пейзаж, который, впрочем, вполне подошёл бы на обложку НФ-книги

Потом набор чего-то близкого к запросу

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

А вот запрос «steampunk flashlight» нейросеть поняла как надо. И из 4х вариантов пришлось на самом деле выбирать…

Получившиеся результаты меня весьма впечатлили. 100% попадание! Настоящие стим-панковские фонарики.

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

Или вот, запрос «sailing on the carpet». Как фото!

Напоследок, я предложил Midjourney нарисовать «Terminator in style of Leonardo da Vinci». Увы, я потерял картинку в потоке других в чате, и не какую-то из предложенных. Как по мне, 4-я тут самое оно. Хотя все хороши…что сказать.

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

И если вы думаете что в СССР терминатора не было, то зря — он был и он до сих пор вляется большой проблемой для Европы

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

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

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

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

уж прочесть полное руководств как рисовать с Midjourney , там есть много интересного.

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

ищем любой канал с newbie (например, newbie-20). Панель со списком каналов будет слева, присоединяетесь.
пишем в чате /imagine, у вас выпадает сообщение /imagine prompt: вот после prompt вы и говорите сети, что надо создать. Можно писать через запятую. Советую пролистать вверх ленту с изображениями, там видны запросы, они помогут понять что стоит добавить. Вместо «battle robot» напишите «copper battle robot on the run, oriental, blood red sky». Будьте точнее, результаты будут удивительнее
дальше вам надо отследить свою картинку в общем потоке изображений других пользователей.
Проще всего сделать это, щелкнув правой кнопкой и скопировав ссылку, потом просто откройте её в новом окне.
Mindjourney предложит вам 4 изображения. Дальше вы можете кнопками u1,u2,u3,u4 увеличить одно из них или же кнопками v1,v2,v3,v4 улучшить. Если вы выберете второе, то итог опять надо будет отлавливать в чате (если кто знает как в Discord удобнее отслеживать свои сообщения, прошу черкнуть в комменты). Когда итоговое улучшенное изображение окончательно вас устроит, то стоит нажать max upscale, чтобы увеличить его. Потом все, вы можете просто сохранить его.
Если результат вам не понравился, то жмите на кнопку ⟳

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

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

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

Новости

Публикации

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

Ожидается, что к концу 2023 года в РФ возможно появится пробная версия национального интернета, доступ к которому будет защищен. В приближённых кругах он уже получил название «рунет 2.0»….

Очень сложно придумать что-то необычное в таком заезженном вдоль и поперёк сегменте фонариков как EDC (т.е обычных карманных). Nitecore, неожиданно, сделали весьма интересную, на мой взгляд модель…

Если вас не смущает двух-сантиметровая толщина и 400-граммовый вес этого смартфона, имеющего всевозможные виды защит: от воды, пыли и падения с высоты с сертификацией по стандартам IP68/IP69K, то…

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

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

от А до Я · Эскиз

Промышленность

12 апр 2022

Узнайте, как создавать удобные веб-сайты, которые действительно конвертируют

Понимание

Ищете рекомендации по дизайну веб-сайтов? Вы пришли в нужное место!

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

Начните с основ
Навигация
Цвет
Текст
Призывы к действию
Дизайн-системы
Оптимизация

Начните с основ

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

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

Всегда работайте с реальной копией. Lorem ipsum может быть удобен для многих вещей, но всегда лучше концептуализировать дизайн веб-сайта с реальным содержимым, которое будет жить внутри него. Если у вас нет готового контента, попробуйте написать образец и использовать его для создания своей страницы.
Использовать сетку. В макете сетки используется система столбцов, которая помогает структурировать дизайн и упорядочивать элементы. Разработчикам также намного проще реализовать его, чем другие, менее организованные проекты. Сеточная система Bootstrap — отличный пример этого.
С самого начала создавайте для разных разрешений и размеров экрана. Хотя иметь в виду несколько разрешений не обязательно, это облегчит жизнь вашим разработчикам, а также улучшит взаимодействие с пользователем. Здесь, в Sketch, мы проектируем для 360 Вт, 768 Вт, 1024 Вт, 1440 Вт и 1920 Вт в качестве минимального требования.
Работа с числами, кратными 4 или 8. Использование чисел, кратных 4 или 8, для ваших проектов — будь то интервалы, размеры, типографика и т. д. — становится отраслевым стандартом. Это также хорошее эмпирическое правило, которому нужно следовать, потому что оно помогает обеспечить согласованность и упрощает процесс проектирования. И, как вы уже догадались, ваши разработчики тоже полюбят вас за это. 9 L , чтобы запустить руководство по компоновке и посмотреть, как мы используем систему сетки.
Навигация
Хорошая навигация — один из важнейших аспектов дизайна веб-сайта. Подумайте об этом — если ваши посетители не могут найти то, что ищут, или не понимают, что они могут делать на вашем сайте, как эти посещения будут конвертироваться?
Но не волнуйтесь. Разработка навигационного путешествия — это не ракетостроение. Вот несколько простых, но безошибочных советов и рекомендаций, которые помогут вывести дизайн навигации вашего сайта на новый уровень.
- Чем меньше, тем лучше. Если меню и подменю слишком много, люди могут запутаться и покинуть ваш сайт. Сосредоточьтесь на своих приоритетах!
- Выбирайте меню с умом. Различные типы меню предназначены для разных аудиторий и продуктов, поэтому тщательно продумайте те цели и потребности, о которых мы говорили ранее. Во-первых, не покупайте другой только потому, что он крутой или новый.
- Используйте верхние строки меню. Хотя творчески подходить к дизайну — это здорово, не забывайте об ожиданиях посетителей. К настоящему времени большинство из нас привыкли к верхним строкам меню и ожидают найти здесь важную информацию. Точно так же мы ожидаем, что нижние колонтитулы будут содержать контактные формы или информацию о компании.
- Упростите поиск важных параметров. При разработке иерархии меню учитывайте как свои приоритеты, так и приоритеты пользователя.
- Добавьте подменю там, где это имеет смысл. Подменю — отличный способ разместить другие важные страницы или источники, которые в противном случае загромождали бы ваше меню. Это также делает внутреннюю логику вашей страницы более понятной.
Если вы переключите iPad в верхнем меню Apple, вы получите это красивое раскрывающееся меню с доступом ко всем их различным моделям и аксессуарам.
Цвет
Вы должны использовать цвет в дизайне сайта как маркер на бумаге. Это может помочь посетителям ориентироваться, указывая им направление наиболее важной информации. Но, если вы переусердствуете, это может легко сокрушить людей. Вот несколько простых приемов эффективного использования цвета в веб-дизайне.
- Используйте цвет для обозначения функции. Цвет часто используется, чтобы указать, что что-то кликабельно, например кнопка или ссылка. Вы даже можете использовать другой цвет, чтобы указать, нажимали ли люди на кнопку или ссылку раньше. Поскольку ваш пользователь уже ожидает такой язык дизайна, лучше придерживаться его.
- Используйте фирменные цвета для акцентов. Когда дело доходит до выбора цветов, рекомендуется использовать нейтральные цвета для основного текста и фона. Затем используйте фирменные цвета для кнопок, ссылок и изображений, чтобы улучшить визуальную идентичность вашего бренда и повысить узнаваемость бренда с самого начала.
- Проверить читабельность и доступность. Выбранная вами цветовая палитра может оказать большое влияние на глаз пользователя — в лучшую или в худшую сторону. Вы можете проверить свои цветовые палитры на соответствие правилам WCAG, чтобы убедиться, что в вашем дизайне используется наилучший цветовой контраст для удобочитаемости.
- Найдите вдохновение. В видеоиграх часто используется цвет. Например, вы можете изучить использование ими знаков, которые дизайнеры используют, чтобы указать, для чего можно использовать элемент или объект.
Домашняя страница Stripe не только красочная — цвета постоянно меняются! Кроме того, попробуйте ввести код Konami и посмотрите, что произойдет 👀
Текст
Важно предлагать своим посетителям необходимую им информацию, но основной текст должен быть привлекательным и простым для понимания, если вы хотите, чтобы они прочитали все до конца. . Вот некоторые ключевые рекомендации по дизайну веб-сайтов при использовании текста.
- Пустое пространство. Используйте короткие абзацы и разбивайте разделы заголовками, изображениями и другими визуальными элементами. Воспринимайте эти перерывы в тексте как возможность перевести дух между идеями.
- Остерегайтесь лохмотьев и вдов. Это не люди и не потертая одежда, а текст, который плохо отображается. Тряпки возникают, когда выравнивание текста отключено, и он начинает формировать странные формы. Вдовы — это оставшиеся слова, которые висят в конце ваших абзацев. Это может показаться мелочью, но они действительно могут улучшить дизайн вашего сайта.
- Динамичный дуэт Respect: дизайн и контент. Присяжные всегда спорят о том, должен ли контент влиять на дизайн или наоборот. Что бы вы ни выбрали, убедитесь, что ни один из них не конкурирует с другим. Текст должен быть лаконичным, но информативным, а дизайн привлекательным, но простым.
- Установить параметры. Хотя вы, возможно, уже помните об отступах и полях, убедитесь, что горизонтальные строки текста никогда не превышают 70 символов. Его легко пропустить.
- Не забывайте об иерархии. Текстовая иерархия может создать или разрушить дизайн. Убедитесь, что вы поняли это правильно с самого начала. Не знаете, с чего начать? Для справки ознакомьтесь с рекомендациями Apple и Material Design от Google.
- SEO. Подумайте о SEO-оптимизированной структуре текста и страницы. Это означает добавление ключевых слов в заголовки и основной текст, а также продумывание альтернативного текста для изображений, когда вы делитесь ими со своей командой разработчиков.
В этом примере вы можете увидеть, как веб-дизайнеры Mailchimp позаботились о том, чтобы h2 «Автоматизируйте свой маркетинг» не был одной сверхдлинной строкой, а основной абзац ниже был компактным. Ни тряпья, ни вдов.
Призывы к действию
Самый важный элемент веб-дизайна, призыв к действию (CTA) — это ссылка или кнопка, которая побуждает посетителей вашего сайта что-то сделать. Это должно быть понятно, легко найти и соответствовать вашим целям для целевой страницы или веб-сайта.
- Учитывать все уровни CTA. У вас может быть более одного CTA в зависимости от целей страницы, но важно разделить их на основные, второстепенные и третичные — и сделать это очевидным в вашем дизайне. Убедитесь, что вы уделяете своей основной цели больше всего места и внимания.
- Короче. Эффективный текст CTA должен быть кратким, понятным и информативным для пользователя. Общие примеры включают «Узнать больше», «Купить сейчас» и «Подписаться бесплатно».
- Ключевое значение имеет размещение. Ранее мы упоминали о сгибе. Хотя именно здесь должен находиться ваш основной CTA, вы можете добавить вторичные и третичные CTA ниже сгиба (нижняя половина вашей страницы). Определение того, куда вы хотите, чтобы ваши призывы к действию, также может помочь вам разобраться, как лучше организовать текст в целом.
Дизайн веб-сайта Blush использует цвета, чтобы различать их CTA. В то же время он использует верхнюю панель навигации, чтобы создать дополнительное место в верхней части страницы для дополнительных CTA.
Дизайн-системы
Если в жизни и в дизайне веб-сайтов есть одна постоянная вещь, так это изменения. Системы дизайна могут быть отличным преимуществом, если вы создаете веб-сайт, рассчитанный на длительное время. С их помощью вы можете создать набор правил, которые могут использовать все, кто занимается дизайном для вашего бренда, чтобы убедиться, что они используют правильные цвета, изображения, макеты и многое другое.
- Создавать для будущего. Вам всегда нужно будет вносить изменения, поэтому убедитесь, что у вас есть система дизайна — и ее аналог для разработчиков — чтобы вы могли сразу же взяться за дело.
- Создавайте повторно используемые стили и активы. Вы можете создавать текстовые стили, правила интервалов, цветовые маркеры и повторно используемые элементы, такие как символы в Sketch, чтобы сделать ваш дизайн согласованным и более легким для настройки или обновления позже.
В этом примере вы можете увидеть, как Monday Studio может отслеживать все элементы дизайна своего веб-сайта, размещая свою библиотеку системы дизайна в Sketch.
Оптимизация
Ни один дизайн веб-сайта не будет полным без надлежащей оптимизации. Король среди лучших практик: убедиться, что ваш сайт удобен для Google, жизненно важно для успеха в Интернете.
- Будьте мобильными. Люди, скорее всего, найдут ваш сайт через мобильные устройства, даже если они будут работать с ним позже, со своих компьютеров. Поэтому лучше сохранить дизайн вашего веб-сайта в первозданном виде, чтобы мы никогда не испортили первое впечатление.
- Не забывайте изображения. Работа над дизайном не заканчивается, когда веб-сайт готов! Работайте в тесном контакте со своим разработчиком, чтобы убедиться, что ваши изображения оптимизированы, чтобы они выглядели четкими, не замедляя работу вашего сайта. Для проверки можно использовать такие инструменты, как ImageOptim.
- Построить прототип. Это поможет вам и всем остальным получить истинное представление о дизайне. Если вы работаете с клиентом, это также может принести вам бонусные баллы. И последнее, но не менее важное: прототипы также отлично подходят для пользовательского тестирования.
С помощью прототипа вы можете протестировать функциональность дизайна вашего веб-сайта и получить отзывы от потенциальных пользователей.
Веселиться
Что? Да! Веселье – это самая важная часть. Если вам не нравится процесс разработки веб-сайта, следовать всем этим передовым методам будет непросто. Есть много движущихся частей, но вы должны принять это и наслаждаться наблюдением за тем, как ваше видение собирается воедино по частям.
Быстрый способ убедиться, что вы весело проводите время? Посвятите некоторое время разработке мелких деталей. У нас есть несколько на вашем веб-сайте и веб-приложении — вы знаете, что это такое? 👀 (Если вам нужна подсказка, она есть на нашей странице загрузок.)
Пока вы ждете завершения загрузки, попробуйте изменить настройки внешнего вида 💅
Вам также может понравиться
Введение в типографику — что это такое и как сделать это правильно
Слова имеют значение даже визуально
Почему исследование пользовательского опыта так важно и как это сделать
Узнайте, как инвестиции в исследования UX могут помочь вашему бизнесу расти, а также некоторые другие преимущества
Как сделать обложку альбома
5 советов по дизайну, которые помогут вам создать легендарную обложку для вашей музыки
от А до Я · Эскиз
Промышленность
12 апр 2022
Узнайте, как создавать удобные веб-сайты, которые действительно конвертируют
Понимание
Ищете рекомендации по дизайну веб-сайтов? Вы пришли в нужное место!
Ключ к хорошему дизайну веб-сайта — начать с прочной основы. Ниже приведены некоторые советы и приемы, которые помогут вам начать работу.
- Начните с основ
- Навигация
- Цвет
- Текст
- Призывы к действию
- Дизайн-системы
- Оптимизация
Начните с основ
Давайте начнем с краткого обзора простых рекомендаций, которые могут значительно улучшить дизайн вашего веб-сайта, если вы примените их с самого начала.
- По возможности начинайте с каркаса. Даже если это всего лишь карандашный набросок, отдайте предпочтение воплощению своих идей на бумаге или на экране. Если у вас есть ресурсы, мы рекомендуем посвятить некоторое время UX структуре страницы. Это сэкономит вам массу времени при работе с пользовательским интерфейсом позже. Верь нам!
- Всегда работайте с реальной копией. Lorem ipsum может быть удобен для многих вещей, но всегда лучше концептуализировать дизайн веб-сайта с реальным содержимым, которое будет жить внутри него. Если у вас нет готового контента, попробуйте написать образец и использовать его для создания своей страницы.
- Использовать сетку. В макете сетки используется система столбцов, которая помогает структурировать дизайн и упорядочивать элементы. Разработчикам также намного проще реализовать его, чем другие, менее организованные проекты. Сеточная система Bootstrap — отличный пример этого.
- С самого начала создавайте для разных разрешений и размеров экрана. Хотя иметь в виду несколько разрешений не обязательно, это облегчит жизнь вашим разработчикам, а также улучшит взаимодействие с пользователем. Здесь, в Sketch, мы проектируем для 360 Вт, 768 Вт, 1024 Вт, 1440 Вт и 19 Вт.20 Вт как минимальное требование.
- Работа с числами, кратными 4 или 8. Использование чисел, кратных 4 или 8, для ваших проектов — будь то интервалы, размеры, типографика и т. д. — становится отраслевым стандартом. Это также хорошее эмпирическое правило, которому нужно следовать, потому что оно помогает обеспечить согласованность и упрощает процесс проектирования. И, как вы уже догадались, ваши разработчики тоже полюбят вас за это.
- Максимизируйте возможности «над сгибом». Верхняя половина вашей страницы — это первое, что видят посетители. Убедитесь, что ваш основной призыв к действию есть и его легко найти. Четко объясните, что представляет собой ваш продукт или услуга, чтобы люди знали, как вы можете им помочь в течение нескольких секунд после перехода на вашу страницу. 9 L , чтобы запустить руководство по компоновке и посмотреть, как мы используем систему сетки.
  Навигация
  Хорошая навигация — один из важнейших аспектов дизайна веб-сайта. Подумайте об этом — если ваши посетители не могут найти то, что ищут, или не понимают, что они могут делать на вашем сайте, как эти посещения будут конвертироваться?
  Но не волнуйтесь. Разработка навигационного путешествия — это не ракетостроение. Вот несколько простых, но безошибочных советов и рекомендаций, которые помогут вывести дизайн навигации вашего сайта на новый уровень.
  - Чем меньше, тем лучше. Если меню и подменю слишком много, люди могут запутаться и покинуть ваш сайт. Сосредоточьтесь на своих приоритетах!
  - Выбирайте меню с умом. Различные типы меню предназначены для разных аудиторий и продуктов, поэтому тщательно продумайте те цели и потребности, о которых мы говорили ранее. Во-первых, не покупайте другой только потому, что он крутой или новый.
  - Используйте верхние строки меню. Хотя творчески подходить к дизайну — это здорово, не забывайте об ожиданиях посетителей. К настоящему времени большинство из нас привыкли к верхним строкам меню и ожидают найти здесь важную информацию. Точно так же мы ожидаем, что нижние колонтитулы будут содержать контактные формы или информацию о компании.
  - Упростите поиск важных параметров. При разработке иерархии меню учитывайте как свои приоритеты, так и приоритеты пользователя.
  - Добавьте подменю там, где это имеет смысл. Подменю — отличный способ разместить другие важные страницы или источники, которые в противном случае загромождали бы ваше меню. Это также делает внутреннюю логику вашей страницы более понятной.
  Если вы переключите iPad в верхнем меню Apple, вы получите это красивое раскрывающееся меню с доступом ко всем их различным моделям и аксессуарам.
  Цвет
  Вы должны использовать цвет в дизайне сайта как маркер на бумаге. Это может помочь посетителям ориентироваться, указывая им направление наиболее важной информации. Но, если вы переусердствуете, это может легко сокрушить людей. Вот несколько простых приемов эффективного использования цвета в веб-дизайне.
  - Используйте цвет для обозначения функции. Цвет часто используется, чтобы указать, что что-то кликабельно, например кнопка или ссылка. Вы даже можете использовать другой цвет, чтобы указать, нажимали ли люди на кнопку или ссылку раньше. Поскольку ваш пользователь уже ожидает такой язык дизайна, лучше придерживаться его.
  - Используйте фирменные цвета для акцентов. Когда дело доходит до выбора цветов, рекомендуется использовать нейтральные цвета для основного текста и фона. Затем используйте фирменные цвета для кнопок, ссылок и изображений, чтобы улучшить визуальную идентичность вашего бренда и повысить узнаваемость бренда с самого начала.
  - Проверить читабельность и доступность. Выбранная вами цветовая палитра может оказать большое влияние на глаз пользователя — в лучшую или в худшую сторону. Вы можете проверить свои цветовые палитры на соответствие правилам WCAG, чтобы убедиться, что в вашем дизайне используется наилучший цветовой контраст для удобочитаемости.
  - Найдите вдохновение. В видеоиграх часто используется цвет. Например, вы можете изучить использование ими знаков, которые дизайнеры используют, чтобы указать, для чего можно использовать элемент или объект.
  Домашняя страница Stripe не только красочная — цвета постоянно меняются! Кроме того, попробуйте ввести код Konami и посмотрите, что произойдет 👀
  Текст
  Важно предлагать своим посетителям необходимую им информацию, но основной текст должен быть привлекательным и простым для понимания, если вы хотите, чтобы они прочитали все до конца. . Вот некоторые ключевые рекомендации по дизайну веб-сайтов при использовании текста.
  - Пустое пространство. Используйте короткие абзацы и разбивайте разделы заголовками, изображениями и другими визуальными элементами. Воспринимайте эти перерывы в тексте как возможность перевести дух между идеями.
  - Остерегайтесь лохмотьев и вдов. Это не люди и не потертая одежда, а текст, который плохо отображается. Тряпки возникают, когда выравнивание текста отключено, и он начинает формировать странные формы. Вдовы — это оставшиеся слова, которые висят в конце ваших абзацев. Это может показаться мелочью, но они действительно могут улучшить дизайн вашего сайта.
  - Динамичный дуэт Respect: дизайн и контент. Присяжные всегда спорят о том, должен ли контент влиять на дизайн или наоборот. Что бы вы ни выбрали, убедитесь, что ни один из них не конкурирует с другим. Текст должен быть лаконичным, но информативным, а дизайн привлекательным, но простым.
  - Установить параметры. Хотя вы, возможно, уже помните об отступах и полях, убедитесь, что горизонтальные строки текста никогда не превышают 70 символов. Его легко пропустить.
  - Не забывайте об иерархии. Текстовая иерархия может создать или разрушить дизайн. Убедитесь, что вы поняли это правильно с самого начала. Не знаете, с чего начать? Для справки ознакомьтесь с рекомендациями Apple и Material Design от Google.
  - SEO. Подумайте о SEO-оптимизированной структуре текста и страницы. Это означает добавление ключевых слов в заголовки и основной текст, а также продумывание альтернативного текста для изображений, когда вы делитесь ими со своей командой разработчиков.
  В этом примере вы можете увидеть, как веб-дизайнеры Mailchimp позаботились о том, чтобы h2 «Автоматизируйте свой маркетинг» не был одной сверхдлинной строкой, а основной абзац ниже был компактным. Ни тряпья, ни вдов.
  Призывы к действию
  Самый важный элемент веб-дизайна, призыв к действию (CTA) — это ссылка или кнопка, которая побуждает посетителей вашего сайта что-то сделать. Это должно быть понятно, легко найти и соответствовать вашим целям для целевой страницы или веб-сайта.
  - Учитывать все уровни CTA. У вас может быть более одного CTA в зависимости от целей страницы, но важно разделить их на основные, второстепенные и третичные — и сделать это очевидным в вашем дизайне. Убедитесь, что вы уделяете своей основной цели больше всего места и внимания.
  - Короче. Эффективный текст CTA должен быть кратким, понятным и информативным для пользователя. Общие примеры включают «Узнать больше», «Купить сейчас» и «Подписаться бесплатно».
  - Ключевое значение имеет размещение. Ранее мы упоминали о сгибе. Хотя именно здесь должен находиться ваш основной CTA, вы можете добавить вторичные и третичные CTA ниже сгиба (нижняя половина вашей страницы). Определение того, куда вы хотите, чтобы ваши призывы к действию, также может помочь вам разобраться, как лучше организовать текст в целом.
  Дизайн веб-сайта Blush использует цвета, чтобы различать их CTA. В то же время он использует верхнюю панель навигации, чтобы создать дополнительное место в верхней части страницы для дополнительных CTA.
  Дизайн-системы
  Если в жизни и в дизайне веб-сайтов есть одна постоянная вещь, так это изменения. Системы дизайна могут быть отличным преимуществом, если вы создаете веб-сайт, рассчитанный на длительное время. С их помощью вы можете создать набор правил, которые могут использовать все, кто занимается дизайном для вашего бренда, чтобы убедиться, что они используют правильные цвета, изображения, макеты и многое другое.
  - Создавать для будущего. Вам всегда нужно будет вносить изменения, поэтому убедитесь, что у вас есть система дизайна — и ее аналог для разработчиков — чтобы вы могли сразу же взяться за дело.
  - Создавайте повторно используемые стили и активы. Вы можете создавать текстовые стили, правила интервалов, цветовые маркеры и повторно используемые элементы, такие как символы в Sketch, чтобы сделать ваш дизайн согласованным и более легким для настройки или обновления позже.
  В этом примере вы можете увидеть, как Monday Studio может отслеживать все элементы дизайна своего веб-сайта, размещая свою библиотеку системы дизайна в Sketch.
  Оптимизация
  Ни один дизайн веб-сайта не будет полным без надлежащей оптимизации. Король среди лучших практик: убедиться, что ваш сайт удобен для Google, жизненно важно для успеха в Интернете.
  - Будьте мобильными. Люди, скорее всего, найдут ваш сайт через мобильные устройства, даже если они будут работать с ним позже, со своих компьютеров. Поэтому лучше сохранить дизайн вашего веб-сайта в первозданном виде, чтобы мы никогда не испортили первое впечатление.
  - Не забывайте изображения. Работа над дизайном не заканчивается, когда веб-сайт готов! Работайте в тесном контакте со своим разработчиком, чтобы убедиться, что ваши изображения оптимизированы, чтобы они выглядели четкими, не замедляя работу вашего сайта. Для проверки можно использовать такие инструменты, как ImageOptim.
  - Построить прототип. Это поможет вам и всем остальным получить истинное представление о дизайне. Если вы работаете с клиентом, это также может принести вам бонусные баллы. И последнее, но не менее важное: прототипы также отлично подходят для пользовательского тестирования.
  С помощью прототипа вы можете протестировать функциональность дизайна вашего веб-сайта и получить отзывы от потенциальных пользователей.
  Веселиться
  Что? Да! Веселье – это самая важная часть. Если вам не нравится процесс разработки веб-сайта, следовать всем этим передовым методам будет непросто. Есть много движущихся частей, но вы должны принять это и наслаждаться наблюдением за тем, как ваше видение собирается воедино по частям.
  Быстрый способ убедиться, что вы весело проводите время? Посвятите некоторое время разработке мелких деталей. У нас есть несколько на вашем веб-сайте и веб-приложении — вы знаете, что это такое? 👀 (Если вам нужна подсказка, она есть на нашей странице загрузок.