Как создать макет и дизайн веб-сайта (без навыков дизайна)

1656631100 kak sozdat maket i dizajn veb sajta bez navykov dizajna

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

Как создать веб-сайт, если у вас нет навыков веб-дизайна?

Вот несколько вариантов:

  • Вы можете нанять веб-дизайнера, чтобы создать для вас дизайн, но (хорошие) дизайнеры недешевы.
  • Вы можете найти дешевого дизайнера Fiverr или Upwork, но вы знаете, что это может быть рискованно.
  • Или вы можете скачать бесплатный или премиум-тема или шаблон, но иногда они не делают все, что вы хотите.

Еще один вариант для вас – научиться некоторым базовым навыкам верстки и дизайна веб-сайтов, а также создать свой внешний вид.

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

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

Этот метод предполагает:

  • Изучение основ визуального составления веб-сайтов
  • Исследуйте существующие веб-дизайны, чтобы получить вдохновение и идеи для себя.

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

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

Вот основные этапы этого процесса:

  • Определите основы своего веб-сайта
  • Спланируйте макет своего сайта
  • Соберите дизайн вместе
  • Создайте конечный продукт
Просмотрите мой канал YouTube, Coder Coder, чтобы увидеть, как я создаю веб-сайты с нуля с помощью HTML и CSS!

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

Одно важное замечание: я вовсе не предлагаю вам украсть CSS или изображения, которые вам не принадлежат. (С одной стороны, вы ничего не научитесь с помощью копирования и вставки.)

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

Определите основы своего веб-сайта

Прежде чем начать выбирать цвета или шрифты, давайте ответим на некоторые общие вопросы об этом веб-сайте:

1. Какой бизнес будет рекламировать сайт?

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

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

2. Какие страницы будет иметь веб-сайт?

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

Лучший способ выяснить страницы и другие общие структурные аспекты сайта – провести быстрое онлайн-исследование.

Исследуйте существующие веб-сайты

Просмотрите другие существующие веб-сайты для подобного бизнеса. Просмотрите 3–4 из этих веб-сайтов и посмотрите, какие страницы у них есть.

Попытайтесь обратить внимание на дизайн веб-сайта и сделать заметки относительно:

  • Какие страницы веб-сайта,
  • Какой общий стиль,
  • Как легко ориентироваться и находить вещи,
  • И все остальное, что вызывает ваш энтузиазм.

Хорошим местом для поиска примеров веб-сайтов является Theme Forest. В нем масса бесплатных и премиальных шаблонов веб-сайтов и тем WordPress. И если вы остановитесь на самых популярных темах, вы знаете, что они будут примерами хорошего дизайна.

Вот один пример кофейни по теме, которую я нашел.

The7

CwDQtWgEDoAuCV2QbGOwk4-2haLo6ShbjfZA

Страницы:
Одностраничный веб-сайт с разделами: Главная страница, О нас, Расположение, Предложения, Меню, Новости, Пресса, Сообщения в блоге

Стиль:
Современно и чисто, с хорошими фото

Навигация:
Легко ориентироваться

А вот несколько веб-сайтов, которые я нашел с помощью поиска «кафе в Чикаго»:

Кофе в червоточине

KgKQlk0O0aC8CCXbyV8DaLxUBHfDncZ6rO6x

Страницы:
Домашняя страница, блог, местонахождение/контакт, вакансии

Стиль:
Вроде бы современный; фотографии магазина более ностальгические

Навигация:
Не сразу видно, что это кафе. Несколько сложно ориентироваться на сайте.

Улицы кафе

wJ9dMdP7xxHxtoCB2a9EYDTHUsd0WoaokzgI

Страницы:
Одностраничный сайт, разделы: Главная, Кафе (О), Меню, Жаркое, Машина времени (соки), Контактная форма

Стиль:
Простой и современный (Squarespace)

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

Build Coffee

HDMc3Ey2CObm46o17kvJHGWhgKjrxdoRgPn-

Страницы:
Одностраничный веб-сайт, разделы: Домашняя страница, О нас, Часы работы, Местоположение, Магазин, Кейтеринг, События, Контакты

Стиль:
Простой дизайн – это сочетание фотографий во всю ширину между участками белого фона с текстом.

Навигация:
Достаточно легко ориентироваться

Кофе Савада

PZRfYxllDpERdb8oB8I3UuG2F-fT2BX73eMZ

Страницы:
Домашняя страница, информация, еда и напитки, пресса, контакты и часы работы, наши рестораны, вакансии

Стиль:
Дизайн в основном связан с фотографией, а текст кажется почти запоздалым мнением.

Навигация:
Немного тяжело ориентироваться – я почти не видел гамбургерного меню в правом углу.

Запишите заметки для своего веб-сайта

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

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

