Серия Landing Page продолжается. Узнайте, как разбить этот профессиональный дизайн, чтобы вы могли работать с ним быстро и легко.

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

Зачем ломать вещи?

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

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

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

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

Расположение

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

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

Панель навигации

Панель навигации можно разделить на 3 части. Во-первых, это логотип, по которому, как и ожидалось, можно перейти на домашнюю страницу. Вторая часть — это навигационные ссылки, на которые, как показано в дизайне, можно навести курсор, чтобы получить доступ к тому, что показано ниже. В третьей части есть действия, такие как поиск, вход и, возможно, выход, а также призыв к действию (CTA).

Логотип
Логотип будет размещен в якоре <a>, а ссылка href "/" приведет нас к главному меню. Это будет сидеть с левой стороны.

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

Действия
Элементы действий расположены справа. Показ того, вошел ли пользователь в систему, потребует от нас сохранения данных на стороне клиента, и мы узнаем, как это сделать позже. Поскольку Svelte рендерится как на интерфейсе, так и на сервере, могут возникнуть проблемы, поскольку на сервере нет localStorage.

Выпадающий список

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

Ссылки маленькие, а стрелки будут анимироваться. Мы можем анимировать стрелки, используя HTML и Tailwind, без необходимости генерировать svgs.

Левая сторона
У нас есть ссылки со стрелками, которые, вероятно, будут иметь какую-то анимацию.

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

Как это сделать:

Мы будем брать данные из-за пределов навигации и передавать их наследующим компонентам. Эти данные будут в формате JSON и будут выглядеть примерно так:

var data = {
	name: "COMPANY NAME",
	logo: "logo.svg",
	cta : {
		name: "Try free",
		link: "/contact-us?from=cta"
	},
	links : [
		{
			title: "Services",
			subtitle: "Choose from the services we provide.",
			links: [{name: "Find a service that fits you",link:"/choose-us"}],
			variable_content: {
				type: "blog_item",
				title: "Dare to dream big with Circovent Think®",
				img: "./img.svg",
				cta: {
					name: "Read more",
					link: "/blog/about-circovent-think"
				}
			}
		}
	]
}
</script>

Затем мы можем расположить компоненты в такой структуре.

Nav(data="json")
	NavBar()
		NavLogo(src="data.logo")
		NavBlock(src="data.titles")
		NavActions(src="links")
			NavUser
			NavSearch
			CTA
	NavOverview
		NavOverviewLink
		NavVariableContent

Внешняя оболочка Nav или навигация будет содержать два компонента.

Navbar - это то, что содержит logo, Navblock, у которого есть видимые заголовки ссылок, и при наведении курсора будет отображаться NavOverview, а действия, которые содержат CTA.

Поскольку нам нужно держать обзор открытым, это создаст несколько проблем, но мы рассмотрим, что делать позже.

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