Дизайн сайта как придумать: Как придумать дизайн сайта? | maximsoldatkin.com

Дизайн 

Содержание

Где веб-дизайнеры подсматривают идеи — Офтоп на vc.ru

Результаты опроса, проведенного руководителем студии «Сибирикс»

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

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

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

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

Мы потрясли дизайнеров «Сибирикса» и выяснили, где они ищут идеи и вообще вдохновляются (легально).

Нашли и затёртые до дыр ссылки (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 777 просмотров

Идеи для дизайна сайта — как их найти и откуда черпать вдохновение?

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

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

Эффективное использование мозгового штурма

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

Для этого организуйте работу с учетом следующих советов.

Определите время, когда ваши творческие способности находятся на самом пике их проявлений

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


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

Не критикуйте свои идеи

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

Составьте расписание

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

Не стоит сильно усердствовать

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

Сохраняйте весь материал

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

Вдохновитесь мыслью

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

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

Обсуждайте свои идеи с другими

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

Сохранение идей и поиск вдохновения

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

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

Существуют несколько правил, которых необходимо придерживаться, работая над скетчами:

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

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

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

Что используют для зарисовок идей

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

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

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

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

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

Поиск вдохновения

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

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

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

Творческий порыв

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

Dribbble.com

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

Gridspiration.com

В этом проекте вы найдете все популярные метки с сайта Dribbble.com

Designspiration.com

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

Галереи CSS

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

Использование офлайн ресурсов

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

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


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


Вторым примером могут стать книги и журналы. Довольно часто они являются примером живописной типографии и оформления страниц.

10 Креативных идей дизайна веб-сайтов, которые вас вдохновят (2022)

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

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

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

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

Содержание

  • 10 действенных идей веб-дизайна