Зачем клонировать веб-сайты? Если сайт загружается дольше двух секунд, большинство пользователей не будут ждать: они просто закроют вкладку. Не стоит недооценивать дизайн: он имеет такое же значение, как программирование интерфейса, выполняемого в фоновом режиме.
Coders Hub — это интернет-сообщество для энтузиастов технологий и программистов. Сегодня они делятся своими советами о том, какие сайты нужно клонировать, чтобы получить крутой опыт и хорошее портфолио.
Передаем им слово.
Именно разработчики превращают профессиональный дизайн в работающий сайт. Это очень важная часть работы, так что если вы хотите повысить свою квалификацию — этот навык стоит совершенствовать.
Клонируя сайты, вы получаете важный опыт. Поэтому старайтесь сделать дубли как можно ближе к оригиналу. Попытайтесь воспроизвести меню сайтов, добавьте адаптивный дизайн, мобильную навигацию и сетки.
Вот список сайтов, с которыми следует поработать. Они похожи, но в то же время позволят воспроизвести разные концепции дизайна. Например, у большинства есть:
Если вы авторизировались на сайте, увидите довольно простой дизайн: горизонтальные ряды и галереи с большим баннером.
После входа на сайт вы увидите похожую на Netflix картину. Здесь есть и большой баннер, и основные строчки с видео или TV-шоу.
Вот это хороший пример дизайна с большими блоками. Его легко превратить в удобный сайт. Он не перегружен, интуитивно понятен и достаточно прост.
Airbnb — просто прекрасный сайт. Попытайтесь разложить этот дизайн на меньшие компоненты и увидите, что это сочетание больших и малых рядов. Блоки охватывают разные колонки или целый ряд.
Суперлегкий дизайн. SpaceX — это, по сути, несколько полноэкранных изображений с исчезающим содержимым и разделом ссылок.
Еще один простой, но профессиональный дизайн. Только баннер, макет сетки и строки.
Сочетание большого баннера на первой странице, полностраничных разделов и дизайна big box. А, и достаточно нестандартная цветовая гамма.
Еще один отличный сайт для совершенствования ваших навыков CSS. Сочетание баннеров, строк, столбцов, реверсивных столбцов, дизайн big box. А еще несколько призывов к действию и веселые изображения.
Еще один сайт с дизайном big box. Также у него есть несколько интересных фоновых градиентов.
Есть большие баннеры, несколько отдельных разделов и сразу заметный призыв к действию. Достаточно простой, но профессиональный дизайн.
Дизайн этого сайта совмещает несколько сложных концепций. У него большой баннер, призыв к действию, градиентные эффекты. А еще — дизайн big box в виде ссылок и динамических «аккордеонов». В «аккордеоне» есть не только дополнительная информация, она еще и меняется!
Есть большой баннер, призыв к действию и реверсивные строчки. Простой, но эффективный дизайн.
Здесь интересный баннер на первой странице. Есть призыв к действию, кнопка для входа с помощью Google и ряд значков с изображением компаний, использующих Slack. Остальной макет — это простая система сетки с типичным дизайном реверсных рядов. Минимум анимации, например, эффекты наведения.
Наверное, мой любимый сайт в списке. У него веселый яркий цвет, минималистичный баннер домашней страницы с призывом к действию, макет реверсивной сетки строк.
Король электронной коммерции. Если вы можете разработать клон Amazon, ваши навыки разработчика интерфейсов просто великолепны.
У этого сайта более сложный макет сетки, строка поиска в навигации, раздел «Рекомендуемое», эффекты наведения, карусели и т.д.
На Playstation.com есть качественный большой баннер, демонстрирующий слайд-шоу с хорошим эффектом затухания. Вы можете кодить это с нуля или использовать любимую библиотеку. Также у сайта есть однострочная галерея, большие баннеры, динамическое содержимое после нажатию, несколько полноэкранных призывов к действию и небольшие анимации.
Ох, воспоминания детства! Но не будем отвлекаться: у сайта есть красивый яркий баннер домашней страницы с не слишком заметным призывом к действию под ним. Непрерывная прокручиваемая однострочная галерея. Вы можете использовать библиотеку, так как вам не нужно каждый раз создавать колесо заново. Хороший сайт, чтобы попрактиковаться в быстром добавлении элемента в избранное.
Мы правда верим, что клонирование одного или нескольких веб-сайтов существенно улучшит ваши навыки. Клонирование сайтов требует много аналитического мышления, поскольку вы разбиваете дизайны на меньшие компоненты. А еще вам нужно выбирать лучшие инструменты для определенных задач и думать об адаптивном дизайне. Итак, независимо от того, работаете вы на фрилансе или в крупной компании, клонирование сайтов поможет вам в профессиональном развитии!
Статья от Coders Hub
Текст адаптировала Евгения Козловская
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…