Что касается Central Coffee, я думаю, что мы будем придерживаться простого одностраничного веб-сайта со следующими разделами:

  • Заголовок
  • Домой
  • О
  • Меню
  • Расположение/Контакт
  • нижний колонтитул

Спланируйте макет своего сайта

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

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

Мне нравится верхняя панель навигации на демонстрационной странице Seven Coffee и веб-сайт Caffe Streets.

JjSmjbTYDE5Qd9i4cH9W4rpKDxLXk92VTw-s
hszTPLF2H01n7v--G7mXhzQxyUCxK-5ARteB

Однако на обеих страницах он расположен по центру, и я бы хотел, чтобы он был выровнен слева, чтобы сначала был логотип, а разделы – после.

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

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

Домой

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

jlAIYSPgnei-1Wt4Ys51MUIBBGDqu7o1dlsU

Я думаю, что здесь у меня будет изображение в фоновом режиме (например, Build Coffee) с текстом поверх него. Это будет одинаково как на компьютере, так и на мобильном устройстве.

О

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

Каждый веб-сайт обрабатывает меню по-разному:

  • Seven Coffee имеет сетку пунктов меню с ценами,
  • Caffe Streets просто имеет список товаров,
  • и ссылки Build и Sawada на PDF-файлы меню.

Лично я ненавижу, когда я просматриваю сайт на своем телефоне, и мне нужно загрузить PDF. Я придерживаюсь упрощенного меню с напитками и продуктами питания и добавлю несколько фотографий.

Расположение/Контакт

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

Размещение призыва к действию внизу ответит на вопрос «что теперь?» Это поможет посетителям действовать, в частности, получить указания в кафе и, надеюсь, посетить!

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

Полный каркас

Вот полные каркасы настольной и мобильной версии сайта. Я создал их с помощью бесплатного онлайн инструмента Mockflow. Они позволяют вам создать один проект бесплатно, и у них есть платные планы, если вы хотите более одного проекта.

Он достаточно прост в использовании, и мне нравится вариант схематического стиля, потому что это весело?

tqWcD2VYl9l0F5NgsJ8FSnP9Cl3eqUrd1dr5
2t6gYI5AIAl1X6q0j9zIU1gn22kejMY7rYJo

Определите основные характеристики конструкции

Опять же мы не будем создавать сверхдетализованные и причудливые стили. Однако нам нужно выяснить некоторые основания. Такие вещи, как:

Цветовая схема

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

Если вам нужно цветовое вдохновение, у Canva есть несколько образцов цветовых палитр, которые вы можете попробовать.

Для веб-сайта Central Coffee я собираюсь использовать осеннюю коллекцию по ссылке Canva – это теплая цветовая палитра, основанная на коричневых.

RxiZDgixwfbfhNyCxovKQML3ven3LRzYNoSJ

Я пытаюсь вызвать то ностальгическое, уютное чувство, которое ассоциируется с кафе.

Шрифты

Возвращаясь к сайтам, почти все они используют шрифт без засечек (буквы, не имеющие «зарубок» или конечных полос в тексте, похожем на пишущую машинку).

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

Шрифты Google – отличное место для поиска шрифтов, которые можно бесплатно скачать на свой веб-сайт. Только не набирайте слишком много, потому что каждое семейство шрифтов, вес и стиль добавят дополнительную нагрузку на сайт.

Изображение/Фотография

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

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

Создайте веб-сайт

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

Поскольку у нас нет дизайнера для создания подробных PSD, мы просто начнем создавать веб-сайт из только что сложившихся каркасов.

Вот как я обычно подхожу к созданию передней части сайта:

  1. Настройте файлы веб-сайта
  2. Создание и структурирование папок и файлов.
  3. Запустите бегун задач. (Я использую Gulp для этого проекта.)
  4. Создайте отдельный HTML файл для каждого шаблона.

Затем выполните эти действия для каждого шаблона HTML:

  1. Создайте структурную структуру с базовыми элементами HTML.
  2. Постройте элементы страницы один за другим.
  3. Для каждого элемента добавьте стиль CSS, сначала убедившись, что каждый раздел правильно оформлен.
  4. Проверяйте, как страница выглядит в браузере в процессе работы, продолжая вносить исправления.

Убедитесь, что ваш веб-сайт адаптивный

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

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

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

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

Готовый продукт!

Вот скриншот готового сайта Central Coffee:

JycvLFxLnypcvwpARjmHo6F4U-IRSPIbr1hW

Вы можете проверить настоящий сайт на моей странице Github.io.

Вот так я разработал и создал сайт, не наняв дизайнера.

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

Хочу больше?

◾️ Читайте больше подобных сообщений в моем блоге: Coder-Coder.com.
◾️ Следите за мной в Instagram и Twitter!
◾️ Просмотрите инструкции по программированию на моем канале YouTube.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *