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

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

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

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...

39 Комментарий
старые
новые
Встроенные Обратные Связи
Все комментарии
nina postnikova
nina postnikova
1 год назад

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

iStroller
iStroller
1 год назад

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

Gres
Gres
1 год назад

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

Bear52
Bear52
1 год назад

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

✡Ոթℴթ∋চҿ✡
✡Ոթℴթ∋চҿ✡
1 год назад

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

✡Ոթℴթ∋চҿ✡
✡Ոթℴթ∋চҿ✡
для  ✡Ոթℴթ∋চҿ✡
1 год назад

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

ᚤᚳᛊᚷ_ᛈᚱ
ᚤᚳᛊᚷ_ᛈᚱ
1 год назад

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

ᚤᚳᛊᚷ_ᛈᚱ
ᚤᚳᛊᚷ_ᛈᚱ
для  Proper
1 год назад

Да, бывает такое с Освальдом, сам втыкался, когда ставил его в ЦСС, а он на другой машине «отпадал».
Говоря о несбалансированности, я имел в виду не САМИ шрифты, а, скорее, соотношение размеров и начертаний — т.е. болда с нормалом. Но, повторюсь, это субъективно.

ᚤᚳᛊᚷ_ᛈᚱ
ᚤᚳᛊᚷ_ᛈᚱ
для  Proper
1 год назад

Извини, Глагнэ, не сразу отвечаю — работоморц.
По поводу засечковых шрифтов — ессно, строгие шрифта итальянской, например, группы всегда будут выглядеть несколько академично. Можно попробовать «наш ответ итальянской готике» — группу Лазурский, но не уверен, что легко сопрягутся с простым ариалом. Может, попробовать что-то вроде используемого в логотипе Vogue? Забыл, как называется. Строгие линии с четкой кривизной, прямые несглаженные засечки? Но опять же — не факт, надо пробовать.

Кстати, я один раз вышел из положения, применив микрософтовскую группу Segoe UI, поиграв с лайт-начертанием и нормалом. Ну, короче, по заветам МодернЮИ-интерфейса «десятки». Ничего так смотрелось — но это крайний случай и вообще копиратство. )))

Anunah
Anunah
1 год назад

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

Инфарх
Инфарх
1 год назад

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

Gadina
Gadina
1 год назад

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

smll
smll
1 год назад

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

smll
smll
для  Proper
1 год назад

извиняюсь
оффтоп…
а по теме — мне всё нравится, я бы не улучшала дизайн
всё очень гармонично

Владимир
Владимир
1 год назад

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

ZIL.ok.130
ZIL.ok.130
1 год назад

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

EvilTeacher
EvilTeacher
1 год назад

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

Xenophob
Xenophob
1 год назад

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

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

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

Небритое прямоходящее
Небритое прямоходящее
1 год назад

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

Небритое прямоходящее
Небритое прямоходящее
для  Proper
1 год назад

Во:
comment image
Но это UC в мобильном режиме, другие бровзеры не знаю.

Небритое прямоходящее
Небритое прямоходящее
для  Proper
1 год назад

Моя коробка не показатель, тащемта. То есть показатель, но в другую сторону.
Lenovo P90, битый, топленый, ведро не обновлялось, система тоже, UC ломаный, проц модели idiot outside intel inside.
Так и живём, хехе.

Небритое прямоходящее
Небритое прямоходящее
для  Proper
1 год назад

Мобильная Опера вроде нормально отображает.

Небритое прямоходящее
Небритое прямоходящее
для  Proper
1 год назад

Угу.

Небритое прямоходящее
Небритое прямоходящее
для  Proper
1 год назад

Шеф, усё пропало понятно. Это режим UC «могиль мобильный», он всё так форшмачит. И на WIWH ещё цветочки, хехе.

Небритое прямоходящее
Небритое прямоходящее
для  Proper
1 год назад

Неа. Зато если отключить «режим: мобильный», то шрифт становится как в Опере.

Небритое прямоходящее
Небритое прямоходящее
для  Proper
1 год назад

Пробовал, но у меня в ём глючит копи/паста (по тексту не ловится и съезжает выделенное) и в Минте нет встроенного буфера обмена. А так хорош, да. Ещё Пюре Pure browser тоже неплохой, нмвз.

i РобаД〄
i РобаД〄
для  Proper
1 год назад

Не в тему))
Петя А(кажисть так) страшен? У меня старший в буке накопал что то и грит — это он.
Что то найписал и кинул на стол и сказал- не удалять, ибо это блокирует его.
Я могу скинуть на почту то что он накарякал? с целью поцсмотреть, действительно ли это то , о чём он гогорит?(в смысле блокирует Петю)
Правда что то ящика не видю гуда скинуть(

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