Новый дизайн сайтов

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

Если вкратце — что хотелось получить в результате, по сравнению с текущим дизайном а-ля Русский Топ:

1. Уйти от обрезки изображений в фиксированный размер. Это автоматически означает, что вместо верстки из одинаковых ячеек придется делать «плавающую» вёрстку, где карточки новостей разной высоты будут конкурировать за место в ленте на главной.

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

3. Увеличить степень использования площади экрана полезной информацией (в идеале заняв лентой новостей до 100% площади экрана) — причем это надо сделать адаптивно, подстраиваясь к экранам разной ширины и разрешения.

4. Избавиться от страничной навигации в ленте, используя автоматическу подмотку ленты скриптами при скроллинге экрана (это удобно при чтении сайта с мобильных устройств, имещих тачскрины)

В результате получилось нечто вот такое (так это выглядит на экране PC со средним разрешением):

Это вариант плиточного дизайна с динамической версткой (количество колонок зависит от ширины экрана) — но с нюансами:

1. Сбоку от плиток имеется панель с меню сайта и лентой комментариев. Причем на устройствах с широким экраном эта панель по умолчанию выдвинута и убирается кликом на значок с тремя горизонтальными линиями, оставляя весь экран для ленты новостей. На устройствах с узкими экранами панель по умолчанию убрана, и наоборот вызывается кликом на этот значок (причем белая ленточка управления на таких устройствах становится черной и располагается не сбоку, а сверху).

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

3. Используя кнопки масштаба в браузере (Ctrl + и Ctrl -), несложно поменять дизайн с двухколоночного на трехколоночный или, наоборот, на одну колонку.

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

Форматы новостей там сейчас такие:

Стандартный
Изображение
Видео
Цитата
Галерея
Аудио

«Стандартный» отличается от «Изображения» только тем, что в ленте на главной под картинкой показывается начало текста новости.

Формат «Видео» запускает плеер прямо на главной — поэтому картинку-миниатюру для него можно вообще не ставить. Причем специального поля для URL видео там в редакторе нет — вы вставляете URL видео прямо в текст новости, а моторчик автоматически ищет в тексте этот URL и показывает на главной видео с первого найденного URL. Естественно, в тексте может быть несколько видео — на главной будет показано первое.

Формат «Галерея» предназначен для показа галереи из нескольких картинок. Причем на главной показывается прямо первая же галерея, найденная в тексте новости.

«Цитата» — это такой стрёмный формат для показа короткого текста (обычно — какого-то изречения очередного твиттерного идиота) прямо на главной. В отличие от других форматов, не предполагает наличие длиннотекста в новсти, и потому показывается в виде карточки. При этом миниатюра используется в качестве сильно затемненной подложки к карточке.

«Аудио» — это формат для аудио. Как видео, только без видео. Не доделан, но функционал очевиден.

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

Ссылочка на сайт — вот тут. Кликайте и тыкайте. Сообщать о кривизне и своих впечатлениях можно в камментах тут или там.

Источник материала
Настоящий материал самостоятельно опубликован в нашем сообществе пользователем Proper на основании действующей редакции Пользовательского Соглашения. Если вы считаете, что такая публикация нарушает ваши авторские и/или смежные права, вам необходимо сообщить об этом администрации сайта на EMAIL abuse@newru.org с указанием адреса (URL) страницы, содержащей спорный материал. Нарушение будет в кратчайшие сроки устранено, виновные наказаны.

You may also like...

новее старее
Уведомление о
nina postnikova
nina postnikova

А давайте оставим уютненький таким,как ща,а?
Он жеж потому и уютненький,что уютненький………..

iStroller
iStroller

Очень хорошо. Понравилось.

Gres
Gres

лютьшие — фрах кхоростьщехо

Bear52
Bear52

Мне тоже понравилось — только зарегиться не получилось :-(

Прорэбе
Прорэбе

Нужно не просто позырить на новый дезигн, нужно повтыкать, покамментить, запостить статейку, выложить картинку — вкупе эти действа дадут более полную картину.
Но и тут встает вопрсо: что кардинально изменится? Как облèгчится жизнь и камментеж Хоакина Мурьеты простого втыкателя?

Прорэбе
Прорэбе

Глагне не просто адепт учения Догнать И Причинить Добро™…
Он его основоположник.
Мегеге.

alex_cr
alex_cr

Выглядит неплохо, тыкается тоже — во всяком случае, для читающего; как будет для постящего — не знаю. Заметил одно, что цепануло: под концом статьи слишком много места отдано кнопкам предыдущей и следующей статей. Визуально — слишком велик разрыв между телом статьи и комментами. Я бы разделил слой пополам, поставив кнопки прокрутки статей впритык (слева — Prev, справа — Next, возможно, с декоративными стрелками, как в лайтбоксах) и уменьшил бы высоту кнопок до 2/3 от нынешней.
И еще, по шрифтам: возникло легкое ощущение некоторой визуальной несбалансированности шрифтов между хэдерами текстблоков, мэйнтекстом блока и подзаголовками (где дата, автор и т.д.). Но это, возможно, субъективно.

Anunah
Anunah

ПЕРЕСТРОЙКА?!

Инфарх
Инфарх

Да оно и щас неплохо, по крайней мере для прочтения и комментирования.

Gadina
Gadina

с компа новый вариант норм, но решать Глагне, я бы оставил как есть.

smll
smll

Обычно считается что миром управляют президенты….
;)
интересный канал и видос
Как устроен глобальный человеческий курятник?
https://youtu.be/Ue6OX0A6gbQ

Владимир
Владимир

И так и так информативно и интуитивно понятно.

ZIL.ok.130
ZIL.ok.130

Знаш, Глагне — попробуй поставить фон песочный(или самый светлый беж для тулова) и цвет текста 7d(а,в…)0000.
Скока я не ковырялся с фонами и текстами — такое или близкое сочетание — ночью и днём нмвз лучше всего подходит для глаз. Причём без потери контрастности текста.
А боковушки можно сделать с прозрачностью некой.

EvilTeacher
EvilTeacher

Добавил пару комментов в теме на новом сайтике.

Xenophob
Xenophob

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

Ветроид 7, Огнелис 64.0.2

Голосую за оставить как есть.

Небритое прямоходящее
Небритое прямоходящее

На стационаре прикольно, на смарте с UC10.10 полный пинцет.

Чтобы добавить комментарий, надо залогиниться.