Полезные инструменты для проверки элементов дизайна веб-сайта (и более детального изучения веб-дизайна)

Опросите сайт! Изучите более тонкие детали веб-дизайна

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

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

Какого цвета?

ColorZilla

Страница WebInter-ColorZilla-Addon

Первоначально созданный для Firefox, ColorZilla с тех пор стал доступен в Chrome и связанных с ним браузерах.

WebInter-ColorZilla-InstallPage

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

WebInter-ColorZilla-Палитры

Какой шрифт?

WhatFont? (Хром)

WebInter-WhatFont-AddonPage

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

Запрос WebInter-WhatFont-Install

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

Кнопка WebInter-WhatFont-Exit

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

WebInter-WhatFont-FontDetails

Поиск шрифтов (Firefox)

WebInter-Finder-О дополнении

Эксклюзивное расширение для Firefox, аналогичное WhatFont в Chrome?

WebInter-Finder-Install Prompt

Установите расширение, и у вас появится новый параметр в контекстном меню, вызываемом правой кнопкой мыши.

WebInar-Finder-щелкните правой кнопкой мыши

Когда вы найдете то, что хотите идентифицировать, выделите это, а затем откройте доступные вам варианты. "Analyze Selection" расскажет вам все, что вы когда-либо хотели знать.

WebInter-Finder-Font Details

Детали, которые он обеспечивает, не что иное, как ошеломляющие. Если текст помечен как "(стек)", тогда он выберет первый шрифт в стеке, который вы установили. Стеки обычно заканчиваются общим термином, например "без засечек" в приведенном выше примере. В том маловероятном случае, если один из других шрифтов в стеке не будет установлен, он вернется к системе без засечек по умолчанию.

WebInter-FFinder-WikipediaMessedUp

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

WebInter-Finder-Disable Font 1

"Заменить шрифт (весь DOM)" позволяет вам изменить каждый экземпляр шрифта на странице. Не являетесь поклонником Roboto (который мы используем в качестве основного шрифта без засечек)? Выделите эту опцию, нажмите "Roboto" в списке шрифтов, представленных на странице, и введите название шрифта, который вы хотите видеть. Опять же, это не навсегда, но позволяет вам поиграть с дизайном ваших любимых веб-сайтов, пусть даже временно.

WebInter-Finder-Disable Font 2

WebInar-Finder-Отключить шрифт 3

Измерение сайта

Линейка страниц (Chrome)

WebInter-PRuler-WebSTore

"Линейка? Действительно?" мы слышим, как вы спрашиваете. Page Ruler - это линейка экрана, которая немного отличается от того, как она звучит. Фактически, мы также полностью понимаем любой первоначальный скептицизм.

Позиционирование имеет значение в Интернете. Элементы страницы должны быть расположены именно так, иначе они не будут такими привлекательными, как могли бы. Хотя эта информация особенно эзотерична, но Page Ruler делает это возможным.

WebInter-PRuler-NBKWiki

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

WebInter-PRuler-ColorChoices

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

WebInter-PRuler-ChangedColors

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

WebInter-PRuler-ElementMOde

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

MeasureIt (Firefox и Chrome)

WebInter-MeasureIt-AddonDetails

MeasureIt выполняет ту же задачу, что и Page Ruler, и доступен как для Firefox, так и для Chrome.

WebInter-MeasureIt-BrowserUI

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

WebInter-MeasureIt-RulerAdvanced

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

WebInter-MeasureIt-Параметры

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

Заключение

Чтобы получить максимальную отдачу от этих расширений, требуется время, но они предоставляют отличную информацию в пределах легкой досягаемости. Вы быстро с ними разберетесь, но если вам сложно заменить шрифты, помните, что названия должны быть точными. "Comic Sans" не будет работать, тогда как "Comic Sans MS" (как он появляется в Office) будет.

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

Один комментарий

  1. Я также считаю BuiltWith (Chrome) действительно классным инструментом, который расскажет, какие технологии используются на этом веб-сайте.

Комментарии закрыты.