10 сайтов с необычным дизайном

Выращивание индоуток

Графические редакторы

• DAZ 3D — 3D моделирование. Регистрируетесь и скачиваете дескопное приложение.
• Gimp – бесплатный аналог фотошопа. Позволяет настроить модульную сетку, создать направляющие, работать со слоями, добавлять эффекты и пр. Является неплохой бесплатной заменой фотошопу. Является расширяемым — можно скачать дополнительные плагины.
• Blender — 3D моделирование, анимация, рендеринг, звук, видео. Позволяет создавать игры. Быстро развивающийся редактор, очень популярен.
• Aviary – онлайн сервис редактирования фотографий. Много возможностей, в том числе «Эффект красных глаз», изменение размера и пр.
• Pixlr – онлайн редактор фотографий и редактор графики отдельно. Последний похож на фотошоп. Сохраняет на диск.
• BeFunky – онлайн сервис редактирования фотографий. Эффекты, рамки, графика, ретушь и многое другое. Есть русскоязычный интерфейс.
• Inkscape – полноценный редактор векторной графики с открытым исходным кодом. Поддерживает возможности формата SVG — работу с фигурами, контурами, текстом, векторизацией растровой графики и др. Кроме обработки векторных изображений, позволяет создать шаблон сайта и нарезать его – модульная сетка присутствует. Дает возможность рисовать фоны, баннеры, векторные логотипы и др.
• IconEdit2 – очень простая программа для рисования иконок. Имеет фильтры. Позволяет экспортировать изображение для Android и Apple. Можно настраивать глубину цвета, поворачивать и корректировать иконку. Поддерживает полупрозрачность, несколько изображений в один файл ICO и сглаживание во всех инструментах рисования.
• Falco GIF Animator — программа для создания покадровой анимации и анимированных иконок. На ресурсе можно скачать много разных программ.
• Krita – профессиональный десктопный редактор с открытым исходным кодом. Доступен для разных ОС.
• Boxy-SVG — редактор векторной графики, подобный Adobe Illustrator, Sketch и Inkscape.
• Photopos — многофункциональная программа, с функциями редактора фотографий, графического редактора и приложения для создания компьютерной графики.
• 5Dfly — бесплатное приложение пакетной обработки фотографий. Умеет создавать слайд-шоу под PowerPoint. Отдельно можно скачать конвертер в PDF.
• PaintStar — бесплатный редактор изображений. Интерфейс очень похож на Paint, но возможностей больше. Слои, например.
• PhotoScape – простой редактор фотографий. Имеет функции настройки яркости и цвета, баланс белого, коррекция подсветки, рамки, воздушные шары, мозаичный режим, добавление текста, рисование изображений, обрезка, фильтры, удаление эффекта красных глаз, расцветка, кисть, клон-марка, кисть эффекта и пр.
• Pablo — онлайн редактор, создающий изображения для социальных сетей. Можно загрузить изображение, посмотреть его для разных устройств, наложить эффект и и текст.
• Internet Marketing Ninjas – онлайн сервис для быстрой обрезки изображений. Очень удобно, если надо сделать быстро.
• Meme Generator — генератор мемов. Можно выбрать картинку, создать подпись или сгенерировать ее автоматически. Не скачивается, только публикуется в соцсетях.

Требования к структуре сайта от Яндекса и Гугла

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

Подробнее

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

Рекомендации от Яндекса

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

• Необходимо иметь четкую ссылочную структуру. Каждая страница или документ должны относиться к своему разделу. На каждую страницу должна вести хотя бы одна ссылка с другой страницы.
• Для ускорения индексации сайта нужна его xml-карта.
• С помощью файла robots.txt необходимо ограничивать индексирование служебной информации.
• У каждой страницы должен быть уникальный URL-адрес. Разные страницы должны размещаться под разными адресами, а одна и та же страница должна иметь только один URL.
• Ссылки на другие разделы необходимо делать текстовыми, так Яндексу проще анализировать информацию.
• Нужно проверять корректность symlink-ов: когда пользователь переходит со страницы на страницу, адреса URL не должны суммироваться (пример от Яндекса, как быть не должно: example.com/name/name/name/name/).

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

Рекомендации от Google

Этот поисковик лаконичен. В отличие от Яндекса его требования к верстке просты, понятны и занимают всего несколько строк:

• простая структура;
• понятная логика URL-адреса;
• слова, а не идентификаторы;
• присутствие знаков пунктуации в URL (особенно рекомендуется дефис «-»);
• короткие и простые URL.

Геометрические фигуры

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

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

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

• Мягкие фигуры легко помогут создать модный футуристический стиль
• Острые линии геометрических фигур придаю брутализм дизайну

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

Блоги

Этот блог выглядит насыщенно, но брендинг помогает пользователям легко на нем ориентироваться. Для новых посетителей есть раздел «Best Of» (лучшее), который познакомит их с содержанием и лучшими записями. Цветовая схема теплая, нейтральная, дизайн совершенно не отвлекает от контента.

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

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

Лучшие практики для блога

Сделайте свой блог максимально простым и лаконичным, чтобы не отвлекать внимание посетителей от постов.
Часто публикуйте новые записи. Блоги компаний, которые добавляют более 16 постов в месяц, привлекают в 3,5 раза больше трафика, чем те, в которых новый материал публикуется реже 4 раз в месяц.
Экспериментируйте с разными стилями, включайте списки, интервью, графику и т. д.
Добавляйте визуальный контент, чтобы сделать чтение более удобным и интересным, а также добавить контекст.

Резюме

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

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

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

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

Раздел «Моя система» напоминает описание миссии компании, этот персональный элемент делает сайт более запоминающимся.

Резюм Деролеза современное и информативное. Оно просто и понятно демонстрирует его индивидуальность и навыки в брендинге и разработке

Заметьте, как использование цвета и насыщенности на фото привлекает внимание к его лицу и имени

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

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

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

(Действие нельзя выполнить. Брендон всегда включен.)

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

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

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

Резюме Хэлпина короткое, привлекательное и полностью отражает его уникальный голос и персональный брендинг

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

Лучшие практики для сайтов-резюме:

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

PCS – сайт маркетингового агентства

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

Материалы отформатированы аккуратно, текст грамотный, хоть и пестрит местами превосходными степенями и общими определениями – самый, лучший, стабильный рост и т. д. Ну любят они так, что поделать, работает там такого плана маркетинг. Навигация элементарная, на странице продуктов вставлены pdf-листы с google-диска, почти на всех страницах используется мини-галерея из трёх миниатюр, которые невозможно увеличить. Вообще, используя Google Sites разработчики нередко рисуют блок нужной структуры в графическом редакторе, а потом вставляют его виде изображения. Этот подход хорошо иллюстрирует страница географии деятельности компании. Сайт очень недурно сделан по меркам движка.

Разделенный экран

Мода на разделение веб-страниц пополам появилась в результате эволюции Hero-изображений.

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

Сайты эффектно использующие вертикальное разделение экрана:

enginethemes.com – разделенный пополам объект (элемент фирменного стиля) в центре главного сплит-экрана представляет компанию WP-разработчиков (код внутри / дизайн визуально)

bigeyeagency.com – нестандартная навигация с разделением экрана для кейсов, фоновое видео с текстурой и фотоэффекты в бэкграундах (высветление, размытие, боке, двойная экспозиция)

special.bose.eu – логическое разделение контента на главной, ярко представляет продукцию Bose и упрощает навигацию по сайту

chekhov.withgoogle.com – разделенным контентом представлен опрос «Узнай себя в произведениях Чехова»

Абстрактные иллюстрации

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

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

Банк «Точка» активно использует такие иллюстрации в своем Instagram.

Примеры удачного оформления главной страницы сайта

1. Пример удачного оформления отзывов

Слагаемые успеха:

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

2. Эко Хлеб

• Фотографии продуктов и отрисовка элементов выполнены с высоким качеством.
• Цветовая гамма, логотип и детали оформления соответствуют ретро-стилю.

3. CloudPassage: видео на главной странице

Секреты удачной главной страницы:

• Лаконичный дизайн без ненужных элементов. Текст, в котором заключена суть деятельности CloudPassage. Интересная дизайнерская находка для размещения видеоролика.
• Единственный призыв к действию и работа на опережение: потенциальные сомнения пользователей развеиваются фразами «Без кредитных карт», «Без обязательств».

4. Персона

Слагаемые успеха:

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

5. Carbonmade

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

6. Крошка Картошка

Известный бренд фастфуда на своем промо-сайте использовал сразу несколько интересных находок:

• Общий позитивный настрой благодаря логотипу, цветовому решению и графике.
• HotSpot тултип-подсказки расширяют кругозор пользователя интересными сведениями и картошке.
• Доступен для прослушивания гимн компании (аудиомаркетинг).

7. Evernote.com: пример страниц описания сайта

Слагаемые успеха:

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

CTA «Попробуй Evernote бесплатно» расположена удачно – на стыке полей разного цвета, поэтому привлекает внимание деликатно, но настойчиво

8. Бургер Кинг: шрифт как главный герой

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

9. Unlocking

Мы считаем эту главной страницу достойной подражания, потому что:

• У пользователя не вызывает сомнений назначение этого сайта. Блокировка телефона – проблема, знакомая многим, и на странице есть краткая инструкция по ее решению.
• Удачное цветовое решение, основанное на контрасте. Социальные доказательства убеждают в эффективности ресурса: «Доверие миллионов: разблокировано более 4 млн. телефонов».
• Вместо элемента CTA пользователю сразу предлагается заполнить краткую лид-форму: не надо переходить на следующую страницу и ждать ее загрузки.

Подробнее

10. Apidura – бренд велотоваров из Великобритании

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

11. eWedding

К главной странице этого сайта стоит присмотреться, потому что:

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

12. Moosend. Пример успешного редизайна главной страницы

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

13. Tribute Media — маркетинговое агентство из США

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

Веб-дизайн

Отличный сайт о веб-дизайне и веб разработках (CSS & Ajax).

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

vitamin — это ресурс для разработчиков, веб-дизайнеров и предпринимателей. Думаю, 50 000 подписчиков не могут ошибаться.

Качественные статьи по дизайну и разработке.

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

Очень разнообразный сайт: графика, css, ajax…

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

Сайт с новостями про веб-дизайн и не только. Так же недавно на сайте открылась рубрика с подкастами (правда пока их там только один).

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

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

Кастомные иллюстрации

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

Эстетичные сайты с уникальными иллюстрациями:

getonboardbrt.com – красивое применение акварельной иллюстрации в плоском дизайне

bostonbrt.org – инновационную систему транспорта, бостонский сайт иллюстрирует акварелью

mamyfactory.com – рисованным изображением процесса вязки французский e-Commerce сайт привлекает целевого посетителя

lattice.com – стартапу важно показать фото с рабочим процессом, однако призывы к действию они усилили позитивными иллюстрациями

Веб-ресурсы предприимчивых и многопрофильных фрилансеров

Успешные фрилансеры пошли дальше «свободного специалиста» и организовали свой микро-бизнес. Отобраны персональные сайты многопрофильных экспертов и проекты фрилансеров-предпринимателей.

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

После 15 лет фриланс-писательства Кэрол создает проект Freelance Writers Den, помогающий копирайтерам поднять доходы. Запустила партнерскую программу. В сообществе уже +1,100.

Kamila Gornia

Сайт маркетингового стратега и бизнес-тренера. Камила заинтересовалась онлайн-маркетингом с 12 лет, открыла 3 прибыльных бизнеса, имеет почти миллионный доход. Запустив Heart Behind Hustle вдохновляет клиентов cвоей напористостью и энергией. Фрилансер-предприниматель призывает стремиться к лидерству сферах, которые нравятся и в итоге добиваться финансовых результатов.

Creative Revolt

«Креативный мятеж» когда-то уволенной бизнесвумен. Сайт четко доносит идеи. Пурпурные волосы Джордан Ропер нашли отражение в дизайне, начиная от фавикона до цветовой палитры сайта. Creative Revolt – означает иной и серьезный подход к бизнесу.

Hannah Seymour

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

Giada Correale

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

Bucket List Bombshells

Сайт двух подруг – новаторов в области удаленной работы. Их аудитория: представительницы «цифрового поколения» миллениалов. С 2013-го развивали бизнес, позволивший работать через Интернет… путешествуя по свету (и не как рюкзачники или бюджетные туристы).

Демо

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

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

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

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

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

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

Лучшие практики для демо

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