Где веб-дизайнеры подсматривают идеи — Офтоп на vc.ru
Результаты опроса, проведенного руководителем студии «Сибирикс»
Руководитель студии «Сибирикс» Владимир Завертайлов опросил своих коллег и собрал ряд ресурсов, на которых дизайнеры могут найти идеи и вдохновение для создания собственных продуктов.
Каждый художник (и веб-дизайнер в том числе) немного вор: в одном месте утянул идею, в другом — сюжет, переварил своим креативным котелком и получил шедевр.
Если вы внаглую обводите сайты дня с Awwwards, вдохновляясь цитатой «Хорошие художники копируют, великие — воруют» — будьте осторожны, не порежьтесь об осколки разбитых иллюзий. Потому что никто так не говорил, ребят. Это такое же сомнительное порождение интернетов, как цитаты Стетхема.
В оригинале говорилось, что воруют бездари, а креативные ребята только копируют и улучшают. Поэтому хватит лентяйничать, пора делать оригинальные макеты.
Мы потрясли дизайнеров «Сибирикса» и выяснили, где они ищут идеи и вообще вдохновляются (легально).
- Собрать идеи для сайта.
- Найти конкретный элемент.
- Нахвататься визуального вдохновения.
- Посмотреть всё в одном месте.
- Подтянуть матчасть.
Получился неплохой такой склад вдохновения. Хватит и мудборд собрать, и фишку проекта придумать, и даже найти пару кусочков кода, чтобы облегчить жизнь верстальщику.
Собрать идеи для сайта
На данных ресурсах можно посмотреть, как вообще выглядят добротные сайты — в случае, если референсы заказчика окончательно затёрли ваши представления о плохом и хорошем дизайне. Изучаем, впитываем, настраиваемся на правильную волну.
- Awwwards. Не баян, а классика. Хотя «Коллекции» на Awwwards — относительно свежая фишка.
- The FWA, CSS Design Awards, Website Design Award. Пачка конкурсов сайтов, на которых работы, бывает, повторяются. Но проскакивают и оригинальные номинанты.
- Designer News. Ресурс, где можно и крутые примеры найти, и мнение коллег со всего мира почитать. Обычно все дизайны, которые выкладываются на Awwwards, сперва появляются здесь.
- Site Inspire. Симпатичные сайты, которые редко пересекаются с Awwwards и Ко. Не всегда конкурсные, но всё равно оригинальные и интересные.
- Cargo Сollective. Подборка минималистичных сайтов с какой-то потаённой изюминкой.
- The Best Designs. Тут сайты попроще — бегунок креатива выкручен не больше, чем на 20%.
- The Perfect Grid. Подборка сайтов с нестандартной сеткой — тренд 2017 года, между прочим.
- Sibirix’s Pinterest. Когда наши дизайнеры не рисуют годноту, они добавляют сайты, которые им понравились, вот сюда.
- Minimal gallery. Галерея радикального минимализма. Шикарно вставляет. Чего стоит хотя бы этот экспонат, где на главной странице только текст и курсор в виде банана.
- Hover States. Подборка необычных сайтов с удобным фильтром по тегам.
- Siiimple. Здесь порционно раз в день добавляется по одному хорошему минималистичному сайту.
- One Page Love. Собрание одностраничных сайтов. Веселых, а порой и не очень приличных. Слабонервные и неженки, ходите аккуратно.
Здесь порционно раз в день добавляется по одному хорошему минималистичному сайту.Найти конкретный элемент
Ресурсы на случай, когда общая концепция утряслась, и осталось придумать цепляющие мелочи: шрифты, иконки, взаимодействия.
- Dribbble. По праву затёртый до дыр ресурс — здесь гигабайты идей для иконок и микровзаимодействий. Самое сложное — найти среди них что-то полезное.
- Motion UI. Субъективная выжимка из Dribbble — для тех, кто не хочет ворошить его завалы самостоятельно.
- Codepen Codrops. Ресурсы, где хранятся уже готовые рабочие элементы: хоть сейчас вставляй на сайт. Находите что-то крутое, обыгрываете в своём дизайне и несёте нужный кусок кода верстальщику — профит.
- Web Design Freebies. Подборка иконок, шрифтов, иногда проскакивают мокапы — золотая жила для мудборда. Больше не обновляется, так что пользуйтесь, пока не протухло.
- Color Supplyyy App. Простое и приятное приложение для подбора цветовой гаммы.
- Fonts Google. Шрифты, которые Google одобряет.
- Uimovement. Коллекция няшных микровзаимодействий.
Нахвататься визуального вдохновения
Просто подборки картинок, которые помогают нашим дизайнерам поймать вдохновение.
- Design Collector. Фото, видео, картинки и прочая мишура, которая помогает нащупать вектор, в котором нужно творить.
- Ffffound. Чуть более хипстерский склад изображений: больше глитча и кислотных гифок.
- Designspiration. Сборная солянка из дизайнерских работ и фотографий из Instagram.
Посмотреть всё в одном месте
Если вам нужно посмотреть сразу и макеты, и иконки, и шрифты, но вы слишком цените свой work in progress, чтобы переключаться между сайтами, познакомьтесь с ресурсами ниже. Там есть всё, только поисковый запрос уточните.
- Behance Pinterest. Самые большие склады графического добра в интернете: русском и зарубежном.
- Revision. Ресурс с работами отечественных студий и дизайнеров.
- LookWork. Сайт идентифицирует себя как «Visual RSS». И не врёт. Можно отслеживать интересующие темы, выбирая их в меню, или зарегистрироваться и сформировать персональную ленту.
- Muzli. Агрегатор сайтов дизайнерской тематики. Активно пиарится за рубежом. Существует в формате расширения для Chrome и подсовывает подборку для вдохновения каждый раз, когда открываешь новую вкладку. Кого-то вдохновляет. Но, на мой взгляд, дико отвлекает от работы.
Подтянуть матчасть
На случай, если работа застопорилась не из-за отсутствия идей, а из-за недостатка навыка, можно погулять по этим сайтам.
- Интерфейсы без шелухи. Толковая рассылка о том, как сделать пользователю удобно. На сайте можно порыться в архивах.
- SkillBox Дизайн. SkillBox — курсы за деньги для тех, кто хочет пробиться в digital. Но также ребята проводят бесплатные вебинары — канал с ними рекомендуем просматривать или хотя бы включать фоном, пока течёт ваш любимый кетчуп.
Конечно, это не все ресурсы в интернете, где можно нахвататься идей для веб-дизайна. Знаете ещё — делитесь в комментариях. Let’s catch them all!
50 697 просмотров
Идеи для дизайна сайта — как их найти и откуда черпать вдохновение?
Когда вы закончили работу над вводной частью создания сайта, сформировали его цели, определили правильное направление движения в разработке проекта, начинается один из самых интересных этапов работы — мозговой штурм.
Это работа креативного мышления, рассмотрение и обсуждение идей. Этот процесс должен занимать у вас большую часть времени, нежели другие, и неважно, работаете вы над проектом в одиночку или с командой. Переключив ваш мозг в режим творчества, вы с легкостью сможете сосредоточиться на определенной теме и при помощи своей фантазии придумать что-то необычное. Но, это сделать будет не очень просто, так что запаситесь терпением.
Эффективное использование мозгового штурма
Давайте попробуем понять, как этот процесс можно сделать более упрощенным и получить от него максимум эффекта.
Определите время, когда ваши творческие способности находятся на самом пике их проявлений
Наш мозг любит шаблоны. Все люди не похожи друг на друга и имеют разные привычки, но шаблоны присутствуют в жизни каждого человека. Так устроила нас природа, что человеческий мозг знает, когда ему следует просыпаться, когда ложиться отдыхать, и когда мы полностью готовы к выполнению какой-либо работы. Поэтому, не ожидайте от своего мозга каких-то креативных идей в момент, когда он говорит, что необходимо ложиться спать.
Попытайтесь в течение своего дня найти то время, когда вас посещают самые креативные идеи. Это может происходить как ранним утром, так и ближе к вечеру. Возможно, вы приступайте к своей работе, начиная с того, что читаете почту или новости — попробуйте понять свои привычки. Постарайтесь проводить штурм именно тогда, когда вы только начинаете свою работу. Это может дать вам неплохое преимущество.
Не критикуйте свои идеи
Это главный принцип. На этом этапе плохих идей не бывает. Вам необходимо постараться придумать как можно больше различных идей, но постарайтесь их не осуждать. Иногда случается так, что некоторые мысли на первый взгляд выглядят безумными, но в большинстве случаев именно они и приведут вас к другим потрясающим замыслам, от которых вы будете в восторге. Если в мозговой атаке принимает участие не один человек, а несколько, то правило «не критикуйте» даст возможность всем показать свои креативные идеи.
Составьте расписание
Вам необходимо составить расписание, по которому вы будете проводить мозговые штурмы и устраивать перерывы между ними. Благодаря ему вы сможете не сбиться с правильного пути и не потерять ход своих мыслей. Также, постарайтесь не уходить далеко в своих размышлениях от главных целей проекта. Дайте себе возможность отдыхать. Желательно это делать через каждые 20 минут. Для такого отдыха будет достаточно просто пройтись по офису, выпить чашку чая и, возможно, именно в этот момент к вам придет замечательная идея.
Не стоит сильно усердствовать
Не каждый мозговой штурм будет венчаться успехом. Поэтому не стоит сразу расстраиваться. Возможно, вы просто переусердствовали в раздумьях над своей идеей. Попробуйте немного отвлечься от этого процесса. Хорошим способом будет прогулка на свежем воздухе или общение с друзьями на какие-либо другие интересные темы. Не спешите возвращаться к мозговому штурму довольно быстро. Возможно, есть смысл сделать это даже на следующий день.
Сохраняйте весь материал
Старайтесь во время мозговой атаки все ваши мысли зарисовывать или записывать в блокнот и сохраняйте весь материал, собранный в этом процессе. Существует множество различных приложений и онлайн программ, которые помогут вам в создании ваших заметок. Даже просто ручка и бумага станут хорошим подспорьем для перенесения и хранения ваших идей.
Вдохновитесь мыслью
Вдохновение — это основная часть мозговой атаки. Каждая мысль, возникшая у вас в голове, появляется благодаря тому, что вы где-то что-то увидели или испытали.
Наш мозг пользуется всей этой информацией в тот момент, когда мы пытаемся создать новую идею.
Прилагайте старания для поиска новых мест черпания своих идей. К примеру, таковым может стать другой дизайнерский проект. В этом нет ничего страшного, ведь, оценив чужую работу, вы можете вдохновить себя на рождение еще более прекрасной идеи.
Обсуждайте свои идеи с другими
Расскажите о своих задумках своим коллегам, выслушайте все «за» и «против». Благодаря этому вы сможете понять, чего именно не хватает в вашей задумке или наоборот, от чего лучше отказаться.
Сохранение идей и поиск вдохновения
Сохранить идеи, которые пришли вам в голову, можно довольно простым способом — взять и зарисовать их на обычном листе бумаги. Вы, возможно, этого никогда не делали, и поначалу вам это покажется тяжелым занятием, но чем больше вы это делаете, тем легче вам будет в дальнейшем.
Среди дизайнеров существует достаточно большее количество людей, которые никогда не изображали свои идеи на чем либо.
Конечно, дизайн веб-ресурса можно создавать и без зарисовок, но создавая наброски, вы сможете больше проявить свои креативные качества и быстрей приступить к воплощению своих идей в жизнь. Также можно попробовать создавать прототипы сайтов, перед тем как вы начнете работать в Adobe Photoshop. Это позволит вам сосредоточить свое внимание на предназначении и ядре вашего контента, перед тем как вы приступите к добавлению различных стилей и совершенствованию внешнего вида вашего веб-сайта.
Существуют несколько правил, которых необходимо придерживаться, работая над скетчами:
Не старайтесь делать их идеальными, а рисуйте как можно быстрей, обращая все свое внимание на концепт.
Делайте примечания. Иногда, некоторые скетчи могут выглядеть грубо, поэтому не забывайте делать к ним описание, чтобы не запутаться.
Придерживайтесь организованности. Старайтесь, чтобы все собранные вами наброски не находились в одном месте.
У каждого проекта должно быть свое специально отведенное место, где будут храниться все наброски по каждому проекту отдельно. Заведите себе блокнот и делайте зарисовки в нем.
Что используют для зарисовок идей
Самым интересным в набросках является тот факт, что для их зарисовки абсолютно ничего ненужно. Вам будет достаточно всего лишь простой ручки и листа бумаги. Конечно, если у вас появится желание приобщить свои наброски к процессу создания дизайна, то вам лучше воспользоваться инструментами, имеющими более высокое качество.
Существует море различных вариантов зарисовки своих идей, но давайте рассмотрим несколько более распространенных способов, рекомендуемых опытными дизайнерами. Итак, начните с того, что подберите себе хорошую ручку. Вы можете спросить: «Почему именно ручку?». Все просто, этот вариант удобен тем, что чернило довольно тяжело стереть. Вы должны верить, что в вашем блокноте нет плохих идей, и поэтому ни одна из них не должна быть стерта.
После того, как вы выбрали себе ручку, заведите небольшой блокнот, куда вы будете переносить все свои креативные идеи. Он должен быть небольших размеров, чтоб вам было удобно его носить с собой и в любой момент делать в нем зарисовки. Так же не забывайте ставить дату и заголовок своей идеи. Так в будущем вам будет проще сослаться на них.
Не бойтесь использовать уже готовые шаблоны для своих набросков. Старайтесь обращаться к ним только тогда, когда занимаетесь какими-то большими проектами, которые потребуют от вас серьезных размышлений.
Поиск вдохновения
Вот вы в руках держите блокнот и ручку и вроде бы готовы сделать свои первые наброски, но тут вдруг понимаете, что идеи не хотят приходить в голову. Не расстраивайтесь. Вы должны осознавать, что нельзя что-то создать из ничего.
Неважно, насколько вы творческий человек, потому что ваше творчество, так или иначе, будет основываться на жизненном опыте, приобретенном вами и вещах, окружающих вас.
Конечно же, существует некая граница между вдохновением и копированием. Поэтому поистине настоящий дизайнер должен уметь правильно оценивать свои идеи и принимать решения о возможности их использования в тех или иных ситуациях. Для того, чтобы вы были уверенны в том, что вы не копируете конкретно чью-то работу, вам следует не останавливать свое внимание на одном источнике вдохновения. Пробуйте использовать как можно больше различных ресурсов в качестве примера для себя. Просматривайте уже готовые работы других веб-дизайнеров и делайте наброски того, что больше всего вам понравилось. В будущем перед началом какого-то проекта вы всегда сможете вернуться в свою коллекцию дизайнов.
Главное — помните, что вы делаете это все ради вдохновения и новых идей. Перед началом разработки своего дизайна вам будет необходимо все это отложить в сторону и позволить вашему мозгу самому генерировать идеи.
Воплощайте свои задумки в жизнь именно так, как вы их запомнили. Это даст вам возможность не ограничивать себя в чем-либо, и вы научитесь применять свой личный стиль идей.
Творческий порыв
Для примера, давайте рассмотрим несколько неплохих ресурсов, где дизайнер может вдохновить себя:
Dribbble.com
Dribbble — это большое сообщество дизайнеров, где можно встретить как новичков, так и довольно опытных профессионалов в веб-дизайне. Там они делятся скриншотами своих работ. Небольшим недостатком этого ресурса является маленький размер изображений, поэтому вам не удастся полностью рассмотреть весь проект, но это же и поможет вам сосредоточить свое внимание на таких элементах дизайна как навигационное меню, типография, иллюстрация и т.д.
Gridspiration.com
В этом проекте вы найдете все популярные метки с сайта Dribbble.com
Designspiration.com
Здесь вы как дизайнер сможете получить вдохновение от обзора разных дизайнерских продуктов.
На этом сайте размещено большое количество разнообразных картинок, иконок и скриншотов веб-дизайна.
Галереи CSS
Существует огромное количество разных CSS галерей, которые дадут вам возможность посмотреть на огромное количество сайтов, имеющих просто завораживающие веб-дизайны. Такие сайты называются CSS galleries. Они состоят из списка сайтов, при написании которых программисты использовали только HTML/CSS — и ничего более.
Использование офлайн ресурсов
Не ограничивайте себя в поиске только онлайн ресурсов. Если вы хорошо присмотритесь, то увидите, что каждый день мы сталкиваемся с большим количеством примеров замечательных дизайнов. Просто фотографируйте все, что вам понравилось.
Первым таким примером могут стать постеры к любым фильмам. Некоторые из них оформлены просто изумительным образом. Рассматривая их, обратите свое внимание на то, как были подобраны художниками типография и цвета.
Так же следует обращать свое внимание на вывески и баннеры различных магазинов и кафе.
Даже такие простые знаки могут стать генератором уникальных идей. Старайтесь делать их фотографии и коллекционируйте, возможно, в будущем они вам очень пригодятся.
Вторым примером могут стать книги и журналы. Довольно часто они являются примером живописной типографии и оформления страниц.
Как создать сайт самостоятельно за 7 шагов [Руководство]
У вас проблема: вы не знаете, как создать сайт. Вы не знакомы с такими вещами, как кодирование и HTML, и идея создания нового сайта кажется такой сложной и трудной. К счастью, так быть не должно.
Ниже мы рассмотрим этапы разработки веб-сайта:
- Определите цели вашего сайта
- Выберите CMS (или используйте HTML)
- Планирование макета и фирменного стиля вашего сайта
- Зарегистрируйте доменное имя и найдите веб-хостинг
- Создайте страницы и контент своего веб-сайта
- Оптимизируйте свой сайт для SEO
- Опубликуйте и повторно оптимизируйте свой сайт
Тогда подпишитесь на Revenue Weekly — нашу рассылку по электронной почте — чтобы получать больше советов от агентства с отзывами более 1020 клиентов!
Чтобы регулярно получать советы по цифровому маркетингу, подпишитесь на электронную почту, которой доверяют более 200 000 других маркетологов:
Еженедельный доход.
Зарегистрируйтесь сегодня
Вот семь шагов, которые помогут вам в процессе создания веб-сайта!
1. Определите цели вашего сайта
Первое, что вы должны сделать при разработке веб-сайта, это определить цели вашего сайта. Вы должны знать, чего вы хотите от сайта.
Чтобы определить цели вашего сайта, вы должны начать с ответов на некоторые основные вопросы, такие как:
- Какова будет основная функция (ы) веб-сайта?
- Какую аудиторию вы пытаетесь привлечь с помощью сайта?
- Что вы хотите, чтобы этот сайт принес вашему бизнесу?
После того, как вы найдете несколько простых ответов на эти вопросы, вы получите лучшее представление о том, как оформить свой веб-сайт таким образом, который позволит вам достичь своих целей.
Возможно, вы стремитесь к сайту с большим количеством контента, который призван познакомить пользователей с вами. Или, может быть, вам нужен сайт электронной коммерции, где люди могут покупать у вас. Возможно, вы даже захотите создать более крупный сайт, который выполняет и то, и другое.
2. Выберите CMS (или используйте HTML)
После того, как вы определились с целями своего веб-сайта, пришло время выяснить, как вы будете его создавать. Большинство начинающих создателей сайтов используют систему управления контентом (CMS), тип платформы, которая помогает создавать веб-сайты.
Некоторые из самых популярных платформ CMS включают:
- WordPress
- Викс
- Уибли
- WooCommerce
- И многое другое!
Использование любой из этих платформ позволит вам создать веб-сайт в формате «что видишь, то и получишь» (WYSIWYG) без необходимости кодирования. Это означает, что вы можете визуально оформить свой сайт.
Однако, если у вас уже есть обширные знания HTML, вы можете создать веб-сайт с нуля, а не использовать CMS. Использование HTML сложнее, но дает больше свободы творчества.
Если вам нужен HTML-сайт с нуля, но у вас нет опыта, чтобы сделать это самостоятельно, вы можете нанять агентство веб-дизайна, которое создаст его для вас!
3. Планирование макета и фирменного стиля вашего сайта
Третий этап настройки веб-сайта посвящен планированию. В частности, вам нужно спланировать, как будет организован ваш сайт.
Вы захотите задать себе такие вопросы, как:
- Какие разделы у меня будут на сайте?
- Какие страницы включить в каждый раздел?
- Как будут организованы секции?
Этот шаг имеет решающее значение, поскольку он не только улучшает рабочий процесс, но и определяет структуру навигации вашего сайта. Когда пользователи посещают ваш сайт, они должны легко сориентироваться. Если они не могут, они разочаруются и уйдут. Итак, не пропускайте этот шаг.
После того, как вы спланировали общий макет своего сайта, создайте каркасы для каждой страницы, чтобы определить, как будут располагаться элементы страницы.
Вы также должны использовать это время для планирования своего бренда — как вы хотите, чтобы ваш сайт сообщал о вашем уникальном бренде? Вам нужно выбрать цветовые схемы, шрифт и языковой стиль, чтобы обеспечить единообразный фирменный вид вашего веб-сайта.
4. Зарегистрируйте доменное имя и найдите веб-хост
Последний шаг перед тем, как приступить к разработке реальных страниц, — настроить доменное имя и веб-хостинг. Ваше доменное имя — это в основном адрес вашего сайта — его базовый URL-адрес — в то время как ваш веб-хостинг относится к физическим серверам, на которых хранится ваш сайт.
Вы можете использовать такие веб-сайты, как GoDaddy.com, чтобы найти доступные доменные имена. Обязательно выберите короткое, легко запоминающееся доменное имя, которое четко ассоциируется с вашим брендом. Итак, если ваша компания называется Karl’s Electronics, идеальным доменом будет karlselectronics.com.
После того, как вы нашли и приобрели домен, вы можете настроить веб-хостинг, часто через тот же сайт, на котором вы купили доменное имя. GoDaddy, Bluehost и другие — отличные варианты веб-хостинга.
5. Создайте страницы и контент своего веб-сайта
Когда вы дойдете до этого момента, наконец настало время создать свой веб-сайт. Используя план, который вы изложили на предыдущем шаге, начните настройку своих страниц. Убедитесь, что они организованы так, как они были в вашем первоначальном макете, и включите панель навигации в верхней части сайта, которая позволяет пользователям легко перемещаться.
Потратьте это время и на создание контента для своего сайта. Создавайте любые видео, которые хотите использовать, создавайте свои изображения и пишите весь свой текстовый контент, такой как сообщения в блогах и служебные страницы. Будьте уверены, чтобы держать его информативным и полезным для пользователей.
6. Оптимизируйте свой сайт для SEO
После того, как вы настроите базовый веб-сайт, начните оптимизировать его для поисковой оптимизации (SEO). SEO — это маркетинговая стратегия, которая включает в себя повышение рейтинга вашего сайта в релевантных результатах поиска, чтобы пользователи могли вас найти. Существует несколько тактик SEO-оптимизации, которые вы можете использовать, в том числе:
- Оптимизация скорости страницы: Постарайтесь увеличить скорость страницы как можно быстрее. Для этого кешируйте веб-страницы, сжимайте изображения и минимизируйте код.
- Адаптивный дизайн: Крайне важно иметь сайт, оптимизированный для мобильных устройств, чтобы вы могли удерживать трафик на мобильных устройствах и занимать более высокие позиции в Google. С этой целью используйте адаптивный дизайн, который автоматически изменит структуру ваших страниц, чтобы они соответствовали любому экрану, на котором они отображаются.
- HTTPS: Ваш сайт должен быть безопасным, чтобы пользователи чувствовали себя в безопасности при его посещении. По этой причине обязательно используйте HTTPS для своего сайта. Это поможет пользователям чувствовать себя в большей безопасности, а также повысит ваш рейтинг в Google.
Когда вы будете следовать каждой из вышеперечисленных стратегий, ваш сайт будет привлекать гораздо больше трафика после его запуска.
7. Опубликуйте и повторно оптимизируйте свой сайт
Теперь, когда настройка вашего веб-сайта завершена, вы можете, наконец, перейти к последнему этапу создания веб-сайта: его публикации! Однако, когда ваш сайт заработает, это не значит, что вы закончили. Напротив, первые несколько недель после запуска вашего сайта имеют решающее значение.
Убедитесь, что вы отслеживаете поведение пользователей на своем сайте и смотрите, какие страницы привлекают трафик, а какие нет. Затем возьмите то, что вы узнали, и повторно оптимизируйте свой сайт, чтобы он работал лучше.
Даже по прошествии первых нескольких недель продолжайте искать способы улучшить качество своего веб-сайта, повысить его рейтинг в поисковых системах и привлечь больше трафика, чтобы увеличить число конверсий.
Мы не хотим рассказывать вам о нашей работе, мы хотим
ПОКАЗАТЬ вам.
Посмотреть наше портфолио
Мы создали более
1 100
веб-сайтов
в различных отраслях.
Поздравляем! Вы знаете, как создать веб-сайт. Что теперь?
Теперь, когда вы знаете, как создать веб-сайт, вы готовы приступить к работе. Но вы все еще можете чувствовать себя неуверенно в том, как обращаться с деталями, или, может быть, вам просто нужна помощь эксперта на вашем сайте. Если это так, нет лучшего способа действий, чем партнерство с WebFX.
Обладая более чем 25-летним опытом, мы являемся экспертами в создании веб-сайтов, которые будут приносить результаты. Когда вы сотрудничаете с нами в отношении наших услуг веб-дизайна, мы поможем вам оптимизировать каждый из перечисленных выше шагов и создать сайт, который увеличит ваш трафик.
Чтобы начать работу с нами, просто позвоните по телефону 888-601-5359 или свяжитесь с нами онлайн сегодня!
10 золотых правил для начинающих
Независимо от того, насколько вы опытны в дизайне, совершенно новый веб-сайт будет эквивалентом пустой страницы писателя — вы можете сделать так много, что трудно даже начать. Поэтому, прежде чем вы начнете играть с Lorem Ipsum, прочитайте эти 10 правил дизайна веб-сайта. Даже если вы точно знаете, чего хотите, мы обещаем, что вы найдете что-то полезное в этих рекомендациях. Прокрутите статью до конца, чтобы узнать о нашем испытанном трехэтапном процессе создания веб-сайта — от значков избранного до веб-шрифтов, от карт сайта до шестнадцатеричных цветов — и получить профессиональные советы по дизайну для электронной коммерции, бизнеса / агентства/фирмы, портфолио или блоги.
В совокупности эти рекомендации и советы помогут вам дольше удерживать посетителей на вашей странице и беспрепятственно вести их из пункта А в пункт Б.
Прежде чем приступить к созданию веб-сайта процесса сборки), рассмотрите эти десять правил как полезные рекомендации, которые помогут сделать макет вашего сайта не только более стильным, но и более эффективным.
Правило №1: избегайте беспорядка
Макеты, загроможденные отвлекающими наборами изображений, кнопок и другими элементами, не только делают макеты несбалансированными. Они также не позволяют посетителям перейти к следующему шагу, который вы хотите, чтобы они сделали, будь то переход на вашу страницу контактов или добавление продукта в корзину. Помните, белое пространство — ваш друг.
Правило № 2. Отдавайте предпочтение дизайну над сгибом
«Сгиб» относится к нижней границе браузера*. Любой контент ниже сгиба может быть доступен только с помощью прокрутки, а это означает, что пользователь должен быть вынужден сделать это в первую очередь! Всегда размещайте ключевое содержание и информацию над этой строкой.
*Обратите внимание, что на мобильных сайтах сгиб короче, что дает вам еще меньше места, чтобы убедить посетителя продолжать прокрутку. Заставьте это считаться.
Правило № 3: Помните о законе Хика
Закон Хика гласит, что увеличение количества вариантов увеличивает время, необходимое человеку для принятия решения. Убедитесь, что внимание вашего посетителя не привлечено к чему-либо еще в Интернете, ограничив параметры на каждом этапе взаимодействия с пользователем. Одна кнопка призыва к действию намного эффективнее длинных пунктов меню.
Правило № 4. Поощряйте прокрутку, а не клики
Прокрутка обеспечивает плавное продолжение вашего веб-макета. Сравните это с кликами, которые могут увеличить время загрузки. Прокрутка также более интуитивно понятна на мобильных устройствах.
Прежде всего, прокрутка ленивее, чем нажатие, а это означает, что пользователи дольше остаются на сайте. Недавнее исследование Crazy Egg доказало это, когда оно показало рост коэффициента конверсии 36% при переключении с нажатия на прокрутку.
Правило № 5: Сохраняйте фотографии аутентичными и естественными
Знаете ли вы, что посетители Интернета «отключаются» от искусственных фотографий? Чрезмерно постановочные снимки команд модельного бизнеса могут показаться подходящими для корпоративного сайта, но более аутентичные изображения вас или членов вашей команды привлекут внимание зрителей. Настоящие стоковые изображения — отличная альтернатива. На самом деле, мы уже выбрали лучшие категории стоковых изображений для вашего веб-сайта, так что вы можете легко выбрать вид, который подходит вашему бренду.
Правило № 6. Используйте визуальные подсказки.
Использование изображений или графики для направления пользователей, например фотографий людей, смотрящих на кнопку, или стрелок, указывающих на пункт меню, — проверенный и испытанный метод подведения посетителей к важным действиям. . Очевидный? Может быть. Эффективно? Определенно.
Правило № 7: Сначала шрифт должен быть разборчивым, а затем — стильным
Вы когда-нибудь попадали на модный веб-сайт только для того, чтобы вытянуть шею, пытаясь прочитать неразборчивый курсив с засечками? Есть много красивых веб-шрифтов, но многим из них не место на веб-сайтах.
Разборчивый, четкий текст не отвлекает внимание и обеспечивает удобочитаемость ключевой информации на экранах разных размеров. Чистые, геометрические шрифты без засечек или крупные шрифты — лучшие шрифты для веб-сайтов по сравнению с засечками или курсивом.
Правило № 8: Цвет психологичен
Цвет — это мгновенный способ придать макету вашего веб-сайта особое настроение и индивидуальность. Более того, правильный выбор цвета также может повлиять на то, как пользователи реагируют на ваш сайт. Знаете ли вы, что оранжевый цвет может демонстрировать покупателям хорошую ценность? Или что синий ассоциируется с интеллектом и воображением (идеально подходит для креативных агентств)? Изучите психологию цвета и сделайте выбор цвета, который произведет на ваших посетителей правильное впечатление.
Правило № 9: Сначала создайте дизайн для мобильных устройств
Большинство веб-дизайнеров-новичков представляют, что их веб-сайт просматривают на больших компьютерах, но на самом деле около половины всех сеансов просмотра в мире приходится на мобильные устройства. В некоторых секторах доля мобильных пользователей может быть намного выше.
Многие профессиональные веб-дизайнеры советуют сначала разрабатывать макет веб-сайта с учетом мобильных устройств, но, по крайней мере, уделяя одинаковое внимание обоим аспектам, вы получите эффективный и красивый сайт на различных устройствах.
Макет веб-сайта для нескольких устройств, разработанный для портфолио сайта Wolf&Whale.Правило № 10: дизайн для всех
Всемирная организация здравоохранения (ВОЗ) установила, что по меньшей мере 2,2 миллиарда человек во всем мире имеют нарушения зрения или слепоту, а это означает, что 28,5% населения мира имеют ту или иную форму нарушения зрения. Улучшение цветового контраста в вашем макете, например, сочетание черного текста с белым фоном и выбор крупных шрифтов без засечек — это два простых способа сделать дизайн вашего сайта максимально доступным и инклюзивным.
Имея в виду эти десять полезных советов по созданию красивых макетов веб-сайтов, вы готовы приступить к разработке своего веб-сайта.
Создание веб-сайта может быть увлекательным занятием… но также может быть немного разочаровывающим, если вы не знаете, с чего начать. Откройте для себя наш испытанный процесс разработки веб-сайта с практической точки зрения.
Считайте, что это ваш план построения любого профессионального веб-сайта. Добавьте эту страницу в закладки и вы увидите, как ваш сайт преобразится в мгновение ока.
Шаг 1. Определите индивидуальность вашего сайта
Каждому веб-сайту необходим единый внешний вид и стиль, которые действуют как своего рода фирменный стиль на всех страницах вашего сайта. Это не только придает вашему сайту изысканный и профессиональный вид, но также может помочь посетителям оставаться заинтересованными, когда они перемещаются по сайту. Если страницы выглядят заметно отличающимися друг от друга, это может негативно сказаться на опыте пользователя и сократить время сеанса, поэтому стоит потратить время на уточнение общей идентичности вашего сайта.
Эффективная идентификация сайта включает в себя следующее:
- Значок сайта
- Логотип
- Типографика
- Цветовая схема
Продолжайте читать, чтобы узнать, как включить каждую из них в свой веб-сайт.
Значок — это идентифицирующая графика для вашего веб-сайта, используемая на WordPress.com в виджетах, а также в качестве закладки или значка приложения на главном экране при сохранении в браузере или телефоне. Уменьшенная версия значка, фавикон, появляется рядом с названием веб-сайта на вкладке браузера.
Значки сайтов квадратные, не менее 512 на 512 пикселей, и обычно сохраняются в виде файлов PNG, GIF или ICO . Фавиконы могут быть меньше, но они должны быть не менее 196 на 196 пикселей для спецификаций высокого разрешения, используемых Chrome на устройствах Android.
Важно загрузить значок сайта с правильными размерами и типом файла, чтобы он отображался плавно. Обычно тема, с которой вы работаете, сообщит вам эту информацию, но, как правило, лучше всего загружать значки в формате PNG. Существует множество правил отображения веб-изображений, о которых вы можете узнать больше в этой разбивке по распространенным типам файлов.
Логотип — это более полная версия значка сайта. Например, для значка сайта может использоваться простая визуальная графика, тогда как логотип может включать некоторый текст, например название компании, в дополнение к графике.
Логотипы должны быть соответствующего размера, чтобы эффективно работать на разных устройствах. Главное, о чем следует помнить, это то, что некоторые устройства, такие как Mac и другие продукты Apple, используют технологию Retina Display . Эта технология отображает больше точек на дюйм, чем старые устройства, с разрешением около 300 точек на дюйм, что обеспечивает более четкое и четкое изображение.
Чтобы ваш логотип выглядел так же хорошо на стандартных дисплеях, как и на дисплеях Retina, проще всего удвоить размер логотипов Retina. Так, например, если CMS вашего веб-сайта предлагает вам загрузить логотип размером 100 на 100 пикселей, вам следует загрузить версию размером 200 на 200 пикселей.
Если вы начинаете новый бренд или бизнес, используйте это как возможность оптимизировать свой логотип для адаптивного веб-дизайна. Это будет учитывать все места в Интернете (и в печати), где будет появляться ваш логотип, для каждого из которых требуется свой формат и уровень сложности. Одним из вариантов является создание логотипа гибкого типа, который сочетается с буквенными формами вашего бренда, чтобы создавать варианты логотипа для любого типа носителя.
Пример гибкого логотипа из нашего туториала.Независимо от того, как вы создаете свой логотип, важно знать, как правильно сохранить файл. Логотипы всегда следует сохранять в виде векторов, чтобы вы могли вернуться к ним и внести изменения, например, изменить его размер или настроить цвета. Когда вы будете готовы загрузить логотип на свой веб-сайт, убедитесь, что вы сохранили файл логотипа в формате PNG, чтобы он отображался четко и без пикселизации.
Веб-шрифты и типографика Как и полиграфический дизайн, типографика для веб-сайтов также следует многим из тех же руководящих принципов. Важно установить иерархию типов на вашем веб-сайте, и они будут определены H-метки . «H» означает «Заголовок», где h2 определяет самый важный и самый крупный стиль текста, h3 — следующий по величине и важности, и продолжается вниз по шкале до H6.
Вам нужно будет найти веб-шрифты, которые читаются при любом размере H. В результате большинство веб-дизайнеров предпочитают сверхчеткие шрифты без засечек для небольших заголовков, экспериментируя с засечками, стилями отображения или курсивом только для текста h2 или h3.
Вы можете установить веб-шрифт на свой веб-сайт, что означает, что посетители будут загружать шрифт при входе на сайт, что позволит вам точно указать стиль типографики на вашем сайте. Google Fonts предоставляет огромный выбор бесплатных веб-шрифтов с открытым исходным кодом, но вы также можете найти больше бесплатных и платных веб-шрифтов в ряде магазинов шрифтов. Прокрутите нашу подборку из 101 лучшего бесплатного шрифта в Интернете, чтобы найти тот, который вам нравится.
Возможно, на веб-сайтах важнее сосредоточиться на том, чтобы сделать текст более разборчивым, чем в печатных СМИ. Это связано с тем, что мобильные устройства могут быть небольшими, а излучение света от экранов затрудняет читаемость для слабовидящих читателей. Вы также можете улучшить разборчивость, увеличив размер шрифтов, используя более четкие шрифты (например, без засечек) и увеличив цветовой контраст между цветом шрифта и фоном.
Образец сочетания шрифтов из нашей подборки лучших шрифтов для веб-сайтов.Мы учли факторы веб-отображения при выборе лучших шрифтов и комбинаций шрифтов для дизайна вашего веб-сайта, поэтому вы можете легко выбрать шрифт заголовка и основного текста для использования в вашей личности.
ЦветЦветом иногда пренебрегают до конца процесса сборки, но это мощный инструмент не только для унификации страниц вашего сайта, но и для его способности влиять на настроение и восприятие пользователей.
Для веб-сайтов цвета определяются как HEX-коды . HEX-коды представляют собой закодированную версию цвета RGB в формате #RRGGBB (#RedRedGreenGreenBlueBlue). (Если вам действительно интересно, узнайте, как работают цвета HEX.) Не знаете, как преобразовать образцы CMYK или RGB в HEX? Цветовые коды HTML позволяют легко находить и преобразовывать цветовые коды с помощью онлайн-инструментов выбора цвета и цветовой диаграммы.
У вас может быть существующая цветовая палитра бренда, но если нет, вы можете использовать теорию цветовой психологии, чтобы помочь в выборе цвета. Различные цвета оказывают сильное психологическое воздействие на зрителей, что делает выбор цветовой палитры потенциально важным способом удержания пользователей на странице дольше.
Этот макет сайта использует захватывающий выбор цвета, чтобы привлечь внимание пользователя. Изображение предоставлено автором popovartem.com.Узнайте, как различные цвета могут повлиять на восприятие посетителями вашего веб-сайта и реакцию на него:
- Неоновые
- Оранжевые
- Синие
- Зеленые
- Белые
Имейте в виду, что цвета вашего бренда логотипы — не обязательно должны быть единственными цветами на вашем сайте. На самом деле, если ваш логотип ярко-оранжевый и желтый, вы можете использовать эти цвета только в качестве акцентов; ярко-желтый фон будет напрягать глаза зрителей и затруднять чтение любого текста. Как и типографика, выбор цвета влияет на удобочитаемость вашего сайта и оказывает огромное влияние на взаимодействие с пользователем.
Чтобы увидеть несколько цветовых палитр, которые подходят для Интернета, ознакомьтесь с нашими подобранными цветовыми схемами для веб-сайтов. Они не только учитывают факторы UX, но и предлагают уникальные комбинации, которые помогут выделить ваш сайт.
Шаг 2. Создайте домашнюю страницу своего сайта
Нет места лучше дома. Это, безусловно, верно как для веб-сайтов, так и в жизни.
Домашняя страница или целевая страница — это фокус вашего веб-сайта. Обычно это первая точка контакта для посетителей, прибывающих из поисковых систем, страница в центре карты сайта и страница, на которую посетители часто возвращаются после просмотра других страниц. Домашняя страница должна установить стилистический тон для остальной части веб-сайта, а также направлять пользователей на другие страницы с помощью призывов к действию (например, кнопок), визуальных подсказок (например, стрелок) или пунктов меню.
Хорошее эмпирическое правило для домашней страницы — соблюдать закон Хика (см. золотое правило № 3 выше) , гарантируя, что пользователям предоставляется только ограниченное количество вариантов действий.
Например, вы можете побудить читателей прокрутить страницу вниз, для чего стрелка или призыв к действию над сгибом могут служить подсказкой. Хотите стимулировать переход на другую страницу? Выдающиеся кнопки или пункты меню должны быть в центре макета. Для сайтов, ориентированных на поиск, панель поиска должна быть четкой, заметной и идеально располагаться по центру страницы.
Этот дизайн сайта использует яркую кнопку и стрелку, чтобы направлять пользователя. Изображение автора everst. Главное изображение — это изображение, которое доминирует на целевой странице. Однако вы можете заменить его заметной типографикой, анимацией или видео, если хотите. Функция этого изображения состоит в том, чтобы дать пользователю мгновенное представление о вашем сайте, а также способствовать более захватывающему пользовательскому опыту. Он может использовать определенную цветовую схему или стиль, чтобы усилить визуальную индивидуальность вашего сайта.
Главный образ также можно использовать в качестве визуальной подсказки. Отдельная область цвета или узора может привлечь внимание к кнопке или, что более очевидно, портрет может смотреть или указывать на определенный элемент макета, чтобы направить пользователя.
Этот дизайн сайта использует визуальную подсказку, чтобы привлечь внимание пользователя к заголовку и кнопке. Изображение предоставлено автором wacomka.- Откройте для себя лучшие готовые изображения для веб-сайтов, чтобы заявить о себе в Интернете.
Шаг 3. Создание шаблонов для других страниц
Итак, вы создали макет своей домашней страницы и разработали основные направления, по которым пользователи должны двигаться с главной страницы. Теперь у вас уже должна быть установлена часть карты сайта. Все веб-сайты разные и служат разным целям, но, как правило, есть несколько основных страниц, которые нужны всем сайтам. К ним относятся:
- Страница «О нас»
- Страница контактов
- Страницы категорий (страницы, которые передаются сообщениям из определенной категории, например «Мужская одежда» на сайте электронной торговли одеждой)
- Страницы услуг (для корпоративных сайтов)
- Project Pages (для блогов и портфелей)
- Страницы продукта (для сайтов Ecommerce)
- News Page или Post Blog Pox 9009 News или Post Blog Post.
- 6 советов по созданию каркасов веб-сайтов.
на вашем сайте есть функция поиска, также будет страница результатов поиска.Разработайте каждую из этих страниц с учетом различных элементов. Страница категории содержит множество предварительных просмотров сообщений, поэтому, вероятно, вы захотите создать макет на основе сетки в стиле Pinterest с большим количеством столбцов и строк. На странице контактов может потребоваться карта, а также телефон и адрес. На странице «О компании» могут быть изображения профилей членов команды, а также вводный текст.
Веб-дизайнеры используют каркасы для разработки того, как элементы должны располагаться на разных страницах сайта. Вайрфреймы — это визуальные направляющие, представляющие каркас веб-страницы. Вы можете использовать программное обеспечение для создания каркасов, например Adobe XD или Moqups, использовать векторное программное обеспечение, такое как Adobe Illustrator, или просто рисовать каркасы вручную. Как бы вы их ни создавали, они будут функционировать как основные чертежи макетов вашего веб-сайта. Также может быть полезно отметить размеры элементов, таких как изображения и столбцы на ваших чертежах, чтобы ссылаться на них при создании сайта.
При построении вайрфреймов важно учитывать как установленную вами идентичность сайта (на первом этапе процесса сборки), так и макет домашней страницы (второй шаг). Оба они помогут принять решение о том, как вы будете верстать и стилизовать другие страницы. Сохраняйте некоторые функции одинаковыми на всех страницах, например типографику, стиль изображения и цветовую схему. Это гарантирует, что ваш окончательный дизайн веб-сайта будет иметь единый и последовательный вид.
Чтобы получить рекомендации по изображениям, посмотрите на главное изображение, которое вы выбрали для своей домашней страницы. Есть ли у этого особенности, которые можно было бы имитировать на других изображениях, такие как черно-белая цветовая схема или стиль портрета?
После того, как вы выбрали и отредактировали изображения, вам также потребуется изменить их размер для использования в Интернете.