897

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

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

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

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

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

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

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

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

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

Это простая редизайн для страницы Google, ориентированная только на поле ввода поиска.

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

Результат - интересный способ повторного поиска.

Приложение Gmail

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

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

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

Не говоря уже о гладком дизайне материала цветовой схемы.

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

Редизайн фирменного стиля Google

Вот еще один редизайн Google, который я хотел бы добавить.

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

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

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

Twitter UX

У Twitter есть множество функций UX, охватывающих их рабочий стол и мобильные интерфейсы.

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

Это включает в себя полосу прокрутки и кнопки для редактирования вашего профиля.

И когда вы прокручиваете вниз, есть даже заполнители для твитов.

Современная редизайн Twitter

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

Он действительно переворачивает интерфейс Twitter на голове.

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

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

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

Таким образом, они также обрабатывают мобильных пользователей по-разному.

Сайт FreeCodeCamp

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

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

Я не могу сказать, если это лучший или худший дизайн.

Это потрясающе по-разному, а также очень отличается.

Это стоит взглянуть, если вы знакомы с оригинальной компоновкой.

Пользовательский интерфейс Spotify Artist Page

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

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

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

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

Unsplash Редизайн

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

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

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

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

Концепция IMDb

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

Но этот дизайн действительно выглядит впечатляюще.

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

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

Редизайн LinkedIn

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

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

Простые цвета с простым в использовании интерфейсом.

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

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

Редизайн YouTube

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

Это действительно выглядит намного чище, чем современная главная страница YouTube.

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

Он также на 100% свободен от JavaScript, что довольно удивительно.

Ни одна из ссылок или кнопок не работает - так что это неприменимо.

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

0 комментариев

Написать сообщение

Пожалуйста, оцените по 5 бальной шкале