Если хотите стать крутым фронтендщиком, клонируйте эти сайты: 17 лучших примеров
Зачем клонировать веб-сайты? Если сайт загружается дольше двух секунд, большинство пользователей не будут ждать: они просто закроют вкладку. Не стоит недооценивать дизайн: он имеет такое же значение, как программирование интерфейса, выполняемого в фоновом режиме.
Coders Hub — это интернет-сообщество для энтузиастов технологий и программистов. Сегодня они делятся своими советами о том, какие сайты нужно клонировать, чтобы получить крутой опыт и хорошее портфолио.
Передаем им слово.
Именно разработчики превращают профессиональный дизайн в работающий сайт. Это очень важная часть работы, так что если вы хотите повысить свою квалификацию — этот навык стоит совершенствовать.
Клонируя сайты, вы получаете важный опыт. Поэтому старайтесь сделать дубли как можно ближе к оригиналу. Попытайтесь воспроизвести меню сайтов, добавьте адаптивный дизайн, мобильную навигацию и сетки.
Вот список сайтов, с которыми следует поработать. Они похожи, но в то же время позволят воспроизвести разные концепции дизайна. Например, у большинства есть:
- большие баннеры на домашней странице;
- большие блоки;
- реверсивные столбцы сетки;
- полное или половинное меню;
- «липкое» или абсолютное позиционирование навигации;
- галереи;
- выпадающее меню / «аккордеоны»;
- второстепенная анимация, например, эффект угасания;
- два столбца сетки;
- адаптивный дизайн.
1Netflix
Если вы авторизировались на сайте, увидите довольно простой дизайн: горизонтальные ряды и галереи с большим баннером.
2Hulu
После входа на сайт вы увидите похожую на Netflix картину. Здесь есть и большой баннер, и основные строчки с видео или TV-шоу.
3Apple
Вот это хороший пример дизайна с большими блоками. Его легко превратить в удобный сайт. Он не перегружен, интуитивно понятен и достаточно прост.
4Airbnb
Airbnb — просто прекрасный сайт. Попытайтесь разложить этот дизайн на меньшие компоненты и увидите, что это сочетание больших и малых рядов. Блоки охватывают разные колонки или целый ряд.
5SpaceX
Суперлегкий дизайн. SpaceX — это, по сути, несколько полноэкранных изображений с исчезающим содержимым и разделом ссылок.
6NVIDIA
Еще один простой, но профессиональный дизайн. Только баннер, макет сетки и строки.
7Razer
Сочетание большого баннера на первой странице, полностраничных разделов и дизайна big box. А, и достаточно нестандартная цветовая гамма.
8Salesforce
Еще один отличный сайт для совершенствования ваших навыков CSS. Сочетание баннеров, строк, столбцов, реверсивных столбцов, дизайн big box. А еще несколько призывов к действию и веселые изображения.
9 Adobe
Еще один сайт с дизайном big box. Также у него есть несколько интересных фоновых градиентов.
10Microsoft
Есть большие баннеры, несколько отдельных разделов и сразу заметный призыв к действию. Достаточно простой, но профессиональный дизайн.
11Blockchain
Дизайн этого сайта совмещает несколько сложных концепций. У него большой баннер, призыв к действию, градиентные эффекты. А еще — дизайн big box в виде ссылок и динамических «аккордеонов». В «аккордеоне» есть не только дополнительная информация, она еще и меняется!
12Paypal
Есть большой баннер, призыв к действию и реверсивные строчки. Простой, но эффективный дизайн.
13Slack
Здесь интересный баннер на первой странице. Есть призыв к действию, кнопка для входа с помощью Google и ряд значков с изображением компаний, использующих Slack. Остальной макет — это простая система сетки с типичным дизайном реверсных рядов. Минимум анимации, например, эффекты наведения.
14Discord
Наверное, мой любимый сайт в списке. У него веселый яркий цвет, минималистичный баннер домашней страницы с призывом к действию, макет реверсивной сетки строк.
15Amazon
Король электронной коммерции. Если вы можете разработать клон Amazon, ваши навыки разработчика интерфейсов просто великолепны.
У этого сайта более сложный макет сетки, строка поиска в навигации, раздел «Рекомендуемое», эффекты наведения, карусели и т.д.
16Playstation
На Playstation.com есть качественный большой баннер, демонстрирующий слайд-шоу с хорошим эффектом затухания. Вы можете кодить это с нуля или использовать любимую библиотеку. Также у сайта есть однострочная галерея, большие баннеры, динамическое содержимое после нажатию, несколько полноэкранных призывов к действию и небольшие анимации.
17Nintendo
Ох, воспоминания детства! Но не будем отвлекаться: у сайта есть красивый яркий баннер домашней страницы с не слишком заметным призывом к действию под ним. Непрерывная прокручиваемая однострочная галерея. Вы можете использовать библиотеку, так как вам не нужно каждый раз создавать колесо заново. Хороший сайт, чтобы попрактиковаться в быстром добавлении элемента в избранное.
Вывод
Мы правда верим, что клонирование одного или нескольких веб-сайтов существенно улучшит ваши навыки. Клонирование сайтов требует много аналитического мышления, поскольку вы разбиваете дизайны на меньшие компоненты. А еще вам нужно выбирать лучшие инструменты для определенных задач и думать об адаптивном дизайне. Итак, независимо от того, работаете вы на фрилансе или в крупной компании, клонирование сайтов поможет вам в профессиональном развитии!
Статья от Coders Hub
Текст адаптировала Евгения Козловская
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: