Здравствуйте.

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

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

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

Дизайн макет для вёрстки сайта - EducationWorld

Что было сделано

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

Карта сайта - EducationWorld

Далее разработан логотип — простой, но точно отражающий суть этого бизнеса.

Логотип - визитка Логотип - лист Логотип - журнал Логотип - вывеска

Далее разработан прототип (схема текстов и изображений). Следующим этапом на основе прототипа отрисовывался дизайн.

  • Изображение макета (компьютерная версия)

    Компьютерный дизайн сайта — Образование без границ
  • Изображение макета (мобильная версия)

    Мобильный дизайн сайта — Образование без границ

Скачать макет

Дизайн-макет распространяется по лицензии CC BY 3.0 — авторство в футере должно быть сохранено.

Скачать html-шаблон по этому дизайн-макету

Стоимость шаблона: бесплатный (CC BY 3.0).

Поделитесь статьёй в соц. сетях:

Вконтакте
linkedin
Одноклассники

Другие материалы по этой теме:

Если нашли ошибку

Нашли ошибку в тексте? Выделите её мышкой и нажмите сочетание клавиш CTRL+ENTER. Я обязательно исправлю ее и вам будет приятнее читать мои тексты!

Раскрытие информации:

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

Мнения и идеи на этой странице принадлежат автору — я не получаю дополнительных бонусов за положительные отзывы, если вы захотите их оставить :).

Спасибо за заявку!

Заполните форму, нажмите отправить

и я свяжусь с Вами в ближайшее время

Закрыть