Java, UX, HTML, CSS, WEB-design

10 популярных интерфейсов веб-сайтов, переосмысленных на CodePen


Редизайн популярного интерфейса — отличный способ улучшить свои навыки.

Хотите ли вы отточить свои навыки проектирования макетов или отточить свое мастерство во внешнем интерфейсе, причудливый редизайн — это солидный практический проект.

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

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

Редизайн поиска Google

Печально известная страница поиска Google получает миллиарды просмотров в день. На самом деле 3,5 миллиарда в день, если быть точным.

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

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

Результат — интересный способ переосмыслить поиск.

Приложение Gmail

Поклонникам Google, вероятно, понравится этот обновленный Gmail в том же духе, что и предыдущая ручка.

Но этот отличается полный интерфейс Gmail — так это немного более подробно.

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

Если вы часто пользуетесь Gmail, вы можете даже предпочесть этот редизайн текущему стилю.

Редизайн бренда Google

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

Эта ручка Мохамада Резы Дейлами имеет переработанный логотип Google, измененную цветовую схему и ссылки на все их различные функции поиска.

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

Что мне нравится в этом редизайне, так это то, что он уникален и соответствует стилю Google. Да, и весь код тоже с открытым исходным кодом.

Твиттер UX

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

Это переосмысление пользовательского интерфейса Twitter с меньшим дизайном карточек.

Это включает в себя полосу прокрутки вместе с кнопками для редактирования вашего профиля. А когда вы прокручиваете вниз, вы видите даже заполнители для твитов. Как круто!

Современный редизайн Твиттера

А теперь кое-что более техническое: взгляните на этот редизайн Twitter.

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

Мне нравится меню, нравится временная шкала и очень нравятся простые эффекты наведения/фокуса. Единственное, чего не хватает? Это не адаптивная страница.

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

Домашняя страница FreeCodeCamp

Разработчики любят FreeCodeCamp за бесконечную поддержку новых разработчиков и дружелюбный подход к благотворительности.

Пользователю CodePen Джиане, должно быть, очень понравился сайт, так как они полностью изменили дизайн домашней страницы FreeCodeCamp.

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

Пользовательский интерфейс страницы исполнителя Spotify

Веб-макет Spotify — еще один широко известный интерфейс, и Адам Ловенталь взял на себя задачу воссоздать страницу исполнителя Spotify.

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

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

Unsplash редизайн вещи

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

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

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

Концепция IMDb

Не все в этом редизайне IMDb функционально. Вот это минус.

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

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

Редизайн LinkedIn

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

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

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

Если вы хотите немного попрактиковаться в HTML/CSS/JS, возможно, разветвите этот и попробуйте добавить свои собственные функции.

Редизайн YouTube

Для другого дизайна, который не полностью готов (но все еще выглядит потрясающе), я должен порекомендовать этот редизайн YouTube.

Это действительно выглядит намного чище, чем современная домашняя страница YouTube. Конечно, некоторые изображения не будут загружаться, но вы все равно получите представление о макете. Он также на 100% свободен от JavaScript, что довольно круто.

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

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 10 популярных интерфейсов веб-сайтов, переосмысленных на CodePen

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье 10 популярных интерфейсов веб-сайтов, переосмысленных на CodePen

Название: 10 популярных интерфейсов веб-сайтов, переосмысленных на CodePen . Краткое описание: ⭐ Редизайн популярного интерфейса — отличный с . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»